/* Forge Fitness — first-party gym / fitness-studio template (S113).
   First-party layout and interaction system with locally bundled, provenance-recorded Pexels stills
   and deferred Pexels movement footage. */

:root {
  /* Theming for the shared accessibility panel (library/shared/a11y/). */
  --a11y-ink: var(--ink);
  --a11y-surface: var(--card);
  --a11y-line: var(--line);
  --a11y-radius: var(--radius);
  --a11y-sans: var(--sans);

  --ink: #111318;
  --ink-soft: #1d212a;
  --volt: #c6f24a;
  --volt-deep: #a6d92c;
  --slate: #5b6472;
  --paper: #f4f5f2;
  --card: #ffffff;
  --line: #dfe2dc;
  --muted: #545b66;
  --radius: 10px;
  --display: "Archivo", "Helvetica Neue", "Arial Black", Arial, sans-serif;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* text-safe accents (S116): same hue and saturation, darkened only in lightness
     until they meet WCAG AA on white. The bright originals stay for fills and art. */
  --volt-deep-text: #5a7615;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.04; letter-spacing: -0.01em; text-transform: uppercase; }
a { color: inherit; }
ul, ol { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 10;
  background: var(--volt); color: var(--ink); padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
  transition: top 0.15s ease; font-weight: 700;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--volt-deep); outline-offset: 2px; }

/* ---------- Header + navigation ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.25rem; background: var(--ink); color: var(--paper);
  border-bottom: 3px solid var(--volt); position: relative;
}
.wordmark {
  font-family: var(--display); font-size: 1.4rem; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; text-decoration: none; color: var(--paper); white-space: nowrap;
}
.wordmark span[aria-hidden] { color: var(--volt); }
.nav-disclosure summary {
  list-style: none; cursor: pointer; user-select: none;
  font-weight: 700; padding: 0.5rem 1rem; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1.5px solid var(--slate); border-radius: var(--radius); color: var(--paper);
}
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--volt); color: var(--ink); border-color: var(--volt); }
.nav-disclosure nav {
  position: absolute; right: 1rem; left: 1rem; top: calc(100% + 0.4rem); z-index: 9;
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--ink-soft); border: 1px solid var(--slate); border-radius: var(--radius);
  padding: 0.75rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}
.nav-disclosure nav a:not(.button) { text-decoration: none; font-weight: 600; padding: 0.55rem 0.75rem; border-radius: 6px; color: var(--paper); }
.nav-disclosure nav a:not(.button):hover { background: var(--slate); }

/* Desktop inline nav is OPTED INTO by main.js (matchMedia adds .nav-inline and sets [open]).
   A closed <details> does not render its children, so pure CSS cannot inline this menu at desktop
   widths — without JavaScript the summary button stays visible and usable instead. */
.nav-disclosure.nav-inline summary { visibility: hidden; pointer-events: none; }
.nav-disclosure.nav-inline nav {
  position: absolute; right: 0; left: auto; top: 50%; transform: translateY(-50%);
  flex-direction: row; align-items: center; gap: 0.35rem;
  background: none; border: 0; padding: 0; box-shadow: none;
}
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0.7rem; }

