/* bcc-site.css
 * Shared chrome for every public-site page: brand variables, base resets,
 * nav, buttons, and footer. Page-specific sections (hero, content grids,
 * etc.) stay in each page's own <style> block. Link this before any
 * page-specific <style> tag so page styles can still override where needed.
 */

/* Self-hosted Oswald/Inter -- these are the exact same open-source font
   files Google Fonts serves (both under the SIL Open Font License, free
   to redistribute), just served from this site's own assets/fonts/
   folder instead of fonts.googleapis.com/fonts.gstatic.com. No external
   dependency, no third-party request, identical visual result. Remove
   any <link href="https://fonts.googleapis.com/..."> tag from a page
   once this stylesheet is loaded -- they're no longer needed. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/oswald-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/oswald-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/oswald-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}

:root {
  --yellow: #FDEE00;
  --black: #101010;
  --gold: #857B11;
  --off-white: #F7F6F1;
  --gray: #4A4A46;
  --line: #DEDCD0;
  /* Shared corner rounding for content photos across the site (home page
     split sections, trainers page entries, etc.) -- each page's own
     page-specific photo class still lives locally per this file's own
     convention above, but points here for the actual value so every page
     stays in sync without duplicating the number. */
  --photo-radius: 16px;

  /* Theme-aware tokens for the whole page (chrome + content sections) --
     default to the existing light look. Sections meant to always stay
     black/yellow regardless of theme (hero, page-header, trainers, cta,
     stats) keep using --black/--yellow directly, unaffected by this. */
  --page-bg: var(--off-white);
  --page-text: var(--black);
  /* Alternate "light band" surface for sections that intentionally break
     out of the plain page background (the second split section, the
     resource teaser, the email opt-in box) -- kept distinct from
     --page-bg so those still read as a subtly different band in both
     themes, rather than blending into the page. */
  --surface: #EFEDE2;
}

/* Dark mode -- body starts with this class already in the page HTML
   (matches the CRM: dark by default, no flash of light before JS runs)
   and theme-toggle.js removes it if the visitor's saved choice is light.
   --yellow/--gold/--black stay fixed (nav-cta, logo-box, hero, trainers,
   stats, cta are all fixed brand-black/yellow sections in both themes);
   only the tokens that need to actually invert for readability are
   redefined here.
   Deliberately NOT nearly-pure-black: a flat near-black field next to
   light text causes a mild halation/glow effect that gets tiring on
   text-heavy pages. --page-bg sits at a soft charcoal instead, --page-text
   is an off-white rather than stark white for the same reason, and
   --surface is a clearly lighter step up from --page-bg (not just a few
   points) so cards/bands actually read as elevated rather than nearly
   blending into the page. */
body.dark-mode {
  --page-bg: #18181C;
  --page-text: #E8E6DC;
  --line: #34333B;
  --gray: #A6A59B;
  --surface: #232228;
}

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

body {
  font-family: 'Inter', sans-serif;
  color: var(--page-text);
  background: var(--page-bg);
  line-height: 1.5;
}

h1, h2, h3, .display {
  font-family: 'Oswald', sans-serif;
  text-transform: none;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- NAV ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--page-bg);
  position: relative;
  z-index: 100;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; gap: 20px; }
