/**
 * Claue V2 — Header-specific styles
 *
 * Structure mirrors https://claue.arrowtheme.com/:
 *   Row 1 (topbar):    .cl-topbar   — dark bg #222, white text, 39px
 *   Row 2 (middle):    .cl-middle-header — white bg, 63px
 *     col-2 logo | col-8 nav | col-2 icons
 *
 * Responsive:
 *   ≥992px (desktop):  full 2-row layout
 *   <992px (tablet):   logo centred, hamburger left, icons right
 *   <576px (mobile):   same as tablet but condensed
 */

/* ===================================================================
   1. Layout container — mirrors reference .frame-fluid
   =================================================================== */

.cl-frame-fluid {
    max-width: var(--cl-container);
    margin: 0 auto;
    padding: 0 var(--cl-container-padding);
    width: 100%;
}

/* ===================================================================
   2. Middle header row (Row 2)
   =================================================================== */

.cl-middle-header {
    background: #ffffff;
    border-bottom: 1px solid var(--cl-border);
    position: relative;
    z-index: 100;
}

.cl-middle-header__line {
    display: flex;
    align-items: center;
    height: 63px; /* matches reference middle-header height */
    gap: 0;
}

/* ===================================================================
   3. Column layout (reference: col-des-2 | col-des-8 | col-des-2)
   =================================================================== */

.cl-col {
    display: flex;
    align-items: center;
}

/* Logo column: fixed 2/12 width on desktop */
.cl-col--logo {
    flex: 0 0 16.666%;
    max-width: 16.666%;
    gap: 12px;
}

/* Nav column: 8/12 center */
.cl-col--nav {
    flex: 1 1 auto;
    justify-content: center;
}

/* Icons column: fixed 2/12 width on desktop */
.cl-col--icons {
    flex: 0 0 16.666%;
    max-width: 16.666%;
    justify-content: flex-end;
}

/* Mobile-only logo column (centered) — hidden on desktop */
.cl-col--logo-mb {
    flex: 1 1 auto;
    justify-content: center;
}

/* ===================================================================
   4. Logo
   =================================================================== */

.cl-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.cl-logo__img {
    display: block;
    max-height: 27px;
    width: auto;
}

/* ===================================================================
   5. Horizontal navigation
   =================================================================== */

.cl-nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.cl-nav__item {
    position: relative;
}

.cl-nav__link {
    display: flex;
    align-items: center;
    height: 63px; /* fill full middle-header height for hover zone */
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cl-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--cl-transition);
    white-space: nowrap;
}

.cl-nav__link:hover,
.cl-nav__item--active > .cl-nav__link {
    color: var(--cl-primary); /* #000 */
}

/* Caret for parent items */
.cl-nav__item--has-children > .cl-nav__link::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 5px;
    vertical-align: middle;
}

/* ===================================================================
   6. Nav dropdown (simple, non-megamenu fallback)
   =================================================================== */

.cl-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--cl-bg);
    border: 1px solid var(--cl-border);
    box-shadow: var(--cl-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 200;
    padding: 12px 0;
    list-style: none;
    margin: 0;
}

.cl-nav__item:hover > .cl-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cl-nav__dropdown li a {
    display: block;
    padding: 8px 20px;
    font-size: 13px;
    color: var(--cl-text);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.cl-nav__dropdown li a:hover {
    color: var(--cl-primary);
    padding-left: 25px;
}

/* Semantic aliases for dropdown items/links (used by the server-side phtml) */
.cl-nav__dropdown-item {
    list-style: none;
}

.cl-nav__dropdown-link {
    display: block;
    padding: 8px 20px;
    font-size: 13px;
    color: var(--cl-text);
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.cl-nav__dropdown-link:hover {
    color: var(--cl-primary);
    padding-left: 25px;
}

/* Caret indicator for top-level items with subcategories */
.cl-nav__caret {
    font-size: 9px;
    margin-left: 4px;
    opacity: 0.6;
}

/* Mobile sub-navigation */
.cl-mobile-nav__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
}

.cl-mobile-nav__sub-item {
    list-style: none;
}

.cl-mobile-nav__sub-link {
    display: block;
    padding: 6px 20px;
    font-size: 13px;
    color: var(--cl-text-light, #666);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cl-mobile-nav__sub-link:hover {
    color: var(--cl-primary);
}

/* ===================================================================
   7. Icon group (search / account / wishlist / cart)
   =================================================================== */

.cl-header__icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cl-header__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cl-text-dark);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color var(--cl-transition);
}

.cl-header__icon:hover {
    color: var(--cl-primary);
}

.cl-header__icon svg {
    display: block;
    flex-shrink: 0;
}

/* Cart badge */
.cl-header__cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--cl-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
}

/* ===================================================================
   8. Mobile hamburger toggle
   =================================================================== */

.cl-nav-toggle {
    display: none; /* shown below 992px via responsive rules */
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    width: 28px;
    height: 22px;
    flex-shrink: 0;
}

