/* Greenlake Martial Arts landing: "Try a class" section, demo booking form and the policy page
   (GMA-153). Every value comes from tokens.css. Mobile first, works from 360px wide. */

/* ---------- demo list ---------- */
.demo-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap-lg); }
.demo-card {
  background: var(--c-bg); border: var(--line-w) solid var(--c-line); border-top: var(--accent-w) solid var(--c-cta-bg);
  border-radius: var(--radius-lg); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--gap-sm);
}
.demo-title { font-size: var(--h3-size); line-height: var(--h3-lh); }
.demo-focus { color: var(--c-muted); }
.demo-facts { display: flex; flex-direction: column; gap: var(--gap-xs); }
.demo-facts li { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.demo-fact-label {
  color: var(--c-muted); font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
}
.demo-tags { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.demo-tag {
  padding: 2px 10px; border-radius: var(--radius-pill); border: var(--line-w) solid var(--c-line);
  font-size: var(--small-size); font-weight: 600;
}
.demo-tag-full { border-color: var(--c-error-text); color: var(--c-error-text); }
/* GMA-367: the soonest class leads, later dates step back (gray accent, outlined button) */
.demo-rank { align-self: flex-start; }
.demo-card-next .demo-rank { background: var(--c-next-tag-bg); border-color: var(--c-cta-bg); }
.demo-card-later { border-top-color: var(--c-line); }
.demo-card-later .demo-rank { color: var(--c-muted); }
.demo-card-later .demo-book { border-color: var(--c-muted); }
.demo-card-later .demo-book:hover { border-color: var(--c-text); }
.demo-book { margin-top: auto; align-self: stretch; }
.demo-book:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
@media (min-width: 640px) {
  .demo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-book { align-self: flex-start; }
}
@media (min-width: 1000px) { .demo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.demo-empty {
  margin-top: var(--gap-lg); background: var(--c-bg); border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--gap-sm);
  max-width: var(--dialog-max-w);
}
.demo-empty-title { font-weight: 800; font-size: var(--h3-size); line-height: var(--h3-lh); }
.demo-empty-text { color: var(--c-muted); }
.demo-empty-actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: var(--gap-xs); }
#classes-title:focus { outline: none; }
#classes-title:focus-visible { outline: var(--focus-w) solid var(--c-focus); outline-offset: var(--focus-offset); }

/* ---------- free first class list (GMA-379) ---------- */
/* Grouped by week, one row per class: date box, class and time, tags, Book. The soonest open class
   carries the GMA-367 "Next class" accent (red border and inset bar, filled Book). */
.free-list { margin-top: var(--gap-lg); display: flex; flex-direction: column; gap: var(--gap-lg); max-width: var(--free-list-max-w); }
.free-group { display: flex; flex-direction: column; gap: var(--gap-sm); }
.free-week {
  color: var(--c-muted); font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
}
.free-slots { display: flex; flex-direction: column; gap: var(--gap-sm); }
.free-slot {
  display: grid; grid-template-columns: var(--free-date-w) minmax(0, 1fr) auto; gap: var(--gap-sm); align-items: center;
  background: var(--c-bg); border: var(--line-w) solid var(--c-line); border-radius: var(--radius-md); padding: var(--gap-sm);
}
.free-slot-next { border-color: var(--c-cta-bg); box-shadow: inset var(--accent-w) 0 0 var(--c-cta-bg); }
.free-date { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.free-dow { color: var(--c-muted); font-size: var(--label-size); font-weight: 700; letter-spacing: var(--free-dow-ls); }
.free-day { font-size: var(--h3-size); font-weight: 800; font-variant-numeric: tabular-nums; }
.free-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.free-title { overflow-wrap: anywhere; }
.free-time { color: var(--c-muted); font-size: var(--small-size); font-variant-numeric: tabular-nums; }
.free-tags { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-top: 2px; }
.free-tag-next { background: var(--c-next-tag-bg); border-color: var(--c-cta-bg); }
.free-tag-audience[data-audience="teen"] { background: var(--c-teen-bg); border-color: var(--c-teen-bg); color: var(--c-teen-text); }
.free-tag-audience[data-audience="women"] { background: var(--c-womens-bg); border-color: var(--c-womens-bg); color: var(--c-womens-text); }
.free-book { padding: 8px 16px; font-size: var(--small-size); }
.free-slot:not(.free-slot-next) .free-book { border-color: var(--c-muted); }
.free-slot:not(.free-slot-next) .free-book:hover { border-color: var(--c-text); }
.free-book:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.free-more { margin-top: var(--gap); }

/* ---------- booking dialog ---------- */
/* GMA-379 round 2: a column of three parts. The head (title, close, the class box) and the foot
   (the button) stay put; only .booking-body scrolls, and a wheel or swipe that reaches its end
   stops there (overscroll-behavior), while js/scroll-lock.js keeps the page behind still. */
.booking {
  width: calc(100% - 2 * var(--gutter)); max-width: var(--dialog-max-w); max-height: var(--dialog-max-h);
  margin: auto; padding: 0; border: var(--line-w) solid var(--c-line); border-radius: var(--radius-lg);
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-card); overflow: hidden;
  overscroll-behavior: contain;
}
.booking[open] { display: flex; flex-direction: column; }
.booking::backdrop { background: var(--c-backdrop); }
.booking-head {
  flex: none; display: flex; flex-direction: column; gap: var(--gap-sm);
  padding: var(--gap-sm) var(--card-pad) var(--gap-sm); background: var(--c-surface);
  border-bottom: var(--line-w) solid var(--c-line);
}
.booking-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); }
.booking-title { font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: 700; margin: 0; }
.booking-close {
  flex: none; width: var(--touch); height: var(--touch); display: grid; place-items: center; margin-right: calc(-1 * var(--gap-xs));
  border: 0; border-radius: 50%; background: transparent; color: var(--c-text); cursor: pointer;
}
.booking-close:hover { background: var(--c-surface-raised); }
.booking-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

