/* Northwest Batbusters — nwbatbusters.org
   Visual system matched to batbusters.org (maroon #4f0012, Oswald/Montserrat/
   Libre Baskerville, dark photo-collage background, white content cards). */

@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('fonts/oswald-latin.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/montserrat-latin.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/librebaskerville-latin.woff2') format('woff2'); }

:root {
  --maroon: #4f0012;
  --maroon-dark: #1c0006;
  --ink: #191919;
  --heading-light: #b7bbc7;
  --panel: #efefef;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body {
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background-color: #0d0a0a;
  background-image: linear-gradient(rgba(13, 10, 10, 0.86), rgba(13, 10, 10, 0.86)), url('assets/collage-bg.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.interior { background-image: linear-gradient(rgba(13, 10, 10, 0.9), rgba(13, 10, 10, 0.9)), url('assets/collage-bg.jpg'); }

a { color: var(--maroon); text-decoration: none; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

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

.site-header { position: relative; z-index: 10; }

.site-header.banded { background: linear-gradient(180deg, var(--maroon-dark) 0%, var(--maroon) 100%); }

.logo-row { text-align: center; padding: 26px 0 6px; }

.logo-row img { width: 300px; max-width: 80vw; height: auto; }

.main-nav { text-align: center; padding: 10px 16px 18px; }

.main-nav ul { list-style: none; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 38px; }

.main-nav > ul > li { position: relative; }

.main-nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  padding: 8px 0;
}

.main-nav a:hover, .main-nav li.current > a { color: var(--heading-light); }

/* Teams dropdown */
.dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 22px 28px;
  text-align: left;
  white-space: nowrap;
}

.main-nav li:hover .dropdown-panel,
.main-nav li:focus-within .dropdown-panel { display: flex; gap: 34px; }

.dropdown-group h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 10px;
}

.dropdown-group a {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: 4px 0;
}

.dropdown-group a:hover { color: var(--maroon); }

/* ---------- Page banner (interior pages) ---------- */

.page-banner {
  background-image: linear-gradient(90deg, rgba(28, 0, 6, 0.92) 0%, rgba(79, 0, 18, 0.55) 60%, rgba(28, 0, 6, 0.35) 100%), url('assets/team-banner.jpg');
  background-size: cover;
  background-position: center;
  padding: 54px 0;
}

.page-banner h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 3.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--heading-light);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ---------- Content cards ---------- */

main { flex: 1; padding-bottom: 70px; }

.card {
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  padding: 56px 60px;
  margin-top: 34px;
}

.card h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.card .card-sub {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.9375rem;
  text-align: center;
  color: #3a3a3a;
  margin-top: 8px;
}

.card p { line-height: 1.75; font-size: 0.9375rem; margin-top: 18px; }

.card a { font-weight: 600; }

/* Home hero */
.hero { text-align: center; padding: 64px 0 26px; }

.hero h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
}

.hero-sub {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.0625rem;
  color: var(--heading-light);
  margin-top: 14px;
}

/* Home team list */
.team-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); justify-items: center; gap: 40px 30px; margin-top: 44px; }

.team-col { min-width: 130px; }

.team-columns h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  color: var(--maroon);
  border-bottom: 3px solid var(--maroon);
  padding-bottom: 8px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.team-columns ul { list-style: none; }

.team-columns li a {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--ink);
  display: block;
  padding: 6px 0;
}

.team-columns li a:hover { color: var(--maroon); }

/* Home feature tiles */
.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; margin-top: 26px; }

.tile {
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  padding: 30px 32px;
  color: var(--ink);
  transition: transform 0.15s ease;
}

.tile:hover { transform: translateY(-3px); }

.tile h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--maroon);
}

.tile p { font-size: 0.8125rem; line-height: 1.7; margin-top: 10px; font-weight: 400; }

/* ---------- Team page ---------- */

.team-card { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }

.team-card img { width: 300px; max-width: 100%; height: auto; }

.team-card .coach-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.team-card .coach-name { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1.5rem; margin-top: 6px; }

.team-pager { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }

.team-pager a {
  flex: 1 1 260px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  padding: 18px 26px;
  color: var(--ink);
}

.team-pager a.next { text-align: right; }

.team-pager .pager-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.team-pager .pager-team { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.0625rem; margin-top: 2px; }

.team-pager a:hover .pager-team { color: var(--maroon); }

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

.site-footer { background: #0c0c0c; padding: 26px 0; }

.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

.site-footer nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cfcfcf;
  margin-left: 26px;
}

.site-footer nav a:hover { color: #fff; }

.site-footer .copyright { font-size: 0.75rem; color: #8a8a8a; }

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
  .card { padding: 36px 26px; }
  .hero { padding: 40px 0 14px; }
  .hero h1 { font-size: 2.25rem; }
  .page-banner h1 { font-size: 2.25rem; }
  .main-nav ul { gap: 0 22px; }
  .team-card { gap: 28px; }
  .site-footer .container { justify-content: center; text-align: center; }
  .site-footer nav a { margin: 0 12px; }
}