/* Salem Youth Lacrosse — Polished Centered Theme (Standard CSS)
   -----------------------------------------------------------------
   - Clean, centered sections with generous spacing
   - Subtle depth (borders, shadows) and smooth hover states
   - Responsive typography and layout
*/

:root{
  --bg: #0a1120;
  --bg-alt: #0c1426;
  --panel: #0f1a32;
  --panel-2: #0d1830;
  --text: #eaf1ff;
  --muted: #b7c3e2;
  --brand: #22c55e; /* emerald-500 */
  --brand-2: #f59e0b; /* amber-500 */
  --border: #25365d;
  --card: #0e1931;
  --shadow: 0 12px 36px rgba(0,0,0,.35);
  --radius: 18px;
}

/* Base */
*{ box-sizing: border-box }
html, body{ margin:0; padding:0 }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -200px, rgba(34,197,94,.18), transparent 70%),
              radial-gradient(900px 500px at 100% 0, rgba(245,158,11,.12), transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  color: var(--text);
  line-height: 1.6;
}

/* Layout helper — narrow & centered */
.container{
  width: min(980px, 92vw);
  margin-inline: auto;
}

/* Smooth transitions */
a, .btn, .card, .feature, .nav a{ transition: all .2s ease }
img{ max-width: 100%; display: block }

/* Announcement Bar */
.announce{
  background: color-mix(in oklab, var(--brand-2) 16%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--brand-2) 40%, transparent);
}
.announce__content{
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  text-align: center; /* centered */
}
.announce__link{
  color: var(--text);
  text-decoration: underline;
  opacity: .9;
}
.badge{
  display: inline-block;
  background: var(--brand-2);
  color: #0b0b0b;
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  margin-right: 10px;
}

/* Header */
.site-header{
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.header__content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.logo{ display:flex; align-items:center; gap:14px }
.logo img{
  width: 58px; height: 58px; object-fit: contain;
  background: #142347;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 8px;
  box-shadow: var(--shadow);
}
.logo__text h1{ font-size: 22px; margin:0; font-weight: 900; letter-spacing:.2px }
.logo__text p{ margin:0; color: var(--muted); font-size: 14px }

.nav{ display:flex; gap: 12px; align-items:center }
.nav a{
  color: var(--text);
  text-decoration: none;
  opacity: .9;
  padding: 10px 12px;
  border-radius: 12px;
}
.nav a:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px) }

/* Buttons */
.btn{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--brand);
  color: #08121f;
  text-decoration:none;
  font-weight:800;
  border: 1px solid color-mix(in oklab, var(--brand) 55%, transparent);
  box-shadow: var(--shadow);
}
.btn:hover{ filter: brightness(1.06); transform: translateY(-1px) }
.btn--outline{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn--ghost{
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
  color: var(--text);
}

/* Hero — centered */
.hero{
  position: relative;
  overflow: hidden;
  padding: 64px 0 80px;
  text-align: center;  /* centered */
}
.hero__inner{ position: relative; z-index: 1 }
.hero h2{
  font-size: clamp(30px, 3.4vw + 12px, 48px);
  margin: 8px 0 10px;
  font-weight: 900;
}
.hero p{
  max-width: 760px;
  margin: 0 auto;   /* centered */
  color: var(--muted);
  font-size: 18px;
}
.hero__actions{ display:flex; gap: 12px; margin: 18px auto 0; justify-content:center }
.hero__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 420px at 50% -10%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(900px 360px at 90% 0%, rgba(245,158,11,.18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
  opacity: .95;
}

/* Sections */
.section{ padding: 60px 0 }
.section--tight{ padding: 36px 0 28px }
.section--contrast{
  background: linear-gradient(180deg, var(--panel-2), rgba(255,255,255,0));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Cards — centered grid with equal height */
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-align: center; /* centered */
}
.card:hover{ transform: translateY(-2px); }
.card__title{ margin: 0 0 8px; font-size: 19px; font-weight: 800 }
.card__list{ margin:0 auto; padding-left: 18px; color: var(--muted); text-align: left; max-width: 90% }
.card__list li{ margin: 6px 0 }

/* Two-column features — centered content blocks */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.feature{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  text-align: center; /* centered */
}
.feature h3{ margin: 0 0 8px; font-size: 20px }
.feature p{ color: var(--muted); margin: 0 auto; max-width: 640px }

/* Contact — centered layout */
.contact{
  display:grid;
  grid-template-columns: 1.5fr .8fr;
  gap: 22px;
  align-items: start;
}
.contact__main, .contact__aside{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  text-align: center; /* centered */
}
.contact__main h3{ margin: 0 0 6px }
.contact__main p{ color: var(--muted) }
.contact__aside h4{ margin: 0 0 8px }
.signoff{ margin-top: 18px; color: var(--text) }

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 28px 0 44px;
  text-align: center; /* centered */
}
.footer__content{
  display:flex; flex-direction: column; gap: 6px;
  align-items:center; justify-content:center;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 920px){
  .cards{ grid-template-columns: 1fr }
  .grid-2{ grid-template-columns: 1fr }
  .contact{ grid-template-columns: 1fr }
  .nav{ display:none }
  .logo__text h1{ font-size: 19px }
  .logo img{ width: 52px; height: 52px }
  .announce__content{ text-align: center }
}