/* The class being booked, always in view: a red-tinted box (contrast in tokens.css). */
.booking-class-box {
  display: flex; flex-direction: column; gap: 1px; padding: var(--class-box-pad);
  background: var(--c-class-box-bg); border: var(--line-w) solid var(--c-cta-bg); border-radius: var(--radius-sm);
}
.booking-class-kicker {
  color: var(--c-class-box-kicker); font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: var(--free-dow-ls);
  text-transform: uppercase;
}
.booking-class-name { font-weight: 800; font-size: var(--body-size); color: var(--c-text); }
.booking-class-when { color: var(--c-class-box-when); font-size: var(--small-size); font-variant-numeric: tabular-nums; }

.booking-form, .booking-success, .booking-refused { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.booking-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--gap) var(--card-pad); display: flex; flex-direction: column; gap: var(--booking-gap);
}
.booking-foot {
  flex: none; display: flex; flex-direction: column; gap: var(--gap-xs);
  padding: var(--gap-sm) var(--card-pad) var(--gap); background: var(--c-surface);
  border-top: var(--line-w) solid var(--c-line);
}
.booking-required { color: var(--c-muted); font-size: var(--small-size); }

/* Fields (GMA-326): quiet labels, 1px borders, and a red focus accent instead of the white ring.
   The focus border is a light tint of the brand red (3:1 against the navy, see tokens.css); the
   1px shadow doubles it to a 2px line and the brand-red glow around it is decoration only. */
.field { display: flex; flex-direction: column; gap: var(--gap-xs); min-width: 0; }
.field label, .waiver-label { font-weight: 500; font-size: var(--label-size); color: var(--c-label); }
.field-req { color: var(--c-muted); font-weight: 400; }
.field-optional { color: var(--c-muted); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select {
  width: 100%; min-height: var(--touch); padding: var(--input-pad);
  font: inherit; color: var(--c-text); background: var(--c-input-bg);
  border: var(--line-w) solid var(--c-input-border); border-radius: var(--radius-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field textarea { resize: vertical; }
/* Same specificity as the field rule above so it wins; the focus rule below still wins over it. */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--c-field-error); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--c-field-focus);
  box-shadow: 0 0 0 var(--line-w) var(--c-field-focus), 0 0 0 var(--field-glow-w) var(--c-field-focus-glow);
}
.field input::placeholder { color: var(--c-muted); }
.field-hint { color: var(--c-muted); font-size: var(--small-size); }
.field-error { color: var(--c-field-error); font-size: var(--small-size); font-weight: 400; }
.field-error:empty { display: none; }

/* The booking dialog's fields are compact (GMA-379): shorter inputs on phones. The controls that
   are tapped (switch, checkbox, links, buttons) keep the 44px touch target. */
.booking .field input[type="text"], .booking .field input[type="email"], .booking .field input[type="tel"], .booking .field select {
  min-height: var(--input-h-compact); padding: var(--input-pad-compact);
}
.booking .field select { appearance: auto; }

/* Two fields side by side on wider screens (email and phone; T-shirt size and Under 18?). */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--booking-gap); align-items: end; }
@media (min-width: 520px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Under 18?" (GMA-379): a switch, 44px tall to tap, drawn as a compact pill. */
.minor-switch {
  width: 100%; min-height: var(--touch); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm);
  padding: 0 var(--gap-sm); font: inherit; font-size: var(--small-size); color: var(--c-text); cursor: pointer;
  background: var(--c-input-bg); border: var(--line-w) solid var(--c-input-border); border-radius: var(--radius-sm);
}
.minor-switch:focus-visible {
  outline: none; border-color: var(--c-field-focus);
  box-shadow: 0 0 0 var(--line-w) var(--c-field-focus), 0 0 0 var(--field-glow-w) var(--c-field-focus-glow);
}
.switch-track {
  position: relative; flex: none; width: var(--switch-w); height: var(--switch-h); border-radius: var(--radius-pill);
  background: var(--c-surface-raised); border: var(--line-w) solid var(--c-input-border); transition: background var(--ease);
}
.switch-thumb {
  position: absolute; top: 50%; left: var(--switch-gap); width: var(--switch-thumb); height: var(--switch-thumb);
  border-radius: 50%; background: var(--c-muted); transform: translateY(-50%); transition: left var(--ease), background var(--ease);
}
.minor-switch[aria-checked="true"] .switch-track { background: var(--c-cta-bg); border-color: var(--c-cta-bg); }
.minor-switch[aria-checked="true"] .switch-thumb { left: calc(var(--switch-w) - var(--switch-thumb) - var(--switch-gap) - 2 * var(--line-w)); background: var(--c-cta-text); }