.cl-nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--cl-text-dark);
    border-radius: 1px;
    transition: background var(--cl-transition);
}

.cl-nav-toggle:hover .cl-nav-toggle__bar {
    background: var(--cl-primary);
}

/* ===================================================================
   9. Inline search popup
   =================================================================== */

.cl-search-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* z-index 1070: above mobile-nav drawer (1060) and its backdrop overlay (1055) */
    z-index: 1070;
    display: flex;
    align-items: flex-start;
    padding-top: 120px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cl-search-popup--open {
    opacity: 1;
    visibility: visible;
}

.cl-search-popup__inner {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: #ffffff;
    box-shadow: var(--cl-shadow-lg);
    padding: 0 20px 0 0;
}

.cl-search-popup__form {
    display: flex;
    flex: 1;
    align-items: center;
}

.cl-search-popup__input {
    flex: 1;
    height: 56px;
    border: none;
    padding: 0 20px;
    font-size: 16px;
    color: var(--cl-text-dark);
    outline: none;
    font-family: var(--cl-font);
}

.cl-search-popup__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cl-text-dark);
    padding: 0 12px;
    height: 56px;
    transition: color var(--cl-transition);
}

.cl-search-popup__submit:hover {
    color: var(--cl-primary);
}

.cl-search-popup__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cl-text-dark);
    padding: 0 8px;
    height: 56px;
    transition: color var(--cl-transition);
    flex-shrink: 0;
}

.cl-search-popup__close:hover {
    color: var(--cl-primary);
}

/* ===================================================================
   10. Mobile navigation drawer
   =================================================================== */

.cl-mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    background: #ffffff;
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
}

.cl-mobile-nav--open {
    transform: translateX(0);
}

.cl-mobile-nav__inner {
    padding: 20px;
}

.cl-mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--cl-text-dark);
    padding: 0;
    margin-bottom: 20px;
    width: 100%;
    transition: color var(--cl-transition);
}

.cl-mobile-nav__close:hover {
    color: var(--cl-primary);
}

.cl-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cl-mobile-nav__item {
    border-bottom: 1px solid var(--cl-border);
}

.cl-mobile-nav__link {
    display: block;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--cl-text-dark);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--cl-transition);
}

.cl-mobile-nav__link:hover {
    color: var(--cl-primary);
}

/* Body overlay when mobile nav is open */
.cl-nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1055;
}

/* ===================================================================
   11. Sticky header
   =================================================================== */

.cl-header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    animation: clSlideDown 0.3s ease;
    box-shadow: var(--cl-shadow);
}

@keyframes clSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ===================================================================
   12. Responsive — hide/show helpers matching reference breakpoints
   =================================================================== */

/* Desktop only (≥992px): show desktop logo, hide mobile logo col & toggle */
@media (min-width: 992px) {
    .cl-hidden-des {
        display: none !important;
    }

    .cl-col--logo-mb {
        display: none !important;
    }
}

/* Tablet + mobile (<992px): hide desktop-only elements, show toggle */
@media (max-width: 991px) {
    .cl-hidden-tb,
    .cl-hidden-mb {
        display: none !important;
    }

    .cl-col--nav {
        display: none !important;
    }

    .cl-nav-toggle {
        display: flex !important;
    }

    .cl-col--logo {
        flex: 0 0 auto;
        max-width: none;
    }

    .cl-col--logo-mb {
        flex: 1 1 auto;
        justify-content: center;
        display: flex !important;
    }

    .cl-col--icons {
        flex: 0 0 auto;
        max-width: none;
    }
}

/* Small mobile (<576px): tighten icon gap */
@media (max-width: 575px) {
    .cl-header__icons {
        gap: 10px;
    }
}

/* ===================================================================
   13. Topbar responsive
   =================================================================== */

@media (max-width: 991px) {
    .cl-topbar__center {
        display: none; /* hide promo text on tablet/mobile, matches reference */
    }

    .cl-topbar__right {
        display: none; /* hide lang/currency on mobile */
    }

    .cl-topbar__left {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .cl-topbar {
        display: none; /* full topbar hidden on small mobile, matches reference toolbar-mobile */
    }
}

/* ===================================================================
   14. Suppress Magento-default header elements that may persist
       via generated CSS or other theme fallback
   =================================================================== */

/* Safety fallback: `header.panel` (block) and `header-wrapper` (container)
   are both removed via <referenceBlock remove="true"> / <referenceContainer remove="true">
   in Magento_Theme/layout/default.xml.  These CSS rules guard against any edge-case
   where the parent blank theme or a third-party module re-introduces these elements
   without going through our layout XML (e.g. full-page cache stale entry, custom
   module that ignores remove directives).
   `!important` is justified here because this is a hard structural override — the Claue
   header must own the .page-header area exclusively; any Magento-default row appearing
   alongside cl-topbar / cl-middle-header would produce a double-header.
   Our templates use `cl-*` class names only, so these selectors cannot accidentally
   hide Claue-authored content. */
.page-header .panel.wrapper,
.page-header .header.content {
    display: none !important;
}