/*
Theme Name: Altadena Soccer Wide Page
Theme URI: https://altadenasoccer.com/
Author: Altadena Soccer
Description: A fast, friendly block theme for posting the next Altadena pickup soccer game.
Version: 2.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: altadena-soccer-wide-page
*/

html { scroll-behavior: smooth; }
body { margin: 0; }
a { text-underline-offset: .18em; }
.wp-site-blocks { min-height: 100vh; }
.site-shell { position: relative; overflow: hidden; }
.site-shell::before {
  content: ""; position: absolute; inset: -12rem -12rem auto auto;
  width: 34rem; height: 34rem; border-radius: 50%;
  background: rgba(185, 230, 72, .09); pointer-events: none;
}
.site-header { position: relative; z-index: 5; }
.site-header .wp-block-site-title a { text-decoration: none; }
.hero-kicker { letter-spacing: .14em; text-transform: uppercase; }
.game-details { position: relative; }
.game-details__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.game-card {
  min-height: 15rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.4rem;
  background: rgba(255,255,255,.075); box-shadow: 0 24px 70px rgba(0,0,0,.2);
  overflow: hidden;
}
.game-card__inner { display: flex; align-items: center; gap: 1.5rem; padding: clamp(1.4rem, 4vw, 2.5rem); }
.game-card__label { margin: 0 0 .45rem; color: #b9e648; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.game-card__value { margin: 0; color: #fff; font-size: clamp(1.85rem, 5vw, 3.7rem); font-weight: 800; line-height: .98; letter-spacing: -.045em; }
.game-card__meta { margin: .7rem 0 0; color: #cbd5d1; }
.game-clock { flex: 0 0 auto; width: 7.8rem; height: 7.8rem; }
.game-clock__face { fill: #f8faf9; stroke: #b9e648; stroke-width: 4; }
.game-clock__tick { stroke: #17362c; stroke-width: 2.2; stroke-linecap: round; }
.game-clock__hour { stroke: #17362c; stroke-width: 6; stroke-linecap: round; }
.game-clock__minute { stroke: #e35e42; stroke-width: 4; stroke-linecap: round; }
.game-clock__pin { fill: #e35e42; }
.game-map { position: relative; min-height: 15rem; background: #dce8e2; }
.game-map iframe { display: block; width: 100%; height: 100%; min-height: 15rem; border: 0; }
.game-map__fallback { display: grid; place-items: center; min-height: 15rem; padding: 2rem; text-align: center; color: #17362c; }
.game-map__fallback a { color: inherit; font-weight: 700; }
.game-status { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem; color: #dfe9e5; }
.game-status::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: #b9e648; box-shadow: 0 0 0 .35rem rgba(185,230,72,.13); }
.game-status--red::before { background: #e35e42; box-shadow: 0 0 0 .35rem rgba(227,94,66,.15); }
.game-status--green::before { background: #b9e648; box-shadow: 0 0 0 .35rem rgba(185,230,72,.13); }
.sunday-weather { margin-top: 1.25rem; }
.weather-card {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr); gap: 1.5rem;
  align-items: center; padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.4rem; background: rgba(255,255,255,.075); color: #fff;
}
.weather-card__eyebrow { margin: 0 0 .35rem; color: #b9e648; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.weather-card__title { margin: 0; color: #fff; font-size: clamp(1.5rem, 4vw, 2.5rem); }
.weather-card__summary { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.weather-card__icon { flex: 0 0 auto; font-size: 3.25rem; line-height: 1; }
.weather-card__condition { margin: 0; font-size: 1.2rem; font-weight: 750; }
.weather-card__date { margin: .2rem 0 0; color: #cbd5d1; font-size: .92rem; }
.weather-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.weather-stat { padding: 1rem .75rem; border-radius: 1rem; background: rgba(255,255,255,.08); text-align: center; }
.weather-stat__value { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.weather-stat__label { display: block; margin-top: .35rem; color: #cbd5d1; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.weather-card__message { margin: .8rem 0 0; color: #cbd5d1; font-size: .85rem; }
.quick-links .wp-block-navigation-item__content { border-bottom: 1px solid rgba(23,54,44,.18); padding: .85rem 0; text-decoration: none; }
.quick-links .wp-block-navigation-item__content:hover { border-color: #e35e42; color: #e35e42; }
.site-footer { border-top: 1px solid rgba(23,54,44,.14); }

/* The soccer homepage lives in normal page content, so it must be allowed to
   escape WordPress's standard 760px article column. */
.site-home-content {
  width: 100%;
  max-width: none !important;
  margin-block-start: 0 !important;
}
.site-home-content > .site-shell,
.site-home-content > .alignfull {
  width: 100%;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.site-home-content > .site-shell { padding: 0 !important; }
.site-home-content .site-shell > .wp-block-group {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
.game-details, .sunday-weather { container-type: inline-size; }

@container (max-width: 800px) {
  .game-details__grid { grid-template-columns: 1fr; }
  .game-card__inner { align-items: flex-start; flex-direction: column; }
  .weather-card { grid-template-columns: 1fr; }
}

@container (max-width: 440px) {
  .weather-card__stats { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .game-details__grid { grid-template-columns: 1fr; }
  .game-card__inner { align-items: flex-start; flex-direction: column; }
  .game-clock { width: 6.6rem; height: 6.6rem; }
  .weather-card { grid-template-columns: 1fr; }
}

@media (max-width: 440px) { .weather-card__stats { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }