/**
 * ClixLogix New Navbar Styles
 * Matches the design reference from internal-assets/clixlogix-homepage 3/
 * Uses existing site font (DM Sans) and brand colors (#ff6a1c)
 * 
 * @version 1.0.0
 */

/* ===========================
   CSS Variables (mapped to existing brand)
   =========================== */
:root {
    --clx-orange: #ff6a1c;
    --clx-orange-hover: #e5560c;
    --clx-dark: #1c1e21;
    --clx-text: #898D90;
    --clx-white: #ffffff;
    --clx-border: #E8E8E8;
    --clx-max-w: 1140px;
}

/* ===========================
   HIDE OLD HEADER STYLES
   =========================== */
.ax-header.header-style-4 .header-wrapper {
    display: none !important;
}
.ax-header.header-style-4 .header_top {
    display: none !important;
}
.ax-header.header-style-4 {
    padding: 0 !important;
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
}
.popup-mobile-manu {
    display: none !important;
}

/* ===========================
   TOP BAR
   =========================== */
.clx-top-bar {
    padding: 4px 0;
    border-bottom: 1px solid var(--clx-border);
    background: #F8F8F8;
}

.clx-top-bar .clx-container {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    align-items: center;
}

.clx-top-bar a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    /* WCAG: was #B0B0B0 on #F8F8F8 = 1.92:1 contrast (fails AA).
       #4A4A4A on #F8F8F8 = 8.6:1 (passes AA + AAA). */
    color: #4A4A4A;
    letter-spacing: -0.42px;
    line-height: 28px;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s;
}

.clx-top-bar a:hover {
    color: var(--clx-orange);
}

.clx-top-bar img {
    width: 20px;
    height: 14px;
    object-fit: contain;
}

.clx-top-bar .clx-wa-icon {
    width: 20px;
    height: 20px;
    min-height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* ===========================
   MAIN NAV
   =========================== */
.clx-nav {
    padding: 14px 0;
    position: relative;
    z-index: 100;
    background: var(--clx-white);
    transition: box-shadow 0.3s;
    overflow: visible;
}

/* JS adds .clx-nav-fixed when scrolled past top bar */
.clx-nav.clx-nav-fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* Spacer to prevent content jump when nav becomes fixed */
.clx-nav-spacer {
    display: none;
}

.clx-nav-spacer.active {
    display: block;
}

/* Top bar default flow */
.clx-top-bar {
    position: relative;
    z-index: 101;
}

/* Fixed/minimal top bar when scrolled — sits above the fixed nav */
body .clx-top-bar.clx-top-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 4px 0 !important;
    background: #F8F8F8 !important;
    border-bottom: 1px solid var(--clx-border) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
    z-index: 1001 !important;       /* sits above the fixed nav (1000) */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: none;
}
body .clx-top-bar.clx-top-fixed .clx-container {
    display: flex !important;
    /* Match the default state's flex-end so the content doesn't "jump"
       from right-aligned to left-aligned at the moment the bar
       transitions to sticky. WhatsApp now sits to the LEFT of the
       cluster (visible on the cluster's left edge); IN + US clip on
       the left if anything overflows at narrow widths — acceptable
       trade-off vs the prior layout-jump. */
    justify-content: flex-end !important;
    gap: 16px !important;
    align-items: center !important;
}
body .clx-nav.clx-nav-fixed {
    z-index: 1000 !important;       /* real headroom — Elementor sections
                                       carrying stray z-index: 9999 via the
                                       global `header { z-index: 9999 }` rule
                                       can otherwise paint over the fixed nav */
}
.clx-top-bar.clx-top-fixed a {
    font-size: 12px;
    line-height: 22px;
}
.clx-top-bar.clx-top-fixed img {
    width: 16px;
    height: 12px;
}
.clx-top-bar.clx-top-fixed .clx-wa-icon {
    width: 16px;
    height: 16px;
    min-height: 16px;
}

.clx-nav.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.clx-container {
    max-width: var(--clx-max-w);
    margin: 0 auto;
    padding: 0 20px;
}

.clx-nav .clx-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clx-logo {
    display: flex;
    align-items: center;
}

.clx-logo img,
.clx-nav .clx-logo img,
.clx-logo a img {
    height: 55px !important;
    width: auto !important;
    max-width: none !important;
}

/* ===========================
   NAV LINKS
   =========================== */
.clx-nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.clx-nav-links .nav-item {
    position: relative;
}

