:root {
  --scout-navy: #15396b;
  --scout-blue: #1f6fb2;
  --scout-green: #2e7d32;
  --scout-gold: #f5b301;
  --scout-tan: #d8c9a3;
  --ink: #1d2433;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
}

/* ---------- Navbar ---------- */
.navbar-brand { font-weight: 700; letter-spacing: .3px; }
.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--scout-gold);
  color: var(--scout-navy);
  font-weight: 800;
  margin-right: .5rem;
}

/* ---------- Hero ---------- */
.hero {
  background-image:
    linear-gradient(rgba(15, 38, 80, .55), rgba(15, 38, 80, .65)),
    url('../img/main-hero.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 6rem 0;
}
.hero h1 { font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.hero .lead { color: rgba(255, 255, 255, .9); }

/* ---------- Split choose-a-unit ---------- */
.unit-split .unit-pane {
  position: relative;
  color: #fff;
  padding: 4rem 2rem;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .25s ease, filter .25s ease;
}
.unit-split .unit-pane:hover { filter: brightness(1.06); }
.unit-pane.pack { background: linear-gradient(135deg, var(--scout-blue), #144e86); }
.unit-pane.troop { background: linear-gradient(135deg, var(--scout-green), #1b5e20); }
.unit-pane h2 { font-weight: 800; }
.unit-pane .ages { font-size: .95rem; letter-spacing: .5px; text-transform: uppercase; opacity: .9; }

/* ---------- Section helpers ---------- */
.section { padding: 4.5rem 0; }
.section-tan { background: #f6f1e4; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--scout-green);
}
.fleur { color: var(--scout-gold); }

/* ---------- Info cards ---------- */
.info-card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 .5rem 1.5rem rgba(21, 57, 107, .08);
  height: 100%;
}
.info-card .icon {
  font-size: 1.75rem;
  color: var(--scout-blue);
}

/* ---------- Page banners for unit pages ---------- */
.unit-banner {
  color: #fff;
  padding: 5rem 0;
  min-height: 360px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.unit-banner h1, .unit-banner .lead { text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.unit-banner.pack {
  background-image:
    linear-gradient(90deg, rgba(11,38,74,.92) 0%, rgba(20,78,134,.7) 38%, rgba(20,78,134,.2) 72%, rgba(20,78,134,.05) 100%),
    url('../img/pack-hero.jpg');
}
.unit-banner.troop {
  background-image:
    linear-gradient(90deg, rgba(15,55,20,.92) 0%, rgba(27,94,32,.7) 38%, rgba(27,94,32,.2) 72%, rgba(27,94,32,.05) 100%),
    url('../img/troop-hero.jpg');
}

/* ---------- Buttons ---------- */
.btn-gold {
  background: var(--scout-gold);
  border-color: var(--scout-gold);
  color: var(--scout-navy);
  font-weight: 700;
}
.btn-gold:hover { background: #e0a500; border-color: #e0a500; color: var(--scout-navy); }

/* ---------- News cards ---------- */
.news-card {
  border: none;
  border-left: 5px solid var(--scout-gold);
  border-radius: .75rem;
  box-shadow: 0 .5rem 1.5rem rgba(21, 57, 107, .08);
}
.news-date {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--scout-blue);
  text-transform: uppercase;
}

/* ---------- Map ---------- */
.map-wrap { border-radius: 1rem; overflow: hidden; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12); }
.map-wrap iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,.75); }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: var(--scout-gold); }