/* ============================================================
   Active Sports FC — Component styles
   Class-based styling for the React component library. Every value
   references a token. Gives components real :hover/:active/:focus
   states (which inline styles can't). Shipped in the styles.css closure.
   Prefix: .asfc-*
   ============================================================ */

/* ---------- Button ---------- */
.asfc-btn {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-sm);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.asfc-btn:active { transform: translateY(1px); }
.asfc-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.asfc-btn[disabled], .asfc-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.asfc-btn svg { width: 1.1em; height: 1.1em; }

/* sizes */
.asfc-btn--sm { font-size: var(--font-size-xs); padding: 8px 14px; }
.asfc-btn--md { font-size: var(--font-size-sm); padding: 11px 20px; }
.asfc-btn--lg { font-size: var(--font-size-base); padding: 15px 28px; }

/* variants */
.asfc-btn--primary { background: var(--surface-inverse); color: var(--brand-white); }
.asfc-btn--primary:hover { background: var(--brand-black); }

.asfc-btn--secondary { background: transparent; color: var(--text-default); border-color: var(--surface-inverse); }
.asfc-btn--secondary:hover { background: var(--surface-inverse); color: var(--brand-white); }

.asfc-btn--ghost { background: transparent; color: var(--text-default); }
.asfc-btn--ghost:hover { background: var(--neutral-100); }

/* accent = featured gold; dark text only (AA) */
.asfc-btn--accent { background: var(--gold-light); color: #0a0a0a; }
.asfc-btn--accent:hover { background: var(--brand-gold); }

/* highlight = reserved yellow; dark text; sparing use (donate CTA) */
.asfc-btn--highlight { background: var(--brand-yellow); color: #0a0a0a; }
.asfc-btn--highlight:hover { filter: brightness(0.94); }

/* inverse = for placing on dark surfaces */
.asfc-btn--inverse { background: var(--brand-white); color: #0a0a0a; }
.asfc-btn--inverse:hover { background: var(--gold-tint-100); }

.asfc-btn--block { width: 100%; }

/* On dark surfaces, link-style buttons (<a class="asfc-btn">) would otherwise
   inherit white text from the global `.as-inverse a` rule, overriding the
   variant colour (gold/yellow/white buttons lose their dark text and the
   white-fill button vanishes). Restate variant text colours with enough
   specificity to win inside .as-inverse. */
.as-inverse a.asfc-btn--primary { color: var(--brand-white); }
.as-inverse a.asfc-btn--accent,
.as-inverse a.asfc-btn--highlight,
.as-inverse a.asfc-btn--inverse { color: #0a0a0a; }
.as-inverse a.asfc-btn--secondary,
.as-inverse a.asfc-btn--ghost { color: var(--brand-white); }

/* ---------- IconButton ---------- */
.asfc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; /* AA hit target */
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-default);
  color: var(--text-default);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.asfc-iconbtn:hover { background: var(--neutral-100); border-color: var(--border-strong); }
.asfc-iconbtn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.asfc-iconbtn svg { width: 20px; height: 20px; }
.asfc-iconbtn--inverse { background: transparent; border-color: var(--border-inverse); color: var(--brand-white); }
.asfc-iconbtn--inverse:hover { background: rgba(255,255,255,0.08); }

/* ---------- Badge ---------- */
.asfc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-sm);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  line-height: 1;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
}
.asfc-badge--win { background: var(--success); color: #fff; }
.asfc-badge--draw { background: var(--neutral-300); color: #0a0a0a; }
.asfc-badge--loss { background: var(--error); color: #fff; }
.asfc-badge--neutral { background: var(--neutral-100); color: var(--text-default); }
.asfc-badge--gold { background: var(--gold-light); color: #0a0a0a; }
.asfc-badge--live { background: var(--error); color: #fff; }
.asfc-badge--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: asfc-pulse 1.4s ease-in-out infinite; }
@keyframes asfc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .asfc-badge--live::before { animation: none; } }

/* ---------- Tag ---------- */
.asfc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--gold-tint-100);
  color: var(--neutral-800);
  border: 1px solid var(--gold-tint-300);
}

/* ---------- Card ---------- */
.asfc-card {
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.asfc-card--flat { box-shadow: none; }
.asfc-card--interactive { transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); cursor: pointer; }
.asfc-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.asfc-card__body { padding: var(--space-5); }

/* ---------- Hub card (Get involved / Community action cards) ---------- */
.asfc-hub-card { transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.asfc-hub-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ---------- Form controls ---------- */
.asfc-field { display: flex; flex-direction: column; gap: var(--space-2); }
.asfc-label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-caps-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-default); }
.asfc-label__req { color: var(--error); margin-left: 3px; }
.asfc-input, .asfc-select, .asfc-textarea {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--text-default);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.asfc-input::placeholder, .asfc-textarea::placeholder { color: var(--text-subtle); }
.asfc-input:focus, .asfc-select:focus, .asfc-textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.asfc-input[aria-invalid="true"], .asfc-textarea[aria-invalid="true"] { border-color: var(--error); }
.asfc-help { font-size: var(--font-size-sm); color: var(--text-muted); }
.asfc-help--error { color: var(--error); }
.asfc-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5852' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }

/* checkbox / radio */
.asfc-choice { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--font-size-base); color: var(--text-default); }
.asfc-choice input { width: 20px; height: 20px; accent-color: var(--surface-inverse); margin: 1px 0 0; flex: none; }

