/* ==========================================================================
   HVOT League Management System
   Brand palette (Keith J. Connell, 2026-07-13). Edit these variables to
   retheme the whole site; replace files in /assets/images/ to change images.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  --green-deep: #2d9265;     /* Primary: header, footer */
  --green: #2d9265;          /* Primary: buttons, links on light */
  --green-soft: #e1e8ed;     /* Accent 4: tinted panels, table stripes */
  --gold: #eecc10;           /* Secondary: accents, highlights */
  --gold-soft: #e1e8ed;      /* Accent 4 */
  --teal: #378b8b;           /* Accent 3: hover states, secondary emphasis */
  --ink: #232326;            /* Text */
  --ink-soft: #979ea0;       /* Accent: muted text */
  --paper: #ffffff;          /* Page background */
  --card: #ffffff;
  --line: #c0cacd;           /* Accent 2: borders, dividers */
  --error: #a63d40;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(35, 35, 38, .08);
}

* { 
  box-sizing: border-box; 
}

html { 
  -webkit-text-size-adjust: 100%; 
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  padding-bottom: 64px; /* room for the mobile tab bar */
}

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

a { 
  color: var(--teal); 
}

h1, h2 { 
  line-height: 1.2; 
  color: var(--green-deep); 
}

.skip-link {
  position: absolute; 
  left: -9999px; 
  top: 0;
  background: var(--gold); 
  color: var(--ink); 
  padding: .5rem 1rem;
}

.skip-link:focus { 
  left: 0; 
  z-index: 100; 
}

/* ---- header --------------------------------------------------------- */
.site-header {
  position: relative;
  background: var(--green-deep) url('../images/banner-scaled-1.png') no-repeat;
  background-size: cover;
  background-position: var(--banner-x, 50%) var(--banner-y, 100%);
  color: #fff;
}

.header-inner {
  max-width: 1400px; 
  margin: 0 auto; 
  padding: .6rem 1rem;
  min-height: 165px;
  display: flex; 
  align-items: center; 
  gap: 1rem;
}

.brand img { 
  display: block; 
  height: 125px; 
  width: auto; 
}

.main-nav { 
  flex: 1; 
}

.main-nav ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  gap: .25rem; 
  flex-wrap: wrap; 
  justify-content: flex-end; 
}

/* With the menu right-aligned, the last dropdowns open leftward so they
   never spill past the right edge of the viewport. */
.main-nav > ul > li:nth-last-child(-n+2) > .sub { 
  left: auto; 
  right: 0; 
  border-radius: 0 0 0 8px; 
}

.main-nav > ul > li:nth-last-child(-n+2) .fly { 
  left: auto; 
  right: 100%; 
}

.main-nav a {
  display: block; 
  padding: .55rem .8rem; 
  color: #fff; 
  text-decoration: none;
  font-weight: 700; 
  font-size: .92rem; 
  text-transform: uppercase;
  letter-spacing: .02em; 
  border-radius: 6px;
}

.main-nav a:hover, 
.main-nav a:focus { 
  background: rgba(255, 255, 255, .16); 
  color: var(--gold); 
}

.main-nav .has-sub { 
  position: relative; 
}

.main-nav .sub {
  display: none; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  min-width: 200px;
  background: var(--green-deep); 
  padding: .35rem; 
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow); 
  z-index: 50;
}

.main-nav .has-sub:hover .sub, 
.main-nav .has-sub:focus-within .sub { 
  display: block; 
}

.main-nav .sub a { 
  text-transform: none; 
  font-weight: normal; 
}

.header-actions { 
  display: flex; 
  align-items: center; 
  gap: .5rem; 
  margin-left: auto; 
}

.inline-form { 
  display: inline; 
}

.search-toggle {
  background: none; 
  border: 0; 
  padding: .55rem .7rem; 
  cursor: pointer;
  color: #fff; 
  font-size: 1.05rem; 
  border-radius: 6px; 
  line-height: 1;
}

.search-toggle:hover, 
.search-toggle:focus { 
  background: rgba(255, 255, 255, .16); 
  color: var(--gold); 
}

.header-search {
  background: var(--green-deep); 
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: .75rem 1rem;
}

.header-search-form {
  max-width: 720px; 
  margin: 0 auto; 
  display: flex; 
  gap: .5rem;
}

.header-search-form input[type="search"] {
  flex: 1; 
  padding: .6rem .9rem; 
  border: 0; 
  border-radius: 6px;
  font-size: 1rem; 
  min-width: 0;
}

.header-search-form button {
  background: var(--gold); 
  color: var(--ink); 
  border: 0; 
  border-radius: 6px;
  padding: .6rem 1rem; 
  font-size: 1rem; 
  cursor: pointer;
}

.header-search-form button:hover, 
.header-search-form button:focus { 
  background: #fff; 
}

.sr-only {
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px;
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  white-space: nowrap; 
  border: 0;
}

.search-results-group { 
  margin-bottom: 2rem; 
}

.search-results-group h2 { 
  font-size: 1.15rem; 
  border-bottom: 2px solid var(--green); 
  padding-bottom: .35rem; 
}

.search-result { 
  padding: .65rem 0; 
  border-bottom: 1px solid var(--line); 
}

.search-result a { 
  font-weight: 600; 
  color: var(--green); 
  text-decoration: none; 
}

.search-result a:hover, 
.search-result a:focus { 
  text-decoration: underline; 
}

.search-result .search-snippet { 
  margin: .25rem 0 0; 
  color: var(--ink-soft); 
  font-size: .92rem; 
}

.search-result .sub-team-logo { 
  height: 22px; 
  width: auto; 
  vertical-align: middle; 
  margin-right: .4rem; 
}

.nav-toggle {
  display: none; 
  background: none; 
  border: 0; 
  padding: .5rem; 
  cursor: pointer;
}

.nav-toggle span {
  display: block; 
  width: 24px; 
  height: 3px; 
  background: #fff; 
  margin: 5px 0; 
  border-radius: 2px;
}

.mobile-nav {
  display: none; 
  flex-direction: column;
  position: fixed; 
  inset: 0; 
  width: 100vw; 
  height: 100vh; 
  height: 100svh;
  z-index: 120; 
  overflow-y: auto;
  background: var(--green); 
  padding: 1rem 1.2rem 2rem;
}

.mobile-nav-top {
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start;
  margin-bottom: 1rem;
}

.mobile-nav-top img { 
  height: 72px; 
  width: auto; 
}

.mobile-close {
  background: none; 
  border: 0; 
  color: #000; 
  font-size: 2rem;
  line-height: 1; 
  cursor: pointer; 
  padding: .2rem .5rem;
}

.mobile-nav a, 
.mobile-parent {
  color: #000; 
  text-decoration: none; 
  padding: .7rem .4rem;
  border: 0; 
  font-weight: 400; 
  font-size: 1.05rem;
  background: none; 
  text-align: left; 
  width: 100%; 
  cursor: pointer;
  font-family: inherit;
}

.mobile-nav a:hover, 
.mobile-parent:hover { 
  color: #fff; 
}

.mobile-parent .caret { 
  display: inline-block; 
  transition: transform .15s; 
  margin-left: .3rem; 
}

.mobile-parent[aria-expanded="true"] .caret { 
  transform: rotate(180deg); 
}

.mobile-sub { 
  display: flex; 
  flex-direction: column; 
  padding-left: 1.1rem; 
}

.mobile-sub a { 
  font-size: .95rem; 
  opacity: .95; 
}

