/* =========================================================
   Lafayette County — app.css (CLEANED + DE-DUPED)
   Stack: Bootstrap + WOW (animate.css) + VenoBox
   ========================================================= */

/* =========================
   Brand tokens + globals
   ========================= */
:root{
  /* Colors */
  --power-green: #4dbc8d;
  --rich-soil:   #aa5b26;
  --pine-green:  #003e27;
  --bright-sun:  #f7ef6f;
  --page-white:  #f8f4e1;
  --fresh-water: #2790a5;

  /* Fonts */
  --font-body: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading-1: "komu-new-e", var(--font-body);
  --font-heading-2: "sweet-square-pro", var(--font-body);

  /* Watermark */
  --brand-watermark-url: url("/assets/images/tree_spark_75.png");
  --brand-watermark-size: 80px 100px;
  --brand-watermark-opacity: .02;

  /* Transition photo sizing */
  --transition-photo-max: clamp(1200px, 62vw, 1500px);
}

html{ font-synthesis-weight: none; }
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  font-family: var(--font-body);
  color: #10231b;
  background: #fff;
}

a{ text-decoration: underline; }
.bg-pagewhite{ background: var(--page-white); }

img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   Typography
   ========================= */
.kicker{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--power-green);
  margin-bottom: .5rem;
}

.h3-title{
  font-weight: 700;
  color: var(--pine-green);
  margin-bottom: .5rem;
}

/* =========================
   Buttons (site-wide)
   ========================= */
.btn-brand{
  background: var(--power-green);
  border-color: var(--power-green);
  color: #053827;
  font-weight: 700;
  border-radius: 0;
}
.btn-brand:hover{
  background: var(--bright-sun);
  border-color: var(--bright-sun);
  color: #1f2a00;
}

.btn-outline-brand{
  border-color: var(--page-white);
  color: var(--page-white);
  font-weight: 700;
  border-radius: 0;
}
.btn-outline-brand:hover{
  background: var(--page-white);
  color: var(--pine-green);
}

/* =========================
   Header (solid, unified)
   ========================= */
.site-header{
  position: relative;
  background: var(--pine-green);
}

