/* Your own rules. This file loads after Tailwind and daisyUI, so it wins a tie.
 * Reach for a utility class first; write CSS here when no utility can do it. */

/* ============================================================ PALETTE
 *
 * "…"
 *
 * Name the mood in a sentence — "a floodlit field twenty minutes before
 * kickoff" — then list your colors and the job each one does. A team site
 * usually has this decided for it already: use the real team colors, and
 * check the pair you land on against the contrast floor below.
 *
 *   primary   #______   the loud one: buttons, the badge, the stat number
 *   base-100  #______   the page ground
 *   base-200  #______   sections that step forward from the ground
 *   accent    #______   a second accent, if you need one at all
 */

/* Redeclare the theme's colors here to make them yours. Change `night` to the
 * theme on <html>, in every page. Set --color-primary-content with your primary
 * and measure the pair: a navy school color often takes white text, not black. */
[data-theme='night'] {
  /* --color-primary: #______; */
  /* --color-primary-content: #______; */
  /* --color-accent: #______; */
}

/* ============================================================ TYPE
 *
 * Two faces at most: Oswald for headings, Inter for body. To change them,
 * replace the Google Fonts <link> in the <head> of every page, then the names below. */
body {
  font-family: 'Inter', system-ui, sans-serif;
}
.font-display,
.card-title {
  font-family: 'Oswald', Impact, sans-serif;
}

/* ============================================================ HERO VIDEO
 *
 * Load-bearing. js/hero-video.js decides when the video shows; these rules place it. */

/* No overflow: hidden on the stage: .hero-poster already clips the video, and a
 * second clip here would cut off the next-game card that crosses the bottom edge. */
.hero-stage {
  position: relative;
}

/* The photograph is the hero whenever the video is not: blocked, loading, on a
 * phone, or reduced motion. Design it as the only thing there. Swap the video,
 * swap this for a still from the same footage. */
.hero-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-base-300);
  background-image: url('img/stadium-night.jpg'),
    linear-gradient(155deg, var(--color-neutral) 0%, var(--color-base-300) 45%, var(--color-primary) 130%);
  background-size: cover;
  background-position: center 40%;
}

/* Cover, not contain: 177.78vh is 16/9 of the screen's height. --video-zoom crops
 * YouTube's bars and any black bars in the footage: 1.2 for 16:9 like this clip,
 * about 1.36 for widescreen film. Swap the video, check the edges, set this. */
.hero-poster {
  --video-zoom: 1.2;
}
.hero-poster iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--video-zoom));
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-poster.is-playing iframe {
  opacity: 1;
}

/* The scrim makes the headline readable. White text needs 4.5:1 against the
 * video's brightest frame; the lightest stop, 60% at the top, measures 5.7:1 over
 * pure white. Lighten it only if you measure that stop. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.7) 40%, rgb(0 0 0 / 0.9));
}

/* The other pages' headers: the same photograph, faded almost to nothing. */
.page-header-photo {
  position: absolute;
  inset: 0;
  background: url('img/stadium-night.jpg') center 40% / cover;
  opacity: 0.12;
}

/* ============================================================ FILTERS
 *
 * The schedule's Home/Away and the roster's positions are radio buttons; :has()
 * hides what isn't picked. No JavaScript, and they work from a keyboard. */
main:has(#show-home:checked) tr[data-venue='away'],
main:has(#show-away:checked) tr[data-venue='home'] {
  display: none;
}
main:has(#pos-fwd:checked) .player:not([data-pos='fwd']),
main:has(#pos-mid:checked) .player:not([data-pos='mid']),
main:has(#pos-def:checked) .player:not([data-pos='def']),
main:has(#pos-gk:checked) .player:not([data-pos='gk']) {
  display: none;
}

/* The number panel on each player card: the shirt number on the team color. */
.player-number {
  background:
    linear-gradient(135deg, transparent 0 55%, color-mix(in oklch, var(--color-primary) 22%, transparent) 55% 70%, transparent 70%),
    linear-gradient(to bottom right, var(--color-base-300), var(--color-neutral));
}

/* ============================================================ CAROUSELS
 *
 * daisyUI's .carousel is a sideways scroller that snaps to each slide. js/site.js
 * adds the arrows and dots; these rules dress them. */
[data-carousel] .carousel {
  position: relative; /* site.js measures each slide from here */
  scrollbar-width: none;
}
[data-carousel] .carousel::-webkit-scrollbar {
  display: none;
}
.carousel-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.2s ease, width 0.2s ease;
}
.carousel-dot[aria-current='true'] {
  opacity: 1;
  width: 1.75rem;
}

/* A slide's words sit on its photo, so the scrim does what .hero-scrim does on
 * the home page: 65% black or more behind white text. Lighten it only if you
 * measure. The pause button shows play while it is paused. */
.slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.65) 45%, rgb(0 0 0 / 0.85));
}
[data-pause] .i-play,
[data-pause][aria-pressed='true'] .i-pause {
  display: none;
}
[data-pause][aria-pressed='true'] .i-play {
  display: block;
}

/* ============================================================ NAV OVER THE HERO
 *
 * index-2.html's nav: white on the photo, then the page's own colors once the
 * photo has scrolled under it (.is-solid, set by js/site.js). */
.nav-over {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 30;
  color: #fff;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.55), transparent);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.nav-over.is-fixed {
  position: fixed;
}
.nav-over.is-solid {
  color: var(--color-base-content);
  background: color-mix(in oklch, var(--color-base-100) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--color-base-content) 12%, transparent);
}
.nav-over .dropdown-content {
  color: var(--color-base-content);
}

/* ============================================================ EVERYTHING ELSE */

/* Footer headings at full strength. daisyUI's fade passes on `night` by a hair
 * (4.80:1) and fails on other themes. Keep this rule. */
.footer-title {
  opacity: 1;
}

/* The page you are on (aria-current). Measure before you recolor it against the
 * theme's neutral. */
.menu a[aria-current='page'] {
  font-weight: 700;
}

/* The skip link: off-screen until a keyboard user tabs to it. Keep it. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 50;
}
.skip-link:focus {
  top: 1rem;
}

/* Anchors land below the sticky navbar instead of behind it. If you change the
 * navbar's height, change this number too. */
[id] {
  scroll-margin-top: 5rem;
}

html {
  scroll-behavior: smooth;
}

/* Less movement for readers whose system asks for it: no smooth scroll, no video
 * fade, no zoom. Keep this block. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
  .group:hover img {
    transform: none;
  }
}