/* =============================================================
   ZXM Navigation Menu — Frontend Styles v1.2.3
   Coordinates with ZXM Global CSS v7.4.
   All per-instance colours/sizes driven by CSS custom properties
   injected inline from PHP per widget instance.

   CHANGELOG v1.2.3
   * Line 85 — Desktop nav link text-transform changed from
     uppercase to none. Nav items now display in sentence case
     as entered in Appearance → Menus.
   ============================================================= */


/* ---------------------------------------------------------------
   01 — BASE CONTAINER
--------------------------------------------------------------- */

.zxm-nav {
    position: relative;
    z-index: 9000;
    /* Font stack matches ZXM global — inherits from body */
    font-family: var(--font-body, 'Instrument Sans', sans-serif);
    /* Isolate from Elementor stacking contexts */
    isolation: isolate;
}

/* Sticky mode */
.zxm-nav--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    transition:
        transform  var(--transition-slow, 300ms ease),
        background var(--transition-slow, 300ms ease),
        box-shadow var(--transition-slow, 300ms ease);
}

.zxm-nav--sticky.is-scrolled {
    background: var(--zxm-sticky-bg, var(--color-midnight, #0A1628));
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.32);
}

/* is-hidden removed — nav always stays visible when sticky */


/* ---------------------------------------------------------------
   02 — DESKTOP EXPANDED NAV
   Shown above pill breakpoint via inline media query from PHP.
   Default hidden — PHP injects the correct breakpoint rule.
--------------------------------------------------------------- */

.zxm-nav__desktop {
    display: none; /* overridden by inline breakpoint style */
    align-items: center;
    gap: var(--zxm-nav-spacing, 32px);
    padding: 0 var(--container-pad, 80px);
    background: var(--zxm-nav-bg, transparent);
    min-height: 72px;
    width: 100%;
}

/* ---------------------------------------------------------------
   03 — DESKTOP NAV LINKS & TOGGLE BUTTONS
   Critical: buttons must match anchor typography exactly.
   Browser UA stylesheet gives buttons a different font-family
   and font-size — both must be explicitly reset.
--------------------------------------------------------------- */

.zxm-nav__list {
    display: flex;
    align-items: center;
    gap: var(--zxm-nav-spacing, 32px);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    margin-left: 48px;
}

/* Shared rules for links AND toggle buttons — must be identical */
.zxm-nav__desktop .zxm-nav__link,
.zxm-nav__desktop .zxm-nav__item-toggle {
    /* Font — explicit, not inherited, to defeat browser button UA stylesheet */
    font-family:     var(--font-display, 'Bricolage Grotesque', sans-serif) !important;
    font-size:       var(--zxm-nav-font-size, 15px) !important;
    font-weight:     400 !important;
    letter-spacing:  var(--tracking-label, 0.12em) !important;
    text-transform:  none !important;
    line-height:     1.2 !important;
    /* Colour */
    color:           var(--zxm-nav-text, var(--color-offwhite, #F0F2F5)) !important;
    /* Reset */
    text-decoration: none;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0;
    margin:          0;
    /* Layout */
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    white-space:     nowrap;
    position:        relative;
    /* Motion */
    transition:      color var(--transition-base, 200ms ease);
}

/* Hover underline draw-in */
.zxm-nav__desktop .zxm-nav__link::after,
.zxm-nav__desktop .zxm-nav__item-toggle::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--zxm-nav-hover, var(--color-bronze, #B8860B));
    transition: width var(--transition-base, 200ms ease);
}

.zxm-nav__desktop .zxm-nav__link:hover,
.zxm-nav__desktop .zxm-nav__item-toggle:hover,
.zxm-nav__desktop .zxm-nav__link:focus-visible,
.zxm-nav__desktop .zxm-nav__item-toggle:focus-visible {
    color: var(--zxm-nav-hover, var(--color-bronze, #B8860B)) !important;
    outline: none;
}

.zxm-nav__desktop .zxm-nav__link:hover::after,
.zxm-nav__desktop .zxm-nav__item-toggle:hover::after {
    width: 100%;
}

.zxm-nav__desktop .zxm-nav__link[aria-current="page"],
.zxm-nav__desktop .zxm-nav__link.current {
    color: var(--zxm-nav-hover, var(--color-bronze, #B8860B)) !important;
}

/* Active page — persistent bronze underline */
.zxm-nav__desktop .zxm-nav__link[aria-current="page"]::after,
.zxm-nav__desktop .zxm-nav__link.current::after {
    width: 100% !important;
}

/* Active page with children — underline on the toggle button */
.zxm-nav__desktop .zxm-nav__item-toggle[aria-current="page"]::after,
.zxm-nav__desktop .zxm-nav__item-toggle.current::after {
    width: 100% !important;
}

/* Dropdown arrow */
.zxm-nav__arrow {
    display:        inline-block;
    width:          0;
    height:         0;
    border-left:    5px solid transparent;
    border-right:   5px solid transparent;
    border-top:     5px solid currentColor;
    flex-shrink:    0;
    vertical-align: middle;
    margin-left:    8px;
    transition:     transform var(--transition-base, 200ms ease);
}

/* Larger arrow for overlay and slide panel contexts */
.open-overlay .zxm-nav__arrow,
.open-slide-left .zxm-nav__arrow,
.open-slide-right .zxm-nav__arrow,
.open-dropdown .zxm-nav__arrow {
    border-left-width:  10px;
    border-right-width: 10px;
    border-top-width:   10px;
    margin-left:        16px;
}

.zxm-nav__item-toggle[aria-expanded="true"] .zxm-nav__arrow {
    transform: rotate(180deg);
}


/* ---------------------------------------------------------------
   04 — DESKTOP SUBMENUS (dropdown)
--------------------------------------------------------------- */

.zxm-nav__item {
    position: relative;
}

/* Level 1 dropdown — hidden by default, revealed via is-open class */
.zxm-nav__desktop .zxm-nav__submenu {
    position:         absolute;
    top:              calc(100% + 8px);
    left:             0;
    min-width:        220px;
    background:       var(--color-slate, #1C3553);
    border-top:       3px solid var(--color-bronze, #B8860B);
    border-radius:    0 0 var(--radius, 3px) var(--radius, 3px);
    box-shadow:       var(--shadow-card, 0 2px 16px rgba(0,0,0,0.24));
    list-style:       none;
    margin:           0;
    padding:          var(--space-2, 8px) 0;
    z-index:          100;
    /* Transition in from slightly above */
    opacity:          0;
    transform:        translateY(-6px);
    transition:
        opacity   200ms ease,
        transform 200ms ease;
    pointer-events: none;
}

/* Revealed state */
.zxm-nav__desktop .zxm-nav__submenu.is-open {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Level 2 — grandchild: offset right */
.zxm-nav__desktop .zxm-nav__submenu .zxm-nav__submenu {
    top:       -3px;
    left:      100%;
    border-top: 3px solid var(--color-bronze, #B8860B);
    /* Slide in from left rather than top */
    opacity:   0;
    transform: translateX(-6px);
    transition:
        opacity   200ms ease,
        transform 200ms ease;
}

.zxm-nav__desktop .zxm-nav__submenu .zxm-nav__submenu.is-open {
    opacity:   1;
    transform: translateX(0);
}

/* Submenu links — Instrument Sans, not display font */
.zxm-nav__desktop .zxm-nav__submenu .zxm-nav__link,
.zxm-nav__desktop .zxm-nav__submenu .zxm-nav__item-toggle {
    font-family:    var(--font-body, 'Instrument Sans', sans-serif) !important;
    font-size:      var(--text-small, 0.9375rem) !important;
    font-weight:    400 !important;
    letter-spacing: var(--tracking-normal, 0em) !important;
    text-transform: none !important;
    color:          var(--color-offwhite, #F0F2F5) !important;
    padding:        10px 20px;
    display:        flex;
    width:          100%;
    text-align:     left;
    border-radius:  0;
    transition:     color var(--transition-base, 200ms ease),
                    background-color var(--transition-base, 200ms ease);
}

.zxm-nav__desktop .zxm-nav__submenu .zxm-nav__link::after,
.zxm-nav__desktop .zxm-nav__submenu .zxm-nav__item-toggle::after {
    display: none; /* no underline draw-in on dropdown items */
}

.zxm-nav__desktop .zxm-nav__submenu .zxm-nav__link:hover,
.zxm-nav__desktop .zxm-nav__submenu .zxm-nav__item-toggle:hover {
    color:            var(--color-bronze, #B8860B) !important;
    background-color: rgba(184, 134, 11, 0.08);
}


/* ---------------------------------------------------------------
   05 — CTA BUTTON
--------------------------------------------------------------- */

.zxm-nav__cta {
    display:        inline-flex;
    align-items:    center;
    padding:        var(--zxm-cta-pv, 10px) var(--zxm-cta-ph, 24px);
    background:     var(--zxm-cta-bg, transparent);
    color:          var(--zxm-cta-text, var(--color-bronze, #B8860B)) !important;
    border:         1px solid var(--zxm-cta-border, var(--color-bronze, #B8860B));
    border-radius:  var(--zxm-cta-radius, var(--radius, 3px));
    font-family:    var(--font-mono, 'DM Mono', monospace) !important;
    font-size:      var(--text-cta, 0.8125rem) !important;
    font-weight:    400 !important;
    letter-spacing: var(--tracking-cta, 0.12em) !important;
    text-transform: lowercase;
    text-decoration: none;
    white-space:    nowrap;
    flex-shrink:    0;
    margin-left:    auto;
    transition:     background var(--transition-base, 200ms ease),
                    color       var(--transition-base, 200ms ease);
}

.zxm-nav__cta:hover,
.zxm-nav__cta:focus-visible {
    background: var(--zxm-cta-text, var(--color-bronze, #B8860B));
    color:      var(--color-midnight, #0A1628) !important;
    outline:    none;
}


/* ---------------------------------------------------------------
   06 — LOGO
--------------------------------------------------------------- */

.zxm-nav__logo-link {
    flex-shrink: 0;
    line-height: 0;
    display:     block;
}

.zxm-nav__logo,
.zxm-nav__logo-link img {
    display:    block !important;
    max-height: 36px;
    width:      auto;
    height:     auto;
}


/* ---------------------------------------------------------------
   07 — PILL TRIGGER
   Default hidden — shown via inline breakpoint style from PHP.
--------------------------------------------------------------- */

.zxm-nav__pill {
    display:       none; /* overridden by inline breakpoint style */
    align-items:   center;
    gap:           10px;
    padding:       var(--zxm-pill-pv, 10px) var(--zxm-pill-ph, 20px);
    background:    var(--zxm-pill-bg, var(--color-midnight, #0A1628));
    color:         var(--zxm-pill-text, var(--color-offwhite, #F0F2F5));
    border-radius: var(--zxm-pill-radius, 50px);
    cursor:        pointer;
    user-select:   none;
    position:      fixed;
    top:           16px;
    z-index:       9001;
    transition:    box-shadow var(--transition-base, 200ms ease);
}

.pill-left  .zxm-nav__pill { left:  var(--space-4, 16px); }
.pill-right .zxm-nav__pill { right: var(--space-4, 16px); }

.zxm-nav__pill:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.32);
}

/* Hamburger icon */
.zxm-nav__hamburger {
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            5px;
    width:          22px;
    flex-shrink:    0;
}

.zxm-nav__bar {
    display:          block;
    width:            22px;
    height:           2px;
    background:       var(--zxm-pill-text, var(--color-offwhite, #F0F2F5));
    border-radius:    1px;
    transform-origin: center;
    transition:
        transform var(--transition-base, 200ms ease),
        opacity   var(--transition-fast, 150ms ease);
}

/* Hamburger → X when open */
.is-open .zxm-nav__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-open .zxm-nav__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.is-open .zxm-nav__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ---------------------------------------------------------------
   08 — OPEN PANEL (shared base)
--------------------------------------------------------------- */

.zxm-nav__panel {
    position:   fixed;
    z-index:    8999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.zxm-nav__panel-list {
    list-style: none;
    margin:     0;
    padding:    0;
}


/* ---------------------------------------------------------------
   09 — OPEN STYLE: OVERLAY (full-screen)
--------------------------------------------------------------- */

.open-overlay .zxm-nav__panel {
    inset:       0;
    background:  var(--zxm-overlay-bg, var(--color-midnight, #0A1628));
    display:     flex;
    flex-direction: column;
    justify-content: center;
    padding:     80px var(--container-pad, 80px) var(--space-9, 80px);
    animation:   zxmFadeIn var(--transition-slow, 300ms ease) forwards;
}

/* Top-level overlay items — large display type */
.open-overlay .zxm-nav__panel-list > .zxm-nav__item > .zxm-nav__link,
.open-overlay .zxm-nav__panel-list > .zxm-nav__item > .zxm-nav__item-toggle {
    font-family:     var(--font-display, 'Bricolage Grotesque', sans-serif) !important;
    font-size:       clamp(2rem, 5vw, 4rem) !important;
    font-weight:     700 !important;
    letter-spacing:  var(--tracking-tight, -0.01em) !important;
    text-transform:  none !important;
    line-height:     var(--leading-h1, 1.10) !important;
    color:           var(--zxm-overlay-text, var(--color-offwhite, #F0F2F5)) !important;
    padding:         var(--space-3, 12px) 0 !important;
    background:      none;
    border:          none;
    cursor:          pointer;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    width:           100%;
    text-align:      left;
    transition:      color var(--transition-base, 200ms ease);
}

.open-overlay .zxm-nav__panel-list > .zxm-nav__item > .zxm-nav__link:hover,
.open-overlay .zxm-nav__panel-list > .zxm-nav__item > .zxm-nav__item-toggle:hover {
    color: var(--zxm-overlay-accent, var(--color-bronze, #B8860B)) !important;
}

/* Child items in overlay — body font, muted */
.open-overlay .zxm-nav__panel .zxm-nav__submenu .zxm-nav__link,
.open-overlay .zxm-nav__panel .zxm-nav__submenu .zxm-nav__item-toggle {
    font-family:    var(--font-body, 'Instrument Sans', sans-serif) !important;
    font-size:      var(--text-body, 1.0625rem) !important;
    font-weight:    400 !important;
    letter-spacing: var(--tracking-normal, 0em) !important;
    text-transform: none !important;
    color:          var(--zxm-overlay-text, var(--color-offwhite, #F0F2F5)) !important;
    opacity:        0.7;
    padding:        var(--space-2, 8px) 0 var(--space-2, 8px) var(--space-6, 32px) !important;
    display:        flex;
    background:     none;
    border:         none;
    cursor:         pointer;
    text-align:     left;
    transition:     color var(--transition-base, 200ms ease), opacity var(--transition-base, 200ms ease);
}

.open-overlay .zxm-nav__panel .zxm-nav__submenu .zxm-nav__link:hover,
.open-overlay .zxm-nav__panel .zxm-nav__submenu .zxm-nav__item-toggle:hover {
    color:   var(--zxm-overlay-accent, var(--color-bronze, #B8860B)) !important;
    opacity: 1;
}

/* Grandchild in overlay — extra indent, smaller */
.open-overlay .zxm-nav__panel .zxm-nav__submenu .zxm-nav__submenu .zxm-nav__link,
.open-overlay .zxm-nav__panel .zxm-nav__submenu .zxm-nav__submenu .zxm-nav__item-toggle {
    font-size: var(--text-small, 0.9375rem) !important;
    padding-left: var(--space-9, 80px) !important;
    opacity: 0.55;
}

/* Submenus in overlay are inline, not positioned */
.open-overlay .zxm-nav__panel .zxm-nav__submenu {
    position:   static !important;
    box-shadow: none !important;
    background: transparent !important;
    border:     none !important;
    padding:    0 !important;
}

.open-overlay .zxm-nav__cta--panel {
    margin-top: var(--space-7, 48px);
    align-self: flex-start;
}


/* ---------------------------------------------------------------
   10 — OPEN STYLE: SLIDE-LEFT / SLIDE-RIGHT
--------------------------------------------------------------- */

.open-slide-left .zxm-nav__panel,
.open-slide-right .zxm-nav__panel {
    top:        0;
    bottom:     0;
    width:      min(360px, 85vw);
    background: var(--zxm-overlay-bg, var(--color-midnight, #0A1628));
    padding:    80px var(--space-6, 32px) var(--space-8, 64px);
    border-right: 1px solid rgba(184,134,11,0.15);
}

.open-slide-left  .zxm-nav__panel { left:  0; animation: zxmSlideInLeft  var(--transition-slow, 300ms ease) forwards; }
.open-slide-right .zxm-nav__panel { right: 0; animation: zxmSlideInRight var(--transition-slow, 300ms ease) forwards; }

.open-slide-left  .zxm-nav__panel .zxm-nav__link,
.open-slide-right .zxm-nav__panel .zxm-nav__link,
.open-slide-left  .zxm-nav__panel .zxm-nav__item-toggle,
.open-slide-right .zxm-nav__panel .zxm-nav__item-toggle {
    font-family:     var(--font-body, 'Instrument Sans', sans-serif) !important;
    font-size:       var(--text-body, 1.0625rem) !important;
    font-weight:     400 !important;
    letter-spacing:  var(--tracking-normal, 0em) !important;
    text-transform:  none !important;
    color:           var(--zxm-overlay-text, var(--color-offwhite, #F0F2F5)) !important;
    padding:         var(--space-4, 16px) 0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    width:           100%;
    background:      none;
    border:          none;
    border-bottom:   1px solid rgba(240,242,245,0.07);
    cursor:          pointer;
    text-align:      left;
    transition:      color var(--transition-base, 200ms ease);
}

.open-slide-left  .zxm-nav__panel .zxm-nav__link:hover,
.open-slide-right .zxm-nav__panel .zxm-nav__link:hover,
.open-slide-left  .zxm-nav__panel .zxm-nav__item-toggle:hover,
.open-slide-right .zxm-nav__panel .zxm-nav__item-toggle:hover {
    color: var(--zxm-overlay-accent, var(--color-bronze, #B8860B)) !important;
}

.open-slide-left  .zxm-nav__panel .zxm-nav__submenu,
.open-slide-right .zxm-nav__panel .zxm-nav__submenu {
    position:   static !important;
    box-shadow: none !important;
    background: transparent !important;
    border:     none !important;
    padding:    0 0 0 var(--space-5, 24px) !important;
}


/* ---------------------------------------------------------------
   11 — OPEN STYLE: DROPDOWN (below pill)
--------------------------------------------------------------- */

.open-dropdown .zxm-nav__panel {
    top:          calc(48px + 16px + 16px);
    width:        min(280px, 90vw);
    background:   var(--color-slate, #1C3553);
    border:       1px solid rgba(184,134,11,0.2);
    border-top:   3px solid var(--color-bronze, #B8860B);
    border-radius: 0 0 var(--radius, 3px) var(--radius, 3px);
    box-shadow:   var(--shadow-card, 0 2px 16px rgba(0,0,0,0.24));
    padding:      var(--space-2, 8px) 0;
    animation:    zxmFadeIn var(--transition-fast, 150ms ease) forwards;
}

.pill-left  .open-dropdown .zxm-nav__panel { left: var(--space-4, 16px); }
.pill-right .open-dropdown .zxm-nav__panel { right: var(--space-4, 16px); }

.open-dropdown .zxm-nav__panel .zxm-nav__link,
.open-dropdown .zxm-nav__panel .zxm-nav__item-toggle {
    font-family:     var(--font-body, 'Instrument Sans', sans-serif) !important;
    font-size:       var(--text-small, 0.9375rem) !important;
    font-weight:     400 !important;
    color:           var(--color-offwhite, #F0F2F5) !important;
    padding:         10px 20px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    width:           100%;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    transition:     color var(--transition-base, 200ms ease),
                    background-color var(--transition-base, 200ms ease);
}

.open-dropdown .zxm-nav__panel .zxm-nav__link:hover,
.open-dropdown .zxm-nav__panel .zxm-nav__item-toggle:hover {
    color:            var(--color-bronze, #B8860B) !important;
    background-color: rgba(184,134,11,0.08);
}

.open-dropdown .zxm-nav__panel .zxm-nav__submenu {
    position:   static !important;
    box-shadow: none !important;
    background: transparent !important;
    border:     none !important;
    padding:    0 0 0 var(--space-4, 16px) !important;
}


/* ---------------------------------------------------------------
   12 — BACKDROP
--------------------------------------------------------------- */

.zxm-nav__backdrop {
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.6);
    z-index:    8998;
    animation:  zxmFadeIn var(--transition-base, 200ms ease) forwards;
    backdrop-filter: blur(2px);
}


/* ---------------------------------------------------------------
   13 — KEYFRAMES
--------------------------------------------------------------- */

@keyframes zxmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes zxmSlideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

@keyframes zxmSlideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}


/* ---------------------------------------------------------------
   14 — ACCESSIBILITY
--------------------------------------------------------------- */

.zxm-nav *:focus-visible {
    outline:        2px solid var(--color-bronze, #B8860B);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .zxm-nav *,
    .zxm-nav__panel,
    .zxm-nav__backdrop {
        animation-duration:  0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}