/* Mobile header navigation — index and the 7 pillars hide nav.topnav below 880px,
   leaving the header with no links at all; this restores them behind a toggle.
   Pages that already show a mobile nav (the hub, writing, about) keep theirs:
   pllc-nav.js only adds .is-needed where the nav is actually hidden.
   Desktop is untouched — the button never renders above the breakpoint. */

.nav-toggle{display:none}

@media (max-width:880px){
  .topbar-inner{position:relative}

  .nav-toggle.is-needed{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin-left:auto;
    width:44px;height:44px;
    padding:0;
    background:none;
    border:1px solid rgba(212,175,55,0.35);
    border-radius:8px;
    color:var(--cream,#f5f0e8);
    cursor:pointer;
  }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    display:block;
    width:18px;height:2px;
    background:currentColor;
    border-radius:2px;
  }
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{content:"";position:absolute;left:0}
  .nav-toggle-bars::before{top:-6px}
  .nav-toggle-bars::after{top:6px}
  .topbar.nav-open .nav-toggle.is-needed{border-color:rgba(212,175,55,0.7)}

  /* The panel. Absolute against .topbar-inner so it hangs under the bar on every
     page regardless of that page's chrome. */
  .topbar.nav-open nav.topnav{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:absolute;
    top:100%;left:0;right:0;
    z-index:30;
    padding:10px 22px 16px;
    /* Opaque, not glass: at 0.97 the page text underneath still read through
       the panel (verified at 375px). A menu has to be legible, not pretty. */
    background:#061c34;
    border-top:1px solid rgba(212,175,55,0.28);
    border-bottom:1px solid rgba(212,175,55,0.28);
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }

  /* Flatten the three dropdown structures (pillar .dropdown, index .nav-panel)
     into plain stacked links — no hover state exists on touch. */
  .topbar.nav-open .topnav .nav-item,
  .topbar.nav-open .topnav .has-dropdown{display:block;width:100%}
  .topbar.nav-open .topnav .nav-panel,
  .topbar.nav-open .topnav .dropdown{
    position:static;
    display:block;
    opacity:1;
    visibility:visible;
    transform:none;
    background:none;
    border:none;
    box-shadow:none;
    min-width:0;
    margin:0;
    padding:0 0 4px 12px;
  }
  .topbar.nav-open .topnav .nav-panel::before{display:none}
  .topbar.nav-open .topnav .nav-link-desc{display:none}

  .topbar.nav-open .topnav a,
  .topbar.nav-open .topnav .nav-trigger{
    display:block;
    width:100%;
    padding:10px 0;
    border-bottom:none;
    text-align:left;
  }
  .topbar.nav-open .topnav .nav-trigger{
    justify-content:flex-start;
    color:var(--cream-dim,rgba(245,240,232,0.72));
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    cursor:default;
  }
  .topbar.nav-open .topnav .chev{display:none}

  /* Only where a consult CTA also sits in the bar (hub, writing, about): keep the
     header to one line instead of wrapping the name around the button. */
  .topbar.nav-cta .topbar-inner{gap:10px}
  .topbar.nav-cta .brandmark-text{font-size:15px;white-space:nowrap}
  .topbar.nav-cta .brandmark-text small{display:none}
  .topbar.nav-cta .topnav a.btn{padding:8px 11px;font-size:12px;white-space:nowrap}
}

/* Phone: name + consult button + toggle will not fit on one line (they overflow at
   375px). Below 560 the CTA moves into the menu, where it stays the gold button at
   the bottom — one tap away. Tablets keep it in the bar. :not(.nav-open) so it
   reappears inside the open panel. */
@media (max-width:560px){
  .topbar.nav-cta:not(.nav-open) .topnav a.btn{display:none}
}