/* Waldstein Welt - header/footer & layout adjustments (on top of the compiled design system) */

:root {
  /* Mobile: top bar 40 + py-2 16 + logo 64 = 120px | Desktop: 40 + 16 + 80 = 136px */
  --ww-header-h: 120px;
  --ww-header-h-md: 136px;
}

/* Anchor offset for fixed header (sections use scroll-margin-top) */
html { scroll-behavior: smooth; scroll-padding-top: var(--ww-header-h-md); }

/* ===== Body baseline for the Stitch pages ===== */
body.ww-stitch-page,
body.ww-stitch-page #content {
  background: #f8f9ff;
}

/* Old Astra pages: ensure content clears fixed header */
body:not(.ww-stitch-page) .site {
  padding-top: var(--ww-header-h);
}
@media (min-width: 768px) {
  body:not(.ww-stitch-page) .site { padding-top: var(--ww-header-h-md); }
}

/* Hide Astra's own header/footer builders everywhere (replaced by child theme) */
#ast-desktop-header,
#ast-mobile-header,
.ast-hf-header-builder site-header,
footer.site-footer .ast-builder-grid-row-container,
.site-footer .site-above-footer-wrap,
.site-footer .site-below-footer-wrap {
  display: none !important;
}
footer.site-footer { background: transparent; padding: 0; border: 0; }

/* Astra's own yellow scroll-to-top must never appear (child theme provides one) */
#ast-scroll-top { display: none !important; }

/* Search & misc Astra widgets off-canvas */
.astra-search-popup, .ast-search-menu-icon { display: none !important; }

/* ===== Back-to-top button: visible only after scroll (JS toggles .ww-show) ===== */
#back-to-top-btn {
  display: none;
}
#back-to-top-btn.ww-show {
  display: flex;
}

/* ===== Lazy hero video: poster first, video fades in when ready ===== */
.ww-hero-video video,
video.ww-hero-vid {
  opacity: 0;
  transition: opacity .8s ease;
}
video.ww-hero-vid.ww-video-ready {
  opacity: 1;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===== Mobile menu animation ===== */
#ww-mobile-menu { transition: max-height .25s ease; overflow: hidden; }
#ww-mobile-menu.hidden { display: none; }

/* ===== Forms on legacy pages (SureForms) keep sane width ===== */
.srfm-form-wrap { max-width: 720px; }

/* ===== Accessibility focus ===== */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #85f8c4;
  outline-offset: 2px;
}

/* ===== Print ===== */
@media print {
  .ww-header, #back-to-top-btn, .ww-footer nav { display: none !important; }
  body { padding-top: 0 !important; }
  main { padding-top: 0 !important; }
}

/* ============================================================================
   UI FIXES v2.1 (2026-10-22) - Stitch parity + Astra specificity conflicts
   ============================================================================ */

/* --- 1. Header logo: white plate behind the transparent gold emblem ---------
   The logo asset (logo-ww.webp) has a transparent background; on the dark
   navy header the emblem sinks into the bar. Client request: white backdrop. */
header.ww-header img[alt="Waldstein Welt Logo"] {
  background: #ffffff;
  padding: 0.3rem;
  border-radius: 0.5rem;
  box-sizing: content-box;
}

/* --- 2. Themed buttons: stop Astra's link-hover color hijack ----------------
   Astra prints an inline rule "a:hover, a:focus { color: var(--ast-global-color-1) }"
   (specificity 0-1-1) which beats static .text-on-* utilities (0-1-0).
   Result: INQUIRE / ANFRAGE turned #00714e text on #00714e background on hover
   (fully invisible). Re-assert the Stitch text colors with higher specificity. */
body.ww-stitch-page a.text-on-secondary:hover,
body.ww-stitch-page a.text-on-secondary:focus,
body.ww-stitch-page button.text-on-secondary:hover,
body.ww-stitch-page button.text-on-secondary:focus {
  color: #ffffff;
}
body.ww-stitch-page a.text-on-primary:hover,
body.ww-stitch-page a.text-on-primary:focus,
body.ww-stitch-page button.text-on-primary:hover,
body.ww-stitch-page button.text-on-primary:focus {
  color: #ffffff;
}
body.ww-stitch-page a.text-on-surface:hover,
body.ww-stitch-page a.text-on-surface:focus {
  color: #0d1c2f;
}

/* --- 3. Form labels: stop Astra's white-label paint -------------------------
   Astra's inline "label, legend { color: var(--ast-global-color-2) }" paints
   every form label white (--ast-global-color-2 = #ffffff). On the light
   inquiry card the radio chips ("Rhinnotex Machinery" etc.) became
   white-on-#e6eeff = invisible. Restore the inherited dark text. */
body.ww-stitch-page form label,
body.ww-stitch-page form legend {
  color: inherit;
}

/* --- 4. Radio / checkbox chips: Stitch-accurate hover affordance ------------
   Keep text dark, add a subtle emerald accent on hover so the chips feel
   interactive like the rest of the design system. */
body.ww-stitch-page form label:has(> input[type="radio"]),
body.ww-stitch-page form label:has(> input[type="checkbox"]) {
  color: #0d1c2f;
}
body.ww-stitch-page form label:has(> input[type="radio"]):hover,
body.ww-stitch-page form label:has(> input[type="checkbox"]):hover {
  box-shadow: inset 0 0 0 1px #006c4a;
}

/* --- 5. Placeholder contrast (WCAG AA-ish) ----------------------------------
   Default #9ca3af on white is ~2.5:1; lift to gray-500 for legibility. */
body.ww-stitch-page input::placeholder,
body.ww-stitch-page textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

/* --- 6. Hero video: Stitch dimmed "gray-navy" treatment ----------------------
   The compiled markup lost the navy gradient overlay layer that gives the
   stitch hero its muted, executive look. If the overlay element is absent
   (e.g. older cached content), paint it directly on the video wrapper instead.
   Self-disables once the real overlay div is present in the markup. */
#home > .pointer-events-none:not(:has(.bg-gradient-to-r))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(to right, rgba(11, 21, 38, 0.95), rgba(11, 21, 38, 0.85), rgba(15, 30, 54, 0.75));
  pointer-events: none;
}

/* ============================================================================
   UI FIXES v2.2 (2026-10-22) - Header height & hero video Stitch parity
   ============================================================================ */

/* --- 7. Header height: logo plate must fit INSIDE the 64/80px logo box -----
   v2.1 painted the white plate with content-box padding, growing the logo
   to 89.6px and the header to 145.6px (Stitch: 120px mobile / 136px desktop).
   Switch to border-box so the plate padding lives inside the h-16/sm:h-20
   box: the emblem insets by the plate padding, but the bar height is exact. */
header.ww-header img[alt="Waldstein Welt Logo"] {
  box-sizing: border-box;
}

/* --- 8. Hero: neutralize the -mt-28 under-header pull (Stitch base rule) ---
   The Stitch reference ships "main > :first-child { margin-top: 0 !important }"
   inside its @layer base; the compiled WP page lost that rule. Without it the
   hero's -mt-28 drags the whole section 112px up under the fixed header:
   the globe video's top was cropped away behind the bar and the status
   badge / headline top sat hidden beneath it (worst in bilingual mode where
   the hero content is tallest). Restore the Stitch geometry exactly. */
body.ww-stitch-page main > :first-child {
  margin-top: 0 !important;
}