/*
Theme Name: Connect Bus (Astra Child)
Template: astra
Version: 1.2.4
Description: Connect Bus LMS Pro portal child theme. Tokens fra design/tokens.css er kanonisk.
*/

/* ==========================================================================
   VERSJONEN OVER ER CACHE-BUSTEREN — BUMP DEN VED HVER ENDRING I DENNE FILA.

   `functions.php` enqueuer denne fila med `wp_get_theme()->get('Version')` som
   `?ver=`, og serveren sender ingen `Cache-Control` (kun `etag`/`last-modified`).
   Uendret versjon = identisk URL = returnerende besøkende beholder den gamle
   CSS-en på ubestemt tid. Deployen når da serveren, men ikke brukerne — og en
   cache-kald nettleser (Playwright, inkognito) viser det nye, så verifiseringen
   ser grønn ut mens kunden ser det gamle.
   <!-- Kilde: TSK-19841, 2026-08-13 -->
   ========================================================================== */

:root {
  /* Color — 5 av 5 mulige (disiplin > kvote) */
  --color-ink: #002730;      /* = offisiell Dusk. Tekst, headinger, footer-bg, logo */
  --color-surface: #FFFFFF;  /* = offisiell White. Sidebakgrunn + kort */
  --color-mist: #D1D7DF;     /* = offisiell Breeze. Alt-seksjoner + borders */
  --color-accent: #F6FF7D;   /* = offisiell Reflex. KUN knapper/CTA — aldri tekst på hvit */
  --color-sand: #CDC6B9;     /* = offisiell Sand. Sekundær varm bakgrunn. Aldri stablet på mist. */

  /* Type — offisiell to-font-system (Frontify-manualen) */
  --font-display: 'Klarheit Kurrent', Arial, sans-serif;  /* offisiell fallback er Arial per manualen */
  --font-body: 'Matter', Arial, sans-serif;                /* offisiell fallback er Arial per manualen */
  --font: var(--font-body); /* kompat-alias — design-reference.html/index.html refererer var(--font) direkte, se DESIGN.md ## Endringer */

  /* Space */
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 3rem;

  /* Radius — pill på interaktivt, skarpt på flater (som connectbus.no) */
  --r-card: 0;
  --r-pill: 9999px;

  /* Shadow — brandet bruker ingen; 1px mist-border gjør jobben */
  --shadow: none;
}

/* ==========================================================================
   MentorKit LMS Pro — theming-tokens
   Referanse: plugin-repoets docs/frontend-theming.md + docs/user-menu-branding.md
   (LMS Pro ≥ 1.19.0). Krever TSK-19683 + TSK-19684.

   Hele rotårsaken bak forrige runde med reparasjons-CSS: plugin-innstillingen
   scorm_primary_color = #F6FF7D (accent) brukte pluginen BÅDE som knappefyll
   OG som tekst-, ikon-, tall- og gradientfarge. Designkontrakten sier accent
   kun på knapp/CTA (Don't #5), og aldri som tekst på hvitt (Don't #8) — så
   hver eneste tekstbruk måtte overstyres per selektor.

   Fra 1.19.0 har hver rolle sitt eget token med dagens verdi som default.
   Primary blir stående som accent (den fyller knappene); tekstrollene flyttes
   til ink her. Ingen `!important`, ingen selektor-overstyring.

   NB: tokenene UNDER (--scorm-primary-color, --scorm-button-text-color,
   --scorm-button-radius m.fl.) skrives av Plugin Theming-siden inline på
   wp_head:10 — altså ETTER dette stilarket. De hører hjemme i admin, ikke
   her; settes de her blir de overskrevet. Rolle-tokenene under emitteres
   ikke derfra, og virker.
   ========================================================================== */
:root {
  /* --- Tekstroller. Alle faller ellers tilbake på primary (= accent). ---- */
  --scorm-link-color: var(--color-ink);
  --scorm-link-hover-color: var(--color-ink);
  --scorm-stat-color: var(--color-ink);
  --scorm-eyebrow-color: var(--color-ink);
  --scorm-chip-color: var(--color-ink);
  --scorm-icon-color: var(--color-ink);
  --scorm-price-color: var(--color-ink);
  --scorm-pagination-color: var(--color-ink);
  --scorm-control-accent-color: var(--color-ink);
  --scorm-focus-color: var(--color-ink);

  /* --- Knappe-etiketter -------------------------------------------------
     Primærknappen fylles med accent og inverterer til ink på hover;
     sekundærknappen fylles med --scorm-secondary-color (= ink) hele veien.
     Uten split her arver begge --scorm-button-text-color (= ink), og
     sekundærknappen blir ink-på-ink — den målte 1.00:1-feilen. */
  --scorm-button-primary-text-color: var(--color-ink);
  --scorm-button-primary-hover-text-color: var(--color-accent);
  --scorm-button-secondary-text-color: var(--color-accent);
  --scorm-button-secondary-hover-text-color: var(--color-accent);

  /* --- Flater. Don't #1 (ingen gradient), Don't #4 (ingen skygge). ------- */
  --scorm-avatar-bg: var(--color-ink);
  --scorm-resume-bg: var(--color-surface);
  --scorm-card-shadow: var(--shadow);
  --scorm-card-hover-shadow: var(--shadow);

  /* Kurs- og gruppesider har sin egen palett med #FAFAF6 som bakgrunn — en
     krem-tone som ikke finnes i de fem fargene. Én verdi retter begge
     sidetypene. */
  --scorm-group-cream: var(--color-surface);

  /* --- User menu --------------------------------------------------------
     Pluginens user-menu.css er tokenisert hele veien, så portalens uttrykk
     (pill, skarpt panel, ingen skygge, ink i stedet for accent) settes her
     framfor å reimplementeres. Trigger-hover står bevisst på transparent:
     pluginen bruker samme token for :hover OG [aria-expanded="true"], og en
     åpen dropdown er ikke en accent-tilstand (CB-FIX-2). Hover-fyllet ligger
     derfor i en egen, (hover: hover)-gatet regel lenger nede. */
  --mk-user-menu-font: var(--font-body);
  --mk-user-menu-gap: var(--sp-md);
  --mk-user-menu-radius: var(--r-pill);
  --mk-user-menu-radius-mobile: var(--r-pill);
  --mk-user-menu-trigger-bg: transparent;
  --mk-user-menu-trigger-color: var(--color-ink);
  --mk-user-menu-trigger-hover-bg: transparent;
  --mk-user-menu-trigger-padding: var(--sp-sm) var(--sp-lg);
  --mk-user-menu-trigger-font-weight: 500;
  --mk-user-menu-name-color: var(--color-ink);
  --mk-user-menu-name-weight: 500;
  --mk-user-menu-name-size: 1rem;
  --mk-user-menu-welcome-color: var(--color-ink);
  --mk-user-menu-welcome-opacity: 1;
  --mk-user-menu-welcome-size: 0.8125rem;
  --mk-user-menu-login-font-size: 0.9375rem;
  --mk-user-menu-login-font-weight: 500;
  /* Sekundærknappen MÅ settes her, ikke som selektor-overstyring. Pluginens
     `.mk-user-menu--guest .mk-user-menu__register` (0,2,0) slår enhver regel vi
     skriver på klassen alene (0,1,0), og dens `--mk-um-register-bg` faller
     tilbake på `--scorm-primary-color` (= accent) når dette tokenet mangler.
     Resultatet var to identiske accent-piller side om side, uten primær/sekundær-
     hierarki — den mest synlige feilen i mobilheaderen (TSK-19855). */
  --mk-user-menu-register-bg: transparent;
  --mk-user-menu-register-color: var(--color-ink);
  --mk-user-menu-register-padding: var(--sp-sm) var(--sp-lg);
  /* Ikke sett --mk-user-menu-register-hover-bg her: hover-tilstanden eies av
     `.mk-user-menu.mk-user-menu--guest .mk-user-menu__register:hover` (0,4,0)
     lenger nede, som bevisst tar begge deklarasjonene ut av pluginens hender
     (TSK-19853). Et token her ville vært død kode. */
  --mk-user-menu-dropdown-radius: var(--r-card);
  --mk-user-menu-dropdown-shadow: var(--shadow);
  --mk-user-menu-dropdown-border: 1px solid var(--color-mist);
  --mk-user-menu-dropdown-divider: var(--color-mist);
  --mk-user-menu-dropdown-name-color: var(--color-ink);
  --mk-user-menu-dropdown-email-color: var(--color-ink);
  --mk-user-menu-dropdown-item-color: var(--color-ink);
  --mk-user-menu-dropdown-item-hover-bg: var(--color-mist);
  --mk-user-menu-dropdown-item-hover-color: var(--color-ink);
  --mk-user-menu-dropdown-icon-color: var(--color-ink);
  --mk-user-menu-dropdown-logout-color: var(--color-ink);
  --mk-user-menu-dropdown-logout-hover-color: var(--color-ink);
  --mk-user-menu-dropdown-logout-hover-bg: var(--color-mist);
  /* Marginen JS-en clamper mobil-dropdownen mot (LMS Pro ≥ 1.19.0).
     Bevisst rå px og ikke var(--sp-md): clamp-scriptet leser verdien med
     parseFloat(getComputedStyle(...).getPropertyValue(...)), og en custom
     property beholder enheten sin der — "1rem" ville blitt lest som 1px. */
  --mk-user-menu-dropdown-viewport-margin: 16px;
}