/* ---- buttons, flashes ------------------------------------------------ */
.btn {
  display: inline-block; 
  padding: .5rem 1rem; 
  border-radius: 6px;
  font-weight: bold; 
  text-decoration: none; 
  border: 2px solid transparent;
  cursor: pointer; 
  font-size: .92rem;
}

.btn-gold { 
  background: var(--gold); 
  color: var(--ink); 
}

.btn-gold:hover, 
.btn-green:hover { 
  background: var(--teal); 
  color: #fff; 
  filter: none; 
}

.btn-green { 
  background: var(--green); 
  color: #fff; 
  margin-top: 20px;
  margin-bottom: 20px;
}

.btn-outline { 
  background: transparent; 
  color: #fff; 
  border-color: rgba(255, 255, 255, .5); 
}

.site-main .btn-outline { 
  color: var(--green); 
  border-color: var(--green); 
}

.btn:hover { 
  filter: brightness(1.08); 
}

.flash { 
  max-width: 1100px; 
  margin: .8rem auto 0; 
  padding: .7rem 1rem; 
  border-radius: var(--radius); 
}

.flash-success { 
  background: var(--green-soft); 
  border: 1px solid var(--green); 
}

.flash-error { 
  background: #fdeeee; 
  border: 1px solid var(--error); 
}

/* ---- layout blocks --------------------------------------------------- */
.site-main { 
  min-height: 55vh; 
}

.page, 
.page-narrow { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 1.5rem 1rem 2.5rem; 
}

.page-narrow { 
  max-width: 560px; 
}

.muted { 
  color: var(--ink-soft); 
}

.hero { 
  position: relative; 
  background: var(--green-deep); 
}

.hero-img { 
  display: block; 
  width: 100%; 
  max-height: 460px; 
  object-fit: cover; 
  opacity: .92; 
}

.hero-copy {
  position: absolute; 
  inset: auto 0 0 0; 
  padding: 1.2rem 1rem 1.6rem;
  background: linear-gradient(transparent, rgba(18, 59, 36, .85));
}

