/* ============================================================
   fluid-header.css — round-27: lighter header chrome
   Additive layer. Loads AFTER style.css, so same-specificity
   selectors here win by cascade order — no !important needed
   except for the one inline-style override (see .page-hero).
   Theme-agnostic: only spacing, no colors — works identically
   in [data-theme="dark"] and [data-theme="light"].
   ============================================================ */

/* style.css:179 sets .header { padding: 20px 0 } → ~64px tall.
   That reads as a wall above the hero on small screens.
   10px (mobile-first) brings the bar to ~44-48px — a toolbar,
   not a block. Translucency/backdrop stays with round-26
   fluid-material.css; transition stays style.css's
   `all var(--transition)` — padding change animates smoothly. */
.header {
    padding: 10px 0;
}

/* Desktop gets a touch more air: 12px → ~48px total.
   Breakpoint matches style.css's 768px mobile cutoff. */
@media (min-width: 769px) {
    .header {
        padding: 12px 0;
    }
}

/* style.css:190 drops scrolled padding to 12px. Apple rule:
   chrome yields to content once you move — 8px (~40-44px bar)
   both breakpoints. Still comfortably inside the 96px
   scroll-padding-top anchor buffer (fluid-motion.css:28). */
.header.scrolled {
    padding: 8px 0;
}

/* style.css:483 sets .hero { padding: 100px 0 52px }.
   The 100px was sized for the old 64px header; with a ~48px
   bar it leaves a dead band. 72px keeps the same *visual* gap
   below the smaller chrome. Bottom 52px untouched. */
.hero {
    padding-top: 72px;
}

@media (max-width: 768px) {
    /* Smaller header on mobile → 60px top gap is enough. */
    .hero {
        padding-top: 60px;
    }

    /* style.css:483 also forces min-height: min(100dvh, 760px).
       On phones that stretches a short hero into a full empty
       screen before content. Let it size to content on mobile;
       desktop keeps the cinematic full-viewport hero. */
    .hero {
        min-height: auto;
    }
}

/* 12 inner pages hard-code style="padding-top: 140px" on
   <section class="section page-hero"> (domains.php, news.php,
   configurator.php, 404.php, ...). Inline style always beats
   the cascade, so this is the ONE sanctioned !important:
   88px matches the new header scale and clears the 96px
   anchor offset visually. */
.section.page-hero {
    padding-top: 88px !important;
}

/* Small phones: pull inner-page heroes even closer — 72px. */
@media (max-width: 480px) {
    .section.page-hero {
        padding-top: 72px !important;
    }
}

/* Respect reduced motion: no padding morph on scroll — the
   header just snaps between states. (style.css:186 gives
   .header `transition: all var(--transition)`.) */
@media (prefers-reduced-motion: reduce) {
    .header,
    .header.scrolled {
        transition: none;
    }
}

/* NOTE: .hero-badge letter-spacing tightening already lives in
   fluid-type.css — intentionally not duplicated here. */

/* Round-27 (bugfix): inline SVG .logo-icon has no width/height attrs,
   and classic style.css:238 only sets `font-size: 1.4rem` (SVG ignores
   it). Result: SVG falls to browser intrinsic (~300px) → giant logo
   on desktop where .logo has flex: 1. style-v2.css already pins it;
   we need the same for classic. Also flex-shrink: 0 so it never
   collapses when nav wraps. */
.header .logo-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.mob-head .logo-icon,
.footer-brand .logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Round-28 (bugfix #1): fluid-material.css:47 gives .header.scrolled a
   `mask-image: linear-gradient(...)` for the pretty edge-fade. But
   CSS mask CLIPS every descendant to the mask box — including the
   .nav-drop-panel that lives `position: absolute; top: calc(100%+8px)`
   and needs to overflow BELOW the header. Result: dropdown invisible
   whenever the page is scrolled ≥ 50px. Kill the mask on .header only.
   The scroll-edge visual polish is nice-to-have; a working menu is not. */
.header.scrolled,
.header.is-scrolled {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Round-28 (bugfix #2): includes/header.php:114 emits a Safari-safe
   pre-CSS hide `<style>#mobDrawer{visibility:hidden}</style>`. That
   inline block loads AFTER style.css (in <head> order), so its
   `visibility:hidden` wins the cascade — and #mobDrawer.is-open in
   style.css only flips `transform`, not `visibility`. Result: the
   mobile drawer was rendered off-screen AND invisible even when JS
   added .is-open. Restore visibility on the open state; also normalise
   the inline `right:-100%` back to `right:auto` so transform:translateX
   is the sole positioning source. Same fix for #mobOverlay. */
#mobDrawer.is-open {
    visibility: visible;
    right: auto;
    left: 0;
}
#mobOverlay.is-open {
    visibility: visible;
    opacity: 1;
}