@font-face {
  font-family: 'Klarheit Kurrent';
  src: url('fonts/ESKlarheitKurrent-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Matter';
  src: url('fonts/Matter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Matter Medium er den andre av to bærende brødtekstvekter i manualen
   («used in two weights regular and medium» — Examples of use viser
   «Matter medium 34/46 pt» merket Body). Den var ikke med i fontleveransen
   på e-post 04.08, så temaet ba om font-weight: 500 fjorten steder uten at
   noen Medium-face fantes — alt rendret som Regular. Hentet fra Connect Bus'
   egen Frontify-portal (web-font, vekt 500) og konvertert woff → woff2 for
   å matche de to andre. */
@font-face {
  font-family: 'Matter';
  src: url('fonts/Matter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body { font-family: var(--font-body); color: var(--color-ink); }
h1, h2 { font-family: var(--font-display); font-weight: 500; }
h1 { line-height: 1.08; }
h2 { line-height: 1.15; }
h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 500; }
/* Astra's dynamic CSS (class-astra-dynamic-css.php) emits headings as
   `h3, .entry-content :where(h3)` (repeated for h4-h6) — the `.entry-content
   :where(h3)` branch is (0,1,0) and beats the bare element rule above
   (0,0,1) for any heading inside post/page content, so h3-h6 inside
   .entry-content rendered the display font instead of Matter. Match the
   specificity instead of !important: a `.entry-content h3` selector is
   (0,1,1), which beats Astra's (0,1,0) regardless of stylesheet order. */
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 { font-family: var(--font-body); font-weight: 500; }

/* ==========================================================================
   Component CSS — Connect Bus front page + header/footer/user-menu
   Source: design/design-reference.html §6 (build-spec.md), values kept
   verbatim. @font-face is already declared above (fonts/*.woff2, not
   assets/fonts/* as the parfil comment implies — path adjusted here since
   the woff2 files were already converted + placed by the base-setup agent).
   ========================================================================== */

/* ---------- Base additions (font-family/color already set above) ---------- */
body { font-weight: 400; background: var(--color-surface); -webkit-font-smoothing: antialiased; }
/* NB: h3,h4,h5,h6 keep the existing font-weight:500 base rule above (basis-
   agent decision, site-wide). The parfil's "h3 { font-weight: 400 }" intent
   is still honored on the front page because .course-title sets
   font-weight:400 with higher specificity (class+element beats element). */

/* Type scale — fluid clamp(), 4 levels: H1 / H2 / body / small */
.h1      { font-size: clamp(2.5rem, 4.2vw + 1rem, 4.25rem); line-height: 1.08; }
.h2      { font-size: clamp(1.75rem, 1.4vw + 1.25rem, 2.25rem); line-height: 1.15; }
.body-lg { font-size: clamp(1.1875rem, 0.4vw + 1.1rem, 1.3125rem); line-height: 1.5; }
.small   { font-size: 0.9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Scoped reset ----------
   The parfil's global reset (ul list-style, img display:block, a color:
   inherit, h1/h2/h3/p margin:0) would collide with Astra/plugin markup
   elsewhere (course archive lists, admin-rendered content, etc.), so it is
   scoped to the header, footer and front-page sections only — the only
   places this markup is used. box-sizing/margin/padding resets below are
   left global since they only normalize UA defaults and are safe site-wide. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.site-header a,
.site-footer a,
.hero a,
.bg-mist a,
.bg-surface a { color: inherit; }

.site-header ul,
.site-footer ul,
.hero ul,
.bg-mist ul,
.bg-surface ul { margin: 0; padding: 0; list-style: none; }

.site-header h1, .site-header h2, .site-header h3, .site-header p,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer p,
.hero h1, .hero h2, .hero h3, .hero p,
.bg-mist h1, .bg-mist h2, .bg-mist h3, .bg-mist p,
.bg-surface h1, .bg-surface h2, .bg-surface h3, .bg-surface p { margin: 0; }

.site-header img,
.site-footer img,
.hero img,
.bg-mist img,
.bg-surface img { max-width: 100%; display: block; }

/* ---------- Skip link ----------
   Astra already renders its own skip-link (header.php: <a class="skip-link
   screen-reader-text" href="#content">), so it is styled in place here
   instead of adding a second one (see functions.php for the Norwegian
   string override). It also carries the "screen-reader-text" class, whose
   clip/width/height hiding must be reset here so the accent-pill focus
   style is actually visible. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-md);
  z-index: 100;
  background: var(--color-accent);
  color: var(--color-ink);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-pill);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: nowrap;
}
.skip-link:focus { top: var(--sp-md); }

/* ---------- Focus ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--sp-lg);
  padding-right: var(--sp-lg);
}
/* NB: naken `section`-selektor. Denne er ment for forsidens EGNE seksjoner,
   men <section> brukes også av MentorKit-pluginen (.scorm-profile-stats,
   .scorm-profile-section) og av Complianz. Uten unntakene under fikk hver
   plugin-seksjon +96px vertikal luft den aldri var designet for — det er
   grunnen til at /my-profile/ leste som «masse mer space» enn samme
   plugin-side hos andre klienter (Sindre-funn 2026-08-04).
   Lederdashbordet bruker `gld-`-prefikset: «Inviter via e-post» er en
   <section class="gld-invite-card">, og fikk 48px topp/bunn og 0 sidepolstring,
   så teksten lå inntil kortkanten (Sindre-funn 2026-10-08). */
section:not([class*="scorm-"]):not([class*="mk-"]):not([class*="gld-"]):not([class*="cmplz"]) {
  padding: var(--sp-xl) 0;
}
.bg-mist { background: var(--color-mist); }
.bg-surface { background: var(--color-surface); }
.bg-ink { background: var(--color-ink); color: var(--color-surface); }

/* ---------- Pills (CTA buttons — reserved for real actions) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  border-radius: var(--r-pill);
  background: var(--color-accent);
  color: var(--color-ink);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pill:hover { background: var(--color-ink); color: var(--color-accent); }
.pill--cta,
.mk-user-menu__login { padding: var(--sp-sm) var(--sp-lg); }
.pill--sm { padding: 0.4rem var(--sp-md); font-size: 0.875rem; }
/* NB: 0.4rem er utenfor spacing-skalaen (sm/md/lg/xl) — arvet bevisst fra
   godkjent prototype, ikke en feil. Se DESIGN.md ## Endringer. */

/* ---------- Nav links (plain text, pill only on hover/active) ---------- */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--color-ink);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.nav-link:hover,
.nav-link[aria-current="page"] { background: var(--color-accent); }
/* Kurskatalog active-state — the header HTML element is static, so
   aria-current can't be set server-side per build-decisions.md §3; the
   accepted realization is a body-class rule on the courses archive
   (verified body class: post-type-archive-scorm_package). */
body.post-type-archive-scorm_package .nav-link--kurskatalog { background: var(--color-accent); }

/* ---------- Header ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-mist);
}
/* Astra's own dynamic CSS sets .ast-primary-header-bar background to
   var(--ast-global-color-primary) (= mist token, wrong per spec) and its
   border-bottom-color to var(--ast-global-color-subtle-background) (= ink
   token) — inspected in the rendered <head> inline stylesheet. Both are
   single-class selectors; overriding them with a 2-class selector here wins
   on specificity without !important. Covers desktop + mobile header rows
   (both use the same .ast-primary-header-bar class). */
.site-header .ast-primary-header-bar {
  background-color: var(--color-surface);
  border-bottom-color: var(--color-mist);
}
/* The parfil's ".site-header .wrap { display:flex; justify-content:
   space-between; ... }" has no real match in Astra's builder DOM — there is
   no element with class="wrap" inside the header. Astra's own row wrapper
   (.ast-builder-grid-row, inside .site-primary-header-wrap) already renders
   at max-width:1200px with the logo/nav split handled by its own grid-area
   system (verified in the rendered inline CSS + DOM), so that part needs no
   override. What DID differ from spec: Astra defaults the row to a fixed
   min-height:80px instead of sizing to content + var(--sp-md) padding —
   overridden below on the real wrapper class, covering desktop + mobile
   (both rows share .site-primary-header-wrap). */
.site-header .site-primary-header-wrap {
  min-height: 0;
  padding-top: var(--sp-md);
  padding-bottom: var(--sp-md);
}
.logo-link { display: inline-flex; }
.logo-link img { height: 26px; width: auto; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); }

/* ---------- User menu ([mentorkit_user_menu]-shortcode) ----------
   Pluginens user-menu.css er enqueued på alle sider og bygger hele menyen:
   container, greeting, trigger, panel, header, divider, items, chevron.
   Alt uttrykk går gjennom --mk-user-menu-*-tokenene, som er satt i :root
   øverst. Her ligger kun det tokenlaget ikke dekker.

   Logget-inn-teksten ("Log In", "Welcome back", "My courses") kommer fra
   plugin-i18n-strenger, ikke herfra. */

/* Guest-lenken er en ren <a> uten bakgrunns-token; portalen viser den som
   accent-pill.

   NB om register-varianten: "Anyone can register" er PÅ i dag, så
   `.mk-user-menu__register` rendres på hver eneste side i prod (verifisert i
   live-HTML 2026-08-13).

   Den «egne saken» TSK-19853 pekte på er nå gjort: knappen er den transparente
   sekundærknappen uttrykket beskriver. Fiksen ligger IKKE her, men i
   `--mk-user-menu-register-*` øverst i fila — pluginens
   `.mk-user-menu--guest .mk-user-menu__register` (0,2,0) slår enhver regel vi
   skriver på klassen alene (0,1,0), så token-laget er eneste vei inn.
   <!-- Kilde: TSK-19853 (diagnose), TSK-19855 (fiks), 2026-08-13 --> */
.mk-user-menu__login,
.mk-user-menu__register {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Kanten på primærknappen er gjennomsiktig og finnes kun for å gi de to
   pillene samme høyde — sekundærknappens 1px-kant teller med i box-sizing. */
.mk-user-menu__login {
  background: var(--color-accent);
  color: var(--color-ink);
  border: 1px solid transparent;
}
/* Fyll og farge kommer fra --mk-user-menu-register-* i :root (se kommentaren
   der). Kanten har intet token, så den blir stående her — det er den som gjør
   sekundærknappen lesbar som sekundær. */
.mk-user-menu__register { border: 1px solid var(--color-ink); }
/* Typografien har heller ingen tokens: pluginen hardkoder `font-size: 14px;
   font-weight: 600` på `.mk-user-menu--guest .mk-user-menu__register` (0,2,0).
   600 bryter designkontrakten (ingen vekt over 500), og 14px ga knappen en
   annen høyde enn «Logg inn» ved siden av — to naboknapper må dele grunnlinje.
   Regelen må derfor opp på 0,3,0: user-menu.css lastes fra header-html-2 i
   <body>, altså etter dette arket, så lik spesifisitet taper. */
.site-header .mk-user-menu--guest .mk-user-menu__register {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ---------- Administrasjon-lenken i headeren ----------
   Rendres av pluginen når header-html-2 har `[mklms_user_menu leader_cta="yes"]`,
   og bare for brukere som kan administrere kurs eller lede grupper. Pluginen
   stiler den som en fet knapp (700, 14px) mellom hilsenen og kontomenyen. Her
   leser den som en vanlig nav-lenke ved siden av «Kurskatalog»: samme vekt,
   størrelse og polstring, pill bare på hover og aktiv side.
   Selektorene står på (0,3,0) fordi user-menu.css lastes etter dette arket. */
.site-nav .mk-user-menu .mk-user-menu__leader-cta {
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}
.site-nav .mk-user-menu .mk-user-menu__leader-cta svg { display: none; }
/* Aktiv side: pluginen setter denne body-klassen på Administrasjon-siden. */
body.scorm-leader-dashboard-hides-title .site-nav .mk-user-menu .mk-user-menu__leader-cta {
  background: var(--color-accent);
}
@media (hover: hover) {
  .site-nav .mk-user-menu .mk-user-menu__leader-cta:hover {
    background: var(--color-accent);
    color: var(--color-ink);
  }
}
/* Hilsenen står allerede øverst på Min profil og Administrasjon. I headeren
   skilte den «Kurskatalog» fra de andre lenkene, så den vises ikke her. */
.site-nav .mk-user-menu--logged-in .mk-user-menu__greeting { display: none; }

/* Triggeren er en outline-pill i portalen. Pluginen setter `border: none` og
   har ikke et border-token, så kanten blir stående her. Font-størrelsen er
   heller ikke tokenisert (hardkodet 14px) — portalens skala er 0.9375rem. */
.mk-user-menu__trigger {
  border: 1px solid var(--color-ink);
  font-size: 0.9375rem;
}
/* Tekstfargen må pinnes for fokus- og åpen-tilstand, ikke bare hvile.
   Astras Customizer-CSS har `button:focus { color: #F6FF7D }` (0,1,1), som
   slår pluginens `.mk-user-menu__trigger { color: var(--mk-um-trigger-color) }`
   (0,1,0) — og triggeren ER en <button> som beholder fokus etter et klikk.
   Uten dette leser etiketten accent på transparent flate: målt 1.08:1 i
   tilstanden «dropdown åpen, mus flyttet vekk», både på desktop og etter et
   tap på mobil. Tokenet alene rekker ikke opp i spesifisitet her. */
.mk-user-menu__trigger:focus,
.mk-user-menu__trigger:focus-visible,
.mk-user-menu__trigger[aria-expanded="true"] { color: var(--color-ink); }
.mk-user-menu__trigger:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Accent-fyllet er en ren hover-tilstand — derfor står trigger-hover-tokenet
   på transparent i :root og fyllet ligger her, gatet bak (hover: hover) så
   det ikke henger igjen etter et tap på touch.
   Tekstfargen MÅ pinnes i samme regel: Astras Customizer-CSS har
   `button:hover { color: #F6FF7D; background: #002730 }`, og triggeren ER en
   <button>. Uten `color` her ble resultatet accent på accent = målt 1.00:1
   (Don't #10). */
@media (hover: hover) {
  .mk-user-menu__trigger:hover { background: var(--color-accent); color: var(--color-ink); }
  .mk-user-menu__login:hover { background: var(--color-ink); color: var(--color-accent); }
  /* «Opprett konto» må stå guest-scopet, ulikt de to over.
     `user-menu.css` laster ETTER dette arket og eier knappen med to
     guest-scopede regler:
       .mk-user-menu--guest .mk-user-menu__register        (0,2,0) color: ink
       .mk-user-menu--guest .mk-user-menu__register:hover  (0,3,0) background: ink
     Den siste bytter bakgrunn til ink UTEN å pinne `color`, og en enkel
     `.mk-user-menu__register:hover` (0,2,0) her taper mot begge — den tapte
     stille fra dagen den ble skrevet. Resultatet var ink-på-ink, målt 1.00:1:
     etiketten forsvant helt på hover, på hver eneste side. Don't #10, speilet.
     Selektoren er doblet på `.mk-user-menu.mk-user-menu--guest` (0,4,0), ikke
     bare `--guest` (0,3,0). Grunnen: (0,3,0) ville vært EKSAKT uavgjort med
     pluginens hover-regel, og siden `user-menu.css` laster sist, ville
     pluginen fortsatt eid `background` — bakgrunnen kom da i praksis fra
     `--scorm-secondary-color`, som Plugin Theming-siden i wp-admin kan endre
     uten å røre denne fila. Med (0,4,0) eier temaet begge deklarasjonene, og
     inversjonen avhenger ikke av et tredjeparts-token.
     (`color` ville vunnet uansett — pluginens hover-regel setter den ikke,
     og dens hvile-regel er kun (0,2,0).)
     <!-- Kilde: TSK-19853, 2026-08-13 --> */
  .mk-user-menu.mk-user-menu--guest .mk-user-menu__register:hover {
    background: var(--color-ink);
    color: var(--color-accent);
  }
}

/* ---------- Hero ---------- */
.hero .wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-xl); align-items: center; }
.hero-copy p { margin-top: var(--sp-md); max-width: 42ch; }
.hero-copy .pill { margin-top: var(--sp-lg); }
.cta-text--logged-in { display: none; }
body.is-logged-in .cta-text--guest,
body.logged-in .cta-text--guest { display: none; }
body.is-logged-in .cta-text--logged-in,
body.logged-in .cta-text--logged-in { display: inline; }

/* Certificate stamp visual */
.cert-card {
  position: relative;
  border: 1px solid var(--color-ink);
  border-radius: var(--r-card);
  background: var(--color-surface);
  padding: var(--sp-lg);
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.cert-anchor { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.cert-anchor--tl { top: var(--sp-sm); left: var(--sp-sm); border-top: 2px solid var(--color-ink); border-left: 2px solid var(--color-ink); }
.cert-anchor--tr { top: var(--sp-sm); right: var(--sp-sm); border-top: 2px solid var(--color-ink); border-right: 2px solid var(--color-ink); }
.cert-anchor--bl { bottom: var(--sp-sm); left: var(--sp-sm); border-bottom: 2px solid var(--color-ink); border-left: 2px solid var(--color-ink); }
.cert-anchor--br { bottom: var(--sp-sm); right: var(--sp-sm); border-bottom: 2px solid var(--color-ink); border-right: 2px solid var(--color-ink); }
.cert-watermark {
  position: absolute; top: 50%; left: 50%; width: 68%; height: auto;
  transform: translate(-50%, -50%); opacity: 0.06; pointer-events: none;
}
.cert-kicker { position: relative; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.cert-body { position: relative; }
.cert-course { font-size: 1.375rem; font-weight: 400; line-height: 1.3; }
.cert-date { margin-top: var(--sp-sm); font-size: 0.9375rem; }
.cert-meta {
  position: relative; font-size: 0.875rem; color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--color-mist); padding-top: var(--sp-sm);
}

/* ---------- Section headings ---------- */
.section-head { margin-bottom: var(--sp-xl); }

/* ---------- Course cards ---------- */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-mist);
  border-left: 3px solid var(--color-ink);
  border-radius: var(--r-card);
  padding: var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-md);
}
.course-title { font-size: 1.5rem; font-weight: 400; line-height: 1.3; }
.course-meta { color: var(--color-ink); }
.course-card .pill { margin-top: auto; align-self: flex-start; }

/* ---------- Forsidens kursseksjon: pluginens grid i forsidens kortdesign ----
   Kortene på forsiden kommer fra `[mklms_courses_grid]` slik at de aldri kan
   komme ut av synk med katalogen. Pluginens egen kortstil er laget for
   /kurs/-arkivet; på forsiden skal de se ut som `.course-card` over.
   Dette er derfor kategori 3 i plugin-seksjonen lenger ned (ekte
   merkevareavvik), ikke en reparasjon — og det er scopet til `.course-section`
   nettopp for at katalogsiden skal beholde sitt eget uttrykk.
   DOM-en er pluginens: alle selektorer er klasse-scopet, ingen nakne
   elementselektorer. */
/* Seksjonen eier sin egen vertikale rytme (`section`-polstring +
   `.section-head`-margin). Pluginens grid har 20px topp / 40px bunn som er
   laget for /kurs/-arkivet, og som ellers legger seg oppå. */
.course-section .scorm-courses-grid { margin-top: 0; }
.course-section .scorm-courses-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-bottom: 0;
}
.course-section .scorm-course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-mist);
  border-left: 3px solid var(--color-ink);
  border-radius: var(--r-card);
}
/* Innpakningen eier polstringen, ikke kortet: pluginen setter `padding: 20px`
   på `.scorm-course-content` (courses-grid.css:194). Legger man den på kortet
   i tillegg, blir den lagt sammen — 44px i stedet for 24px. */
