/*
 * ACAD1 Review Center — components
 * child-theme-guide.md §4 "Buttons" / "Cards" / "Tags" / "Tables" / "Forms",
 * verbatim, with token substitutions for the guide's inline literals (see
 * 00-tokens.css pre-flight block):
 *
 *   guide's dark-active literal    -> var(--a1-accent-dk)   (.a1-btn--primary:active)
 *   guide's invalid-bg literal     -> var(--a1-invalid-bg)  (.a1-input[aria-invalid="true"])
 *
 * Plus two additions the guide describes but does not fence in code:
 *   - .a1-table--schedule th:nth-child(n) column widths, expressed on the
 *     <th> rather than a <colgroup> per the task's ambiguity resolution.
 *   - .a1-choice, the radio/checkbox card wrapper described in prose at the
 *     end of §4. Its 15px padding has no exact token match; the nearest
 *     token, --a1-s-4 (16px), is used instead (see task-2-report.md).
 */

/* ── Buttons ─────────────────────────────────────────────────────────── */
.a1-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: var(--a1-body-sm);
  padding: 13px 22px; min-height: var(--a1-target-min);
  border: 1px solid transparent; border-radius: var(--a1-r-btn);
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.a1-btn--primary { background: var(--a1-accent); color: var(--a1-contrast); }
.a1-btn--primary:hover  { background: var(--a1-accent-lt); color: var(--a1-contrast); }
.a1-btn--primary:active { background: var(--a1-accent-dk); }

.a1-btn--secondary { border-color: var(--a1-primary); color: var(--a1-primary); background: transparent; }
.a1-btn--secondary:hover { background: var(--a1-surface); }

.a1-btn--onaccent { background: var(--a1-contrast); color: var(--a1-accent); }
.a1-btn--ondark   { border-color: var(--a1-on-accent-border); color: var(--a1-contrast); }

.a1-btn--lg    { font-size: 15.5px; padding: 15px 30px; }
.a1-btn--block { width: 100%; }
.a1-btn:disabled, .a1-btn[aria-disabled="true"] {
  background: var(--a1-disabled-bg); color: var(--a1-disabled-fg); cursor: not-allowed; border-color: transparent;
}

/* ── Cards ───────────────────────────────────────────────────────────── */
/* Cards never get a shadow at rest. Elevation (--a1-sh-*) is reserved for
   the mobile nav panel, the sticky bar and dialogs. */
.a1-card {
  background: var(--a1-bg); border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-card); padding: var(--a1-s-6);
  display: flex; flex-direction: column; gap: var(--a1-s-3);
}
.a1-card--surface { background: var(--a1-surface); }
.a1-card--dark    { background: var(--a1-primary); color: var(--a1-on-dark); border-color: var(--a1-primary); }
.a1-card--feature { border-left: 3px solid var(--a1-accent); }   /* Online Review Program, recommended tier */
.a1-card__kicker  { font-size: var(--a1-kicker); font-weight: 700; letter-spacing: var(--a1-ls-kicker); text-transform: uppercase; color: var(--a1-accent); }
.a1-card__cta     { margin-top: auto; padding-top: var(--a1-s-4); font-size: var(--a1-meta); font-weight: 700; }

/* ── Tags ────────────────────────────────────────────────────────────── */
.a1-tag {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; padding: 5px 11px;
  border-radius: var(--a1-r-tag); background: var(--a1-surface); color: var(--a1-secondary);
}
.a1-tag--accent  { color: var(--a1-accent); font-weight: 700; }
.a1-tag--outline { background: transparent; border: 1px solid var(--a1-border-strong); }

/* ── Tables — the core component of this site ───────────────────────── */
.a1-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.a1-table thead tr { background: var(--a1-primary); }
.a1-table th {
  text-align: left; padding: 13px 16px;
  font-size: var(--a1-kicker); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--a1-contrast);
}
.a1-table td { padding: 14px 16px; border-bottom: 1px solid var(--a1-rule); }
.a1-table tbody { font-variant-numeric: tabular-nums; }
.a1-table tbody tr:nth-child(even) { background: var(--a1-surface); }
.a1-table tbody tr:last-child td { border-bottom: 0; }

.a1-table .is-num { text-align: right; font-weight: 700; white-space: nowrap; }
.a1-table .is-nowrap { white-space: nowrap; }
.a1-table tr.is-featured td:first-child { border-left: 3px solid var(--a1-accent); }
.a1-table__wrap { background: var(--a1-bg); border: 1px solid var(--a1-border); border-radius: var(--a1-r-card); overflow: hidden; }