/* ---- Inverse (on-dark) form treatment ----
   Forms placed inside .as-inverse surfaces (footer signup, dark signup panel,
   prize-draw entry) MUST flip to light-on-dark or they fail the contrast rule
   (e.g. the consent label rendered near-black on near-black). base.css flips
   headings/links/kickers; form controls are flipped here. */
.as-inverse .asfc-label { color: var(--text-inverse); }
.as-inverse .asfc-help { color: var(--text-inverse-muted); }
.as-inverse .asfc-input,
.as-inverse .asfc-select,
.as-inverse .asfc-textarea {
  color: var(--text-inverse);
  background-color: var(--surface-inverse-raised);
  border-color: var(--border-inverse);
}
.as-inverse .asfc-input::placeholder,
.as-inverse .asfc-textarea::placeholder { color: var(--text-inverse-muted); }
.as-inverse .asfc-choice { color: var(--text-inverse); }
.as-inverse .asfc-choice input { accent-color: var(--gold-light); }
.as-inverse .asfc-microline { color: var(--text-inverse-muted); }
.as-inverse .asfc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23eadaa7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Kicker / SectionHeading ---------- */
.asfc-kicker {
    display: inline-block;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}
.asfc-kicker--accent { color: var(--accent-strong); }
.asfc-kicker--inverse { color: var(--text-accent); }
.asfc-section-head { margin-bottom: var(--space-6); }
.asfc-section-head__rule { border: 0; height: var(--border-rule-accent); width: 48px; background: var(--accent); margin: var(--space-2) 0 var(--space-3); }
.asfc-section-head h2 { margin: 0; }

/* ============================================================
   FOOTBALL COMPONENTS
   Canonical class vocabulary shared with the React component library
   (components/football/*.jsx). Theme partials emit these classes; the
   theme.css layer adds only theme-specific responsive/a11y deltas.
   Keep in sync with the design system's components.css football section.
   ============================================================ */

