/**
 * Mesa Header Styles - Pixel Perfect
 *
 * RTL-first, conversion-focused header design
 * Following Figma specifications exactly
 *
 * @package Mesa
 * @since 1.2.0
 */

/* ===========================================
   DESIGN TOKENS - Header Specific
   =========================================== */
:root {
    /* Header dimensions */
    --header-height: 72px;
    --header-padding-inline: 60px;
    --nav-width: 800px;
    --nav-gap: 32px;

    /* Logo dimensions */
    --logo-width: 128px;
    --logo-height: 20px;

    /* Icon dimensions */
    --icon-size: 24px;
    --icon-gap: 21px;
    --icons-area-width: 114px;

    /* Typography */
    --nav-font-size: 16px;
    --nav-font-weight: 500;

    /* Z-index */
    --header-z-index: 1000;

    /* Transitions */
    --header-transition: 200ms ease;
}

/* Tablet breakpoint adjustments */
@media (max-width: 1024px) {
    :root {
        --header-padding-inline: 32px;
        --nav-width: 600px;
        --nav-gap: 24px;
    }
}

/* Mobile breakpoint adjustments */
@media (max-width: 850px) {
    :root {
        --header-height: 60px;
        --header-padding-inline: 20px;
    }
}

/* ===========================================
   HEADER BASE
   Using !important to override legacy style.css rules
   =========================================== */
