/* ----------------------------------------------------------------
   Custom CSS
   Add all your Custom Styled CSS here for New Styles or
   Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

html {
  scroll-behavior: smooth;
}

/* =============================
   Page: contact.html
   Component: cgs-contact
   Purpose: Contact details + email button + map
   ============================= */

body.page-contact {
  --cgs-green: #133a3a;
  --cgs-gold: #f5d26b;
  --cgsgold: var(--cgs-gold);
  --ink: var(--cgs-green);
  --bg: #ffffff;
}

/* Contact area basics */
.cgs-contact .card {
  background: var(--bg);
}
.cgs-contact address {
  font-style: normal;
  line-height: 1.6;
}

/* Default buttons */
.cgs-contact .btn:not(.btn-cgs-email):not(.btn-outline-dark) {
  background: var(--cgs-gold);
  color: var(--cgs-green);
  border: 0;
}
.cgs-contact .btn:hover {
  filter: brightness(0.95);
}

/* Map frame */
.cgs-map-frame iframe {
  border: 0;
  width: 100%;
  height: 100%;
}

/* Email button */
.btn-cgs-email {
  background-color: var(--cgs-gold);
  color: var(--cgs-green);
  padding: 0.6rem 1.25rem;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.btn-cgs-email:hover,
.btn-cgs-email:focus {
  background-color: var(--cgs-green);
  color: var(--cgs-gold);
  border-color: var(--cgs-gold);
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.btn-cgs-email:hover i {
  color: var(--cgs-gold);
}

/* Parallax hero */
.cgs-contact-hero-parallax {
  background-image:
    linear-gradient(rgba(19,58,58,.65), rgba(19,58,58,.65)),
    url("../images/contact-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: clamp(300px, 45vw, 480px);
  border-bottom: 4px solid var(--cgs-gold);
}
.cgs-contact-hero-parallax h1,
.cgs-contact-hero-parallax p {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* Reduced motion + mobile fallbacks */
@media (prefers-reduced-motion: reduce) {
  .cgs-contact-hero-parallax {
    background-attachment: scroll;
  }
}
@media (max-width: 991.98px) {
  .cgs-contact-hero-parallax {
    background-attachment: scroll;
    background-position: center top;
  }
}

/* =============================
   Page: About (page-about)
   ============================= */
body.page-about .cgs-about-hero {
  background-image: url('../images/about-hero.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: clamp(300px, 40vw, 600px);
  display: flex;
  align-items: center;
  color: #fff;
}
body.page-about .cgs-about-hero .eyebrow {
  font-family: 'Oswald', system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
  font-size: .9rem;
  margin-bottom: .25rem;
}
body.page-about .cgs-about-hero .hero-title,
body.page-about .cgs-about-hero .hero-lead {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
body.page-about .cgs-about-divider {
  border-top: 1px solid rgba(0,0,0,.12);
}
body.page-about main.about-main {
  padding-top: 2rem;
}
@media (min-width: 992px) {
  body.page-about main.about-main {
    padding-top: 3rem;
  }
}

/* Figure + caption */
.about-figure {
  float: left;
  max-width: 420px;
  margin: 0 1.5rem 1rem 0;
}
.about-img {
  width: 100%;
  height: auto;
  display: block;
}
.about-caption {
  font-size: .875rem;
  color: #666;
  margin-top: .25rem;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 767.98px) {
  .about-figure {
    float: none;
    margin: 0 auto 1rem;
    text-align: center;
  }
  .about-caption {
    text-align: center;
  }
}

/* =============================
   Page: dog-park-bricks.html
   ============================= */
.page-dogpark .cgs-dogpark {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 40vw, 560px);
  overflow: hidden;
  isolation: isolate;
}
.page-dogpark .cgs-dogpark .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-dogpark .cgs-dogpark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(19,58,58,.55), rgba(19,58,58,.35));
  z-index: 0;
}
.page-dogpark .cgs-dogpark .container {
  position: relative;
  z-index: 1;
}
.page-dogpark .cgs-dogpark .hero-title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.page-dogpark .dogpark-main {
  padding-top: 2rem;
}
@media (min-width: 992px) {
  .page-dogpark .dogpark-main {
    padding-top: 3rem;
  }
}
.page-dogpark .body-copy {
  font-size: 1.125rem;
  line-height: 1.65;
}
.page-dogpark .btn-cgs {
  display: inline-block;
  background-color: var(--cgs-gold, #C2B114);
  color: var(--cgs-deep, #0F2744);
  padding: .65rem 1.25rem;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: .5rem;
  text-decoration: none;
  transition: all .2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0,0,0,.15);
}
.page-dogpark .btn-cgs:hover,
.page-dogpark .btn-cgs:focus {
  background-color: var(--cgs-deep, #0F2744);
  color: var(--cgs-gold, #C2B114);
  border-color: var(--cgs-gold, #C2B114);
}



/* =============================
   Freedom Walk Hero
   ============================= */
.cgs-freedom-walk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: clamp(300px, 40vw, 600px);
}
/* Only for the Freedom Walk hero — not sitewide */
.cgs-freedom-walk .hero-img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.cgs-freedom-walk .container {
  position: relative;
  z-index: 1;
}
.cgs-freedom-walk .eyebrow,
.cgs-freedom-walk .hero-title,
.cgs-freedom-walk .hero-lead {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.6);
}

/* =============================
   CONTRIBUTIONS HERO SECTION (Enhanced)
   ============================= */
.cgs-contribute-hero {
  position: relative;
  overflow: hidden;
  background: url('../images/first-responders-military.png') center center / cover no-repeat;
  background-color: #133a3a; /* fallback color */
  min-height: clamp(380px, 45vw, 600px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Lighter overlay for improved image visibility */
.cgs-contribute-hero .hero-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(19,58,58,0.35);
  z-index: 1;
}

/* Ensure text stays readable above overlay */
.cgs-contribute-hero .container {
  position: relative;
  z-index: 2;
}

/* Mobile: ensure full visibility, no clipping */
@media (max-width: 767px) {
  .cgs-contribute-hero {
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    min-height: 320px !important;
  }
}

/* Safe-zone crop for ultrawide monitors */
@media (min-width: 1400px) {
  .cgs-contribute-hero {
    background-position: 55% center; /* shifts focus slightly right */
  }
}
@media (min-width: 1800px) {
  .cgs-contribute-hero {
    background-position: 58% center; /* subtle extra nudge */
  }
}


/* Mobile adjustments */
@media (max-width: 767px) {
  .cgs-contribute-hero {
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    min-height: 320px !important;
  }
}

/* CONTRIBUTIONS PAGE STYLES */
.cgs-contribute .body-copy {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #222;
}

/* Text shadow utility */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.6);
}

/* PayPal button */
.btn-cgs-donate {
  background-color: #C2B114;
  color: #133a3a;
  font-weight: 600;
  border-radius: 50px;
  padding: 12px 32px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.btn-cgs-donate:hover {
  background-color: #29AEAE;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

/* =============================
   FLAGPOLE HERO
   ============================= */
.cgs-flag-pole {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: clamp(300px, 40vw, 600px);
  background-image: url('../images/flagpole/Flag-Pole-Hero.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 40%;
  color: #fff;
}
.cgs-flag-pole > .container {
  position: relative;
  z-index: 1;
}
.cgs-flag-pole .eyebrow,
.cgs-flag-pole .hero-title,
.cgs-flag-pole .hero-lead {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.6);
}
@media (min-width: 992px) {
  .cgs-flag-pole {
    background-position: 50% 42%;
    min-height: clamp(420px, 42vw, 720px);
  }
}
@media (min-width: 1600px) {
  .cgs-flag-pole {
    background-position: 50% 45%;
  }
}

/* =====================================================
   Global Buttons — Unified sitewide standard
   (Replaces old a.btn-cgs styles)
   ===================================================== */

.btn-cgs-primary {
  --cgs-green: #133a3a;
  --cgs-gold: #f5d26b;
  color: var(--cgs-green);
  background: var(--cgs-gold);
  border: 2px solid var(--cgs-gold);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: all .2s ease-in-out;
}
.btn-cgs-primary:hover,
.btn-cgs-primary:focus {
  color: var(--cgs-gold);
  background: var(--cgs-green);
  border-color: var(--cgs-gold);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.btn-cgs-sm {
  font-size: 0.9rem;
  padding: 6px 16px;
  border-radius: 50px;
}

.btn-cgs-primary,
.btn-cgs-primary.btn-cgs-sm {
  border-radius: 50px;  /* or 999px for a full pill */
}

.btn-cgs-primary:hover,
.btn-cgs-primary:focus {
  transform: translateY(-2px);
}

/* =============================
   Page Type: Hero Biography
   Purpose: Match interior page styling (solid black banner)
   ============================= */

body.page-hero-bio {
  --cgs-green: #133a3a;
  --cgs-gold:  #f5d26b;
  background: url("/images/cgs-bp-bkgrnd.jpeg") center center / cover no-repeat fixed;
  color: #18222e;
}

/* Maintain consistent spacing */
body.page-hero-bio main {
  margin-top: 0;
}

/* Keep banner solid black — identical to other internal pages */
body.page-hero-bio .section-banner-min {
  background-color: #000;
  color: #fff;
  padding: 30px 0;
}

/* Force all banner text to stay white */
body.page-hero-bio .section-banner-min,
body.page-hero-bio .section-banner-min h1,
body.page-hero-bio .section-banner-min p {
  color: #fff !important;
}

/* Readability tweaks for body text */
body.page-hero-bio p {
  line-height: 1.7;
  color: #18222e;
}

/* Soft translucent white box for main bio content */
body.page-hero-bio .bg-white {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure dropdowns always display above all content */
body.page-hero-bio .custom-header { z-index: 1100; }
body.page-hero-bio .dropdown-menu { z-index: 1200; }

/* Offset anchor targets so they appear correctly below sticky header */
.anchor-target {
  scroll-margin-top: 110px; /* adjust to your actual header height */
}
/* Smooth jump + global offset for all in-page anchors */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 220px;   /* desktop header height */
}

/* Tweak the offset as the header shrinks on smaller screens */
@media (max-width: 991.98px) {
  html { scroll-padding-top: 160px; }  /* tablet */
}
@media (max-width: 575.98px) {
  html { scroll-padding-top: 120px; }  /* phones */
}

/* (Optional) Per-target fallback for Safari quirks */
.anchor-target { scroll-margin-top: 220px; }
@media (max-width: 991.98px) { .anchor-target { scroll-margin-top: 160px; } }
@media (max-width: 575.98px) { .anchor-target { scroll-margin-top: 120px; } }

/* Keep lodge photo pairs consistent in size */
.lodge-figure {
  overflow: hidden;
  border-radius: 0.5rem;
}

.lodge-figure img {
  width: 100%;
  height: 280px;               /* same visual height for both */
  object-fit: cover;           /* fills evenly without stretching */
  object-position: center;
  display: block;              /* keeps caption below */
  border-radius: 0.5rem;
}

@media (max-width: 768px) {
  .lodge-figure img {
    height: 200px;             /* smaller when stacked */
  }
}
/* Uniform size for the two lodge photos only */
.lodge-figure:not(.lodge-map) > a {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.75rem;
}

.lodge-figure:not(.lodge-map) > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.lodge-map img {
  border-radius: 0;        /* remove rounded corners for full-bleed look */
  display: block;
}
.lodge-map figcaption {
  font-size: 0.9rem;
}

/* Ensure footer text stays white on hero bio pages */
body.page-hero-bio footer p,
body.page-hero-bio footer a {
  color: #fff !important;
}


/* ===== CGS Sponsorship Modal Styling ===== */

/* Header matches navbar blue and fixes mobile collision */
.cgs-modal-header {
  background:#133a3a; color:#fff;
  padding-top:.75rem; padding-bottom:.75rem;
}
.cgs-modal-header .brand {
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
}
.cgs-modal-header .brand img { height:36px; width:auto; }
.cgs-modal-header .modal-title { font-family:'Oswald',sans-serif; color:#fff; }
.cgs-close { position:absolute; right:1rem; filter:invert(1); opacity:.85; }

/* Mobile: shrink logo and add left padding so it doesn't crash title */
@media (max-width: 576px) {
  .cgs-modal-header { padding-left:3.25rem; min-height:56px; }
  .cgs-modal-header .brand img { height:28px; }
}

/* Lead line centered */
.leadline { text-align:center; font-weight:700; margin-bottom:12px; }

/* Option headings in CGS gold */
.opt-title { font-weight:700; color:#D6A30C; margin-top:.75rem; margin-bottom:.35rem; }

/* Divider with centered star */
.divider-star { display:flex; align-items:center; gap:.75rem; margin:1rem 0; }
.divider-star::before, .divider-star::after {
  content:""; flex:1; border-top:1px solid rgba(0,0,0,.2);
}
.star { font-size:3.1rem; color:#D6A30C; line-height:1; }

/* Quote styling */
.cgs-quote blockquote { font-style:italic; margin:0; }
.cgs-quote figcaption { margin-top:.35rem; font-weight:600; }

/* Optional: lighten body text slightly inside modal for readability */
.modal-body p { color:#18222e; }

/* Blue email button in modal footer */
.modal-footer .btn-outline-secondary {
  background-color:#133a3a;      /* brand blue */
  color:#fff;                    /* white text */
  border:none;
  transition:all .2s ease-in-out;
}

.modal-footer .btn-outline-secondary:hover {
  background-color:#0b1a30;      /* slightly darker navy on hover */
  color:#fff;
}

/* --- CGS Sponsorship Modal: ensure we beat Bootstrap on live --- */
.modal .modal-header.cgs-modal-header { 
  background: #133a3a !important; 
  color: #fff !important; 
}
.modal .modal-header.cgs-modal-header .modal-title { 
  color: #fff !important; 
  font-family: 'Oswald', sans-serif; 
}
.modal .divider-star { 
  display: flex !important; 
  align-items: center; 
  gap: .75rem; 
  margin: 1rem 0; 
}
.modal .divider-star::before, 
.modal .divider-star::after { 
  content: ""; 
  flex: 1; 
  border-top: 1px solid rgba(0,0,0,.2); 
}
.modal .star { 
  font-size: 3.1rem; 
  color: #D6A30C; 
  line-height: 1; 
}
.modal .opt-title { 
  font-weight: 700; 
  color: #D6A30C; 
  margin: .75rem 0 .35rem; 
}
.modal .leadline { 
  text-align: center; 
  font-weight: 700; 
  margin-bottom: 12px; 
}

/* Header layout + mobile spacing */
.cgs-modal-header { 
  padding-top: .75rem; 
  padding-bottom: .75rem; 
  position: relative; 
}
.cgs-modal-header .brand { 
  position: absolute; 
  left: 1rem; 
  top: 50%; 
  transform: translateY(-50%); 
}
.cgs-modal-header .brand img { height: 36px; width: auto; }
.cgs-close { position: absolute; right: 1rem; filter: invert(1); opacity: .85; }

@media (max-width: 576px) {
  .cgs-modal-header { padding-left: 3.25rem; min-height: 56px; }
  .cgs-modal-header .brand img { height: 28px; }
}

/* Make the email button blue (uses outline-secondary per your HTML) */
.modal-footer .btn-outline-secondary {
  background-color: #133a3a !important;
  color: #fff !important;
  border: none !important;
  transition: all .2s ease-in-out;
}
.modal-footer .btn-outline-secondary:hover {
  background-color: #0b1a30 !important;
  color: #fff !important;
}


/* Center and style meta chips under page banners */
.section-banner-min .meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;             /* space between chips */
  margin-top: 0.5rem;      /* small space below H1 */
}

.section-banner-min .meta .chip {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
}
.section-banner-min .meta .chip:hover {
  background: rgba(245,210,107,0.25);
  border-color: #f5d26b;
}


.hero-lodge-list li {
  margin-bottom: .4rem;
}


/* Replace party hat with a gold star via CSS, no HTML edits needed */
.soon-badge > span { display:none; }
.soon-badge::before {
  content: "⭐";
  color: var(--cgs-gold);
  font-size: 1.3em;
  margin-right: .5rem;
}
#cgs-contrib-block .btn-cgs-donate { white-space: nowrap; }
#cgs-contrib-block .form-label { margin-bottom:.35rem; }

/* PAYPAL BUTTON TWEAK */
#paypal-button-container iframe {
  transform: scale(.95);
  transform-origin: top center;
}

/* Camp Gold Star Primary Button Hover / Focus */
.btn-cgs-primary:hover,
.btn-cgs-primary:focus {
  background-color: #133a3a;   /* navy blue */
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px); /* optional lift effect */
}


.section-features .row + .row { margin-top: 1.25rem; }
.section-features img { max-height: 120px; object-fit: contain; }


/* Center + fix vertical text for the PayPal section only */
.section-paypal {
  text-align: center;                 /* centers inline content */
}

.section-paypal,
.section-paypal * {
  writing-mode: horizontal-tb !important;  /* kill any vertical text */
  text-orientation: mixed !important;
  transform: none !important;              /* in case a parent was rotated */
}

.section-paypal .paypal-hosted {
  display: inline-block;               /* so text-align can center it */
}

/* optional: slight scale like your smart buttons */
.section-paypal iframe {
  transform: scale(.98);
  transform-origin: top center;
}

/* Restore original, full image sizing */
.section-features img { 
  max-height: none !important; 
  width: 100%; 
  height: auto; 
}

/* Home hero: full-bleed and predictable behavior */
.page-home .cgs-home-hero{
  aspect-ratio: auto;          /* remove fixed aspect ratio */
  height: auto;                /* let image set height */
  max-height: none;
}


/* If you want edge-to-edge with acceptable top/bottom crop, use COVER */
.page-home .cgs-home-hero .hero-img{
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* changed from cover */
  object-position: center;     /* center image vertically */
}


/* If you prefer NO CROP + side gutters, swap to: object-fit: contain; */

/* =============================
   Home Hero Overlay Text
   ============================= */
.page-home .cgs-home-hero {
  position: relative;
}

.page-home .cgs-home-hero .hero-overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* top align */
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  z-index: 2;
  padding: 4rem 1rem 1rem;       /* top, sides, bottom */
}



.page-home .cgs-home-hero .hero-overlay-text h1 {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}

.page-home .cgs-home-hero .hero-overlay-text p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  opacity: .95;
}

/* Optional: subtle gradient behind text for contrast */
.page-home .cgs-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(0,0,0,0.25) 0%,
              rgba(0,0,0,0.35) 60%,
              rgba(0,0,0,0.25) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Remove home hero overlay gradient entirely */
.page-home .cgs-home-hero::after {
  content: none !important;
  background: none !important;
}


/* Mobile adjustments */
@media (max-width: 767px){
  .page-home .cgs-home-hero .hero-overlay-text h1 {
    font-size: 1.75rem;
  }
  .page-home .cgs-home-hero .hero-overlay-text p {
    font-size: 1rem;
  }
}
/* --- Mobile: hero overlay text stays white, no box, max contrast --- */
@media (max-width: 767px){
  .page-home .cgs-home-hero .hero-overlay-text{
    justify-content: flex-start;
    padding-top: 5.5rem; /* keep your current position */
  }

  /* Only affect the overlay text in the hero */
  .page-home .cgs-home-hero .hero-overlay-text h1,
  .page-home .cgs-home-hero .hero-overlay-text p{
    color: #fff;                     /* keep white */
    /* subtle outline where supported (iOS/Chrome) */
    -webkit-text-stroke: 0.6px rgba(0,0,0,0.45);
    text-stroke: 0.6px rgba(0,0,0,0.45);

    /* stacked shadows = readable on white map + busy image */
    text-shadow:
      0 1px 0 rgba(0,0,0,0.35),
      0 2px 4px rgba(0,0,0,0.45),
      0 6px 18px rgba(0,0,0,0.35);
  }

  /* Optional: modern contrast boost if available; harmless fallback otherwise */
  .page-home .cgs-home-hero .hero-overlay-text{
    isolation: isolate; /* keeps blend effect contained */
  }
  @supports (mix-blend-mode: difference){
    .page-home .cgs-home-hero .hero-overlay-text h1,
    .page-home .cgs-home-hero .hero-overlay-text p{
      mix-blend-mode: difference; /* inverts on light backgrounds */
      -webkit-text-stroke: 0;     /* blend mode usually removes the need for stroke */
      text-shadow: none;
    }
  }
}


/* --- Mobile: hero overlay text stays white, no box, max contrast --- */
@media (max-width: 767px){
  .page-home .cgs-home-hero .hero-overlay-text{
    justify-content: flex-start;
    padding-top: 5.5rem; /* keep your current position */
  }

  /* Only affect the overlay text in the hero */
  .page-home .cgs-home-hero .hero-overlay-text h1,
  .page-home .cgs-home-hero .hero-overlay-text p{
    color: #fff;                     /* keep white */
    /* subtle outline where supported (iOS/Chrome) */
    -webkit-text-stroke: 0.6px rgba(0,0,0,0.45);
    text-stroke: 0.6px rgba(0,0,0,0.45);

    /* stacked shadows = readable on white map + busy image */
    text-shadow:
      0 1px 0 rgba(0,0,0,0.35),
      0 2px 4px rgba(0,0,0,0.45),
      0 6px 18px rgba(0,0,0,0.35);
  }

  /* Optional: modern contrast boost if available; harmless fallback otherwise */
  .page-home .cgs-home-hero .hero-overlay-text{
    isolation: isolate; /* keeps blend effect contained */
  }
  @supports (mix-blend-mode: difference){
    .page-home .cgs-home-hero .hero-overlay-text h1,
    .page-home .cgs-home-hero .hero-overlay-text p{
      mix-blend-mode: difference; /* inverts on light backgrounds */
      -webkit-text-stroke: 0;     /* blend mode usually removes the need for stroke */
      text-shadow: none;
    }
  }
}
/* ===== Mobile: readable overlay without covering the map ===== */
@media (max-width: 767px){
  /* keep your current overlay placement but let the inner block handle spacing */
  .page-home .cgs-home-hero .hero-overlay-text{
    align-items: center;       /* center the inner block horizontally */
    justify-content: flex-start;
    padding-top: 0;            /* spacing comes from .overlay-copy */
  }

  /* the small translucent bar sized to the text block */
  .page-home .cgs-home-hero .overlay-copy{
    display: inline-block;
    position: relative;
    margin-top: 5.25rem;       /* same visual position as before */
    padding: .6rem .9rem;      /* tiny insets around both lines */
    border-radius: 14px;
    max-width: min(92vw, 740px);

    /* translucent, not heavy; map still clearly visible */
    background: linear-gradient(
      to bottom,
      rgba(15,38,38,.46),
      rgba(15,38,38,.34)
    );
    backdrop-filter: blur(2px);   /* softens only directly behind type */
  }

  /* type tuning so the paragraph stays crisp (no heavy outlines) */
  .page-home .cgs-home-hero .overlay-copy h1{
    color:#fff;
    font-size: 1.65rem;          /* your previous mobile size was ~1.75rem */
    line-height: 1.15;
    margin: 0 0 .3rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
  }
  .page-home .cgs-home-hero .overlay-copy p{
    color:#fff;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 5px rgba(0,0,0,.35);
  }

  /* keep your no-crop image behavior */
  .page-home .cgs-home-hero .hero-img{ object-fit: contain; }
}


/* =============================
  Contact Page
   ============================= */
/* Contact page: Access section spacing tweaks */
#access-info .accordion-button { font-weight: 600; }
#access-info .accordion-body ul { padding-left: 1.1rem; }
#access-info .accordion-body li + li { margin-top: .4rem; }

/* Contact page: shuttle info tweak */
.page-contact .card-body h3.h6 {
  letter-spacing: .04em;
}
.page-contact .card-body a.btn-outline-dark.btn-sm {
  font-size: .9rem;
  transition: all .2s ease-in-out;
}
.page-contact .card-body a.btn-outline-dark.btn-sm:hover {
  background-color: #133a3a;
  color: #fff;
  border-color: #133a3a;
}
/* Gold-outline button variant (matches Camp Gold Star theme) */
.btn-cgs-outline-gold {
  --cgs-green: #133a3a;
  --cgs-gold: #f5d26b;
  color: var(--cgs-gold);
  border: 2px solid var(--cgs-gold);
  background: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.25s ease-in-out;
}

.btn-cgs-outline-gold:hover,
.btn-cgs-outline-gold:focus {
  background: var(--cgs-gold);
  color: var(--cgs-green);
  text-decoration: none;
  transform: translateY(-1px);
}
/* Divider style for dark backgrounds (full-width lines) */
.section-divider.dark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0.75rem 0;          /* space above/below divider */
}

.section-divider.dark::before,
.section-divider.dark::after {
  content: "";
  flex: 1;                    /* allows line to stretch fully */
  border-top: 1px solid #ffffff;
  opacity: 0.85;
}

.section-divider.dark .divider-icon {
  color: #f5d26b;
  font-size: 1.2rem;
  margin: 0 0.5rem;           /* controls space between lines */
}

.cgs-home-hero::before {
  background: none !important;
}
.page-home .cgs-home-hero h2.section-title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4); /* optional for readability */
}
/* Reduce space between hero and main content */
.page-home main.container {
  margin-top: 1rem !important;   /* default was ~3rem (my-5) */
  padding-top: 1rem !important;  /* default was ~3rem (pt-5) */
}
/* Reduce space between hero and main content */
.page-home main.container {
  margin-top: 1rem !important;   /* default was ~3rem (my-5) */
  padding-top: 1rem !important;  /* default was ~3rem (pt-5) */
}
/* Tighten space between divider and next section */
.section-divider.light {
  margin-bottom: 0.75rem !important; /* default ~1.5–2rem */
}

.section-features {
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
}

/* Ensure modals always stack above sticky header/hero on home */
.page-home .modal        { z-index: 2000; }
.page-home .modal-backdrop { z-index: 1995; }

/* Responsive modal PDF viewer */

  #projectModal iframe {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  #projectModal .modal-dialog {
    margin: 1rem;                /* prevent edges from touching screen */
    max-width: 100%;
  }
  #projectModal .modal-content {
    border-radius: 12px;
  }
}
/* --- Scrollable PDF modal (Project Description) --- */
#projectModal .modal-dialog {
  max-width: 90vw;           /* slightly narrower than full screen on desktop */
}