.course-section .scorm-course-content { padding: var(--sp-lg); }
.course-section .scorm-course-title { font-size: 1.5rem; line-height: 1.3; margin: 0; }
.course-section .scorm-course-title a { text-decoration: none; color: inherit; }
.course-section .scorm-course-excerpt {
  margin-top: var(--sp-md);
  margin-bottom: 0; /* pluginen setter 15px; luften under eies av .scorm-course-actions */
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
/* `.scorm-course-meta` rendres alltid, men er tom her (nivå/varighet er ikke
   satt på disse kursene). Den er whitespace-only, så `:empty` treffer den
   ikke — marginene styres derfor eksplisitt per element i stedet for med
   `gap`, slik at en tom meta ikke koster en luftlinje. */
.course-section .scorm-course-meta { margin: 0; }
.course-section .scorm-course-actions { margin-top: auto; padding-top: var(--sp-md); }
/* `color` her er (0,2,0) og slår pluginens `.scorm-btn-primary:hover` (også
   (0,2,0), men tidligere i kaskaden). Hover-tilstanden må derfor pinne sin
   egen `color` — se regelen i LMS Pro-blokken lenger ned (TSK-19853). */
.course-section .scorm-btn-primary {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 0.4rem var(--sp-md);
  font-size: 0.875rem;
  border-radius: var(--r-pill);
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: none;
}
/* Pillen i designet har ingen ikon. */
.course-section .scorm-btn-primary .dashicons { display: none; }

/* ---------- Steps ---------- */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.step-num { font-size: 3.25rem; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.step-text { margin-top: var(--sp-md); }

/* ---------- Gutenberg-blokker på forsiden ----------
   Forsiden er bygd av core-blokker (wp:group/heading/paragraph/shortcode) med
   temaets egne klasser. WPs flow-layout injiserer da `margin-block-start` på
   hvert søsken via `:where(.is-layout-flow) > * + *`. Den regelen har
   spesifisitet 0, så den taper mot alt her — MEN kun der vi faktisk setter
   margin selv. I grid-containere setter vi ingen, så gapet slo gjennom og dyttet
   rutene 2..n 24px ned (målt: steg 1 y=1283, steg 2–3 y=1307).
   Vertikal rytme eies av reglene over, så nullstill det injiserte gapet her. */
.hero .wrap > * + *,
.step-grid > * + *,
.course-grid > * + *,
.section-head > * + * { margin-block-start: 0; }

/* CTA-en kommer fra [mklms_guest_only]/[mklms_logged_in_only] og blir pakket i
   en <p> av wpautop. Uten dette får den 16px fra `.hero-copy p` OG 24px fra
   `.hero-copy .pill` = 40px. Flytt avstanden til wrapperen så den teller én
   gang. `:has()` gjør at regelen faller bort av seg selv hvis kunden bytter
   CTA-en ut med noe annet enn en .pill. */
.hero-copy > p:has(> .pill) { margin-top: var(--sp-lg); }
.hero-copy > p > .pill { margin-top: 0; }

/* ---------- Footer ---------- */
.site-footer { padding: var(--sp-xl) 0; }
.footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-lg); }
.footer-logo img { height: 22px; width: auto; }
.footer-links { display: flex; gap: var(--sp-lg); flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: var(--color-mist); }
.footer-links a:hover { color: var(--color-surface); }
.footer-line {
  margin-top: var(--sp-lg); padding-top: var(--sp-lg);
  border-top: 1px solid var(--color-mist); color: var(--color-mist);
}