/* two-line schedule cell — day pattern over time range, uniform row heights */
.a1-sched__days { font-weight: 600; color: var(--a1-text); white-space: nowrap; }
.a1-sched__time { font-size: 13px; color: var(--a1-secondary); white-space: nowrap; }

/* Six-column schedule table widths (§4 table). table-layout: fixed above
   plus explicit <th> widths — no <colgroup>, some block renderers strip it. */
.a1-table--schedule th:nth-child(1) { width: 30%; } /* Programme & section */
.a1-table--schedule th:nth-child(2) { width: 12%; } /* Tier */
.a1-table--schedule th:nth-child(3) { width: 13%; } /* Dates */
.a1-table--schedule th:nth-child(4) { width: 21%; } /* Days & time */
.a1-table--schedule th:nth-child(5) { width: 12%; } /* Fee */
.a1-table--schedule th:nth-child(6) { width: 12%; } /* Action */

/* ── Forms ───────────────────────────────────────────────────────────── */
.a1-field { display: flex; flex-direction: column; gap: 7px; }
.a1-label {
  font-size: var(--a1-kicker); font-weight: 700; letter-spacing: var(--a1-ls-kicker);
  text-transform: uppercase; color: var(--a1-secondary);
}
.a1-input, .a1-select, .a1-textarea {
  width: 100%; font: inherit; font-size: var(--a1-body-sm);
  min-height: var(--a1-target-min); padding: 12px 13px;
  color: var(--a1-text); background: var(--a1-contrast);
  border: 1px solid var(--a1-border-strong); border-radius: var(--a1-r-input);
}
.a1-input:hover { border-color: var(--a1-secondary); }
.a1-input:focus-visible { border-color: var(--a1-accent); outline: 2px solid var(--a1-accent); outline-offset: 1px; }
.a1-textarea { min-height: 120px; resize: vertical; }
.a1-input[aria-invalid="true"] { border-color: var(--a1-accent); background: var(--a1-invalid-bg); }

input[type="radio"], input[type="checkbox"] { accent-color: var(--a1-accent); width: 17px; height: 17px; }

/* Radio/checkbox row wrapper: the whole row is the tap target (registration
   page). Described in prose at the end of §4, not fenced as code there. */
.a1-choice {
  display: flex; align-items: center; gap: var(--a1-s-3);
  min-height: var(--a1-target-min);
  background: var(--a1-bg); border: 1px solid var(--a1-border);
  border-radius: var(--a1-r-card); padding: var(--a1-s-4); /* nearest token to the guide's 15px */
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════
 * Site chrome — Task 4 addition
 *
 * child-theme-guide.md §4's "Header / footer behaviour" subsection is
 * prose only (never fenced as a code block the way Buttons/Cards/Tags/
 * Tables/Forms were), so Tasks 1–2 never built these desktop base styles.
 * 50-responsive.css (Task 3) already ships the breakpoint overrides for
 * all of them, plus a purely structural (no colour/type) stopgap
 * declaration for several classes at the top of that file so the
 * responsive rules were never fully dead. This section is the real
 * desktop base those overrides depart from — colour, type and elevation
 * included, per §1's colour-usage rules and §4's prose. Any property
 * duplicated from 50-responsive.css's stopgap is intentional and
 * harmless: identical values, later file wins the cascade either way.
 *
 * Interactive elements below carry an explicit --a1-target-min min-height
 * per §7 ("48px minimum hit target site-wide, not just mobile"). Dark-ground
 * elements (.a1-header__utility, .a1-footer) use only the --a1-on-dark-*
 * alpha tokens per §1, and extend :focus-visible the same way 10-base.css's
 * dark/accent flip does, since neither is guaranteed to sit inside a
 * literal `.a1-dark` wrapper element. Both now flip to --a1-contrast, not
 * --a1-accent-lt: read the measured ratios in 10-base.css before changing
 * either back.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────────────── */
/* §4: "utility bar (--a1-primary) over a white nav bar. Grid 200px 1fr auto." */
.a1-header {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--a1-s-4);
  background: var(--a1-contrast);
  padding-inline: var(--a1-gutter);
  min-height: var(--a1-s-11); /* 80px — reuses the existing space token, no new value */
  border-bottom: 1px solid var(--a1-border);
  /* anchors the ≤920px open mobile-nav panel (position: absolute) — see
     50-responsive.css's ≤920px block. No visible effect at desktop. */
  position: relative;
}