.clx-nav-links .nav-item > a {
    font-size: 16px;
    font-weight: 700;
    color: #2E3137;
    letter-spacing: -0.42px;
    line-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: color 0.3s;
    white-space: nowrap;
    position: relative;
}

/* Slant '//' icon on hover — CSS only, matching HTML design reference */
.clx-nav-links .nav-item > a::before {
    content: '//';
    color: var(--clx-orange);
    font-weight: 700;
    font-style: italic;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.25s, width 0.25s;
    display: inline-block;
    white-space: nowrap;
}

.clx-nav-links .nav-item:hover > a::before {
    opacity: 1;
    width: 0.7em;
}

.clx-nav-links .nav-item > a:hover {
    color: var(--clx-orange);
}

.clx-nav-links .nav-item.active > a {
    color: var(--clx-orange);
}

.clx-nav-links .nav-item:hover .nd {
    transform: rotate(90deg);
}

/* Dropdown caret */
.nd {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--clx-orange);
    border-right: 0;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

/* ===========================
   MEGA MENU
   =========================== */
.mega-menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: auto;
    max-height: 80vh;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0px 29px 26px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s 0.15s, visibility 0.25s 0.15s;
    z-index: 200;
    display: flex;
    flex-wrap: nowrap;
    padding: 0 max(20px, calc((100vw - var(--clx-max-w)) / 2));
}

.clx-nav-links .nav-item:hover .mega-menu,
.clx-nav-links .nav-item.mega-open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* Invisible hover bridge — prevents dropdown from closing 
   when mouse moves from nav item to mega menu panel */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: transparent;
}

/* ===========================
   MEGA MENU — LEFT BANNER
   =========================== */
.mm-banner-left {
    position: relative;
    flex: 0 0 auto;
    width: min(315px, 22vw);
    align-self: stretch;
    overflow: hidden;
}

.mm-banner-left img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ===========================
   MEGA MENU — GRID
   =========================== */
.mm-grid {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
    padding: 32px 24px;
    align-content: start;
    overflow-y: auto;
}

/* ===========================
   MEGA MENU — ITEMS
   =========================== */
.clx-nav-links .mm-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    align-items: stretch;
    font-size: 14px;
    line-height: 1.4;
}

.clx-nav-links .mm-item:hover,
.clx-nav-links .mm-item.active {
    background: #FFF;
}

.clx-nav-links .mm-item:hover .mm-title,
.clx-nav-links .mm-item.active .mm-title {
    color: #FA4900;
}

.clx-nav-links .mm-item:hover .mm-icon img,
.clx-nav-links .mm-item.active .mm-icon img {
    filter: brightness(0) saturate(100%) invert(38%) sepia(74%) saturate(4051%) hue-rotate(9deg) brightness(101%) contrast(107%);
}

.mm-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.mm-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: filter 0.2s;
}

.mm-info {
    flex: 1;
}