/* ---------- Front page <main> — kill Astra container padding/box so
   sections go edge-to-edge and center via their own .wrap (see task D) ----------
   Scopet på `body.home`, ikke på en post-ID. Regelen sa tidligere
   `body.page-id-14`, altså «forsiden» uttrykt som et tall: bytter man hvilken
   side som er forside (som ved blokk-konverteringen i TSK-19841, der utkastet
   lever som egen side før flippen), mister den nye forsiden full-bleed uten at
   noe annet ser galt ut. `.home` er det regelen faktisk mener, og resten av
   forside-reglene lenger ned bruker allerede den. */
body.home #primary,
body.home .site-content .ast-container {
  padding: 0;
  max-width: none;
}
body.home .entry-content { margin: 0; }

/* ---------- Responsive (max-width: 720px) ---------- */
@media (max-width: 720px) {
  section:not([class*="scorm-"]):not([class*="mk-"]):not([class*="gld-"]):not([class*="cmplz"]) {
    padding: var(--sp-xl) 0;
  }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy { order: 1; }
  .cert-card { order: 2; max-width: 340px; }
  .course-grid { grid-template-columns: 1fr; }
  /* Speiler .course-grid: uten denne overstyrer den ubetingede 3-kolonners
     regelen over pluginens egen responsive grid hele veien ned. */
  .course-section .scorm-courses-grid-container { grid-template-columns: 1fr; }
  .step-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .mk-user-menu__greeting { display: none; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}

/* ---------- Root font-size fix (parfil-paritet) ----------
   Astra setter html font-size som % av body-font-size-settingen (21px),
   som blåser opp alle rem-baserte tokens/clamps med 31 %. Parfilen
   (design-reference.html) forutsetter 16px rot. Body-teksten beholder
   21px via Astras egen px-baserte body-regel. */
html { font-size: 100% !important; }

/* ---------- Pixel-audit-fikser (Fable, 2026-08-04) ---------- */

/* 1. Forside-seksjoner skal være full-bleed: Gutenberg/Astra setter
      max-width:1200px på direkte barn av entry-content. Seksjonene har
      egen .wrap-sentrering (1200px) internt. */
.home .entry-content > section,
.home .entry-content > .wp-block-html > section { max-width: none; }
.home .entry-content > * { margin-top: 0; margin-bottom: 0; }
.home .site-content { padding-top: 0; }
.home .site-main, .home .ast-article-single { margin: 0; padding: 0; }

/* 2. Footer: parfil-markupen ligger INNI Astras footer-element — ink-bakgrunn
      og venstre-justering må settes på Astras wrappere. */
footer.site-footer { background: var(--color-ink); color: var(--color-surface); }
footer.site-footer .ast-builder-grid-row { padding: 0; }
footer.site-footer .ast-footer-html,
footer.site-footer .footer-widget-area { text-align: left; }

/* 3. Astras underline på innholds-/builder-lenker overstyres på
      komponentene våre (parfil: text-decoration none). */
a.pill, .entry-content a.pill, a.nav-link,
.footer-links a, .mk-user-menu__login,
.mk-user-menu__dropdown-item { text-decoration: none !important; }

/* Footer-fiks 2: Astras primary-footer-row maler egen lys bakgrunn over
   ink-en, og footer-line arver center-justering. */
footer.site-footer .site-primary-footer-wrap { background: transparent; }
footer.site-footer .footer-line { text-align: left; }

/* Spacing-paritet: Astra legger 64px margin på content-area og 45px padding
   på footer-row-wrap — parfilen har kun seksjonenes egne 48px. */
.home .content-area { margin-top: 0; margin-bottom: 0; }
footer.site-footer .site-primary-footer-wrap { padding-top: 0; padding-bottom: 0; }
.home #primary { margin: 0; }

/* Pill-høyde-paritet: parfilen arver line-height normal (~1.2) på piller;
   Astra setter body 1.5 som blåser pillene fra 33 til 39px. */
.pill, .nav-link, .mk-user-menu__login, .mk-user-menu__register,
.mk-user-menu__trigger { line-height: normal; }
/* Astras builder-element-CSS nuller p-marginer i footer — gjenopprett parfilens. */
footer.site-footer .footer-line { margin-top: var(--sp-lg); padding-top: var(--sp-lg); }

/* ==========================================================================
   Mobil header — hamburger-disclosure (TSK-19855)

   Erstatter den gamle mobilparitets-regelen, som stablet logo, nav og
   auth-piller i tre venstrestilte rader (153 px = 19 % av en 812 pt-skjerm,
   med tre ulike venstrekanter).

   Markupen kommer fra connectbus_header_nav_markup() i functions.php:
   `.cb-burger` etterfulgt av `#cb-nav-panel` som pakker inn `.site-nav`.
   Grunnen til at den bygges i PHP og ikke limes inn i Customizerens
   header-html-2: den strengen er ikke versjonskontrollert og bærer absolutte
   prod-URL-er.

   To ting er bevisst:
   1. Panelet er `display: contents` uten `.cb-nav-enhanced`. Uteblir JS-en,
      rendrer navigasjonen inline som før — en ødelagt toggle skal aldri kunne
      gjemme sidens eneste meny.
   2. Pluginens `[mentorkit_user_menu]` beholder sin egen dropdown inne i
      panelet i stedet for å bli flatet ut. Pluginens document-click-handler
      setter `dropdown.hidden = true` ved hvert klikk utenfor menyen, så en
      permanent åpnet dropdown ville blitt lukket igjen av pluginen selv —
      og `hidden` er skjult for skjermlesere uansett hva CSS sier.
   ========================================================================== */

/* Inert på desktop: Astras egen grid-layout er urørt over 720px. */
.cb-nav-panel { display: contents; }
.cb-burger-slot { display: none; }

@media (max-width: 720px) {
  /* Uten JS: behold den gamle stablede raden. Navigasjonen er da synlig inline
     (panelet er fortsatt `display: contents`), akkurat som før denne oppgaven. */
  header.site-header .ast-builder-grid-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-sm);
  }
  header.site-header .site-header-primary-section-right {
    width: 100%;
    justify-content: flex-start;
  }

  /* Med JS: én rad, logo venstre, hamburger høyre. Flagget settes inline i
     wp_head, altså før første paint — se connectbus_header_nav_js_flag(). */
  .cb-js header.site-header .ast-builder-grid-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cb-js header.site-header .site-header-primary-section-right {
    width: auto;
    justify-content: flex-end;
  }

  .cb-js .cb-burger-slot { display: flex; }
  .cb-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-ink);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
  }
  .cb-burger[hidden] { display: none; }
  .cb-burger__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .cb-burger__bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: var(--r-pill);
    background: currentColor;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  /* Don't #10, i sin reneste form. Astras Customizer-CSS har
     `button:focus { color: #F6FF7D; background: #002730 }` (0,1,1), som slår
     `.cb-burger` (0,1,0) — og knappen BEHOLDER fokus etter et klikk. Uten denne
     pinningen ble stripene accent på accent (målt 1.00:1) straks menyen var
     åpnet: knappen så ut som en tom gul sirkel. Både `color` og `background`
     må pinnes, og i alle tre tilstandene Astra treffer. */
  .cb-burger,
  .cb-burger:hover,
  .cb-burger:focus,
  .cb-burger:focus-visible {
    background: transparent;
    color: var(--color-ink);
    /* Astra gir alle <button> en 1px-skygge. Merkevaren bruker ingen skygger
       (Don't #4) — cb-audit fanget denne på fire sider. */
    box-shadow: var(--shadow);
  }
  .cb-burger[aria-expanded="true"],
  .cb-burger[aria-expanded="true"]:hover,
  .cb-burger[aria-expanded="true"]:focus {
    background: var(--color-accent);
    color: var(--color-ink);
  }
  .cb-burger[aria-expanded="true"] .cb-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cb-burger[aria-expanded="true"] .cb-burger__bar:nth-child(2) { opacity: 0; }
  .cb-burger[aria-expanded="true"] .cb-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .cb-burger:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }
  /* Hover gates bak (hover: hover): på touch henger :hover igjen etter et tap,
     så et fyll her ville blitt permanent. Samme regel som user-menu-triggeren. */
  @media (hover: hover) {
    .cb-burger:hover { background: var(--color-accent); color: var(--color-ink); }
  }

  /* Panelet henger under header-baren. Offset-parent er
     `.ast-primary-header-bar` (position: relative, verifisert i DOM-en) — ingen
     forfedre klipper med overflow, så en absolutt plassering treffer rett. */
  .cb-js header.site-header.cb-nav-enhanced .cb-nav-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-mist);
    /* 20px, ikke --sp-md: det er Astras egen horisontale padding på
       .ast-primary-header-bar (målt "16px 20px"). Matcher vi den ikke, får
       panelet en fjerde venstrekant 4px innenfor logoen — nøyaktig den ujevne
       kanten denne oppgaven skulle fjerne. */
    padding: var(--sp-sm) 20px var(--sp-md);
  }
  .cb-js header.site-header.cb-nav-enhanced .cb-nav-panel:not(.is-open) { display: none; }

  .cb-nav-panel .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  /* Navigasjonslenker blir fullbredde rader. Radius 0 er innenfor kontrakten
     («0 eller pill»); en pill i en fullbredde liste leser som en knapp. */
  .cb-nav-panel .nav-link {
    justify-content: flex-start;
    padding: 14px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-mist);
    font-size: 1rem;
  }
  .cb-nav-panel .nav-link:hover { background: transparent; }
  /* Aktiv side markeres med mist, ikke accent. På kurskatalogen ville en
     accent-pill havnet rett over «Logg inn» — to gule piller oppå hverandre,
     altså nøyaktig det manglende hierarkiet denne oppgaven fjernet. Accent
     forblir CTA-en; mist sier «du er her». Målt ink på mist: 10.4:1.
     Understreking er ikke et alternativ her (`a.nav-link` setter
     `text-decoration: none !important` lenger nede), og fet skrift heller ikke
     — kontrakten tillater ingen vekt over 500, som allerede er basisvekten.
     Pillen trekkes ut i panelets polstring så etiketten står på samme
     venstrekant som de andre radene. */
  .cb-nav-panel .nav-link[aria-current="page"],
  body.post-type-archive-scorm_package .cb-nav-panel .nav-link--kurskatalog {
    background: var(--color-mist);
    border-radius: var(--r-pill);
    border-bottom-color: transparent;
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
    margin-left: calc(var(--sp-md) * -1);
    margin-right: calc(var(--sp-md) * -1);
  }

  /* Auth-blokka: full bredde, primær over sekundær. */
  .cb-nav-panel .mk-user-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-sm);
    padding-top: var(--sp-md);
  }
  .cb-nav-panel .mk-user-menu__login,
  .cb-nav-panel .mk-user-menu__register {
    justify-content: center;
    width: 100%;
  }

  /* Kontoinngangen skal lese som de andre radene i panelet, ikke som en
     fullbredde pill med et ensomt ikon. Pluginens egen mobilregel
     (@media max-width: 768px) skjuler etikett og chevron og krymper triggeren
     til 40 × 40 — riktig når den står i header-baren, feil når den er en rad
     her. Selektorene må opp på 0,3,0: pluginens user-menu.css lastes fra
     header-html-2 i <body>, altså etter dette arket, så lik spesifisitet taper. */
  .cb-nav-panel .mk-user-menu--logged-in .mk-user-menu__trigger {
    justify-content: flex-start;
    gap: var(--sp-sm);
    width: 100%;
    height: auto;
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    font-size: 1rem;
  }
  .cb-nav-panel .mk-user-menu__trigger .mk-user-menu__label { display: inline; }
  .cb-nav-panel .mk-user-menu__trigger .mk-user-menu__chevron {
    display: block;
    margin-left: auto;
  }

  /* Administrasjon er en rad som de andre i panelet. */
  .cb-nav-panel .mk-user-menu .mk-user-menu__leader-cta {
    justify-content: flex-start;
    padding: 14px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--color-mist);
    font-size: 1rem;
  }
  .cb-nav-panel .mk-user-menu .mk-user-menu__leader-cta:hover { background: transparent; }
  body.scorm-leader-dashboard-hides-title .cb-nav-panel .mk-user-menu .mk-user-menu__leader-cta {
    background: var(--color-mist);
    border-radius: var(--r-pill);
    border-bottom-color: transparent;
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
    margin-left: calc(var(--sp-md) * -1);
    margin-right: calc(var(--sp-md) * -1);
  }
}
/* ==========================================================================
   LMS Pro-flatene — det tokenene ikke dekker
   Ryddet 2026-08-05 (TSK-19686). Alt fargearbeid som tidligere lå her som
   selektor-overstyringer er flyttet til :root-tokenene øverst i fila.

   Det som står igjen er tre ting, i denne rekkefølgen:
     1. Radius og font-vekt. LMS Pro 1.19.0 tokeniserte farger, gradienter og
        skygger, men ikke radius/vekt — de er hardkodet i plugin-CSS-en
        (auth.css `.scorm-btn { border-radius: 8px; font-weight: 600 }` osv.).
        Token-PR-en for dem er varslet som egen runde; til den lander må
        Don't #3 og Don't #6 håndheves nedstrøms.
     2. Plugin-lokale token-aliaser. `.scorm-my-profile` definerer sine egne
        --scorm-profile-*-variabler av --scorm-primary-color. De er definert
        PÅ elementet, så en :root-verdi når dem ikke — de må settes i samme
        scope.
     3. Ekte merkevareavvik. Portalen vil noe annet enn pluginen, uavhengig
        av hvilke tokens som finnes.

   Alt annet skal være borte. Kommer du til å legge til en farge-override
   her: sjekk docs/frontend-theming.md først — sannsynligvis finnes tokenet.
   Aldri naken element-selektor: DOM-en er pluginens, ikke vår.
   ========================================================================== */

