/* ============================================================
   Site nav + Explore block — shared cross-page navigation chrome
   for the standalone content pages (off-ice.html, resources.html).

   Why this file exists: these pages are self-contained static HTML
   with their own inline <style>. Before this, the only way off them
   was the wordmark in the top-left, so anyone landing from a shared
   link (a coach texting /off-ice, an Instagram post) hit a dead end.

   Why the markup is static HTML in each page rather than injected by
   a script the way marketplace/header.js does it: header.js renders
   auth-dependent chrome, which genuinely has to be client-side. A nav
   does not. Keeping it in the HTML means the cross-page links are
   crawlable — internal linking is half the point of adding it — and
   there is no flash of a nav-less header before JS runs.

   Two navigation vocabularies live on these pages; keep them distinct:
     .site-nav  — text links, go to ANOTHER page (this file)
     .help-nav  — rounded pills, jump WITHIN this page (page's own CSS)

   Palette is copied from the pages' inline styles rather than shared
   custom properties, since these pages define no :root tokens.
   Gold #cbb15c matches .mp-brand-dot.
   ============================================================ */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  /* Pushes the nav to the right of the brand/title on desktop. The
     header is a flex row on both pages; see each page's .legal-header. */
  margin-left: auto;
}

.site-nav a {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}

.site-nav a:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.site-nav a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Current page: darker text plus a gold underline. Set with
   aria-current="page" so the styling and the accessible state can
   never drift apart the way a decorative .active class lets them. */
.site-nav a[aria-current="page"] {
  color: #0f172a;
  box-shadow: inset 0 -2px 0 #cbb15c;
}

/* Windows High Contrast paints neither box-shadow nor our color, which
   would leave every link looking identical. Underline instead — it
   survives forced-colors and, unlike a border, costs no layout height. */
@media (forced-colors: active) {
  .site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* The nav drops to its own full-width row under the brand and wraps across
   two lines. Deliberately NOT a hamburger — the goal here is making people
   aware the other sections exist, and links hidden behind a toggle cannot
   advertise. The header is not sticky on these pages, so the extra height
   simply scrolls away.

   820px, not 640px: off-ice.html's header carries a title as well as the
   brand, so brand + "Off-Ice Training" + links stop fitting on one line
   around 780px. The header's own flex-wrap moves the nav to a second row
   there regardless — but margin-left:auto would still be in effect on that
   row and would pin the links right, so the same wrapped nav would be
   right-aligned at 700px and left-aligned at 600px. Resetting the margin
   across the whole band keeps one wrapped appearance, and keeps the two
   pages looking alike even though only one of them has a header title. */
@media (max-width: 820px) {
  .site-nav {
    margin-left: 0;
    width: 100%;
  }
}

/* Sizing is a separate question from alignment, so it keeps its own,
   narrower breakpoint: shrink the links only once the screen is phone-width. */
@media (max-width: 640px) {
  .site-nav {
    gap: 0.1rem;
  }
  .site-nav a {
    font-size: 0.8rem;
    padding: 0.5rem 0.55rem;
  }
}

/* Touch targets are a function of the input device, not the viewport — a
   768px tablet needs the same 44px as a phone, while a narrow desktop
   window does not. Keyed off pointer: coarse rather than a width so the
   two do not have to agree. */
@media (pointer: coarse) {
  .site-nav a { min-height: 44px; }
}

/* ------------------------------------------------------------
   Explore block — the onward journey at the end of the page.

   Separate job from the nav above: someone who has scrolled to the
   bottom of a long page has intent to do something next and will not
   scroll back up to a header. Ported from the .oi-explore card that
   already shipped inside the Off-Ice Buddy app (off-ice/buddy/train.css),
   restyled into this page palette and split into three destinations.
   ------------------------------------------------------------ */

.site-explore {
  margin: 3rem 0 0;
}

.site-explore-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.site-explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

@media (max-width: 760px) {
  .site-explore-grid { grid-template-columns: 1fr; }
}

.site-explore-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s;
}

.site-explore-card:hover {
  border-color: #cbb15c;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.site-explore-card:active { transform: translateY(1px); }

.site-explore-card:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.site-explore-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.site-explore-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-explore-text strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.site-explore-text span {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
}

/* Respect a reduced-motion preference: the lift on hover is decorative. */
@media (prefers-reduced-motion: reduce) {
  .site-nav a,
  .site-explore-card {
    transition: none;
  }
  .site-explore-card:hover,
  .site-explore-card:active {
    transform: none;
  }
}

/* ============================================================
   Brand mark

   The header brand has always been text — "AxelNest" plus a small gold
   dot — so the logo itself appeared only in the browser tab. This puts
   the mark next to the wordmark.

   Serves the pages that style their own chrome inline (off-ice,
   resources, help, privacy, terms). The 16 pages on marketplace.css get
   an identical copy from there, so they need no extra stylesheet —
   change one, change the other.
   ============================================================ */
/* nowrap + no shrink: .mp-brand-mark is an inline <img> sitting straight
   before the "AxelNest" text node, so in a tight flex row the browser
   takes the line-break opportunity between them and stacks the mark on
   top of the wordmark — at ~400px and below, i.e. every iPhone up to the
   15/16 standard width. Pinning the brand and letting the sibling <h1> /
   .mp-back absorb the squeeze keeps the header one row tall.

   Kept in sync with the copy in marketplace.css. */
.mp-brand { white-space: nowrap; flex-shrink: 0; }

/* Deliberately not a flex container: making .mp-brand inline-flex turns
   the wordmark and the trailing gold dot into separate flex items, and
   any gap then pushes the dot off the word — "AxelNest ." not
   "AxelNest." Normal inline flow keeps the font's own spacing. */
.mp-brand-mark {
  height: 1.15em;
  width: auto;
  vertical-align: middle;
  /* optical nudge: the mark's centre sits low against the serif cap-height */
  margin: -0.16em 0.34em 0 0;
}

/* Narrow phones: give back a few pixels. These headers already run tight
   at 360px (back-link + title + account actions), and the mark must not be
   what tips one into a horizontal scrollbar. */
@media (max-width: 400px) {
  .mp-brand-mark { height: 1em; margin-right: 0.28em; }
}