.logo-mark {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.logo-mark img { display: block; max-width: none; }
.logo-box {
  width: 44px; height: 44px;
  background: var(--black);
  color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.logo-mark span {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 18px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
  flex-wrap: nowrap;
  /* Deliberately NOT min-width: 0 / flex-shrink here. This container's own
     children (links, the dropdown) are flex-shrink: 0 -- they refuse to
     shrink -- so if the flex algorithm were allowed to shrink .nav-links
     itself below that content's real width, the links would overflow
     their own box and visually spill onto whatever sits next in the row
     (the CTA button). Keeping this at its natural size means that if the
     row truly doesn't fit, the whole .nav row overflows honestly instead
     of one element bleeding into another. */
  flex-shrink: 0;
}
.nav-links a {
  color: var(--page-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-links a:visited {
  color: var(--page-text);
}

/* ---------- NAV DROPDOWN (click-to-open only; see nav-mobile.js) ---------- */
.nav-dropdown {
  position: relative;
  flex-shrink: 0;
}
.nav-dropdown-toggle {
  background: none;
  border: none;
  font: inherit;
  font-size: inherit;
  color: var(--page-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  white-space: nowrap;
}
.nav-dropdown-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.nav-dropdown-arrow::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.nav-dropdown.nav-dropdown-open .nav-dropdown-arrow::before {
  transform: rotate(-135deg);
}
.nav-dropdown-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 16px;
  background: var(--page-bg);
  border: 1px solid var(--line);
  min-width: 170px;
  padding: 6px 0;
  z-index: 200;
}
/* Click-to-open only (via nav-mobile.js), deliberately -- NOT
   hover-based. A :hover rule here would seem convenient, but there's a
   real gap (this menu's own margin-top below the toggle button) that
   the cursor must cross to reach it; the instant the mouse leaves the
   toggle's own small box during that crossing, :hover drops and the
   menu vanishes before a click on a child link can land. The
   class-based rule below has no such gap problem, since it doesn't
   depend on continuous mouse position at all. */
.nav-dropdown.nav-dropdown-open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu a {
  padding: 11px 18px;
  white-space: nowrap;
  color: var(--page-text);
  text-decoration: none;
}
.nav-dropdown-menu a:visited {
  color: var(--page-text);
}
.nav-dropdown-menu a:hover {
  background: var(--line);
}

.nav-cta {
  background: var(--black);
  color: var(--yellow);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:visited {
  color: var(--yellow);
}
/* A second, identical CTA link lives inside .nav-links in the markup
   (last item) specifically for the mobile dropdown -- hidden here by
   default so desktop only ever shows the one in the header bar itself. */
.nav-links-cta {
  display: none;
}

/* ---------- MOBILE NAV TOGGLE ---------- */
.nav-mobile-toggle {
  display: none; /* shown only below the 1100px breakpoint, see below */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-mobile-toggle svg {
  width: 24px;
  height: 24px;
  stroke: var(--page-text);
}

/* ---------- THEME TOGGLE ---------- */
/* Rendered by nav_helpers.php's bcc_render_theme_toggle(), behavior in
   assets/js/theme-toggle.js. Sits in the main nav row next to the
   hamburger button -- NOT inside .nav-links -- so it's always visible at
   every viewport width (desktop and mobile) instead of competing for
   space with the link list, which was already tight before this button
   existed. Icon-only, sized like .nav-mobile-toggle, for the same
   reason: minimal footprint in an already-crowded row. The destination
   label ("Light"/"Dark") still exists in the markup for screen readers
   but is visually hidden -- the icon alone carries it visually. */
/* Groups the theme toggle and the hamburger together as ONE flex item in
   .nav .wrap. Without this, once .nav-links and .nav-cta both disappear
   on mobile (display: none), only the logo, toggle, and hamburger are
   left as flex items -- and .nav .wrap's justify-content: space-between
   spreads those three evenly across the bar, stranding the toggle alone
   in the middle instead of next to the hamburger. */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  /* Fixed black fill (not theme-aware) -- same fixed-brand treatment as
     nav-cta and the logo-box, so the icon has real contrast in both
     themes instead of just showing the nav's own background color
     through a transparent button (which washed out in light mode). */
  background: var(--black);
  border: 1px solid var(--black);
  border-radius: 50%;
  color: var(--yellow);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  filter: brightness(1.3);
}
.theme-toggle-label {
  /* Visually hidden, still readable by screen readers/accessibility tools. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- BUTTONS ---------- */
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary, .btn-secondary {
  padding: 15px 28px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
}
.btn-primary { background: var(--yellow); color: var(--black); }
.btn-secondary { background: transparent; color: #fff; border: 1px solid #504F49; }

/* ---------- FOOTER ---------- */
footer {
  background: var(--black);
  color: #8A8980;
  padding: 0 0 30px;
  font-size: 14px;
}
/* Ornamental divider rendered by bcc_render_public_footer() (nav_helpers.php)
   at the top of every page's footer -- marks where the footer starts when
   the section right above it is also solid black (e.g. the .cta banner on
   index.php/program.php), which otherwise blend together with no visible
   seam. Two gold hairlines fading toward the center, with the site's icon
   mark (favicon-270.png -- the plain icon/tile crop, no wordmark, since the
   full logo already appears in the nav directly above) as the centerpiece. */
.footer-divider {
  /* Explicit width so this fills its slot in the parent .wrap's
     "justify-content: space-between" flex row (that rule was written for
     the copyright/nav row below and would otherwise shrink a lone item
     like this one down to its content size) -- and so its own flex:1
     children (the two hairlines below) actually have room to grow instead
     of collapsing toward zero width. */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 40px;
  margin-bottom: 20px;
}
.footer-divider::before,
.footer-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}
.footer-divider::after {
  background: linear-gradient(to left, transparent, var(--gold));
}
.footer-divider-icon {
  display: block;
  height: 44px;
  width: auto;
  opacity: 0.92;
  flex-shrink: 0;
}
/* Centered footer (Sep 24 2026): copyright line on top, links centered
   below it, instead of copyright left / links right. The links row's own
   inline style (in bcc_render_public_footer()) only sets flex + gap, so
   justify-content here centers it, and each wrapped line of links stays
   centered on narrow screens. The divider's .wrap is also a column item
   here; .footer-divider's own width: 100% keeps it full width. */
footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
footer .wrap > div { justify-content: center; }
footer a { color: #C9C8BE; text-decoration: none; }

/* ---------- EMAIL OPT-IN (shared across any page using this section) ---------- */
.optin-section {
  max-width: 640px;
  margin: 48px auto 0;
  padding: 32px;
  background: var(--surface);
  text-align: left;
}
.optin-section h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}
.optin-section p {
  color: var(--gray);
  font-size: 15px;
  margin-bottom: 20px;
}
.optin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.optin-form input[type="text"],
.optin-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  background: #fff;
}
.optin-form-email {
  margin-bottom: 16px;
}
.optin-website-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.optin-message {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
}
.optin-message.success { color: #2a8a5a; }
.optin-message.error { color: #b8433a; }

@media (max-width: 480px) {
  .optin-form-row { grid-template-columns: 1fr; }
}


@media (max-width: 1100px) {
  .nav-mobile-toggle { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--page-bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 32px 16px;
    overflow-x: visible;
    z-index: 50;
  }
  .nav-links.nav-mobile-open {
    display: flex;
  }
  .nav-links a {
    padding: 14px 0;
    border-top: 1px solid var(--line);
    white-space: normal;
  }
  .nav-links a:first-child {
    border-top: none;
  }

  /* On mobile, the header's own CTA is hidden and a second, identical
     CTA link that lives inside .nav-links (last item, see each page's
     markup) shows instead, inside the dropdown panel -- keeps the
     collapsed header itself uncluttered (just logo + hamburger). */
  .nav > .wrap > .nav-cta {
    display: none;
  }
  .nav-links-cta {
    display: block;
    margin-top: 14px;
    text-align: center;
  }
  .nav-links a.nav-links-cta {
    border-top: none;
    padding: 12px 22px;
    color: var(--yellow);
  }
  .nav-links a.nav-links-cta:visited {
    color: var(--yellow);
  }

  /* Nav dropdown on mobile: no hover-flyout (doesn't make sense in a
     vertical list) -- the toggle button matches a plain nav link's
     look, and tapping it expands its children inline, indented,
     directly below it (see nav-mobile.js for the click-toggle). */
  .nav-dropdown {
    width: 100%;
  }
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    font-size: inherit;
  }
  .nav-dropdown:first-child .nav-dropdown-toggle {
    border-top: none;
  }
  .nav-dropdown-menu {
    position: static;
    display: none;
    border: none;
    background: none;
    margin-top: 0;
    padding: 0 0 0 18px;
    min-width: 0;
  }
  .nav-dropdown.nav-dropdown-open .nav-dropdown-menu {
    display: flex;
  }
  .nav-dropdown-menu a {
    padding: 12px 0;
    border-top: 1px solid var(--line);
    white-space: normal;
  }
}

/* ---------- DARK MODE: NAV BUTTONS (Sep 24 2026) ----------
   The "Find a Camp Near You" button and the theme toggle are fixed
   brand-black in both themes (see their rules above). On the light
   header that reads as a strong black button, but on dark mode's
   charcoal header (#18181C) black-on-charcoal nearly disappears -- only
   the yellow text shows, not the button itself. In dark mode the CTA
   flips to yellow-with-black (the site's standard primary-button look,
   same as .btn-primary), and the toggle circle gets a visible edge.
   Light mode is unchanged. */
body.dark-mode .nav-cta,
body.dark-mode .nav-cta:visited {
  background: var(--yellow);
  color: var(--black);
}
body.dark-mode .nav-cta:hover { filter: brightness(0.92); }
body.dark-mode .theme-toggle-btn {
  background: #232228;
  border-color: #3A3940;
}
@media (max-width: 1100px) {
  /* The mobile menu's duplicate CTA sets its text yellow explicitly;
     match the flipped button above. */
  body.dark-mode .nav-links a.nav-links-cta,
  body.dark-mode .nav-links a.nav-links-cta:visited {
    color: var(--black);
  }
}


/* ---------- ALWAYS-VISIBLE SCROLLBAR (Sep 24 2026) ----------
   Always show the vertical scrollbar, whether or not the page scrolls.
   Keeps every page the same width -- a page that starts short and grows
   while loading (camp cards, images, forms) no longer gains a scrollbar
   partway through and nudges the centered layout sideways, and short and
   long pages line up exactly.
   Replaces an earlier `scrollbar-gutter: stable`, which reserved the
   scrollbar's space even on pages that don't scroll -- once short pages
   (e.g. unsubscribe) filled the screen exactly, that space showed as an
   empty strip on the right where the nav line and black footer stopped
   short of the edge. A real (inactive) scrollbar fills that space instead.
   No effect on phones/Macs with overlay scrollbars, which take no space. */
html { overflow-y: scroll; }

/* =====================================================================
   The modal card reuses .optin-section, so it automatically gets the
   same background/border/text colors as the on-page opt-in box in both
   light and dark mode. This block only handles the overlay and layout.
   ===================================================================== */
 
dialog.optin-modal {
  /* <dialog> centers itself via margin:auto; the global
     "* { margin: 0 }" reset near the top of this file zeroes that and
     pins the modal top-left. !important + the dialog.class selector
     restore the centering regardless of rule order. */
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  height: fit-content;
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  width: calc(100% - 32px);
  max-width: 520px;
}
.optin-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.optin-modal .optin-modal-card {
  position: relative;
  margin: 0;
  text-align: center;
}
.optin-modal .optin-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: 0;
  padding: 4px 8px;
  font-size: 28px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.optin-modal .optin-modal-close:hover,
.optin-modal .optin-modal-close:focus-visible {
  opacity: 1;
}
.optin-modal .optin-modal-ok {
  margin-top: 20px;
}
.optin-modal[open] {
  animation: optin-modal-in 0.18s ease-out;
}
@keyframes optin-modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .optin-modal[open] { animation: none; }
}

/* ---------- HOVER / FOCUS STATES (Oct 2 2026) ----------
   Buttons and links had no hover feedback anywhere on the site. This adds
   it in one place for every page, without changing how anything looks at
   rest:
   - Yellow buttons (.btn-primary, and .nav-cta in dark mode): the yellow
     deepens slightly and the button lifts 1px with a soft shadow. Done with
     a brightness filter rather than a new color, so it stays correct
     wherever the button sits.
   - Black buttons (.nav-cta in light mode): brighten instead, the same
     treatment .theme-toggle-btn already uses -- darkening black does
     nothing visible. Dark mode keeps its existing
     "body.dark-mode .nav-cta:hover" rule above (higher specificity, so it
     still wins over this one).
   - Outline button (.btn-secondary, the hero's "See the Program"): fills
     lightly and picks up the brand yellow.
   - Text links (nav links, dropdown toggle, footer links): change color.
     Gold in light mode; yellow in dark mode, since --gold on the charcoal
     header is too low-contrast to read as a hover.
   Keyboard users get the same states via :focus-visible plus a gold
   outline. Visitors with "reduce motion" on get the color changes without
   the lift. Page-specific links (index.php's split-link, featured-link,
   etc.) carry their own hover rules in each page's <style> block, per this
   file's convention. */
.btn-primary,
.btn-secondary,
.nav-cta {
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
              background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(0.94);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.nav-cta:hover,
.nav-cta:focus-visible {
  filter: brightness(1.35);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--yellow);
  color: var(--yellow);
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-secondary:active,
.nav-cta:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Text links */
.nav-links a:not(.nav-cta),
.nav-dropdown-toggle,
footer a {
  transition: color 0.15s ease;
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus-visible,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible {
  color: var(--gold);
}
body.dark-mode .nav-links a:not(.nav-cta):hover,
body.dark-mode .nav-links a:not(.nav-cta):focus-visible,
body.dark-mode .nav-dropdown-toggle:hover,
body.dark-mode .nav-dropdown-toggle:focus-visible {
  color: var(--yellow);
}
footer a:hover,
footer a:focus-visible {
  color: var(--yellow);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondary, .nav-cta { transition: none; }
  .btn-primary:hover, .btn-secondary:hover, .nav-cta:hover,
  .btn-primary:focus-visible, .btn-secondary:focus-visible, .nav-cta:focus-visible { transform: none; }
}