/* ==========================================================================
   Belleville Softball – styles
   Design system follows bellevilleminorsoftball.com: orange accent, black
   and charcoal neutrals, Oswald headings, square corners, grey title bands.
   To rebrand, change only the tokens in :root below.

   Accessibility: the brand orange (#ff9900) is only 2.1:1 on white, so it is
   used for stripes, borders and hover effects, never for text on light
   backgrounds. Text links use --color-accent-text (5.4:1 on white).
   ========================================================================== */

:root {
  /* Brand */
  --color-accent: #ff9900;        /* decorative on light; 9.8:1 as text on black */
  --color-accent-text: #a85300;   /* accent text on white – 5.4:1 */
  --color-black: #000000;

  /* Neutrals */
  --color-heading: #000000;
  --color-text: #333333;          /* 12.6:1 on white */
  --color-muted: #666666;         /* 5.7:1 on white, 5.4:1 on --color-band */
  --color-bg: #f7f7f7;
  --color-surface: #ffffff;
  --color-band: #f7f7f7;          /* title band background */
  --color-border: #cccccc;
  --color-footer-bg: #333333;
  --color-footer-text: #cccccc;   /* 7.9:1 on --color-footer-bg */

  /* Type */
  --font-heading: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius: 0;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-hover: 0 6px 14px rgb(0 0 0 / 0.10), 0 16px 32px rgb(0 0 0 / 0.08);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);   /* hover in: eased */
  --ease-out: cubic-bezier(0.4, 0, 0.6, 1); /* hover out: even, no slow tail */
  --hover-in: 0.2s;
  --hover-out: 0.12s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Orange stripe across the top, as on the BMS site */
  border-top: 8px solid var(--color-accent);
}

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

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 40em) {
  .container {
    padding-inline: 1.5rem;
  }
}

/* ---------- Accessibility helpers ---------- */

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--color-black);
  color: var(--color-accent);
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

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

.site-header {
  padding-block: 2.5rem 2.25rem;
  text-align: center;
  background: var(--color-surface);
  /* Black bar echoes the BMS menu bar */
  border-bottom: 8px solid var(--color-black);
}

@media (min-width: 40em) {
  .site-header {
    padding-block: 3.5rem 3rem;
  }
}

.site-logo {
  width: min(220px, 55vw);
  margin: 0 auto 1.5rem;
}

h1 {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: clamp(2.125rem, 6vw + 0.5rem, 3.75rem);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  margin: 1rem auto 0;
  background: var(--color-accent);
}

.lead {
  max-width: 36rem;
  margin: 1rem auto 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1vw + 0.9rem, 1.375rem);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* ---------- League grid ---------- */

main {
  padding-block: 2.5rem 3.5rem;
}

.league-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- League card ---------- */

/* Hover timing: quick, eased entrance; a faster exit so the card settles
   back promptly. Every hover effect uses the same pair of timings, so
   nothing snaps back ahead of (or lags behind) the rest. */
.league-card,
.league-card::after,
.league-card__logo img,
.league-card__title,
.league-card__cta .arrow {
  transition-duration: var(--hover-out);
  transition-timing-function: var(--ease-out);
}

.league-card:hover,
.league-card:hover::after,
.league-card:hover .league-card__logo img,
.league-card:hover .league-card__title,
.league-card:hover .league-card__cta .arrow {
  transition-duration: var(--hover-in);
  transition-timing-function: var(--ease);
}

.league-card {
  position: relative; /* the link's ::after fills the card, making the whole tile clickable */
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-black);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  isolation: isolate; /* keeps the shadow layer (::after) behind the card content */
  /* The card and logo sit on their own GPU layers, so lifting and zooming
     them doesn't repaint the detailed logos every frame. */
  will-change: transform;
  transition-property: transform, border-color;
}

/* Invisible strip under the card. When the card lifts, this still covers the
   spot it left, so a pointer at the bottom edge doesn't flicker on and off. */
.league-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
}

/* Hover shadow, pre-painted and faded in with opacity (cheap) instead of
   animating box-shadow (repaints every frame). */
.league-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  transition-property: opacity;
  pointer-events: none;
}

.league-card:hover {
  transform: translateY(-4px);
  border-top-color: var(--color-accent);
}

.league-card:hover::after {
  opacity: 1;
}

.league-card:focus-within {
  outline: 3px solid var(--color-black);
  outline-offset: 3px;
}

.league-card__logo {
  height: 11rem;
  overflow: hidden;
  padding: 1.25rem;
  background: var(--color-surface);
}

.league-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  transition-property: transform;
}

.league-card:hover .league-card__logo img {
  transform: scale(1.04);
}

/* Title band – matches the BMS post-title style */
.league-card__title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.625rem 1.25rem;
  background: var(--color-band);
  border-bottom: 6px solid var(--color-border);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  transition-property: border-color;
}

.league-card:hover .league-card__title {
  border-bottom-color: var(--color-accent);
}

.league-card__title a {
  color: inherit;
  text-decoration: none;
}

.league-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Card shows the focus ring instead of the small link */
.league-card__title a:focus-visible {
  outline: none;
}

.league-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1rem 1.25rem 1.25rem;
}

.league-card__desc {
  margin: 0;
  color: var(--color-muted);
}

.league-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.75rem 1rem;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.league-card__facts dt {
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.league-card__facts dd {
  margin: 0;
  color: var(--color-text);
  font-weight: 600;
}

.league-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 1.25rem;
  color: var(--color-accent-text);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.league-card__cta .arrow {
  transition-property: transform;
}

.league-card:hover .league-card__cta .arrow {
  transform: translateX(4px);
}

/* ---------- Line up sections across tiles in the same row ----------
   Each tile spans five rows of the league grid (logo, title, description,
   details, link) and shares them through subgrid. Tiles side by side get
   the same section heights, so their dividers line up. In one column (phones)
   each tile just sizes to its own content. Browsers without subgrid keep the
   flex layout above. */

@supports (grid-template-rows: subgrid) {
  .league-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .league-card__body {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .league-card__cta {
    align-self: end;
    justify-self: start;
    margin-top: 0;
  }
}

/* Placeholder tile */

.league-card--placeholder {
  display: flex;
  justify-content: center;
  min-height: 12rem;
  text-align: center;
  background: transparent;
  border: 2px dashed var(--color-border);
  box-shadow: none;
  will-change: auto;
}

.league-card--placeholder::before,
.league-card--placeholder::after {
  display: none;
}

.league-card--placeholder:hover {
  transform: none;
  border-top-color: var(--color-border);
}

.league-card--placeholder .league-card__title {
  justify-content: center;
  background: none;
  border: 0;
}

.league-card--placeholder .league-card__body {
  display: block;
  flex: 0;
  padding-top: 0;
}

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

.site-footer {
  padding-block: 1.5rem;
  border-top: 4px solid var(--color-accent);
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  font-size: 0.9375rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

/* ---------- Respect reduced-motion preferences ---------- */

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

  .league-card:hover,
  .league-card:hover .league-card__logo img,
  .league-card:hover .league-card__cta .arrow {
    transform: none;
  }
}