.mm-title {
    font-weight: 700;
    font-size: 14px;
    color: #142533;
    line-height: 20px;
    letter-spacing: -0.28px;
    transition: color 0.2s;
    margin-bottom: 2px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mm-desc {
    font-weight: 400;
    font-size: 12px;
    color: #898D90;
    line-height: 16px;
    letter-spacing: 0;
    margin-left: 28px;
}

/* ===========================
   MEGA MENU — RIGHT BANNER
   =========================== */
.mm-banner {
    position: relative;
    flex: 0 0 auto;
    width: min(315px, 22vw);
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mm-banner img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

.clx-nav-links .mm-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: #FA4900;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    letter-spacing: -0.48px;
    transition: background 0.2s;
    text-decoration: none;
}

.clx-nav-links .mm-cta:hover {
    background: var(--clx-orange);
    color: #fff;
}

.clx-nav-links .mm-cta::after {
    content: '→';
    font-size: 16px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.clx-nav-links .mm-cta:hover::after {
    transform: translateX(5px);
}

/* Hide "All" link in mega menu on desktop (only show on mobile) */
.mm-item-all {
    display: none !important;
}

/* ===========================
   SERVICES MEGA MENU VARIANT
   =========================== */
.services-mega .svc-left-banner {
    background: #fff;
}

.services-mega .svc-left-banner img {
    object-fit: cover;
    object-position: center center;
}

.services-mega .svc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px 20px !important;
    padding: 32px 32px !important;
    align-content: start;
}

.services-mega .svc-item .mm-title {
    font-weight: 700;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: -0.28px !important;
    color: #142533;
}

.services-mega .svc-item .mm-desc {
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0;
    color: #898D90;
    margin-left: 28px !important;
}

.services-mega .svc-item .mm-icon {
    width: 20px !important;
    height: 20px !important;
}

/* Inline-SVG variant of .mm-icon (used by the synthetic "All Services" tile).
   Inherits currentColor so the existing hover/active treatment lights it up
   in brand orange without needing the filter trick used for PNG icons. */
.mm-icon-svg { color: #142533; }
.mm-icon-svg svg { width: 100%; height: 100%; display: block; }
.clx-nav-links .mm-item:hover .mm-icon-svg,
.clx-nav-links .mm-item.active .mm-icon-svg {
    color: #ff6a1c;
}

/* "All Services" synthetic tile — inherits the same hover treatment as
   every other .mm-item: transparent at rest, .mm-item:hover paints
   title + icon orange. The earlier permanent peach-bg + orange-left
   border treatment made the tile look constantly selected, conflicting
   with the desktop pattern of "highlight only on hover/active". */

/* =========================================================
   Mobile drawer (.side-nav) — active page indicator
   The parent theme defines --color-primary as a pale peach and only
   highlights current_page_item state on items WITH sub-menus. When the
   drawer is open, the user expects to see which page they're on
   regardless of whether it has children, in our brand orange. Match the
   parent theme's full descendant chain so we win the cascade.
   ========================================================= */
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current-menu-item > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current_page_item > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current-menu-parent > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current-menu-ancestor > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current_page_parent > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current_page_ancestor > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.menu-item-has-children.current_page_item > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.menu-item-has-children.current-menu-item > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.menu-item-has-children.current_page_ancestor > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.menu-item-has-children.current-menu-ancestor > a {
    color: #ff6a1c !important;
    position: relative;
}
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current-menu-item > a::after,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current_page_item > a::after,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.menu-item-has-children.current_page_item > a::after,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.menu-item-has-children.current_page_ancestor > a::after {
    color: #ff6a1c !important;
}
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current-menu-item > a::before,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation li.current_page_item > a::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 4px;
    height: 22px;
    background: #ff6a1c;
    border-radius: 2px;
    transform: translateY(-50%);
    opacity: 1 !important;
}
/* Sub-menu (services / about) child links light up when their page is current. */
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation .sub-menu li.current-menu-item > a,
body .side-nav .side-nav-inner .side-nav-content ul.main-navigation .sub-menu li.current_page_item > a {
    color: #ff6a1c !important;
    font-weight: 700;
}

.services-mega .svc-item .mm-icon img {
    width: 20px !important;
    height: 20px !important;
}

.services-mega .svc-right-banner {
    background: #FFF8F5;
    overflow: hidden;
}

.services-mega .svc-right-banner .svc-right-link {
    display: flex;
    flex: 1 1 0%;
    min-height: 0;
}

.services-mega .svc-right-banner .svc-right-link img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    transition: opacity 0.2s;
}

.services-mega .svc-right-banner .svc-right-link:hover img {
    opacity: 0.92;
}

/* ===========================
   MOBILE HAMBURGER
   =========================== */
.clx-mob-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    z-index: 1001;
    position: relative;
    overflow: visible;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.clx-mob-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    min-height: 2px !important;
    background: #142533 !important;
    margin: 0 !important;
    transition: all 0.3s ease;
    border-radius: 2px;
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
}

/* Three horizontal bars — positioned vertically */
.clx-mob-toggle span:nth-child(1) {
    top: 10px;
}

.clx-mob-toggle span:nth-child(2) {
    top: 18px;
}

.clx-mob-toggle span:nth-child(3) {
    top: 26px;
}

/* Active state — clean X icon */
.clx-mob-toggle.active span:nth-child(1) {
    top: 18px;
    transform: translateX(-50%) rotate(45deg);
    width: 22px !important;
    height: 2px !important;
    min-height: 2px !important;
}

.clx-mob-toggle.active span:nth-child(2) {
    opacity: 0;
    width: 0 !important;
}

.clx-mob-toggle.active span:nth-child(3) {
    top: 18px;
    transform: translateX(-50%) rotate(-45deg);
    width: 22px !important;
    height: 2px !important;
    min-height: 2px !important;
}

/* ===========================
   MOBILE NAV DRAWER
   =========================== */