.hero-copy h1 {
  max-width: 1100px; 
  margin: 0 auto; 
  color: #fff; 
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.team-strip {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 1.25rem;
  flex-wrap: wrap; 
  padding: 1.2rem 1rem; 
  background: var(--card);
  border-bottom: 3px solid var(--gold);
}

.team-chip img { 
  width: 68px; 
  height: 68px; 
  object-fit: contain; 
  transition: transform .15s; 
}

.team-chip:hover img { 
  transform: scale(1.1); 
}

.team-chip-name { 
  font-weight: bold; 
  color: var(--green-deep); 
}

/* ---- cards and tables ------------------------------------------------ */
.score-grid, 
.card-grid, 
.action-grid {
  display: grid; 
  gap: 1rem; 
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  margin-bottom: 1.5rem;
}

/* The cards already carry their own bottom margin, which would otherwise sit
   inside the new border and make the group look bottom heavy. */
.action-grid .action-card {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .action-grid {
    padding: 16px;
  }
}

.score-card, 
.stat-card, 
.action-card, 
.panel {
  background: var(--card); 
  border: 1px solid var(--line);
  border-radius: var(--radius); 
  padding: 1rem; 
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.score-date { 
  margin: 0 0 .5rem; 
  color: var(--ink-soft); 
  font-size: .85rem; 
}

.score-teams { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: .25rem 0; 
}

.score-teams img { 
  width: 28px; 
  height: 28px; 
  vertical-align: middle; 
  margin-right: .5rem; 
}

.stat-card { 
  text-align: center; 
}

.stat-card strong { 
  display: block; 
  font-size: 2rem; 
  color: var(--green-deep); 
}

.action-card { 
  display: block; 
  text-decoration: none; 
  color: inherit; 
}

.action-card strong { 
  color: var(--green-deep); 
  display: block; 
  margin-bottom: .25rem; 
}

.action-card:hover { 
  border-color: var(--gold); 
}

.data-table {
  width: 100%; 
  border-collapse: separate; 
  border-spacing: 0;
  background: var(--card); 
  box-shadow: var(--shadow);
  border-radius: var(--radius); 
  overflow: hidden;
}

.data-table th { 
  background: var(--green); 
  color: #fff; 
  text-align: left; 
  padding: .55rem .7rem; 
  font-size: .85rem; 
}

.data-table td { 
  padding: .55rem .7rem; 
  font-size: .92rem;
}

.data-table tbody tr:nth-child(even) td { 
  background: #E1E8ED; 
}

.cell-team img { 
  width: 26px; 
  height: 26px; 
  vertical-align: middle; 
  margin-right: .5rem; 
}

/* ---- public stats tables: centre every column except the first ------------- */
.sched-table th:nth-child(n+2),
.sched-table td:nth-child(n+2),
.standings-table th:nth-child(n+2),
.standings-table td:nth-child(n+2),
.results-table th:nth-child(n+2),
.results-table td:nth-child(n+2) {
  text-align: center;
}

/* standings: narrow the Team column (roughly 30% less than its usual share)
   so the stat columns, including the new PIM column, have room */
.standings-table {
  table-layout: fixed;
}

.standings-table th:nth-child(1),
.standings-table td:nth-child(1) {
  width: 21%;
}

/* ---- statistics tables: identical fixed layout, centred stat columns ------- */
.stats-table {
  table-layout: fixed;
}

.stats-table th:nth-child(1),
.stats-table td:nth-child(1) { width: 4%; }

.stats-table th:nth-child(2),
.stats-table td:nth-child(2) { width: 23%; }

.stats-table th:nth-child(3),
.stats-table td:nth-child(3) { width: 23%; }

.stats-table th:nth-child(n+4),
.stats-table td:nth-child(n+4) { width: 7.14%; }

.stats-table th:nth-child(n+4),
.stats-table td:nth-child(n+4) { text-align: center; }

/* short name (first initial) is mobile-only; full name shows elsewhere */
.stats-table .name-abbr { display: none; }

/* ---- all-time records tables: matched columns so column four registers ----- */
.records-table {
  table-layout: fixed;
}

.records-table th:nth-child(1),
.records-table td:nth-child(1) { width: 6%; }

.records-table th:nth-child(2),
.records-table td:nth-child(2) { width: 24%; }

.records-table th:nth-child(3),
.records-table td:nth-child(3) { width: 40%; }

.records-table th:nth-child(4),
.records-table td:nth-child(4) { width: 30%; }

/* ---- goals tables: six columns; Score, Team 2 and Date register ----------- */
.records-table-6 {
  table-layout: fixed;
}

.records-table-6 th:nth-child(1),
.records-table-6 td:nth-child(1) { width: 6%; }

.records-table-6 th:nth-child(4),
.records-table-6 td:nth-child(4) {
  width: 7%;
  padding-left: 10px;
  padding-right: 10px;
}

/* left padding removed so the 10px sits entirely on the score side */
.records-table-6 th:nth-child(5),
.records-table-6 td:nth-child(5) {
  width: 33%;
  padding-left: 0;
}

.records-table-6 th:nth-child(6),
.records-table-6 td:nth-child(6) { width: 30%; }

/* columns 2 and 3 differ per table but always total 24% */
.rt6-one th:nth-child(2),
.rt6-one td:nth-child(2) { width: 16%; }

.rt6-one th:nth-child(3),
.rt6-one td:nth-child(3) { width: 8%; }

.rt6-combined th:nth-child(2),
.rt6-combined td:nth-child(2) { width: 8%; }

.rt6-combined th:nth-child(3),
.rt6-combined td:nth-child(3) { width: 16%; }

.sched-table td.cell-team .team-name-txt {
  vertical-align: middle;
}

.row-error td { 
  background: #fdeeee !important; 
}

.cell-data .kv { 
  display: inline-block; 
  margin-right: .8rem; 
  color: var(--ink-soft); 
  font-size: .84rem; 
}

.badge { 
  padding: .15rem .5rem; 
  border-radius: 4px; 
  font-size: .8rem; 
  font-weight: bold; 
}

.badge-validated { 
  background: var(--green-soft); 
  color: var(--green-deep); 
}

.badge-has_errors { 
  background: #fdeeee; 
  color: var(--error); 
}

.badge-committed { 
  background: var(--gold-soft); 
  color: #6b5410; 
}

.badge-discarded { 
  background: var(--line); 
  color: var(--ink-soft); 
}

/* ---- forms ------------------------------------------------------------ */
.stack { 
  display: grid; 
  gap: .6rem; 
  max-width: 480px; 
}
.stack .data-table { max-width: none; width: 100%; }

.stack label { 
  font-weight: bold; 
  color: var(--green-deep); 
}

.stack input, 
.stack select {
  padding: .6rem .7rem; 
  border: 1px solid var(--line); 
  border-radius: 6px;
  font-size: 1rem; 
  background: #fff;
}

.stack input:focus, 
.stack select:focus { 
  outline: 2px solid var(--gold); 
}

/* Override stack layout constraint for data tables */
.stack .data-table { 
  max-width: none; 
  width: 100%; 
}

/* Allow specific stacks with data tables to occupy the full container */
form.stack:has(.data-table) {
  max-width: 100%;
}

/* ---- footer and tab bar ----------------------------------------------- */
.site-footer { 
  background: #000; 
  color: #fff; 
  margin-top: 2rem; 
}

.footer-inner { 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 2rem 1rem; 
  text-align: center; 
}

.footer-logo { 
  margin-bottom: .8rem; 
}

.footer-nav { 
  display: flex; 
  justify-content: center; 
  gap: 1.4rem; 
  flex-wrap: wrap; 
  margin-bottom: 1rem; 
}

.footer-nav a { 
  color: #fff; 
  text-decoration: none; 
  font-weight: bold; 
}

.footer-nav a:hover { 
  color: var(--gold); 
}

.footer-legal { 
  font-size: .82rem; 
  color: #fff; 
  max-width: 720px; 
  margin: 0 auto .5rem; 
}

.footer-credit a { 
  color: #fff; 
  font-size: .82rem; 
}

.tab-bar {
  display: none; 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  z-index: 90;
  background: #000; 
  border-top: 3px solid var(--gold);
  padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}

.tab-bar a {
  flex: 1; 
  text-align: center; 
  color: #fff; 
  text-decoration: none;
  font-size: .72rem; 
  font-weight: bold;
}

.tab-ic { 
  display: block; 
  font-size: 1.15rem; 
  line-height: 1.3; 
  color: #fff; 
}

.tab-svg { 
  width: 1.15em; 
  height: 1.15em; 
  vertical-align: -0.15em; 
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1200px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav:not([hidden]) { display: flex; }
}

@media (max-width: 900px) {
  .site-header { 
      background-position: var(--banner-x-m, 50%) var(--banner-y-m, 100%); 
    }
  .tab-bar { 
      display: flex; 
    }
}

@media (min-width: 901px) {
  body { 
      padding-bottom: 0; 
    }
}

@media (min-width: 761px) {
  .home-slogan { 
      margin-bottom: 3rem; 
    }
  .home-team img { 
      width: clamp(62px, 8.4vw, 101px); 
      height: clamp(62px, 8.4vw, 101px); 
    }
}

@media (prefers-reduced-motion: reduce) {
  * { 
      transition: none !important; 
    }
}

/* ---- home: hero overlay ------------------------------------------------ */
.hero-overlay {
  position: absolute; 
  inset: 0;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  gap: .6rem; 
  text-align: center;
  background: rgba(35, 35, 38, .28);
}

.hero-overlay .hero-logo { 
  height: 120px; 
  width: auto; 
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); 
}

.hero-overlay h1 {
  margin: 0; 
  color: #fff; 
  font-size: clamp(1.5rem, 4.5vw, 2.6rem);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

/* ---- home: scoreboard carousel ---------------------------------------- */
.scoreboard {
  position: relative; 
  max-width: 1400px;
  margin: 1.5rem auto;
  padding: 0 2.6rem;
}

.sb-track {
  display: flex;
  gap: .2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px;
  scrollbar-width: none;
}

.sb-track::-webkit-scrollbar {
  display: none;
}

.sb-datecard {
  flex: 0 0 96px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E1E8ED;
  border-radius: var(--radius);
  font-weight: 700;
  color: var(--ink);
  font-size: .95rem;
}

/* Ensure padding is inside constraints so card size never blooms */
.sb-game, .sb-game * {
  box-sizing: border-box;
}

.sb-game {
  flex: 0 0 96px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem; /* Explicit .5rem inner padding all around */
  display: flex;
  flex-direction: column;
}

.sb-live {
  border: 2px solid var(--green);
  background: color-mix(in srgb, var(--green) 20%, transparent);
}

/* Standard predefined area for vertically centered match states */
.sb-time-wrapper {
  height: 34px; 
  display: flex;
  align-items: center; 
  justify-content: center;
  margin-bottom: 0.25rem;
}

.sb-time {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: .74rem;
  color: var(--ink);
  line-height: 1.2;
}

/* Keeps live layout stacked cleanly together */
.sb-live-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sb-time-period {
  font-weight: 700;
}

.sb-live .sb-time {
  color: #000;
  font-weight: 700;
}

.home-scoreboard .sb-live .sb-time {
  color: #000000;
}

/* Tightened Layout Rules for Rows */
.sb-row {
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the logo + score group inside the card */
  padding: .12rem 0;
  width: 100%;
  gap: 20px; /* FIXED: Enforces exactly 10px separation between logo/name and score */
}

.sb-row img, 
.sb-name {
  margin-right: 0;
}

.sb-row img {
  width: auto;
  height: 35px;
  object-fit: contain;
}

.sb-name {
  font-size: .78rem;
  font-weight: 600;
}

.sb-score {
  font-weight: 700;
  text-align: center;
  margin-left: 0;
  padding-left: 0;
}

.sb-arrow {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  width: 34px; 
  height: 34px; 
  border-radius: 50%; 
  border: 1px solid var(--line);
  background: var(--card); 
  color: var(--green-deep); 
  font-size: 1rem; 
  cursor: pointer;
  box-shadow: var(--shadow); 
  z-index: 5;
}

.sb-prev { 
  left: .2rem; 
}

.sb-next { 
  right: .2rem; 
}

.sb-arrow:hover { 
  background: var(--green); 
  color: #fff; 
}
/* ---- home: champions feature ------------------------------------------ */
.champ { 
  background: var(--green-soft); 
  border-top: 3px solid var(--gold); 
  margin-top: 1.5rem; 
}

.champ-inner {
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 2rem 1rem;
  display: grid; 
  grid-template-columns: 200px 1fr; 
  gap: 1.6rem; 
  align-items: start;
}

.champ-badge { 
  text-align: center; 
}

.champ-badge img { 
  width: 120px; 
  height: 120px; 
  object-fit: contain; 
}

.champ-label {
  margin: .4rem 0 0; 
  font-weight: 700; 
  text-transform: uppercase;
  letter-spacing: .06em; 
  color: var(--green-deep);
}

.champ-year { 
  margin: 0; 
  font-size: 2rem; 
  font-weight: 700; 
  color: var(--teal); 
}

.champ-photo { 
  border-radius: var(--radius); 
  box-shadow: var(--shadow); 
  margin-bottom: .8rem; 
}

.champ-story h2 { 
  margin: 0 0 .5rem; 
}

@media (max-width: 700px) {
  .champ-inner { 
      grid-template-columns: 1fr; text-align: center; 
    }
}

/* ---- home: full-viewport hero layout ----------------------------------- */
.home-hero {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink) url('../images/hero.png') center / cover no-repeat;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 2rem;
  padding: 2rem clamp(1rem, 5vw, 4rem);
}

.home-hero-left { 
  text-align: center; 
}

.home-logo { 
  width: clamp(216px, 31vw, 408px); 
  height: auto; 
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)); 
}

