/* ============================================================
   LEXORA HEADER & NAVIGATION REVAMP
   Refined polish · clean white desktop header · right-side
   slide-in mobile drawer. Brand-matched (navy + teal).
   CSS-only, scoped to header selectors. Rides the theme's
   existing `.active` toggle on `.pxl-header-menu`.
   No menu items / markup / JS changed.
   ============================================================ */

:root {
    --lx-navy: #09243C;
    --lx-teal: #1F9C8A;
    --lx-teal-soft: #f3faf8;
    --lx-hairline: #eef1f4;
    --lx-ink: #1d2b3a;

    /* Brand-matched line icons (Lucide), used as CSS masks so they
       inherit a recolorable fill. Same stroke style as the hamburger. */
    --lx-ic-user: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='12'%20cy='7'%20r='4'/%3E%3C/svg%3E");
    --lx-ic-cart: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8'%20cy='21'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='21'%20r='1'/%3E%3Cpath%20d='M2.05%202.05h2l2.66%2012.42a2%202%200%200%200%202%201.58h9.78a2%202%200%200%200%201.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}

/* ============================================================
   CART / ACCOUNT ICON SWAP  (desktop + mobile)
   Replace the FontAwesome glyphs with crisp brand line icons.
   Markup stays as <i class="fas fa-user|fa-shopping-cart">; we
   kill the glyph (font-size:0) and paint a masked icon instead,
   so it recolours navy -> teal like everything else.
   ============================================================ */
#pxl-header-elementor .pxl-menu-primary i.fa-user,
#pxl-header-elementor .pxl-menu-primary i.fa-shopping-cart,
#pxl-header-mobile .pxl-menu-primary i.fa-user,
#pxl-header-mobile .pxl-menu-primary i.fa-shopping-cart {
    display: inline-block;
    width: 22px;
    height: 22px;
    font-size: 0 !important;
    line-height: 0;
    vertical-align: middle;
    background-color: var(--lx-navy);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.2s ease;
}
#pxl-header-elementor .pxl-menu-primary i.fa-user,
#pxl-header-mobile .pxl-menu-primary i.fa-user {
    -webkit-mask-image: var(--lx-ic-user);
    mask-image: var(--lx-ic-user);
}
#pxl-header-elementor .pxl-menu-primary i.fa-shopping-cart,
#pxl-header-mobile .pxl-menu-primary i.fa-shopping-cart {
    -webkit-mask-image: var(--lx-ic-cart);
    mask-image: var(--lx-ic-cart);
}
#pxl-header-elementor .pxl-menu-primary > li > a:hover i.fa-user,
#pxl-header-elementor .pxl-menu-primary > li > a:hover i.fa-shopping-cart,
#pxl-header-mobile .pxl-menu-primary > li > a:hover i.fa-user,
#pxl-header-mobile .pxl-menu-primary > li > a:hover i.fa-shopping-cart {
    background-color: var(--lx-teal);
}

/* ============================================================
   1. DESKTOP HEADER  (Elementor header: main + sticky bars)
   ============================================================ */

/* Clean white bar (replaces flat pale-gray #f5f7fa on the
   Elementor column) for both the main and the sticky header. */
#pxl-header-elementor .pxl-header-elementor-main .elementor-element-populated,
#pxl-header-elementor .pxl-header-elementor-sticky .elementor-element-populated {
    background-color: #ffffff !important;
}

/* Hairline under the main bar; soft shadow on the sticky bar
   (the sticky bar only appears on scroll, so its shadow reads
   as the "elevated on scroll" state). */
#pxl-header-elementor .pxl-header-elementor-main {
    border-bottom: 1px solid var(--lx-hairline);
}
#pxl-header-elementor .pxl-header-elementor-sticky .elementor-element-populated {
    box-shadow: 0 6px 24px rgba(9, 36, 60, 0.08);
    border-bottom: 1px solid var(--lx-hairline);
}

/* The header bar should read as one clean white surface. Individual
   widgets carry their own gray backgrounds (logo: gray color; nav
   menu: a gray linear-gradient), which showed as mismatched patches
   once the bar went white. Neutralise widget-container backgrounds
   so the white column shows through uniformly. */
#pxl-header-elementor .pxl-header-elementor-main .elementor-widget-container,
#pxl-header-elementor .pxl-header-elementor-sticky .elementor-widget-container {
    background-color: transparent !important;
    background-image: none !important;
}

/* Vertically centre the icon-only nav items (account / cart /
   language) in the tall menu row. They render in a 90px line-box
   where `vertical-align:middle` lands ~8px low; nudge them up so
   their centre matches the text links. */
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary i.fa-user,
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary i.fa-shopping-cart,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary i.fa-user,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary i.fa-shopping-cart {
    position: relative;
    top: -8px;
}
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li.menu-item-gtranslate img,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li.menu-item-gtranslate img {
    position: relative;
    top: -2px;
}