/* ---------- Radius og vekt (Don't #3, Don't #6) ----------
   Pluginen bruker 4/6/8/12px radius og vekt 600–900 flere steder.
   Avataren (border-radius 50 %) er bevisst urørt: en sirkel er ikke en
   «rounded-lg»-mellomting, og DESIGN.md definerer ingen avatar-komponent. */
.scorm-course-card,
.scorm-profile-empty,
.scorm-profile-course-list,
.scorm-profile-progress__bar,
.scorm-profile-progress__fill,
.scorm-my-profile .scorm-profile-stat,
.scorm-my-profile .scorm-profile-section,
.scorm-my-profile .scorm-profile-identity__editor,
.scorm-profile-identity,
.scorm-profile-resume,
body.scorm-auth-page .scorm-form-group input,
body.scorm-auth-page .scorm-checkbox-label .checkmark { border-radius: var(--r-card); }

body.scorm-auth-page .scorm-btn,
.scorm-course .scorm-course-btn,
.scorm-courses-grid .scorm-btn-primary,
.scorm-course-card .scorm-btn-primary { border-radius: var(--r-pill); }
/* Catalogue grid (`/kurs/`) buttons weren't covered above — plugin default
   is 6px there even though the scorm_button_radius option is 9999px.
   `.course-section .scorm-btn-primary` (front page) already has pill radius
   via its own rule further down and is a different context — left alone. */