.home-hero-right { 
  text-align: left; 
}

.home-slogan {
  margin: 0 0 1.4rem; 
  color: #fff;
  font-family: 'Oswald', 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: clamp(57.838px, 3.615rem + ((1vw - 3.2px) * 4.856), 120px);
  font-weight: 700; 
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .6);
}

.home-teams {
  display: flex; 
  justify-content: flex-start; 
  align-items: center;
  gap: calc(clamp(.6rem, 2vw, 1.4rem) + 10px); 
  flex-wrap: wrap;
  margin-top: 40px;
}

.home-team img { 
  width: clamp(52px, 7vw, 84px); 
  height: clamp(52px, 7vw, 84px); 
  object-fit: contain; 
  transition: transform .15s; 
}

.home-team:hover img { 
  transform: scale(1.12); 
}

.home-team span { 
  color: #fff; 
  font-weight: 700; 
  text-shadow: 0 2px 6px rgba(0,0,0,.6); 
}

.home-nav {
  background: #000;
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap;
  gap: calc(clamp(.4rem, 2vw, 1.2rem) + 10px); 
  padding: .9rem 1rem;
}

.home-nav a {
  color: #fff; 
  text-decoration: none; 
  font-weight: 400;
  text-transform: uppercase; 
  letter-spacing: .04em;
  font-size: clamp(.78rem, 1.6vw, .95rem); 
  padding: .35rem .6rem; 
  border-radius: 4px;
}

.home-nav a:hover, 
.home-nav a:focus { 
  color: var(--gold); 
  background: rgba(255, 255, 255, .1); 
}

@media (max-width: 760px) {
  .home-hero { 
      grid-template-columns: 1fr; 
      align-content: center; 
      gap: 1.2rem; 
    }
  .home-hero-left { 
      text-align: center; 
    }
  .home-hero-right { 
      text-align: center; 
    }
  .home-slogan { 
      text-align: center; 
    }
  .home-teams { 
      flex-wrap: nowrap; 
      gap: 8px; 
      justify-content: center; 
    }
  .home-team { 
      flex: 0 1 auto; 
      min-width: 0; 
    }
  .home-team img {
    width: calc((100vw - 2rem - 40px) / 6);
    height: auto; max-width: 56px;
  }
}

/* ---- admin: banner focal point picker ---------------------------------- */
.focus-grid { 
  display: grid; 
  gap: 1.2rem; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
}

.focus-pick {
  position: relative; 
  cursor: crosshair; 
  border: 1px solid var(--line);
  border-radius: var(--radius); 
  overflow: hidden; 
  box-shadow: var(--shadow);
}

.focus-pick img { 
  display: block; 
  width: 100%; 
  height: auto; 
}

.focus-dot {
  position: absolute; 
  width: 22px; 
  height: 22px; 
  transform: translate(-50%, -50%);
  border: 3px solid var(--gold); 
  border-radius: 50%;
  background: rgba(238, 204, 16, .25); 
  box-shadow: 0 0 0 2px rgba(0,0,0,.5);
  pointer-events: none;
}

.footer-link-btn {
  background: none; 
  border: 0; 
  color: #fff; 
  font-weight: bold;
  font-family: inherit; 
  font-size: 1rem; 
  cursor: pointer; 
  padding: 0;
}

.footer-link-btn:hover { 
  color: var(--gold); 
}

/* ---- newsroom ----------------------------------------------------------- */
.news-filter { 
  display: flex; 
  align-items: center; 
  gap: .6rem; 
  margin-bottom: 1.2rem; 
  flex-wrap: wrap; 
}

.news-filter label { 
  font-weight: 600; 
  color: var(--green-deep); 
}

.news-filter select { 
  padding: .45rem .6rem; 
  border: 1px solid var(--line); 
  border-radius: 6px; 
  font-size: 1rem; 
}

.news-list { 
  display: grid; 
  gap: 1.2rem; 
}

.news-card {
  display: grid; 
  grid-template-columns: 240px 1fr; 
  gap: 1rem;
  background: var(--card); 
  border: 1px solid var(--line);
  border-radius: var(--radius); 
  padding: 1rem; 
  box-shadow: var(--shadow);
}

.news-thumb img {
  display: block; 
  width: 100%; 
  aspect-ratio: 2 / 1; 
  object-fit: cover;
  border-radius: 6px;
}

.news-body h2, 
.news-body h3 { 
  margin: 0 0 .3rem; 
  font-size: 1.25rem; 
}

.news-body h2 a, 
.news-body h3 a { 
  color: var(--green-deep); 
  text-decoration: none; 
}

.news-body h2 a:hover, 
.news-body h3 a:hover { 
  color: var(--teal); 
}

.news-meta { 
  margin: 0 0 .5rem; 
  color: var(--ink-soft); 
  font-size: .88rem; 
}

.news-more { 
  font-weight: 600; 
  text-decoration: none; 
}

@media (max-width: 640px) {
  .news-card { grid-template-columns: 1fr; }
}

/* ---- article page ------------------------------------------------------- */
.article { 
  max-width: 760px; 
}

.article h1 { 
  margin-bottom: .3rem; 
}

.article-hero { 
  width: 100%; 
  border-radius: var(--radius); 
  margin: .8rem 0 1rem; 
  box-shadow: var(--shadow); 
}

.article p { 
  font-size: 1.05rem; 
}

.article-sub {
  font-size: 1.3rem; 
  font-family: inherit; 
  font-weight: 700;
  color: var(--green); 
  margin: 1.2rem 0 .3rem;
}

.cat-set { 
  border: 1px solid var(--line); 
  border-radius: var(--radius); 
  padding: .8rem; 
}

.cat-set legend { 
  font-weight: 600; 
  color: var(--green-deep); 
  padding: 0 .4rem; 
}

.cat-check { 
  display: block; 
  font-weight: 400 !important; 
  padding: .15rem 0; 
}

/* ---- article builder: larger entry fields ------------------------------ */
.article-form input[type="text"], 
.article-form input[type="date"],
.article-form select, 
.article-form textarea {
  font-size: 1.15rem; 
  padding: .7rem .8rem;
  border: 1px solid var(--line); 
  border-radius: 6px;
  font-family: inherit; 
  background: #fff;
}

.article-form select {
  height: calc(1.15rem * 1.5 + 1.4rem + 2px);
  -webkit-appearance: none; 
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23232326' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; 
  background-position: right .8rem center;
  padding-right: 2.2rem;
}

.article-form textarea { 
  line-height: 1.5; 
}