.header-call { display: none; }
@media (max-width: 799px) {
  .site-header { gap: 0.6rem; }
  .header-call { display: inline-block; margin-left: auto; }
}
@media (max-width: 479px) {
  .site-header { padding: 0.8rem 0.9rem; gap: 0.45rem; }
  .wordmark { font-size: 1.15rem; }
  .header-call { font-size: 0.9rem; }
  .nav-disclosure summary { padding: 0.42rem 0.7rem; font-size: 0.9rem; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 800; font-family: var(--display); font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--volt); color: var(--ink);
  border: 1.5px solid var(--volt); border-radius: var(--radius);
  padding: 0.8rem 1.5rem; cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.button:hover { background: var(--volt-deep); border-color: var(--volt-deep-text); transform: translateY(-1px); }
.button-small { padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.button-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.button-ghost:hover { background: rgba(17, 19, 24, 0.07); }
.button-outline { background: transparent; color: var(--paper); border-color: var(--slate); }
.button-outline:hover { background: rgba(244, 245, 242, 0.1); border-color: var(--paper); }
.button-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button-light:hover { background: #fff; }
.call-link { font-weight: 700; color: var(--volt-deep-text); text-decoration: none; white-space: nowrap; }
.header-call { color: var(--volt); }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: var(--paper); padding: 3.25rem 1.25rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; }
.hero-inner { min-width: 0; max-width: 68rem; margin: 0 auto; width: 100%; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.9fr); } }
.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--volt); margin-bottom: 1rem;
}
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); max-width: 15ch; }
.hero h1 .lit { color: var(--volt); }
.hero-sub { margin-top: 1rem; font-size: 1.15rem; max-width: 44ch; color: #c3c9d1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
/* ⛔ S186 — its OWN colour, not --slate. The trust line measured 3.11:1 on the near-black hero,
   but --slate is also the BACKGROUND of .card-tags li.tag-muted with light text on it, so
   lightening the token would have fixed this line and broken that pair (paper on slate
   6.16:1 -> 3.71:1). ✓ MEASURED: #7b828d on --ink = 4.80:1. */
.hero-trust { margin-top: 1rem; font-size: 0.92rem; color: #7b828d; font-weight: 600; }

/* ---------- First-session finder ---------- */
.hero-side { position: relative; min-width: 0; min-height: 26rem; }
.hero-media { position: absolute; inset: 0; margin: 0; overflow: hidden; border: 1px solid var(--slate); border-radius: var(--radius); background: #13151b; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-media figcaption { position: absolute; top: 0.75rem; right: 0.75rem; left: 0.75rem; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.55rem 0.7rem; border-radius: 6px; background: rgba(17, 19, 24, 0.88); color: #fff; font-size: 0.76rem; line-height: 1.3; letter-spacing: 0.04em; }
.hero-media figcaption strong { letter-spacing: 0.12em; }
.class-finder { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; padding: 1rem; background: rgba(17, 19, 24, 0.94); border: 1px solid var(--volt); border-radius: var(--radius); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); }
.finder-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.finder-heading > div { min-width: 0; }
.finder-heading p:last-child { margin-top: 0.2rem; color: #c3c9d1; font-size: 0.9rem; }
.finder-kicker { color: var(--volt); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.finder-mark { flex: 0 0 auto; font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: var(--volt); line-height: 1; }
.finder-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.9rem; }
.finder-fields .field { min-width: 0; }
.finder-fields .field label { display: block; color: var(--paper); font-size: 0.84rem; font-weight: 700; }
.finder-fields select { min-width: 0; }
.class-finder select { width: 100%; min-height: 44px; margin-top: 0.3rem; padding: 0.55rem 0.6rem; color: var(--ink); background: var(--paper); border: 1px solid var(--slate); border-radius: 6px; font: inherit; }
.class-finder > .button { width: 100%; margin-top: 0.85rem; }
.finder-note { margin-top: 0.65rem; color: #aab1bb; font-size: 0.78rem; }
.finder-status { display: grid; gap: 0.35rem; margin-top: 0.7rem; color: var(--paper); font-size: 0.9rem; }
.finder-status a { width: fit-content; color: var(--volt); font-weight: 800; text-underline-offset: 3px; }

/* ---------- Section frame + filter strip ---------- */
.section { max-width: 68rem; margin: 0 auto; padding: 2.75rem 1.25rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2, .band h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.section-intro { margin-top: 0.5rem; max-width: 54ch; color: var(--muted); }
.filter-count { color: var(--ink); font-weight: 800; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; }

.strip { background: var(--ink-soft); padding: 1.25rem; }
.filter-form {
  max-width: 68rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: end;
}
@media (min-width: 700px) { .filter-form { grid-template-columns: 1fr 1fr auto; } }
.filter-form .field label { color: var(--paper); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.filter-form select {
  width: 100%; margin-top: 0.3rem; padding: 0.65rem 0.7rem;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--slate); border-radius: 6px;
}

/* ---------- Card grids ---------- */
.item-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.5rem; }
@media (min-width: 620px) { .item-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .item-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(17, 19, 24, 0.14); }
.card-body { padding: 1.1rem 1.2rem 1.3rem; }
.card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.card-title { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.01em; }
.card-when { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--volt-deep-text); white-space: nowrap; }
.card-meta { margin-top: 0.35rem; color: var(--muted); font-size: 0.96rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.card-tags li {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--volt);
  border-radius: 4px; padding: 0.2rem 0.55rem;
}
.card-tags li.tag-muted { color: var(--paper); background: var(--slate); }
.filter-empty { margin-top: 1.5rem; padding: 1.25rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- Media ---------- */
.card-art { height: 150px; background-color: #13151b; background-repeat: no-repeat; display: block; width: 100%; object-fit: cover; }
/* ---------- Timetable ---------- */
.timetable { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 620px) { .timetable { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .timetable { grid-template-columns: repeat(4, 1fr); } }
.day { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.day h3 { background: var(--ink); color: var(--paper); font-size: 1rem; padding: 0.6rem 1rem; letter-spacing: 0.05em; }
.day ul { padding: 0.75rem 1rem 1rem; }
.day li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.day li:last-child { border-bottom: 0; }
.day .slot-time { font-weight: 700; color: var(--volt-deep-text); }

/* ---------- Feature grid + bands ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature-grid li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; border-left: 4px solid var(--volt); }
.feature-grid h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }

.split {
  max-width: 68rem; margin: 0 auto 2.75rem; padding: 1.6rem 1.25rem;
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.split h2 { font-size: 1.6rem; }
.split h2 .lit { color: var(--volt); }
.split p { max-width: 52ch; margin-top: 0.3rem; color: #c3c9d1; }

.band { background: var(--volt); color: var(--ink); padding: 3.25rem 1.25rem; text-align: center; }
.band p { max-width: 52ch; margin: 0.75rem auto 1.4rem; color: #33381f; }

/* ---------- Interior pages ---------- */
.page { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.breadcrumb a { font-weight: 600; text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero { padding: 1.25rem 0 0.5rem; }
.page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.page-hero p { margin-top: 0.75rem; max-width: 54ch; color: var(--muted); }

/* ---------- Forms (preview-safe) ---------- */
.form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 860px) { .form-layout { grid-template-columns: 1.4fr 1fr; } }
.book-form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-self: start;
}
@media (min-width: 620px) { .book-form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.label-optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.75rem;
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}
.book-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--ink); min-height: 1.4em; }

.panel { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 1.5rem; align-self: start; }
.panel h2 { font-size: 1.4rem; }
.panel h2 .lit { color: var(--volt); }
.plans { margin-top: 1rem; }
.plans div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--slate); }
.plans div:last-child { border-bottom: 0; }
.plans dt { font-weight: 600; }
.plans dd { font-weight: 800; font-family: var(--display); color: var(--volt); }
.note { margin-top: 1.5rem; color: var(--muted); font-size: 0.95rem; max-width: 60ch; }
.panel .note { color: #aab1bb; }

/* ---------- Footer ---------- */
footer {
  background: var(--ink); color: #aab1bb;
  padding: 2.25rem 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem;
}
.wordmark-footer { font-family: var(--display); font-size: 1.3rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--paper); }
footer .call-link { color: var(--volt); }
.footer-truth { max-width: 34ch; font-size: 0.88rem; color: #7b828e; align-self: end; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .button:hover, .card:hover { transform: none; }
}

/* Build credit — carried by every template in this library, matching the deployed demos.
   Colour is inherited rather than fixed so this single rule works on every footer palette. */
.footer-powered { margin-top: 0.9rem; font-size: 0.85rem; opacity: 0.8; }
.footer-powered a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { opacity: 0.85; }

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). The S116 polish pass measured the header phone link at 23px
   and the Menu button at 35px on a 390px viewport, on every template in the library.
   On a trades site the phone number IS the conversion — it was rendering at half the
   required size at exactly the width most visitors arrive on.

   Layout only, no colour, so this block is copy-paste identical across every palette
   in the library. Inline links inside prose are deliberately NOT touched: both WCAG
   target-size rules exempt them, and padding them out would wreck the body copy. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- Atmosphere band (video) ---------- */
.atmos { position: relative; overflow: hidden; background: #14171c; }
.atmos-media { display: block; width: 100%; height: clamp(220px, 42vw, 460px); object-fit: cover; }
.atmos-caption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 0.7rem 1.25rem; font-size: 0.85rem; letter-spacing: 0.04em;
  color: #ffffff; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
}

/* --- Accessibility: the two modes only this palette can define ------ S186
   Everything else the panel does is name-independent and lives in the shared
   library/shared/a11y/a11y.css. These two must name THIS template's own variables — the 20
   templates do not share a vocabulary. check-library-a11y.mjs fails the build without both.
   ⚠ A boundary token goes to INK even when its value is light. */
html[data-a11y-contrast="high"] {
  --ink: #000; --ink-soft: #000; --slate: #000; --muted: #000; --volt-deep-text: #000;
  --line: #000;
  --volt: #fff; --volt-deep: #fff; --paper: #fff; --card: #fff;
}
html[data-a11y-contrast="high"] footer,
html[data-a11y-contrast="high"] .footer-truth,
html[data-a11y-contrast="high"] .footer-powered,
html[data-a11y-contrast="high"] .hero-trust { color: #fff; }
html[data-a11y-contrast="high"] .hero-media figcaption,
html[data-a11y-contrast="high"] .class-finder { background: #000; color: #fff; border-color: #fff; }
html[data-a11y-contrast="high"] .class-finder select { background: #fff; color: #000; border-color: #000; }
html[data-a11y-contrast="high"] .button-outline { color: #fff; border-color: #fff; }

/* Okabe-Ito. ⚠ Volt is a yellow-green — the single worst hue for deuteranopia, and it is this
   template's whole identity. It moves to the universal orange, which keeps the "high energy"
   read while actually separating from the slate. */
html[data-a11y-colour="safe"] {
  --volt: #e69f00; --volt-deep: #b87f00; --volt-deep-text: #7a5400;
}