/* assets/css/navbar.css - BBA variant
   Uses the shared topbar.php (fixed, 38px) + fixed nav (60px) pattern,
   matching the base CSS layout. Subnav sits at top:98px (38+60). */

nav{position:fixed;top:38px;left:0;right:0;z-index:300;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 24px;height:60px;background:rgba(8,9,13,.97);border-bottom:1px solid var(--edge);backdrop-filter:blur(20px)}
body.light-mode nav{background:rgba(246,244,238,.97)}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{display:block;height:50px;width:auto}
body.light-mode .nav-logo img{filter:brightness(0) saturate(100%)}
.nav-center-links{display:flex;align-items:center;gap:24px;flex-shrink:0}
.nav-center-links a{color:var(--muted);font-size:13.5px;font-weight:600;transition:color .2s;white-space:nowrap}
.nav-center-links a:hover{color:var(--ember2)}
@media(max-width:1080px){.nav-center-links{display:none}}
.nav-cta-group{display:flex;align-items:center;gap:10px;flex-shrink:0}
@media(max-width:760px){.nav-cta-group{display:none}}
.nav-back{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;font-weight:600;transition:color .2s}
.nav-back:hover{color:var(--ember2)}
.nav-back span.back-text{display:none}
@media(min-width:540px){.nav-back span.back-text{display:inline}}
.nav-cta-mini{display:flex;gap:8px;align-items:center}
.nav-cta-mini .btn{padding:9px 12px;font-size:12px}
@media(min-width:760px){.nav-cta-mini .btn{padding:10px 18px;font-size:13px}}

/* Shared navbar.php classes (nav-links / nav-actions / hamburger) */
.nav-links{display:flex;align-items:center;justify-content:center;gap:6px;flex:1}
.nav-links>a{font-size:13px;font-weight:500;color:rgba(255,255,255,0.6);padding:8px 11px;border-radius:8px;white-space:nowrap;transition:all .18s}
.nav-links>a:hover{color:#fff;background:rgba(255,255,255,0.06)}
@media(max-width:1080px){.nav-links{display:none}}

/* ===== Programs / Branches dropdowns ===== */
.nav-programs-wrap,.nav-branches-wrap{position:relative}
.nav-programs-trigger,.nav-branches-trigger{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.6);padding:8px 11px;border-radius:8px;white-space:nowrap;transition:all .18s}
.nav-programs-trigger:hover,.nav-branches-trigger:hover{color:#fff;background:rgba(255,255,255,0.06)}
.nav-programs-arrow,.nav-branch-arrow{font-size:10px;transition:transform .2s}
.nav-programs-wrap:hover .nav-programs-arrow,.nav-branches-wrap:hover .nav-branch-arrow{transform:rotate(180deg)}

.nav-programs-dropdown,.nav-branches-dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:260px;background:var(--panel);border:1px solid var(--edge2);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);padding:10px;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:400;
}
.nav-programs-wrap:hover .nav-programs-dropdown,.nav-programs-wrap:focus-within .nav-programs-dropdown,
.nav-branches-wrap:hover .nav-branches-dropdown,.nav-branches-wrap:focus-within .nav-branches-dropdown{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.npd-header,.nbd-header{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 6px}
.npd-list,.nbd-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}
.npd-item,.nbd-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:9px;color:var(--text);font-size:13.5px;font-weight:600;transition:background .16s}
.npd-item:hover,.nbd-item:hover{background:rgba(255,255,255,.06)}
.npd-arrow,.nbd-arrow{color:var(--muted);font-size:13px;flex-shrink:0}
.nbd-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.nbd-name{font-size:13.5px;font-weight:600;color:var(--text)}
.nbd-city{font-size:11.5px;font-weight:500;color:var(--muted);white-space:normal}

/* ===== Free PDFs dropdown ===== */
.nav-pdfs-wrap{position:relative}
.nav-pdfs-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  width:320px;background:var(--panel);border:1px solid var(--edge2);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:400;
}
.nav-pdfs-wrap:hover .nav-pdfs-dropdown,.nav-pdfs-wrap:focus-within .nav-pdfs-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
.npdf-header{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 6px}
.npdf-list{display:flex;flex-direction:column;gap:2px}
.npdf-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--text);font-size:13px;font-weight:600;transition:background .16s}
.npdf-item:hover{background:rgba(255,255,255,.06)}
.npdf-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--ink2);display:block}
.npdf-title{flex:1;min-width:0;line-height:1.3}
.npdf-arrow{color:var(--muted);font-size:13px;flex-shrink:0}
@media(max-width:480px){.nav-pdfs-dropdown{width:min(320px,84vw);right:-40px}}

