/**
 * Fabrixa — Custom Mobile/Tablet Navigation
 *
 * Replaces BrightHub's mobile menu (which we disabled in theme options
 * 2026-05-06 because it was causing layout bugs we couldn't fully tame).
 *
 * Active on viewports ≤ 1280px. Desktop nav (BrightHub primary menu)
 * stays as-is at ≥ 1281px.
 *
 * Brand tokens: #18202D navy · #E95121 coral · #F0F0F0 cream · #9AA4B2 slate
 */

/* ============================================================
 * 1. SHOW/HIDE LOGIC — viewport-driven
 * ============================================================ */

/* The custom mobile bar is hidden by default (renders for everyone in
 * source). Show only on ≤1280px viewports. */
.fbx-mnav-bar,
.fbx-mnav-drawer,
.fbx-mnav-backdrop {
    display: none;
}

@media (max-width: 1280px) {
    .fbx-mnav-bar { display: flex; }
    /* Drawer/backdrop only render when actually opened (JS removes hidden) */
    .fbx-mnav-drawer:not([hidden]),
    .fbx-mnav-backdrop:not([hidden]) {
        display: block;
    }

    /* Hide BrightHub's desktop header AND all its sticky/elementor
     * variants at this width — we're using our custom mobile bar.
     * BrightHub's mobile menu was already disabled in theme options;
     * this rule kills the desktop header that was leaking through at
     * tablet widths. */
    html body header:not(.fbx-mnav-bar),
    html body > header,
    html body header.pxl-header,
    html body header[class*="pxl-header"],
    html body header[class*="pxl-elementor"],
    html body .pxl-header,
    html body .pxl-header-wrap,
    html body .pxl-header-main,
    html body .pxl-header-mobile,
    html body .pxl-mobile-header,
    html body .pxl-header-elementor,
    html body .pxl-header-elementor-sticky,
    html body .pxl-elementor-header,
    html body .pxl-elementor-stickymenu,
    html body .pxl-stickymenu,
    html body .pxl-onepage-sticky,
    html body .elementor-location-header,
    html body [data-elementor-type="header"],
    html body div[data-elementor-type="header"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    /* Add top padding to body so content doesn't hide under our sticky bar.
     * EXCEPT: the first section on each page (the hero) should extend up
     * under the bar so its background image fills the viewport edge-to-edge,
     * matching the homepage's visual. The bar is opaque, so the bg image
     * showing behind it isn't visible — we just don't get an awkward
     * empty band between bar and hero. */
    body { padding-top: 64px !important; }
    body.admin-bar { padding-top: calc(64px + 32px) !important; }

    #pxl-main > .fbx-section:first-of-type {
        margin-top: -64px !important;
        padding-top: 104px !important; /* was 140px → 64px is now under bar */
    }
    /* For pages whose first section was already padding 0 (like the
     * homepage), don't add extra padding-top — keep them as-is. */
    #pxl-main > .fbx-section.fbx-hero:first-of-type {
        margin-top: -64px !important;
        padding-top: 80px !important;
    }
}

/* ============================================================
 * 2. TOP BAR
 * ============================================================ */
.fbx-mnav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 10px 16px;
    background: #18202D;
    border-bottom: 1px solid rgba(240, 240, 240, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Push down for WP admin bar when logged in */
.admin-bar .fbx-mnav-bar { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .fbx-mnav-bar { top: 46px; }
}

.fbx-mnav-bar-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.fbx-mnav-bar-logo img,
.fbx-mnav-bar-logo svg {
    width: auto;
    height: 36px;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

/* Hamburger — three coral bars (high specificity so BrightHub's button
 * styles can't render this as a solid coral block) */
html body button.fbx-mnav-toggle,
.fbx-mnav-bar button.fbx-mnav-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    width: 32px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}
.fbx-mnav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #E95121;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
    transform-origin: center;
}
.fbx-mnav-toggle:hover span,
.fbx-mnav-toggle:focus-visible span {
    background: #FF6535;
}
/* Animate to X when open */
.fbx-mnav-toggle.is-open span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}
.fbx-mnav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.fbx-mnav-toggle.is-open span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

