/* ============================================================================
   nav.css — Grouped primary navigation (shared chrome)
   Dr. Aaron Goldner, Psy.D. practice site.
   Loads AFTER site.css. site.css and goldner-tokens.css remain untouched.

   Mechanism: a checkbox toggle drives the mobile "Menu" panel (no JS); the two
   groups (Services, Existing clients) are native <details> click-dropdowns.
   The nav is a PLAIN element (not inside a closed <details>), so forcing it
   visible at desktop width is reliable across browsers.

   Layout trick: .gnav-wrap uses display:contents so the burger + nav become
   flex siblings of the wordmark inside site.css's .site-header__inner. On
   mobile the open nav wraps to a full-width row beneath the header; on desktop
   it sits inline as a horizontal bar.
   ============================================================================ */

.gnav-wrap { display: contents; }

/* Visually-hidden but focusable checkbox that holds the open/closed state */
.gnav-check {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Mobile-first : "Menu" button reveals the nav ---------------------- */
.gnav-burger {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap-min); padding: 0 16px;
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-ink);
  background: var(--color-surface); cursor: pointer;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-md);
}
.gnav-burger__bars, .gnav-burger__bars::before, .gnav-burger__bars::after {
  content: ""; display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.gnav-burger__bars { position: relative; }
.gnav-burger__bars::before { position: absolute; top: -6px; }
.gnav-burger__bars::after  { position: absolute; top: 6px; }
.gnav-check:focus-visible + .gnav-burger {
  outline: var(--focus-ring); outline-offset: var(--focus-offset);
}

.gnav {
  display: none;               /* hidden until the checkbox is checked */
  flex-basis: 100%;            /* when shown, wraps to a full-width row */
  flex-direction: column; gap: 2px;
  padding: 10px 0 6px;
}
.gnav-check:checked ~ .gnav { display: flex; }

/* Rows: direct links, group summaries, panel links */
.gnav-link, .gnav-panel a, .gnav-group > summary {
  display: flex; align-items: center; min-height: var(--tap-min);
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--color-slate); text-decoration: none;
}
.gnav-link:hover, .gnav-panel a:hover { color: var(--color-blue-bright); }

.gnav-group > summary {
  list-style: none; cursor: pointer; justify-content: space-between;
  color: var(--color-ink); font-weight: var(--fw-bold);
}
.gnav-group > summary::-webkit-details-marker { display: none; }
.gnav-group > summary::after {
  content: "\25B8"; margin-left: 10px;
  color: var(--color-blue-bright); transition: transform var(--dur) var(--ease);
}
.gnav-group[open] > summary::after { transform: rotate(90deg); }
.gnav-panel { display: flex; flex-direction: column; padding-left: 14px; }

.gnav .nav__cta { justify-content: center; margin-top: 8px; }

/* ---- Desktop : horizontal bar with click-dropdowns --------------------- */
@media (min-width: 820px) {
  .gnav-burger { display: none; }
  .gnav {
    display: flex !important;   /* plain element — reliable force-show */
    flex-basis: auto; flex-direction: row; align-items: center; gap: 22px;
    padding: 0;
  }
  .gnav-link, .gnav-group > summary { min-height: 0; }
  .gnav-group { position: relative; }
  .gnav-group > summary { color: var(--color-slate); font-weight: var(--fw-semibold); }
  .gnav-group > summary:hover { color: var(--color-blue-bright); }

  .gnav-panel {
    display: none;                 /* closed by default; opened on hover/focus below */
    position: absolute; top: calc(100% + 14px); left: 0;
    min-width: 224px; padding: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); z-index: 60;
  }
  /* Invisible bridge so the pointer doesn't fall through the 14px gap between
     the summary and its panel (which would flicker the menu closed). */
  .gnav-group > .gnav-panel::before {
    content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
  }
  /* Open only the group under the pointer or keyboard focus; it closes the
     instant the pointer/focus leaves — so two panels can't be open at once. */
  .gnav-group:hover > .gnav-panel,
  .gnav-group:focus-within > .gnav-panel { display: flex; }
  .gnav-group:hover > summary::after,
  .gnav-group:focus-within > summary::after { transform: rotate(90deg); }
  .gnav-panel a { padding: 9px 12px; border-radius: 8px; }
  .gnav-panel a:hover { background: var(--color-blue-mist); }

  .gnav .nav__cta { margin-top: 0; }
}