/* ---------- FixtureCard (.asfc-fixture / --next) ---------- */
.asfc-fixture {
  background: var(--surface-raised);
  color: var(--text-default);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  overflow: hidden;
}
.asfc-fixture--next {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border: none;
  box-shadow: none;
  padding: var(--space-8);
}
.asfc-fixture__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.asfc-fixture--next .asfc-fixture__head { margin-bottom: var(--space-6); }
.asfc-fixture__date { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-caps-sm); font-size: var(--font-size-xs); color: var(--text-muted); }
.asfc-fixture--next .asfc-fixture__date { color: var(--text-inverse-muted); }
.asfc-fixture__teams { display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.asfc-fixture--next .asfc-fixture__teams { gap: var(--space-8); }
.asfc-fixture__team { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 1; text-align: center; }
.asfc-fixture__teamname { font-family: var(--font-heading); text-transform: uppercase; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); line-height: 1.05; }
.asfc-fixture--next .asfc-fixture__teamname { font-size: var(--font-size-lg); }
.asfc-fixture__mid { text-align: center; flex: none; }
.asfc-fixture__time { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); color: var(--text-heading); line-height: 1; }
.asfc-fixture--next .asfc-fixture__time { font-size: var(--font-size-3xl); color: var(--gold-light); }
.asfc-fixture__ko { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps-sm); color: var(--text-subtle); margin-top: var(--space-1); }
.asfc-fixture--next .asfc-fixture__ko { color: var(--text-inverse-muted); }
.asfc-fixture__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-default); }
.asfc-fixture--next .asfc-fixture__foot { margin-top: var(--space-6); border-top-color: var(--border-inverse); }
.asfc-fixture__venue { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-muted); }
.asfc-fixture--next .asfc-fixture__venue { color: var(--text-inverse-muted); }
.asfc-fixture__venue svg, .asfc-fixture__venue i { width: 16px; height: 16px; }
.asfc-fixture__crest, .asfc-fixture__crest-img {
  width: 55px; height: 55px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
  background: var(--gold-tint-100);
  color: var(--neutral-700);
  border: var(--border-width) solid var(--gold-tint-300);
}
.asfc-fixture--next .asfc-fixture__crest {
  background: rgba(234, 218, 167, 0.12);
  color: var(--gold-light);
  border-color: var(--border-inverse);
}

.asfc-fixture--next .asfc-fixture__crest-img {
  background: var(--gold-tint-100);
  color: var(--gold-light);
  border-color: var(--border-inverse);
}

/* ---------- LeagueTable (.asfc-table) ---------- */
.asfc-table { width: 100%; border-collapse: collapse; background: var(--surface-raised); }
.asfc-table thead th { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-caps-sm); font-size: var(--font-size-xs); color: var(--text-muted); font-weight: var(--font-weight-semibold); padding: 10px 8px; text-align: center; }
.asfc-table tbody th, .asfc-table td { font-variant-numeric: tabular-nums; font-size: var(--font-size-sm); padding: 11px 8px; text-align: center; border-top: var(--border-width) solid var(--border-default); color: var(--text-muted); font-weight: var(--font-weight-regular); }
.asfc-table__num { width: 36px; }
/* Column modifiers are element-qualified so they beat the `.asfc-table td`
   base (0,1,1). Works whether the team cell is a <td> (React) or a
   <th scope="row"> (WP theme, for a11y). */
.asfc-table thead th.asfc-table__col-club { text-align: left; }
.asfc-table td.asfc-table__pos, .asfc-table tbody th.asfc-table__pos { font-family: var(--font-heading); font-weight: var(--font-weight-bold); color: var(--text-default); }
.asfc-table td.asfc-table__club, .asfc-table tbody th.asfc-table__club { text-align: left; font-family: var(--font-heading); text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--text-default); }
.asfc-table td.asfc-table__pts, .asfc-table tbody th.asfc-table__pts { font-weight: var(--font-weight-bold); color: var(--text-default); }
.asfc-table__row--me { background: var(--gold-tint-100); }
.asfc-table__row--me td.asfc-table__club, .asfc-table__row--me th.asfc-table__club { font-weight: var(--font-weight-bold); }