/* ============================================================
 * 3. BACKDROP
 * ============================================================ */
.fbx-mnav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9995;
    background: rgba(11, 18, 32, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.fbx-mnav-backdrop.is-open {
    opacity: 1;
}

/* ============================================================
 * 4. DRAWER
 * ============================================================ */
.fbx-mnav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 480px);
    z-index: 9999;
    background: #18202D;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    flex-direction: column;
}
.fbx-mnav-drawer.is-open {
    transform: translateX(0);
}

/* Push drawer below admin bar when logged in */
.admin-bar .fbx-mnav-drawer { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .fbx-mnav-drawer { top: 46px; }
}

.fbx-mnav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(240, 240, 240, 0.08);
    flex-shrink: 0;
}
.fbx-mnav-drawer-logo img,
.fbx-mnav-drawer-logo svg {
    width: auto;
    height: 40px;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* High specificity + !important to beat BrightHub's global button styling
 * which was making this button render as a solid coral block. */
html body button.fbx-mnav-close,
.fbx-mnav-drawer button.fbx-mnav-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #F0F0F0 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    text-shadow: none !important;
}
html body button.fbx-mnav-close:hover,
html body button.fbx-mnav-close:focus-visible {
    background: rgba(233, 81, 33, 0.12) !important;
    color: #E95121 !important;
}
html body button.fbx-mnav-close svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important;
}

/* ============================================================
 * 5. NAV LIST (cascading menu)
 * ============================================================ */
.fbx-mnav-nav {
    flex: 1 1 auto;
    padding: 12px 0;
}
.fbx-mnav-list,
.fbx-mnav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fbx-mnav-list li {
    list-style: none;
    margin: 0;
    border-bottom: 1px solid rgba(240, 240, 240, 0.06);
    position: relative;
}
.fbx-mnav-list li:last-child {
    border-bottom: 0;
}
.fbx-mnav-list a {
    display: block;
    padding: 16px 56px 16px 20px;
    color: #F0F0F0;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.fbx-mnav-list a:hover,
.fbx-mnav-list a:focus-visible,
.fbx-mnav-list .current-menu-item > a,
.fbx-mnav-list .current-menu-ancestor > a {
    color: #E95121;
    background: rgba(233, 81, 33, 0.06);
}

/* Sub-menu cascade — display:none/block toggle (more reliable than
 * max-height: 0; the phantom strip we were seeing under the language
 * switcher was the collapsed container's background still rendering). */
html body .fbx-mnav-list .sub-menu {
    display: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.2);
}
html body .fbx-mnav-list li.is-open > .sub-menu {
    display: block !important;
    padding: 4px 0 !important;
}
.fbx-mnav-list .sub-menu a {
    padding-left: 36px;
    font-size: 0.9375rem;
    font-weight: 400;
}
.fbx-mnav-list .sub-menu .sub-menu a {
    padding-left: 56px;
    font-size: 0.875rem;
    color: #B8C0CC;
}

/* Expand chevron — appended via JS to .menu-item-has-children.
 * High specificity + !important to beat BrightHub's global button
 * styling which was rendering this as a full-width coral block. */
html body .fbx-mnav-list button.fbx-mnav-expand,
html body .fbx-mnav-drawer button.fbx-mnav-expand {
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: 48px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #E95121 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
    text-shadow: none !important;
    border-radius: 0 !important;
    z-index: 2 !important;
}
html body button.fbx-mnav-expand svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}
html body .fbx-mnav-list li.is-open > button.fbx-mnav-expand svg {
    transform: rotate(180deg) !important;
}
html body button.fbx-mnav-expand:hover,
html body button.fbx-mnav-expand:focus-visible {
    background: rgba(233, 81, 33, 0.08) !important;
    color: #FF6535 !important;
}

/* Sub-menu chevrons match their narrower row */
html body .fbx-mnav-list .sub-menu button.fbx-mnav-expand {
    height: 50px !important;
}

