/* ==========================================================================
   Hotrod Wien — LIGHT THEME override
   Activated by `html.theme-light` (set by hotrod.js: OS default + manual
   sun/moon toggle, persisted in localStorage).

   STRATEGY: the v3 design's dark bands (hero, booking, reviews, CTA, header)
   all paint from the INVERSE token set. Re-point those tokens to light values
   on `html.theme-light` and every band flips at once — then override the few
   hard-coded whites to ink. FOOTER also flips light (fully-committed light).

   Load AFTER tokens.css + the Bricks inline CSS. Enqueue on the front end.
   ========================================================================== */

/* ---- 1) Flip the inverse token set → light ---- */
html.theme-light {
	--wb-inverse-bg:    var(--wb-c-paper-2, #F5F5F5);
	--wb-inverse-muted: var(--wb-c-ink-2,  #555555);
	--wb-inverse-text:  var(--wb-c-ink,    #111111);
	--wb-inverse-line:  var(--wb-c-line,   #E2E2E2);
	--wb-on-image:      var(--wb-c-ink,    #111111);
	--wb-asphalt:       var(--wb-c-white,  #FFFFFF);
	--wb-asphalt-2:     var(--wb-c-paper-2, #F5F5F5);
}

/* ---- 2) Footer: hard-coded whites → ink (it flips light via the inverse tokens) ---- */
html.theme-light .wb-footer .wb-logo .c1,
html.theme-light .wb-footer .wb-logo .c3 { color: var(--wb-text) !important; }

/* ---- 3) Header: hard-coded whites → ink ---- */
html.theme-light .wb-header .wb-logo .c1,
html.theme-light .wb-header .wb-logo .c3 { color: var(--wb-text) !important; }
html.theme-light .wb-nav .wb-nav-link    { color: var(--wb-muted) !important; }
html.theme-light .wb-nav .wb-nav-link:hover { color: var(--wb-orange) !important; }
html.theme-light .wb-header-actions .pill { color: var(--wb-text) !important; border-color: var(--wb-border-strong) !important; }
html.theme-light .wb-header-actions .burger { color: var(--wb-text) !important; border-color: var(--wb-border-strong) !important; }
@media (max-width:980px) {
	html.theme-light .wb-nav .wb-nav-link { color: var(--wb-text) !important; }
}

/* ---- 4) Hero: fade the photo back, light vignette, ink headline ---- */
html.theme-light .wb-hero .bg { opacity: .10; filter: grayscale(.3) contrast(1); }
html.theme-light .wb-hero .vig {
	background:
		linear-gradient(90deg, rgba(245,245,245,.94), rgba(245,245,245,.66) 46%, rgba(245,245,245,.30) 78%, rgba(245,245,245,.58)),
		linear-gradient(0deg, rgba(245,245,245,.96), transparent 42%);
}
html.theme-light .wb-hero .vig::after { background: radial-gradient(58% 70% at 82% 18%, rgba(255,107,0,.14), transparent 64%); }
html.theme-light .wb-hero h1 { color: var(--wb-text) !important; }
html.theme-light .wb-hero-lead { color: var(--wb-muted) !important; }
html.theme-light .wb-hero-trust { color: var(--wb-muted) !important; }
html.theme-light .wb-chips .chip { color: var(--wb-text) !important; background: rgba(17,17,17,.04) !important; border-color: var(--wb-border) !important; }
html.theme-light .wb-rate { color: var(--wb-muted) !important; }
html.theme-light .wb-rate b { color: var(--wb-text) !important; }
/* ghost button (Watch Trailer) on light hero */
html.theme-light .wb-hero .wb-btn-ghost { color: var(--wb-text) !important; border-color: var(--wb-border-strong) !important; }
html.theme-light .wb-hero .wb-btn-ghost:hover { background: rgba(17,17,17,.04) !important; }

/* ---- 5) Telemetry strip ---- */
html.theme-light .wb-telemetry-cell .tv { color: var(--wb-text) !important; }

/* ---- 6) Dark section headings (sec-dark / sec-grid) ---- */
html.theme-light .wb-sec-dark h2,
html.theme-light .wb-sec-dark h3,
html.theme-light .wb-sec-grid h2 { color: var(--wb-text) !important; }

/* ---- 7) Booking band (homepage Starting-Grid teaser) ---- */
html.theme-light .wb-opts .opt-h { color: var(--wb-text) !important; }
html.theme-light .wb-steps .gstep .gn { background: var(--wb-surface-2) !important; color: var(--wb-text) !important; }

/* ---- 8) Reviews carousels ---- */
html.theme-light .wb-rev-marq .rev-n { color: var(--wb-text) !important; }
html.theme-light .wb-rev-marq .rev .q { color: var(--wb-text) !important; }

/* ---- 9) Final CTA ---- */
html.theme-light .wb-cta-in h2 { color: var(--wb-text) !important; }

/* ---- 10) Route detail panel: white heading → ink (bg/text flip via inverse tokens) ---- */
html.theme-light .wb-stop-detail h3 { color: var(--wb-text) !important; }

/* ==========================================================================
   THEME TOGGLE BUTTON (sun/moon) — injected into .wb-header-actions by hotrod.js.
   Styles apply in BOTH themes (only the icon swaps).
   ========================================================================== */
.wb-theme-tg {
	display: inline-flex; align-items: center; justify-content: center;
	width: 4.4rem; height: 4.4rem; flex: 0 0 auto; padding: 0;
	border: 0; background: transparent; color: #fff;
	cursor: pointer; transition: color .2s, background .2s;
}
.wb-theme-tg:hover { color: var(--wb-orange); }
.wb-theme-tg svg { width: 2rem; height: 2rem; display: block; }
.wb-theme-tg .tg-sun  { display: none; }
.wb-theme-tg .tg-moon { display: block; }
html.theme-light .wb-theme-tg { color: var(--wb-text); }
html.theme-light .wb-theme-tg:hover { color: var(--wb-orange); }
html.theme-light .wb-theme-tg .tg-sun  { display: block; }
html.theme-light .wb-theme-tg .tg-moon { display: none; }

/* avoid a flash before hotrod.js paints the right theme */
html.theme-light body { background: var(--wb-bg); }