/* =============================================================================
   OWW — NAVIGATION
   assets/css/nav.css | Version: 3.7.2

   Structure
   ─────────
   .oww-nav                     — fixed header shell
   .oww-nav__inner              — flex row: logo | desktop | actions | hamburger
   .oww-nav__logo               — logo mark + two-line wordmark
   .oww-nav__desktop            — desktop nav wrapper
   .oww-nav__list               — desktop link list
   .oww-nav__item               — individual nav item
   .oww-nav__item--has-mega     — items with dropdown mega panel
   .oww-nav__link               — desktop nav link
   .oww-nav__link--parent       — button trigger for mega menus
   .oww-nav__mega               — mega menu panel
   .oww-nav__mega--narrow       — single-column variant (Hire Me)
   .oww-nav__mega-backdrop      — dark backdrop behind open mega
   .oww-nav__mega-inner         — inner padding wrapper
   .oww-nav__mega-cols          — column grid
   .oww-nav__mega-col           — individual column
   .oww-nav__mega-col--feature  — editorial feature panel
   .oww-nav__mega-label         — column heading
   .oww-nav__mega-cards         — card container
   .oww-nav__card               — individual card link
   .oww-nav__card--muted        — coming-soon card variant
   .oww-nav__card-icon          — card SVG icon
   .oww-nav__card-content       — card text group
   .oww-nav__card-title         — card heading
   .oww-nav__card-desc          — card description
   .oww-nav__card-badge         — live/soon status badge
   .oww-nav__mega-feature       — educator feature panel
   .oww-nav__mega-cred          — credential pill
   .oww-nav__actions            — CTA button area
   .oww-nav__toggle             — hamburger (mobile)
   .oww-nav__drawer             — full-height mobile drawer
   .oww-nav__drawer-list        — mobile link list
   .oww-nav__drawer-toggle      — accordion trigger
   .oww-nav__drawer-sub         — accordion sub-list
   .oww-nav--scrolled           — JS: page scrolled > 60px
   .oww-nav--open               — JS: mobile drawer open
   .oww-nav--mega-open          — JS: any mega panel open
   ============================================================================= */


/* ─── NAV SHELL ─────────────────────────────────────────────────────────── */

.oww-nav {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    z-index:       var(--oww-z-nav, 10000);
    height:        var(--oww-nav-h, 72px);
    display:       flex;
    align-items:   center;
    background:    transparent;
    border-bottom: 1px solid transparent;
    transition:
        background    0.4s var(--oww-ease-out),
        border-color  0.4s var(--oww-ease-out),
        backdrop-filter 0.4s var(--oww-ease-out);
}

/* Amber accent line */
.oww-nav__accent {
    position: absolute;
    top:      0;
    left:     0;
    right:    0;
    height:   2px;
    background: linear-gradient(90deg, transparent 0%, var(--oww-amber) 25%, var(--oww-amber-deep) 75%, transparent 100%);
    opacity:  0.55;
    pointer-events: none;
    z-index:  1;
}