.clx-mob-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;                 /* full-screen mobile overlay — must sit
                                      above the fixed nav (1000) and the fixed
                                      top bar (1001) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.clx-mob-nav.open {
    opacity: 1;
    visibility: visible;
}

.clx-mob-nav-inner {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 110px 24px 24px;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.clx-mob-nav.open .clx-mob-nav-inner {
    right: 0;
}

.clx-mob-nav-inner .mn-item {
    border-bottom: 1px solid #f0f0f0;
}

.mn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    color: #142533;
    text-decoration: none;
    transition: color 0.2s;
}

.mn-link:hover {
    color: var(--clx-orange);
}

.mn-arrow {
    font-size: 18px;
    transition: transform 0.3s;
    display: inline-block;
    color: #999;
}

.mn-has-sub.open .mn-arrow {
    transform: rotate(90deg);
    color: var(--clx-orange);
}

.mn-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mn-has-sub.open .mn-sub {
    max-height: 600px;
}

.mn-sub a {
    display: block;
    padding: 10px 0 10px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #555;
    text-decoration: none;
    border-top: 1px solid #f7f7f7;
    transition: color 0.2s;
}

.mn-sub a:hover {
    color: var(--clx-orange);
}

/* ===========================
   RESPONSIVE — LAPTOP (≤1440px)
   =========================== */
@media (max-width: 1440px) {
    :root {
        --clx-max-w: 1140px;
    }
    .clx-top-bar {
        padding: 6px 0;
    }
    .clx-top-bar a {
        font-size: 12px;
        line-height: 32px;
        gap: 5px;
    }
    .clx-top-bar img {
        width: 16px;
        height: 12px;
    }
    .clx-top-bar .clx-container {
        gap: 16px;
    }
    .clx-nav-links {
        gap: 20px !important;
    }
    .clx-nav-links a {
        font-size: 13px !important;
    }
}
@media (max-width: 1280px) {
    :root {
        --clx-max-w: 1140px;
    }
    .clx-top-bar {
        padding: 4px 0;
    }
    .clx-top-bar a {
        font-size: 11px;
        line-height: 28px;
        gap: 4px;
    }
    .clx-top-bar img {
        width: 14px;
        height: 10px;
    }
    .clx-top-bar .clx-container {
        gap: 12px;
    }
    .clx-nav-links {
        gap: 14px !important;
    }
    .clx-nav-links a {
        font-size: 12px !important;
    }
    .clx-logo img,
    .clx-nav .clx-logo img,
    .clx-logo a img {
        height: 32px !important;
    }
    .clx-logo {
        margin-left: 60px;
    }
    /* Scale mega menu for 13" */
    .mega-menu {
        height: auto;
        max-height: 80vh;
        padding: 0 max(15px, calc((100vw - var(--clx-max-w)) / 2));
    }
    .mm-banner-left {
        width: min(220px, 18vw);
        height: auto;
        align-self: stretch;
    }
    .mm-banner-left img {
        height: 100% !important;
    }
    .mm-grid {
        height: auto;
        max-height: 70vh;
        overflow-y: auto;
    }
    .mm-banner {
        width: min(220px, 18vw);
        height: auto;
        align-self: stretch;
    }
    .mm-banner img {
        height: 100% !important;
    }
    .mm-title {
        font-size: 12px;
        line-height: 16px;
        gap: 6px;
    }
    .mm-desc {
        font-size: 10px;
        line-height: 14px;
        margin-left: 24px;
    }
    .mm-icon {
        width: 16px;
        height: 16px;
    }
    .mm-icon img {
        width: 16px;
        height: 16px;
    }
    .clx-nav-links .mm-item {
        padding: 6px 4px;
        font-size: 12px;
    }
    .mm-left-banner {
        min-width: 180px !important;
        max-width: 180px !important;
    }
    .mm-left-banner h3 {
        font-size: 18px !important;
    }
    .mm-left-banner p {
        font-size: 11px !important;
    }
    .services-mega .svc-grid {
        padding: 24px 20px !important;
        gap: 4px 16px !important;
    }
    .services-mega .svc-right-banner {
        align-self: stretch;
    }
}

/* ===========================
   RESPONSIVE — MOBILE (≤768px)
   =========================== */