#projectModal .modal-body {
  overflow-y: auto;           /* enables vertical scroll on small screens */
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  #projectModal .modal-dialog {
    margin: 0.75rem;
    max-width: 100%;
  }

  #projectModal .modal-body {
    max-height: 80vh;         /* fill most of mobile screen height */
    padding: 0;
  }

  #projectModal iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
  }
}
/* Keeps the section title visible inside hero background */
.page-home .hero-bottom-title {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  z-index: 3;
}

.page-home .hero-bottom-title h2.section-title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  background: rgba(19,58,58,0.5); /* soft overlay so text stays readable */
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: 12px;
}

/* On mobile: shift it slightly higher for balance */
@media (max-width: 767px){
  .page-home .hero-bottom-title {
    bottom: 0.5rem;
  }
  .page-home .hero-bottom-title h2.section-title {
    font-size: 1.25rem;
    padding: .4rem .75rem;
  }
}
/* Contact page: land access warning */
.page-contact .no-access-warning {
  color: #c00;                /* bright red */
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-top: 0.5rem;
  letter-spacing: 0.5px;
  background: rgba(255, 230, 230, 0.3); /* subtle red tint behind text */
  padding: 0.3rem 0.6rem;
  border-left: 4px solid #c00;
  display: inline-block;
}
.footer-bg .text-gold {
  color: #f5d26b !important; /* your CGS gold tone */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer-bg .text-gold:hover,
.footer-bg .text-gold:focus {
  color: #fff !important;
  text-decoration: underline;
}