/* ══════════════════════════════════════
   KnowledgePitch — nav-programs.css v4
   Mega dropdown + mobile nav accordion
   KEY FIX: All desktop-only rules are
   wrapped in @media(min-width:769px)
   so they never override mobile display:none
══════════════════════════════════════ */

/* ── z-index baseline ── */
/* navbar is inside .site-header (sticky, z-index:300).
   The dropdown must appear above .loc-ticker-band (z-index:50)
   which lives OUTSIDE .site-header in the DOM.
   Since .site-header itself is z-index:300, everything inside it
   (including the dropdown) already stacks above the ticker. */
.navbar { position:relative; z-index:300; }

/* ══════════════════════════════════════
   DESKTOP ONLY (≥ 769px)
   All nav-link and dropdown styles MUST
   live inside this media query so they
   never override the mobile display:none
══════════════════════════════════════ */
@media(min-width:901px){
  /* Allow dropdown panel to overflow navbar */
  .navbar,.nav-inner,.container { overflow:visible; }

  /* Nav link spacing & dropdown trigger */
  .nav-links { display:flex; align-items:center; gap:1.4rem; }
  .nav-links .has-dropdown { position:relative; }
  .nav-links .has-dropdown > a { display:flex; align-items:center; gap:0.35rem; }
  .nav-links .has-dropdown > a .caret { font-size:0.65rem; transition:transform 0.25s ease; }
  .nav-links .has-dropdown:hover > a .caret { transform:rotate(180deg); }

  /* Dropdown panel — sits flush under the nav link with no gap */
  .dropdown-menu {
    position:absolute; top:100%; left:-12px; min-width:368px;
    background:#fff; border-radius:var(--r-lg,20px);
    border:1px solid var(--gray-200,#DDE5F0);
    box-shadow:0 24px 64px rgba(15,28,46,0.18),0 4px 12px rgba(15,28,46,0.06);
    padding:0.75rem 0.6rem 0.6rem;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(6px) scale(0.98);
    transform-origin:top left;
    transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s;
    z-index:9999;
  }
  /* Invisible bridge fills the gap so cursor doesn't leave hover zone */
  .has-dropdown::after {
    content:''; position:absolute;
    top:100%; left:0; right:0; height:12px;
    background:transparent;
  }
  .nav-links .has-dropdown:hover .dropdown-menu,
  .nav-links .has-dropdown:focus-within .dropdown-menu {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0) scale(1);
  }

  /* Arrow tip on dropdown */
  .dropdown-menu::before {
    content:''; position:absolute; top:-6px; left:28px;
    width:12px; height:12px; background:#fff;
    border-left:1px solid var(--gray-200,#DDE5F0);
    border-top:1px solid var(--gray-200,#DDE5F0);
    transform:rotate(45deg);
  }
}

/* ── Dropdown items (safe globally — only visible when panel is visible) ── */
.dd-item {
  display:flex; align-items:flex-start; gap:0.85rem;
  padding:0.78rem 0.9rem; border-radius:var(--r,14px);
  text-decoration:none; color:var(--text,#0F1C2E);
  transition:background 0.15s ease,transform 0.15s ease;
}
.dd-item:hover { background:var(--gray-50,#F7F9FC); transform:translateX(3px); }
.dd-item.dd-flagship { background:var(--primary-light,#EBF1FF); }
.dd-item.dd-flagship:hover { background:#dce9ff; }

.dd-ico { width:36px; height:36px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.95rem; }
.dd-ico-blue   { background:var(--primary-light,#EBF1FF); color:var(--primary,#1246AB); }
.dd-ico-green  { background:rgba(11,189,122,0.10); color:var(--green,#0BBD7A); }
.dd-ico-orange { background:rgba(255,87,34,0.10);  color:var(--accent,#FF5722); }
.dd-ico-purple { background:rgba(108,77,234,0.10); color:#6C4DEA; }
.dd-ico-teal   { background:rgba(0,188,212,0.10);  color:#0097A7; }
.dd-ico-red    { background:rgba(244,67,54,0.10);  color:#E53935; }

.dd-text { flex:1; }
.dd-label { font-weight:700; font-size:0.88rem; color:var(--text,#0F1C2E); display:flex; align-items:center; gap:0.4rem; line-height:1.3; }
.dd-badge { font-size:0.6rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; padding:0.1rem 0.45rem; border-radius:50px; background:var(--accent,#FF5722); color:#fff; }
.dd-desc  { font-size:0.76rem; color:var(--text-muted,#5A6A82); margin-top:0.15rem; line-height:1.45; }

.dd-footer { border-top:1px solid var(--gray-100,#EEF2F8); margin-top:0.5rem; padding:0.65rem 0.9rem 0.3rem; display:flex; gap:0.6rem; flex-wrap:wrap; }
.dd-footer a { font-size:0.77rem; font-weight:600; color:var(--primary,#1246AB); text-decoration:none; display:flex; align-items:center; gap:0.3rem; transition:color 0.15s,gap 0.15s; }
.dd-footer a:hover { color:var(--primary-dark,#0B2D6E); gap:0.5rem; }

/* ══════════════════════════════════════
   MOBILE NAV ACCORDION
   (always present — the panel itself
   is only shown when .mobile-nav.open)
══════════════════════════════════════ */
.mobile-links .mob-dropdown-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:0.9rem 0;
  font-size:1.05rem; font-weight:500; color:var(--text,#0F1C2E);
  cursor:pointer; text-align:left; transition:color 0.18s;
}
.mobile-links .mob-dropdown-toggle:hover { color:var(--primary,#1246AB); }
.mobile-links .mob-dropdown-toggle .caret { font-size:0.65rem; transition:transform 0.25s ease; display:inline-block; }
.mobile-links .mob-dropdown-toggle.open .caret,
.mobile-links .mob-dropdown-toggle[aria-expanded="true"] .caret { transform:rotate(180deg); }

.mob-sub { display:none; background:var(--gray-50,#F7F9FC); border-radius:var(--r,14px); margin:0.25rem 0 0.5rem; overflow:hidden; }
.mob-sub.open { display:block; }
.mob-sub a {
  display:flex; align-items:center; gap:0.65rem;
  padding:0.72rem 1.25rem; font-size:0.9rem;
  color:var(--text-muted,#5A6A82); text-decoration:none;
  border-bottom:1px solid var(--gray-100,#EEF2F8);
  transition:color 0.15s,background 0.15s,padding-left 0.2s;
}
.mob-sub a:last-child { border-bottom:none; }
.mob-sub a:hover { color:var(--primary,#1246AB); background:var(--primary-light,#EBF1FF); padding-left:1.55rem; }