.site-header,
.utility-bar,
.main-nav{
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Logo spanning utility + nav */
.site-brand{
  position: absolute;
  top: 0;
  left: 0;
  min-height: 250px;
  display: flex;
  align-items: center;
  z-index: 1040;
  padding-left: 24px;
}
.site-brand img{
  height: 250px;
  width: auto;
  max-height: none;
}

/* Utility Bar */
.utility-bar{
  background: var(--pine-green);
  color: rgba(248,244,225,.9);
  min-height: 70px;
  display: flex;
  align-items: center;
}
.utility-bar .container{
  display: flex;
  justify-content: flex-end;
}
.utility-row,
.utility-left,
.utility-right{
  display: flex;
  align-items: center;
}

.utility-bar a{
  background: var(--fresh-water);
  color: #fff;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 10px 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  border-radius: 0;
}
.utility-bar a:hover{ background: #1f7f92; }
.utility-bar a:focus-visible{
  outline: 2px solid var(--bright-sun);
  outline-offset: 2px;
}

/* Main nav */
.main-nav{
  background: var(--pine-green);
  color: rgba(248,244,225,.9);
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 180px;
  display: flex;
  align-items: center;
}

.navbar-dark .navbar-nav .nav-link{
  color: rgba(248,244,225,.9);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
}
.navbar-dark .navbar-nav .nav-link:hover{ color: var(--bright-sun); }

/* Dropdown (simple) */
.navbar .dropdown-menu{
  background: #062118;
  border: 0;
  border-radius: 0;
  padding: 8px 0;
}
.navbar .dropdown-item{
  color: rgba(248,244,225,.9);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 18px;
}
.navbar .dropdown-item:hover{
  background: rgba(248,244,225,.08);
  color: var(--bright-sun);
}
.navbar .dropdown-divider{
  border-color: rgba(248,244,225,.15);
}

/* Allow dropdowns to extend outside the navbar */
.main-nav,
.main-nav .navbar,
.main-nav .navbar-collapse{
  overflow: visible !important;
}
.main-nav .dropdown-menu{ z-index: 2000; }

/* Search offcanvas */
.search-canvas{
  background: #04140f;
  color: var(--page-white);
}
.search-form{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.search-form .form-control{
  flex: 1 1 420px;
  background: rgba(248,244,225,.08);
  border: 1px solid rgba(248,244,225,.18);
  color: var(--page-white);
  border-radius: 0;
}
.search-form .form-control::placeholder{ color: rgba(248,244,225,.65); }
.search-label{
  color: rgba(248,244,225,.7);
  font-weight: 700;
  margin-bottom: 8px;
}

/* =========================
   Watermark (header/hero/transition)
   ========================= */
.utility-bar,
.main-nav,
.hero-tn,
.hero-transition{
  position: relative;
  overflow: hidden;
}

.utility-bar::before,
.main-nav::before,
.hero-tn::before,
.hero-transition::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background-image: var(--brand-watermark-url);
  background-repeat: repeat;
  background-size: var(--brand-watermark-size);
  background-position: 0 0;
  background-attachment: fixed;
  opacity: var(--brand-watermark-opacity);
}

.utility-bar > *,
.main-nav > *,
.hero-tn > *,
.hero-transition > *{
  position: relative;
  z-index: 2;
}

/* =========================
   Chips
   ========================= */
.chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 12px;
}
.chip-ghost{
  border: 1px solid rgba(248,244,225,.25);
  color: rgba(248,244,225,.92);
}
.chip-ghost:hover{
  background: rgba(248,244,225,.10);
  color: var(--bright-sun);
}

/* =========================
   HERO
   ========================= */
.hero-tn{
  position: relative;
  overflow: hidden;
  background: var(--pine-green);
  color: rgba(248,244,225,.9);
  margin-top: -10px;
}

.hero-bg{
  position: absolute;
  inset: 0;
  background: var(--pine-green);
  z-index: 0;
}

/* Angled hero elements (shared angle) — title handled separately */
.hero-tn .kicker,
.hero-tn .hero-chips,
.hero-video{
  display: inline-block;
  transform: rotate(-2deg);
  transform-origin: left center;
}

/* Title (always on its own line) */
.hero-title{
  display: block;
  width: 100%;
  transform: rotate(-2deg);
  transform-origin: left center;

  font-family: var(--font-heading-1);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--page-white);
  font-size: clamp(78px, 5.8vw, 140px);
  line-height: .95;
}

.hero-title .hero-outline{
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--page-white);
}

.hero-tn .hero-chips{
  margin-top: 20px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Hero panel */
.hero-panel{
  border-radius: 0;
  padding: 16px;
  background: rgba(248,244,225,1);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 14px 30px rgba(0,0,0,.22);
}

/* Hero video */
.hero-video-link{ display: block; }

.hero-video-inner{
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background: #000;
  border: 1px solid rgba(248,244,225,.25);
}
.hero-video-el{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-video-inner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
  pointer-events: none;
}
.hero-video-play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}
.hero-video-play i{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--fresh-water);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  transition: transform .2s ease, background .2s ease;
}
.hero-video-link:hover .hero-video-play i{
  background: var(--bright-sun);
  color: #1f2a00;
  transform: scale(1.08);
}


/* =========================
   HERO TRANSITION (photo + void)
   ========================= */
.hero-transition{
  background: var(--pine-green);
  padding: 80px 0 100px;
  position: relative;
}

.transition-image{ position: relative; }

.transition-has-overlay{
  display: grid;
  grid-template-columns: minmax(0, var(--transition-photo-max)) minmax(480px, 1fr);
  column-gap: 24px;
  align-items: start;
}

/* Photo row 1 */
.transition-photo{
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: var(--transition-photo-max);
}

/* Copy row 2 under photo */
.transition-copy{
  grid-column: 1;
  grid-row: 2;
  max-width: 720px;
  margin-top: 32px;
  color: rgba(248,244,225,.9);
}
.transition-copy p{
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 16px 0;
}

/* Overlay spans both rows so it doesn't drop */
.transition-overlay{
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;

  width: 100%;
  transform: translateY(-100px);
  position: relative;
  z-index: 10;
  left: -80px;
  top: 60px;
}

