/* ============================================================
   SORENTIO DESIGN SYSTEM — standalone CSS
   Self-contained: tokens, base styles, component classes.
   Drop into any project and link it. No build step, no JS.

   Rules that matter, in short:
   - Max two background tones per view. Coral is never a background
     for long text — only short statements and icon fields.
   - One radius: 5px. Everywhere. Pills only for the switch track.
   - No gradients, no texture, no blur, no shadow (except overlays).
   - Line height 1.2 on titles, 1.5 on body. No exceptions.
   - Sentence case headings. Uppercase only for .s-mellomtittel
     and small labels. No emoji.
   - Italic carries the ingress and pull quotes — bold for emphasis.
   ============================================================ */

/* ---------- Typeface -------------------------------------------------
   Shipping face: M PLUS Rounded 1c (Google Fonts).
   NB: lastes IKKE via @import her - den blokkerer parallell nedlasting
   av andre ressurser. Lastes i stedet via <link> i includes/head.php,
   sammen med preconnect-hints, samme mønster som Open Sans hadde.
   The brand guide specifies Unit Rounded Pro (commercial, FontFont);
   if licensed, add its @font-face rules and put it first in --font-core.
   -------------------------------------------------------------------- */

/* ============================ TOKENS ============================ */
:root{
  /* --- Brand palette: seven colours, no more --- */
  --navy:#273E4F;          /* primary: buttons, inverted sections, headlines */
  --blue:#477496;          /* interaction: hover and pressed */
  --coral:#FF8278;         /* accent: links, active markers, icons */
  --grey:#B8B5B0;          /* warm grey: disabled, quiet surfaces */
  --white-warm:#FCF9F4;    /* default page background */
  --beige:#EAE7DE;         /* sunken / alternating sections */
  --ink:#43413D;           /* warm charcoal: body text, hairlines */

  /* Print-side variants of the two bottom tones. Use the web values on screen. */
  --white-warm-print:#FBF6F0;
  --beige-print:#E8E2DA;

  /* --- Derived steps (hand-mixed, kept to a minimum) --- */
  --navy-soft:#3A5468;
  --blue-deep:#3C6480;
  --coral-deep:#F06A5F;
  --grey-deep:#8C8983;
  --divider-on-navy:rgba(252,249,244,.28);

  /* --- Semantic: text --- */
  --text-strong:var(--navy);
  --text-body:var(--ink);
  --text-muted:var(--grey-deep);
  --text-disabled:var(--grey);
  --text-invert:var(--white-warm);
  --text-link:var(--coral);
  --text-link-hover:var(--coral-deep);

  /* --- Semantic: surfaces --- */
  --surface-page:var(--white-warm);
  --surface-card:var(--white-warm);
  --surface-field:#FFFFFF;    /* input-felt - lysere enn siden, tydeliggjør at det er et felt */
  --surface-sunken:var(--beige);
  --surface-invert:var(--navy);
  --surface-invert-alt:var(--blue);
  --surface-accent:var(--coral);
  --surface-quiet:var(--grey);

  /* --- Semantic: lines --- */
  --border-subtle:rgba(67,65,61,.16);
  --border-strong:var(--ink);
  --border-on-invert:var(--divider-on-navy);

  /* --- Semantic: interactive --- */
  --interactive:var(--navy);
  --interactive-hover:var(--blue);
  --interactive-pressed:var(--blue-deep);
  --interactive-disabled-bg:var(--white-warm);
  --interactive-disabled-fg:var(--grey);
  --focus-ring:var(--blue);

  /* --- Typography --- */
  --font-core:"Unit Rounded Pro","M PLUS Rounded 1c","Segoe UI",system-ui,sans-serif;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;

  /* Editorial scale (brand guide) */
  --fs-display:48px;   /* hero only */
  --fs-h1:38px;
  --fs-h2:32px;
  --fs-ingress:28px;   /* italic lead paragraph */
  --fs-h4:24px;        /* MELLOMTITTEL — uppercase, bold, tracked */
  --fs-body:20px;
  --fs-small:16px;

  /* Compact web scale (moodboard) — cards and denser UI */
  --fs-web-h1:39px;
  --fs-web-ingress:25px;
  --fs-web-label:20px;
  --fs-web-body:16px;

  --lh-title:1.2;
  --lh-body:1.5;
  --tracking-title:0;
  --tracking-mellomtittel:.06em;
  --tracking-label:.04em;

  /* --- Spacing: five fixed margins, nothing in between --- */
  --space-16:16px;
  --space-32:32px;
  --space-40:40px;
  --space-64:64px;
  --space-80:80px;
  /* Component-internal steps */
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-24:24px;
  /* Layout */
  --container-max:1200px;
  --gutter:var(--space-32);
  --section-y:var(--space-80);

  /* --- Radius: "alle hjørner avrundet 5px" --- */
  --radius:5px;
  --radius-full:999px; /* avatars, circular swatches, switch track only */

  /* --- Elevation: flat brand; shadow only for true overlays --- */
  --shadow-none:none;
  --shadow-overlay:0 8px 32px rgba(39,62,79,.14);
  --shadow-overlay-strong:0 16px 48px rgba(39,62,79,.20);
  --scrim:rgba(39,62,79,.44);

  /* --- Motion: calm and short. Colour, opacity, border only. --- */
  --dur-fast:120ms;
  --dur:200ms;
  --dur-slow:360ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ============================ BASE ============================ */
*,*::before,*::after{box-sizing:border-box}

body{
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-core);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  margin:0;
}

