/* =============================================================================
   VINIR — Landing site styles
   Brand tokens og responsive utilities.

   Letur: Instrument Serif (display), Geist (body), Geist Mono (eyebrows).

   W110: Self-hosted Instrument Serif — ef Google Fonts fail (adblock,
   slow connection, network hicup) þá er self-hosted eintak sem fallback.
   Þetta tryggir að wordmark og H1 birtist alltaf í Instrument Serif á
   landing pages, óháð Google Fonts availability. */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/InstrumentSerif-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/InstrumentSerif-Italic.ttf') format('truetype');
}

/* Litir Vinir 2.0: Petról #0F4C5C (primary), Bleikur #FCB8CA (companion),
   Turkís #3E939B (accent), warm cream bakgrunnur.
   Mobile-first; breakpoint @1024px færir í desktop layout. */

/* ---------- Design tokens — Vinir 2.0 palette ---------------------------------- */
:root {
    /* Vinir 2.0 canonical tokens — heil litapalletta úr appinu */
    --petrol:        #0F4C5C;   /* Aðallitur — wordmark, dökki vinurinn */
    --petrol-light:  #1A6478;   /* gradient top / hover light */
    --petrol-dark:   #093440;   /* gradient bottom / pressed */
    --bleikur:       #FCB8CA;   /* Annar litur — ljósi vinurinn, hlýja */
    --turkis:        #3E939B;   /* Milli-tónn — tákn, tenglar */
    --ljosturkis:    #BBDDE6;   /* Mjúk fylling — spjöld á dökku */
    --ljosbleikur:   #FCD9E1;   /* Mjúk fylling — hausar */
    --rosahvitt:     #FBE7EC;   /* Bakgrunnur — hlutlaust yfirborð */
    --cream:         var(--rosahvitt); /* Alias — Rósahvítt er nýi bakgrunnurinn */

    /* Legacy aliases — kept svo eldri selektors með gamla token-nöfn brotni
       ekki, en pointa á nýju Vinir 2.0 paletturna. Ný CSS notar canonical
       tokens hér að ofan. */
    --red:           var(--petrol);
    --red-grad-top:  var(--petrol-light);
    --red-grad-bot:  var(--petrol-dark);
    --eyebrow-red:   var(--petrol);
    /* AA6 Q12: --pink-blossi (hero + 404 bakgrunnur) lækkaður úr fullum
       Bleikur (#FCB8CA) niður í --pink-softer (#FDDDE7) — ljósari pinki
       sem matchar betur app-Vinir 2.0 cream tones og lætur Petról-textann
       standa fram með skýrari contrast. Hin pink token-arnir halda
       núverandi gildum. */
    --pink-blossi:   var(--pink-softer);
    --pink-solberk:  #F58BA8;          /* deeper pink fyrir hover/accent */
    --pink-soft:     #FCC8D7;          /* milder pink */
    --pink-softer:   #FDDDE7;          /* paler — núna líka bakgrunnur hero */
    --pink-softest:  #FFEFF3;          /* near-cream pink */
    --mjolk:         var(--cream);
    --ink:           var(--petrol);    /* Petról er aðal ink lit */
    --ink-on-cream:  #4A6A72;          /* muted petrol-grey fyrir secondary text */
    --ink-on-pink:   var(--petrol);    /* Petról stendur á bleikum bg */
    --eyebrow-pink:  #6E8B92;          /* muted petrol fyrir eyebrows á pink */
    --shadow-cta:    0 14px 30px -12px rgba(15, 76, 92, 0.4);

    --serif:  "Instrument Serif", ui-serif, Georgia, serif;
    --sans:   "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono:   "Geist Mono", ui-monospace, "SF Mono", monospace;

    --container: 1120px;
}