.a1-header__utility {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--a1-s-5);
  padding-inline: var(--a1-gutter);
  font-size: var(--a1-meta);
  background: var(--a1-primary); color: var(--a1-on-dark);
}
.a1-header__utility a {
  display: inline-flex; align-items: center; min-height: var(--a1-target-min);
  color: var(--a1-on-dark-80); text-decoration: none;
}
.a1-header__utility a:hover { color: var(--a1-on-dark); }
.a1-header__utility :focus-visible { outline-color: var(--a1-contrast); } /* --a1-primary ground: --a1-accent-lt measures 2.96:1, below SC 1.4.11's 3:1 — see 10-base.css */

.a1-header__nav ul {
  display: flex; align-items: center; gap: var(--a1-s-6);
  list-style: none; margin: 0; padding: 0;
}
.a1-header__nav a {
  display: inline-flex; align-items: center; min-height: var(--a1-target-min);
  font-weight: 600; color: var(--a1-text); text-decoration: none;
}
.a1-header__nav a:hover { color: var(--a1-accent); }

.a1-header__cta { display: flex; align-items: center; }

/* Mobile nav: native <details>/<summary> per §4 — no JavaScript. Marker
   removal and the closed-by-default display are unconditional (not a
   responsive concern); 50-responsive.css's ≤920px block is the only place
   the toggle is ever made visible or opened. */
.a1-nav-toggle summary {
  display: none;
  list-style: none;
  cursor: pointer;
}
.a1-nav-toggle summary::-webkit-details-marker { display: none; }
.a1-nav-toggle summary::marker { content: ""; }

/* ── Sticky bottom bar ───────────────────────────────────────────────── */
/* §4: "Call + Enroll Now, 48px tall". Hidden by default — 50-responsive.css's
   ≤700px block is the only place it is shown (`display: flex`). One of the
   few components allowed elevation (§4: "Elevation is reserved for the
   mobile nav panel, the sticky bar and dialogs"). */
.a1-stickybar {
  display: none;
  align-items: stretch;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  height: var(--a1-target-min);
  z-index: var(--a1-z-sticky-bar);
  background: var(--a1-contrast);
  border-top: 1px solid var(--a1-border);
  box-shadow: var(--a1-sh-lg);
}
.a1-stickybar > a,
.a1-stickybar > .a1-btn {
  flex: 1;
  min-height: var(--a1-target-min);
  border-radius: 0;
}

/* ── CTA band ────────────────────────────────────────────────────────── */
/* §6: "1fr auto CTA bands stack" at ≤900px. Structural only — used inside
   several different section backgrounds, so it carries no colour of its
   own (matches 50-responsive.css's existing unqueried declaration). */
.a1-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--a1-s-5);
  align-items: center;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
/* §4: "4 columns" at desktop; §1: dark panels (--a1-primary ground) carry
   the footer. 50-responsive.css owns the 4→2→1 column collapse (2 at
   1024px, 1 at 620px). */
.a1-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--a1-s-8);
  background: var(--a1-primary);
  color: var(--a1-on-dark);
  padding-block: var(--a1-section-y);
}
.a1-footer a {
  display: inline-flex; align-items: center; min-height: var(--a1-target-min);
  color: var(--a1-on-dark-80); text-decoration: none;
}
.a1-footer a:hover { color: var(--a1-on-dark); }
.a1-footer :focus-visible { outline-color: var(--a1-contrast); } /* same --a1-primary ground as the utility bar — see 10-base.css */

.a1-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--a1-s-4);
  margin-top: var(--a1-s-8);
  padding-top: var(--a1-s-5);
  border-top: 1px solid var(--a1-on-dark-rule);
  font-size: var(--a1-meta);
  color: var(--a1-on-dark-70);
}

/* ── Horizontal chip / tab scrollers ─────────────────────────────────── */
/* §6: "Horizontal chip and tab rows (venue tabs, filter chips) get
   overflow-x: auto ... they scroll, they never squash." No venue-tab
   active-state spec exists in the guide beyond this, so kept minimal. */