/* ---------- NewsCard (.asfc-news, on .asfc-card) ---------- */
.asfc-news { display: flex; flex-direction: column; text-decoration: none; color: var(--text-default); height: 100%; }
.asfc-news__media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200)); overflow: hidden; }
.asfc-news__img { width: 100%; height: 100%; object-fit: cover; }
.asfc-news__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-subtle); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: var(--font-size-xs); }
.asfc-news__cat { position: absolute; top: 12px; left: 12px; }
.asfc-news__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.asfc-news__title { margin: 0; font-size: var(--font-size-2xl); line-height: 1.1; }
.asfc-news__excerpt { margin: 0; font-size: var(--font-size-sm); color: var(--text-muted); line-height: 1.5; }
.asfc-news__date { margin-top: auto; padding-top: var(--space-2); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps-sm); color: var(--text-subtle); }

/* ---------- ResultRow (.asfc-result) ---------- */
.asfc-result { display: block; background: var(--surface-raised); border-bottom: var(--border-width) solid var(--border-default); text-decoration: none; color: var(--text-default); }
a.asfc-result { transition: background var(--duration-fast) var(--ease-standard); }
a.asfc-result:hover { background: var(--surface-subtle); }
.asfc-result__grid { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.asfc-result__team { font-family: var(--font-heading); text-transform: uppercase; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.asfc-result__team--home { text-align: right; }
.asfc-result__score { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 2px 10px; background: var(--surface-inverse); color: var(--brand-white); border-radius: var(--radius-sm); }
.asfc-result__meta { font-size: var(--font-size-xs); color: var(--text-muted); text-align: right; white-space: nowrap; }
.asfc-result__comp { color: var(--text-subtle); }
/* Match-report action bar — a full-width gold bar emitted as a SIBLING after
   a .asfc-result row (matches the signed-off Fixtures & Results design). */
.asfc-result__report { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px var(--space-5); background: var(--surface-sunken, var(--surface-raised)); border-bottom: var(--border-width) solid var(--border-default); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-caps-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--accent-strong); text-decoration: none; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard); }
.asfc-result__report:hover { background: var(--gold-tint-100); }
.asfc-result__report svg { flex: none; }
.asfc-result__report-caret { font-size: 1.1em; line-height: 1; }

/* ---------- PlayerCard (.asfc-player) ---------- */
.asfc-player {
  display: block; text-decoration: none; color: var(--text-inverse);
  background: var(--surface-inverse); border-radius: var(--radius-lg);
  overflow: hidden; position: relative;
}
a.asfc-player { transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
a.asfc-player:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.asfc-player__media { position: relative; aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--neutral-800), var(--neutral-900) 70%); }
.asfc-player__img { width: 100%; height: 100%; object-fit: cover; }
.asfc-player__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--neutral-500); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-kicker); font-size: var(--font-size-xs); }
.asfc-player__num { position: absolute; top: 8px; left: 12px; font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-6xl); line-height: 1; color: var(--gold-light); opacity: 0.95; }
.asfc-player__captain { position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-light); color: #0a0a0a; font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); line-height: 1; letter-spacing: var(--tracking-caps-sm); border-radius: var(--radius-pill); }
.asfc-player__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 21, 16, 0.9) 0%, rgba(24, 21, 16, 0) 45%); }
.asfc-player__cap { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3); }
.asfc-player__name { font-family: var(--font-heading); text-transform: uppercase; font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); line-height: 1; color: var(--brand-white); margin: 0; }
.asfc-player__pos { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: var(--tracking-caps-sm); font-size: var(--font-size-xs); color: var(--gold-light); margin-top: var(--space-1); }
.asfc-player__sponsor { padding: 10px var(--space-4); font-size: var(--font-size-xs); color: var(--text-inverse-muted); display: flex; align-items: center; gap: 6px; border-top: var(--border-width) solid var(--border-inverse); }
.asfc-player__sponsor svg, .asfc-player__sponsor i { width: 14px; height: 14px; }
.asfc-player__sponsor strong { color: var(--brand-white); }