/*
 * ChamaeleonStyle – Header + Navigation
 * ======================================
 *
 * Brand direction:
 * - CHAMAELEONSTYLE is calm and typographic.
 * - Warm light-grey brand background (#F2F2EF).
 * - Straight edges.
 * - No drop shadows.
 * - Thin rules instead of decorative boxes.
 * - Red is used only as an interaction / sale accent.
 */


/* ==========================================================================
   SITE HEADER
   ========================================================================== */

.site-header {
    width: 100%;

    background: var(--cs-brand-background);
    border-top: 2px solid var(--cs-brand-black);
}

/*
 * IMPORTANT:
 * The PHP layout wraps the complete header inside #flexbox-main_head.
 * A sticky child cannot remain fixed after its own parent has scrolled away.
 * Therefore the WRAPPER is sticky, not .site-header itself.
 */
#flexbox-main_head {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: var(--cs-brand-background);
}

/*
 * The navigation is a separate element directly below .site-header.
 * It gets its own sticky position and starts exactly underneath the
 * fixed header area.
 *
 * Desktop header height:
 * 32 px utility bar + 112 px brand area + 2 px top rule = ~146 px.
 */
:root {
    --cs-sticky-header-height: 146px;
}



/*
 * Sticky positioning stops working when a relevant ancestor creates its own
 * scrolling/overflow context. These two shop layout wrappers therefore remain
 * visible overflow containers.
 */
#flexbox-main,
#flexbox-main_head,
#flexbox-main_middle {
    overflow: visible;
}

/* ==========================================================================
   TOP SERVICE BAR
   ========================================================================== */

