/* ─────────────────────────────────────────────────────────────────────────
   site.css — OPTIONAL public-marketing stylesheet (the "public-site half").
   Loaded ONLY by pages/home.php (via Site::cssLinks), never by the internal
   tool. var(--token) ONLY - no raw colors or sizes; brand values live in
   theme.css. Every class is namespaced .site-* so it can never collide with
   the tool's styles. Delete this file with the rest of the public half if the
   project is internal-tool only.

   It is a neutral SKELETON on purpose: the persuasion structure and a11y are
   fixed here; the brand/creativity is deferred to theme.css + the design skill.
   ───────────────────────────────────────────────────────────────────────── */

body.site { background: var(--bg-page); color: var(--text); }

.site-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Skip link - visible only on keyboard focus */
.site-skip-link {
  position: absolute;
  left: var(--space-3);
  top: calc(-1 * var(--space-8));
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.site-skip-link:focus { top: var(--space-3); }

/* Section rhythm + anchor offset so #hash targets clear the header */
.site-section { padding-block: var(--space-8); }
[id] { scroll-margin-top: var(--space-7); }

/* ── Header / nav ─────────────────────────────────────────────────────────── */
.site-header { background: var(--bg-page); border-bottom: 1px solid var(--border); }
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-3);
  min-height: var(--control-min);
}
.site-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
}
.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.site-nav a { color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; }
.site-nav a:hover { color: var(--text); text-decoration: none; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.2;
  text-align: center;
}
.site-btn:hover  { text-decoration: none; filter: brightness(.97); }
.site-btn:active { transform: translateY(1px); }
.site-btn-primary   { background: var(--color-accent); color: var(--color-on-accent); }
.site-btn-secondary { background: var(--bg-page); color: var(--text); border-color: var(--border-strong); }
.site-btn-ghost     { background: transparent; color: currentColor; border-color: currentColor; }

.site-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.site-hero { background: var(--color-primary); color: var(--color-on-primary); }
.site-eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: color-mix(in srgb, var(--color-on-primary) 78%, transparent);
}
.site-hero h1 {
  color: var(--color-on-primary);
  font-size: var(--fs-h1);
  margin-block: var(--space-3);
  max-width: 22ch;
}
.site-hero p {
  color: color-mix(in srgb, var(--color-on-primary) 90%, transparent);
  font-size: var(--fs-lg);
  max-width: 55ch;
  margin-bottom: var(--space-5);
}

/* ── Social proof ─────────────────────────────────────────────────────────── */
.site-proof { background: var(--bg-page); text-align: center; }
.site-proof blockquote {
  max-width: 42ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--text);
}
.site-proof figcaption { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-soft); }

.site-section-title { font-size: var(--fs-h2); text-align: center; margin-bottom: var(--space-6); }

/* ── Features ─────────────────────────────────────────────────────────────── */
.site-features { background: var(--bg-sunken); }
.site-feature-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.site-feature {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.site-feature h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.site-feature p  { color: var(--text-soft); font-size: var(--fs-md); }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.site-cta { background: var(--bg-page); text-align: center; }
.site-cta p { max-width: 48ch; margin: var(--space-3) auto var(--space-5); color: var(--text-soft); font-size: var(--fs-lg); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--border); padding-block: var(--space-6); color: var(--text-soft); font-size: var(--fs-sm); }
.site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-footer a  { color: var(--text-soft); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* sr-only - self-contained (utilities.css is not loaded on the public page) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sign in sits in the header: a returning coach is the commonest visitor. */
.site-signin { margin-left: auto; }
.site-header-inner { gap: var(--space-4); }

/* The wordmark, for the public page. site.css is a self-contained bundle — it
   does not load sideline.css — so the rule has to live here too rather than be
   inherited from the app. */
.site-brand .wordmark { font-weight: 800; letter-spacing: -0.035em; }
.site-brand .wordmark i { font-style: normal; color: var(--color-accent, var(--color-primary)); }

/* Legal pages and the contact form. Long-form reading, so a measure that does
   not run the full width of a desktop screen. */
.site-prose { max-width: 46rem; }
.site-prose h2 { margin-top: 2rem; }
.site-prose h3 { margin-top: 1.25rem; font-size: 1rem; }
.site-prose ul { margin: 0 0 1rem 1.25rem; }
.site-prose li { margin-bottom: .35rem; }
.site-updated { font-size: .875rem; opacity: .7; }
.site-callout {
  padding: 1rem; border-left: 3px solid var(--color-accent, var(--color-primary));
  background: rgba(0,0,0,.03);
}
.site-form { display: grid; gap: .35rem; margin-top: 1.5rem; max-width: 34rem; }
.site-form label { font-weight: 600; margin-top: .75rem; }
.site-form input, .site-form textarea {
  padding: .6rem .7rem; border: 1px solid rgba(0,0,0,.25); border-radius: 4px;
  font: inherit; width: 100%;
}
.site-hint { font-weight: 400; opacity: .7; }
/* The consent block is deliberately full-size body text, not fine print — the
   disclosures only work if they are actually read. */
.site-consent {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  align-items: start; margin-top: 1.25rem; font-weight: 400;
  padding: 1rem; border: 1px solid rgba(0,0,0,.15); border-radius: 4px;
}
.site-consent input { width: auto; margin-top: .2rem; }
.sidebar-legal { display: block; margin-top: .35rem; opacity: .8; }
.sidebar-legal a { color: inherit; }