/**
 * Dragon Football shortcode styles.
 *
 * Enqueued conditionally — only loads if a shortcode has rendered on the page.
 * Uses CSS variables so the theme can override Dragon Football accent/colours
 * without touching plugin assets.
 *
 * Design tokens match the approved mockup at /DragonFootball/mockups/index.html:
 *   - Fraunces / Inter / JetBrains Mono
 *   - Accent #c8102e (DragonSports red family)
 *   - Headlines weight 600, letter-spacing -0.012em
 *   - Paper-white background, dark stats card for inverted moments
 */

:root {
  --df-ink: #0a0a0a;
  --df-ink-soft: #2a2a2a;
  --df-ink-muted: #6a6a6a;
  --df-paper: #ffffff;
  --df-paper-warm: #faf8f5;
  --df-rule: #e5e5e5;
  --df-accent: #c8102e;
  --df-accent-dark: #a30c25;
  --df-positive: #2a8e3a;
  --df-negative: #c8102e;

  --df-serif: "Fraunces", Georgia, serif;
  --df-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --df-mono: "JetBrains Mono", "SF Mono", monospace;
}

/* ── Kicker ─────────────────────────────────────────────────────────────── */
.df-kicker {
  font-family: var(--df-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--df-accent);
  display: inline-block;
  margin-bottom: 10px;
}

/* ── League table ───────────────────────────────────────────────────────── */
.df-table {
  margin: 24px 0;
  overflow-x: auto;
  font-family: var(--df-sans);
  color: var(--df-ink);
}
.df-table__inner {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.df-table__inner thead {
  background: var(--df-ink);
  color: var(--df-paper);
}
.df-table__inner th {
  padding: 10px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.df-table__inner th:nth-child(2) {
  text-align: left;
}
.df-table__inner td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid var(--df-rule);
}
.df-table__pos {
  font-weight: 600;
  color: var(--df-ink-muted);
  width: 32px;
}
.df-table__team {
  /* Stay a real table-cell (not display:flex) so the row's bottom border lines
     up with the numeric cells — a flex <td> renders at a different height and
     makes the underlines look disjointed. Badge + name sit inline instead. */
  text-align: left !important;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}
.df-table__team img {
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 8px;
}
.df-table__gd {
  color: var(--df-ink-muted);
}
.df-table__pts {
  font-weight: 700;
  color: var(--df-ink);
}
.df-table__form {
  /* Stay a real table-cell (not display:flex) so the row's bottom border lines
     up with the rest of the row. Pills sit inline, spaced with margin. */
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.df-table__form .df-form__w,
.df-table__form .df-form__d,
.df-table__form .df-form__l { margin: 0 1.5px; }
.df-form__w,
.df-form__d,
.df-form__l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-family: var(--df-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--df-paper);
}
.df-form__w { background: var(--df-positive); }
.df-form__d { background: var(--df-ink-muted); }
.df-form__l { background: var(--df-negative); }
.df-table__row--promo td:first-child {
  border-left: 3px solid var(--df-positive);
}
.df-table__row--playoff td:first-child {
  border-left: 3px solid #3b82f6;
}
.df-table__row--releg td:first-child {
  border-left: 3px solid var(--df-negative);
}
.df-table__row--highlight {
  background: rgba(200, 16, 46, 0.04);
}
.df-table__row--highlight td {
  font-weight: 600;
}
.df-table__inner tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* ── Next match ────────────────────────────────────────────────────────── */
.df-next-match {
  background: var(--df-ink);
  color: var(--df-paper);
  border-radius: 4px;
  padding: 24px 28px;
  margin: 20px 0;
  text-align: center;
  font-family: var(--df-sans);
}
.df-next-match .df-kicker {
  color: var(--df-accent);
  margin-bottom: 14px;
}
.df-next-match__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--df-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.012em;
  margin-bottom: 8px;
}
.df-next-match__badge {
  border-radius: 4px;
}
.df-next-match__v {
  font-family: var(--df-mono);
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 4px;
}
.df-next-match__when {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--df-mono);
}

