/* ---- Site navigation ---- */

/* Mobile default: flex row with logo and hamburger visible */
.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--gutter-sm);
}

.site-nav__group {
  display: none;
}

.site-nav__logo {
  display: block;
}

/* Mobile default: smaller than desktop's 84px — at narrow widths, next to
   the hamburger and against the fixed 96px header, 84px reads oversized.
   Scales back up to the desktop value at 1024px below. */
.site-nav__logo svg {
  height: 48px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .site-nav__logo svg {
    height: 64px;
  }
}

@media (min-width: 1024px) {
  .site-nav__logo svg {
    height: 84px;
  }
}

/* Black badge square always renders behind the mark — the logo is never
   shown as bare white line art with no box, and never collapses to a
   single flat color. */
.site-nav__logo svg .logo-bg {
  opacity: 1;
}

/* Nav links — inherited color adapts to transparent/opaque header state.
   Underline matches the sitewide .btn--text treatment (button.css): hidden
   at rest, grows in left-to-right on hover/focus, collapses away to the
   right on exit. border-bottom stays permanently transparent — keeping it
   (rather than removing it) preserves the box height that 1px used to
   occupy, same trick .btn--text uses. */
.site-nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--font-size-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: inherit;
  padding-block: var(--space-3);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-3) - var(--space-1) - 1px);
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-standard);
}

/* [aria-current] rather than [aria-current="page"] — a submenu link uses
   "page" for the literal current page, a parent item (Design/Construct/
   About) uses "true" to mark the active section. Same underline either way. */
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__link::after {
    transition: none;
  }
}

/* Hamburger toggle */
.nav-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: var(--gutter-sm);
  color: inherit;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1.5rem;
  height: 1px;
  background-color: currentColor;
  transition:
    transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after  { top:  6px; }

[data-nav-open="true"] .nav-toggle__icon               { background-color: transparent; }
[data-nav-open="true"] .nav-toggle__icon::before       { transform: translateY(6px) rotate(45deg); }
[data-nav-open="true"] .nav-toggle__icon::after        { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav panel — drops in from behind the header, same clip-path
   "blind dropping" technique as the desktop subnav below (not transform):
   the panel's box never moves from its top: var(--header-height) position,
   only how much of it is clipped-and-visible changes, so it can never
   slide over/behind the header itself the way a translateY reveal would
   (translateY(-100%) moves a box up by ITS OWN height, which — since this
   box's height is viewport-minus-header, not the full viewport — lands
   its bottom edge back at the header's own bottom edge, not above the
   viewport, covering the header entirely while "closed"). Close and open
   use different transition-delay: the browser picks up whichever rule
   matches the state being transitioned INTO, so closing (falling back to
   this base rule) gets a short delay — giving the staggered nav content
   below time to fade out first — while opening ([data-nav-open="true"]
   below) starts immediately. */
.nav-mobile {
  position: fixed;
  inset: 0;
  top: var(--header-height);
  z-index: var(--z-overlay);
  background-color: var(--color-bg);
  color: var(--color-ink);
  padding: var(--space-8) var(--gutter-sm);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
  transition: clip-path var(--duration-slow) var(--ease-standard) 110ms;
}

[data-nav-open="true"] .nav-mobile {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--duration-slow) var(--ease-standard);
}

.nav-mobile__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Staggered entrance for the level-one rows: hidden/offset at rest, fading
   in with a short per-row delay when the panel opens. Same fade/blur
   treatment as [data-project-fade]/[data-journal-fade] (blur(6px) ->
   blur(0), translateY(var(--space-4))) so this reads as the same reveal
   language used elsewhere on the site, just re-timed for a toggled menu
   rather than a one-time scroll reveal. Closing (the base rule, no
   [data-nav-open] qualifier) uses a shorter duration and no delay so the
   content clears quickly, ahead of the panel's own delayed exit above —
   same before/after-change-style technique. */
.nav-mobile__list > li {
  opacity: 0;
  transform: translateY(var(--space-4));
  filter: blur(6px);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard);
}

[data-nav-open="true"] .nav-mobile__list > li {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    filter var(--duration-base) var(--ease-standard);
}

[data-nav-open="true"] .nav-mobile__list > li:nth-child(1) { transition-delay: 0ms; }
[data-nav-open="true"] .nav-mobile__list > li:nth-child(2) { transition-delay: 35ms; }
[data-nav-open="true"] .nav-mobile__list > li:nth-child(3) { transition-delay: 70ms; }
[data-nav-open="true"] .nav-mobile__list > li:nth-child(4) { transition-delay: 105ms; }
[data-nav-open="true"] .nav-mobile__list > li:nth-child(5) { transition-delay: 140ms; }
[data-nav-open="true"] .nav-mobile__list > li:nth-child(6) { transition-delay: 175ms; }

.nav-mobile__item {
  display: flex;
  flex-direction: column;
}

/* Same font family/weight/case/tracking as the desktop .site-nav__link —
   sized larger than desktop's 13px to stay comfortably tappable, but no
   longer the large italic PPEiko treatment this used to carry. Sized down
   from font-size-7 (24px) to font-size-6 (18px) — 24px read oversized once
   six rows plus chevrons were on screen together. */