/* Spesifisiteten er tilpasset per selektor — pluginen bruker bl.a.
   `.scorm-my-profile h1.scorm-my-profile__title` (0,2,1). Verifisert med
   måling, ikke antatt. */
.scorm-btn,
.scorm-my-profile .scorm-btn,
.scorm-my-profile h1.scorm-my-profile__title,
.scorm-profile-identity__name,
.scorm-profile-stat__value,
.scorm-profile-stat__label,
.scorm-profile-section__link,
.scorm-profile-resume__eyebrow,
.scorm-profile-resume__title,
.scorm-my-profile .scorm-profile-pill,
.scorm-my-profile h2,
.scorm-my-profile h3,
.scorm-profile-identity__avatar,
.scorm-course .scorm-course-hero-title,
.scorm-course .scorm-course-tag,
.scorm-course .scorm-course-btn,
.scorm-courses-grid .scorm-course-title,
.scorm-courses-grid .scorm-course-title a,
.scorm-course .scorm-course-intro-content h2,
body.scorm-auth-page .scorm-form-group label,
body.scorm-auth-page .scorm-auth-wrapper .scorm-auth-header h1 { font-weight: 500; }
/* Course-page intro heading ("What you will learn") is a bare <h2> inside
   .scorm-course-intro-content (verified in single-scorm_package.php) — the
   plugin sets it to 600 via `.scorm-course-intro h2`, which is ONE class +
   ONE element = (0,1,1). `.scorm-course-intro-content h2` alone is also
   (0,1,1) — "-content" is part of the class name, not a second class, so
   that selector only tied the plugin and lost on source order (plugin CSS
   loads after this stylesheet). Scoped to the shared `.scorm-course`
   ancestor instead (same pattern as the :has() fix above) for a real
   (0,2,1) that wins regardless of load order. */

