/* ============================================================
   Design tokens — Southern West Virginia Volleyball Club
   Palette and type pulled directly from the club's own shield
   logo (ink/court red/whistle gold) rather than Bootstrap defaults.
   ============================================================ */

@font-face {
  font-family: 'Oswald';
  src: url('/lib/fonts/oswald/oswald-latin-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/lib/fonts/inter/inter-latin-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-ink: #1a1a1a;
  --color-court-red: #c81e2c;
  --color-court-red-dark: #96141f;
  --color-floor: #faf6ef;
  --color-steel: #52565c;
  --color-whistle: #e8a400;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Re-point Bootstrap's own variables at the club palette so every
     component built from them (buttons, badges, links, form focus
     rings) picks it up without needing a class-by-class override. */
  --bs-primary: var(--color-court-red);
  --bs-primary-rgb: 200, 30, 44;
  --bs-body-bg: var(--color-floor);
  --bs-body-color: var(--color-ink);
  --bs-body-font-family: var(--font-body);
  --bs-link-color: var(--color-court-red);
  --bs-link-color-rgb: 200, 30, 44;
  --bs-link-hover-color: var(--color-court-red-dark);
  --bs-link-hover-color-rgb: 150, 20, 31;

  /* Bootstrap 5.1's #dc3545 is only 4.2:1 on the floor background; this
     darker red clears WCAG AA (4.5:1) for .text-danger validation text. */
  --bs-danger-rgb: 176, 42, 55;
}

/* ============================================================
   Accessibility (WCAG 2.1 AA) overrides for Bootstrap 5.1, which
   hard-codes several colours that fall below 4.5:1 text / 3:1
   non-text contrast against the floor (#faf6ef) background.
   ============================================================ */

/* Bootstrap 5.1 hard-codes a{color:#0d6efd} (4.2:1 on the floor background) and
   ignores --bs-link-color, so links get the club red here (5.3:1). */
a {
  color: var(--color-court-red);
}

a:hover {
  color: var(--color-court-red-dark);
}

/* #6c757d is 4.35:1 on the floor background. */
.text-muted {
  color: #5c636a !important;
}

/* Buttons: Bootstrap 5.1 ignores --bs-primary for .btn-primary, so the
   brand red is applied here (white on court red = 5.7:1, court red on
   floor = 5.3:1). */
.btn-primary {
  color: #fff;
  background-color: var(--color-court-red);
  border-color: var(--color-court-red);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: #fff;
  background-color: var(--color-court-red-dark);
  border-color: var(--color-court-red-dark);
}

.btn-outline-primary {
  color: var(--color-court-red);
  border-color: var(--color-court-red);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff;
  background-color: var(--color-court-red);
  border-color: var(--color-court-red);
}

.btn-outline-secondary {
  color: #5c636a;
  border-color: #5c636a;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: #fff;
  background-color: #5c636a;
  border-color: #5c636a;
}

/* Form control borders: Bootstrap's #ced4da / rgba(0,0,0,.25) are ~1.5:1,
   below the 3:1 needed to identify a control's boundary (SC 1.4.11). */
.form-control,
.form-select,
.form-check-input {
  border-color: #767676;
}

/* Visible keyboard focus for links and nav items that Bootstrap leaves
   with only the browser default (or none, after its own resets). */
a:focus-visible,
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.navbar-toggler:focus-visible {
  outline: 3px solid var(--color-court-red);
  outline-offset: 2px;
  box-shadow: none;
}

/* Court red is under 3:1 against the admin area's dark navbar. */
.navbar-dark a:focus-visible,
.navbar-dark .navbar-toggler:focus-visible {
  outline-color: #fff;
}

/* Skip link: hidden until focused, then pinned top-left above the navbar. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1080;
  padding: 0.5rem 1rem;
  background: var(--color-ink);
  color: #fff;
  font-weight: 600;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
  color: #fff;
  outline: 3px solid var(--color-whistle);
  outline-offset: 0;
}

/* <main> is only focusable so the skip link can move focus into it; no ring needed there. */
#main-content:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-court-red);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

.btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   Navbar
   ============================================================ */

.site-navbar {
  border-bottom: 3px solid var(--color-court-red);
  box-shadow: none;
}

.site-navbar .nav-link {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  border-bottom: 2px solid transparent;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
  color: var(--color-court-red);
  border-bottom-color: var(--color-court-red);
}

/* ============================================================
   Small layout utility classes used in place of inline style=""
   attributes, so the Content-Security-Policy style-src directive
   doesn't need 'unsafe-inline'.
   ============================================================ */
.field-max-150 { max-width: 150px; }
.field-max-200 { max-width: 200px; }
.field-max-220 { max-width: 220px; }
.select-width-auto { width: auto; }
.thumb-40 { height: 40px; }
.thumb-80 { height: 80px; }
.sponsor-logo { max-height: 80px; max-width: 100%; object-fit: contain; }

.brand-logo {
  height: 40px;
  width: auto;
}

.navbar-brand span {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

@media (max-width: 575.98px) {
  .navbar-brand span {
    font-size: 0.9rem;
  }
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Footer sits at the bottom via the flex column on <body> rather than absolute positioning,
   so its text can wrap at narrow widths / high zoom without overlapping content. */
.footer {
  margin-top: auto;
  padding: 1rem 0;
}

/* ============================================================
   Hero — full-bleed band under the navbar with the court photo
   (images/home-banner.webp) behind a dark overlay.
   ============================================================ */

.hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: -1rem;
  margin-bottom: 3rem;
  background: var(--color-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 3.5rem 1rem 4.5rem;
}

/* Court photo behind the hero text. The photo is bright, so a gradient darkest on the left
   (where the text sits) keeps the white copy readable while the ball and net stay visible on
   the right. On narrow screens the text spans the full width, so the overlay goes uniform.
   Overlay stops are chosen so the text keeps WCAG AA contrast even over the brightest parts
   of the photo (on wide screens the text column reaches ~75% across). */
.hero-banner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0.45) 100%),
    url("../images/home-banner.webp") center right / cover no-repeat;
}

@media (max-width: 767.98px) {
  .hero-banner {
    background:
      linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
      url("../images/home-banner-mobile.webp") center / cover no-repeat;
  }
}

.hero-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero .eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  /* Lighter than --color-whistle: that gold is under 4.5:1 over the photo's highlights. */
  color: #f5c542;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.hero h1 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.75rem;
}

.hero .lead {
  color: #d9d9d9;
  max-width: 640px;
  margin-bottom: 0;
}

.hero .lead :last-child {
  margin-bottom: 0;
}

/* ============================================================
   Scoreboard — season stat row. Floats up over the hero's bottom
   edge, like a scoreboard mounted on the gym wall.
   ============================================================ */

.scoreboard {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 2;
  margin-top: -3rem;
  margin-bottom: 2rem;
}

.scoreboard .stat {
  flex: 1 1 50%;
  padding: 1.1rem 1.5rem;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .scoreboard .stat {
    flex: 1 1 0;
    border-bottom: none;
  }
}

.scoreboard .stat:last-child {
  border-right: none;
  border-bottom: none;
}

.scoreboard .stat-label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--color-steel);
  margin-bottom: 0.2rem;
}

.scoreboard .stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-ink);
}

.scoreboard-cta {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  background: var(--color-floor);
}

@media (min-width: 768px) {
  .scoreboard-cta {
    flex: 0 0 auto;
  }
}