/* Single source of truth for the header height. The header (Header.razor) sets its height to this
   var, and the fixed content area below sets its top offset to the same var — so the two can never
   drift. Change the height here and both update. (Responsive: taller on lg, matching the old
   h-16 / lg:h-24.) */
:root {
    --mw-header-height: 4rem; /* mobile */
}

@media (min-width: 992px) {
    :root {
        --mw-header-height: 6rem; /* lg */
    }
}

/* The fixed content area sits just below the header; its top offset = the header height. We OWN this
   offset here (instead of a Tailwind tw:top-* utility) so the admin auto-hide can animate it to 0
   without an !important war: Tailwind compiles utilities into @layer utilities with !important, and
   per the CSS cascade-layer rules a layered !important beats an UNLAYERED one regardless of
   specificity — so an unlayered override of a tw:top-* utility could never win. Owning `top` here
   keeps it one layer-free, !important-free declaration that applies to EVERYONE. */
.scrollable-content {
    top: var(--mw-header-height);
}

/* Auto-hiding header/footer on scroll — ADMINS / METER TECHS ONLY (gated by .mw-header-autohide on
   .page, set in MainLayout for ViewMeterAdminData users). Hiding navigation from customers is a
   support/usability hazard, so customers always get the static sticky header. Mobile only (lg+ never
   hides). Paired with js/header-hide-on-scroll.js, which also checks the gate before toggling. */
@media (max-width: 991px) {
    .page.mw-header-autohide > header {
        position: relative;
        z-index: 20; /* ride above the fixed .scrollable-content while sliding away */
        transition: transform 0.25s ease;
        will-change: transform;
    }

    .page.mw-header-autohide > .scrollable-content {
        transition: top 0.25s ease;
    }

    body.mw-header-hidden .page.mw-header-autohide > header {
        transform: translateY(-100%);
    }

    body.mw-header-hidden .page.mw-header-autohide > .scrollable-content {
        top: 0;
    }
}