/* ===================================================================
   Brevard Bocce Travel League - shared site styles
   Edit this one file to change colors/fonts/spacing across every page.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');

:root {
  --font-brand: 'Cinzel', Georgia, serif;
  --brand: #2F6B4F;
  --brand-light: #7FBB98;
  --brand-mid: #4F8C6C;
  --brand-dark: #23543D;
  --brand-tint: #E7F0EA;
  --brand-border: #BFDAC9;
  --gold: #C9A227;
  --text-dark: #24312B;
  --muted-text: #6E8579;
  --cream: #FBF7FA;
  --white: #FFFFFF;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--cream);
  color: var(--text-dark);
  font-size: 18px;
  line-height: 1.6;
}

a {
  color: var(--brand-dark);
}

/* ---------- Notices ---------- */

.page-notice {
  background: #FBEAEA;
  border: 1px solid #E3B0B0;
  border-left: 5px solid #B23A3A;
  color: #7A2020;
  padding: 14px 18px;
  border-radius: 6px;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
}

.page-notice a {
  color: #1a56db;
  font-weight: bold;
  text-decoration: underline;
}

.page-notice a:hover {
  color: #1442ad;
}

/* ---------- Header / banner ---------- */

.site-header {
  background: linear-gradient(to bottom, var(--brand-light), var(--brand-mid), var(--brand));
  padding: 26px 40px;
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-header .logo {
  width: 42%;
  min-width: 260px;
  max-width: 380px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.site-header .site-title {
  font-family: var(--font-brand);
  font-weight: 600;
  color: var(--cream);
  font-size: 54px;
  line-height: 1.25;
  letter-spacing: 1px;
  margin: 0;
}

.site-header .tagline {
  color: var(--cream);
  font-size: 18px;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    text-align: center;
  }
  .site-header .site-title {
    font-size: 30px;
  }
  .site-header .logo {
    min-width: 160px;
  }
}

/* ---------- Team badge logo (secondary, per-team accent in the banner,
   e.g. Volo). Hidden by default; roster-sync.js shows it only for teams
   that have their own logo, opposite the club logo. ---------- */

.site-header .team-badge-logo {
  width: 18%;
  min-width: 100px;
  max-width: 160px;
  height: auto;
  display: block;
  flex-shrink: 0;
  margin-left: auto;
}

.site-header .team-badge-logo[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .site-header .team-badge-logo {
    margin-left: 0;
    margin-top: 12px;
  }
}

/* ---------- Home page banner (Home page only) ---------- */

.site-header.home-header {
  padding: 20px 40px 34px;
  min-height: 300px;
  position: relative;
  overflow: hidden;
}

.site-header.home-header .logo {
  align-self: center;
  position: relative;
  z-index: 2;
}

.home-header .title-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  padding-bottom: 6px;
  position: relative;
  z-index: 2;
}

.home-header .court-graphic {
  position: absolute;
  right: 1%;
  top: 8px;
  z-index: 1;
}

@media (max-width: 640px) {
  .site-header.home-header {
    min-height: 0;
    padding: 26px 40px;
  }
  .home-header .title-wrap {
    align-items: center;
  }
  .home-header .court-graphic {
    display: none;
  }
}

/* ---------- Club-specific banner themes ---------- */

