/* ==========================================================================
   Min Børnehave — site-refinement-isolated.css
   --------------------------------------------------------------------------
   Separat, scopet fil til de 18 sider UDEN body.site-ui (hosting-optælling).
   Loades KUN på de 18 sider, der er nævnt under "Mapping" — aldrig på sider med
   .site-ui (dér gælder site-refinement.css + de to tillæg).

   Hvad filen gør: kun tilgængelighed og mål (fokusring, 44 px, [hidden]-
   værn, reduced motion, forced-colors, print). Den ændrer IKKE farver,
   skrifttyper, layout, billeder, tekst, børnespillenes funktionelle farver,
   canvas, Milo eller bog-/appflows. Ingen !important undtagen i [hidden]-
   værn og i fokusringen (som ellers kan slås af ældre outline:none).

   Mapping (simpel og præcis — ét scope pr. familie)
     Bogsider (3)        bog.html, bog/min.html + én bogside mere
                         scope:  body:has(> header.book-header)
                         eller:  body.book-page  (hvis I hellere vil tilføje
                                 class="book-page" på <body> i bogskabelonen)
                         Set i samples: ingen body-class, bog-layout.css.
     Pladsjagt, isolerede (6)
                         scope:  body.placement-page:not(.site-ui)
                         NB: body-classes er kun set for de 3 site-ui-sider
                         (/pladsjagt, /pladsjagt/start). Kontrollér, at de 6
                         isolerede har .placement-page; ellers brug samme
                         regler under jeres egen body-class.
     Børneapps (3)       scope:  body.kids-app-body — KUN forældrelinks
                         (.kids-trust a). Intet andet røres.
     Utility/print (6)   checklist, copilot, radar (viderestillinger) og
                         printbar-institutionsbesoeg / -opstartsark /
                         -pakkeliste. Ingen body-class; scope er eksisterende
                         rodhooks (se afsnit D og E):
                           viderestilling: main#main-content:not([class]) > p > a
                           printark:       body:has(.print-sheet)
   ========================================================================== */


/* --------------------------------------------------------------------------
   A. Bogsider
   -------------------------------------------------------------------------- */
:is(body.book-page, body:has(> header.book-header)) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #084cae !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

:is(body.book-page, body:has(> header.book-header)) :is(.book-button, .book-link-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  text-align: center;
}

:is(body.book-page, body:has(> header.book-header)) :is(.book-header nav a, .book-brand) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

:is(body.book-page, body:has(> header.book-header)) .book-check {
  display: flex;
  align-items: center;
  min-height: 44px;
}

:is(body.book-page, body:has(> header.book-header)) .book-previews a {
  min-height: 44px;
}

/* Skjulte tilstande (status/hent-knapper) må ikke overstyres af display i
   bog-layout.css. */
:is(body.book-page, body:has(> header.book-header)) :is(#book-downloads, #book-status-retry, #book-order-retry)[hidden] {
  display: none !important;
}

:is(body.book-page, body:has(> header.book-header)) .book-cover,
:is(body.book-page, body:has(> header.book-header)) .book-previews img {
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  :is(body.book-page, body:has(> header.book-header)) * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  :is(body.book-page, body:has(> header.book-header)) :is(.book-button, .book-link-button, .book-card) {
    border: 1px solid ButtonText;
  }
}

/* The placement brand previously occupied a 32px row. Keep its centre and
   row geometry while extending the actual link target to 44px into the
   existing 12px vertical header padding. Only the approved brand link moves. */
header.placement-topbar > a.placement-brand[data-brand-link="milo-stripes"] {
  margin-block: -6px;
}

@media print {
  :is(body.book-page, body:has(> header.book-header)) :is(.book-header nav, .book-button, .book-link-button, #book-buy) {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   B. Pladsjagt-sider uden .site-ui
   -------------------------------------------------------------------------- */
body.placement-page:not(.site-ui) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #084cae !important;
  outline-offset: 3px !important;
}

body.placement-page:not(.site-ui) .placement-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  text-align: center;
}

body.placement-page:not(.site-ui) :is(.placement-field input, .placement-field select, .placement-field textarea) {
  min-height: 48px;
  font-size: 1rem;
}