/* --- Primary nav links --- */
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li > a,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li > a {
    color: var(--lx-navy);
    position: relative;
    transition: color 0.22s ease;
}

/* Animated centred teal underline */
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li > a::after,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--lx-teal);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li:hover > a::after,
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li.current-menu-item > a::after,
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li.current_page_item > a::after,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li:hover > a::after,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li.current-menu-item > a::after,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li.current_page_item > a::after {
    transform: scaleX(1);
}

/* Hover + active colour → brand teal (was #59b88f) */
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li:hover > a,
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li.current-menu-item > a,
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li.current_page_item > a,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li:hover > a,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li.current-menu-item > a,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li.current_page_item > a {
    color: var(--lx-teal) !important;
}

/* --- Dropdown (.sub-menu) → rounded white card --- */
#pxl-header-elementor .pxl-menu-primary .sub-menu {
    background: #ffffff !important;
    border: 1px solid var(--lx-hairline);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(9, 36, 60, 0.12);
    padding: 8px;
    overflow: hidden;
}
#pxl-header-elementor .pxl-menu-primary .sub-menu li a {
    border-radius: 8px;
    color: var(--lx-navy);
    transition: background 0.2s ease, color 0.2s ease;
}
#pxl-header-elementor .pxl-menu-primary .sub-menu li:hover > a,
#pxl-header-elementor .pxl-menu-primary .sub-menu li.current-menu-item > a {
    background: var(--lx-teal-soft);
    color: var(--lx-teal) !important;
}

/* --- Right-side icon cluster (search widget + cart/account/
   language menu items): consistent navy → teal hover --- */
#pxl-header-elementor .pxl-header-elementor-main .elementor-widget-pxl_icon_search i,
#pxl-header-elementor .pxl-header-elementor-sticky .elementor-widget-pxl_icon_search i,
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li > a i,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li > a i {
    color: var(--lx-navy);
    transition: color 0.2s ease;
}
#pxl-header-elementor .pxl-header-elementor-main .elementor-widget-pxl_icon_search:hover i,
#pxl-header-elementor .pxl-header-elementor-sticky .elementor-widget-pxl_icon_search:hover i,
#pxl-header-elementor .pxl-header-elementor-main .pxl-menu-primary > li > a:hover i,
#pxl-header-elementor .pxl-header-elementor-sticky .pxl-menu-primary > li > a:hover i {
    color: var(--lx-teal);
}


/* ============================================================
   2. MOBILE HEADER BAR  (#pxl-header-mobile)
   ============================================================ */

/* White bar + hairline */
#pxl-header-mobile #pxl-header-main {
    background: #ffffff;
    border-bottom: 1px solid var(--lx-hairline);
}

/* Hamburger: render a crisp SVG "menu" icon on the button and hide
   the theme's 3 <span> bars. The span bars rendered unevenly across
   devices (2px lines + subpixel rounding looked broken); an SVG is
   pixel-consistent at any DPI/width. Click handler is unaffected
   (it's bound to #pxl-nav-mobile). */
#pxl-header-mobile #pxl-nav-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
}
#pxl-header-mobile #pxl-nav-mobile .pxl-nav-mobile-button {
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2309243C'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cline%20x1='3'%20y1='6'%20x2='21'%20y2='6'/%3E%3Cline%20x1='3'%20y1='12'%20x2='21'%20y2='12'/%3E%3Cline%20x1='3'%20y1='18'%20x2='21'%20y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
    transition: opacity 0.2s ease;
}
#pxl-header-mobile #pxl-nav-mobile:hover .pxl-nav-mobile-button {
    opacity: 0.7;
}
#pxl-header-mobile #pxl-nav-mobile .pxl-icon-line {
    display: none !important;
}


/* ============================================================
   3. MOBILE DRAWER  → slide-in panel from the right
   Open state = .pxl-header-menu.active (theme JS toggle)
   ============================================================ */

#pxl-header-mobile .pxl-header-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(86vw, 340px) !important;
    max-width: 340px !important;
    height: 100% !important;
    background: #ffffff !important;
    /* Above the floating widgets (WhatsApp z 99999999, quiz z 999999)
       so they never overlay the open drawer. */
    z-index: 999999999 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -12px 0 40px rgba(9, 36, 60, 0.18);
    visibility: visible;
}
#pxl-header-mobile .pxl-header-menu.active {
    transform: translateX(0) !important;
}

/* Dimmed navy backdrop (sibling after the menu in markup) */
#pxl-header-mobile .pxl-header-menu-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 36, 60, 0.55);
    z-index: 999999998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease;
}
#pxl-header-mobile .pxl-header-menu.active ~ .pxl-header-menu-backdrop {
    opacity: 1;
    visibility: visible;
}

/* Floating widgets (WhatsApp + "Take our quiz" bubble) live in the
   page's ROOT stacking context with very high z-index, so they paint
   above the drawer (which is trapped in the header's stacking context)
   no matter how high we set the drawer's z-index. Hide them while the
   drawer is open. :has() keys off the real `.active` open state and
   re-evaluates live as the menu toggles. */
