/* Sticky shrinking header on scroll — opt-in per MenuStyle.
   Only kicks in on desktop (>= 992 px). Header sticks to top, top bar hides,
   logo and padding shrink, drop shadow appears once `html.sticky-active` is
   set by /js/sticky-shrink-header.js. */

@media (min-width: 992px) {
    /* Sticky positioning needs to sit on the <header> wrapper from MainLayout
       — the inner <nav> alone would scroll out together with its small parent.
       We use :has() to only pin headers whose inner element opted in. */
    header:has([data-sticky-shrink="true"]) {
        position: sticky;
        top: 0;
        z-index: 1030;
        background: white;
        transition: box-shadow 0.3s ease;
    }

    [data-sticky-shrink="true"] {
        transition: padding 0.3s ease, background-color 0.3s ease;
    }

    [data-sticky-shrink="true"] img,
    [data-sticky-shrink="true"] .header-top,
    [data-sticky-shrink="true"] .header-quickbar {
        transition: height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
    }

    /* Drop shadow once scrolled */
    html.sticky-active header:has([data-sticky-shrink="true"]) {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* === Layout 1: Standard === */
    html.sticky-active .header-layout-1[data-sticky-shrink="true"] {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        margin-bottom: 0 !important;
    }
    html.sticky-active .header-layout-1[data-sticky-shrink="true"] .navbar-brand img {
        height: 28px !important;
    }

    /* === Layout 2: Minimal === */
    html.sticky-active .header-layout-2[data-sticky-shrink="true"] .header-content {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    html.sticky-active .header-layout-2[data-sticky-shrink="true"] .logo-link img {
        height: 24px !important;
    }

    /* === Layout 3: Modern === */
    html.sticky-active .header-layout-3[data-sticky-shrink="true"] .header-top {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        overflow: hidden;
    }
    html.sticky-active .header-layout-3[data-sticky-shrink="true"] .header-main {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    html.sticky-active .header-layout-3[data-sticky-shrink="true"] .logo img {
        height: 32px !important;
    }
    html.sticky-active .header-layout-3[data-sticky-shrink="true"] .logo-placeholder .logo-icon {
        font-size: 1.25rem;
    }

    /* === Layout 4: TwoTier === */
    html.sticky-active .header-layout-4[data-sticky-shrink="true"] .header-quickbar {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        overflow: hidden;
    }
    html.sticky-active .header-layout-4[data-sticky-shrink="true"] .header-main-nav {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    html.sticky-active .header-layout-4[data-sticky-shrink="true"] .navbar-brand img {
        height: 28px !important;
    }
}