/* Scrolled state */
.oww-nav--scrolled {
    background:    rgba(10, 8, 6, 0.92);
    border-color:  var(--oww-bronze-20);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* WordPress admin bar — offset nav below it when visible (logged-in users) */
.admin-bar .oww-nav { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .oww-nav { top: 46px; }
}


/* ─── INNER ROW ─────────────────────────────────────────────────────────── */

.oww-nav__inner {
    display:         flex;
    align-items:     center;
    width:           100%;
    padding:         0 clamp(1rem, 3vw, 2.5rem);
    gap:             2rem;
    position:        relative;
    z-index:         2;
}


/* ─── LOGO ──────────────────────────────────────────────────────────────── */

.oww-nav__logo {
    display:         flex;
    align-items:     center;
    gap:             .6rem;
    text-decoration: none;
    flex-shrink:     0;
    color:           var(--oww-cream);
    transition:      opacity .2s var(--oww-ease-out);
}

.oww-nav__logo:hover { opacity: .8; }

.oww-nav__logo-mark {
    display:   block;
    width:     28px;
    height:    34px;
    color:     var(--oww-amber);
    flex-shrink: 0;
    overflow:  hidden;
}

.oww-nav__logo-mark svg,
.oww-nav__logo-mark img { width: 100%; height: 100%; }

.oww-nav__logo-img { border-radius: 4px; object-fit: contain; }

.oww-nav__logo-text {
    display:       flex;
    flex-direction: column;
    line-height:   1;
}

.oww-nav__logo-line {
    font-family:    var(--oww-ff-body);
    font-weight:    600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color:          var(--oww-cream);
}

.oww-nav__logo-line--top    { font-size: .6rem; opacity: .65; }
.oww-nav__logo-line--bottom { font-size: .75rem; }


/* ─── DESKTOP NAV ────────────────────────────────────────────────────────── */

.oww-nav__desktop {
    flex:           1;
    display:        none;
    justify-content: center;
}

@media (min-width: 1120px) {
    .oww-nav__desktop { display: flex; }
}

.oww-nav__list {
    display:     flex;
    align-items: center;
    gap:         .25rem;
    list-style:  none;
    padding:     0;
    margin:      0;
}

.oww-nav__item { position: relative; }

/*
 * Invisible hover bridge — the mega panel has top: calc(100% + 8px).
 * This pseudo-element spans that gap so the mouse can travel from the
 * trigger button to the panel without triggering mouseleave on the LI.
 * Combined with the 200ms JS close timer, hover feel is smooth.
 */
.oww-nav__item--has-mega::after {
    content:  '';
    position: absolute;
    bottom:   -12px;   /* reaches to panel top + extra */
    left:     -16px;
    right:    -16px;
    height:   12px;
    /* visually transparent — only extends the hover hit area */
}

/* ─── DESKTOP LINK ───────────────────────────────────────────────────────── */

.oww-nav__link {
    display:        flex;
    align-items:    center;
    gap:            .3rem;
    font-family:    var(--oww-ff-body);
    font-size:      .82rem;
    font-weight:    500;
    letter-spacing: .03em;
    color:          var(--oww-cream-muted);
    text-decoration: none;
    padding:        .5rem .75rem;
    border-radius:  6px;
    border:         none;
    background:     transparent;
    cursor:         pointer;
    white-space:    nowrap;
    line-height:    1;
    min-height:     38px;
    transition:     color .2s var(--oww-ease-out),
                    background .2s var(--oww-ease-out);
}

/* Belt-and-braces specificity — beats Elementor kit link colour */
.oww-nav .oww-nav__list .oww-nav__link { color: rgba(245, 240, 232, 0.65); }

.oww-nav__link:hover {
    color:      var(--oww-cream);
    background: rgba(245, 240, 232, .04);
}

.oww-nav__link.oww-nav--active {
    color: var(--oww-amber);
}

.oww-nav__link--parent { padding-right: .5rem; }

.oww-nav__arrow {
    width:      10px;
    height:     10px;
    flex-shrink: 0;
    transition: transform .25s var(--oww-ease-out);
}

.oww-nav__item--has-mega[data-mega-open] .oww-nav__arrow {
    transform: rotate(180deg);
}


/* ─── MEGA MENU PANEL ────────────────────────────────────────────────────── */

.oww-nav__mega {
    position:   absolute;
    top:        calc(100% + 8px);
    left:       50%;
    transform:  translateX(-50%) translateY(-6px);
    min-width:  640px;
    background: var(--oww-bg-raised);
    border:     1px solid var(--oww-bronze-20);
    border-radius: var(--oww-radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(205,165,100,.08);
    opacity:    0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity   .22s var(--oww-ease-out),
        transform .22s var(--oww-ease-out),
        visibility .22s;
    z-index:    var(--oww-z-nav);
}

/* Narrow single-column variant (Hire Me) */
.oww-nav__mega--narrow {
    min-width: 320px;
    left:      auto;
    right:     0;
    transform: translateY(-6px);
}

/* Open state */
.oww-nav__mega[data-open] {
    opacity:      1;
    visibility:   visible;
    pointer-events: auto;
    transform:    translateX(-50%) translateY(0);
}

.oww-nav__mega--narrow[data-open] {
    transform: translateY(0);
}

/* Top amber accent */
.oww-nav__mega::before {
    content:      '';
    position:     absolute;
    top:          0;
    left:         2rem;
    right:        2rem;
    height:       1px;
    background:   linear-gradient(90deg, transparent, var(--oww-amber-deep) 30%, var(--oww-amber) 50%, var(--oww-amber-deep) 70%, transparent);
    opacity:      .5;
    border-radius: 1px;
}

.oww-nav__mega-inner {
    padding: 1.5rem 1.5rem 1.25rem;
}

/* ─── MEGA COLUMNS ───────────────────────────────────────────────────────── */

.oww-nav__mega-cols { display: grid; gap: 1.5rem; }
.oww-nav__mega-cols--1 { grid-template-columns: 1fr; }
.oww-nav__mega-cols--2 { grid-template-columns: 1.2fr .8fr; }
.oww-nav__mega-cols--3 { grid-template-columns: repeat(3, 1fr); }

.oww-nav__mega-label {
    display:        block;
    font-family:    var(--oww-ff-body);
    font-size:      .58rem;
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin-bottom:  .75rem;
    padding-bottom: .5rem;
    border-bottom:  1px solid var(--oww-bronze-10);
}

.oww-nav__mega-cards { display: flex; flex-direction: column; gap: .25rem; }


/* ─── MEGA CARD ──────────────────────────────────────────────────────────── */

.oww-nav__card {
    display:         flex;
    align-items:     flex-start;
    gap:             .75rem;
    padding:         .6rem .65rem;
    border-radius:   var(--oww-radius-sm);
    text-decoration: none;
    transition:      background .18s var(--oww-ease-out);
    cursor:          pointer;
}

.oww-nav__card:hover {
    background: rgba(205,165,100,.07);
}

.oww-nav__card--muted { opacity: .55; }
.oww-nav__card--muted:hover { opacity: .85; }

.oww-nav__card-icon {
    width:      30px;
    height:     30px;
    flex-shrink: 0;
    color:      var(--oww-amber);
    background: rgba(205,165,100,.09);
    border:     1px solid var(--oww-bronze-10);
    border-radius: 6px;
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    5px;
    transition: background .18s var(--oww-ease-out);
}

.oww-nav__card:hover .oww-nav__card-icon {
    background: rgba(205,165,100,.18);
}

.oww-nav__card-icon svg { width: 100%; height: 100%; }

.oww-nav__card-content {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
    min-width:      0;
}

.oww-nav__card-title {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    flex-wrap:   wrap;
    font-family: var(--oww-ff-body);
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--oww-cream);
    line-height: 1.2;
}

.oww-nav__card-desc {
    font-size:   .73rem;
    color:       var(--oww-cream-muted);
    line-height: 1.4;
}

/* Status badges inside card titles */
.oww-nav__card-badge {
    font-size:      .55rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding:        .18em .55em;
    border-radius:  3px;
    background:     var(--oww-amber);
    color:          var(--oww-bg-dark);
    white-space:    nowrap;
}

.oww-nav__card-badge--soon {
    background:     transparent;
    color:          var(--oww-cream-faint);
    border:         1px solid rgba(245,240,232,.15);
}


/* ─── MEGA FEATURE PANEL ─────────────────────────────────────────────────── */

.oww-nav__mega-col--feature {
    background:    rgba(205,165,100,.04);
    border:        1px solid var(--oww-bronze-10);
    border-radius: var(--oww-radius-md);
    padding:       1.25rem;
}

.oww-nav__mega-feature { display: flex; flex-direction: column; gap: .6rem; height: 100%; }

.oww-nav__mega-feature-eyebrow {
    font-size:      .58rem;
    font-weight:    700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--oww-amber);
}