/* ---------- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--mjolk);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: inherit;
    transition: opacity .15s ease;
}
a:hover { opacity: .78; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.02em;
}

p { margin: 0; line-height: 1.55; }

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: none;
}

/* Skip-link fyrir keyboard navigation */
.skip-link {
    position: absolute;
    top: -100px; left: 16px;
    background: var(--ink); color: #fff;
    padding: 10px 14px; border-radius: 8px;
    font-family: var(--sans); font-size: 14px;
    text-decoration: none; z-index: 1000;
}
.skip-link:focus { top: 16px; }

/* ---------- Reusable atoms ------------------------------------------------- */
.wordmark {
    font-family: var(--serif);
    font-size: 32px;
    color: var(--red);
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
}
.wordmark .italic-i { font-style: italic; }

.eyebrow {
    font-family: var(--mono);
    font-size: clamp(12px, 1.6vw, 14px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--eyebrow-red);
    font-weight: 500;
}

/* AA6 W54: .italic-red í milda Bleikur (pink-soft) — passar við italic i í
   wordmark. Feature-row titlar, closing o.fl. nota þennan. Bæði class heiti
   halda sér fyrir bakvirkni.
   AA6 W60: „Oftar" í hero fer þó í Petról — sjá override neðar. */
.italic-red { font-style: italic; color: var(--pink-soft); }
.italic-pink { font-style: italic; color: var(--pink-soft); }

/* AA6 W99: Hero H1 „Hittumst *oftar*" — italic hlutinn í fullum Bleikur
   (#FCB8CA), sami tónninn og pink „kallinn" í hug-glyph logoinu fyrir ofan.
   Var áður í Petról (W60) en Berglind vill matchea logo litnum. */
.hero__h1 .italic-red { color: var(--bleikur); }

/* CTA pill */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--red);
    color: #fff;
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(17px, 2vw, 21px);
    padding: clamp(13px, 2vw, 17px) clamp(22px, 3vw, 30px);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-cta);
}
.btn--small {
    font-size: 16px;
    padding: 12px 20px;
    gap: 8px;
}
.btn--inverse {
    background: #fff;
    color: var(--red);
}
.btn__icon {
    width: 1.2em; height: 1.2em;
    fill: currentColor;
}

/* iPhone-rammi utan um skjáskotin */
.phone {
    width: 280px;
    border-radius: 38px;
    background: var(--ink);
    padding: 8px;
    box-shadow:
        0 35px 70px -25px rgba(26, 10, 16, 0.35),
        0 0 0 1px rgba(26, 10, 16, 0.06);
}
.phone img {
    width: 100%;
    border-radius: 32px;
    display: block;
}

