/* 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,
.main-navigation .navigation > li > a {
    transition: all 0.3s ease;
}