.a1-chips,
.a1-tabs-scroll {
  display: flex;
  gap: var(--a1-s-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Children carry --a1-target-min because they are the tap targets, not the
   scroller: a chip or venue tab is usually an .a1-tag, whose own padding
   lands it at roughly 28px — under §7's 48px floor and §12's
   definition-of-done. inline-flex + centring is what lets the extra height
   go around the label instead of above it. */
.a1-chips > *,
.a1-tabs-scroll > * {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center;
  min-height: var(--a1-target-min);
}

/* ── Sticky rail utility ─────────────────────────────────────────────── */
/* §6 row 1: "Every position: sticky becomes static" at ≤1080px — the
   base sticky state those rails depart from. Matches the existing
   unqueried declaration in 50-responsive.css. */
.a1-sticky {
  position: sticky;
  top: var(--a1-s-5);
}

/* ── Partner-logo marquee ────────────────────────────────────────────── */
/* §7: must honour prefers-reduced-motion — 50-responsive.css already
   stops `.a1-marquee` and all its descendants under that query, so it is
   not duplicated here. This is the base scrolling behaviour it stops. */
.a1-marquee { overflow: hidden; }
.a1-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--a1-s-8);
  width: max-content;
  animation: a1-marquee-scroll 30s linear infinite;
}
@keyframes a1-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------------
 * Button colour, hardened against the parent theme
 * ---------------------------------------------------------------------------
 * GeneratePress emits `.entry-content a { color: ... }` from its Customizer
 * link colour - specificity (0,1,1). A single-class `.a1-btn--primary` is
 * (0,1,0) and loses, so primary buttons inherited GP's dark link colour on
 * the oxblood fill and became unreadable. Repeating the class raises these
 * to (0,2,0), which wins on class count without !important.
 */
.a1-btn.a1-btn--primary,
.a1-btn.a1-btn--primary:visited { background: var(--a1-accent); color: var(--a1-contrast); }
.a1-btn.a1-btn--primary:hover,
.a1-btn.a1-btn--primary:focus  { background: var(--a1-accent-lt); color: var(--a1-contrast); }
.a1-btn.a1-btn--primary:active { background: var(--a1-accent-dk); color: var(--a1-contrast); }

.a1-btn.a1-btn--secondary,
.a1-btn.a1-btn--secondary:visited { color: var(--a1-primary); border-color: var(--a1-primary); }
.a1-btn.a1-btn--secondary:hover   { color: var(--a1-primary); background: var(--a1-surface); }

.a1-btn.a1-btn--onaccent,
.a1-btn.a1-btn--onaccent:visited { background: var(--a1-contrast); color: var(--a1-accent); }
.a1-btn.a1-btn--onaccent:hover   { background: var(--a1-contrast); color: var(--a1-accent-dk); }

.a1-btn.a1-btn--ondark,
.a1-btn.a1-btn--ondark:visited { color: var(--a1-contrast); border-color: var(--a1-on-accent-border); }
.a1-btn.a1-btn--ondark:hover   { color: var(--a1-contrast); background: rgba(0,0,0,0.12); }

.a1-section--accent a:not(.a1-btn),
.a1-card--dark a:not(.a1-btn) { color: var(--a1-contrast); }
.a1-section--dark a:not(.a1-btn) { color: var(--a1-on-dark); }

/* ---------------------------------------------------------------------------
 * Header layout contract (authored against real markup)
 * ---------------------------------------------------------------------------
 * `.a1-header` IS the three-column nav row - not an outer wrapper. The
 * utility bar is a sibling above it, never a grid child, or it collapses
 * into the 200px logo track.
 *
 * The desktop nav is a direct child of `.a1-header`, NOT inside <details>:
 * Chrome does not render a closed <details>'s children at all, so a nav
 * placed inside one cannot be revealed with CSS on desktop.
 */
.a1-header { align-items: center; gap: var(--a1-s-5); position: relative; }
.a1-header__utility { justify-content: space-between; }
.a1-header > .a1-header__nav { display: flex; gap: var(--a1-s-6); justify-content: center; flex-wrap: wrap; }
.a1-nav-toggle { display: none; }
.a1-header__nav-panel { display: flex; flex-direction: column; gap: var(--a1-s-4); }

/* Footer layout contract: `.a1-footer` IS the four-column row (spec §0),
 * not the outer wrapper. Column 1 is wider per the spec's 1.4fr. */
.a1-footer { grid-template-columns: 1.4fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 40px; }
.a1-footer__legal { display: flex; }