/* ===== Free Daily Quiz flame pill ===== */
.topbar-link-hot{display:inline-flex;align-items:center;gap:6px;color:#ff9500!important;background:rgba(255,149,0,.1);border-radius:100px;padding:7px 13px!important;font-size:13px;font-weight:700!important;white-space:nowrap;transition:all .18s}
.topbar-link-hot:hover{background:rgba(255,149,0,.18)!important;color:#ffb340!important}
.live-flame{display:inline-flex;align-items:center}
.live-flame svg{overflow:visible;display:block}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}

/* Nav action buttons (used in includes/navbar.php's .nav-actions block) */
.btn-pdfs{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--edge2);color:var(--text);border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;}
.btn-pdfs:hover{border-color:rgba(232,162,48,.35);color:var(--ember2)}

.btn-login{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px solid var(--edge2);color:var(--text);border-radius:8px;padding:7px 16px;font-size:13px;font-weight:600;}
.btn-login:hover{border-color:var(--ember);color:var(--ember2);background:rgba(232,162,48,.06)}

.btn-call{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--ember),#f5d060);color:#0d0d12;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:800;}
.btn-call:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,162,48,.4)}

@media(max-width:1080px){
  /* Hide PDF/Login on small screens so they don't break layout */
  .nav-actions .btn-pdfs, .nav-actions .btn-login {display:none}
}
@media(max-width:480px){
  /* Re-scale call button on tiny screens */
  .nav-actions .btn-call {font-size:11.5px;padding:7px 12px;}
  /* Logo + gap were pushing the call button off-screen (clipped by body's
     overflow-x:hidden) on narrow phones -- shrink logo and tighten gaps
     so logo + hamburger + call button all fit within the viewport. */
  nav{gap:8px}
  .nav-logo img{height:34px}
}

/* Hamburger toggle */
.nav-hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:15px 12px;margin-left:auto}
.nav-hamburger span{display:block;width:20px;height:2px;background:rgba(255,255,255,.7);border-radius:2px;transition:all .25s}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1080px){.nav-hamburger{display:flex}}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;flex-shrink:0}
.nav-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
@media(max-width:1080px){.nav-toggle{display:flex}}

/* Topbar (shared topbar.php) */
.topbar{position:fixed;top:0;left:0;right:0;z-index:301;background:#0a0a0f;border-bottom:1px solid rgba(255,255,255,.07);height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.topbar-wa{display:inline-flex;align-items:center;gap:7px;background:#25d366;color:#000;font-size:12px;font-weight:700;padding:5px 13px;border-radius:100px;white-space:nowrap;transition:background .2s}
.topbar-wa:hover{background:#20c05c}
@media(max-width:620px){.topbar{display:none}}

/* Body push — account for fixed topbar (38px) + fixed nav (60px) */
body{padding-top:98px}

@media(max-width: 768px) {
  /* Hide the topbar completely on mobile */
  .topbar {
    display: none;
  }

  /* Lock the primary nav exactly to the top with no gaps */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }

  /* Reset the body push since the 38px topbar is now gone */
  body {
    padding-top: 60px;
  }
}

/* ===== STICKY SUB-NAV (jump links) ===== */
.subnav{position:sticky;top:98px;z-index:40;background:rgba(15,17,24,.97);border-bottom:1px solid var(--edge);backdrop-filter:blur(10px);overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none}
body.light-mode .subnav{background:rgba(246,244,238,.97)}
.subnav::-webkit-scrollbar{display:none}
.subnav-inner{display:inline-flex;gap:6px;padding:12px 24px}
.subnav a{display:inline-block;padding:8px 16px;border-radius:100px;font-size:12.5px;font-weight:600;color:var(--muted);transition:all .2s;white-space:nowrap}
.subnav a:hover{color:var(--text);background:var(--panel)}
.subnav a.active{color:#0d0d12;background:var(--ember)}

@media (max-width: 768px) {
  /* On mobile, subnav must stick directly under the 60px nav */
  .subnav {
    top: 60px;
  }
}

/* ===== MOBILE MENU ===== */
.mobile-menu{position:fixed;inset:0;z-index:900;display:none}
.mobile-menu.is-open{display:block}
.mobile-menu__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.mobile-menu__panel{position:relative;z-index:2;width:min(320px,84vw);height:100%;background:var(--ink2);border-right:1px solid var(--edge);padding:24px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.mobile-menu__close{align-self:flex-end;background:none;border:none;color:var(--text);font-size:18px;cursor:pointer;padding:8px;margin-bottom:12px}
.mobile-menu__link{padding:14px 6px;font-size:15px;font-weight:600;color:var(--text);border-bottom:1px solid var(--edge)}
.mobile-menu__cta{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.mobile-menu__cta .btn{justify-content:center}