h1,h2,h3,h4{font-family:var(--font-core);color:var(--text-strong);line-height:var(--lh-title);margin:0}
h1{font-size:var(--fs-h1);font-weight:var(--weight-bold)}
h2{font-size:var(--fs-h2);font-weight:var(--weight-regular)}
h3{font-size:var(--fs-ingress);font-weight:var(--weight-regular);font-style:italic}
h4{font-size:var(--fs-h4);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-mellomtittel)}
p{margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:4px}
::selection{background:var(--coral);color:var(--white-warm)}

/* ======================= TYPE HELPERS ======================= */
.s-display{font-size:var(--fs-display);font-weight:var(--weight-bold);line-height:var(--lh-title);color:var(--text-strong)}
.s-ingress{font-size:var(--fs-ingress);font-style:italic;line-height:var(--lh-title);color:var(--text-strong)}
.s-mellomtittel{font-size:var(--fs-h4);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-mellomtittel);line-height:var(--lh-title)}
.s-body{font-size:var(--fs-body);line-height:var(--lh-body)}
.s-small{font-size:var(--fs-small);line-height:var(--lh-body)}
.s-label{font-size:var(--fs-small);letter-spacing:var(--tracking-label);text-transform:uppercase}
.s-muted{color:var(--text-muted)}

/* ========================= LAYOUT ========================= */
.s-container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}
.s-section{padding-block:var(--section-y)}
.s-section--sunken{background:var(--surface-sunken)}
.s-section--invert{background:var(--surface-invert);color:var(--text-invert)}
.s-section--invert h1,.s-section--invert h2,.s-section--invert h3,.s-section--invert h4{color:var(--text-invert)}

/* Sticky header — the only fixed element in the system. */
.s-header{position:sticky;top:0;z-index:20;background:var(--surface-page);border-bottom:1px solid var(--border-subtle)}

/* Mosaic: equal-weight grid of 5px colour blocks and photography. */
.s-mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-16)}
.s-block{border-radius:var(--radius);padding:var(--space-24)}
.s-block--navy{background:var(--navy);color:var(--text-invert)}
.s-block--coral{background:var(--coral);color:var(--white-warm)}
.s-block--beige{background:var(--beige)}
.s-block--grey{background:var(--grey);color:var(--white-warm)}

/* ========================= BUTTON =========================
   States from the moodboard: Aktiv / Inaktiv / Hoover / Trykket.
   Nothing scales or lifts on press — the fill changes.
   Markup: <button class="s-btn"><span>Les mer</span><span class="s-btn__chev">›</span></button>
   ---------------------------------------------------------- */