body:has(#pxl-header-mobile .pxl-header-menu.active) .ht-ctc,
body:has(#pxl-header-mobile .pxl-header-menu.active) .ht-ctc-chat,
body:has(#pxl-header-mobile .pxl-header-menu.active) #rh-greeting,
body:has(#pxl-header-mobile .pxl-header-menu.active) .rh-greeting {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Inner padding */
#pxl-header-mobile .pxl-header-menu-scroll {
    padding: 26px 24px 40px !important;
}

/* Mobile logo inside the panel */
#pxl-header-mobile .pxl-header-menu .pxl-logo-mobile {
    margin-bottom: 22px;
}
#pxl-header-mobile .pxl-header-menu .pxl-logo-mobile img {
    max-height: 38px;
    width: auto;
}

/* --- Branded circular close (X) --- */
#pxl-header-mobile .pxl-header-menu .pxl-menu-close {
    position: absolute;
    top: 22px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lx-navy) !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-close:hover {
    background: var(--lx-teal) !important;
    transform: rotate(90deg);
}
/* redraw a clean white X regardless of theme glyph */
#pxl-header-mobile .pxl-header-menu .pxl-menu-close::before,
#pxl-header-mobile .pxl-header-menu .pxl-menu-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- Search field refinement --- */
#pxl-header-mobile .pxl-header-menu form,
#pxl-header-mobile .pxl-header-menu .search-form {
    margin-bottom: 18px;
}
#pxl-header-mobile .pxl-header-menu input[type="search"],
#pxl-header-mobile .pxl-header-menu input[type="text"] {
    background: #ffffff;
    border: 1px solid #e6e9ee !important;
    border-radius: 10px;
    height: 46px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#pxl-header-mobile .pxl-header-menu input[type="search"]:focus,
#pxl-header-mobile .pxl-header-menu input[type="text"]:focus {
    border-color: var(--lx-teal) !important;
    box-shadow: 0 0 0 3px rgba(31, 156, 138, 0.12);
    outline: none;
}

/* --- Menu rows --- */
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary {
    margin: 0;
    padding: 0;
    list-style: none;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li {
    border-bottom: 1px solid var(--lx-hairline);
    position: relative;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li > a {
    display: block;
    padding: 14px 0;
    color: var(--lx-navy);
    font-weight: 600;
    font-size: 16px;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li > a:hover {
    color: var(--lx-teal);
    padding-left: 4px;
}

/* Active item → brand teal (was #ffcc53) + teal indicator bar.
   Bar is drawn inside the link padding so the panel's
   overflow:auto can't clip it. */
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary .current-menu-item > a,
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary .current_page_item > a {
    color: var(--lx-teal) !important;
    padding-left: 14px;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li.current-menu-item > a::before,
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li.current_page_item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    border-radius: 3px;
    background: var(--lx-teal);
}

/* --- Sub-menus inside the drawer --- */
#pxl-header-mobile .pxl-header-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px 14px;
    border-left: 2px solid var(--lx-teal-soft);
}
#pxl-header-mobile .pxl-header-menu .sub-menu > li > a {
    display: block;
    padding: 10px 0;
    color: var(--lx-ink);
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease;
}
#pxl-header-mobile .pxl-header-menu .sub-menu > li > a:hover,
#pxl-header-mobile .pxl-header-menu .sub-menu > li.current-menu-item > a {
    color: var(--lx-teal);
}

/* --- Submenu toggle chevron (theme appends .pxl-menu-toggle) --- */
#pxl-header-mobile .pxl-header-menu .pxl-menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--lx-navy);
    border-bottom: 2px solid var(--lx-navy);
    transform: rotate(45deg);
    transition: transform 0.25s ease, border-color 0.2s ease;
    margin-top: -3px;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-toggle.active::before {
    transform: rotate(-135deg);
    margin-top: 3px;
    border-color: var(--lx-teal);
}

/* --- Bottom icon items (account / cart / language) ---
   Present them as a tidy horizontal cluster at the foot of the
   menu rather than lone icons stacked among the text rows. */
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li:has(.fa-user),
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li:has(.fa-shopping-cart),
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li.menu-item-gtranslate {
    display: inline-flex;
    align-items: center;
    width: auto;
    border-bottom: none !important;
    vertical-align: middle;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li:has(.fa-user) > a,
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li:has(.fa-shopping-cart) > a,
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li.menu-item-gtranslate > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 10px;
    background: var(--lx-teal-soft);
}
/* start the cluster on its own line, with breathing room above */
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li:has(.fa-user) {
    margin: 20px 10px 0 0;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li:has(.fa-shopping-cart) {
    margin: 20px 10px 0 0;
}
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li.menu-item-gtranslate {
    margin-top: 20px;
}
/* language flag sizing inside its pill */
#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li.menu-item-gtranslate > a img {
    width: 22px;
    height: 22px;
    border-radius: 3px;
}