/* ---------- Layout containers --------------------------------------------- */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ---------- NavBar -------------------------------------------------------- */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px clamp(24px, 4vw, 64px);
    gap: 16px;
}
.nav__links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 38px);
    font-size: 16px;
}
.nav__link {
    color: var(--ink-on-cream);
    text-decoration: none;
    font-weight: 500;
}
.nav--on-dark .nav__link { color: rgba(255, 255, 255, 0.85); }
.nav--on-dark .wordmark   { color: #fff; }

/* Fela auka-hlekkjana á þröngu skjái — sýna bara CTA */
@media (max-width: 640px) {
    .nav__link--hide-mobile { display: none; }
}

/* ---------- Hero ---------------------------------------------------------- */
.hero {
    background: var(--pink-blossi);
    position: relative;
    overflow: hidden;
}
.hero__inner {
    max-width: 1100px;
    margin-inline: auto;
    padding: 20px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hero__hug {
    width: clamp(120px, 22vw, 184px);
    height: clamp(120px, 22vw, 184px);
    margin-bottom: 6px;
}
.hero__hug svg { width: 100%; height: 100%; }

.hero__h1 {
    font-size: clamp(56px, 12vw, 112px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--ink);
    white-space: nowrap;
    margin: 0;
}
.hero__lede {
    font-size: clamp(18px, 2.5vw, 23px);
    line-height: 1.5;
    color: var(--ink-on-pink);
    max-width: 600px;
    margin: 22px 0 0;
}
.hero__cta { margin-top: 30px; }
.hero__sub {
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(26, 10, 16, 0.5);
    text-transform: uppercase;
}

/* Fanned phones — stafla á farsímum, blævængur á desktop */
.hero__phones {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 28px;
    margin-top: 36px;
    padding-bottom: 0;
}
.hero__phones .phone { width: clamp(180px, 22vw, 260px); }

@media (max-width: 768px) {
    /* Á farsímum sýnum bara einn (HomeView) til að halda hero stuttu */
    .hero__phones { flex-direction: column; align-items: center; }
    .hero__phones .phone--side { display: none; }
}
@media (min-width: 769px) {
    .hero__phones .phone--left   { transform: rotate(-5deg) translateY(28px); z-index: 1; }
    .hero__phones .phone--center { transform: translateY(-6px); z-index: 2; }
    .hero__phones .phone--right  { transform: rotate(5deg) translateY(28px); z-index: 1; }
}

/* ---------- Features ------------------------------------------------------ */
.features {
    background: var(--mjolk);
}
.features__title {
    text-align: center;
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(60px, 10vw, 90px) 24px 30px;
    font-size: clamp(40px, 7vw, 76px);
    line-height: 1.0;
}
.features__rows {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 24px 40px;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: clamp(32px, 6vw, 80px);
    justify-content: center;
    padding: clamp(40px, 8vw, 70px) 0;
}
.feature-row__text {
    flex: 1;
    max-width: 460px;
}
.feature-row__title {
    font-size: clamp(36px, 6vw, 60px);
    line-height: 1.02;
    color: var(--ink);
    margin: 16px 0 0;
}
.feature-row__body {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
    color: var(--ink-on-cream);
    margin: 22px 0 0;
}
.feature-row__phone {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: clamp(220px, 30vw, 360px);
}
.feature-row__phone .phone { width: 100%; }

@media (max-width: 768px) {
    /* Stafla lóðrétt á farsímum, mynd fyrir ofan texta */
    .feature-row,
    .feature-row--flip {
        flex-direction: column;
        text-align: center;
    }
    .feature-row__text { order: 2; }
    .feature-row__phone { order: 1; width: 240px; }
}
@media (min-width: 769px) {
    .feature-row--flip { flex-direction: row-reverse; }
}

/* ---------- Closing CTA --------------------------------------------------- */
.closing {
    background: linear-gradient(180deg, var(--red-grad-top), var(--red-grad-bot));
    text-align: center;
    padding: clamp(70px, 12vw, 110px) 24px;
    color: #fff;
}
.closing__hug {
    width: clamp(90px, 14vw, 120px);
    height: clamp(90px, 14vw, 120px);
    margin: 0 auto 18px;
}
.closing__hug svg { width: 100%; height: 100%; }
.closing__h2 {
    font-size: clamp(44px, 8vw, 84px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0;
}
.closing .italic-pink { color: var(--pink-soft); font-style: italic; }
.closing__cta { margin-top: 36px; display: flex; justify-content: center; }

/* ---------- Footer -------------------------------------------------------- */
.footer {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--sans);
}
.footer__top {
    max-width: var(--container);
    margin-inline: auto;
    padding: 48px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.footer__top .wordmark { color: #fff; font-size: 30px; }
.footer__links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    font-size: 15px;
    flex-wrap: wrap;
}
.footer__links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}
.footer__links a.cta { color: var(--pink-soft); font-weight: 600; }
/* W108: Social media links — Instagram + TikTok í footer */
.footer__socials {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 24px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.footer__socials a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.footer__socials a:hover {
    color: var(--pink-soft);
}
.footer__socials svg {
    flex-shrink: 0;
}
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 24px;
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* ---------- Legal / Support pages ----------------------------------------- */
.page {
    background: var(--mjolk);
    color: var(--ink);
    min-height: 60vh;
}
.page__inner {
    max-width: 760px;
    margin-inline: auto;
    padding: clamp(40px, 8vw, 80px) 24px clamp(60px, 10vw, 100px);
}
.page__eyebrow {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--eyebrow-red);
    margin-bottom: 14px;
}
.page__h1 {
    font-family: var(--serif);
    font-size: clamp(40px, 7vw, 64px);
    line-height: 1.05;
    color: var(--ink);
    margin: 0 0 12px;
}
.page__meta {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-on-cream);
    margin-bottom: 40px;
}
.page__body h2 {
    font-family: var(--serif);
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.15;
    margin: 44px 0 16px;
}
.page__body h3 {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    margin: 28px 0 10px;
    letter-spacing: 0;
}
.page__body p,
.page__body li {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    margin: 12px 0;
}
.page__body ul {
    padding-left: 22px;
    margin: 8px 0 20px;
}
.page__body li { margin: 6px 0; }
.page__body a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* CTA-takkar inni í .page__body eiga ekki að erfa rauðan undirstrik-lit */
.page__body a.btn {
    color: #fff;
    text-decoration: none;
}
.page__body a.btn--inverse {
    color: var(--red);
}
.page__body strong { font-weight: 600; }

.page__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-on-cream);
    text-decoration: none;
    margin-bottom: 24px;
}
.page__back::before { content: "←"; font-size: 16px; }