.nav-mobile__link {
  font-family: var(--font-body);
  font-size: var(--font-size-6);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Only items with a submenu (Design/Construct/About) get the row layout
   that makes room for the chevron — plain leaf links (Projects, Contact,
   Enquire now) aren't wrapped in .nav-mobile__item, so they're untouched. */
.nav-mobile__item > .nav-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Drawn in CSS (border corner rotated to a V), matching the hamburger
   icon's existing "no SVG/icon asset" convention. currentColor inherits
   .nav-mobile__link's ink color automatically. */
.nav-mobile__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.nav-mobile__item[data-expanded="true"] .nav-mobile__chevron {
  transform: rotate(-135deg);
}

/* Height animation for the submenu wrapper uses the grid-template-rows
   0fr -> 1fr technique rather than height: 0 -> auto, which doesn't
   support a smooth transition. The fr-unit row track animates cleanly to
   the content's natural height; overflow/min-height on the direct child
   (.nav-mobile__sublist) let the row actually reach zero when collapsed.
   overflow/min-height are repeated here on .nav-mobile__submenu itself —
   it's also a flex item of .nav-mobile__item, and flex items default to
   min-height: auto (content-based) unless overflow is non-visible, which
   was silently keeping collapsed submenus from reaching zero height and
   is why chevron rows looked taller than plain link rows. */
.nav-mobile__submenu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  min-height: 0;
  transition: grid-template-rows var(--duration-base) var(--ease-standard);
}

.nav-mobile__item[data-expanded="true"] .nav-mobile__submenu {
  grid-template-rows: 1fr;
}

/* Design/Construct/About each expand their own sublist in place (an
   accordion) rather than always showing it — tap the row, or its
   chevron, to reveal it. See initMobileSubnav() in nav.js. */
.nav-mobile__sublist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-4);
  /* 0 while collapsed rather than trusting .nav-mobile__submenu's 0fr row
     to squeeze this away — that squeeze depends on the browser resolving
     the grid track's automatic minimum size correctly, and this padding
     was the one property in the collapse chain not explicitly tied to
     [data-expanded], so any shortfall there left a few px of dead space
     after chevron rows (Design/Construct/About) that plain rows
     (Projects/Contact/Enquire now) never had. */
  padding-top: 0;
  overflow: hidden;
  min-height: 0;
}

.nav-mobile__item[data-expanded="true"] .nav-mobile__sublist {
  padding-top: var(--space-3);
}

.nav-mobile__sublist li {
  opacity: 0;
  transform: translateY(var(--space-4));
  filter: blur(6px);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    filter var(--duration-base) var(--ease-standard);
}

.nav-mobile__item[data-expanded="true"] .nav-mobile__sublist li {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Bumped from font-size-4 (14px) to font-size-5 (16px) — against the
   smaller font-size-6 (18px) parent above, 14px read like an afterthought;
   16px keeps a clear but gentler step down in the hierarchy. */
.nav-mobile__sublink {
  font-family: var(--font-body);
  font-size: var(--font-size-5);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.nav-mobile__sublink[aria-current="page"] {
  color: var(--color-ink);
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile,
  [data-nav-open="true"] .nav-mobile,
  .nav-mobile__list > li,
  [data-nav-open="true"] .nav-mobile__list > li,
  .nav-mobile__chevron,
  .nav-mobile__submenu,
  .nav-mobile__sublist li,
  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    transition: none;
    transition-delay: 0ms;
  }
}

/* ---- Desktop: 3-column grid with logo centred in the viewport ---- */

@media (min-width: 1024px) {
  .site-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    max-width: var(--container-max-site);
    margin-inline: auto;
    padding-inline: var(--gutter-lg);
  }

  .site-nav__group {
    display: flex;
    align-items: center;
    gap: var(--space-10);
  }

  .site-nav__group--right {
    justify-content: flex-end;
  }

  .nav-toggle,
  .nav-mobile {
    display: none;
  }
}

/* ---- Secondary (sub) navigation ----
   A single shared horizontal strip beneath the main nav, not a per-item
   dropdown — one row whose content swaps to match whichever top-level
   item (Design/Construct/About) is active. Clip-path reveals it downward
   from the top edge (like a blind dropping) and hides it again on close;
   it never affects .site-header's own height since it's positioned
   absolute, clear of the nav's flow. */
.site-subnav {
  display: none;
}

@media (min-width: 1024px) {
  .site-subnav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-paper);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
    will-change: clip-path;
    transition: clip-path 550ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-subnav[data-subnav-open="true"] {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }

  .site-subnav__row[hidden] {
    display: none;
  }

  .site-subnav__list {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    max-width: var(--container-max-site);
    margin-inline: auto;
    padding-inline: var(--gutter-lg);
    padding-block: var(--space-8);
  }

  /* About sits in the nav's right-hand group, so its submenu row reads
     right-aligned to match — not the shared left start used by
     Design/Construct on the left. */
  .site-subnav__row[data-subnav-row="about"] .site-subnav__list {
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .site-subnav {
    transition: none;
  }
}