/* Displayfonten er merkevare, ikke reparasjon — men auth-h1 arver den ikke
   fra basisregelen: plugin-selektoren er langt mer spesifikk. */
body.scorm-auth-page .scorm-auth-wrapper .scorm-auth-header h1 { font-family: var(--font-display); }

/* Skygger pluginen setter direkte i en regel, ikke via --scorm-card-shadow:
   auth-knappens hover-glød og input-ringen. Complianz' knapper ligger her
   fordi bannerets egen shadow-toggle dekker panelet, ikke knappene i det. */
body.scorm-auth-page .scorm-btn,
body.scorm-auth-page .scorm-btn-primary:hover,
body.scorm-auth-page .scorm-form-group input,
.scorm-my-profile .scorm-btn,
.scorm-profile-logout,
.mk-user-menu__trigger,
.mk-user-menu__login,
.cmplz-btn { box-shadow: var(--shadow); }
.cmplz-btn { border-radius: var(--r-pill); }

/* ---------- Plugin-lokale token-aliaser på profilen ----------
   my-courses.css definerer disse på `.scorm-my-profile` selv, av
   --scorm-primary-color (= accent): kortbakgrunner blir 6 % accent, kanter
   18/30 %, og «PÅGÅR»-chipen 12 % accent-flate med 80 % accent-tekst. De må
   settes i samme scope — en :root-verdi taper mot elementets egen. */
/* To flater som ikke går gjennom aliasene over: avatarens initial (pluginen
   setter ingen tekstfarge, så uten denne blir ink-initial på ink-flate) og
   «Fortsett der du slapp»-kortets kant, som er hardkodet til 22 % accent i
   selve regelen framfor å gå via et token. */
.scorm-profile-identity__avatar { color: var(--color-surface); }
.scorm-profile-resume { border-color: var(--color-mist); }

.scorm-my-profile {
  --scorm-profile-identity-bg: var(--color-surface);
  --scorm-profile-border: var(--color-mist);
  --scorm-profile-border-strong: var(--color-mist);
  --scorm-profile-progress-track: var(--color-mist);
  --scorm-profile-pill-active-bg: var(--color-mist);
  --scorm-profile-pill-active-text: var(--color-ink);
  --scorm-profile-pill-done-bg: var(--color-mist);
  --scorm-profile-pill-done-text: var(--color-ink);
  --scorm-profile-pill-warn-bg: var(--color-mist);
  --scorm-profile-pill-warn-text: var(--color-ink);
  --scorm-profile-pill-muted-bg: var(--color-mist);
  --scorm-profile-pill-muted-text: var(--color-ink);
}

/* ---------- Merkevareavvik ----------
   Her vil portalen noe annet enn pluginen — ikke fordi pluginen tar feil. */

/* Lenker er understreket i portalen; pluginen setter text-decoration: none.
   Utlogging er unntatt fra pill-regelen under: den er spesifisert som
   understreket lav-emfase-tekst, ikke som knapp. */
.scorm-form-links a,
.scorm-auth-footer a,
.scorm-profile-section a:not(.scorm-btn):not(.scorm-course-btn),
.scorm-profile-logout {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.scorm-form-links a,
.scorm-auth-footer a { font-weight: 500; }
.scorm-my-profile .scorm-btn:not(.scorm-profile-logout),
.scorm-profile-resume .scorm-btn { text-decoration: none; }

/* «Logg ut» rendres i --scorm-failed-color (#dc3545). Rødt finnes ikke i
   paletten, og fargen er et statustoken pluginen bruker til ekte feil — den
   skal ikke flyttes globalt for å rette én lenke.
   Dette er den eneste !important-en som peker på en LMS Pro-flate, og den er
   påtvunget: my-courses.css:212 setter selv `color: ... !important`, så
   ingen spesifisitet vinner uten. Meldt oppstrøms som eget token/opprydding.
   (De tre øvrige i fila gjelder Astra og reduced-motion, ikke pluginen.) */
.scorm-profile-logout {
  color: var(--color-ink) !important;
  border-color: var(--color-mist);
}
@media (hover: hover) {
  .scorm-profile-logout:hover { border-color: var(--color-ink); background: transparent; }
}

/* Fokusringen på auth-inputs er 3px av fokusfargen ved 12 % opacity —
   praktisk talt usynlig uansett hvilken farge tokenet får.
   DESIGN.md ## Accessibility: 2px solid ink på alt interaktivt. */
body.scorm-auth-page .scorm-form-group input:focus {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Katalogens primærknapp mørkner bakgrunnen 15 % på hover
   (color-mix mot #000) og lander på en olivenfarge som ikke finnes i
   paletten. Portalens knappespråk er full inversjon, som .pill:hover.
   Gatet bak (hover: hover) av samme grunn som triggeren over.

   `color` MÅ pinnes her. Den forrige versjonen lot etiketten følge
   pluginens egen `--scorm-button-primary-hover-text-color` (= accent), og
   det stemte helt til forsidens kursseksjon kom til: `.course-section
   .scorm-btn-primary` (i «Forsidens kursseksjon»-blokken over) pinner
   `color: ink` i hviletilstand med spesifisitet (0,2,0) — samme vekt som
   `.scorm-btn-primary:hover`, men senere i arket, så den vant også på hover.
   Bakgrunnen ble ink herfra mens etiketten ble stående ink: 1.00:1, knappen
   så ut som en tom pille. Katalogen på /kurs/ var uberørt (ingen
   .course-section-wrapper), så feilen fantes kun på forsiden — derfor
   overlevde den både runde 1–4 av auditen og sluttkontrollen.
   Lærdom generelt: en hviletilstands-`color` på (0,2,0) slår en
   plugin-`:hover` på (0,2,0). Endrer du bakgrunn på hover, pin `color` i
   samme regel — ikke stol på at et token lenger oppe i kaskaden overlever.
   <!-- Kilde: TSK-19853, 2026-08-13 --> */
@media (hover: hover) {
  .scorm-courses-grid .scorm-btn-primary:hover,
  .scorm-course-card .scorm-btn-primary:hover {
    background: var(--color-ink);
    color: var(--color-accent);
  }
}

/* Kurs-CTA-en lever i et isolert token-namespace (--scorm-course-color-* →
   --scorm-group-navy → --ast-global-color-1) som aldri kobles til
   --scorm-primary-color, og falt derfor tilbake på Astra-palettens indeks 1
   med uppercase og letter-spacing — et annet knappespråk enn portalens
   .pill. --scorm-group-navy settes bevisst ikke globalt; den driver mer enn
   knappen. */
.scorm-course .scorm-course-btn {
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
}
.scorm-course .scorm-course-btn-primary {
  background: var(--color-accent);
  color: var(--color-ink);
  border: 2px solid var(--color-accent);
}
.scorm-course .scorm-course-btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
}
@media (hover: hover) {
  .scorm-course .scorm-course-btn-primary:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-accent);
  }
  .scorm-course .scorm-course-btn-secondary:hover {
    background: var(--color-ink);
    color: var(--color-accent);
  }
}

