/* ============================================================================
   TWO ROW NAVIGATION.

   Row 1  the VIP links. Always visible, never crowded.
   Row 2  everything else. Quieter, smaller, sits underneath.
   Phone  both rows collapse into one hamburger panel.

   One file. Change it here and it changes on every page.
   ============================================================================ */

/* ---------- ROW 2 ----------
   The site header is position:fixed, so row 2 lives INSIDE it. If it sat
   after the header, the fixed header would cover it and nothing in row 2
   would be clickable. */
.nav-secondary{
  position:relative; z-index:101;
  border-top:1px solid rgba(246,242,234,0.08);
  border-bottom:1px solid rgba(246,242,234,0.10);
  background:rgba(255,255,255,0.02);
}
.nav-secondary .nav{
  padding:9px 24px;
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:flex-start;
}
.nav-sub-links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:26px; list-style:none; margin:0; padding:0;
}
.nav-sub-links > li{ position:relative; }
.nav-sub-links a{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase;
  color:#A493C4; text-decoration:none;
  padding-bottom:3px; transition:color 0.25s;
}
.nav-sub-links a:hover{ color:#EFC463; }


/* ---------- PHONES: one hamburger, both rows inside it ---------- */
@media (max-width:920px){
  .nav-secondary{ display:none; }          /* row 2 folds into the panel */
  .nav-links .in-panel{ display:block; }   /* row 2 links appear in the panel */
  .nav-links .panel-heading{
    display:block; font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase;
    color:#EFC463; margin:18px 0 2px; opacity:0.9;
  }
}
@media (min-width:921px){
  .nav-links .in-panel,
  .nav-links .panel-heading{ display:none; }
}

/* ---------- CLEARANCE ----------
   The header is position:fixed and now has two rows, so page content has to
   start below it. One inch of breathing room under the nav, on every page. */
body{ padding-top:150px; }

@media (max-width:920px){
  body{ padding-top:110px; }   /* one row on phones, so less clearance needed */
}




/* ============================================================================
   PHONES — NO HAMBURGER.

   Every link is visible. Row 1 is the VIP set, row 2 sits under it, both
   wrap onto as many lines as they need. Nothing is hidden behind a tap.
   ============================================================================ */
@media (max-width:920px){

  .nav-toggle{ display:none !important; }

  .site-header{ position:static; }        /* it grows with the links, so it cannot cover the page */
  body{ padding-top:0 !important; }

  .site-header .nav{
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:16px 18px 12px;
  }
  .site-header .logo img{ width:132px; height:auto; }

  .nav-links{
    position:static !important;
    transform:none !important;
    display:flex !important;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 22px;
    height:auto !important;
    max-height:none;
    background:none !important;
    padding:0;
    border:0;
    overflow:visible;
  }
  .nav-links > li{ border:0; }
  .nav-links > li > a{
    display:block;
    padding:8px 2px;
    font-size:0.78rem;
    letter-spacing:0.08em;
    color:#F6F2EA;
  }

  /* the phone-only duplicates are not needed now that row 2 is visible */
  .nav-links .in-panel,
  .nav-links .panel-heading{ display:none !important; }

  .nav-cta{ order:-1; }
  .nav-cta .btn-ghost{ display:inline-block; font-size:0.72rem; padding:0.5em 1.1em; }

  /* row 2 stays visible, quieter, wrapping */
  .nav-secondary{ display:block !important; }
  .nav-secondary .nav{ padding:8px 16px 10px; flex-direction:row; }
  .nav-sub-links{
    justify-content:center;
    gap:6px 16px;
  }
  .nav-sub-links a{ font-size:0.66rem; padding:5px 2px; display:block; }
}



/* Row 2: plain links, nothing nested, real tap and click targets. */
.nav-sub-links > li > a{
  display:inline-block;
  padding:6px 2px;
  position:relative;
  z-index:2;
}
.nav-secondary{ pointer-events:auto; }


/* ============================================================================
   SHORT HERO
   .hero is min-height:100vh, a whole screen. On pages whose hero holds only
   a heading that leaves a screen of emptiness and hides the rest of the page.
   ============================================================================ */
.hero.hero-short{
  min-height:0;
  padding:3rem 0 2.5rem;
}
@media (max-width:920px){
  .hero.hero-short{ padding:2rem 0 1.5rem; }
}