/* Header Shrink Logic 
   Applied when JavaScript adds the .header-shrunk class to .main-header
*/

/* 1. Shrink the Logo to 30px */
.main-header.header-shrunk .main-header__site-title img {
    max-height: 30px !important; /* Force override */
}

/* 2. Remove Padding from Main Bar to Shorten Header */
.main-header.header-shrunk .main-header__main-bar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important; /* Allow it to collapse fully to content height */
}

/* 3. Tighten Navigation Margins (Desktop) */
@media (min-width: 1024px) {
    .main-header.header-shrunk .main-navigation .navigation > li > a {
        margin-top: 5px !important;    /* Reduced from 30px to 5px */
        margin-bottom: 5px !important; /* Reduced from 30px to 5px */
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* Handle "Centered" layout specific padding if active */
    body.main-header--center .main-header.header-shrunk .main-header__main-bar {
        padding-top: 0 !important;
    }
    
    body.main-header--center .main-header.header-shrunk .main-navigation .navigation > li > a {
        margin: 5px 15px !important;
    }
}

/* 4. Smooth Transitions */
.main-header__site-title img {
    transition: max-height 0.3s ease;
}

.main-header__main-bar {
    transition: padding 0.3s ease;
}

.main-navigation .navigation > li > a {
    transition: margin 0.3s ease, padding 0.3s ease;
}

/* 5. Respect the OS "reduce motion" setting and aaAccessibilityPlus "Stop Motion" */
html.aa-motion-stop .main-header,
html.aa-motion-stop .main-header__site-title img,
html.aa-motion-stop .main-header__main-bar,
html.aa-motion-stop .main-navigation .navigation > li > a {
    transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .main-header,
    .main-header__site-title img,
    .main-header__main-bar,
    .main-navigation .navigation > li > a {
        transition: none !important;
    }
}