/* Mangler kurset utvalgt bilde, rendrer pluginen en stor placeholder-flate
   ved siden av tittelen. Vi har ingen lovlige bilder å fylle den med:
   DESIGN.md forbyr stockfoto, og Frontify-referansebildene er eksplisitt
   ikke lisensiert for bruk. Blokka skjules, og hero-gridet kollapser til én
   kolonne så det ikke står igjen et hull. Kurs MED bilde er urørt.
   (--scorm-hero-placeholder-bg ville bare gitt flaten en annen farge — det
   er ikke problemet.) */
.scorm-course .scorm-course-hero-image-placeholder { display: none; }
.scorm-course .scorm-course-hero-grid:has(.scorm-course-hero-image-placeholder) {
  grid-template-columns: 1fr;
}
/* The plugin's `.scorm-course-intro-content { max-width: 720px; margin: 0
   auto; }` (single-course.css) centers the intro block inside
   `.scorm-course-container` (max-width 1140-1200px) — that auto-centering
   computes to ~240px of left offset, so "Hva du vil lære" lands well right
   of the H1 above it. `.scorm-course-intro-content` is a sibling of the
   hero, not a descendant of `.scorm-course-hero-grid`, so the :has() has to
   be re-scoped to the shared `.scorm-course` ancestor. This only fires when
   the same no-image condition collapses the hero above to one column —
   courses WITH a hero image keep the plugin's centered two-column-era
   margin untouched. */
.scorm-course:has(.scorm-course-hero-image-placeholder) .scorm-course-intro-content {
  margin-left: 0;
}

/* ---------- Astra og Complianz ----------
   Ikke plugin-flater, og ikke dekket av noe LMS-token. */

/* WordPress/Astra-default typografi på /hjelp/ og /personvern/. Astras
   Customizer-CSS har `header.entry-header .entry-title { font-weight: 600 }`
   = (0,2,1); en `h1.entry-title` (0,1,1) taper. */
body header.entry-header .entry-title { font-weight: 500; }
.entry-content strong,
.entry-content b { font-weight: 500; }

/* Complianz autofokuserer lukkeknappen når banneret åpnes, og den fikk
   nettleserens default blå auto-outline — den eneste ikke-palett-fargen som
   var synlig på siden. */
.cmplz-close:focus-visible,
.cmplz-btn:focus-visible,
#cmplz-cookiebanner-container a:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* ---------- Administrasjon (lederdashbordet) ----------
   group-leader-dashboard.css bruker --scorm-primary-color direkte som
   tekstfarge på en rekke flater, utenom rolle-tokenene over. Med primary =
   accent ble gruppe-pillen og initialene i deltakerlista gul tekst på
   blekgul flate, uleselig (meldt av Connect Bus 2026-10-08). Alt som tegner
   tekst eller ikon i accent flyttes til ink; pill-flatene får mist, samme
   som profilens piller. Prefikset `body` løfter hver regel over pluginens
   egen (opptil 0,2,1), så rekkefølgen på stilarkene spiller ingen rolle.
   Meldt oppstrøms: flatene bør gå via --scorm-chip-color / --scorm-link-color. */
body .scorm-leader-dashboard a.gld-group-chip {
  background: var(--color-mist);
  color: var(--color-ink);
}
@media (hover: hover) {
  body .scorm-leader-dashboard a.gld-group-chip:hover {
    background: var(--color-ink);
    color: var(--color-accent);
  }
}
body .scorm-leader-dashboard a.gld-group-chip:focus-visible {
  background: var(--color-mist);
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Initialene følger profilavataren: ink-flate, hvit initial. */
body .scorm-leader-dashboard .gld-people-initials {
  background: var(--color-ink);
  color: var(--color-surface);
  font-weight: 500;
}

body .scorm-leader-dashboard .gld-card-footer,
body .scorm-leader-dashboard .gld-card:hover .gld-card-arrow,
body .scorm-leader-dashboard .gld-back,
body .scorm-leader-dashboard .gld-subtle-link,
body .scorm-leader-dashboard .gld-course-link:hover,
body .scorm-leader-dashboard a.gld-people-open:hover,
body .scorm-leader-dashboard .gld-people-more,
body .scorm-leader-dashboard .gld-suggest-count,
body .scorm-leader-dashboard .gld-interpreted-key,
body .scorm-leader-dashboard .gld-interpreted-remove {
  color: var(--color-ink);
}
body .scorm-leader-dashboard .gld-interpreted-chip,
body .scorm-leader-dashboard .gld-course-chip,
body .scorm-leader-dashboard .gld-group-option[aria-selected="true"],
body .scorm-leader-dashboard .gld-suggest-option.is-active,
body .scorm-leader-dashboard mark {
  background: var(--color-mist);
  border-color: var(--color-mist);
  color: var(--color-ink);
}

/* Gruppekortenes ikon var hvitt strek på accent-flate. Accent er forbeholdt
   knapper, og hvitt på accent er uleselig. */
body .scorm-leader-dashboard .gld-card-icon {
  background: var(--color-mist);
  color: var(--color-ink);
}
body .scorm-leader-dashboard .gld-card:hover {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-ink);
}

/* Fremdriftslinja var accent på hvit/mist; fullført (grønn) er urørt. */
body .scorm-leader-dashboard .gld-bar-fill:not(.gld-bar-green) { background: var(--color-ink); }

/* Primærknappen («Legg til») hadde hvit etikett på accent, og i
   deaktivert tilstand (opacity .5) forsvant den helt. Ink-etikett som
   portalens øvrige primærknapper; hover inverterer (pluginens hover var
   hardkodet blå #2563eb). */
body .scorm-leader-dashboard .gld-btn-primary,
body .scorm-leader-dashboard .gld-btn-primary.is-busy {
  background: var(--color-accent);
  color: var(--color-ink);
}
body .scorm-leader-dashboard .gld-btn-primary:disabled { opacity: 0.6; }
@media (hover: hover) {
  body .scorm-leader-dashboard .gld-btn-primary:not(:disabled):hover {
    background: var(--color-ink);
    color: var(--color-accent);
  }
}

/* Filterknappene (Alle / Fullført / Pågår / Ikke startet) har transparent
   flate og --scorm-border-color som kant, som her er mist, samme farge som
   sidebakgrunnen. De ble usynlige som knapper. Hvit flate skiller dem fra
   bakgrunnen, og ink-kant gjør dem til knapper; aktiv knapp inverteres til
   ink i stedet for 14 % accent. */
body .scorm-leader-dashboard .gld-filter-chip,
body .scorm-leader-dashboard .gld-filter-button {
  background: var(--color-surface);
  border-color: var(--color-ink);
  color: var(--color-ink);
}
body .scorm-leader-dashboard .gld-filter-chip.is-active,
body .scorm-leader-dashboard .gld-filter-chip[aria-pressed="true"],
body .scorm-leader-dashboard .gld-filter-button.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-surface);
}
body .scorm-leader-dashboard .gld-filter-button.is-active .gld-filter-button-label { color: var(--color-surface); }
body .scorm-leader-dashboard .gld-filter-chip.is-active .gld-filter-dot,
body .scorm-leader-dashboard .gld-filter-chip[aria-pressed="true"] .gld-filter-dot { background: var(--color-surface); }

/* Fokus og markert deltaker: accent-ring/-tone byttes til ink/mist. */
body .scorm-leader-dashboard .gld-select:focus,
body .scorm-leader-dashboard .gld-input:focus,
body .scorm-leader-dashboard .gld-textarea:focus,
body .scorm-leader-dashboard .gld-search-field:focus-within {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-ink);
}
body .scorm-leader-dashboard .gld-participant-highlight {
  background: var(--color-mist);
  box-shadow: inset 3px 0 0 var(--color-ink);
}

/* Ikon- og outline-knappene fikk accent-kant og en blå (#eff6ff) flate på
   hover, en farge som ikke finnes i paletten. */
body .scorm-leader-dashboard .gld-icon-btn:not(.gld-icon-btn-danger):hover,
body .scorm-leader-dashboard .gld-btn-outline:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: transparent;
}