/* =====================================================
   ACC GLOBAL NAVIGATION — header, desktop nav, mobile nav.
   Two header variants:
     .site-header               default — sits in normal
                                 flow, solid canvas behind it.
     .site-header--overlay      Home / Personal Work only —
                                 fixed, transparent, hidden
                                 until the visitor scrolls
                                 past the opening hero (see
                                 site.js).
===================================================== */

.site-header{
  position:relative;
  z-index:30;
  background:var(--acc-bg);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px var(--margin);
}

/* ---- overlay variant ---- */
.site-header--overlay{
  position:fixed;
  top:0; left:0; right:0;
  background:var(--acc-bg);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity var(--transition-standard) var(--ease),
             transform var(--transition-standard) var(--ease);
  pointer-events:none;
}
.site-header--overlay.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .site-header--overlay{ transition:none; }
}

/* ---------- desktop nav ---------- */
.site-nav{ display:none; }
@media (min-width:860px){
  .site-nav{ display:block; }
}
.site-nav__list{
  display:flex;
  align-items:center;
  gap:clamp(22px,2.6vw,40px);
  list-style:none;
  margin:0; padding:0;
}
.site-nav__list > li{ position:relative; }
.site-nav__list > li > a{
  font-family:var(--font-accent);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--acc-charcoal);
  opacity:.72;
  padding:6px 0;
  display:inline-block;
  transition:opacity var(--transition-fast) ease;
}
.site-nav__list > li > a:hover,
.site-nav__list > li > a[aria-current="page"],
.site-nav__list > li > a.is-active-section{ opacity:1; }
.site-nav__list > li > a[aria-current="page"],
.site-nav__list > li > a.is-active-section{ font-weight:700; }

.site-nav__sub{
  list-style:none;
  margin:0; padding:10px 0;
  position:absolute;
  top:100%; left:50%;
  transform:translate(-50%,4px);
  min-width:150px;
  background:var(--acc-bg);
  border:1px solid var(--acc-stone-line);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.site-nav__list > li.has-children:hover > .site-nav__sub,
.site-nav__list > li.has-children:focus-within > .site-nav__sub{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.site-nav__sub li a{
  display:block;
  padding:8px 18px;
  font-family:var(--font-accent);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--acc-charcoal);
  opacity:.68;
  white-space:nowrap;
}
.site-nav__sub li a:hover,
.site-nav__sub li a[aria-current="page"],
.site-nav__sub li a.is-active-section{ opacity:1; }

/* ---- nested reveal (Work → Personal Work → Places/Sports/Elsewhere) ----
   One continuous panel, not a second flyout: the nested list lives in
   normal document flow directly beneath "Personal Work" and is collapsed
   to max-height:0 by default, so the parent .site-nav__sub panel simply
   grows taller when it opens. No border/background of its own — it
   inherits the panel it's sitting inside. Indentation alone (not a box)
   communicates the hierarchy. */
.site-nav__sub li.has-children > a{ padding-right:22px; }
.site-nav__sub2{
  list-style:none;
  margin:0; padding:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-4px);
  transition:max-height var(--transition-standard) var(--ease),
             opacity var(--transition-fast) ease,
             transform var(--transition-fast) ease;
}
.site-nav__sub li.has-children:hover > .site-nav__sub2,
.site-nav__sub li.has-children:focus-within > .site-nav__sub2{
  max-height:160px;
  opacity:1;
  transform:translateY(0);
}
.site-nav__sub2 li a{
  display:block;
  padding:8px 18px 8px 34px;
  font-family:var(--font-accent);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--acc-charcoal);
  opacity:.68;
  white-space:nowrap;
}
.site-nav__sub2 li a:hover,
.site-nav__sub2 li a[aria-current="page"]{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .site-nav__sub2{ transition:none; }
}

/* ---------- mobile toggle ---------- */
.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
}
@media (min-width:860px){ .nav-toggle{ display:none; } }
.nav-toggle span{
  display:block;
  height:1px;
  background:var(--acc-charcoal);
  transition:transform var(--transition-fast) var(--ease), opacity var(--transition-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- mobile panel ---------- */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:29;
  background:var(--acc-bg);
  display:flex;
  flex-direction:column;
  padding:calc(var(--header-h) + 12px) var(--margin) var(--margin);
  transform:translateY(-100%);
  transition:transform var(--transition-standard) var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateY(0); }
@media (min-width:860px){ .mobile-nav{ display:none; } }

.mobile-nav__list{ list-style:none; margin:0; padding:0; }
.mobile-nav__list > li{ border-bottom:1px solid var(--acc-stone-line); }
.mobile-nav__list > li > a{
  display:block;
  padding:16px 0;
  font-family:var(--font-primary);
  font-weight:600;
  font-size:1.15rem;
  text-decoration:none;
  color:var(--acc-charcoal);
}
.mobile-nav__sub{
  list-style:none;
  margin:0 0 14px; padding:0;
}
.mobile-nav__sub li a{
  display:block;
  padding:9px 0 9px 18px;
  font-family:var(--font-accent);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--acc-charcoal);
  opacity:.68;
}

/* ---- nested tier (Work → Personal Work → Places/Sports/Elsewhere) ----
   No accordion — always visible, one more indent step. Keeps the mobile
   menu a plain, quick-to-scan hierarchy instead of an interactive tree. */
.mobile-nav__sub2{
  list-style:none;
  margin:0 0 8px; padding:0;
}
.mobile-nav__sub2 li a{
  display:block;
  padding:8px 0 8px 34px;
  font-family:var(--font-accent);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--acc-charcoal);
  opacity:.55;
}

@media (prefers-reduced-motion: reduce){
  .mobile-nav{ transition:none; }
}