/* ==========================================================================
   BOOKINGSIDERNE — MALING. Enqueues normalt (handle `zency-bookside`).
   /book/ (846) + /book-massage/ (84930) · v1.1.0 · 2026-09-02
   ==========================================================================
   Sidespecifik CSS til zency-book-page.php. Alt andet på sidetypen kommer fra
   eksisterende ark:

     zency-design-system.css  .z-*, .zency-article (prose-liftet), ol.z-steps,
                              .z-btn, .z-cta, .z-panel-forest
     behandling.css           .zb-wrap, .zb-crumbs, .zb-hero, .zb-trust,
                              .zb-trustpilot, .zb-grid, .zb-faq, .zb-guarantee
     by.css                   .zby-stat + .zby-hero-rytmen + knap-hover-fixet
     sider.css                .z-btn--sm / .z-btn--lg
     grid.css / maps          behandler-grid, lokationsfilter og kort

   ⚠️ DEN GRÆNSE FILEN HOLDER — og hvorfor den er hårdere her end på andre sider:
   LiteSpeed kører optm-css_async, så DENNE fil bliver først aktiv efter first
   paint. Målt på /book/ mobil: first paint 1452 ms, arket aktivt 2031 ms.
   Alt der kan flytte en pixel skal derfor stå i assets/bookside-critical.css,
   som printes INLINE af inc/zency-book.php. Her står kun ren maling:
   background, color, border-radius, box-shadow, transition, text-decoration
   og outline — properties der males, men aldrig reflower. Skriftmetrik
   (font-family, font-weight, font-size, letter-spacing) hører derimod i den
   kritiske fil: den afgør hvor bred en knap bliver og hvor et afsnit brydes.

   Den ene bevidste undtagelse er FAQ-svarenes tekstrytme nederst i filen.
   Svarene bor i et lukket <details> og har derfor NUL højde indtil brugeren
   selv folder dem ud — de kan ikke give et layoutskift, og et skift efter en
   brugerhandling er i forvejen undtaget i Googles CLS-måling.

   Reglerne filen holder sig til:
     • Ingen bare element-selektorer. Alt hænger på en .zbook-/.zb-klasse.
     • Ingen brandfarver som literal. Den ENESTE literal er hvid, som
       designsystemet ikke har et token for — den står ét sted nedenfor,
       præcis som annonce.css og tekst.css gør det.
     • CTA-tekster i sentence case. Kun .z-eyebrow må være uppercase.

   ⚠️ NY CSS-FIL: skal i LiteSpeeds `optm-css_exc` i SAMME arbejdsgang som
      deployet, og verificeres frontend UDLOGGET. UCSS/combine rammer kun
      gæster. Se BATCH-A-BOOK.md.
   ========================================================================== */

.zbook {
	/* Designsystemet har ingen hvid token. Den ene literal bor her. */
	--zbook-hvid: #fff;
	background: var(--color-cream);
	color: var(--color-ink);
}


/* ==========================================================================
   1 · SEKTIONSFLADER
   ==========================================================================
   Siden veksler bevidst mellem flader, så to nabosektioner aldrig læses som ét
   langt felt (KOMPONENTER §6.17). To cremeflader i træk er ét felt, ikke to
   sektioner — og en "tonet" flade tre RGB-trin fra naboen er usynlig.

     hero            forest
     .zb-trust       hvidt badge (mobil) / hvid bjælke (computer)
     .zbook-grid     sage-50   (behandling.css) — skjult indtil der er søgt
     .zbook-trin     cream     (main.zbook's egen flade)
     .zbook-anmeldelser  hvid
     .zbook-tekst    cream
     .zbook-tal      cream-2
     .zb-guarantee   cream     (behandling.css)
     .zbook-faq      hvid      (overskrevet herunder)

   ⚠️ Trust-stripen må ikke ligge på hvidt: på mobil bliver den et løftet,
   afrundet badge, og indrykningen viser sektionen bagved. Derfor er
   .zbook-trin (og .zbook-grid) tonede.
   ========================================================================== */

.zbook-anmeldelser { background: var(--zbook-hvid); }
.zbook-tal { background: var(--color-cream-2); }

/* ⚠️ .zbook-slut er væk: det afsluttende billedbånd (Zency-headerphoto.webp)
   lå i Elementor ved siden af FAQ'en i to kolonner og stod efter
   konverteringen alene i sin egen sektion uden noget at illustrere.
   Fjernet 02-09-2026 sammen med reglerne i bookside-critical.css. */

/* FAQ'en ligger mellem garantien (cream) og bunden og skal have sin egen flade. */
.zbook .zb-faq { background: var(--zbook-hvid); }

