/* Full-screen mobile nav overlay — opened via .site-header__nav-toggle
   (header.css/header.php), toggled by assets/js/nav-overlay.js. Two
   layers: this element is the full-bleed blurred backdrop;
   .nav-overlay__panel is inset from it by --theme-section-padding (same
   framing convention as .site-header/the sticky CTA bars) so the
   blurred page shows around the bordered panel, not just behind it.
   Sits below .site-header (z-index 50) on purpose — the header (with
   its now-X-shaped toggle button) stays visible/clickable above the
   overlay so the same button opens and closes it. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  background: rgb(20 22 33 / 55%);
  backdrop-filter: blur(var(--theme-blur));
  opacity: 0;
  transition: opacity 0.4s var(--theme-ease-signature);
}

/* Any author-stylesheet "display" rule on this element — even this
   file's own base rule above — beats the browser's built-in
   "[hidden] { display: none }" UA rule, since author CSS always wins
   over user-agent CSS regardless of specificity. Without this, closing
   the overlay (nav-overlay.js sets [hidden] after the close transition)
   left it at display: flex — invisible (opacity: 0) but still full-
   screen, fixed and pointer-events: auto, silently blocking every
   click on the page underneath. */
.nav-overlay[hidden] {
  display: none;
}

.nav-overlay.is-open {
  opacity: 1;
}

.nav-overlay__panel {
  position: relative;
  margin: var(--theme-section-padding);

  /* Closed state: pushed a full viewport height below, off-screen —
     .is-open below animates margin-top down to its real settled value,
     so the panel visibly slides up into place instead of just fading
     in. */
  margin-top: 100svh;
  width: calc(100% - var(--theme-section-padding) * 2);
  border: var(--theme-line-width) solid var(--theme-line-color);
  background: var(--brand-color-dark);
  color: var(--brand-color-light);

  /* Scrollable so an extreme case (huge zoom, a future longer menu)
     never traps unreachable items — but no visible scrollbar, the
     compact sizing above the fallback path down at .nav-overlay__list
     already keeps normal cases from ever needing to scroll. */
  overflow-y: auto;
  scrollbar-width: none;
  opacity: 0;

  /* Column flex so .nav-overlay__contact's margin-top: auto can push it
     to the bottom of the panel, with empty space above it instead of
     sitting directly under the last menu item. */
  display: flex;
  flex-direction: column;

  /* Opacity finishes well before the slide does — the panel reaches
     full opacity early and stays solid while margin-top keeps
     animating, so what's visible is a solid panel growing/sliding into
     place, not a fade happening at the same time as the motion. */
  transition: margin-top 1s var(--theme-ease-signature), opacity 0.15s var(--theme-ease-signature);
}

.nav-overlay__panel::-webkit-scrollbar {
  display: none;
}

.nav-overlay.is-open .nav-overlay__panel {
  /* Clears the fixed header (always --theme-header-height tall — it no
     longer shrinks on scroll, so no measured height is needed). */
  margin-top: calc(var(--theme-header-height) + var(--theme-section-padding) * 2);
  opacity: 1;
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-xs);
  list-style: none;

  /* min(vw, svh) in both this and .nav-overlay__list a below: the
     panel scrolls if it really has to (see overflow-y above) but
     shouldn't need to in normal use — sizing has to yield to whichever
     of width or height is tighter, not just width, or a short/
     landscape viewport pushes the last item(s) toward needing that
     scroll instead of just fitting. */
  padding: clamp(0.75rem, min(4vw, 5svh), var(--theme-space-sm)) var(--theme-section-padding);
}

/* Hover/current-page treatment (the push-up .button__label slide, see
   inc/menus.php's button_label markup + the shared :is(...) rules in
   header.css) is the same mechanism the header and footer menus use —
   only size/spacing stays specific to this full-screen context. */
.nav-overlay__list a {
  padding: clamp(0.35rem, min(2vw, 2.5svh), var(--theme-space-xs)) 0;
  font-size: clamp(1rem, min(5vw, 6svh), 2.5rem);
  font-weight: 700;
}

/* Contact block (.site-footer__col--contact's content, duplicated here
   for mobile since the footer itself isn't reachable without scrolling
   the whole page past this overlay) — same label/address treatment as
   the footer, just inset to match the menu list above it instead of
   the footer's own column padding. */
.nav-overlay__contact {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-sm);
  padding: clamp(0.75rem, min(4vw, 5svh), var(--theme-space-sm)) var(--theme-section-padding);
  border-top: var(--theme-line-width) solid var(--theme-color-border);
  /* Pushes this to the bottom of the (now flex-column) panel, with
     empty space above instead of sitting directly under the last menu
     item — see .nav-overlay__panel's display: flex. */
  margin-top: auto;
}

.nav-overlay__contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.nav-overlay__contact-label {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--brand-color-light) 60%, transparent);
}

.nav-overlay__contact-address {
  font-style: normal;
}

.nav-overlay__contact a {
  color: inherit;
  text-decoration: none;
}

body.nav-overlay-open {
  overflow: hidden;
}