/* =========================================================================
   lexico-header.css — AUTORITATIV header-stil for HELE lexico.no
   =========================================================================
   Én kilde til sannhet for begge headere. Lastes av både _Layout (public)
   og _LxLayout (innlogget) så de blir 100 % like på grunnlinjen.

   To headere, forskjellen er KUN høyre-klyngen:
     • Header 1 (anonym):    logo · [spacer] · språk · valuta · modus · Logg inn · Registrer
     • Header 2 (innlogget): logo · [side-tittel] · [spacer] · Dashbord · Bytt system ·
                             Bytt rolle · språk · valuta · modus · konto-dropdown

   Auth-status (ikke sidetype) bestemmer hvilken. En innlogget bruker får
   header 2 også på public-sider.

   Alle farger er tokens med hex-fallback, så filen kan kopieres til et annet
   system og se identisk ut uten resten av designsystemet.
   Canonical-verdier speiler standard-dashboard.css (.lx-topnav m.fl.).
   ========================================================================= */

/* ── Skall ───────────────────────────────────────────────────────────────
   Fast topp, 64px høyde, chrome-bakgrunn fra design-token. */
.lx-topnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: 64px;
    display: flex; align-items: center; gap: 16px;
    padding: 0 12px;
    background: var(--lx-header-bg, var(--chrome-bg, #14182A));
    border-bottom: none;
    box-shadow: none;
}
.lx-spacer { flex: 1; }

/* ── Merkevare / logo (fast cyan, IDENTISK i begge headere) ──────────────
   Ikon 38×38, radius 10, cyan-gradient. Navn 18px/800, tagline 11px/500. */
.lx-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    /* Logo-font = Inter (valgt 2026-07-26). Var 'Poppins', men Poppins lastes
       IKKE på alle sider: den nettstedsomfattende bunny.net-lenken i _Layout
       leverer bare Inter, mens enkelte views har en ekstra lenke som henter
       Poppins. Resultatet var to ulike logoer — Poppins der den lastet, og
       tilfeldig systemfont der den ikke gjorde. Inter lastes overalt, så
       logoen blir identisk for alle besøkende uansett maskin. */
    font-family: Inter, system-ui, sans-serif;
    color: var(--lx-text-bright, #ffffff);
}
.lx-brand-icon {
    width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 10px;
    /* Fast cyan på lexico.no. --lx-brand-mark er TENANT-TOKEN: settes kun i
       lån-modus (SSO-chrome for et eier-system) så merket får deres identitet. */
    background: var(--lx-brand-mark, linear-gradient(135deg, #00b4d8, #0096b8));
    box-shadow: 0 2px 8px rgba(0, 180, 216, .30);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px;
}
.lx-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.lx-brand-name {
    font-size: 18px; font-weight: 800;
    letter-spacing: -.01em; line-height: 1.1;
}
.lx-brand-tagline {
    font-size: 11px; font-weight: 500; line-height: 1.2;
    margin-top: 2px; opacity: .7;
}
/* Merkevaretekst: hvit i mørk modus, mørk i lys modus. */
:root[data-theme="dark"] .lx-brand, html.dark .lx-brand { color: #ffffff; }
:root[data-theme="light"] .lx-brand, html.light .lx-brand,
html:not(.dark):not([data-theme="dark"]) .lx-brand { color: #111111; }

/* ── Høyre-klynge (kontroller) ───────────────────────────────────────────
   Språk/valuta/modus (_HeaderPreferenceControls, klasse .header-pref-controls)
   styles i header-preferences.css/header-chips.css — delt, ikke duplisert her. */
.lx-header-actions { display: flex; align-items: center; gap: 12px; }

/* ── Auth-knapper (header 1, anonym) ─────────────────────────────────────
   «Logg inn» som tekst, «Registrer» som fylt cyan-knapp. */
.lx-auth {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 600; font-size: 14px;
    text-decoration: none;
    padding: 7px 6px; border-radius: 8px;
    white-space: nowrap;
}
:root[data-theme="dark"] .lx-auth, html.dark .lx-auth { color: #ffffff; }
:root[data-theme="light"] .lx-auth, html.light .lx-auth,
html:not(.dark):not([data-theme="dark"]) .lx-auth { color: #111111; }
.lx-auth.lx-auth--primary {
    background: #1D4ED8; color: #ffffff !important;   /* blå med hvit skrift, begge modus */
    padding: 7px 16px;
}
.lx-auth.lx-auth--primary:hover { background: #1E40AF; }

/* ── SSO-chrome (lån-modus): språk/valuta/modus som rene tekstlenker ──────
   På SSO-sidene (login/registrer/glemt passord for Academy m.fl.) kan vi IKKE
   bruke _HeaderPreferenceControls: den POSTer med returnUrl, mens SSO-løpet må
   bære `app=<eier>` + theme/currency/culture videre i QUERY-strengen gjennom
   hele kjeden (også på POST-rendrede sider). Derfor GET-lenker her — men med
   nøyaktig samme UTSEENDE som språk/modus i header 1/2. */
.lx-sso-pref {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 600; font-size: 14px;
    text-decoration: none;
    padding: 6px 4px; border-radius: 8px;
    background: transparent; border: none;
    white-space: nowrap; cursor: pointer;
}
.lx-sso-pref--icon { width: 32px; padding: 6px 0; }
:root[data-theme="dark"] .lx-sso-pref, html.dark .lx-sso-pref { color: #ffffff; }
:root[data-theme="light"] .lx-sso-pref, html.light .lx-sso-pref,
html:not(.dark):not([data-theme="dark"]) .lx-sso-pref { color: #111111; }
.lx-sso-pref:hover { opacity: .75; }

/* Valuta som <details>-nedtrekk — samme mønster som header 1/2. */
.lx-sso-currency { position: relative; }
.lx-sso-currency > summary { list-style: none; }
.lx-sso-currency > summary::-webkit-details-marker { display: none; }
.lx-sso-currency-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 9500;
    min-width: 92px; padding: 6px; border-radius: 10px;
    border: 1px solid var(--lx-border, #232838);
    background: var(--lx-surface, #131722);
    box-shadow: var(--lx-shadow-lg, 0 12px 32px rgba(0, 0, 0, .35));
}
.lx-sso-currency-menu a {
    display: block; padding: 7px 9px; border-radius: 7px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    color: var(--lx-text, #e6e9ef);
}
.lx-sso-currency-menu a:hover { background: var(--lx-surface-2, #1c2030); }
:root[data-theme="light"] .lx-sso-currency-menu, html.light .lx-sso-currency-menu {
    border-color: #e2e8f0; background: #ffffff;
}
:root[data-theme="light"] .lx-sso-currency-menu a, html.light .lx-sso-currency-menu a { color: #111111; }
:root[data-theme="light"] .lx-sso-currency-menu a:hover, html.light .lx-sso-currency-menu a:hover { background: #f1f5f9; }

/* ── Public-header: språk + modus som bare TEKSTLENKER (ikke fargede bokser) ──
   MÅ slå den globale blå knappe-temaingen i public-content-theme.css, som har
   ID-spesifisitet (1,1,1) fordi `#cookieConsentBtn` ligger inne i dens :is()-liste.
   Derfor bruker vi nav-IDen #lxPublicHeader her så override-en vinner. Valuta
   beholdes som den er (allerede uten boks). Denne filen lastes kun på public. */
#lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip,
#lxPublicHeader #header-theme-toggle {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 4px !important;
}
#lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip:hover,
#lxPublicHeader #header-theme-toggle:hover { background: transparent !important; border: none !important; }

/* Tekst/ikon: sort i lys modus, hvit i mørk modus — på både knappen og evt. barn
   (span/svg), siden blanket-regelen også setter «* { color:#fff }» på barna. */
:root[data-theme="light"] #lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip,
:root[data-theme="light"] #lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip *,
:root[data-theme="light"] #lxPublicHeader #header-theme-toggle,
:root[data-theme="light"] #lxPublicHeader #header-theme-toggle *,
html.light #lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip,
html.light #lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip *,
html.light #lxPublicHeader #header-theme-toggle,
html.light #lxPublicHeader #header-theme-toggle * {
    color: #111111 !important; -webkit-text-fill-color: #111111 !important;
}
:root[data-theme="dark"] #lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip,
:root[data-theme="dark"] #lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip *,
:root[data-theme="dark"] #lxPublicHeader #header-theme-toggle,
:root[data-theme="dark"] #lxPublicHeader #header-theme-toggle *,
html.dark #lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip,
html.dark #lxPublicHeader .header-pref-controls > form.header-pref-form > .academy-sso-chip *,
html.dark #lxPublicHeader #header-theme-toggle,
html.dark #lxPublicHeader #header-theme-toggle * {
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}

/* ── Dashbord-knapp (header 2) ───────────────────────────────────────────
   Tekstlenke i høyre-klyngen, samme typografi som auth-lenkene. */
.lx-dash-link {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 600; font-size: 14px;
    text-decoration: none;
    padding: 7px 6px; border-radius: 8px;
    white-space: nowrap;
}
:root[data-theme="dark"] .lx-dash-link, html.dark .lx-dash-link { color: #ffffff; }
:root[data-theme="light"] .lx-dash-link, html.light .lx-dash-link,
html:not(.dark):not([data-theme="dark"]) .lx-dash-link { color: #111111; }
.lx-dash-link:hover { color: #00b4d8; }

/* ── Konto-dropdown (header 2, ytterst til høyre) ────────────────────────
   Trigger med avatar + fornavn + chevron; panel med profil/innstillinger/logout. */
.lx-account-menu { position: relative; display: inline-flex; }
/* Trigger er transparent/uten kant — matcher det innloggede skallets endelige
   tilstand (standard-dashboard.css overstyrer til transparent). Kun avatar +
   fornavn + chevron vises på chrome-bakgrunnen. */
.lx-account-trigger {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 38px; padding: 4px 10px 4px 5px;
    border-radius: 10px;
    border: none; background: transparent;
    font: inherit; cursor: pointer;
}
.lx-account-trigger:hover { background: transparent; }
.lx-account-trigger svg { color: currentColor; stroke: currentColor; }
/* Trigger-tekst følger tema (hvit i mørk, mørk i lys) som resten av headeren. */
:root[data-theme="dark"] .lx-account-trigger, html.dark .lx-account-trigger { color: #ffffff; }
:root[data-theme="light"] .lx-account-trigger, html.light .lx-account-trigger,
html:not(.dark):not([data-theme="dark"]) .lx-account-trigger { color: #111111; }
.lx-account-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    /* Fast cyan — identisk med logoen, IKKE rolle-aksent, så avataren ser
       lik ut på public-innlogget (uten rolle-tema) og i admin-skallet. */
    background: linear-gradient(135deg, #00b4d8, #0096b8);
    color: #fff; font-weight: 700; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase;
}
.lx-account-name {
    display: block; max-width: 130px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: currentColor; font-size: 13px; font-weight: 600;
}
.lx-account-panel {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 188px; padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--lx-border, #232838);
    background: var(--lx-surface, #131722);
    color: var(--lx-text, #e6e9ef);
    box-shadow: var(--lx-shadow-lg, 0 12px 32px rgba(0,0,0,.35));
    z-index: 9500;
}
.lx-account-item {
    display: block; width: 100%; min-height: 0;
    padding: 5px 8px; border: 0; border-radius: 7px;
    background: transparent; color: inherit;
    font: inherit; font-size: 13px; line-height: 1.15;
    text-align: left; text-decoration: none; cursor: pointer;
}
.lx-account-item:hover { background: var(--lx-surface-2, #1c2030); color: inherit; }
.lx-account-divider { height: 1px; margin: 3px 4px; background: var(--lx-border, #232838); }
.lx-account-form { margin: 0; }
.lx-account-logout { color: var(--lx-danger, #ef4444); }

/* Lys/mørk modus for dropdown-PANELET (selve triggeren er transparent, se over). */
:root[data-theme="light"] .lx-account-panel {
    background: #ffffff; border-color: #d0d7de; color: #111827;
}
:root[data-theme="light"] .lx-account-item:hover,
:root[data-theme="light"] .lx-account-form:hover,
:root[data-theme="light"] .lx-account-form:hover .lx-account-item {
    background: #f3f4f6; color: #111827;
}
:root[data-theme="light"] .lx-account-divider { background: #e5e7eb; }
:root[data-theme="dark"] .lx-account-panel {
    background: #131722; border-color: #232838; color: #ffffff;
}
:root[data-theme="dark"] .lx-account-item:hover { background: #1c2030; color: #ffffff; }

/* ── Public-header (innlogget, header 2): switcherne + konto-trigger skal IKKE
   være blå bokser ──────────────────────────────────────────────────────────
   Samme globale blå knappe-temaing (public-content-theme.css, ID-spesifisitet
   via #cookieConsentBtn) fanger disse fordi de er <button>. Nøytraliser til rene
   kontroller som språk/valuta — badge («LX») og avatar beholder sin cyan-identitet.
   #lxPublicHeader gir spesifisitet over (1,1,1). */
#lxPublicHeader .lx-system-switcher-toggle,
#lxPublicHeader .lx-role-btn,
#lxPublicHeader .lx-account-trigger {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
#lxPublicHeader .lx-system-switcher-toggle:hover,
#lxPublicHeader .lx-role-btn:hover,
#lxPublicHeader .lx-account-trigger:hover {
    background: rgba(148, 163, 184, .14) !important;
}
/* Etikett-tekst + chevron/ikon følger tema. Badge (.lx-system-badge) og avatar
   (.lx-account-avatar) er unntatt — de har egen bakgrunn/farge. */
:root[data-theme="dark"] #lxPublicHeader .lx-system-switcher-toggle > span:not(.lx-system-badge),
:root[data-theme="dark"] #lxPublicHeader .lx-system-switcher-toggle > svg,
:root[data-theme="dark"] #lxPublicHeader .lx-role-btn .av2-winhdr-role-label,
:root[data-theme="dark"] #lxPublicHeader .lx-role-btn > svg,
:root[data-theme="dark"] #lxPublicHeader .lx-account-trigger .lx-account-name,
:root[data-theme="dark"] #lxPublicHeader .lx-account-trigger > svg,
html.dark #lxPublicHeader .lx-system-switcher-toggle > span:not(.lx-system-badge),
html.dark #lxPublicHeader .lx-role-btn .av2-winhdr-role-label,
html.dark #lxPublicHeader .lx-account-trigger .lx-account-name {
    color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme="light"] #lxPublicHeader .lx-system-switcher-toggle > span:not(.lx-system-badge),
:root[data-theme="light"] #lxPublicHeader .lx-system-switcher-toggle > svg,
:root[data-theme="light"] #lxPublicHeader .lx-role-btn .av2-winhdr-role-label,
:root[data-theme="light"] #lxPublicHeader .lx-role-btn > svg,
:root[data-theme="light"] #lxPublicHeader .lx-account-trigger .lx-account-name,
:root[data-theme="light"] #lxPublicHeader .lx-account-trigger > svg,
html.light #lxPublicHeader .lx-system-switcher-toggle > span:not(.lx-system-badge),
html.light #lxPublicHeader .lx-role-btn .av2-winhdr-role-label,
html.light #lxPublicHeader .lx-account-trigger .lx-account-name {
    color: #111111 !important; -webkit-text-fill-color: #111111 !important;
}

/* ── Dropdown-basis (Bytt system / Bytt rolle) på public ──────────────────
   Disse reglene bor ellers i standard-dashboard.css, som public IKKE laster —
   uten dem manglet menyene display:none og rant ut under headeren. */
.lx-topnav .lx-dropdown { position: relative; }
.lx-topnav .lx-dropdown-menu {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px;
    background: var(--lx-surface, #131722);
    border: 1px solid var(--lx-border, #232838);
    border-radius: 12px; box-shadow: var(--lx-shadow-lg, 0 12px 32px rgba(0,0,0,.35));
    padding: 6px; z-index: 9500;
}
.lx-topnav .lx-dropdown.open .lx-dropdown-menu { display: block; }
.lx-topnav .lx-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    text-decoration: none; font-size: 14px;
    color: var(--lx-text, #e6e9ef);
}
.lx-topnav .lx-dropdown-item:hover { background: var(--lx-surface-2, #1c2030); }
.lx-topnav .lx-dropdown-header,
.lx-topnav .lx-dropdown-section {
    padding: 6px 12px; font-size: 12px; font-weight: 600;
    color: var(--lx-text-muted, #94a3b8); text-transform: uppercase; letter-spacing: .03em;
}
:root[data-theme="light"] .lx-topnav .lx-dropdown-menu {
    background: #ffffff; border-color: #d0d7de; color: #111827;
}
:root[data-theme="light"] .lx-topnav .lx-dropdown-item { color: #111827; }
:root[data-theme="light"] .lx-topnav .lx-dropdown-item:hover { background: #f3f4f6; }

/* ── Public-spesifikt: skjul død gammel duplikat-header ──────────────────── */
.lxc-public-header, .lxc-public-mobile-menu { display: none !important; }

/* ── Responsivt ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lx-topnav { gap: 8px; padding: 0 12px; }
    .lx-brand-tagline { display: none; }
    .lx-account-name { display: none; }
}