.image-flag{
  position: absolute;
  top: 0;
  left: -20px;
  background: var(--rich-soil);
  color: #fff;
  font-family: var(--font-heading-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 14px;
  font-weight: 800;
  padding: 14px 22px;
  transform: translateY(-50%) rotate(-2deg);
  transform-origin: left center;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  z-index: 11;
}

/* Right stack */
.transition-side{
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 500px;
  min-width: 350px;
  margin-left: auto;
}

/* Cards */
.side-card{
  background: var(--rich-soil);
  color: #fff;
  padding: 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
}
.side-card-photo{
  padding: 0;
  overflow: hidden;
}
.side-card-pad{ padding: 14px 18px 18px; }

.side-card h3{
  font-family: var(--font-heading-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 15px;
  margin: 0 0 6px 0;
}
.side-card p{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.9);
}

.side-card-media-right{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.side-card-media-right .side-card-content{ flex: 1; }

.side-card-thumb{
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* =========================
   SECTION NEXT (pillars band)
   ========================= */
.section-next{ padding: 80px 0; }

.section-next-inner{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title,
.section-title-green,
.section-title-soil {
  font-family: var(--font-heading-1);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 28px 0;
  font-size: 4rem;
}
.section-title{ color: var(--page-white); }
.section-title-green{ color: var(--pine-green); }
.section-title-soil{ color: var(--rich-soil); }

.pillars{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 18px;
  margin-bottom: 36px;
}

.pillar{
  background: rgba(248,244,225,.06);
  border: 1px solid rgba(248,244,225,.14);
  padding: 22px;
  border-radius: 14px;
}
.pillar h3{
  font-family: var(--font-heading-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--page-white);
  margin: 0 0 12px 0;
  font-size: 2rem;
}
.pillar img{ margin-bottom: 14px; }
.pillar p{
  color: rgba(248,244,225,.88);
  margin: 0;
  line-height: 1.6;
  font-size: 15px;
}

@media (max-width: 991px){
  .pillars{ grid-template-columns: 1fr; }
  .section-next-inner{ padding: 0 16px; }
}

/* =========================
   BG WASH (driven by JS)
   ========================= */
.bg-wash{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--pine-green);
  transition: background-color 0.08s linear;
}

/* Sections that should show wash behind them */
.hero-transition,
.section-next,
.section-soil,
.section-ig{
  background: transparent !important;
}

/* =========================
   SOIL SECTION (sticky map + vertical slider)
   ========================= */
.section-soil{
  position: relative;
  padding: 120px 0;
}

.soil-wrap{
  display: grid;
  grid-template-columns: minmax(600px, 1.2fr) minmax(360px, 0.8fr);
  gap: 48px;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Map: sticky at top of soil section */
.soil-map{
  position: sticky;
  top: 0;
  align-self: start;
}
.soil-map svg{
  width: 100%;
  height: auto;
  display: block;
  margin-top: -100px; /* your tuned size/position */
}

/* Right column wrapper for indicator */
.soil-right{ position: relative; }

/* Progress indicator (beside panel) */
.soil-indicator{
  position: absolute;
  left: -28px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}
.soil-dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(248,244,225,.65);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.soil-dot.is-active{
  background: var(--bright-sun);
  border-color: var(--bright-sun);
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(247,239,111,.18);
}
.soil-dot:hover{ border-color: rgba(247,239,111,.9); }

/* Panel container: height dictated by active panel */
.soil-panels{ position: relative; }

.soil-panel{
  display: none;
  padding: 28px;
  background: rgba(248,244,225,.06);
  border: 1px solid rgba(248,244,225,.14);
}
.soil-panel.is-active{
  display: block;
  border-color: rgba(247,239,111,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.soil-panel h3{
  font-family: var(--font-heading-1);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 10px 0;
  color: var(--page-white);
  font-size: 3rem;
}
.soil-panel p{
  margin: 0;
  color: rgba(248,244,225,.88);
  line-height: 1.6;
  font-size: 16px;
}

/* Map marker styles */
#town-markers .town-dot{
  fill: rgba(248,244,225,.65);
  transition: transform .2s ease, fill .2s ease;
  transform-origin: center;
}
#town-markers .town-label{
  fill: rgba(248,244,225,.85);
  font-size: 12px;
  font-family: var(--font-body);
}
#town-markers .is-active .town-dot{
  fill: var(--bright-sun);
  transform: scale(1.35);
}
#town-markers .is-active .town-label{
  fill: var(--bright-sun);
  font-weight: 700;
}

/* Soil responsive */
@media (max-width: 991px){
  .soil-wrap{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }
  .soil-map{
    position: relative;
    top: auto;
  }
  .soil-indicator{ display: none; }
}

/* =========================
   Footer
   ========================= */
.site-footer{
  background: #071e16;
  color: rgba(248,244,225,.9);
}
.footer-heading{
  color: var(--bright-sun);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-links a{ color: rgba(248,244,225,.85); }
.footer-links a:hover{ color: var(--power-green); }
.footer-rule{ border-color: rgba(248,244,225,.14); }

/* Footer spark bullet alignment */
.footer-links li{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.spark_bullet{
  width: 14px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

/* =========================
   Interior pages
   ========================= */
body.interior .bg-wash{
  background: linear-gradient(
    180deg,
    var(--pine-green) 0px,
    var(--pine-green) 360px,   /* hold pine through header + interior hero */
    var(--fresh-water) 100%
  );
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


body.interior main{
  padding-bottom: 60px;
}

/* Interior hero */
.interior-hero{
  padding: 56px 0 28px;
  position: relative;
}

.breadcrumbs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(248,244,225,.75);
  font-size: 13px;
  margin-bottom: 14px;
}
.breadcrumbs a{ color: rgba(248,244,225,.85); }
.breadcrumbs a:hover{ color: var(--bright-sun); }
.breadcrumbs .current{ color: rgba(248,244,225,.95); font-weight: 700; }

.interior-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}

.interior-hero-copy{
  padding-bottom: 24px; /* keeps balance if chips removed */
}

.interior-title{
  font-family: var(--font-heading-1);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--page-white);
  font-size: clamp(44px, 4.8vw, 86px);
  line-height: .92;
  margin: 50px 0 10px 0;
}

.interior-lead{
  color: rgba(248,244,225,.9);
  font-size: 18px;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 14px 0;
}

.interior-hero-media{
  position: relative;
}

.interior-hero-img{
  width: 100%;
  height: auto;
  border: 1px solid rgba(248,244,225,.14);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  max-height: 175px;
}

/* Interior body layout */
.interior-body{
  padding: 28px 0;
}

.interior-layout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

.interior-sidebar{
  position: sticky;
  top: 140px;
  align-self: start;
}

.side-nav{
  padding: 18px;
  background: var(--rich-soil);
  border: 1px solid rgba(248,244,225,.14);
  margin-bottom: 16px;
}

.side-nav-title{
  font-family: var(--font-heading-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bright-sun);
  font-size: 16px;
  margin: 0 0 10px 0;
}

.side-nav-link{
  display: block;
  padding: 10px 0;
  color: rgba(248,244,225,.9);
  border-bottom: 1px solid rgba(248,244,225,.10);
}
.side-nav-link:last-child{ border-bottom: 0; }
.side-nav-link:hover{ color: var(--bright-sun); }

.side-callout{
  padding: 18px;
  background: var(--rich-soil);
  border: 1px solid rgba(248,244,225,.14);
}
.side-callout h3{
  font-family: var(--font-heading-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--page-white);
  font-size: 16px;
  margin: 0 0 8px 0;
}
.side-callout p{
  color: rgba(248,244,225,.85);
  margin: 0 0 12px 0;
  line-height: 1.55;
}

/* Content blocks (light cards) */
.interior-content{
  min-width: 0;
}
.content-block{
  padding: 22px;
  background: var(--page-white);
  border: 1px solid rgba(0,0,0,.08);
  margin-bottom: 18px;
}

.content-block h2{
  font-family: var(--font-heading-2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #000;
  font-size: 1.35rem;
  margin: 0 0 12px 0;
  border-top: 2px solid #2790a530;
  padding-top: 24px;
}

.content-block h2:first-child {
  font-family: var(--font-heading-2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #000;
  font-size: 1.35rem;
  border-top: 0 !important;
  margin: 0 0 12px 0;
}

/* Subheadings (schools, districts, etc.) */
.content-block h3{
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
  font-size: 1rem;      /* clearly subordinate */
  margin: 20px 0 8px 0;
}

.content-block p{
  color: #111;
  margin: 0 0 24px 0;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 991px){
  .interior-hero-grid{
    grid-template-columns: 1fr;
  }
  .interior-layout{
    grid-template-columns: 1fr;
  }
  .interior-sidebar{
    position: relative;
    top: auto;
  }
}

/* =========================================================
   Global tree overlay: top half + fade out
   ========================================================= */
body{
  position: relative; /* allow body::before overlay */
}

body::before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: 55vh;                 /* ~half page */
  pointer-events: none;
  z-index: 0;                   /* sits above bg-wash (-1) */

  background-image: var(--brand-watermark-url);
  background-repeat: repeat;
  background-size: var(--brand-watermark-size);
  background-position: 0 0;
  background-attachment: fixed;
  opacity: var(--brand-watermark-opacity);

  /* Fade out toward bottom */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* Ensure site content stays above the overlay */
.site-header,
main,
footer{
  position: relative;
  z-index: 1;
}

/* Turn off old per-section watermark layers (we now use body::before) */
.utility-bar::before,
.main-nav::before,
.hero-tn::before,
.hero-transition::before{
  content: none !important;
}

body.interior::before{
  content: none !important;
}

.interior-content h2 {
	margin-top:30px;
}

/* Ensure dropdown menus sit above all content */
.main-nav .dropdown-menu{
  z-index: 9999;
}

.main-nav{
  position: relative;
  z-index: 500;
}

/* Force header/nav above all page content */
.site-header{
  position: relative;
  z-index: 10000;
}

.utility-bar{
  position: relative;
  z-index: 10001;
}

.main-nav{
  position: sticky;
  top: 0;
  z-index: 10002;
}

/* Dropdown above everything */
.main-nav .dropdown-menu{
  z-index: 10003 !important;
}

.hero-tn,
.hero-transition,
.section-soil,
.section-next{
  position: relative;
  z-index: 1;
}

/* Keep the top-left logo above utility/nav */
.site-brand{
  position: absolute;
  z-index: 10004; /* higher than .main-nav (10002) and dropdown (10003) */
}

.site-brand{ z-index: 10010; }

/* Inline right-side map embeds inside content blocks */
.inline-map{
  float: right;
  width: 380px;
  max-width: 45%;
  margin: 6px 0 16px 18px;
  border: 1px solid rgba(0,0,0,.08);
}

.inline-map iframe{
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
}

/* Clear floats for headings/sections */
.content-block::after{
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 991px){
  .inline-map{
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 18px 0;
  }
  .inline-map iframe{
    height: 300px;
  }
}

/* Ensure content below inline maps clears properly */
.inline-map{
  float: right;
}

/* Force clear after each logical block */
.content-block h2,
.content-block h3,
.content-callout{
  clear: both;
}

/* Address + map stay together */
.school-contact{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 18px;
  align-items: start;
}

/* Map sizing */
.school-contact-map iframe{
  width: 100%;
  height: 240px;
  border: 0;
  display: block;
}

/* Mobile stack */
@media (max-width: 991px){
  .school-contact{
    grid-template-columns: 1fr;
  }
  .school-contact-map iframe{
    height: 300px;
  }
}

.utility-bar{
  width: 100%;
  background: var(--fresh-water);
}

.utility-inner{
  max-width: 1600px;     /* same as section-next-inner */
  margin: 0 auto;
  padding: 0 24px;       /* matches site side padding */
  display: flex;
  align-items: center;
  min-height: 70px;
}

.utility-row{
  width: 100%;
  display: flex;
  justify-content: center;
}

.utility-left{
  display: flex;
  gap: 14px;
}

.main-nav .navbar-collapse{
  justify-content: center;
}


/* =========================================================
   NAV OVERRIDE PATCH (keeps existing styles)
   Fixes 1199px overlap for navbar-expand-xl
   ========================================================= */

/* 1) Match breakpoints to navbar-expand-xl */
@media (min-width: 1200px){
  /* desktop logo offset stays */
  .utility-bar .container,
  .main-nav .container,
  .main-nav .container-fluid{
    padding-left: 290px;
  }

  /* center nav reliably */
  .main-nav .navbar-collapse{
    display: flex !important;
    flex-grow: 1;
    justify-content: center;
    margin-top: 0 !important; /* kill any old -150px */
  }
  .main-nav .navbar-nav{
    margin: 0 auto !important;
  }
}

@media (max-width: 1199px){
  /* 2) remove desktop logo offset on mobile/tablet */
  .utility-bar .container,
  .main-nav .container,
  .main-nav .container-fluid{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 3) hide utility bar on mobile if you’re merging it into the hamburger */
  .utility-bar{ display: none !important; }

  /* 4) responsive logo size */
  .site-brand{
    position: relative !important;
    min-height: auto !important;
    padding: 8px 16px !important;
    height: auto !important;
  }
  .site-brand img{
    height: 150px !important;
    width: auto;
    max-height: none;
  }

  /* 5) hamburger top-right breathing room */
  .main-nav .navbar{
    position: relative;  /* anchor for collapse drawer */
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .main-nav .navbar-toggler{
    margin-left: auto;
    margin-top: 6px;
    margin-right: 8px;
  }

  /* 6) mobile drawer panel aligned right */
  .main-nav .navbar-collapse{
    position: absolute !important;
    top: 100%;
    right: 0;
    left: auto !important;
    width: 100%;
    max-width: 340px;
    background: #062118;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    padding: 10px 0;
  }

  /* 7) stack nav links cleanly */
  .main-nav .navbar-nav{
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-nav .navbar-nav .nav-item{ width: 100%; }
  .main-nav .navbar-nav .nav-link{
    padding: 12px 22px !important;
  }

  /* 8) mobile utility block (if present) should be on top */
  .mobile-utility .dropdown-item{
    padding: 12px 22px;
  }
  .mobile-utility .dropdown-divider{
    border-color: rgba(248,244,225,.18);
    margin: 10px 0;
  }

  /* 9) dropdown menus expand inside the drawer */
  .main-nav .dropdown-menu{
    position: static !important;
    float: none !important;
    box-shadow: none;
  }
}

/* =========================================================
   HEADER / NAV RESPONSIVE (navbar-expand-xl aligned)
   Desktop: >=1200px   Mobile/tablet: <=1199px
   ========================================================= */

/* Base (applies to all sizes) */
.utility-bar .container,
.main-nav .container,
.main-nav .container-fluid{
  padding-left: 24px;
  padding-right: 24px;
}

/* Base logo (desktop default) */
.site-brand{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10010;
  padding-left: 24px;
}
.site-brand img{
  height: 250px;
  width: auto;
  max-height: none;
  display: block;
}

/* Keep dropdowns clickable and above content */
.main-nav{ z-index: 10002; }
.main-nav .dropdown-menu{ z-index: 10003; }

/* =========================
   DESKTOP (>=1200px)
   ========================= */
@media (min-width: 1200px){

  /* Clear the logo footprint */
  .utility-bar .container,
  .main-nav .container,
  .main-nav .container-fluid{
    padding-left: 290px;
  }

  /* Your tightened nav height */
  .main-nav{
    min-height: 120px;
    padding-top: 0;
  }

  /* Center nav */
  .main-nav .navbar-collapse{
    display: flex !important;
    flex-grow: 1;
    justify-content: center;
    margin-top: 0 !important; /* kills old -150px behavior */
    position: static !important;
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: none;
  }

  .main-nav .navbar-nav{
    margin: 0 auto !important;
  }

  /* Make dropdown menus behave normally on desktop */
  .main-nav .dropdown-menu{
    position: absolute;
  }
}

/* =========================
   MOBILE/TABLET (<=1199px)
   ========================= */
@media (max-width: 1199px){

  /* Logo becomes responsive (your requirement) */
  .site-brand{
    position: relative !important;
    padding: 8px 16px !important;
    min-height: auto !important;
  }
  .site-brand img{
    height: 150px !important;
  }

  /* Utility bar hidden because it’s merged into hamburger */
  .utility-bar{
    display: none !important;
  }

  /* Remove any desktop logo offset */
  .utility-bar .container,
  .main-nav .container,
  .main-nav .container-fluid{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hamburger placement */
  .main-nav .navbar{
    position: relative;        /* anchor the drawer */
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .main-nav .navbar-toggler{
    margin-left: auto;
    margin-top: 6px;
    margin-right: 8px;
  }

  /* Right-side drawer (collapse panel) */
@media (max-width: 1199px){
  .main-nav .navbar-collapse{
    position: fixed !important;
    top: 64px;              /* aligns under logo / header */
    right: 8px;
    left: auto !important;
    width: calc(100% - 16px);
    max-width: 340px;
    height: auto;           /* ✅ content-driven */
    max-height: calc(100vh - 80px); /* safety cap */
    overflow-y: auto;
    background: #062118;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    padding: 12px 0;
    border-radius: 8px;
    z-index: 10050;
  }
}

 /* Push content down a bit so it doesn't sit under the top edge */
  .main-nav .navbar-collapse .navbar-nav{
    margin-top: 6px !important;
  }
  /* Stack menu items full width */
  .main-nav .navbar-nav{
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-nav .navbar-nav .nav-item{
    width: 100%;
  }
  .main-nav .navbar-nav .nav-link{
    padding: 12px 22px !important;
  }

  /* Utility links INSIDE the menu (top of drawer) */
  .mobile-utility .dropdown-item{
    padding: 12px 22px;
    color: rgba(248,244,225,.92);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .mobile-utility .dropdown-item:hover{
    background: rgba(248,244,225,.08);
    color: var(--bright-sun);
  }
  .mobile-utility .dropdown-divider{
    border-color: rgba(248,244,225,.18);
    margin: 10px 0;
  }

  /* Dropdowns expand inside drawer */
  .main-nav .dropdown-menu{
    position: static !important;
    float: none !important;
    box-shadow: none;
  }

}

@media (max-width: 1199px){

  /* Make the nav the positioning context */
  nav.main-nav{
    position: sticky;
    top: 0;
  }
  nav.main-nav .navbar{
    position: relative !important;
  }

  /* Bulletproof selector for the hamburger button */
  nav.main-nav button[data-bs-toggle="collapse"]{
    position: absolute !important;
    top: 10px !important;
    right: 5px !important;
    margin: 0 !important;
    z-index: 10060 !important;
  }
}

@media (max-width: 1199px){
  nav.main-nav button[data-bs-toggle="collapse"]{
    position: fixed !important;
    top: 10px !important;
    right: 5px !important;
    z-index: 999999 !important;  /* 👈 way above everything */
    pointer-events: auto !important;
  }
}

body::before{
  pointer-events: none !important;
}

@media (max-width: 1199px){
  #mainNav.collapse.navbar-collapse{
    z-index: 999990 !important; /* below button, still above page */
  }
}

/* =========================================================
   Mobile: make toggler clickable + prevent logo layer blocking taps
   ========================================================= */
@media (max-width: 1199px){

  /* 1) Logo should NOT be full-width on mobile */
  .site-brand{
    position: relative !important;
    display: inline-flex !important; /* shrink to content width */
    width: auto !important;
    max-width: calc(100% - 60px);    /* leaves room for hamburger */
    z-index: 1 !important;
  }

  /* 2) Put the hamburger at top-right and ABOVE everything */
  header.site-header .navbar-toggler{
    position: fixed !important;
    top: 10px !important;
    right: 5px !important;
    z-index: 20000 !important;
    pointer-events: auto !important;
    margin: 0 !important;
  }

  /* 3) Make sure nothing in the header is stealing pointer events */
  header.site-header{
    position: relative;
  }
}

@media (max-width: 1199px){

  .mobile-nav-close{
    display: block;
    width: 100%;
    text-align: right;
    padding: 10px 22px 6px;
    font-size: 28px;
    font-weight: 700;
    color: rgba(248,244,225,.9);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .mobile-nav-close:hover{
    color: var(--bright-sun);
  }
}

@media (max-width: 1199px){

  /* Pull hero content up closer to the header */
  .interior-hero{
    padding-top: 0px;   /* was 56px */
  }

  /* Remove extra spacing above title */
  .interior-hero-copy{
    padding-bottom: 12px;
  }

  /* Reduce title margin */
  .interior-title{
    margin-top: 0;
    margin-bottom: 6px;
  }

  .interior-lead{
    margin-bottom: 10px;
  }
}

@media (max-width: 1199px){
  /* Hide the toggler whenever the menu is open */
  .navbar-toggler[aria-expanded="true"]{
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Hide mobile-only indicators by default */
.show_mobile{
  display: none;
}

/* Show only on mobile / tablet */
@media (max-width: 1199px){
  .show_mobile{
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    opacity: 0.75;
    font-size: 0.85em;
  }
}

.int_images {
	float: right;
	width: 100%;
	max-width: 500px;
	padding: 10px;
	border: 2px solid #0000001B;
	margin: 0 0 20px 20px;
	background: #fff;
  	transform: rotate(-2deg);
  	transform-origin: left center;
	}
	
.side-card a {
	color: var(--bright-sun);
	}

.side-card a:hover {
	text-decoration: underline;
	}
	
.copyright a {
	color: var(--bright-sun);
	}

.copyright a:hover {
	text-decoration: underline;
	}
	
.soil-panel a {
	color: var(--bright-sun);
	}

.soil-panel a:hover {
	text-decoration: underline;
	}
	
/* =========================================================
   HERO TRANSITION — Responsive Fix Pack
   ========================================================= */

/* Base: keep the grid but make it more flexible */
.transition-has-overlay{
  display: grid;
  grid-template-columns: minmax(0, var(--transition-photo-max)) minmax(360px, 1fr);
  column-gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

/* Ensure photo + copy stay in left column, overlay stays right */
.transition-photo{
  grid-column: 1;
  grid-row: 1;
}

.transition-copy{
  grid-column: 1;
  grid-row: 2;
}

/* Keep overlay spanning both rows so it never “drops” */
.transition-overlay{
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;

  /* Make offsets responsive instead of hard-coded */
  transform: translateY(clamp(-80px, -6vw, -20px));
  left: clamp(-60px, -4vw, 0px);
  top: clamp(30px, 3vw, 70px);
}

/* Make the card stack adapt */
.transition-side{
  max-width: clamp(340px, 28vw, 520px);
  min-width: 0;         /* IMPORTANT: prevents forcing overflow */
  margin-left: auto;
}

@media (max-width: 1199px){

  .hero-transition{
    padding: 56px 0 70px;
  }

  /* Stack the layout */
  .transition-has-overlay{
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  /* Put overlay below the image (no floating offsets) */
  .transition-overlay{
    grid-column: 1;
    grid-row: 3;
    transform: none;
    left: 0;
    top: 0;
  }

  .transition-side{
    max-width: 520px;
    margin-left: 0;
  }

  /* Keep copy immediately under photo */
  .transition-copy{
    grid-column: 1;
    grid-row: 2;
    margin-top: 18px;
  }

  /* Flag stays pinned and doesn’t overlap oddly */
  .image-flag{
    left: 0;
  }
}

@media (max-width: 1199px){

  /* Stack the grid */
  .transition-has-overlay{
    grid-template-columns: 1fr !important;
    row-gap: 18px;
  }

  /* Keep photo first */
  .transition-photo{
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  /* Copy stays under photo */
  .transition-copy{
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
  }

  /* Cards go BELOW photo + copy */
  .transition-overlay{
    grid-column: 1 !important;
    grid-row: 3 !important;
    position: static !important;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* Make card stack full width on mobile */
  .transition-side{
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 1199px){

  /* Let the video define its own height */
  .hero-video-inner{
    min-height: 0 !important;
    height: auto !important;
  }

  /* Make sure the video itself controls the box */
  .hero-video-el{
    display: block;
    width: 100%;
    height: auto;
  }

}

.hero-video-inner{
  aspect-ratio: 16 / 9;
}