.oww-nav__mega-feature-title {
    font-family: var(--oww-ff-display);
    font-size:   1.1rem;
    font-weight: 400;
    color:       var(--oww-cream);
    margin:      0;
    line-height: 1.2;
}

.oww-nav__mega-feature-copy {
    font-size:   .8rem;
    color:       var(--oww-cream-muted);
    line-height: 1.6;
    margin:      0;
    flex:        1;
}

.oww-nav__mega-feature-creds {
    display:  flex;
    gap:      .35rem;
    flex-wrap: wrap;
}

.oww-nav__mega-cred {
    font-size:      .58rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--oww-amber-deep);
    background:     var(--oww-amber-faint);
    border:         1px solid var(--oww-bronze-10);
    border-radius:  4px;
    padding:        .2em .55em;
}

.oww-nav__mega-feature-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .35rem;
    font-family:     var(--oww-ff-body);
    font-size:       .75rem;
    font-weight:     600;
    letter-spacing:  .04em;
    color:           var(--oww-amber);
    text-decoration: none;
    padding:         .55em 1em;
    background:      rgba(205,165,100,.1);
    border:          1px solid var(--oww-bronze-20);
    border-radius:   var(--oww-radius-sm);
    transition:      background .18s, border-color .18s;
    margin-top:      auto;
}