.site-header.theme-bridgewater {
  background: linear-gradient(to bottom, #7B93E8, #4169E1, #1F3A93);
}

.site-header.theme-iac {
  background: linear-gradient(to bottom, #4F8A6B, #2C5C42, #123324);
}

.site-header.theme-viera {
  background: linear-gradient(to bottom, #4A6FA5, #1B3A6B, #0A1F3D);
}

.logo-badge {
  width: 33%;
  min-width: 140px;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 36px;
  flex-shrink: 0;
}

.logo-badge.bridgewater { color: #1F3A93; }
.logo-badge.iac { color: #123324; }
.logo-badge.viera { color: #8B1E1E; }

.site-header a.home-link {
  display: inline-block;
}

/* ---------- Navigation ---------- */

.site-nav {
  background: var(--brand-tint);
  border-bottom: 1px solid var(--brand-border);
  padding: 10px 24px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

.site-nav a {
  font-size: 16px;
  color: var(--brand-dark);
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

.site-nav .coming-soon {
  color: var(--muted-text);
}

/* Home page nav only — larger label text, per Rick's request. Other
   pages keep the standard .site-nav sizing above untouched. */
.home-nav a {
  font-size: 20px;
}

@media (max-width: 640px) {
  .site-nav {
    gap: 12px;
    padding: 10px 16px;
  }
  .site-nav a {
    font-size: 14px;
  }
  .home-nav a {
    font-size: 17px;
  }
}

/* ---------- Page content wrapper ---------- */

.page-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  overflow-x: hidden;
}

h1, h2, h3 {
  color: var(--text-dark);
}

/* ---------- Club panel buttons (homepage) ---------- */

.club-section-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--text-dark);
  text-align: center;
  margin: 8px 0 28px;
}

.club-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.club-button {
  display: block;
  background: var(--white);
  border: 2px solid var(--brand);
  border-radius: 12px;
  padding: 28px 24px;
  font-size: 22px;
  font-weight: bold;
  color: var(--text-dark);
  text-decoration: none;
  text-align: center;
  min-height: 100px;
}

.club-button:hover {
  background: var(--brand-tint);
}

.club-button.small {
  padding: 12px 16px;
  font-size: 16px;
  min-height: auto;
  border-radius: 10px;
  margin-bottom: 18px;
}

.club-button.bridgewater {
  background: linear-gradient(to bottom, #7B93E8, #4169E1, #1F3A93);
  border-color: #1F3A93;
  color: var(--cream);
}

.club-button.iac {
  background: linear-gradient(to bottom, #4F8A6B, #2C5C42, #123324);
  border-color: #123324;
  color: var(--cream);
}

.club-button.viera {
  background: linear-gradient(to bottom, #E88686, #C63C3C, #8B1E1E);
  border-color: #8B1E1E;
  color: var(--cream);
}

/* ---------- Homepage: "Add This to Your Phone" install banner ----------
   Hidden by default; assets/install-prompt.js reveals it only on phones
   where the browser has confirmed a one-tap install is available. */

.install-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 24px;
}

.install-banner-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
}

.install-banner-text strong {
  color: var(--brand-dark);
  font-size: 16px;
}

.install-banner-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.install-banner-btn {
  background: var(--brand);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

.install-banner-btn:hover {
  background: var(--brand-dark);
}

.install-banner-dismiss {
  background: none;
  border: none;
  color: var(--muted-text);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.install-banner-ios {
  display: block;
}

.install-steps-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.install-steps {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: install-step;
}

.install-steps li {
  counter-increment: install-step;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
}

.install-steps li:last-child {
  margin-bottom: 0;
}

.install-steps li::before {
  content: counter(install-step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-step-icon {
  display: inline-flex;
  align-items: center;
  color: var(--brand-dark);
  flex-shrink: 0;
  vertical-align: middle;
}

.install-steps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 10px;
  margin: 0;
}

.install-steps-row li {
  margin: 0;
}

.install-steps-row li:not(:last-child)::after {
  content: "\2192";
  margin-left: 10px;
  color: var(--muted-text);
  font-weight: bold;
}

/* ---------- Homepage: "Add to your phone" plain-text link line ----------
   Sits just below the nav, in place of the old auto-appearing install
   banners. Links through to add-to-home-screen.html for full instructions. */

.home-screen-links {
  margin: 0 0 24px;
  font-size: 15px;
}

.home-screen-links a {
  color: var(--brand-dark);
  text-decoration: underline;
}

/* ---------- Homepage: "join our league" call-to-action banner ----------
   Sits below the "Add to your phone" link and above the club logos.
   Links to contact.html#join-league, which scrolls straight to the
   dedicated inquiry form added there for this purpose. */

.home-cta-banner {
  display: block;
  background: var(--brand);
  color: var(--cream);
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding: 16px 24px;
  border-radius: 10px;
  text-decoration: none;
  margin: 0 0 28px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.home-cta-banner:visited {
  color: var(--cream);
}

.home-cta-banner:hover {
  background: var(--brand-dark);
}

/* ---------- Add to Home Screen page: compact layout ----------
   Tightened so both the Android and iPhone instructions fit on one
   mobile screen without scrolling. */

.add-home-page .page-content {
  padding-top: 16px;
}

.add-home-page h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.add-home-page .phone-page-intro {
  font-size: 14px;
  margin: 0 0 10px;
}

.add-home-page .club-section-title {
  font-size: 16px;
  margin: 10px 0 6px;
  text-align: left;
}

.add-home-page .install-banner {
  margin: 0 0 8px;
  padding: 10px 14px;
}

.add-home-page .install-banner-text {
  font-size: 14px;
}

.add-home-page .install-steps li {
  margin: 0 0 6px;
  font-size: 14px;
}

.club-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-top: 24px;
  justify-items: center;
}

.club-logo-button {
  display: block;
  width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--brand-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.club-logo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.club-logo-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

/* Homepage club buttons: the logos now have transparent backgrounds
   (see assets/original-logos-with-background/ for the old boxed
   versions), so let them float directly on the page instead of
   sitting in a bordered/shadowed card. team-rosters.html's smaller
   ".small" logos keep the card style, since only the homepage grid
   was asked to change. */
.club-logo-grid .club-logo-button {
  border: none;
  box-shadow: none;
  background: transparent;
}

.club-logo-grid .club-logo-button:hover {
  box-shadow: none;
}

.club-logo-grid .club-logo-button img {
  object-fit: contain;
}

.club-logo-button.small {
  width: 118px;
  margin: 0 auto 18px;
  border-radius: 12px;
}

.club-button.bridgewater:hover,
.club-button.iac:hover,
.club-button.viera:hover {
  filter: brightness(1.08);
}

/* ---------- Homepage video section ---------- */

.video-embed-wrap {
  background: var(--white);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  aspect-ratio: 16 / 9;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.video-embed-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* "League Videos" heading sits right after the news photo grid; give it
   more room above (so it doesn't read as a caption on the photos) and
   less room below (so it sits closer to the video it actually labels). */
.news-grid + .club-section-title {
  margin: 48px 0 12px;
}

/* ---------- Homepage news / photo placeholders ---------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

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

.news-box {
  background: var(--white);
  border: 2px dashed var(--brand-border);
  border-radius: 12px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: var(--muted-text);
  font-size: 16px;
}

.news-box.has-photo {
  border: 1px solid var(--brand-border);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 0;
  overflow: hidden;
}

.news-box.has-photo .news-photo {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

/* A box with a photo but no caption (news-caption) below it stretches to
   match its taller siblings in the same grid row. Let the photo fill that
   full height instead of leaving blank space under a short 110px thumbnail. */
.news-box.has-photo.photo-only {
  flex: 1;
}

.news-box.has-photo.photo-only .news-photo {
  height: 100%;
  min-height: 110px;
  flex: 1;
}

.news-box.has-photo .news-caption {
  padding: 16px 18px;
}

.news-box.has-photo .news-caption h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--text-dark);
  line-height: 1.3;
}

.news-box.has-photo .news-caption p {
  margin: 0;
  font-size: 14px;
  color: var(--muted-text);
  line-height: 1.5;
}

.news-box.has-photo .news-caption .news-read-more {
  display: inline-block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: bold;
  color: var(--brand-dark);
  text-decoration: none;
}

.news-box.has-photo .news-caption .news-read-more:hover {
  text-decoration: underline;
}

/* ---------- Individual news story page ---------- */

.news-story-photo {
  width: 100%;
  max-width: 800px;
  border-radius: 12px;
  display: block;
  margin: 0 auto 24px;
}

.news-story-content {
  max-width: 800px;
  margin: 0 auto;
}

.news-story-content p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
}

/* ---------- Legal disclaimer link ---------- */

.legal-link-wrap {
  text-align: center;
  margin-top: 44px;
}

.legal-link {
  display: inline-block;
  background: var(--white);
  border: 2px solid var(--brand);
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: bold;
  color: var(--brand-dark);
  text-decoration: none;
}

.legal-link:hover {
  background: var(--brand-tint);
}

/* ---------- Club interior page tabs ---------- */

.club-header {
  background: linear-gradient(to bottom, var(--brand-light), var(--brand-mid), var(--brand));
  color: var(--cream);
  padding: 24px;
  text-align: center;
}

.club-header h1 {
  font-family: var(--font-brand);
  color: var(--cream);
  margin: 0;
}

.back-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--cream);
  font-size: 15px;
}

.tab-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid var(--brand-border);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tab-button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 14px 18px;
  font-size: 18px;
  font-family: inherit;
  color: var(--muted-text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.tab-button.active {
  color: var(--brand-dark);
  border-bottom-color: var(--brand-dark);
  font-weight: bold;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ---------- Roster table ---------- */

table.roster {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

table.roster th {
  text-align: left;
  border-bottom: 2px solid var(--brand-border);
  padding: 8px 6px;
}

table.roster td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--brand-border);
  overflow-wrap: anywhere;
}

table.roster tr.roster-team-divider td {
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-weight: bold;
  font-size: 30px;
  padding: 10px 6px;
  border-bottom: 2px solid var(--brand-border);
}

table.roster tr.roster-team-divider:first-child td {
  border-top: none;
}

table.roster tr.roster-team-divider td a {
  color: #1a56db;
  text-decoration: underline;
}

table.roster tr.roster-team-divider td a:hover {
  color: #1442ad;
}

.team-contact {
  font-size: 16px;
  color: var(--muted-text);
  margin: -6px 0 20px;
}

.team-contact a {
  color: var(--brand-dark);
  font-weight: bold;
  text-decoration: none;
}

.team-contact a:hover {
  text-decoration: underline;
}

.team-news-heading {
  font-size: 18px;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.team-news-box {
  background: var(--white);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.team-news-box p {
  margin: 0 0 10px;
  color: var(--text-dark);
  line-height: 1.5;
}

.team-news-box p:last-child {
  margin-bottom: 0;
}

.team-news-box p.team-news-empty {
  color: var(--muted-text);
  font-style: italic;
}

/* ---------- Team rosters page (three club columns) ---------- */

.roster-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 8px;
}

.roster-column h2 {
  font-size: 20px;
  border-bottom: 2px solid var(--brand-border);
  padding-bottom: 8px;
  margin: 0 0 16px;
}

.roster-column h3 {
  font-size: 32px;
  color: var(--brand-dark);
  margin: 20px 0 6px;
}

.roster-column h3 a {
  color: #1a56db;
  text-decoration: underline;
}

.roster-column h3 a:hover {
  color: #1442ad;
}

.roster-column h3:first-of-type {
  margin-top: 0;
}

table.roster-compact {
  font-size: 15px;
}

table.roster-compact th,
table.roster-compact td {
  padding: 6px 4px;
}

@media (max-width: 800px) {
  .roster-columns {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ---------- News posts ---------- */

.news-post {
  background: var(--white);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.news-post .news-date {
  color: var(--muted-text);
  font-size: 14px;
  margin-bottom: 6px;
}

/* ---------- Simple contact form ---------- */

.message-form label {
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 17px;
}

.message-form input[type="text"],
.message-form input[type="email"],
.message-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 17px;
  font-family: inherit;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
}

.message-form textarea {
  min-height: 120px;
}

.message-form button {
  margin-top: 20px;
  background: var(--brand);
  color: var(--cream);
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 18px;
  cursor: pointer;
}

.message-form button:hover {
  background: var(--brand-dark);
}

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  padding: 24px;
  font-size: 14px;
  color: var(--muted-text);
}

/* ---------- Rules page: Google Doc embed ---------- */

.rules-embed-wrap {
  background: var(--white);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-top: 8px;
}

.rules-embed {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 600px;
  border: none;
}

/* ---------- Legal page: Google Doc embed ---------- */

.legal-embed-wrap {
  background: var(--white);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-top: 8px;
}

.legal-embed {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 600px;
  border: none;
}

/* ---------- Waiver page (rebuilt 2026-09-15: print-and-sign, no online submission) ---------- */

.waiver-print-intro {
  color: var(--muted-text);
  font-size: 15px;
  margin: 4px 0 24px;
}

.waiver-section {
  margin-bottom: 40px;
}

.waiver-section:last-of-type {
  margin-bottom: 24px;
}

.waiver-print-btn {
  display: inline-block;
  margin-top: 16px;
  background: var(--brand);
  color: var(--cream);
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
}

.waiver-print-btn:hover,
.waiver-print-btn:visited {
  color: var(--cream);
}

.waiver-print-btn:hover {
  background: var(--brand-dark);
}

/* ---------- Schedule page ---------- */

.schedule-intro {
  color: var(--muted-text);
  font-size: 16px;
  margin: 0 0 22px;
}

.schedule-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: 15px;
}

.schedule-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.court-icon {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.court-icon::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(-50%);
}

.court-icon::after {
  content: "";
  position: absolute;
  top: 50%; right: 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cream);
  transform: translateY(-50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.court-bw { background: #4169E1; }
.court-iac { background: #2C5C42; }
.court-ve { background: #C63C3C; }
.court-unknown { background: var(--muted-text); }

.schedule-loading {
  color: var(--muted-text);
  font-style: italic;
}

.schedule-current {
  background: #FBF3DC;
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 22px 26px 24px;
  margin-bottom: 30px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.schedule-current .current-eyebrow {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a6d00;
  margin: 0 0 4px;
}

.schedule-current h2 {
  font-family: var(--font-brand);
  font-size: 24px;
  margin: 0 0 16px;
}

.schedule-current .jump-to-full {
  display: inline-block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: bold;
  color: var(--brand-dark);
  text-decoration: none;
}

.schedule-current .jump-to-full:hover {
  text-decoration: underline;
}

.schedule-current .team-bw { color: #4169E1; }
.schedule-current .team-iac { color: #2C5C42; }
.schedule-current .team-ve { color: #C63C3C; }
.schedule-current .team-bw .club-tag,
.schedule-current .team-iac .club-tag,
.schedule-current .team-ve .club-tag {
  color: inherit;
}

.schedule-week {
  background: var(--white);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  scroll-margin-top: 16px;
}

.schedule-week-header {
  background: var(--brand-tint);
  border-bottom: 1px solid var(--brand-border);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.schedule-week-header::-webkit-details-marker {
  display: none;
}

.schedule-week-header::marker {
  content: "";
}

.schedule-week-header .week-num {
  font-family: var(--font-brand);
  font-weight: 600;
  color: var(--brand-dark);
  font-size: 18px;
}

.schedule-week-header .week-num::before {
  content: "\25B8";
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  font-size: 14px;
  color: var(--brand-mid);
  transition: transform 0.15s ease;
}

.schedule-week[open] > .schedule-week-header .week-num::before {
  transform: rotate(90deg);
}

.schedule-week-header .week-date {
  color: var(--muted-text);
  font-size: 15px;
}

/* Closed weeks: hide the border below the header since there's no
   match list showing beneath it. */
.schedule-week:not([open]) .schedule-week-header {
  border-bottom: none;
}

.schedule-match-list {
  padding: 6px 20px 10px;
}

.schedule-match {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--brand-tint);
  flex-wrap: wrap;
}

.schedule-match:last-child {
  border-bottom: none;
}

.schedule-match .matchup {
  font-size: 17px;
  font-weight: bold;
  color: var(--text-dark);
  flex: 1 1 auto;
}

.schedule-match .matchup .club-tag {
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--muted-text);
  margin-right: 3px;
}

.schedule-match .matchup .at-word {
  font-weight: normal;
  font-style: italic;
  color: var(--muted-text);
  font-size: 15px;
  margin: 0 6px;
}

.schedule-match .match-time {
  font-size: 14px;
  color: var(--muted-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.schedule-prior-results {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted-text);
  margin-top: 2px;
}

.schedule-prior-results .prior-label {
  font-style: italic;
  margin-right: 4px;
}

.schedule-prior-results .club-tag {
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

.schedule-prior-results .prior-sep {
  margin: 0 4px;
}

/* Team Record: a single grid shared by the matchup row and the record row
   so each team's W-L value lines up directly under that team's own name. */
.schedule-match.has-team-record {
  align-items: flex-start;
}

.matchup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 3px;
  align-items: baseline;
  flex: 1 1 auto;
  padding-top: 2px;
}

.matchup-grid .matchup-vis,
.matchup-grid .matchup-home {
  grid-row: 1;
  font-size: 17px;
  font-weight: bold;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-self: stretch;
  text-align: left;
}

.matchup-grid .matchup-vis { grid-column: 1; }
.matchup-grid .matchup-home { grid-column: 3; }

.matchup-grid .matchup-at {
  grid-row: 1;
  grid-column: 2;
  font-weight: normal;
  font-style: italic;
  color: var(--muted-text);
  font-size: 15px;
  justify-self: center;
}

.matchup-grid .club-tag {
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--muted-text);
  margin-right: 3px;
}

.team-record-caption {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 12px;
  font-style: italic;
  color: var(--muted-text);
}

.team-record-value {
  grid-row: 3;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-text);
}

.team-record-value.team-record-vis { grid-column: 1; }
.team-record-value.team-record-home { grid-column: 3; }

/* Schedule page, mobile only: full names never truncate. Below 640px there
   isn't room for every team name on one line at the desktop font size, so
   instead of clipping with an ellipsis, shrink the type a bit and let a
   long name wrap to a second line — the grid's fixed-width columns (set
   above) keep everything lined up either way. Desktop is untouched. */
@media (max-width: 640px) {
  .matchup-grid {
    column-gap: 6px;
  }
  .matchup-grid .matchup-vis,
  .matchup-grid .matchup-home {
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }
  .schedule-match-list {
    padding: 6px 10px 10px;
  }
}

/* ---------- Results & standings page ---------- */

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  margin-bottom: 10px;
}

.standings-table th {
  text-align: left;
  background: var(--brand-tint);
  color: var(--brand-dark);
  padding: 10px 12px;
  border-bottom: 2px solid var(--brand-border);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.standings-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--brand-border);
}

.standings-table tr:last-child td { border-bottom: none; }

.standings-table td.rank {
  font-family: var(--font-brand);
  font-weight: 600;
  color: var(--brand-dark);
  width: 36px;
}

.standings-table tr.tied-top td.rank { color: var(--gold); }

.standings-table td.num { text-align: center; width: 60px; }
.standings-table td.pct { text-align: center; width: 70px; font-weight: bold; }

.club-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.club-dot.bw { background: #4169E1; }
.club-dot.iac { background: #2C5C42; }
.club-dot.ve { background: #C63C3C; }

.result-winner { font-weight: bold; color: var(--text-dark); }
.result-loser { color: var(--muted-text); }

/* ---------- Team rosters: collapsible per-team sections ----------
   Mirrors the .schedule-week collapsible pattern used on the Schedule
   page, so the same interaction (tap a header, it opens) appears in
   both places. Closed by default so the page loads short; a direct
   #team-... URL still opens the right one automatically (modern
   browsers auto-expand a <details> when the browser navigates to a
   fragment target inside its hidden content). */

.roster-team {
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  margin: 0 0 14px;
  overflow: hidden;
  scroll-margin-top: 16px;
}

.roster-team-header {
  background: var(--brand-tint);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.roster-team-header::-webkit-details-marker {
  display: none;
}

.roster-team-header::marker {
  content: "";
}

.roster-team-header::before {
  content: "\25B8";
  display: inline-block;
  width: 14px;
  margin-right: 8px;
  font-size: 14px;
  color: var(--brand-mid);
  transition: transform 0.15s ease;
}

.roster-team[open] > .roster-team-header::before {
  transform: rotate(90deg);
}

.roster-column .roster-team-header h3 {
  margin: 0;
  font-size: 22px;
}

.roster-team table.roster-compact {
  margin: 4px 16px 12px;
  width: calc(100% - 32px);
}

.roster-team-page-link {
  margin: 6px 16px 2px;
  font-size: 14px;
}

.roster-team-page-link a {
  color: #1a56db;
  text-decoration: underline;
}

/* ---------- Waiver print pages (bridgewater-waiver-print.html,
   iac-waiver-print.html): the waiver text is reproduced directly as HTML
   on these pages (rebuilt 2026-09-15) rather than embedded from Google
   Docs via an iframe. An embedded iframe cannot be relied on to print
   correctly -- Chrome treats it as a fixed-size snapshot, so wide text
   gets clipped on the right and anything past one page's height gets
   clipped on the bottom, no matter how wide the surrounding column is
   made. Real HTML text has neither problem: it reflows to fit the
   printed page and splits across pages normally. ---------- */

.waiver-doc-wrap {
  background: var(--white);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-top: 8px;
  padding: 32px 40px 40px;
  max-width: 720px;
}

.waiver-doc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dark);
}

.waiver-doc p {
  margin: 0 0 14px;
}

.waiver-doc h3 {
  margin: 22px 0 10px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.waiver-doc ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.waiver-doc li {
  margin-bottom: 4px;
}

.waiver-blank {
  display: inline-block;
  border-bottom: 1px solid var(--text-dark);
  vertical-align: baseline;
}

.waiver-field-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 6px;
  align-items: baseline;
  margin: 0 0 14px;
}

.waiver-field-row > span {
  white-space: nowrap;
}

.waiver-doc-org {
  margin: 0;
  text-align: center;
  font-weight: 700;
}

.waiver-doc-title {
  margin: 4px 0 18px;
  text-align: center;
  font-weight: 700;
}

.waiver-print-page .page-content {
  max-width: 800px;
}

@media print {
  .waiver-print-page .site-header,
  .waiver-print-page .site-nav,
  .waiver-print-page .site-footer,
  .waiver-print-page .legal-link-wrap,
  .waiver-print-page .no-print {
    display: none !important;
  }

  .waiver-print-page .page-content > h1 {
    display: none;
  }

  .waiver-print-page .page-content {
    padding: 0;
  }

  .waiver-doc-wrap {
    margin-top: 0;
  }

  .waiver-doc-wrap {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: 100%;
  }

  .waiver-doc,
  .waiver-doc h3 {
    font-size: 10pt;
  }

  .waiver-doc {
    line-height: 1.25;
  }

  .waiver-doc p {
    margin: 0 0 8px;
  }

  .waiver-doc h3 {
    margin: 12px 0 6px;
  }

  .waiver-doc ul {
    margin: 0 0 8px;
  }

  .waiver-doc li {
    margin-bottom: 2px;
  }

  .waiver-field-row {
    margin: 0 0 8px;
  }
}