#mesa-header.mesa-header,
header#mesa-header.mesa-header,
.mesa-header {
    background-color: var(--mesa-black, #08050C) !important;
    background: var(--mesa-black, #08050C) !important;
    position: relative !important;
    z-index: var(--header-z-index) !important;
    width: 100% !important;
    border: none !important;
}

/* ===========================================
   HEADER MAIN ROW
   =========================================== */
#mesa-header .mesa-header__main,
header#mesa-header .mesa-header__main,
.mesa-header .mesa-header__main,
.mesa-header__main {
    max-width: 1512px;
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    display: flex !important;
    align-items: center !important;
    padding-inline: var(--header-padding-inline) !important;
    padding: 0 var(--header-padding-inline) !important;
    position: relative !important;
    background-color: var(--mesa-black, #08050C) !important;
    background: var(--mesa-black, #08050C) !important;
    border: none !important;
    /* Reset grid from old styles */
    grid-template-columns: none !important;
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================
   LOGO SECTION
   =========================================== */
#mesa-header .mesa-header__logo,
.mesa-header .mesa-header__logo,
h1.mesa-header__logo,
div.mesa-header__logo,
.mesa-header__logo {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Reset grid positioning from old styles */
    grid-column: unset !important;
    justify-self: unset !important;
}

#mesa-header .mesa-header__logo-link,
.mesa-header__logo-link,
.mesa-header__logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.mesa-header__logo-link:focus-visible {
    outline: 2px solid var(--mesa-lime, #CEFE65) !important;
    outline-offset: 4px !important;
    border-radius: 2px !important;
}

#mesa-header .mesa-header__logo-img,
.mesa-header__logo-img,
.mesa-header__logo img {
    width: var(--logo-width) !important;
    height: var(--logo-height) !important;
    max-height: var(--logo-height) !important;
    object-fit: contain !important;
}

/* Site title fallback */
#mesa-header .mesa-header__site-title,
.mesa-header__site-title {
    color: var(--mesa-white, #FFFFFF) !important;
    font-size: 1.25rem !important;
    font-weight: var(--font-bold, 700) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.mesa-header__site-title:hover {
    color: var(--mesa-lime, #CEFE65) !important;
}

/* ===========================================
   NAVIGATION - Centered via Absolute Position
   =========================================== */
#mesa-header .mesa-header__nav,
header#mesa-header .mesa-header__nav,
.mesa-header .mesa-header__nav,
.mesa-header__nav {
    position: absolute !important;
    inset-inline-start: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: var(--nav-width) !important;
    max-width: calc(100% - var(--logo-width) - var(--icons-area-width) - var(--header-padding-inline) * 2 - 40px) !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* RTL adjustment for transform */
html[dir="rtl"] #mesa-header .mesa-header__nav,
html[dir="rtl"] .mesa-header__nav {
    transform: translate(50%, -50%) !important;
}

#mesa-header .mesa-header__menu,
.mesa-header .mesa-header__menu,
ul.mesa-header__menu,
.mesa-header__menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
}

#mesa-header .mesa-header__menu li,
.mesa-header__menu li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    cursor: pointer;
}

#mesa-header .mesa-header__menu a,
#mesa-header .mesa-header__menu > li > a,
.mesa-header__menu a,
.mesa-header__menu > li > a {
    font-family: var(--font-hebrew, 'Open Sans', sans-serif) !important;
    font-size: var(--nav-font-size) !important;
    font-weight: var(--nav-font-weight) !important;
    color: var(--mesa-white, #FFFFFF) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    padding: 8px 0 !important;
    background: transparent !important;
    transform: translateY(0);
    transition:
            color var(--header-transition),
            border-color var(--header-transition),
            padding var(--header-transition) !important;
}

#mesa-header .mesa-header__menu > li > a {
    padding: 23px 20px !important;
    border-bottom: 2px solid transparent;
}

#mesa-header .mesa-header__menu > li:hover > a {
    border-color: var(--mesa-lime, #CEFE65);
    color: var(--mesa-lime, #CEFE65) !important;
    padding-top: 24px !important;
    padding-bottom: 22px !important;
}

#mesa-header .mesa-header__menu a:hover,
#mesa-header .mesa-header__menu > li > a:hover,
.mesa-header__menu a:hover,
.mesa-header__menu > li > a:hover {
    color: var(--mesa-lime, #CEFE65) !important;
    background: transparent !important;
}

.mesa-header__menu a:focus-visible {
    outline: 2px solid var(--mesa-lime, #CEFE65) !important;
    outline-offset: 4px !important;
    border-radius: 2px !important;
}

/* Exclude mega menu dropdowns from header white text styles */
#mesa-header .mesa-header__menu .mega-menu,
#mesa-header .mesa-header__menu .mega-menu * {
    color: inherit;
}

#mesa-header .mesa-header__menu .mega-menu a,
.mesa-header__menu .mega-menu a {
    color: var(--mesa-black, #08050C) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

#mesa-header .mesa-header__menu .mega-menu a:hover,
.mesa-header__menu .mega-menu a:hover {
    color: var(--mesa-lime, #CEFE65) !important;
}

/* Current/active menu item */
#mesa-header .mesa-header__menu .current-menu-item > a,
#mesa-header .mesa-header__menu .current_page_item > a,
.mesa-header__menu .current-menu-item > a,
.mesa-header__menu .current_page_item > a {
    color: var(--mesa-lime, #CEFE65) !important;
    border-color: var(--mesa-lime, #CEFE65);
}

/* Hide navigation on mobile */
@media (max-width: 850px) {
    #mesa-header .mesa-header__nav,
    .mesa-header__nav {
        display: none !important;
    }
}

/* ===========================================
   ACTIONS SECTION (Icons)
   =========================================== */
#mesa-header .mesa-header__actions,
.mesa-header .mesa-header__actions,
.mesa-header__actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--icon-gap) !important;
    margin-inline-start: auto !important;
    flex-shrink: 0 !important;
    /* Reset grid positioning from old styles */
    grid-column: unset !important;
    justify-self: unset !important;
    flex-direction: row !important;
}

/* ===========================================
   ACTION BUTTONS (Search, User, Cart)
   =========================================== */
#mesa-header .mesa-header__action,
.mesa-header .mesa-header__action,
.mesa-header__action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--mesa-white, #FFFFFF) !important;
    position: relative !important;
    transition: color var(--header-transition) !important;
    flex-direction: row !important;
}

#mesa-header .mesa-header__action:hover,
.mesa-header__action:hover {
    color: var(--mesa-lime, #CEFE65) !important;
}

.mesa-header__action:focus-visible {
    outline: 2px solid var(--mesa-lime, #CEFE65) !important;
    outline-offset: 4px !important;
    border-radius: 2px !important;
}

/* Link variant (for user icon) */
a.mesa-header__action {
    text-decoration: none !important;
}

/* ===========================================
   ICON STYLING
   SVG icons use currentColor for CSS color control
   =========================================== */
#mesa-header .mesa-header__action-icon,
.mesa-header .mesa-header__action-icon,
.mesa-header__action-icon {
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    left: 0 !important;
    color: inherit !important;
    transition: color var(--header-transition) !important;
}

.mesa-header__action-icon svg {
    width: 100% !important;
    height: 100% !important;
}

/* Hover color change - lime green */
#mesa-header .mesa-header__action:hover,
.mesa-header .mesa-header__action:hover,
.mesa-header__action:hover {
    color: var(--mesa-lime, #CEFE65) !important;
}

#mesa-header .mesa-header__action:hover .mesa-header__action-icon,
.mesa-header__action:hover .mesa-header__action-icon {
    color: var(--mesa-lime, #CEFE65) !important;
}

/* ===========================================
   CART BADGE
   =========================================== */
#mesa-header .mesa-header__cart-badge,
.mesa-header .mesa-header__cart-badge,
.mesa-header__cart-badge {
    position: absolute !important;
    top: -6px !important;
    inset-inline-end: -6px !important;
    right: -6px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    background-color: var(--mesa-lime, #CEFE65) !important;
    color: var(--mesa-black, #08050C) !important;
    font-size: 11px !important;
    font-weight: var(--font-bold, 700) !important;
    line-height: 18px !important;
    text-align: center !important;
    border-radius: 9px !important;
    pointer-events: none !important;
}

/* Hide badge when count is 0 */
.mesa-header__cart-badge:empty,
.mesa-header__cart-badge[data-count="0"] {
    display: none !important;
}

/* ===========================================
   HAMBURGER MENU (Mobile)
   =========================================== */
#mesa-header .mesa-header__hamburger,
.mesa-header .mesa-header__hamburger,
.mesa-header__hamburger {
    display: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    margin-inline-start: 16px !important;
}

.mesa-header__hamburger-line {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background-color: var(--mesa-white, #FFFFFF) !important;
    border-radius: 1px !important;
    transition: all var(--header-transition) !important;
}

/* Active state (X) */
.mesa-header__hamburger.is-active .mesa-header__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}

.mesa-header__hamburger.is-active .mesa-header__hamburger-line:nth-child(2) {
    opacity: 0 !important;
}

.mesa-header__hamburger.is-active .mesa-header__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}

/* Show hamburger on mobile */
@media (max-width: 850px) {
    #mesa-header .mesa-header__hamburger,
    .mesa-header .mesa-header__hamburger,
    .mesa-header__hamburger {
        display: flex !important;
    }
}

.mesa-header__hamburger:focus-visible {
    outline: 2px solid var(--mesa-lime, #CEFE65) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* ===========================================
   SEARCH FORM INTEGRATION (FiboSearch)
   When search icon is clicked, expand form
   =========================================== */
.mesa-header__search-form {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background-color: var(--mesa-black, #08050C);
    padding: 16px var(--header-padding-inline);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--header-transition);
    z-index: -1;
}

.mesa-header__search-form.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ===========================================
   MOBILE RESPONSIVE ADJUSTMENTS
   HTML order: Hamburger | Logo | Nav (hidden) | Actions
   RTL visual: Hamburger (right) | Logo (center) | Cart (left)
   =========================================== */
@media (max-width: 850px) {
    /* Main row: flex with space-between for hamburger ↔ actions */
    #mesa-header .mesa-header__main,
    header#mesa-header .mesa-header__main {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
    }

    /* Logo — absolutely centered */
    #mesa-header .mesa-header__logo,
    .mesa-header .mesa-header__logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1 !important;
    }

    #mesa-header .mesa-header__logo img,
    .mesa-header .mesa-header__logo img {
        width: 100px !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Hide user icon on mobile */
    #mesa-header .mesa-header__action--user {
        display: none !important;
    }

    /* Hamburger: no extra margin, now standalone outside actions */
    #mesa-header .mesa-header__hamburger,
    .mesa-header .mesa-header__hamburger {
        margin-inline-start: 0 !important;
    }
}

/* ===========================================
   TABLET ADJUSTMENTS
   =========================================== */
@media (max-width: 1024px) and (min-width: 850px) {
    #mesa-header .mesa-header__menu > li > a {
        padding: 23px 10px !important;
    }

    .mesa-header__menu a {
        font-size: 14px;
    }
}

/* ===========================================
   RTL SPECIFIC OVERRIDES
   =========================================== */
html[dir="rtl"] .mesa-header__actions {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .mesa-header,
    .mesa-header__action,
    .mesa-header__action-icon,
    .mesa-header__hamburger-line,
    .mesa-header__menu a,
    .mesa-header__search-form {
        transition: none;
    }

}

/* Screen reader text */
.mesa-header .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for all interactive elements */
.mesa-header *:focus-visible {
    outline: 2px solid var(--mesa-lime, #CEFE65);
    outline-offset: 2px;
}

/* ===========================================
   HIGH CONTRAST MODE
   =========================================== */
@media (prefers-contrast: high) {
    .mesa-header {
        border-bottom: 1px solid var(--mesa-white, #FFFFFF);
    }

    .mesa-header__menu a:hover,
    .mesa-header__action:hover {
        text-decoration: underline;
    }
}