/* The participant and the parent or guardian (GMA-379): framed by a red border, no tint. */
.minor-box {
  display: flex; flex-direction: column; gap: var(--booking-gap); padding: var(--minor-box-pad);
  border: var(--line-w) solid var(--c-cta-bg); border-radius: var(--radius-sm);
}
.minor-box-title { font-weight: 700; font-size: var(--small-size); }

/* Text-styled buttons: "+ Add a question", "Read full text". */
.link-button {
  align-self: flex-start; min-height: var(--touch); padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--small-size); font-weight: 600; color: var(--c-link-accent); text-align: left;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-button:focus-visible { outline: var(--check-focus-w) solid var(--c-field-focus); outline-offset: var(--check-focus-w); }
.question-block { display: flex; flex-direction: column; gap: var(--gap-xs); }

/* The waiver: two lines until "Read full text" opens it all (the whole text is always in the
   page, so what is signed never changes). */
.waiver-box {
  display: flex; flex-direction: column; gap: var(--gap-xs); padding: var(--input-pad);
  background: var(--c-input-bg); border: var(--line-w) solid var(--c-input-border); border-radius: var(--radius-sm);
}
.waiver-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); }
.waiver-text {
  font-size: var(--small-size); color: var(--c-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.waiver-text.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }

.check { display: flex; align-items: center; gap: var(--gap-sm); min-height: var(--touch); }
.check input { width: var(--check-size); height: var(--check-size); flex: none; accent-color: var(--c-cta-bg); cursor: pointer; }
.check input:focus-visible { outline: var(--check-focus-w) solid var(--c-field-focus); outline-offset: var(--check-focus-w); }
.check label { font-weight: 400; font-size: var(--body-size); cursor: pointer; }
/* A smaller box in the booking dialog; the row (and the label) keep the 44px touch height. */
.check-sm input { width: var(--check-size-sm); height: var(--check-size-sm); }
.check-sm label { font-size: var(--small-size); flex: 1; min-height: var(--touch); display: flex; align-items: center; }

.booking-note { color: var(--c-muted); font-size: var(--small-size); }
.booking-note a { color: var(--c-text); text-underline-offset: 3px; font-weight: 600; }
.booking-center { text-align: center; align-self: center; }
.booking-wide { align-self: stretch; text-align: center; }
.booking-error { color: var(--c-field-error); font-size: var(--small-size); }
.booking-error:empty { display: none; }
.booking-error:focus { outline: none; }
.booking-submit { align-self: stretch; }

.booking-success-title { font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: 800; color: var(--c-success); }
.booking-success-title:focus { outline: none; }

/* GMA-379: this email already has its free class, before the ways on (the drop-in, the plans). */
.booking-warn {
  display: flex; flex-direction: column; gap: var(--gap-xs); padding: var(--gap);
  border: var(--line-w) solid var(--c-warn); background: var(--c-warn-bg); border-radius: var(--radius-sm);
}
.booking-warn:focus { outline: none; }
.booking-warn-title { color: var(--c-warn); font-weight: 700; }

/* GMA-379: what a free class booking says next, under "You're booked". */
.booking-next {
  display: flex; flex-direction: column; gap: var(--gap-sm); padding: var(--gap);
  background: var(--c-bg); border: var(--line-w) solid var(--c-line); border-radius: var(--radius-md);
  color: var(--c-muted); font-size: var(--small-size);
}
.booking-next .btn { align-self: flex-start; }

/* Honeypot: off screen for people, still in the form for bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer links ---------- */
.footer-links { display: flex; flex-wrap: wrap; gap: var(--gap); }

/* ---------- policy page (policy.html) ---------- */
.policy { max-width: var(--policy-max-w); }
.policy h1 { font-size: var(--h2-size); line-height: var(--h2-lh); margin-bottom: var(--gap); }
.policy h2 { font-size: var(--h3-size); line-height: var(--h3-lh); margin: var(--gap-lg) 0 var(--gap-sm); }
.policy p { margin-bottom: var(--gap); }
.policy .policy-meta { color: var(--c-muted); font-size: var(--small-size); }
.policy a { text-underline-offset: 3px; }
.back-link { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: 700; text-underline-offset: 4px; }