/* ExGen shared shell — Phase 4. Header/nav/footer styles for the pages
   Phase 1 gates (app, konto, korkortet, förbättring, larare). Deliberately
   namespaced "xg-" and kept in its own file so pages NOT behind the
   maintenance gate (index, pricing, live-demo, admin) never load this and
   never change — style.css and its .hWrap/.hNav/.brand rules are untouched,
   still serving those pages exactly as before.

   Requires exgen-tokens.css loaded first (uses --exgen-* custom properties;
   critical structural properties below carry a fallback value in case that
   load ever fails, so the header degrades instead of disappearing).

   No new logo image asset exists yet — the mark below is CSS-only
   (gradient square + wordmark), a placeholder until a real asset lands.

   Only components actually used by the 5 pages are here — no speculative
   container/skeleton/notice/account-menu styles for things nothing
   consumes yet. Add those when a later phase actually needs them.
*/

/* These pages have no dark mode — light only. Re-assert the tokens here
   (not just relying on exgen-tokens.css's own :root values) so exgen-tokens'
   prefers-color-scheme:dark block (still used by the standalone Phase 2
   preview page, a different consumer) can never leak into this header. */
html {
  --exgen-navy: #0E1B2A;
  --exgen-text: #1B2430;
  --exgen-text-secondary: #667085;
  --exgen-bg: #FFFFFF;
  --exgen-bg-secondary: #F8FAFC;
  --exgen-border: #E4E7EC;
}

/* ── Utility bar ── thin secondary strip above the main nav, scrolls away
   normally (not sticky) while .xg-header below it sticks at top:0 — same
   two-tier structure Pensionskontrollen's header uses. Reuses existing
   footer content (UngDrive badge, privacy link, disclaimer) rather than
   inventing new nav items/pages that don't exist yet. */