.article-form input:focus, 
.article-form select:focus, 
.article-form textarea:focus {
  outline: 2px solid var(--gold);
}

/* ---- standard page head: league logo 120% of the title -------------------- */
.page-title, 
.page h1 { 
  color: var(--green-deep); 
}

.page-head { 
  display: flex; 
  align-items: center; 
  gap: .9rem; 
  margin-bottom: 1.2rem; 
}

.page-head-logo { 
  display: block; 
  height: calc(2.5rem * 1.2 * 1.44); 
  width: auto; 
  margin: 0; 
}

.page-head .page-title { 
  margin: 0; 
  font-size: 1.5rem; 
  line-height: 1.2; 
  font-weight: 700; 
  text-transform: uppercase; 
}

/* ---- desktop flyout (third-level) menu ------------------------------------ */
.main-nav .has-fly { 
  position: relative; 
}

.main-nav .fly {
  display: none; 
  position: absolute; 
  top: 0; 
  left: 100%; 
  min-width: 220px;
  background: var(--green-deep); 
  padding: .35rem; 
  border-radius: 0 8px 8px 8px;
  box-shadow: var(--shadow); 
  list-style: none; 
  margin: 0;
}

.main-nav .has-fly:hover .fly, 
.main-nav .has-fly:focus-within .fly { 
  display: block; 
}

.fly-caret { 
  float: right; 
  opacity: .8; 
}

/* ---- unified filter and search fields ------------------------------------- */
.filter-field, 
.news-filter select,
input[type="search"], 
.table-filter input, 
.table-filter select {
  height: 44px; 
  padding: 0 .8rem;
  border: 1px solid #2D9265; 
  border-radius: var(--radius);
  background: transparent; 
  font-family: inherit; 
  font-size: 1rem;
  color: var(--ink);
}

.news-filter select {
  -webkit-appearance: none; 
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232D9265' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; 
  background-position: right .8rem center; 
  padding-right: 2.2rem;
}

input[type="search"]::placeholder, 
.filter-field::placeholder,
.table-filter input::placeholder { 
  color: #979EA0; 
}
/* ---- teams listing and team pages --------------------------------------- */
.teams-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.team-card {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1rem; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow); text-align: center;
}
.team-card img { width: 84px; height: 84px; object-fit: contain; transition: transform .15s; }
.team-card:hover { border-color: var(--gold); }
.team-card:hover img { transform: scale(1.08); }
.teams-past { margin-top: 2rem; }
.team-card-past img { filter: grayscale(.6); opacity: .85; }

.team-hero {
  display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem;
  padding: 1.2rem;
  background: var(--card); 
}
.team-hero-top { display: flex; align-items: center; gap: 1.2rem; justify-content: center;}
.team-hero-logo { width: auto; height: 284px; object-fit: contain; object-position:center;}
.team-hero .page-title { display: none; }
@media (max-width: 560px) {
  .team-hero-top { flex-direction: column; text-align: center; }
}