/* ── Recent results ────────────────────────────────────────────────────── */
.df-results {
  margin: 20px 0;
  font-family: var(--df-sans);
}
.df-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.df-results__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--df-rule);
  font-size: 14px;
}
.df-results__row:hover {
  background: rgba(0, 0, 0, 0.02);
}
.df-results__outcome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  font-family: var(--df-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--df-paper);
  flex-shrink: 0;
}
.df-results__outcome--w { background: var(--df-positive); }
.df-results__outcome--d { background: var(--df-ink-muted); }
.df-results__outcome--l { background: var(--df-negative); }
.df-results__date {
  font-family: var(--df-mono);
  font-size: 11px;
  color: var(--df-ink-muted);
  min-width: 60px;
}
.df-results__teams {
  flex: 1;
  color: var(--df-ink);
}
.df-results__teams strong {
  font-weight: 600;
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Top scorers ───────────────────────────────────────────────────────── */
.df-topscorers {
  margin: 24px 0;
  font-family: var(--df-sans);
}
.df-topscorers__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.df-topscorers__table thead {
  background: var(--df-ink);
  color: var(--df-paper);
}
.df-topscorers__table th {
  padding: 10px 8px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.df-topscorers__table td {
  padding: 8px;
  border-bottom: 1px solid var(--df-rule);
}
.df-topscorers__table tr:hover {
  background: rgba(0, 0, 0, 0.02);
}
.df-topscorers__player {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.df-topscorers__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.df-topscorers__avatar--initials {
  background: var(--df-ink);
  color: var(--df-paper);
  font-family: var(--df-mono);
  font-size: 10px;
  font-weight: 600;
}
.df-topscorers__goals {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: var(--df-serif);
  font-weight: 600;
  font-size: 16px;
}

/* ── Match card ────────────────────────────────────────────────────────── */
.df-match-card {
  background: var(--df-ink);
  color: var(--df-paper);
  border-radius: 4px;
  padding: 28px;
  margin: 32px 0;
  font-family: var(--df-sans);
}
.df-match-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.df-match-card__team {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  font-weight: 600;
  font-size: 15px;
}
.df-match-card__team--away {
  flex-direction: row-reverse;
  text-align: right;
}
.df-match-card__badge {
  border-radius: 4px;
}
.df-match-card__score {
  font-family: var(--df-serif);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  min-width: 80px;
  text-align: center;
}
.df-match-card__stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.df-match-card__row {
  display: grid;
  grid-template-columns: 40px 1fr 120px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.df-match-card__val {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.df-match-card__label {
  text-align: center;
  font-family: var(--df-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}
.df-match-card__bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.df-match-card__bar--away {
  direction: rtl;
}
.df-match-card__bar-fill {
  height: 100%;
  background: var(--df-accent);
}
.df-match-card__bar--away .df-match-card__bar-fill {
  background: rgba(255, 255, 255, 0.5);
}

/* ── Form pills ────────────────────────────────────────────────────────── */
.df-form {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.df-form__pills {
  display: flex;
  gap: 4px;
}
.df-form__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  font-family: var(--df-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--df-paper);
}

/* ── Head to head ──────────────────────────────────────────────────────── */
.df-h2h {
  margin: 24px 0;
  font-family: var(--df-sans);
  color: var(--df-ink);
}
.df-h2h__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--df-rule);
  border-bottom: 1px solid var(--df-rule);
  margin: 12px 0 16px;
}
.df-h2h__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.df-h2h__num {
  font-family: var(--df-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--df-ink);
  letter-spacing: -0.012em;
}
.df-h2h__label {
  font-family: var(--df-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--df-ink-muted);
  margin-top: 6px;
}
.df-h2h__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.df-h2h__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--df-rule);
  font-size: 13px;
}
.df-h2h__date {
  font-family: var(--df-mono);
  font-size: 11px;
  color: var(--df-ink-muted);
  min-width: 60px;
}
.df-h2h__match {
  flex: 1;
}
.df-h2h__match strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0 4px;
}

/* ── Live ticker ───────────────────────────────────────────────────────── */
.df-ticker {
  background: var(--df-paper-warm);
  border-top: 1px solid var(--df-rule);
  border-bottom: 1px solid var(--df-rule);
  padding: 12px 0;
  overflow: hidden;
  font-family: var(--df-sans);
}
.df-ticker__inner {
  display: flex;
  gap: 32px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 20px;
}
.df-ticker__inner::-webkit-scrollbar {
  display: none;
}
.df-ticker__label {
  font-family: var(--df-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--df-accent);
  font-weight: 600;
  white-space: nowrap;
}
.df-ticker__label--live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--df-accent);
  border-radius: 50%;
  margin-right: 6px;
  animation: df-pulse 2s infinite;
}
@keyframes df-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.df-ticker__match {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.df-ticker__teams {
  color: var(--df-ink);
}
.df-ticker__score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--df-ink);
}
.df-ticker__minute {
  font-family: var(--df-mono);
  font-size: 11px;
  color: var(--df-ink-muted);
}

/* ── Weekend fixtures ──────────────────────────────────────────────────── */
.df-weekend {
  margin: 24px 0;
  font-family: var(--df-sans);
  color: var(--df-ink);
}
.df-weekend__day {
  margin-bottom: 24px;
}
.df-weekend__date {
  font-family: var(--df-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--df-accent);
}
.df-weekend__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.df-weekend__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--df-rule);
  font-size: 14px;
}
.df-weekend__teams {
  font-weight: 500;
}
.df-weekend__ko {
  font-family: var(--df-mono);
  font-size: 12px;
  color: var(--df-ink-muted);
}
.df-weekend__result {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--df-ink);
}
.df-weekend__ft {
  font-family: var(--df-mono);
  font-size: 10px;
  color: var(--df-ink-muted);
  margin-left: 4px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .df-match-card { padding: 20px; }
  .df-match-card__score { font-size: 28px; }
  .df-match-card__team { font-size: 13px; }
  .df-h2h__num { font-size: 32px; }
  .df-table__inner { font-size: 12px; }
  /* Drop the widest column (recent form) and tighten cells so the core table
     — pos, team, P/W/D/L, GD, Pts — fits the screen without sideways scroll. */
  .df-table__form { display: none; }
  .df-table__inner th,
  .df-table__inner td { padding: 8px 5px; }
  .df-table__team img { width: 22px; height: 22px; }
}

/* League-table club links (inherit colour, accent on hover) */
.df-table__team-link { color: inherit; text-decoration: none; }
.df-table__team-link:hover { color: var(--df-accent); text-decoration: underline; }