.oww-nav__mega-feature-btn:hover {
    background:   rgba(205,165,100,.18);
    border-color: var(--oww-amber-deep);
}

.oww-nav__mega-feature-btn svg {
    width: 12px; height: 12px; flex-shrink: 0;
}


/* ─── MEGA BACKDROP ──────────────────────────────────────────────────────── */
/*
 * Dark translucent overlay covering the page when a mega menu is open.
 * Positioned below the nav bar (top: nav height) so the nav stays visible.
 * Clicking it closes the active mega via oww-nav.js.
 */

.oww-nav__mega-backdrop {
    position:   fixed;
    top:        var(--oww-nav-h, 72px);
    left:       0;
    right:      0;
    bottom:     0;
    background: rgba(10, 8, 6, .5);
    backdrop-filter: blur(2px);
    z-index:    calc(var(--oww-z-nav) - 1);
    opacity:    0;
    pointer-events: none;
    transition: opacity .25s var(--oww-ease-out);
}

.oww-nav--mega-open .oww-nav__mega-backdrop {
    opacity:        1;
    pointer-events: auto;
}

.admin-bar .oww-nav__mega-backdrop { top: calc(var(--oww-nav-h) + 32px); }
@media screen and (max-width: 782px) {
    .admin-bar .oww-nav__mega-backdrop { top: calc(var(--oww-nav-h) + 46px); }
}


/* ─── ACTIONS (CTA) ─────────────────────────────────────────────────────── */

.oww-nav__actions {
    display:    none;
    flex-shrink: 0;
}

@media (min-width: 1120px) {
    .oww-nav__actions { display: flex; }
}

.oww-nav__cta {
    font-size:   .78rem;
    padding:     .55em 1.1em;
    min-height:  38px;
    white-space: nowrap;
}


/* ─── HAMBURGER ──────────────────────────────────────────────────────────── */

.oww-nav__toggle {
    display:         flex;
    flex-direction:  column;
    gap:             5px;
    padding:         10px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    margin-left:     auto;
    flex-shrink:     0;
}

@media (min-width: 1120px) {
    .oww-nav__toggle  { display: none !important; }  /* !important beats Elementor widget overrides */
}

.oww-nav__toggle-bar {
    display:       block;
    width:         22px;
    height:        1.5px;
    background:    var(--oww-cream-muted);
    border-radius: 2px;
    transition:    transform .3s var(--oww-ease-out),
                   opacity   .3s var(--oww-ease-out),
                   width     .3s var(--oww-ease-out);
}

.oww-nav--open .oww-nav__toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.oww-nav--open .oww-nav__toggle-bar:nth-child(2) { opacity: 0; width: 0; }
.oww-nav--open .oww-nav__toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ─── MOBILE DRAWER ──────────────────────────────────────────────────────── */

.oww-nav__overlay {
    display:        none;
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,.55);
    z-index:        calc(var(--oww-z-drawer, 9500) - 1);
}

.oww-nav--open .oww-nav__overlay { display: block; }

.oww-nav__drawer {
    position:   fixed;
    top:        0;
    right:      0;
    bottom:     0;
    width:      min(340px, 90vw);
    background: var(--oww-bg-raised);
    border-left: 1px solid var(--oww-bronze-20);
    z-index:    var(--oww-z-drawer, 9500);
    display:    flex;
    flex-direction: column;
    transform:  translateX(100%);
    transition: transform .35s var(--oww-ease-out);
    overflow-y: auto;
    overflow-x: hidden;
}

.oww-nav--open .oww-nav__drawer { transform: translateX(0); }

/* Drawer header */
.oww-nav__drawer-head {
    display:     flex;
    align-items: center;
    gap:         .6rem;
    padding:     1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--oww-bronze-10);
    flex-shrink: 0;
}

.oww-nav__drawer-icon {
    width:     24px;
    height:    30px;
    color:     var(--oww-amber);
    flex-shrink: 0;
}

.oww-nav__drawer-icon svg { width: 100%; height: 100%; }

.oww-nav__drawer-brand {
    font-family:    var(--oww-ff-body);
    font-size:      .72rem;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--oww-cream-muted);
}

