/*
Theme Name: Connect Bus (Astra Child)
Template: astra
Version: 1.1.0
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;
  --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; }

/* ==========================================================================
   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). */
section:not([class*="scorm-"]):not([class*="mk-"]):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. Register-varianten rendres kun når "Anyone can register" er
   på (av i dag) — gitt nav-lenkens uttrykk for robusthet. */
.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;
}
.mk-user-menu__login { background: var(--color-accent); color: var(--color-ink); }
.mk-user-menu__register { background: transparent; color: var(--color-ink); }

/* 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); }
  .mk-user-menu__register:hover { background: 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); }
.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*="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); }
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .site-nav { width: 100%; }
  .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__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-paritet: parfilen stabler logo over nav-raden, venstrestilt,
   med Kurskatalog + Logg inn inline. Astras mobilgrid sentrerer/deler kolonner. */
@media (max-width: 720px) {
  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;
  }
  header.site-header .site-nav { width: 100%; }
}
/* ==========================================================================
   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 { border-radius: var(--r-pill); }

/* 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,
body.scorm-auth-page .scorm-form-group label,
body.scorm-auth-page .scorm-auth-wrapper .scorm-auth-header h1 { font-weight: 500; }

/* 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.
   Bakgrunnen er ikke tokenisert — kun etiketten er, og den følger allerede
   --scorm-button-primary-hover-text-color. Gatet bak (hover: hover) av
   samme grunn som triggeren over. */
@media (hover: hover) {
  .scorm-courses-grid .scorm-btn-primary:hover,
  .scorm-course-card .scorm-btn-primary:hover { background: var(--color-ink); }
}

/* 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;
}

/* ---------- 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;
}