/* Imarika Super Cup — public site styles. Plain CSS, no build step, no
   framework (spec section 19: "Plain CSS", "Vanilla JavaScript", "Minimal
   JavaScript dependencies", "Responsive design"). */
@import url("../../fonts/fonts.b25bf1336a14.css");


:root {
  --imarika-yellow: #FDD41D;
  --imarika-navy: #062137;
  --imarika-teal: #40C0C5;
  --imarika-light: #EFEFEF;
  --max-width: 1120px;
  --radius: 10px;
  /* Imarika Updates 8: Arca Majora 3 for "Hatuzeeki", Arca Majora 3 for
     everything else. Actual font files aren't bundled (licensed/commercial
     fonts) -- see static/fonts/README.txt. Until they're added, these
     fallback stacks keep every page readable. */
  --font-hatuzeeki: "Arca Majora 3", Georgia, "Times New Roman", serif;
  --font-body: "Arca Majora 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Arca Majora 3 is a display/branding typeface with no true lowercase
     letterforms -- lowercase text renders as cap-height glyphs, which
     reads fine in headings and buttons but makes anything typed into a
     field (contact form, login, signup, coach dashboard) look stuck in
     caps lock even though the underlying text is completely normal
     case. Editable fields always use --font-ui instead, further down. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Anchor jump targets (e.g. team page "Imarika Index History" / "Squad"
   pills) land just below the section heading instead of flush against
   the top of the viewport. */
h2[id], h3[id] { scroll-margin-top: 16px; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--imarika-navy);
  background: #fff;
  line-height: 1.55;
}

/* Every editable field on the site (contact form, login, signup, coach
   dashboard, search boxes, etc.) always uses a normal readable font,
   never the display font above -- see the --font-ui comment. */
input, textarea, select {
  font-family: var(--font-ui);
}

a { color: var(--imarika-navy); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* ── Header / nav ─────────────────────────────────────────────── */
.site-header {
  background: var(--imarika-navy);
  color: var(--imarika-light);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-logo-link { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.brand a { color: var(--imarika-light); font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; }
.brand .brand-accent { color: var(--imarika-yellow); }
.brand .tagline { font-size: .75rem; opacity: .8; font-family: var(--font-hatuzeeki); }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--imarika-light);
  color: var(--imarika-light); border-radius: 6px; padding: 6px 10px; cursor: pointer;
}

.site-nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.site-nav a { color: var(--imarika-light); font-weight: 600; font-size: .95rem; }
.site-nav a:hover { color: var(--imarika-yellow); text-decoration: none; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none; width: 100%; padding: 0 20px 14px;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 14px; }
  .site-header .container { flex-wrap: wrap; }
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  background:
    linear-gradient(135deg, rgba(6,33,55,.92) 0%, rgba(10,51,85,.88) 100%),
    url("../../images/imarika_background_1.193cb2e3c285.jpeg");
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 56px 0;
}
.hero h1 { font-size: 2.4rem; margin: 0 0 10px; }
.hero .tagline-big { color: var(--imarika-yellow); font-weight: 800; font-family: var(--font-hatuzeeki); }
.hero p.lead { max-width: 620px; opacity: .9; }
.hero .cta-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  font-weight: 700; border: 2px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--imarika-yellow); color: var(--imarika-navy); }
.btn-primary:hover { background: #ffe266; text-decoration: none; }
.btn-outline { border-color: var(--imarika-light); color: var(--imarika-light); background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,.1); text-decoration: none; }

/* ── Countdown widget ─────────────────────────────────────────── */
.countdown {
  display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap;
}
.countdown .unit {
  background: rgba(255,255,255,.08); border-radius: var(--radius);
  padding: 10px 16px; min-width: 74px; text-align: center;
}
.countdown .unit .num { font-size: 1.6rem; font-weight: 800; color: var(--imarika-yellow); display: block; }
.countdown .unit .label { font-size: .7rem; text-transform: uppercase; opacity: .8; }