/* ---- results page filters ------------------------------------------------ */
.results-filters { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.results-filters select { min-width: 150px; }


/* ---- championship banner carousel ---------------------------------------- */
.banner-carousel { 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    gap: .6rem; 
    max-width: 1180px; 
    margin: 1rem auto 1.5rem; 
    padding: 0 1rem; 
}

.banner-viewport { 
    overflow: hidden; 
    flex: 1 1 auto; 
    display: flex;           
    justify-content: flex-start; 
}

.banner-viewport > ul,
.banner-viewport > div {
    display: flex;
    justify-content: flex-start; 
    align-items: center;
}

.banner-track { 
    display: flex; 
    gap: 1rem; 
    transition: transform .3s ease; 
    will-change: transform; 
}

.banner-arrow {
    flex: 0 0 30px; 
    width: 30px; 
    height: 30px; 
    border: 1px solid var(--line); 
    border-radius: 999px;
    background: #fff; 
    color: var(--ink); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    padding: 0; 
    box-shadow: var(--shadow);
}

.banner-arrow:hover { 
    background: var(--green-soft); 
}

.banner-arrow:disabled { 
    opacity: .4; 
    cursor: not-allowed; 
}

.banner {
    flex: 0 0 104px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: .3rem;
    padding: .9rem .6rem 1.6rem; 
    text-decoration: none; 
    color: var(--b2, #fff);
    background: var(--b1, var(--green));
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .50);
}

.banner img { 
    width: 56px; 
    height: 56px; 
    object-fit: contain; 
}

.banner-season { 
    font-family: 'Oswald', sans-serif; 
    font-size: 1rem; 
    font-weight: 700; 
}

.banner-label { 
    font-family: 'Oswald', sans-serif; 
    font-size: 1.15rem; 
    font-weight: 700; 
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .banner { 
        flex-basis: 84px; 
        padding: .7rem .4rem 1.3rem; 
    }
    .banner img { 
        width: 44px; 
        height: 44px; 
    }
}
/* ---- results table extras -------------------------------------------------- */
.cell-logo img { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; }
.cell-score { 
    text-align: center; 
    font-weight: bold;
}
.score-period { display: block; font-size: .75rem; color: var(--teal); font-weight: 600; }
.results-table th:nth-child(2), .results-table th:nth-child(3), .results-table th:nth-child(4),
.results-table td.cell-logo { text-align: center; }

/* ---- mobile tables: never exceed the viewport ------------------------------ */
@media (max-width: 640px) {
  .page { padding-left: .6rem; padding-right: .6rem; }
  .data-table { 
    display: table; 
    width: 100%; 
    margin: 0; 
    border-radius: var(--radius); 
  }
  .data-table th, .data-table td { 
    padding: .5rem .4rem; 
    font-size: .8rem; 
    white-space: nowrap; 
  }
  .sched-table .team-name-txt, .team-name-txt { display: none; }
  .cell-team img { margin-right: 0; }

  /* players and goalies stats tables: reduce font 10% on mobile */
  .stats-table th,
  .stats-table td { font-size: .72rem; }
  /* show the first-initial short name on mobile */
  .stats-table .name-full { display: none; }
  .stats-table .name-abbr { display: inline; }
  /* widths total exactly 100%: column 2 reduced 10% (28% -> 25.2%) and the
     freed width added to the stat columns so GAA clears */
  .stats-table th:nth-child(1),
  .stats-table td:nth-child(1) { width: 5%; }
  .stats-table th:nth-child(2),
  .stats-table td:nth-child(2) { width: 25.2%; }
  .stats-table th:nth-child(3),
  .stats-table td:nth-child(3) { width: 11%; }
  .stats-table th:nth-child(n+4),
  .stats-table td:nth-child(n+4) { width: 8.4%; }

  /* goalie/player historical tables: let long names wrap instead of overflowing */
  .hist-table td:nth-child(2) { white-space: normal; }

  /* hide the About section horizontal page menu on phones */
  .page-menu { display: none; }

  /* championship banners align left rather than centred */
  .banner-carousel,
  .banner-viewport,
  .banner-viewport > ul,
  .banner-viewport > div { justify-content: flex-start; }
}
/* About section horizontal page menu */
.page-menu {
  width: 100%;
  margin: 0 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-menu-list {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-menu-item {
  margin: 0;
  padding: 0;
}

.page-menu-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0.85rem 1rem;
  border-bottom: 3px solid transparent;
  color: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.page-menu-link:hover,
.page-menu-link:focus-visible,
.page-menu-link.is-current {
  border-bottom-color: var(--gold, #eecc10);
  color: var(--gold, #eecc10);
}

.page-menu-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

@media (min-width: 1100px) {
  .page-menu-list {
    width: 100%;
  }

  .page-menu-item {
    display: flex;
    flex: 1 1 auto;
  }

  .page-menu-link {
    justify-content: center;
    width: 100%;
    white-space: normal;
  }
}

/* ---- results table refinements ------------------------------------------ */
.results-table .col-date { width: 110px; white-space: nowrap; }
.results-table .cell-score { text-align: center; }
.score-sub { display: block; font-size: .75rem; color: var(--ink-soft); font-weight: 600; }

/* ---- public trades page --------------------------------------------------- */
.trade-list { display: grid; gap: 1rem; max-width: 640px; }
.trade-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem;
}
.trade-date { margin: 0 0 .5rem; font-size: .82rem; color: var(--ink-soft); }
.trade-flow { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.trade-team img { width: 48px; height: 48px; object-fit: contain; }
.trade-arrow { font-size: 1.4rem; color: var(--green); }
.trade-line { margin: 0; }

/* ---- timekeeper -------------------------------------------------------- */
.tk-header {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 1rem 1.4rem; margin-bottom: .4rem;
}
.tk-team { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 700; }
.tk-team img { width: 40px; height: 40px; object-fit: contain; }
.tk-score { font-size: 2rem; font-weight: 800; font-family: 'Oswald', sans-serif; }
.tk-meta { text-align: center; margin-bottom: 1.2rem; }


.tk-controls { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
.tk-controls form { margin: 0; }
.tk-officials { display: flex; flex-direction: row; gap: 2rem; width: 100%; align-items: flex-end; flex-wrap: nowrap; }
.tk-officials h3 { display: none; }
.tk-officials > div { flex: 1; display: flex; flex-direction: column; }
.tk-officials label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.tk-officials select { width: 100%; }



.tk-two-col { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; margin-bottom: 1.2rem; }
@media (max-width: 760px) {
  .tk-two-col { grid-template-columns: 1fr; }
  .tk-header { flex-direction: column; gap: .6rem; }
}

.sb-time {
    margin: 0 -.55rem .35rem;
    padding: 0; 
    text-align: center;
    font-size: .74rem;
    color: var(--ink);
}

/* Specific styling for the Live Game elements */
.sb-live .sb-time {
    color: #000;
    font-weight: 700;
}
/* ---- stacked period + time (scoreboard and results) --------------------- */
.sb-time-period {
    margin-top: 0.5rem; 
    margin-bottom: 0px; 
    font-weight: 700;
    border: none;
}

.sb-time-clock {
    margin-top: 0px;    /* FIXED: Pulls the clock right up against the period */
    margin-bottom: 0.35rem;
}
.home-scoreboard .sb-time-period { margin-bottom: 1px; }
.score-sub-period { font-weight: bold; }
.score-sub-clock { font-size: .7rem; opacity: .85; }

/* ---- timekeeper: lineup away/scratch toggle ------------------------------ */
.tk-lineup-row { display: block; margin: .15rem 0; }
.tk-lineup-btn {
  width: 100%; text-align: left; padding: .4rem .6rem; border-radius: 6px;
  border: 1px solid var(--line); background: var(--green-soft); color: var(--ink);
  font: inherit; cursor: pointer;
}
.tk-lineup-btn.tk-away { background: #fdeeee; color: var(--error); text-decoration: line-through; }

/* ---- public sponsors page: logo left, info right, top-aligned ------------ */
.sponsor-list { display: flex; flex-direction: column; gap: 1.5rem; }
.sponsor-entry {
  display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem;
  align-items: start; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow);
}
.sponsor-logo-col { align-self: start; text-align: left; }
.sponsor-logo-col img { max-width: 100%; height: auto; object-fit: contain; }
.sponsor-info-col { text-align: left; }
.sponsor-info-col h2 { margin: 0 0 .4rem; color: var(--green-deep); }
.sponsor-info-col p { margin: 0 0 .2rem; }
@media (max-width: 560px) {
  .sponsor-entry { grid-template-columns: 1fr; }
  .sponsor-logo-col { text-align: left; }
}

/* ---- team page: sponsor block underneath the logo+name row --------------- */
/*.team-sponsor-block { display: flex; flex-direction: column; gap: .8rem; }
.team-sponsor { text-align: center; }
.team-sponsor img { max-width: 300px; height: auto; object-fit: contain; margin-bottom: .3rem; }
.team-sponsor-name { font-weight: 700; color: var(--green-deep); margin: 0 0 .1rem; font-size:2rem; }
.team-sponsor p { margin: 0; font-size: .85rem; }*/
.team-sponsor-block { 
    display: flex; 
    flex-direction: column; 
    align-items: center;    
    gap: .8rem; 
}

.team-sponsor { 
    text-align: center; 
    display: flex;          
    flex-direction: column; 
    align-items: center;
    font-size: 1.8rem; 
}

.team-sponsor img { 
    max-width: 300px; 
    height: auto; 
    object-fit: contain; 
    margin-bottom: .3rem; 
}

.team-sponsor-name { 
    font-weight: 700; 
    color: var(--green-deep); 
    margin: 0 0 .1rem; 

}

.team-sponsor p { 
    margin: 0; 
    font-size: 1.0rem !important; 
}

/* ---- sponsor admin: team dropdown with a live logo preview --------------- */
.team-pick-row { display: flex; align-items: center; gap: .6rem; }
.team-pick-row img { width: 36px; height: 36px; object-fit: contain; }
.sponsor-description { margin: .3rem 0 .6rem; }

/* ---- sponsor / community partner intro paragraph -------------------------- */
.sponsor-thanks { max-width: 760px; margin: 0 0 1.4rem; color: var(--ink-soft); }

/* ---- team logos inside the Teams/Rosters submenu -------------------------- */
.sub-team-logo { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: .4rem; }

/* ---- executive team: contact icon + modal --------------------------------- */
.contact-icon-btn {
  background: none; border: 0; color: var(--green-deep); font-size: 1.2rem; cursor: pointer; padding: .2rem;
}
.contact-icon-btn:hover { color: var(--teal); }
.contact-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .7);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.contact-overlay[hidden] { display: none; }
.contact-modal {
  position: relative; background: #fff; border-radius: var(--radius);
  padding: 1.5rem; max-width: 420px; width: 100%; box-shadow: var(--shadow);
}
.contact-close {
  position: absolute; top: .6rem; right: .8rem; background: none; border: 0;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-soft);
}
.contact-close:hover { color: var(--ink); }

/* ---- playoff bracket (ported from the original plugin's exact layout) ---- */
.bracket-wrap { width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box; }
.bracket-selector-wrap { display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.bracket-selector-wrap label { font-weight: 700; font-size: .9rem; color: var(--ink); }
.bracket-year-selector { min-width: 220px; max-width: 100%; height: 44px; padding: 0 .8rem; border: 1px solid #2D9265; border-radius: var(--radius); background: #fff; font-weight: 700; }
.bracket-title { margin: 0 0 12px; font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.bracket-stage-label { margin: 0 0 8px; background: #e7e7e7; color: #000; border-radius: 8px; padding: 10px 8px; text-align: center; font-weight: 700; font-size: .875rem; line-height: 1.15; }

.bracket-tree { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.bracket-column { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; min-width: 0; }
.bracket-column-middle { padding-top: 0; }
.bracket-finals-zone { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding-top: 28px; min-width: 0; }
.bracket-championship-logo { width: 100%; text-align: center; margin: 0 0 2px; }
.bracket-championship-logo img { display: inline-block; width: 150px; max-width: 80%; height: auto; object-fit: contain; }
.bracket-finals-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }

.bracket-match {
  position: relative; background: linear-gradient(180deg, #fff 0%, #f6f7f8 100%);
  border: 1px solid #d9d9d9; border-radius: 10px; padding: 8px; width: 100%;
  min-height: 128px; display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--shadow); box-sizing: border-box;
}
.bracket-match::after { content: ""; position: absolute; right: -10px; top: 50%; width: 10px; border-top: 1px solid #d9d9d9; }
.bracket-column:nth-child(3) .bracket-match::after,
.bracket-column:nth-child(4) .bracket-match::after,
.bracket-inline-consolation .bracket-match::after { display: none; }
.bracket-match-title { font-size: .69rem; line-height: 1; font-weight: 700; color: #4b5563; text-align: center; margin: 0 0 8px; letter-spacing: .04em; text-transform: uppercase; }

.bracket-team { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 6px; min-height: 44px; font-weight: 800; color: var(--ink); }
.bracket-team + .bracket-team { margin-top: 8px; }
.bracket-team.bracket-winner { background: rgba(238, 204, 16, .18); border-color: var(--gold); }
.bracket-seed { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: #e7e7e7; color: #111; font-size: .69rem; font-weight: 800; flex: 0 0 26px; }
.bracket-team-identity { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.bracket-team-logo { display: block; width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.bracket-score { font-size: 1.25rem; line-height: 1; font-weight: 800; color: var(--ink); flex: 0 0 auto; min-width: 24px; text-align: right; }
.bracket-score:empty { display: none; }
.bracket-team-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; line-height: 1.15; }
.bracket-logo-only .bracket-team-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bracket-logo-only .bracket-team-identity { justify-content: center; }

.bracket-result-card { background: linear-gradient(180deg, #fff 0%, #f6f7f8 100%); border: 1px solid #d9d9d9; border-radius: 10px; padding: 8px; min-height: 72px; display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow); color: var(--ink); }
.bracket-result-card strong { display: block; font-size: .69rem; line-height: 1; font-weight: 700; color: #4b5563; text-align: center; margin: 0 0 8px; letter-spacing: .04em; text-transform: uppercase; }
.bracket-result-card span { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 6px; font-size: .8rem; font-weight: 800; line-height: 1.15; min-height: 44px; }
.bracket-result-card img { width: 44px; height: 44px; object-fit: contain; }
.bracket-results { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bracket-empty { opacity: .55; font-style: italic; font-weight: 600; }
.bracket-panel[hidden] { display: none !important; }

@media (max-width: 980px) {
  .bracket-tree { display: flex; flex-direction: column; gap: 14px; }
  .bracket-column { width: 100%; }
  .bracket-column-middle, .bracket-finals-zone { padding-top: 0; }
  .bracket-finals-zone { width: 100%; }
  .bracket-finals-games { display: flex; flex-direction: column; gap: 14px; }
  .bracket-championship-logo img { width: 110px; }
  .bracket-match { min-height: 116px; }
  .bracket-match::after { display: none; }
  .bracket-selector-wrap { justify-content: flex-start; align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .bracket-title { display: none; }
  .bracket-stage-label { font-size: .8rem; margin-bottom: 6px; }
  .bracket-match { min-height: 108px; padding: 7px; }
  .bracket-team { min-height: 40px; padding: 5px; }
  .bracket-team-logo, .bracket-result-card img { width: 34px; height: 34px; flex-basis: 34px; }
  .bracket-score { font-size: 1.25rem; font-weight: 900; }
}

/* ---- championship page: bracket popup (wider variant of the contact modal) */
.bracket-modal { max-width: 1280px; width: 96vw; max-height: 90vh; overflow-y: auto; }
.bracket-popup-btn {
  background: var(--green); color: #fff; border: 0; border-radius: 6px;
  padding: .4rem .8rem; font-weight: 700; font-size: .8rem; cursor: pointer;
}
.bracket-popup-btn:hover { background: var(--green-deep); }

/* ---- new player application: matches the original site's form styling --- */
.hvot-application-form { width: 100%; max-width: 760px; box-sizing: border-box; }
.hvot-application-form h3 { margin: 1.6rem 0 .8rem; line-height: 1.3; color: var(--green-deep); }
.hvot-form-container {
  border: 1px solid #ccc; padding: 20px; margin-bottom: 25px;
  box-sizing: border-box; width: 100%; background-color: #e7e7e7;
}
.hvot-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; width: 100%; }
.hvot-three-column-address { display: grid; grid-template-columns: 2fr 100px 1fr; gap: 20px; margin-bottom: 20px; width: 100%; align-items: end; }
.hvot-field { width: 100%; box-sizing: border-box; margin-bottom: 20px; }
.hvot-field:last-child { margin-bottom: 0; }
.hvot-field label { display: block; width: 100%; line-height: 1.5; box-sizing: border-box; font-weight: 600; }
.hvot-field input, .hvot-field select, .hvot-field textarea {
  width: 100%; margin-top: 5px; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; font: inherit;
}
.hvot-application-form textarea { min-height: 100px; resize: vertical; }
.hvot-terms-list { margin: 0 0 25px 20px; padding: 0; }
.hvot-terms-list li { margin-bottom: 15px; line-height: 1.6; }
.hvot-agreement { margin: 25px 0; font-size: 1.15rem; color: var(--green-deep); }
.hvot-agreement .cat-check { display: inline-flex; align-items: center; gap: 10px; font-size: 1.15rem; color: var(--green-deep); font-weight: 600; }
.hvot-application-form input[type="submit"] {
  width: auto; padding: 12px 30px; cursor: pointer; margin-top: 10px; border: none;
  background-color: var(--green); color: #fff; font-weight: 700; border-radius: var(--radius);
  transition: background-color .3s ease, color .3s ease;
}
.hvot-application-form input[type="submit"]:hover { background-color: var(--gold); color: #000; }
.hvot-required-note { margin-top: 20px; font-size: .9em; color: var(--ink-soft); }
@media (max-width: 768px) {
  .hvot-two-column, .hvot-three-column-address { grid-template-columns: 1fr; }
  .hvot-form-container { padding: 15px; }
}

/* ---- pop-up announcement -------------------------------------------------- */
.ann-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ann-overlay[hidden] {
  display: none;
}

.ann-modal {
  position: relative;
  background: white;
  border-radius: 8px;
  max-width: 620px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.ann-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ann-close:hover {
  color: #333;
}

.ann-image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.ann-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 1.5rem 1.5rem 0.75rem;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ann-body {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0 1.5rem;
  flex-grow: 1;
  overflow-y: auto;
}

.ann-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid #eee;
  margin-top: auto;
}

.ann-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #c63333;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

.ann-icon:hover {
  background: #a82828;
}

.ann-icon svg {
  width: 20px;
  height: 20px;
}

.ann-close-btn {
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.ann-close-btn:hover {
  background: #1a252f;
}






/* Normalize form input heights */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select {
    box-sizing: border-box;
    height: 2.5rem; /* Or your preferred explicit height, e.g., 38px */
    padding: 0.4rem 0.7rem;
    font-size: 1rem;
    line-height: 1.5;
    vertical-align: middle;
}

/* Fix for select arrow alignment and platform discrepancies */
select {
    appearance: none; /* Removes native OS styling overrides */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Optional: Add a custom background arrow icon if appearance: none hides it entirely */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1em;
    padding-right: 2.5rem; 
}
/* ---- Dan Williams award admin header ------------------------------------- */
.dw-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.dw-photo,
.dw-trophy {
  height: 130px;
  width: auto;
  border-radius: 8px;
  background: var(--green-soft);
}

.dw-photo { object-fit: cover; }
.dw-trophy { object-fit: contain; }

/* ---- undecorated player/team links + player profile ---------------------- */
.plain-link {
  color: inherit;
  text-decoration: none;
}

.plain-link:hover {
  color: var(--green);
  text-decoration: none;
}

.team-link {
  display: inline-flex;
  align-items: center;
}

.inline-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: .4rem;
}

.pp-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0 0 1.2rem;
}

.pp-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

.pp-name {
  margin: 0;
  line-height: 1.15;
}

.pp-number {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---- standings tiebreaker footnotes -------------------------------------- */
.tb-ref {
  font-size: .7em;
  color: var(--green);
  font-weight: 700;
  margin-left: 2px;
}

.standings-footnote {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--green-soft);
}

.standings-footnote p {
  margin: 0 0 .4rem;
  font-size: .85rem;
}

.standings-footnote p:last-child {
  margin-bottom: 0;
}

/* ---- attendance report --------------------------------------------------- */
.att-name {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--green);
  cursor: pointer;
  text-align: left;
}
.att-name:hover { text-decoration: underline; }
.att-detail > td { background: var(--green-soft); }
.att-inner { margin: .3rem 0; }
.att-status { font-weight: 600; }
.att-status.att-played { color: #2d9265; }
.att-status.att-did-not-play { color: var(--ink-soft); }
.att-status.att-absent { color: var(--error); }

/* ---- Captaincy markers -------------------------------------------------
   Applied wherever a player's name is shown for a season that is still open.
   Finalizing a season clears the stored designation, so the marker simply
   stops appearing without any further rule in the views. */
.cap-tag {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .3rem;
  font-size: .72em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #14532d;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 3px;
  vertical-align: middle;
  white-space: nowrap;
}

.captain-select {
  min-width: 11rem;
}

.captain-select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ==========================================================================
   Bug reports and feature suggestions
   Keith J. Connell, 2026-07-26
   Append to public/assets/css/app.css. Do not replace the file.
   ========================================================================== */

/* --- Floating trigger ---------------------------------------------------- */

.bug-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem; /* clears the mobile tab bar */
  z-index: 280;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--error);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(35, 35, 38, .35);
  transition: transform .15s ease, background .15s ease;
}

.bug-fab:hover,
.bug-fab:focus-visible {
  background: #8e3336;
  transform: scale(1.06);
}

.bug-fab:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (min-width: 901px) {
  .bug-fab {
    bottom: 1.5rem;
  }
}

@media print {
  .bug-fab,
  .bug-overlay {
    display: none !important;
  }
}

/* --- Modal --------------------------------------------------------------- */

.bug-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.bug-overlay[hidden] {
  display: none;
}

.bug-modal {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  border: 4px solid var(--error);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}

.bug-close {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
}

.bug-close:hover {
  color: var(--ink);
}

.bug-title {
  margin: 0 2rem .35rem 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.bug-intro {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: .92rem;
}

.bug-form label {
  display: block;
  margin: .85rem 0 .25rem;
  font-weight: 600;
  font-size: .9rem;
}

.bug-form input[type="text"],
.bug-form input[type="email"],
.bug-form select,
.bug-form textarea {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
}

.bug-form textarea {
  resize: vertical;
  min-height: 130px;
}

.bug-form input:focus,
.bug-form select:focus,
.bug-form textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}

.bug-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* Honeypot. Kept out of the layout without display:none, which some bots
   detect and skip. */
.bug-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Admin screen -------------------------------------------------------- */

.btn-danger {
  background: var(--error);
  color: #fff;
  border: 1px solid var(--error);
}

.btn-danger:hover {
  background: #8e3336;
  border-color: #8e3336;
}

.bug-settings {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--green-soft);
  border-radius: var(--radius);
}

.bug-switch {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}

.bug-switch input {
  width: auto;
}

.bug-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.bug-filters a {
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  text-decoration: none;
  color: var(--ink);
}

.bug-filters a.is-active,
.bug-filters a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.bug-list {
  display: grid;
  gap: 1rem;
}

.bug-card {
  border: 1px solid var(--line);
  border-left: 5px solid var(--ink-soft);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.bug-card.bug-status-new      { border-left-color: var(--error); }
.bug-card.bug-status-open     { border-left-color: var(--gold); }
.bug-card.bug-status-resolved { border-left-color: var(--green); }
.bug-card.bug-status-declined { border-left-color: var(--ink-soft); }

.bug-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}

.bug-ref {
  font-weight: 700;
}

.bug-type {
  font-weight: 600;
  color: var(--teal);
}

.bug-badge {
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--green-soft);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.bug-date {
  margin-left: auto;
  font-size: .82rem;
  color: var(--ink-soft);
}

.bug-meta {
  margin: 0 0 .6rem;
  font-size: .9rem;
}

.bug-details {
  padding: .75rem;
  background: var(--green-soft);
  border-radius: 6px;
  font-size: .95rem;
  overflow-wrap: anywhere;
}

.bug-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-top: .85rem;
}

@media (max-width: 600px) {
  .bug-date {
    margin-left: 0;
    width: 100%;
  }

  .bug-card-foot .inline-form {
    width: 100%;
  }
}

/* Jersey numbers, clear column. Merge into public/assets/css/app.css. */

.num-clear-col { width: 5rem; text-align: center; }

.num-clear-all {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

.num-clear,
.num-clear-all input { width: 1.05rem; height: 1.05rem; cursor: pointer; }

.num-clear:disabled { cursor: default; opacity: .35; }

select.jersey-select.is-cleared { opacity: .45; }

/* ---- schedule and results: team columns read left aligned ------------------
   The block near line 631 centres every column from the second onwards, which
   catches the team names along with the numeric columns. Team names are the one
   thing in these tables that reads better ranged left, so they are pulled back
   out here. The headers are matched by position because they carry no class:
   schedule is Date, Time, Home, Visitor, Dressing Room, and results is Date,
   Time, Home, Score, Away. */
.sched-table td.cell-team,
.results-table td.cell-team,
.sched-table th:nth-child(3),
.sched-table th:nth-child(4),
.results-table th:nth-child(3),
.results-table th:nth-child(5) {
  text-align: left;
}

/* ---- results table: fixed column geometry ---------------------------------
   Auto layout treats a px width as a suggestion and hands leftover space back
   to the widest columns, so the widths below only hold under fixed layout. The
   max-width caps the table at the sum of its columns, which is what actually
   pulls columns 4 and 5 leftward instead of letting them spread. Scoped above
   the 640px breakpoint so the mobile rules at line 1725 keep control there. */
@media (min-width: 641px) {
  .results-table {
    table-layout: fixed;
    max-width: 960px;
  }
  .results-table th:nth-child(1),
  .results-table td:nth-child(1) { width: 110px; }

  .results-table th:nth-child(2),
  .results-table td:nth-child(2) { width: 120px; }

  .results-table th:nth-child(3),
  .results-table td:nth-child(3) { width: 150px; }

  .results-table th:nth-child(4),
  .results-table td:nth-child(4) { width: 160px; }

  .results-table th:nth-child(5),
  .results-table td:nth-child(5) { width: 420px; }
}