.s-btn{
  display:inline-flex;align-items:stretch;gap:0;
  font-family:var(--font-core);font-size:var(--fs-web-body);font-weight:var(--weight-medium);
  background:var(--interactive);color:var(--text-invert);
  border:none;border-radius:var(--radius);cursor:pointer;overflow:hidden;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.s-btn > span:first-child{padding:var(--space-12) var(--space-24);display:flex;align-items:center}
.s-btn__chev{
  padding:var(--space-12) var(--space-16);display:flex;align-items:center;
  border-left:1px solid var(--divider-on-navy);
  transition:background var(--dur-fast) var(--ease);
}
.s-btn:hover:not(:disabled){background:var(--interactive-hover)}
.s-btn:hover:not(:disabled) .s-btn__chev{background:transparent}
.s-btn:active:not(:disabled){background:var(--interactive-pressed)}
.s-btn:active:not(:disabled) .s-btn__chev{background:transparent}
.s-btn:disabled{background:var(--interactive-disabled-bg);color:var(--interactive-disabled-fg);cursor:not-allowed}
.s-btn:disabled .s-btn__chev{border-left-color:var(--border-subtle)}

.s-btn--sm{font-size:var(--fs-small)}
.s-btn--sm > span:first-child{padding:var(--space-8) var(--space-16)}
.s-btn--sm .s-btn__chev{padding:var(--space-8) var(--space-12)}

/* Transparent variant: border and label swap to blue on hover. */
.s-btn--transparent{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.s-btn--transparent .s-btn__chev{border-left-color:var(--border-subtle)}
.s-btn--transparent:hover:not(:disabled){border-color:var(--interactive-hover);color:var(--interactive-hover);background:transparent}
.s-btn--transparent:hover:not(:disabled) .s-btn__chev{background:transparent}
.s-btn--transparent:active:not(:disabled){background:transparent;color:var(--interactive-pressed);border-color:var(--interactive-pressed)}

/* Coral text link ("Les mer ›"). */
.s-btn--link{background:transparent;color:var(--text-link);padding:0;font-weight:var(--weight-medium)}
.s-btn--link > span:first-child{padding:0}
.s-btn--link .s-btn__chev{border-left:none;padding:0 0 0 var(--space-4);background:transparent}
.s-btn--link:hover{color:var(--text-link-hover);background:transparent}
.s-btn--link:hover > span:first-child{text-decoration:underline;text-underline-offset:4px}

/* ===================== CARD / BADGE / TAG =====================
   Cards are solid fill, 5px corners, no shadow and no border.
   ------------------------------------------------------------- */
.s-card{background:var(--surface-card);border-radius:var(--radius);padding:var(--space-32)}
.s-card--sunken{background:var(--surface-sunken)}
.s-card--invert{background:var(--surface-invert);color:var(--text-invert)}
.s-card--outline{background:transparent;border:1px solid var(--border-subtle)}

.s-badge{
  display:inline-block;background:var(--coral);color:var(--white-warm);
  border-radius:var(--radius);padding:var(--space-4) var(--space-8);
  font-size:var(--fs-small);font-weight:var(--weight-bold);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
}
.s-badge--navy{background:var(--navy)}
.s-badge--quiet{background:var(--beige);color:var(--text-muted)}

.s-tag{
  display:inline-flex;align-items:center;gap:var(--space-8);
  background:var(--beige);color:var(--text-body);
  border-radius:var(--radius);padding:var(--space-4) var(--space-12);
  font-size:var(--fs-small);
}
.s-tag[role="button"]{cursor:pointer}
.s-tag[role="button"]:hover{background:var(--grey)}

/* ==================== FORM FIELDS ==================== */
.s-field{
  font-family:var(--font-core);font-size:var(--fs-web-body);color:var(--text-body);
  background:var(--surface-field);
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:var(--space-12) var(--space-16);width:100%;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
/* Nøytraliser nettleserens egen styling av :required/:invalid (særlig
   Firefox gir tomme, påkrevde felt en annen standardfarge/glow enn andre
   felt) - alle .s-field skal se identiske ut, uavhengig av type/required. */
.s-field:required,.s-field:invalid{box-shadow:none}
.s-field:hover:not(:disabled){border-color:var(--interactive-hover)}
.s-field:focus{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 3px rgba(71,116,150,.18)}
.s-field::placeholder{color:var(--text-disabled)}
.s-field:disabled{background:var(--beige);color:var(--text-disabled);cursor:not-allowed}
.s-field-label{display:block;font-size:var(--fs-small);font-weight:var(--weight-medium);color:var(--text-strong);margin-bottom:var(--space-8)}
.s-field-hint{display:block;font-size:var(--fs-small);color:var(--text-muted);margin-top:var(--space-4)}
.s-field-error{display:block;font-size:var(--fs-small);color:var(--coral-deep);margin-top:var(--space-4)}

/* ==================== NAV / TABS ==================== */
.s-nav-link{color:var(--navy);font-size:var(--fs-web-body);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
.s-nav-link:hover{color:var(--coral);text-decoration:none}
.s-nav-link[aria-current]{color:var(--coral);border-bottom:2px solid var(--coral);padding-bottom:2px}

.s-tab{
  background:none;border:none;cursor:pointer;font-family:var(--font-core);
  font-size:var(--fs-web-body);color:var(--text-muted);
  padding:var(--space-12) 0;border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.s-tab:hover{color:var(--text-strong)}
.s-tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--coral)}

/* ==================== BRACKET FRAME ====================
   The moodboard's corner-crop motif on a navy tile.
   Markup: <div class="s-bracket"><p>…</p></div>
   ------------------------------------------------------- */
.s-bracket{position:relative;background:var(--navy);color:var(--text-invert);border-radius:var(--radius);padding:var(--space-64)}
.s-bracket::before,.s-bracket::after{content:"";position:absolute;width:24px;height:24px}
.s-bracket::before{top:var(--space-16);right:var(--space-16);border-top:3px solid var(--white-warm);border-right:3px solid var(--white-warm)}
.s-bracket::after{bottom:var(--space-16);left:var(--space-16);border-bottom:3px solid var(--white-warm);border-left:3px solid var(--white-warm)}

/* ==================== ICONS ====================
   Outline line drawings, uniform ~2px stroke, no fill, tinted by
   currentColor through a mask. Substituted from Lucide until
   Sorentio's own SVGs are supplied.
   Markup: <i class="s-icon" style="--icon:url('https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/house.svg')"></i>
   ----------------------------------------------- */
.s-icon{
  display:inline-block;width:24px;height:24px;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
}
.s-icon--lg{width:48px;height:48px}
.s-icon--xl{width:96px;height:96px}

/* ==================== SUCCESS-MELDING ====================
   Vises kort etter en handling (f.eks. "Abonnement oppdatert").
   Markup (fast i index2.php): en fast wrapper som dekker hele
   viewporten men ikke fanger klikk, og selve meldingsboksen inni,
   sentrert horisontalt og litt ned fra toppen.
   ----------------------------------------------------------- */
#successMessagewrapper{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;
  pointer-events:none;
}
#successMessage{
  position:absolute;
  top:var(--space-80);
  left:50%;
  transform:translateX(-50%);
  pointer-events:auto;
  background:#FFFFFF;border:2px solid var(--border-subtle);border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:var(--space-16) var(--space-24);
  max-width:90%;
  white-space:nowrap;
  text-align:center;
  cursor:pointer;
}
#successMessage .produktinfo{
  margin:0;font-size:var(--fs-web-body);color:var(--text-body);
}

/* ==================== OVERLAYS ==================== */
.s-overlay{background:var(--surface-card);border-radius:var(--radius);box-shadow:var(--shadow-overlay);padding:var(--space-32)}
.s-scrim{position:fixed;inset:0;background:var(--scrim)}

/* ==================== FOCUS ==================== */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ==================== MOTION PREFERENCE ==================== */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}