/* Greenlake Martial Arts landing: section links in the header, the phone "Menu" sheet and the
   Back to top button (GMA-379, js/nav.js). Every value comes from tokens.css. */

/* ---------- section links ---------- */
.section-links { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: var(--gap-xs); }
.section-links li[hidden] { display: none; }
.nav-link[aria-current="true"] { box-shadow: inset 0 calc(-1 * var(--accent-w)) 0 var(--c-cta-bg); }
.nav-link:focus-visible { outline: var(--focus-w) solid var(--c-focus); outline-offset: calc(-1 * var(--focus-w)); }

/* Wide screens: the links sit in the header. */
@media (min-width: 900px) { .section-links { display: flex; } }

/* Phones without JS: Programs alone, as before GMA-379 (no menu without a script). Programs is the
   markup's second link; only js/nav.js moves it first (page order, GMA-381). */
@media (max-width: 899px) {
  html:not(.js) .section-links { display: flex; }
  html:not(.js) .section-links li { display: none; }
  html:not(.js) .section-links li:nth-child(2) { display: block; }
}

/* ---------- phone menu ---------- */
.nav-menu-btn {
  display: none; align-items: center; gap: var(--gap-xs); min-height: var(--touch); padding: 0 var(--gap-sm);
  font: inherit; font-weight: 700; font-size: var(--small-size); color: var(--c-text); cursor: pointer;
  background: transparent; border: var(--line-w) solid var(--c-line); border-radius: var(--radius-pill);
}
.nav-menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.nav-menu-btn[aria-expanded="true"] { border-color: var(--c-text); }
.nav-menu-btn:focus-visible { outline: var(--focus-w) solid var(--c-focus); outline-offset: var(--focus-offset); }
@media (max-width: 899px) { .js .nav-menu-btn { display: inline-flex; } }

.nav-sheet {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-surface); border-bottom: var(--line-w) solid var(--c-line); box-shadow: var(--shadow-card);
  padding: var(--gap-xs) var(--gutter) var(--gap);
}
.nav-sheet[hidden] { display: none; }
.nav-sheet-links { list-style: none; margin: 0 auto; padding: 0; max-width: var(--container); display: flex; flex-direction: column; }
.nav-sheet-links a {
  display: flex; align-items: center; min-height: var(--touch); padding: 0 var(--gap-sm);
  font-weight: 700; color: var(--c-text); text-decoration: none; border-radius: var(--radius-sm);
}
.nav-sheet-links a:hover { background: var(--c-surface-raised); }
.nav-sheet-links a[aria-current="true"] { box-shadow: inset var(--accent-w) 0 0 var(--c-cta-bg); }
.nav-sheet-links a:focus-visible { outline: var(--focus-w) solid var(--c-focus); outline-offset: calc(-1 * var(--focus-w)); }

/* ---------- back to top ---------- */
/* Stacked right above the WhatsApp bubble, so the two never overlap. */
.to-top {
  position: fixed; right: calc(var(--gutter) + (var(--wa-bubble-size) - var(--touch)) / 2);
  bottom: calc(var(--gutter) + var(--wa-bubble-size) + var(--gap-sm)); z-index: 44;
  width: var(--touch); height: var(--touch); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface-raised); color: var(--c-text); border: var(--line-w) solid var(--c-line);
  box-shadow: var(--shadow-bubble); text-decoration: none;
}
.to-top[hidden] { display: none; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { border-color: var(--c-text); }
.to-top:focus-visible { outline: var(--focus-w) solid var(--c-focus); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: no-preference) {
  .to-top { transition: transform var(--ease); }
  .to-top:hover { transform: translateY(-2px); }
}