/*
 * 30 Header.
 * Load order: content-style.css -> css/05-header.css -> css/10-content-patterns.css -> css/11-tabs-block.css -> css/15-woocommerce.css -> css/20-page-patterns.css -> css/20-support-pages.css -> style.css.
 * Purpose: Global header, navigation, logo, transparent header, and cart visibility rules.
 * Related files: Kadence Customizer handles most header styling; these are child-theme overrides.
 * Scope: moved from style.css — header chrome only.
 */

/* ── Logo ────────────────────────────────────────────────── */
/* Header branding handled by Customizer */
.site-header a.brand img.custom-logo {
    /* max-width: 160px; */
    height: auto;
}

/* Ease transparent/sticky header state changes so the top bar does not snap blue. */
#masthead .site-header-row-container-inner,
#mobile-header .site-header-row-container-inner,
#masthead .site-main-header-wrap,
#mobile-header .site-main-header-wrap,
#masthead .header-navigation .header-menu-container>ul>li.menu-item>a,
#masthead .mobile-toggle-open-container .menu-toggle-open,
#mobile-header .mobile-toggle-open-container .menu-toggle-open,
#masthead .header-cart-wrap .header-cart-button,
#mobile-header .header-mobile-cart-wrap .header-cart-button {
    transition:
        background-color 0.28s ease,
        box-shadow 0.28s ease,
        color 0.2s ease,
        border-color 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
    #masthead .site-header-row-container-inner,
    #mobile-header .site-header-row-container-inner,
    #masthead .site-main-header-wrap,
    #mobile-header .site-main-header-wrap,
    #masthead .header-navigation .header-menu-container>ul>li.menu-item>a,
    #masthead .mobile-toggle-open-container .menu-toggle-open,
    #mobile-header .mobile-toggle-open-container .menu-toggle-open,
    #masthead .header-cart-wrap .header-cart-button,
    #mobile-header .header-mobile-cart-wrap .header-cart-button {
        transition: none;
    }
}

/* ── Transparent header light variant ───────────────────────
 * Light first-section pages keep Kadence's transparent header, but use dark
 * controls only before the sticky header state takes over. */
.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container>ul>li.menu-item>a,
.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .mobile-toggle-open-container .menu-toggle-open,
.dmax-transparent-header-light.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-menu-container>ul>li.menu-item>a,
.dmax-transparent-header-light.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-menu-container>ul>li.menu-item>a:visited,
.dmax-transparent-header-light.transparent-header #masthead #site-header .site-main-header-wrap:not(.item-is-fixed) .main-navigation .primary-menu-container>ul>li.menu-item>a,
.dmax-transparent-header-light.transparent-header #masthead #site-header .site-main-header-wrap:not(.item-is-fixed) .main-navigation .primary-menu-container>ul>li.menu-item.current-menu-item>a,
.dmax-transparent-header-light.transparent-header #masthead #site-header .site-main-header-wrap:not(.item-is-fixed) .header-navigation .header-menu-container ul ul li.menu-item>a,
.dmax-transparent-header-light.transparent-header #masthead #site-header .site-main-header-wrap:not(.item-is-fixed) .mobile-toggle-open-container .menu-toggle-open,
.dmax-transparent-header-light.transparent-header #masthead .site-main-header-wrap:not(.item-is-fixed) .header-cart-wrap .header-cart-button {
    color: var(--dmax-navy);
}

.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container>ul ul.sub-menu,
.page-id-17300.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container>ul ul.sub-menu {
    background: var(--dmax-white);
}

.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container>ul ul.sub-menu li.menu-item>a,
.page-id-17300.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container>ul ul.sub-menu li.menu-item>a {
    color: var(--dmax-navy);
}

.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container>ul ul.sub-menu li.menu-item.current-menu-item>a,
.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container ul ul li.menu-item>a:hover,
.page-id-17300.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container>ul ul.sub-menu li.menu-item.current-menu-item>a,
.page-id-17300.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container ul ul li.menu-item>a:hover,
.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item>a,
.page-id-17300.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item>a,
.content-title-style-above.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container ul ul li.menu-item>a:hover,
.page-id-17300.transparent-header #masthead .site-main-header-wrap:not(.item-is-stuck) .header-navigation .header-menu-container ul ul li.menu-item>a:hover {
    background: var(--dmax-light-gray);
}

.dmax-transparent-header-light.transparent-header #masthead .site-main-header-wrap:not(.item-is-fixed) .main-navigation .primary-menu-container>ul>li.menu-item>a:hover,
.dmax-transparent-header-light.transparent-header #masthead .site-main-header-wrap:not(.item-is-fixed) .main-navigation .primary-menu-container>ul>li.menu-item.current-menu-item>a:hover,
.dmax-transparent-header-light.transparent-header #masthead .site-main-header-wrap:not(.item-is-fixed) .mobile-toggle-open-container .menu-toggle-open:hover,
.dmax-transparent-header-light.transparent-header #masthead .site-main-header-wrap:not(.item-is-fixed) .header-cart-wrap .header-cart-button:hover {
    color: var(--dmax-sky);
}

/* ── Woo cart in transparent header ──────────────────────── */
.dmax-transparent-header-light.transparent-header #main-header .header-cart-wrap .header-cart-button,
.dmax-transparent-header-light.mobile-transparent-header #mobile-header .header-mobile-cart-wrap .header-cart-button {
    /* color: #ffffff; */
    color: var(--dmax-sky);
}

.dmax-transparent-header-light.transparent-header #main-header .header-cart-wrap .header-cart-button:hover,
.dmax-transparent-header-light.mobile-transparent-header #mobile-header .header-mobile-cart-wrap .header-cart-button:hover {
    color: var(--dmax-ink);
}

.dmax-transparent-header-light.mobile-transparent-header .mobile-toggle-open-container .menu-toggle-open,
.dmax-transparent-header-light.transparent-header .search-toggle-open-container .search-toggle-open {
    color: var(--dmax-sky);
}

.dmax-transparent-header-light.mobile-transparent-header .header-cart-button .header-cart-total {
    background: var(--dmax-sky);
}

/* .header-button {
    border-radius: 30px;
}

*/

/* ── Cart visibility ───────────────────────────────────────
 * Use Kadence's native cart, but surface it only on WooCommerce views. */
body:not(.woocommerce):not(.woocommerce-page) .header-cart-wrap,
body:not(.woocommerce):not(.woocommerce-page) .header-mobile-cart-wrap {
    display: none;
}

/* ── Right-align desktop navigation ────────────────────────
 * Default Kadence grid: 1fr auto 1fr → center column gets equal space on both sides.
 * Override: auto 1fr auto → logo auto-sized, nav fills remaining space, right section
 * collapses to zero when cart is hidden (non-WooCommerce pages).
 * On WooCommerce pages, cart reappears in the auto-sized right column. */
.site-header-row.site-header-row-center-column {
    grid-template-columns: auto 1fr auto;
}

.site-header-section-center {
    justify-content: flex-end;
}