body.placement-page:not(.site-ui) :is(.placement-error-summary, .placement-field__error)[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.placement-page:not(.site-ui) :is(.placement-progress__bar, .placement-step, .placement-button) {
    transition: none !important;
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   C. Børneapps: kun forældrelinkene i bunden (.kids-trust).
   Spil, canvas, Milo og funktionelle farver røres ikke.
   -------------------------------------------------------------------------- */
body.kids-app-body .kids-trust a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body.kids-app-body .kids-trust a:focus-visible {
  outline: 3px solid #084cae !important;
  outline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
   D. Viderestillingssider: checklist, copilot, radar
   Markup: <main id="main-content"> [<h1>] <p><a href>…</a></p> </main>.
   Eneste kontrol er linket i <p>; det får 44 px. Intet andet røres.
   Allerede løst (rør ikke): brand-overrides.css har globalt
   :focus-visible { outline: 2px solid #0F8A66 } — se afsnit F for hvorfor
   ringen alligevel gøres kraftigere. Reduced motion: siderne har ingen
   animation/transition, så der er bevidst ingen regel her.
   -------------------------------------------------------------------------- */
@media screen {
  body:not(.site-ui) main#main-content:not([class]) > p > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* --------------------------------------------------------------------------
   E. Printbare ark: printbar-institutionsbesoeg, -opstartsark, -pakkeliste
   Rodhook: body:has(.print-sheet) (ingen body-class).
   ALT størrelsesarbejde ligger i @media screen. På print er der ingen regler
   herfra, så A4-layout, fragmenter/sideskift, .box-afkrydsningsfelter,
   udfyldningslinjer og .sheet-grid / .check-grid er identiske med i dag.
   Kun interaktive kontroller røres: .action-bar .btn, .topbar-links,
   brødkrumme-links. Spørgsmålslisterne (.question-list, .checklist) og
   .box (aria-hidden) er IKKE kontroller og får ingen 44 px.
   -------------------------------------------------------------------------- */
@media screen {
  body:not(.site-ui):has(.print-sheet) .action-bar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
  }

  body:not(.site-ui):has(.print-sheet) :is(.topbar .brand, .topbar .nav-links a) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Brødkrumme: 44 px KLIKFLADE uden at ændre linjehøjde/layout (usynligt
     pseudoelement, ingen flow-effekt). */
  body:not(.site-ui):has(.print-sheet) .breadcrumb a {
    position: relative;
  }

  body:not(.site-ui):has(.print-sheet) .breadcrumb a::after {
    content: "";
    position: absolute;
    inset: -0.875rem -0.25rem;
  }

  /* Hjælpetekst: kun linjehøjde (farver/størrelser ligger i sidernes egne
     inline-styles, som ikke er leveret og derfor ikke røres). */
  body:not(.site-ui):has(.print-sheet) :is(.action-status, .trust-label, .sheet-header p) {
    line-height: 1.5;
  }
}

/* brand-overrides.css stopper kun animation-varighed ved reduced motion;
   transitions (hover på .btn) kører stadig. */
@media (prefers-reduced-motion: reduce) {
  body:not(.site-ui):has(.print-sheet) :is(.btn, a, button) {
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   F. Fokusring på de 6 utility/print-sider
   brand-overrides.css: 2 px #0F8A66 (4,3 : 1 mod hvid). Her: 3 px #084cae
   (7,9 : 1) + hvid halo, så ringen holder på enhver baggrund. Gælder kun
   skærm; ringen findes ikke på print.
   -------------------------------------------------------------------------- */
@media screen {
  :is(body:not(.site-ui):has(.print-sheet), body:not(.site-ui):has(main#main-content:not([class]) > p > a)) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #084cae !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
  }
}

/* Integration guard: the legacy print toolbar switches to a column below
   760px. Its 12rem flex basis then becomes button height, rather than width. */
@media screen and (max-width: 760px) {
  body:not(.site-ui):has(.print-sheet) .action-bar .btn {
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   Min Børnehave — brand-mærke (tre lodrette striber) · CSS-appendix
   --------------------------------------------------------------------------
   Lægges EFTER de eksisterende regler i BÅDE site-refinement.css og
   site-refinement-isolated.css (samme tekst begge steder; reglerne er
   idempotente og afhænger ikke af .site-ui).

   Kontrakt (uændret):
     <svg class="mb-stripe-mark" data-brand-mark="milo-stripes"
          viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"
          focusable="false">
       <rect class="mb-stripe-mark__blue" x="0"  y="0" width="6" height="24" rx="1" fill="#2563eb"/>
       <rect class="mb-stripe-mark__blue" x="9"  y="0" width="6" height="24" rx="1" fill="#2563eb"/>
       <rect class="mb-stripe-mark__ink"  x="18" y="0" width="6" height="24" rx="1" fill="#172033"/>
     </svg>

   Scope (entydig markør sat af normaliseringshelperen på ALLE ændrede
   brand-links; originale classes/href/ids/aria/tekst er bevaret):
     a[data-brand-link="milo-stripes"]
       > svg[data-brand-mark="milo-stripes"]                    (direkte)
       > div|span:has(> svg[data-brand-mark="milo-stripes"])    (gammel plade/wrapper)
   Dækker .site-brand, .plan-topbar__brand, .locale-header__brand, .book-brand,
   .placement-brand, print-topbarens a.brand og klasseløse legacy-locale-links.
   Rører IKKE: .wordmark::before (barselssiden), hovedheaderens højde, grids,
   menuer, navnetekst, links, ids, favicon/metadata, Milo-maskotten.

   Farver er SVG'ens egne attributter (#2563eb / #172033). Intet gættes ud fra
   body. Mørk header: tilføj eksplicit .mb-stripe-mark--on-dark på SVG'en
   (kun den mørke stribe vendes til hvid; de blå er uændret).
   ========================================================================== */

/* 1. Selve mærket: præcis 24 × 24, aldrig strakt, klippet eller dekoreret.
   Dobbelt klasse + !important slår ældre img/.site-brand-logo-regler
   (width/height 100 %, 36 px !important, object-fit, radius, skygge). */
svg.mb-stripe-mark.mb-stripe-mark[data-brand-mark="milo-stripes"] {
  display: block !important;
  box-sizing: content-box !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  overflow: visible !important;
  vertical-align: middle;
  pointer-events: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* 2. Gammel runding/plade om mærket (kun når wrapperen indeholder SVG'en):
   fjernes; 24 × 24, ingen klipning, ingen skygge/løft. */
a[data-brand-link="milo-stripes"] > :is(div, span):has(> svg[data-brand-mark="milo-stripes"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  box-sizing: border-box !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}

/* 3. Brand-linket: inline-flex (også klasseløse legacy-locale-links), rolig
   10 px forbindelse til navnet (inden for 8–12), lodret centreret, 44 px mål.
   Overstyrer Tailwinds gap-2 (8 px) uden at røre header, grid eller menuer. */
a[data-brand-link="milo-stripes"] {
  display: inline-flex;
  align-items: center;
  column-gap: 10px !important;
  gap: 10px !important;
  min-height: 44px;
  box-sizing: border-box;
}

/* 4. Ingen hoverløft/skygge på mærket via linkets hover/fokus. */
a[data-brand-link="milo-stripes"]:is(:hover, :focus-visible) svg.mb-stripe-mark[data-brand-mark="milo-stripes"],
a[data-brand-link="milo-stripes"]:is(:hover, :focus-visible) > :is(div, span):has(> svg[data-brand-mark="milo-stripes"]) {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 5. Eksplicit reverse — KUN hvis en faktisk mørk header kræver det og SVG'en
   har modifieren. Kun den mørke stribe vendes; ingen body-gæt. */
svg.mb-stripe-mark.mb-stripe-mark--on-dark[data-brand-mark="milo-stripes"] .mb-stripe-mark__ink {
  fill: #ffffff;
}

/* 6. Højkontrast: systemfarver, så mærket er synligt på enhver Canvas. */
@media (forced-colors: active) {
  svg.mb-stripe-mark[data-brand-mark="milo-stripes"] .mb-stripe-mark__blue {
    fill: LinkText;
  }

  svg.mb-stripe-mark[data-brand-mark="milo-stripes"] .mb-stripe-mark__ink {
    fill: CanvasText;
  }
}