.zbook-sek__sub { color: var(--color-ink-soft); }


/* ==========================================================================
   2 · HERO-VIDEOEN
   ==========================================================================
   Videoen ligger over stillbilledet og fader ind når behandling.js har fået
   den til at afspille (klassen .is-video-playing på .zb-hero__bg). Selve
   opacity: 0 står i den kritiske fil, så laget aldrig blinker frem før tid.
   ========================================================================== */

.zbook .zb-hero__video { transition: opacity .6s ease; }

@media (prefers-reduced-motion: reduce) {
	.zbook .zb-hero__video { transition: none; }
}


/* ==========================================================================
   3 · TRIN 01 → SØGEFELTET
   ==========================================================================
   To affordances mod samme mål (#soeg), delt ved 768px. Selve skiftet og
   knappens mål står i bookside-critical.css — her er kun farverne.

   SPECIFICITET: Elementor-kittet sætter link-farven med `.elementor-kit-7 a`
   (0-1-1), og selv om kit-klassen fjernes fra <body> på denne side, holder vi
   fast i `body.zb-bookside a.zb-soeg-cta` (0-2-2). Det slår også
   `.zb :where(a){color:inherit}` og `.zby a.z-btn:hover` uanset kildeorden.
   ========================================================================== */

body.zb-bookside a.zb-soeg-cta {
	border-radius: 999px;
	background: var(--color-olive);
	color: var(--zbook-hvid);
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(122, 108, 64, .32);
	transition: background-color .18s ease;
}
body.zb-bookside a.zb-soeg-cta:hover,
body.zb-bookside a.zb-soeg-cta:focus,
body.zb-bookside a.zb-soeg-cta:focus-visible,
body.zb-bookside a.zb-soeg-cta:active {
	background: var(--color-olive-dark);
	color: var(--zbook-hvid);
	text-decoration: none;
}
body.zb-bookside a.zb-soeg-cta:visited { background: var(--color-olive); color: var(--zbook-hvid); }
body.zb-bookside a.zb-soeg-cta:hover { background: var(--color-olive-dark); }
body.zb-bookside a.zb-soeg-cta:focus-visible {
	outline: 2px solid var(--color-sage-500);
	outline-offset: 3px;
}

/* Tekstlinket i brødteksten (computer). Sage-700 frem for oliven: på trin-
   kortets lyse bund giver oliven kun ~4,3:1, altså under WCAG AA's 4,5:1 for
   brødtekst. Sage-700 er artikel-linkfarven og ligger på 8,3:1. */
body.zb-bookside a.zb-soeg-inline {
	color: var(--color-sage-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
body.zb-bookside a.zb-soeg-inline:hover,
body.zb-bookside a.zb-soeg-inline:focus-visible { color: var(--color-olive); }
body.zb-bookside a.zb-soeg-inline:focus-visible {
	outline: 2px solid var(--color-sage-500);
	outline-offset: 2px;
	border-radius: 2px;
}

/* På mobil er linket neutraliseret til almindelig brødtekst (og gjort
   uklikbart i den kritiske fil), så pillen er den ene vej videre. */
@media (max-width: 767px) {
	body.zb-bookside a.zb-soeg-inline {
		color: inherit;
		text-decoration: none;
	}
}

/* Feltet blinker kort når man er landet, så det er tydeligt hvor man er
   havnet. Klassen sættes og fjernes af assets/book.js. */
.zbook .zbg-location-filter.zb-soeg-lit .zbg-loc-input-wrap {
	box-shadow: 0 0 0 3px rgba(140, 210, 185, .9);
	border-radius: 999px;
}


/* ==========================================================================
   4 · FAQ-SVARENES TEKSTRYTME
   ==========================================================================
   Se undtagelsen i filhovedet: svarene bor i et lukket <details> og har nul
   højde indtil brugeren folder dem ud, så reglerne her kan ikke give CLS.

   .zb-faq__a sætter kun farve, linjehøjde og skriftstørrelse i behandling.css
   — afsnit og lister har ingen rytme, fordi de øvrige templates får deres
   FAQ-svar fra repeatere med anden markup.
   ========================================================================== */

.zbook .zb-faq__a p { margin: 0 0 .8rem; }
.zbook .zb-faq__a p:last-child { margin-bottom: 0; }
.zbook .zb-faq__a ul { margin: 0 0 .8rem; padding-left: 1.35rem; }
.zbook .zb-faq__a ul:last-child { margin-bottom: 0; }
.zbook .zb-faq__a li { margin-bottom: .3rem; }
.zbook .zb-faq__a strong { color: var(--color-forest); font-weight: 600; }