.xg-utility-bar {
  background: var(--exgen-bg-secondary, #F8FAFC);
  border-bottom: var(--exgen-border-width, 1px) solid var(--exgen-border, #E4E7EC);
}
.xg-utility-wrap {
  max-width: 1080px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--exgen-space-4, 16px);
  padding: 6px var(--exgen-space-6, 24px);
  font: 500 10.5px var(--exgen-font-mono, monospace);
  color: var(--exgen-text-secondary, #667085);
  letter-spacing: 0.02em;
}
.xg-utility-badge {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--exgen-text-secondary, #667085);
}
.xg-utility-badge img { border-radius: 3px; opacity: .85; }
.xg-utility-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.xg-utility-right a { color: var(--exgen-text-secondary, #667085); text-decoration: underline; text-underline-offset: 2px; }
.xg-utility-right a:hover { color: var(--exgen-text, #1B2430); }
/* .xg-utility-disclaimer är borta. Ansvarsfriskrivningen stod i verktygsraden
   OCH i sidfoten på varje sida — samma mening två gånger, och tillsammans med
   headern och beta-banderollen tre remsor krom före innehållet. Den står kvar
   i sidfoten, som är där en friskrivning hör hemma. integritetspolicy.html bar
   den bara i verktygsraden, så den flyttades dit i stället för att tas bort. */
@media (max-width: 480px) { .xg-utility-bar { display: none; } }

.xg-header {
  position: sticky; top: 0; z-index: 500;
  background: var(--exgen-bg, #FFFFFF);
  border-bottom: var(--exgen-border-width, 1px) solid var(--exgen-border, #E4E7EC);
}
/* shared.js initHeaderCompress sätter .scrolled på header vid scrollY > 72.
   Den gamla regeln i style.css gav en nästan svart 24px-skugga; den är nu
   scopad bort från .xg-header och ersatt av systemets egen. */
.xg-header.scrolled { box-shadow: var(--exgen-shadow-sm, 0 1px 2px rgba(14,27,42,.06)); }

/* width:100% behövs trots max-width. Utan den räcker det att någon förälder
   är display:flex för att wrappen ska krympa till innehållets bredd i stället
   för att fylla ut till måttet — vilket är precis vad som hände. */
.xg-header-wrap {
  width: 100%;
  max-width: 1080px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--exgen-space-4, 16px);
  padding: 12px var(--exgen-space-6, 24px);
}
@media (max-width: 640px) { .xg-header-wrap { padding: 10px var(--exgen-space-4, 16px); } }

.xg-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.xg-brand:focus-visible { outline: var(--exgen-focus-ring, 2px solid #00B7D9); outline-offset: var(--exgen-focus-offset, 2px); border-radius: 4px; }
.xg-brand-name {
  font: 700 16px var(--exgen-font, sans-serif); color: var(--exgen-text, #1B2430); letter-spacing: -0.02em;
}
.xg-brand-tag {
  font: 400 11px var(--exgen-font-mono, monospace); color: var(--exgen-text-secondary, #667085);
  letter-spacing: 0.02em;
}
@media (max-width: 640px) { .xg-brand-tag { display: none; } }

.xg-nav { display: flex; align-items: center; gap: 2px; }
@media (max-width: 860px) { .xg-nav { display: none; } }

/* Hamburgaren är den SMALA skärmens navigering, inte ett tillägg till den
   breda. Fram till nu stod båda framme samtidigt: vid 1280px mätte .xg-nav
   398x33 med fem länkar och .mWrap 44x44 med en panel som listade exakt samma
   destinationer igen. Två kompletta navigeringar i samma synfält — samma
   dubblering Del B tog bort på förbättringssidan.

   Reglerna för själva knappen bor i style.css (.mWrap/.menuWrap, delade med
   sidor som inte laddar den här filen), så synligheten styrs härifrån i stället
   för att style.css ska behöva veta något om .xg-nav:s brytpunkt. Frågan är
   komplementet till raden ovanför: exakt en av de två syns vid varje bredd. */
@media (min-width: 861px) { .mWrap, .menuWrap { display: none; } }
.xg-nav-link {
  position: relative;
  font: 500 14px var(--exgen-font, sans-serif); color: var(--exgen-text-secondary, #667085);
  text-decoration: none; padding: 8px 12px; border-radius: var(--exgen-radius-sm, 8px);
  transition: background var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease),
              color var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease);
}
.xg-nav-link:hover { color: var(--exgen-text, #1B2430); background: var(--exgen-bg-secondary, #F8FAFC); }
/* Active state: navy text + teal underline, not teal text — teal measures
   2.39:1 on white (see exgen-tokens.css contrast notes), fails AA as text
   at any size. */
.xg-nav-link.active { color: var(--exgen-text, #1B2430); font-weight: 600; }
.xg-nav-link.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  border-radius: 1px; background: var(--exgen-gradient, #00B7D9);
}
.xg-nav-link:focus-visible { outline: var(--exgen-focus-ring, 2px solid #00B7D9); outline-offset: var(--exgen-focus-offset, 2px); }

/* Persistent header action button (Pensionskontrollen-style — a nav bar's
   plain browse-links plus one distinct account-action button). Always
   visible, unlike .xg-nav which collapses into the hamburger below 860px.
   Uses var(--a) (style.css's own token, always present in the same
   cascade on every page that loads this file) rather than exgen-tokens'
   --exgen-teal: --exgen-teal fails AA for white text (see exgen-tokens.css
   contrast notes), var(--a) is the same #00768F already verified at
   5.27:1 for white-on-fill everywhere else in this codebase. */
.xg-login-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 18px; margin-left: 4px;
  font: 700 13px var(--exgen-font, sans-serif); color: #fff;
  background: var(--a, #00768F); border-radius: var(--exgen-radius-pill, 999px);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease);
}
.xg-login-btn:hover { background: var(--a2, #00647A); }
.xg-login-btn:focus-visible { outline: var(--exgen-focus-ring, 2px solid #00B7D9); outline-offset: var(--exgen-focus-offset, 2px); }
@media (max-width: 480px) { .xg-login-btn { padding: 0 14px; font-size: 12.5px; } }

/* ── Section band ── full-width alternating surface for horizontally
   well-separated page sections (Pensionskontrollen-style).
   Inverted as of the design-system rework: the page background is now a
   soft off-white (--bg #F7F9FB) rather than pure white, so a grey band
   would be almost invisible against it (#F8FAFC vs #F7F9FB). The band is
   now the WHITE surface standing proud of the tinted page — same
   separation, right way round. */
.xg-band {
  background: #ffffff;
  border-top: 1px solid var(--exgen-border, #E4E7EC);
  border-bottom: 1px solid var(--exgen-border, #E4E7EC);
}

/* ── Page heading (used by larare.html's lighter-touch treatment) ── */
.xg-eyebrow {
  font: 600 11px var(--exgen-font-mono, monospace); color: var(--exgen-text-secondary, #667085);
  letter-spacing: var(--exgen-tracking-wide, 0.06em); text-transform: uppercase;
  margin-bottom: var(--exgen-space-2, 8px);
}
.xg-h1 {
  font: 700 clamp(22px, 4vw, 30px) var(--exgen-font, sans-serif); color: var(--exgen-text, #1B2430);
  letter-spacing: var(--exgen-tracking-tight, -0.02em); margin: 0 0 6px;
}
.xg-sub { font-size: var(--exgen-text-sm, 14px); color: var(--exgen-text-secondary, #667085); line-height: var(--exgen-leading-relaxed, 1.65); }

/* ── Footer ── */
.xg-footer {
  border-top: var(--exgen-border-width, 1px) solid var(--exgen-border, #E4E7EC);
  padding: var(--exgen-space-6, 24px) var(--exgen-space-6, 24px);
  text-align: center;
  font-size: var(--exgen-text-xs, 12px); color: var(--exgen-text-secondary, #667085);
}
.xg-footer a { color: var(--exgen-text-secondary, #667085); text-decoration: underline; text-underline-offset: 2px; }
.xg-footer a:hover { color: var(--exgen-text, #1B2430); }
.xg-footer a:focus-visible { outline: var(--exgen-focus-ring, 2px solid #00B7D9); outline-offset: var(--exgen-focus-offset, 2px); }

/* ── Menyknappen ─────────────────────────────────────────────────────────────
   Ersätter .mBtn/.menuBtn i style.css. Halva den dubbleringen raderas när
   sidorna migrerats; .menuWrap-halvan står kvar tills korkortet.html följer med
   — se kommentaren i style.css.

   var(--a) nedan är avsiktlig och ska inte "rättas" till en --exgen-token. Den
   bor i style.css, laddas av varje sida, och är samma val .xg-login-btn redan
   gör med sin motivering på plats: --exgen-teal klarar inte AA för vit text,
   --a (#00768F) är verifierad på 5,27:1. */
.xg-menu-btn {
  width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  display: grid; place-items: center;
  border: var(--exgen-border-width, 1px) solid var(--exgen-border, #E4E7EC);
  border-radius: var(--exgen-radius-sm, 8px);
  background: transparent; color: var(--exgen-text-secondary, #667085);
  cursor: pointer; touch-action: manipulation;
  transition: border-color var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease),
              background var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease),
              color var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease);
}
.xg-menu-btn:hover { border-color: var(--exgen-text-secondary, #667085); color: var(--exgen-text, #1B2430); }
.xg-menu-btn:focus-visible { outline: var(--exgen-focus-ring, 2px solid #00B7D9); outline-offset: var(--exgen-focus-offset, 2px); }
.xg-menu-btn[aria-expanded="true"] { border-color: var(--a, #00768F); color: var(--a, #00768F); }
.xg-menu-bars { display: grid; gap: 3.5px; width: 16px; }
.xg-menu-bars span { display: block; height: 1.5px; background: currentColor; border-radius: 1px; }

/* Komplementet till .xg-nav-regeln ovan: exakt en av de två syns vid varje
   bredd, aldrig båda och aldrig ingen. */
@media (min-width: 861px) { .xg-menu-btn, .xg-menu, .xg-menu-dim { display: none !important; } }

.xg-header-right { display: flex; align-items: center; gap: 6px; }


/* ── Mobilarket ──────────────────────────────────────────────────────────────
   Den gamla panelen var en skrivbordsdropdown på telefon: position:absolute,
   right:0, min-width:240px, border-radius:14px och en skugga på
   0 16px 48px rgba(0,0,0,.5) — 50 % svart, en rest från ett mörkt tema på en
   vit sida. Det här är byggt för handen i stället. */
.xg-menu {
  /* Ankrat UNDER headern, inte över den. Med top:0 låg arket över hamburgaren
     man just tryckte på — knappen som stänger det igen — och över märket. Då
     krävs ett eget ✕ inuti arket, alltså en till kontroll för något knappen
     redan gör.

     position:absolute mot .xg-header, som är position:sticky och därmed en
     positionerad förälder. top:100% ger exakt underkanten vid varje brytpunkt,
     utan att mäta headerns höjd i JS — den ändras både när verktygsraden döljs
     (≤480px) och när vaddering krymper (≤640px). */
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5000;
  max-height: calc(100dvh - 100%); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--exgen-bg, #FFFFFF);
  border-bottom: var(--exgen-border-width, 1px) solid var(--exgen-border, #E4E7EC);
  /* --exgen-shadow-md är den största skuggan som finns i skalan (sm/md). Det
     räcker och är rätt register — poängen var att bli av med den gamla. */
  box-shadow: var(--exgen-shadow-md, 0 4px 16px rgba(14,27,42,.08));
  padding: var(--exgen-space-2, 8px) var(--exgen-space-3, 12px)
           calc(var(--exgen-space-4, 16px) + env(safe-area-inset-bottom, 0px));
  transform: translateY(-8px); opacity: 0;
  transition: transform var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease),
              opacity var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease);
}
.xg-menu.on { transform: none; opacity: 1; }
.xg-menu[hidden] { display: none; }

.xg-menu-dim {
  /* Dimmern täcker SIDAN, inte huvudet. Med inset:0 låg den över hamburgaren
     och märket — mätt med elementFromPoint, som returnerade dimmern där
     knappen skulle ha varit. Att i stället lyfta headerraden över dimmern hade
     gett texten en odimmad rad på en dimmad bakgrund, eftersom .xg-header:s
     egen bakgrund målas i botten av samma stackningskontext.

     Ankrad på samma sätt som arket: absolut mot den sticky headern, från dess
     underkant och nedåt. */
  position: absolute; top: 100%; left: 0; right: 0; height: 100dvh; z-index: 4900;
  background: rgba(14, 27, 42, .32);
  opacity: 0;
  transition: opacity var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease);
}
.xg-menu-dim.on { opacity: 1; }
.xg-menu-dim[hidden] { display: none; }

.xg-menu-item {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; gap: var(--exgen-space-3, 12px);
  padding: 0 var(--exgen-space-3, 12px);
  border: 0; border-radius: var(--exgen-radius-sm, 8px);
  background: transparent; text-align: left; cursor: pointer;
  font: 500 15px var(--exgen-font, sans-serif);
  color: var(--exgen-text, #1B2430); text-decoration: none;
  transition: background var(--exgen-motion-fast, 150ms) var(--exgen-motion-ease, ease);
}
.xg-menu-item:hover { background: var(--exgen-bg-secondary, #F8FAFC); }
.xg-menu-item:focus-visible { outline: var(--exgen-focus-ring, 2px solid #00B7D9); outline-offset: -2px; }
/* Etiketten tar mellanrummet, piller trycks åt höger. */
.xg-menu-item > span:nth-child(2) { flex: 1; }
.xg-menu-item.active { font-weight: 600; }
.xg-menu-item.active .xg-menu-ico { color: var(--a, #00768F); }
.xg-menu-ico {
  display: grid; place-items: center; width: 24px; flex-shrink: 0;
  color: var(--exgen-text-secondary, #667085);
}
.xg-menu-pill {
  font: 500 10px var(--exgen-font-mono, monospace);
  color: var(--exgen-text-secondary, #667085); letter-spacing: var(--exgen-tracking-wide, .06em);
  border: var(--exgen-border-width, 1px) solid var(--exgen-border, #E4E7EC);
  /* radius-skalan är sm/md/lg/pill — det finns ingen xs. */
  border-radius: var(--exgen-radius-sm, 8px); padding: 2px 7px; flex-shrink: 0;
}
.xg-menu-sep {
  height: 1px; background: var(--exgen-border, #E4E7EC);
  margin: var(--exgen-space-2, 8px) var(--exgen-space-3, 12px);
}

@media (prefers-reduced-motion: reduce) {
  .xg-menu, .xg-menu-dim { transition: none; }
}