/* Drawer list */
.oww-nav__drawer-list {
    flex:       1;
    list-style: none;
    padding:    .75rem 0;
    margin:     0;
    overflow-y: auto;
}

.oww-nav__drawer-item { position: relative; }

.oww-nav__drawer-link {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    width:       100%;
    padding:     .8rem 1.5rem;
    font-family: var(--oww-ff-body);
    font-size:   .95rem;
    font-weight: 500;
    color:       var(--oww-cream-muted);
    text-decoration: none;
    background:  transparent;
    border:      none;
    cursor:      pointer;
    text-align:  left;
    transition:  color .18s, background .18s;
}

.oww-nav__drawer-link:hover { color: var(--oww-cream); background: rgba(245,240,232,.03); }
.oww-nav__drawer-link.oww-nav--active { color: var(--oww-amber); }

.oww-nav__drawer-toggle { padding-right: 1.25rem; }

.oww-nav__drawer-chevron {
    width:      12px;
    height:     12px;
    flex-shrink: 0;
    transition: transform .25s var(--oww-ease-out);
}

.oww-nav__drawer-toggle[aria-expanded="true"] .oww-nav__drawer-chevron {
    transform: rotate(180deg);
}

/* Accordion sub-list */
.oww-nav__drawer-sub {
    list-style:   none;
    padding:      0;
    margin:       0;
    background:   rgba(0,0,0,.2);
    border-top:   1px solid var(--oww-bronze-10);
    border-bottom: 1px solid var(--oww-bronze-10);
    display:      none;
}

.oww-nav__drawer-sub--open,
.oww-nav__drawer-toggle[aria-expanded="true"] + .oww-nav__drawer-sub {
    display: block;
}

.oww-nav__drawer-sublink {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .65rem 1.5rem .65rem 2.25rem;
    font-family:     var(--oww-ff-body);
    font-size:       .85rem;
    color:           var(--oww-cream-muted);
    text-decoration: none;
    transition:      color .15s;
}

.oww-nav__drawer-sublink:hover { color: var(--oww-cream); }
.oww-nav__drawer-sublink--muted { opacity: .55; }

.oww-nav__drawer-soon {
    font-size:      .55rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--oww-cream-faint);
    border:         1px solid rgba(245,240,232,.15);
    border-radius:  3px;
    padding:        .15em .45em;
}

/* Drawer footer */
.oww-nav__drawer-foot {
    padding:       1.25rem 1.5rem;
    border-top:    1px solid var(--oww-bronze-20);
    display:       flex;
    flex-direction: column;
    gap:           .75rem;
    flex-shrink:   0;
}

.oww-nav__drawer-foot .oww-btn { width: 100%; justify-content: center; }

.oww-nav__drawer-cred {
    display:   flex;
    flex-wrap: wrap;
    gap:       .4rem;
    margin-top: .25rem;
}

.oww-nav__drawer-cred-badge {
    font-size:      .58rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--oww-amber-deep);
    background:     var(--oww-amber-faint);
    border:         1px solid var(--oww-bronze-10);
    border-radius:  4px;
    padding:        .2em .6em;
}


/* ─── LINK COLOUR PROTECTION ─────────────────────────────────────────────── */
/* Beats Elementor kit anchor colour rules (specificity 0-2-1) */

.oww-nav .oww-nav__list .oww-nav__link {
    color: rgba(245, 240, 232, 0.65);
}

.oww-nav .oww-nav__list .oww-nav__link:hover,
.oww-nav .oww-nav__list .oww-nav__link.oww-nav--active {
    color: var(--oww-cream);
}

.oww-nav .oww-nav__list .oww-nav__link.oww-nav--active {
    color: var(--oww-amber);
}


/* ─── BODY PADDING — ADMIN BAR ───────────────────────────────────────────── */

body.admin-bar { padding-top: calc(var(--oww-nav-h) + 32px); }
@media screen and (max-width: 782px) {
    body.admin-bar { padding-top: calc(var(--oww-nav-h) + 46px); }
}


/* ─── REDUCED MOTION ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .oww-nav,
    .oww-nav__link,
    .oww-nav__mega,
    .oww-nav__drawer,
    .oww-nav__mega-backdrop,
    .oww-nav__toggle-bar,
    .oww-nav__drawer-chevron,
    .oww-nav__arrow { transition: none; }
}