/* ============================================================
 * 6. LANGUAGE SWITCHER INSIDE DRAWER
 *
 * Hard override of the desktop pill styling from language-switcher.css.
 * That stylesheet wraps the lang switcher in a coral pill at >=1025px;
 * inside our drawer (which can show up to 1280px wide), the pill leaks
 * in. Reset everything aggressively here.
 * ============================================================ */
html body .fbx-mnav-list .fabrixa-lang-switcher {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
}
html body .fbx-mnav-list .fabrixa-lang-switcher > a {
    /* Reset pill */
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #9AA4B2 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    /* Match other menu rows */
    display: block !important;
    padding: 14px 56px 14px 20px !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none !important;
}
/* Kill the ::after content from desktop pill (which displays "EN ▾") */
html body .fbx-mnav-list .fabrixa-lang-switcher > a::after {
    content: none !important;
    display: none !important;
}
/* Show the actual menu item label (which the desktop pill hides via font-size:0) */
html body .fbx-mnav-list .fabrixa-lang-switcher > a > .pxl-menu__text,
html body .fbx-mnav-list .fabrixa-lang-switcher > a > span {
    display: inline !important;
    font-size: inherit !important;
}

/* Sub-menu (the language list) */
html body .fbx-mnav-list .fabrixa-lang-switcher .sub-menu {
    background: rgba(0, 0, 0, 0.25) !important;
    position: static !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
html body .fbx-mnav-list .fabrixa-lang-switcher .sub-menu li {
    list-style: none !important;
    border-bottom: 1px solid rgba(240, 240, 240, 0.04) !important;
}
html body .fbx-mnav-list .fabrixa-lang-switcher .sub-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px 14px 36px !important;
    color: #F0F0F0 !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
html body .fbx-mnav-list .fabrixa-lang-switcher .sub-menu a:hover,
html body .fbx-mnav-list .fabrixa-lang-switcher .sub-menu a:focus-visible {
    background: rgba(233, 81, 33, 0.08) !important;
    color: #E95121 !important;
}
/* Highlight current language */
html body .fbx-mnav-list .fabrixa-lang-switcher .sub-menu li.current-language > a,
html body .fbx-mnav-list .fabrixa-lang-switcher .sub-menu li.trp-current-language > a {
    color: #E95121 !important;
    font-weight: 600 !important;
}
/* Flags */
html body .fbx-mnav-list .fabrixa-lang-switcher img,
html body .fbx-mnav-list .fabrixa-lang-switcher .trp-flag-image {
    display: inline-block !important;
    width: 22px !important;
    height: auto !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
 * 7. CTA AT BOTTOM OF DRAWER
 * ============================================================ */
.fbx-mnav-footer {
    padding: 20px;
    border-top: 1px solid rgba(240, 240, 240, 0.08);
    flex-shrink: 0;
}
.fbx-mnav-cta {
    display: block;
    padding: 14px 20px;
    background: #E95121;
    color: #FFFFFF !important;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, transform 0.15s ease;
}
.fbx-mnav-cta:hover,
.fbx-mnav-cta:focus-visible {
    background: #FF6535;
    transform: translateY(-1px);
}

/* ============================================================
 * 8. BODY SCROLL LOCK when drawer is open
 *
 * `overflow: hidden` alone doesn't reliably stop scroll on mobile
 * (especially iOS Safari). Use position: fixed + width: 100% — the
 * scroll position is preserved by JS storing it in inline `top`.
 * ============================================================ */
body.fbx-mnav-locked {
    position: fixed !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
html.fbx-mnav-locked,
html:has(body.fbx-mnav-locked) {
    overflow: hidden !important;
}

/* ============================================================
 * 9. REDUCED MOTION respect
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .fbx-mnav-drawer,
    .fbx-mnav-backdrop,
    .fbx-mnav-toggle span,
    .fbx-mnav-list .sub-menu,
    .fbx-mnav-expand,
    .fbx-mnav-expand svg {
        transition: none !important;
    }
}