/* ===================================================================================
   HEXXXA CUSTOM HEADER — Suxnix Child
   Reproduces the production Elementor header (template id 3360) without Elementor.
   Production design tokens (Elementor kit 10):
     primary #977849, secondary #CEB17A, text #111111
     fonts: Oswald (headings), Roboto (text/nav), Roboto Slab (secondary)
   Font files: assets/css/hexxxa-fonts.css (local woff2/ttf).
===================================================================================== */

.hexxxa-header {
    display: block;
    width: 100%;
    margin: 0;
    background: #ffffff;
}

.hexxxa-header * {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Topbar — bg primary, Oswald 15px white centered
--------------------------------------------------------------------------- */
.hexxxa-header-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #977849;
    padding: 10px 20px;
}

.hexxxa-header-topbar-text {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #ffffff;
    font-family: "Oswald", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Main bar — logo 25% / nav 50% / actions 25%, bottom border #F0F0F0
--------------------------------------------------------------------------- */
.hexxxa-header-main {
    display: block;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #F0F0F0;
    padding: 20px;
}

.hexxxa-header-inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* ---- Brand / logo (25%) ---- */
.hexxxa-header-brand {
    flex: 0 0 25%;
    display: flex;
    align-items: center;
}

.hexxxa-header-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

.hexxxa-header-logo-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
}

/* ---- Desktop nav (50%) ---- */
.hexxxa-header-nav {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexxxa-header-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.hexxxa-header-nav-list > li {
    margin: 0;
    padding: 0;
}

.hexxxa-header-nav-list > li > a {
    display: inline-block;
    padding: 20px 20px;
    font-family: "Roboto", Sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #111111;
    text-decoration: none;
    transition: color 300ms;
}

.hexxxa-header-nav-list > li > a:hover {
    color: #CEB17A;
}

.hexxxa-header-nav-list > li.is-current > a {
    color: #977849;
}

/* ---- Right actions (25%): language + cart ---- */
.hexxxa-header-actions {
    flex: 0 0 25%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
}

/* Language switcher — Oswald 12px uppercase, #917b48, right border separator */
.hexxxa-header-lang {
    position: relative;
    padding: 0 10px 0 0;
    margin: 2px 0 0 0;
    border-right: 1px solid #CEB17A;
}

.hexxxa-header-lang-dropdown {
    position: relative;
}

.hexxxa-header-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: "Oswald", Sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #917b48;
}

.hexxxa-header-flag {
    display: inline-block;
    width: 18px;
    height: 12px;
    object-fit: cover;
    flex: 0 0 auto;
}

.hexxxa-header-lang-caret {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.hexxxa-header-lang-dropdown.is-open .hexxxa-header-lang-caret {
    transform: rotate(180deg);
}

.hexxxa-header-lang-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 150px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #F0F0F0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.hexxxa-header-lang-dropdown.is-open .hexxxa-header-lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hexxxa-header-lang-item {
    margin: 0;
    padding: 0;
}

.hexxxa-header-lang-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-family: "Oswald", Sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #917b48;
    text-decoration: none;
    white-space: nowrap;
}

.hexxxa-header-lang-link:hover {
    color: #CEB17A;
}

/* Cart — price Oswald 600 primary, icon 25px secondary, badge primary */
.hexxxa-header-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.hexxxa-header-cart-text {
    font-family: "Oswald", Sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #977849;
}

.hexxxa-header-cart-text .woocommerce-Price-amount,
.hexxxa-header-cart-text .woocommerce-Price-amount * {
    color: #977849;
}

.hexxxa-header-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #CEB17A;
}

.hexxxa-header-cart-icon svg {
    width: 25px;
    height: 25px;
    display: block;
}

.hexxxa-header-cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #977849;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   Page-title H1 — Oswald 40px primary, centered; hidden on home/blog
--------------------------------------------------------------------------- */
.hexxxa-header-page-title-wrap {
    display: block;
    text-align: center;
    margin: 30px 20px;
}

.hexxxa-header-page-title {
    margin: 0;
    font-family: "Oswald", Sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: #977849;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

body.home .hexxxa-header-page-title-wrap,
body.blog .hexxxa-header-page-title-wrap {
    display: none;
}

/* ---------------------------------------------------------------------------
   Mobile/tablet bottom tab bar — fixed, bg secondary + mask image, white icons
--------------------------------------------------------------------------- */
.hexxxa-tabbar {
    display: none;
}

@media (max-width: 1024px) {
    .hexxxa-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 9999;
        background-color: #CEB17A;
        background-image: url('/wp-content/uploads/2025/05/Mask-group-1-898x1024.png');
        background-position: center center;
        background-size: contain;
    }

    .hexxxa-tabbar-link {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 10px;
        text-decoration: none;
        color: #ffffff;
    }

    .hexxxa-tabbar-link:hover {
        background-color: #111111;
        color: #ffffff;
    }

    .hexxxa-tabbar-icon {
        display: inline-flex;
        color: #ffffff;
    }

    .hexxxa-tabbar-icon svg {
        width: 20px;
        height: 20px;
        display: block;
        fill: #ffffff;
    }

    .hexxxa-tabbar-text {
        font-family: "Oswald", Sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
    }
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* nav hidden on tablet/mobile (production: elementor-hidden-tablet+mobile) */
    .hexxxa-header-nav {
        display: none;
    }

    .hexxxa-header-brand {
        flex: 1 1 auto;
    }

    .hexxxa-header-actions {
        flex: 0 0 auto;
        gap: 10px;
    }

    /* language dropdown opens leftwards — anchored left it overflowed the viewport (horizontal scroll) */
    .hexxxa-header-lang-list {
        left: auto;
        right: 0;
    }
}

@media (max-width: 768px) {
    .hexxxa-header-topbar-text {
        font-size: 12px;
    }

    .hexxxa-header-logo-img {
        max-width: 120px;
    }

    /* language: flag only (production media query) */
    .hexxxa-header-lang {
        padding: 0;
        margin: 0;
        border-right: none;
    }

    .hexxxa-header-flag {
        width: 20px;
        height: auto;
    }

    .hexxxa-header-lang-label,
    .hexxxa-header-lang-caret {
        display: none;
    }

    .hexxxa-header-page-title {
        font-size: 25px;
    }
}