@media (max-width: 768px) {
    .clx-nav-links {
        display: none !important;
    }

    /* Cancel the 60px left-margin inherited from the ≤1280 rule — on
       mobile the logo sat far right of the container leaving too much
       empty space on its left. Reset to 0 so it sits aligned with the
       container's left padding (which already provides 20px gutter). */
    .clx-logo {
        margin-left: 0 !important;
    }

    .clx-mob-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .clx-mob-nav {
        display: block;
    }

    /* Mobile top bar — smaller sizes to prevent overlap */
    .clx-top-bar {
        padding: 6px 0;
    }

    .clx-top-bar .clx-container {
        justify-content: center;
        gap: 6px 16px;
        flex-wrap: nowrap;
    }

    .clx-top-bar a {
        font-size: 12px;
        gap: 5px;
        line-height: 28px;
        white-space: nowrap;
        min-height: 36px;
    }

    .clx-top-bar img {
        width: 16px;
        height: 12px;
    }

    .clx-top-bar .clx-wa-icon {
        width: 16px;
        height: 16px;
        min-height: 16px;
    }
}

@media (max-width: 480px) {
    .clx-top-bar {
        padding: 5px 0;
    }

    .clx-top-bar .clx-container {
        justify-content: center;
        gap: 4px 10px;
        /* allow items to wrap to a second line instead of clipping the
           rightmost item off-screen on very narrow viewports (<360 etc). */
        flex-wrap: wrap;
        padding: 0 8px;
    }

    /* Drop flag icons at ≤480 to claw back ~24px per item — the `+1` /
       `+91` prefix already conveys country. WhatsApp icon stays so the
       chat affordance remains visually distinct. */
    .clx-top-bar a img:not(.clx-wa-icon) {
        display: none !important;
    }
    /* Reduce gap between flag space and number now that the flag is gone */
    .clx-top-bar a {
        gap: 0 !important;
    }

    .clx-top-bar a {
        font-size: 11px;
        gap: 3px;
        line-height: 24px;
        letter-spacing: -0.3px;
        min-height: 32px;
        white-space: nowrap;
    }

    .clx-top-bar img {
        width: 14px;
        height: 10px;
    }

    .clx-top-bar .clx-wa-icon {
        width: 14px;
        height: 14px;
        min-height: 14px;
    }
}

@media (max-width: 380px) {
    .clx-top-bar .clx-container {
        gap: 2px;
        padding: 0 4px;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .clx-top-bar a {
        font-size: 10px;
        gap: 2px;
        letter-spacing: -0.4px;
        min-height: 30px;
    }

    .clx-top-bar img {
        width: 12px;
        height: 9px;
    }

    .clx-top-bar .clx-wa-icon {
        width: 12px;
        height: 12px;
        min-height: 12px;
    }
}

/* ===========================
   RESPONSIVE — DESKTOP (≥769px)
   =========================== */
@media (min-width: 769px) {
    .clx-mob-toggle {
        display: none !important;
    }

    .clx-mob-nav {
        display: none !important;
    }
}

/* Make sure new nav doesn't conflict with page wrapper margin */
.clx-nav + .ax-header,
.clx-top-bar + .clx-nav + .ax-header {
    margin-top: 0;
}

/* Fix for header-transparent pages */
.header-transparent .clx-top-bar {
    background: var(--clx-white);
}

.header-transparent .clx-nav {
    background: var(--clx-white);
}

/* Note: position:sticky doesn't work here because the parent theme
   sets overflow:hidden on body which CSS spec converts to auto,
   creating a scroll container. Using JS-driven fixed position instead. */

/* =========================================================
   Off-canvas drawer overflow guard
   The parent theme positions .side-nav with `right: -100vw`, which is
   meant to push it fully offscreen. In some browser/zoom/scrollbar
   combinations (notably Chrome on macOS with classic scrollbars) the
   drawer's left edge bleeds back into the viewport and renders as a
   black sliver on the right side of the page (the drawer's #090312
   background). Push it further offscreen when it's NOT opened — the
   parent JS adds .side-nav-opened to <html> when toggling — and let
   the parent's transition handle the slide-in.
   ========================================================= */
html:not(.side-nav-opened) .side-nav {
  right: -120vw !important;
  pointer-events: none;
}

/* =========================================================
   Mobile top-bar — horizontal scroll for the three phone numbers so
   they stay legible at iPhone widths instead of clipping or stacking.
   ========================================================= */
@media (max-width: 991px) {
  .clx-top-bar .clx-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .clx-top-bar .clx-container::-webkit-scrollbar {
    display: none;
  }
  .clx-top-bar a {
    font-size: 12px;
    padding-inline: 8px;
    flex-shrink: 0;
  }
}