/**
 * Slumens Header Layout Engine
 * Structural layer shared by every visual preset.
 *
 * This file intentionally contains layout rules only. It is always loaded
 * after the visual preset styles so header geometry cannot be changed by a
 * design preset, cached body class or WooCommerce search-form variation.
 *
 * @since 3.2.0
 */

@media (min-width: 1024px) {
    /* ------------------------------------------------------------------
     * Shared desktop contract
     * ------------------------------------------------------------------ */
    .site-header[data-header-layout] .site-header__main-inner {
        width: min(calc(100% - 2.5rem), var(--slumens-container, 1440px));
        margin-inline: auto;
        align-items: center;
    }

    .site-header[data-header-layout] .mobile-menu-toggle {
        display: none !important;
    }

    .site-header[data-header-layout] .site-header__search--desktop {
        display: block !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    .site-header[data-header-layout] .site-header__search--desktop > form,
    .site-header[data-header-layout] .site-header__search--desktop > .woocommerce-product-search,
    .site-header[data-header-layout] .site-header__search--desktop > .search-form,
    .site-header[data-header-layout] .site-header__search--desktop form.woocommerce-product-search,
    .site-header[data-header-layout] .site-header__search--desktop form.search-form,
    .site-header[data-header-layout] .site-header__search--desktop form.slumens-product-search {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .site-header[data-header-layout] .site-header__search--desktop :is(input[type="search"], .search-field) {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .site-header[data-header-layout] .site-branding,
    .site-header[data-header-layout] .site-header__center-brand,
    .site-header[data-header-layout] .header-actions,
    .site-header[data-header-layout] .primary-navigation {
        min-width: 0;
    }

    /*
     * V3.2.3 — deterministic logo sizing.
     * Light and dark assets can have different intrinsic pixel dimensions.
     * Their visible header size must not depend on those source dimensions.
     */
    .site-header[data-header-layout] .site-branding__configured-logo,
    .site-header[data-header-layout] .site-branding .custom-logo-link {
        inline-size: min(var(--slumens-logo-desktop-width, 235px), 100%) !important;
        width: min(var(--slumens-logo-desktop-width, 235px), 100%) !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .site-header[data-header-layout] .site-branding__logo:not(.site-branding__logo--mobile),
    .site-header[data-header-layout] .site-branding .custom-logo {
        inline-size: 100% !important;
        width: 100% !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
        block-size: auto !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .site-header[data-header-layout] .header-actions {
        width: max-content;
        max-width: 100%;
        justify-self: end;
    }

    /* ------------------------------------------------------------------
     * Header 01 — Inspire Clássico
     * logo | search (bounded) | actions
     * ------------------------------------------------------------------ */
    .site-header[data-header-layout="commerce"] .site-header__main-inner--reference {
        display: grid !important;
        grid-template-columns:
            minmax(180px, 250px)
            minmax(0, 1fr)
            minmax(280px, auto) !important;
        column-gap: clamp(1.25rem, 2.6vw, 2.75rem) !important;
    }

    .site-header[data-header-layout="commerce"] .site-branding {
        justify-self: start !important;
    }

    .site-header[data-header-layout="commerce"] .site-header__search--reference {
        --slumens-effective-search-width: min(var(--slumens-header-search-width-commerce, 400px), 420px);
        inline-size: min(100%, var(--slumens-effective-search-width)) !important;
        width: min(100%, var(--slumens-effective-search-width)) !important;
        max-inline-size: var(--slumens-effective-search-width) !important;
        max-width: var(--slumens-effective-search-width) !important;
        justify-self: center !important;
    }

    .site-header[data-header-layout="commerce"] .header-actions {
        justify-self: end !important;
    }

    /* ------------------------------------------------------------------
     * Header 02 — Inspire Central
     * bounded search | truly centered logo | actions
     * Symmetric side tracks keep the brand on the viewport axis while the
     * search itself no longer stretches with the available grid track.
     * ------------------------------------------------------------------ */
    .site-header[data-header-layout="centered"] .site-header__main-inner--centered {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        column-gap: clamp(1.25rem, 3vw, 3rem) !important;
    }

    .site-header[data-header-layout="centered"] .site-header__search--centered-left {
        --slumens-effective-search-width: min(var(--slumens-header-search-width-centered, 320px), 340px);
        inline-size: min(100%, var(--slumens-effective-search-width)) !important;
        width: min(100%, var(--slumens-effective-search-width)) !important;
        max-inline-size: var(--slumens-effective-search-width) !important;
        max-width: var(--slumens-effective-search-width) !important;
        justify-self: start !important;
        align-self: center;
    }

    .site-header[data-header-layout="centered"] .site-header__center-brand {
        inline-size: max-content;
        max-inline-size: 250px;
        justify-self: center !important;
        text-align: center;
    }

    .site-header[data-header-layout="centered"] .site-header__center-brand .site-branding {
        justify-self: center !important;
    }

    .site-header[data-header-layout="centered"] .header-actions {
        justify-self: end !important;
    }

    /* ------------------------------------------------------------------
     * Header 03 — Inspire Compacto
     * logo | small search | navigation | actions
     * ------------------------------------------------------------------ */
    .site-header[data-header-layout="compact"] .site-header__main-inner--compact {
        display: grid !important;
        grid-template-columns:
            minmax(150px, 200px)
            minmax(0, min(var(--slumens-header-search-width-compact, 260px), 280px))
            minmax(260px, 1fr)
            auto !important;
        column-gap: clamp(.75rem, 1.35vw, 1.3rem) !important;
    }

    .site-header[data-header-layout="compact"] .site-branding {
        justify-self: start !important;
    }

    .site-header[data-header-layout="compact"] .site-header__search--compact {
        --slumens-effective-search-width: min(var(--slumens-header-search-width-compact, 260px), 280px);
        inline-size: min(100%, var(--slumens-effective-search-width)) !important;
        width: min(100%, var(--slumens-effective-search-width)) !important;
        max-inline-size: var(--slumens-effective-search-width) !important;
        max-width: var(--slumens-effective-search-width) !important;
        justify-self: start !important;
    }

    .site-header[data-header-layout="compact"] .primary-navigation--compact {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .site-header[data-header-layout="compact"] .primary-navigation--compact .primary-menu {
        justify-content: center;
    }

    .site-header[data-header-layout="compact"] .header-actions {
        justify-self: end !important;
    }
}

/* Intermediate desktop widths: make the component smaller before hiding it. */
@media (min-width: 1024px) and (max-width: 1280px) {
    .site-header[data-header-layout="commerce"] .site-header__main-inner--reference {
        grid-template-columns: minmax(150px, 205px) minmax(0, 1fr) minmax(245px, auto) !important;
        column-gap: 1rem !important;
    }

    .site-header[data-header-layout="commerce"] .site-header__search--reference {
        --slumens-effective-search-width: min(var(--slumens-header-search-width-commerce, 400px), 360px);
    }

    .site-header[data-header-layout="centered"] .site-header__search--centered-left {
        --slumens-effective-search-width: min(var(--slumens-header-search-width-centered, 320px), 300px);
    }

    .site-header[data-header-layout="compact"] .site-header__main-inner--compact {
        grid-template-columns: minmax(140px, 175px) minmax(0, 240px) minmax(230px, 1fr) auto !important;
        column-gap: .7rem !important;
    }

    .site-header[data-header-layout="compact"] .site-header__search--compact {
        --slumens-effective-search-width: min(var(--slumens-header-search-width-compact, 260px), 240px);
    }
}

/* Mobile/tablet stays governed by the existing drawer behavior. This explicit
 * rule prevents a desktop preset from forcing the search back into the row. */
@media (max-width: 1023px) {
    .site-header[data-header-layout] .site-header__search--desktop,
    .site-header[data-header-layout] .site-header__navigation-row {
        display: none !important;
    }
}

/* V3.2.3 — one responsive logo scale for light/dark/mobile assets. */
@media (max-width: 1023px) {
    .site-header[data-header-layout] .site-branding__configured-logo,
    .site-header[data-header-layout] .site-branding .custom-logo-link {
        inline-size: min(var(--slumens-logo-mobile-width, 165px), 100%) !important;
        width: min(var(--slumens-logo-mobile-width, 165px), 100%) !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
    }

    .site-header[data-header-layout] .site-branding__logo,
    .site-header[data-header-layout] .site-branding .custom-logo {
        inline-size: 100% !important;
        width: 100% !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
        block-size: auto !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}