/* ── Sections / cards ─────────────────────────────────────────── */
section.block { padding: 44px 0; }
section.block.alt {
  background:
    linear-gradient(rgba(239,239,239,.94), rgba(239,239,239,.94)),
    url("../../images/imarika_background_2.07d7761f617c.jpeg");
  background-size: cover;
  background-position: center;
}
section.auth-block {
  background:
    linear-gradient(rgba(255,255,255,.93), rgba(255,255,255,.93)),
    url("../../images/imarika_background_3.5bdd433835c1.jpeg");
  background-size: cover;
  background-position: center;
}
h2.section-title {
  font-size: 1.5rem; margin: 0 0 22px; border-left: 6px solid var(--imarika-teal); padding-left: 12px;
}

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid #e3e3e3; border-radius: var(--radius); padding: 18px; background: #fff;
}
.card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.card .meta { font-size: .85rem; color: #555; }
a.card { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.card:hover { box-shadow: 0 4px 14px rgba(6,33,55,.12); transform: translateY(-2px); text-decoration: none; }

.team-badge {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.team-badge img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 1px solid #ddd; }

/* Imarika Updates 15/16 — grid (not flex) so the status badge, round pill
   and every other column land in one straight line down the page,
   regardless of how long each row's team names are. The stage column is
   wide enough, and wraps, so long labels like "Placement Match (9th v
   10th)" render fully instead of overflowing into the next column. */
.fixture-row {
  display: grid;
  grid-template-columns: minmax(210px, 2fr) 140px 100px 100px minmax(140px, 1fr) auto;
  align-items: center;
  gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee;
}
.fixture-row .teams { font-weight: 700; }
.fixture-teams { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.fixture-team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fixture-team a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fixture-team-logo { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; border: 1px solid #ddd; flex-shrink: 0; }
/* Long team names truncate with an ellipsis (full name on hover via
   the anchor's title attribute) instead of breaking row alignment. */
.fixture-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.fixture-vs { font-weight: 400; color: #999; font-size: .82rem; flex-shrink: 0; }
.fixture-score { font-weight: 800; color: var(--imarika-navy); font-size: .95rem; flex-shrink: 0; }
.fixture-score-live { color: #b8590a; }
.pill-stage {
  justify-self: stretch; text-align: center; white-space: normal;
  line-height: 1.2; word-break: normal;
}
.fixture-stats-btn {
  justify-self: end; white-space: nowrap; padding: 7px 14px; font-size: .78rem;
  border-radius: 6px; border: 1.5px solid var(--imarika-navy);
  color: var(--imarika-navy); background: transparent; font-weight: 700;
}
.fixture-stats-btn:hover { background: var(--imarika-navy); color: #fff; text-decoration: none; }

/* ── Pills (age-category / metric filters) ────────────────────────
   Rounded-rectangle buttons (not stadium pills), bold text, a solid
   navy "active" state — one filter group per row, stacked directly
   below the previous group (metric row, then category row beneath it). */
.pill-group { margin-bottom: 6px; }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.pill-group .pill-row { margin-bottom: 12px; }
.pill {
  display: inline-block; padding: 10px 20px; border-radius: 8px; font-size: .85rem;
  font-weight: 700; background: #fff; color: var(--imarika-navy);
  border: 2px solid var(--imarika-navy); text-decoration: none; line-height: 1.2;
}
a.pill:hover { background: var(--imarika-light); text-decoration: none; }
.pill-active { background: var(--imarika-navy); color: #fff !important; border-color: var(--imarika-navy); }
.pill-static { cursor: default; }
.pill-small { padding: 4px 12px; font-size: .72rem; border-radius: 6px; border-width: 1.5px; }

/* ── Rank rows (standings team / leaderboard player, with logo/photo
   and a rise-drop indicator) ─────────────────────────────────────── */
.rank-team { display: inline-flex; align-items: center; gap: 8px; }
.rank-avatar {
  width: 26px; height: 26px; object-fit: cover; border-radius: 50%;
  border: 1px solid #ddd; flex-shrink: 0;
}
.rank-arrow { font-weight: 700; margin-left: 4px; font-size: .8rem; }
.rank-arrow.up { color: #1a7a3d; }
.rank-arrow.down { color: #a12626; }
.fixture-row .status-badge {
  font-size: .72rem; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  background: var(--imarika-teal); color: var(--imarika-navy); font-weight: 700;
}
.fixture-row .status-badge.completed { background: var(--imarika-light); }
.fixture-row .status-badge.live { background: var(--imarika-yellow); }

/* ── Tables (standings/leaderboard) ───────────────────────────── */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td {
  padding: 10px 8px; text-align: left; border-bottom: 1px solid #eee; font-size: .92rem;
}
table.data-table th { background: var(--imarika-navy); color: var(--imarika-light); }
table.data-table tr:nth-child(1) td { font-weight: 700; }
/* A wide table (standings' 10 columns, etc.) used to scroll via
   `display: block`, but that drops the table's own column layout on
   iOS Safari -- long content (a team name) then visually overlaps the
   next column instead of scrolling into view. Fixed table layout with
   per-cell ellipsis truncation keeps every column aligned and turns a
   long name into "Chipuka Academ…" instead of an overlap. */
@media (max-width: 640px) {
  table.data-table { table-layout: fixed; }
  table.data-table th, table.data-table td {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* The name column (Team on standings, Player on the leaderboard) is
     always the second column and gets a bit more room than the
     single/double-digit stat columns beside it. */
  table.data-table th:nth-child(2), table.data-table td:nth-child(2) { width: 34%; }
  .rank-team { max-width: 100%; overflow: hidden; }
  .rank-team a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
}

/* ── Calendar month grid ──────────────────────────────────────── */
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-grid .dow { text-align: center; font-weight: 700; font-size: .8rem; color: #555; padding-bottom: 6px; }
.calendar-day {
  min-height: 70px; border: 1px solid #eee; border-radius: 6px; padding: 6px; font-size: .78rem;
}
.calendar-day.outside { background: #fafafa; color: #bbb; }
.calendar-day.today { border-color: var(--imarika-teal); border-width: 2px; }
.calendar-day .day-num { font-weight: 700; }
.calendar-day .evt { display: block; margin-top: 4px; background: var(--imarika-yellow); border-radius: 4px; padding: 1px 4px; }

/* ── Loading / feedback states (spec 23) ──────────────────────── */
.state-loading, .state-empty, .state-error, .state-success, .state-warning, .state-info, .state-debug {
  padding: 14px 16px; border-radius: var(--radius); font-size: .9rem; margin: 12px 0;
}
.state-loading { background: var(--imarika-light); color: var(--imarika-navy); }
.state-empty { background: #f7f7f7; color: #777; text-align: center; }
.state-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; font-weight: 600; }
.state-error ul { margin: 0; padding-left: 18px; list-style: disc; color: inherit; }
.state-error li { color: inherit; }
.state-success { background: #e9f9ef; color: #1a7a3d; border: 1px solid #bfe8cd; }
.state-warning { background: #fff8e1; color: #7a5b00; border: 1px solid var(--imarika-yellow); }
.state-info { background: #eaf7f8; color: #0d5a5e; border: 1px solid var(--imarika-teal); }
.state-debug { background: #f7f7f7; color: #777; border: 1px solid #ddd; }
.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid var(--imarika-teal);
  border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Forms ─────────────────────────────────────────────────────── */
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.form-field input, .form-field textarea {
  width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; font-family: var(--font-ui);
}

/* Imarika Update 14: a coach's (or admin's) age-category picker on the
   "Register Your Team" page -- checkboxes rather than a native
   multi-select (which needs ctrl/cmd-click and is genuinely unusable
   with a thumb on a touchscreen), laid out as large, easy-to-tap tiles. */
.checkbox-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 4px;
}
.checkbox-tile {
  display: flex; align-items: center; gap: 8px; font-weight: 400 !important;
  border: 1px solid #ccc; border-radius: 6px; padding: 10px 12px; cursor: pointer;
  font-size: .9rem; margin: 0 !important;
}
.checkbox-tile input { width: auto !important; flex-shrink: 0; }
.checkbox-tile:has(input:checked) { border-color: var(--imarika-navy); background: var(--imarika-light); }

/* A row of submit buttons (e.g. player registration's "Submit" /
   "Submit & Add Another Player") -- stacks to full-width, easy-to-tap
   buttons on narrow screens instead of squeezing two side by side. */
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Password visibility toggle ───────────────────────────────────── */
.password-field { position: relative; }
.password-field input { padding-right: 42px !important; }
.password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
  padding: 6px 8px; color: #777;
}
.password-toggle:hover { color: var(--imarika-navy); }

/* ── Pagination ────────────────────────────────────────────────── */
.pagination-row {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 28px 0 8px; font-size: .9rem;
}
.pagination-row .meta { margin: 0; }

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer {
  background:
    linear-gradient(rgba(6,33,55,.93), rgba(6,33,55,.93)),
    url("../../images/imarika_background_4.db08f59f2283.jpeg");
  background-size: cover;
  background-position: center;
  color: var(--imarika-light);
  padding: 32px 0;
  margin-top: 40px;
}
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: var(--imarika-light); opacity: .85; }
.site-footer .legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer .fine-print { opacity: .6; font-size: .8rem; margin-top: 16px; }

/* Sponsors row — full width, above the brand/legal-links line. */
.footer-sponsors { width: 100%; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-sponsors-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: 10px; }
.footer-sponsors-row { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.footer-sponsor-logo { height: 40px; width: auto; max-width: 120px; object-fit: contain; background: #fff; border-radius: 4px; padding: 4px 8px; }
.footer-sponsor-logo-link { display: inline-flex; }

/* Utility: apply the Hatuzeeki display font to any inline occurrence of
   the word/tag outside the header + hero (e.g. the footer tagline). */
.font-hatuzeeki { font-family: var(--font-hatuzeeki); }

/* ── Knockout bracket visual (Imarika Updates 9) ──────────────────
   Deliberately not pixel-perfect connector lines -- each round column
   spreads its matches evenly (`justify-content: space-around`) across
   the same overall height, which lines a round's matches up roughly
   against the matches that feed them without needing per-match height
   math. A thin connector nub on each match hints at the bracket shape;
   it's a "such as this" reference visual, not a slide-deck rebuild. */
.bracket {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 10px 4px 30px;
  align-items: stretch;
}
.bracket-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 190px;
}
.bracket-final-round { align-items: center; justify-content: center; }
.bracket-match {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--imarika-navy);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 18px;
  font-size: .82rem;
  min-width: 150px;
}
.bracket-round:not(.bracket-final-round) .bracket-match::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 18px;
  height: 1px;
  background: #bfc7cc;
}
.bracket-team { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 2px 0; }
.bracket-team.winner { font-weight: 800; color: var(--imarika-navy); }
.bracket-team-logo { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.bracket-score {
  text-align: center;
  font-weight: 800;
  color: var(--imarika-navy);
  border-top: 1px solid var(--imarika-light);
  margin-top: 6px;
  padding-top: 4px;
}
.bracket-pens { font-weight: 600; color: #5c6b74; font-size: .78em; }
.bracket-tbd { color: #999; font-style: italic; text-align: center; padding: 4px 0; }
.bracket-champion {
  text-align: center;
  margin-top: 10px;
  font-weight: 800;
  color: var(--imarika-navy);
}
.bracket-trophy-logo { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px var(--imarika-yellow); }

/* Imarika Updates 10: 3rd Place Play-Off and the 9th/10th Placement
   Match shown side by side rather than stacked. */
.bracket-side-by-side { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 12px; }
.bracket-side-by-side > div { flex: 1; min-width: 220px; }

/* Imarika Updates 11: visually separates one category's knockout
   bracket from the next on the "All Categories" knockout view. */
.bracket-divider { border: none; border-top: 2px solid var(--imarika-light); margin: 36px 0; }
/* ═══════════════════════════════════════════════════════════════
   Mobile optimization (Imarika Update 14) — "everything mobile
   optimised even for the smallest of screens". The rules above
   already handle nav collapse, grid collapse, flex-wrap, and (just
   above) table scrolling; this section tightens spacing, sizing and
   layout further for phones, down to genuinely small/older devices
   (iPhone SE / 320px-wide Android class), on top of everything else.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .container { padding: 0 14px; }
  section.block { padding: 28px 0; }
  h2.section-title { font-size: 1.25rem; margin-bottom: 16px; }

  .hero { padding: 36px 0; }
  .hero h1 { font-size: 1.7rem; }
  .hero p.lead { font-size: .95rem; }
  .hero .cta-row .btn { flex: 1 1 auto; text-align: center; }

  /* Buttons get a bigger tap target and don't force horizontal
     scrolling if two sit side by side on a narrow screen. */
  .btn { padding: 12px 18px; font-size: .92rem; }
  .form-actions .btn { flex: 1 1 100%; text-align: center; }

  /* Pills shrink slightly and keep wrapping (flex-wrap already set
     above) rather than overflowing off the edge of the screen. */
  .pill { padding: 8px 14px; font-size: .8rem; }
  .pill-small { padding: 4px 10px; font-size: .68rem; }

  /* Countdown units: 4 boxes plus gaps no longer need to fit in one
     row on a 320-375px screen -- 2x2 reads just as well. */
  .countdown { justify-content: center; }
  .countdown .unit { min-width: 64px; padding: 8px 10px; flex: 1 1 40%; }

  /* A fixture row's logo + team-name + status + date can get tight
     with everything on one line -- let it wrap onto its own lines
     with a bit of breathing room instead of clipping/overflowing. */
  .fixture-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
  .fixture-row .fixture-teams { flex-wrap: wrap; }
  .fixture-row .fixture-team-name { max-width: 34vw; }
  .fixture-row .pill-stage { order: 2; justify-self: auto; }
  .fixture-row .status-badge { order: 3; }
  .fixture-row .meta { order: 4; width: 100%; }
  .fixture-row .fixture-stats-btn { order: 5; width: 100%; text-align: center; justify-self: stretch; }

  .team-badge img, .team-badge .imarika-logo { width: 32px; height: 32px; }

  table.data-table th, table.data-table td { padding: 8px 6px; font-size: .82rem; }

  /* The knockout bracket already scrolls horizontally (see .bracket
     above); shrink its minimum column/box width further so at least
     ~1.5 columns are visible on a 320px-wide screen instead of a
     single, barely-legible sliver of one. */
  .bracket-round { min-width: 150px; }
  .bracket-match { min-width: 128px; margin: 8px 12px; font-size: .78rem; }

  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  /* The very smallest common phone width (iPhone SE / older Android) --
     one more notch down on anything that could still crowd. */
  .hero h1 { font-size: 1.45rem; }
  .countdown .unit { flex: 1 1 45%; min-width: 0; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .bracket-round { min-width: 130px; }
  .bracket-match { min-width: 112px; padding: 6px 8px; }
}