.site-utility {
    width: 100%;
    background: var(--cs-brand-black);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.site-utility__inner {
    min-height: 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.utility-links,
.utility-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-utility a {
    color: #FFFFFF;
    opacity: 0.88;

    transition:
        opacity 0.15s ease,
        color 0.15s ease;
}

.site-utility a:hover {
    color: #FFFFFF;
    opacity: 1;
    text-decoration: none;
}

.utility-actions .cart-link {
    font-weight: 700;
    opacity: 1;
}


/* ==========================================================================
   BRAND AREA
   ========================================================================== */

.site-brand-area {
    width: 100%;
    background: var(--cs-brand-background);
    border-bottom: 1px solid var(--cs-border);
}

.brand-row {
    min-height: 112px;

    display: grid;
    grid-template-columns:
        minmax(320px, 560px)
        minmax(300px, 480px);

    align-items: center;
    justify-content: space-between;

    gap: clamp(40px, 6vw, 110px);

    padding-top: 19px;
    padding-bottom: 19px;
}


/* --------------------------------------------------------------------------
   New logo
   -------------------------------------------------------------------------- */

.brand-logo {
    display: block;
    width: min(100%, 560px);
}

.brand-logo img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 74px;

    object-fit: contain;
    object-position: left center;
}


/* ==========================================================================
   SEARCH
   ========================================================================== */

.site-search {
    width: 100%;
    min-height: 44px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    background: var(--cs-white);
    border: 1px solid var(--cs-border-dark);
}

.site-search input {
    min-width: 0;

    padding: 10px 15px;

    border: 0;
    outline: 0;

    background: var(--cs-white);
    color: var(--cs-text);

    font-size: 14px;
    font-weight: 450;
}

.site-search input::placeholder {
    color: #898984;
}

.site-search input:focus {
    box-shadow: inset 0 -2px 0 var(--cs-red) !important;
}

.site-search button {
    min-width: 96px;

    padding: 0 20px;

    border: 0;
    border-left: 1px solid var(--cs-border-dark);

    background: var(--cs-brand-black);
    color: #FFFFFF;

    font-size: 13px;
    font-weight: 700;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.site-search button:hover {
    background: var(--cs-red);
}


/* ==========================================================================
   MAIN NAVIGATION
   ========================================================================== */

/*
 * The navigation is included inside .content_menu.
 * As with the header, the wrapper is the correct sticky element.
 */
.content_menu {
    position: sticky;
    top: var(--cs-sticky-header-height);
    z-index: 990;

    width: 100%;

    background: var(--cs-brand-background);
}

.main-nav {
    position: relative;
    z-index: 1;

    width: 100%;

    background: var(--cs-brand-background);

    border-top: 0;
    border-bottom: 1px solid var(--cs-border);
}

.main-nav__inner {
    position: relative;
}

.nav-toggle {
    display: none;
}


/* --------------------------------------------------------------------------
   First navigation level
   -------------------------------------------------------------------------- */

.main-menu {
    display: flex;
    align-items: stretch;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.main-menu > li {
    position: relative;
}

.main-menu > li > a {
    position: relative;

    min-height: 52px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    color: var(--cs-brand-black);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;

    transition:
        color 0.15s ease,
        background 0.15s ease;
}

.main-menu > li:first-child > a {
    padding-left: 0;
}

.main-menu > li > a::after {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: -1px;

    height: 2px;

    background: transparent;

    transition: background 0.15s ease;
}

.main-menu > li:first-child > a::after {
    left: 0;
}

.main-menu > li:hover > a {
    color: var(--cs-red);
}

.main-menu > li:hover > a::after {
    background: var(--cs-red);
}


/* SALE / OUTLET-type entries may intentionally use red. */
.main-menu__sale > a {
    color: var(--cs-red) !important;
}


/* ==========================================================================
   DROPDOWN NAVIGATION
   ========================================================================== */

.main-menu ul {
    display: none;

    position: absolute;

    top: 100%;
    left: 0;

    min-width: 270px;

    margin: 0;
    padding: 8px 0;

    list-style: none;

    background: var(--cs-white);

    border:
        1px solid var(--cs-border-dark);
}

.main-menu li:hover > ul {
    display: block;
}

.main-menu ul a {
    display: block;

    padding: 10px 16px;

    color: var(--cs-text);

    border-left: 2px solid transparent;

    font-size: 13px;
    font-weight: 500;

    transition:
        color 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

.main-menu ul a:hover {
    color: var(--cs-brand-black);

    background: var(--cs-surface-soft);

    border-left-color: var(--cs-red);
}

.submenu-toggle {
    display: none;
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* ==========================================================================
   RESPONSIVE HEADER
   ========================================================================== */

@media (max-width: 980px) {

    /*
     * On tablet the brand area becomes two rows:
     * logo + search field.
     */
    :root {
        --cs-sticky-header-height: 192px;
    }

    .utility-links {
        display: none;
    }

    .brand-row {
        min-height: 0;

        grid-template-columns: 1fr;

        gap: 16px;

        padding-top: 16px;
        padding-bottom: 16px;
    }

    .brand-logo {
        width: min(100%, 500px);
    }

    .brand-logo img {
        max-height: 68px;
    }

    .site-search {
        max-width: 620px;
    }


    /* Mobile navigation */
    .nav-toggle {
        display: block;

        width: 100%;
        min-height: 48px;

        padding: 0;

        background: transparent;

        border: 0;

        color: var(--cs-brand-black);

        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-align: left;
        text-transform: uppercase;
    }

    .main-menu {
        display: none;

        flex-direction: column;

        padding-bottom: 10px;

        border-top: 1px solid var(--cs-border);
    }

    .main-nav.is-open .main-menu {
        display: flex;
    }

    .main-menu > li > a,
    .main-menu > li:first-child > a {
        min-height: 44px;

        padding: 0 4px;

        border-bottom: 1px solid var(--cs-border);
    }

    .main-menu > li > a::after {
        display: none;
    }

    .submenu-toggle {
        display: block;

        position: absolute;

        top: 3px;
        right: 0;

        width: 42px;
        height: 38px;

        background: transparent;

        border: 0;

        color: var(--cs-brand-black);

        font-size: 20px;
    }

    .main-menu ul {
        display: none !important;

        position: static;

        min-width: 0;

        margin: 0 0 6px 10px;
        padding: 0;

        border: 0;
        border-left: 2px solid var(--cs-border);
    }

    .main-menu li.submenu-open > ul {
        display: block !important;
    }

    .main-menu li:hover > ul {
        display: none;
    }
}


@media (max-width: 560px) {

    /*
     * Compact mobile header.
     */
    :root {
        --cs-sticky-header-height: 176px;
    }

    .site-utility__inner {
        min-height: 38px;
    }

    .utility-actions {
        width: 100%;
        justify-content: space-between;
    }

    .brand-row {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .brand-logo img {
        max-height: 54px;
    }

    .site-search {
        min-height: 42px;
    }

    .site-search button {
        min-width: 82px;
        padding: 0 13px;
    }
}


/* ==========================================================================
   STICKY HEADER – ANCHOR OFFSET
   --------------------------------------------------------------------------
   Prevent in-page anchors from disappearing underneath the sticky header.
   ========================================================================== */

[id] {
    scroll-margin-top: calc(var(--cs-sticky-header-height) + 62px);
}