/* Language toggle (IS / EN) */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(26, 10, 16, 0.15);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 28px;
}
.lang-toggle a {
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--ink-on-cream);
    text-decoration: none;
}
.lang-toggle a.is-active {
    background: var(--ink);
    color: #fff;
}

/* ---------- 404 ----------------------------------------------------------- */
.error {
    background: var(--pink-blossi);
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
}
.error__hug {
    width: 140px; height: 140px;
    margin-bottom: 24px;
}
.error__h1 {
    font-family: var(--serif);
    font-size: clamp(56px, 12vw, 96px);
    color: var(--ink);
    margin: 0 0 12px;
}
.error__p {
    font-size: 18px;
    color: var(--ink-on-pink);
    max-width: 420px;
    margin: 0 0 32px;
}
.error__nav {
    margin-top: 32px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 14px;
    color: var(--ink-on-pink);
    opacity: 0.7;
}
.error__nav a {
    color: var(--ink-on-pink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.error__nav a:hover { opacity: 1; }
.error__nav span { opacity: 0.4; }

/* ---------- Focus accessibility ------------------------------------------- */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================================================
   AA6 W56 — Motion polish

   Brand-driven motion sem gefur síðunni „andardrátt" án þess að vera oflétt.
   Öll hreyfing er slökkt fyrir notendur með `prefers-reduced-motion: reduce`
   (aðgengilegri sjálfgildinu) og öll áhrif sitja utan við layout — hafa aldrei
   áhrif á sizes/positions svo reflow gerist ekki.
   ============================================================================ */

/* AA6 W40/W60: Wordmark er VIN + italic i + R. Italic i í mildum Bleikur
   (pink-soft) svo hann samræmist italic hlutum titla á síðunni. */
.wordmark .italic-i {
    color: var(--pink-soft);
    display: inline-block;
    transition: color 400ms ease-out, transform 400ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {

    /* --- Hero: staggered rise-in við load ----------------------------------
       Fyrsta sekúndan þegar síðan hleðst gefur hlýja „velkominn" tilfinningu:
       eyebrow → title → lede → cta → phones rúlla inn hver á fætur öðrum. */
    @keyframes vin-rise-in {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .hero__hug   { animation: vin-rise-in 900ms cubic-bezier(0.2, 0.7, 0.15, 1) both; }
    .hero__h1    { animation: vin-rise-in 900ms cubic-bezier(0.2, 0.7, 0.15, 1) 140ms both; }
    .hero__lede  { animation: vin-rise-in 900ms cubic-bezier(0.2, 0.7, 0.15, 1) 280ms both; }
    .hero__cta   { animation: vin-rise-in 900ms cubic-bezier(0.2, 0.7, 0.15, 1) 400ms both; }
    .hero__phones{ animation: vin-rise-in 1100ms cubic-bezier(0.2, 0.7, 0.15, 1) 540ms both; }

    /* --- Hero: hug glyph breathes --------------------------------------------
       Micro-life á brand element-inu. Skalar 1.0 ↔ 1.025 á 5s — hægt nóg
       til að vera undirmeðvitund frekar en distraction. */
    @keyframes vin-breathe {
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.025); }
    }
    .hero__hug {
        animation: vin-rise-in 900ms cubic-bezier(0.2, 0.7, 0.15, 1) both,
                   vin-breathe 5s ease-in-out 1.4s infinite;
        transform-origin: center;
    }

    /* --- Hero: phones — engin hreyfing (W105) --------------------------------
       Áður fljótu símarnir upp/niður með `vin-float`; það var fjarlægt til að
       hafa hero-inn kyrran. rise-in animation (sjá `.hero__phones` að ofan)
       heldur áfram — símarnir birtast smjúkt við load og verða síðan kyrrir. */

    /* --- Feature rows: scroll-triggered reveal --------------------------------
       Byrja opacity 0 + translateY 30px, transition til „is-revealed" state
       þegar IntersectionObserver (í index.html) bætir class-inu við. Skiptir
       um allar rows sitt í hvoru lagi svo þær komi ekki allar í einu — snýst
       um hraða inntöku frekar en show. */
    .feature-row {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 850ms cubic-bezier(0.2, 0.7, 0.15, 1),
                    transform 850ms cubic-bezier(0.2, 0.7, 0.15, 1);
    }
    .feature-row.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Sama fyrir features title + closing sections svo hero-transition endi
       ekki abrupt við fyrsta scroll. */
    .features__title,
    .closing__hug,
    .closing__h2,
    .closing__cta {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 800ms cubic-bezier(0.2, 0.7, 0.15, 1),
                    transform 800ms cubic-bezier(0.2, 0.7, 0.15, 1);
    }
    .features__title.is-revealed,
    .closing__hug.is-revealed,
    .closing__h2.is-revealed,
    .closing__cta.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Closing hug fær líka breathe-in eftir að hann er revealed. */
    .closing__hug.is-revealed {
        animation: vin-breathe 5.5s ease-in-out 0.6s infinite;
        transform-origin: center;
    }

    /* --- Wordmark: micro-personality á hover ---------------------------------
       Italic i lyftist smá og hallast létt — hint um leikandi brand karakter.
       Aðeins á hover-capable devices. */
    @media (hover: hover) {
        .wordmark:hover .italic-i {
            transform: translateY(-2px) rotate(-4deg);
        }
    }

    /* --- CTA button: lift á hover -------------------------------------------- */
    .btn {
        transition: transform 220ms cubic-bezier(0.2, 0.7, 0.15, 1),
                    box-shadow 220ms ease-out;
    }
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(15, 76, 92, 0.26);
    }
    .btn:active {
        transform: translateY(0);
        transition-duration: 100ms;
    }

    /* --- Feature phone hover tilt (desktop hover-capable only) --------------
       Létt lift + smá halla að miðju sem hint um að þetta séu „lifandi"
       preview myndir. Á farsíma (engin hover) sést þetta ekki. */
    @media (hover: hover) and (min-width: 769px) {
        .feature-row__phone .phone {
            transition: transform 550ms cubic-bezier(0.2, 0.7, 0.15, 1);
        }
        .feature-row:hover .feature-row__phone .phone {
            transform: translateY(-8px) rotate(-1.5deg);
        }
        .feature-row--flip:hover .feature-row__phone .phone {
            transform: translateY(-8px) rotate(1.5deg);
        }
    }
}