@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coustard:wght@900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css');

:root {
    /* --------------------------------------------------------------
       Walhonding Hills Campground — brand palette (sampled from logo)
       --------------------------------------------------------------
       Variable names match the River Bend sister-site codebase so that
       the two sites share identical CSS rules. Only the hex values
       differ. To port back to River Bend, swap this :root block for
       the River Bend palette (forest-green #032a02, etc.).
       -------------------------------------------------------------- */
    --forest-green: #507040;       /* mossy sage green — primary brand */
    --forest-green-dark: #2c3d24;  /* hover/active variant */
    --forest-green-deep: #204010;  /* darker tree-line tone (logo) */
    --sand: #f0e090;               /* buttery cream (logo lettering) */
    --stone: #b07030;              /* copper/brass accent (logo poles) */
    --sky-blue: #b9d8d6;
    --accent-orange: #f1592a;
    --text: #2c3d24;               /* darkened brand green, on cream */
    --light-sand: #faf6eb;         /* body background — warm off-white */
    --brand-brown: #302010;        /* warm dark brown (logo outline) */
    --orange:#f1592a;
    --blue:#03aeef;
    --medium-blue:#0094c9;
    --dark-blue:#006792;
    --black:#111111;
    --white:#FFFFFF;
    --lightest-grey: #fcfcfc;
    --light-grey: #cfcfcf;
    --grey:#7f7f7f;
    --dark-grey: #555555;
    --header-font: 'Coustard', serif;
    --body-font: 'Montserrat', sans-serif;
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  background-color: var(--light-sand);
  line-height: 1.6;
  font-size: 16px;
  min-width:360px;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}
html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#container {
  flex: 1 0 auto;
}

footer,
.site-footer {
  flex-shrink: 0;
}
#container {
  flex: auto;
  width: 100% !important;
}

.page-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

/* Page-content wrappers stay capped so prose/forms remain a readable
   line length on huge monitors. #container deliberately stays full-width
   so homepage sections that use `width: 100vw` for full-bleed bg colors
   (e.g. #homepage_book_now) center on the viewport rather than starting
   at a centered-container offset. */
.wrapper,
.main-area,
.page-content {
  max-width: 2400px;
  margin: 0 auto;
}

#container {
  margin: 0 auto;
}

@media (min-width: 1920px) {
  .wrapper {
    max-width: 2400px;
  }
}
h1, h2, h3 {
  font-family: 'Coustard', serif;
  color: var(--forest-green);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
}

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

a {
  color: var(--forest-green);
  text-decoration: none;
  transition: all 0.3s ease;
}
a:hover {
  text-decoration: underline;
}

footer li { list-style: none; }
.team-members-only {
  position: relative;
  z-index: 999;
}
.team-members-only a:link, .team-members-only a:visited {
  color: var(--sky-blue);
}
.team-members-only a:hover {
  text-decoration: underline;
}

/* Layout */

.page-header, .page-content-header {
    font-family: 'Coustard', serif;
    font-size: 1.5rem;
    color: var(--forest-green);
    margin-bottom: 1rem;
}
section {
    padding: 2rem;   
    overflow:hidden;
    position:relative;
}
.page-width {
    max-width: 1140px;
    margin: 0 auto;
    position:relative;
    z-index:999;
}
/* Full-bleed homepage sections: each section's tinted background runs
   edge-to-edge across any monitor width. The negative-margin trick
   spans 100vw and re-centers on the viewport so the section's inner
   max-width container (.homepage-tiles-holder, .homepage-book-now-inner,
   etc.) ends up at viewport center, not at an offset from the parent's
   left edge.

   Scoped to >=1024px because the mobile/tablet breakpoint at the bottom
   of this file applies `margin: 0 !important` to #homepage_book_now,
   which would zero out the negative margins and leave only `left: 50%`,
   shifting the section halfway off-screen on phones. On narrow viewports
   the sections fill the viewport naturally via #container's 100% width,
   so the trick is unnecessary there. */
@media (min-width: 1024px) {
  #homepage_about,
  #homepage_tiles,
  #homepage_notify_signup {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}
#homepage_about {
  padding: 6rem;
  overflow:hidden;
}
#homepage_book_now {
  padding: 6rem;
  overflow:hidden;
  position:relative;
}
#homepage_about p {
    max-width: 1140px;
    margin: 0 auto;
    position:relative;
    z-index:999;
}

.dark-green-bg {
  background-color: var(--forest-green);
  background-image: url(/images/campground_icons.svg);
  background-repeat: repeat;
  background-size: 1000px;
  opacity: 0.05;
  height: calc(100% + 20px);
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* Header + Menu */
#super-menu { position:relative;overflow:hidden;background-color: var(--forest-green); }
.super-menu {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    justify-content: flex-end;
    flex-wrap: wrap; /* Optional if you want them to wrap on smaller screens */
    font-weight: bold;
    position: relative;
    z-index: 999;
    align-items:center;
    width: calc(100% - 2rem);
  }
  .super-menu > div {
    white-space: nowrap; /* Prevents long content from wrapping awkwardly */
  }
#super-menu a:link, #super-menu a:visited {
  color: var(--white);
  text-decoration: none;
}
#menu {
    background-color: var(--light-sand);
    color: var(--forest-green);
    position:relative;
}
.menu-holder { display:flex;align-items:center;justify-content:space-between;padding: 0 2rem;position:relative;z-index:999; }
#menu_bg {
  position: absolute;
  right: 0;
  z-index: 0;
  height: 100%;
  width: 60%;
  overflow: hidden;
  top: 0;
}
#menu_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the SVG covers the container */
  opacity: 1;
  display: block;
}

.menu-items {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    text-transform:uppercase;
}

/* Buttons */
.button,
.homepage-book-now-button,
.menu-button {
  background-color: var(--accent-orange);
  color: var(--white);
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  border-radius: 6px;
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  display:block;
  text-align: center;
}
.button:hover {
  background-color: #c96a3d;
  transform: translateY(-2px);
}

/* Hero — covers both the video variant (River Bend) and the static-image
   variant (Walhonding Hills, via .home-landing-background) so the hero
   fills the page on any monitor width. */
#homepage_hero video,
#homepage_hero img.home-landing-background {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: cover;
  display: block;
}

/* About Section */
#homepage_about { background-color:var(--forest-green-dark);color:var(--light-sand); }
#homepage_about p {
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
}
#homepage_about em {
  font-style: normal;
  color: var(--white);
  font-weight: bold;
}

/* Tiles */
#homepage_tiles {
  background-color: var(--forest-green);
  overflow: hidden;
  position:relative;
}
.homepage-tiles-holder {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 2rem));
    gap: 2rem;
    max-width: 1140px;
    margin: 6rem auto;
}
.homepage-tile {
  background-color: var(--white);
  border: 1px solid var(--stone);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.homepage-tile:hover {
  transform: translateY(-6px);
}
.homepage-tile-image {
    height: 200px;
}
.homepage-tile-image img {
  min-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.homepage-tile-details {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.25rem;
}
.homepage-title-details-header a {
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--forest-green);
}
.homepage-title-details-desc {
  flex-grow: 1;
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
}
.homepage-tile-cta {
  margin-top: 1.5rem;
}
.tile-cta-button {
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--accent-orange);
    color: white;
    padding: 0.5rem 1rem;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s ease;
  }
  
  .tile-cta-button:hover {
    background-color: #c96a3d;
  }

  .tile-cta-button i {
    margin-left: 8px;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
  }
  
  .tile-cta-button:hover i {
    transform: translateX(4px);
  }

  @media (max-width: 768px) {
    .homepage-tiles-holder {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  
    .homepage-tile {
      flex-direction: column;
      height: auto;
    }
  
    .homepage-tile-image {
      height: 180px;
    }
  
    .homepage-tile-details {
      padding: 1rem;
    }
  
    .homepage-title-details-header {
      font-size: 1.25rem;
    }
  
    .homepage-title-details-desc {
      font-size: 1rem;
    }
  
    .tile-cta-button {
      font-size: 0.95rem;
      padding: 0.5rem 1rem;
    }
    #homepage_events, #homepage_tiles, #homepage_book_now {
      padding: 2rem 1rem!important;
    }
  }
  @media (hover: hover) {
    .homepage-tile:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
  }

 /* Event Items */
 #homepage_events { background-color: var(--white);overflow:hidden;position:relative; }
 .homepage-events-items {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
}
 .homepage-events-holder {
    max-width: 1140px;
    margin: 6rem auto;
    position:relative;
    z-index:999;
}
#homepage_events_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#homepage_events_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the SVG covers the container */
  opacity: 1;
  display: block;
}
.page-calendar { display: block; width: calc(100% - 4rem);max-width:1200px; margin: 0 auto; padding: 2rem; }
.page-calendar-header { color: var(--orange);text-transform: uppercase;font-size: 30px;margin-bottom: 24px;font-weight: bold;text-align: center; }
.page-calendar-header i { margin-right:12px;display:inline-block;vertical-align: baseline; }
.calendar-item { display: grid;grid-template-columns: 100px auto;grid-gap: 12px;margin-bottom: 12px;background-color: #efefef;padding: 6px; }
.calendar-item.simple { grid-template-columns: 150px auto!important; }
.calendar-item-date { font-weight: 600;text-transform: uppercase;font-size: 18px; }
.calendar-item-date strong { font-weight: 600;margin-right: 12px; }
.calendar-item-date em { font-style: normal;font-size: 14px; }
.calendar-item-title { margin: 6px 0;font-size: 20px;font-weight: bold;color: var(--orange);text-transform: uppercase; }
.calendar-item-sub-title { text-transform: uppercase;font-weight: 600;font-size: 16px;margin-bottom: 6px; }
.page-content-embed-header { text-transform: uppercase;margin: 12px 0;font-weight: bold;font-size: 20px;padding-bottom: 12px;border-bottom: 1px solid #ddd; }
.calendar-item-description { line-height: 20px; }
.calendar-item-link.internal a:link, .calendar-item-link.internal a:visited { cursor:pointer;transition:all ease 250ms;background-color: var(--blue);color: var(--white);text-decoration: none;text-transform: uppercase;font-size: 18px;padding: 6px 12px;font-weight: bold;margin-top: 3px;display: block;width: 130px;text-align: center; }
.calendar-item-link.internal a:hover { background-color:var(--dark-blue); }
.calendar-item-link.internal { margin-top: 24px; }


.page-calendar-header { text-align:center; }
.page-calendar-icon { color: var(--orange);font-size: 30px;display: block;margin-bottom: 12px; }
.page-calendar-name { font-size:30px;line-height: 36px;color:var(--black);text-transform:uppercase;font-weight:bold; }
.page-calendar-notes { text-transform: uppercase;font-size: 12px;margin: 3px 0 12px 0; }
.page-calendar-events { display: grid;grid-template-columns:1fr;grid-gap: 2rem;width:100%;margin:0 auto; }/* grid-template-columns: repeat(2, calc(50% - 1rem)); */
.page-calendar-item { box-shadow: 0 0 8px 0px rgba(0,0,0,0.1); background-color: #efefef; margin-bottom: 12px; padding: 12px 12px 36px 12px; line-height: 1.75; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid #dfdfdf; }
.page-calendar-item-date, .calendar-item.simple .calendar-item-date { text-transform: uppercase;font-size: 14px; }
.page-calendar-item-date { font-size: 24px; margin-bottom: 12px; display: grid; grid-template-columns: 100px auto; grid-gap: 12px;align-items:center; }
.page-calendar-item-date strong { font-family: var(--header-font); font-size: 1.4rem; color: var(--forest-green); }
.calendar-item.simple .calendar-item-date strong { display: block;font-weight: 600;color: #6f6f6f; }
.calendar-item.simple .calendar-item-date span { display:block;font-size:12px; }
.page-calendar-item-date span { font-size: 1rem;font-family: var(--header-font);display:block; }
.page-calendar-item-date span em { font-style: normal;font-size:0.9rem; }
.calendar-item.simple .calendar-item-date em { font-style: normal;font-size: 18px; }
.page-calendar-item-date span { font-weight: bold; color: var(--dark-grey); }
.page-calendar-item-sub-title { text-transform: uppercase;font-size: 14px;font-weight: 600;color: var(--dark-grey); }
.page-calendar-item-title { font-family:var(--header-font);font-weight: 900;color: var(--orange);font-size:20px; }
.page-calendar-item-title span { display: inline-block; color: var(--black); font-size: 14px; margin-left: 6px; }
.reserved .page-calendar-item-title { color: #6f6f6f; }
.page-calendar-item-description { font-size: 12px;text-transform: uppercase;font-weight: 600;color: #6f6f6f; }
.page-calendar-item-link.internal a:link, .page-calendar-item-link.internal a:visited { cursor:pointer;transition:all ease 250ms;background-color: var(--blue);color: var(--white);text-decoration: none;text-transform: uppercase;font-size: 14px;padding: 3px 12px;font-weight: bold;margin-top: 3px;display: block;width: 90px;text-align: center; }
.page-calendar-item-link.internal a:hover { background-color:var(--dark-blue); }
.page-calendar-item-link { display: inline-block; vertical-align: top; margin-right: 12px; }
.page-calendar-events-desc { line-height: 32px;text-transform: uppercase;background-color: #efefef;padding: 12px;text-align: center; }
.page-calendar-events-desc strong { display: block;font-size:20px; }
.page-calendar-events-desc span { font-size:18px; }
.page-calendar-day { box-shadow: 0 0 10px 0px rgba(0,0,0,0.1);background-color: #fafafa; padding: 12px 12px 1px 12px; border-radius: 6px; border: 1px solid #dcdcdc; }
.page-calendar-item-calendar { display: block; color: var(--white); text-transform: uppercase; font-weight: 700; font-size: 14px; background-color: var(--lightest-grey); padding: 3px 12px; position: absolute; bottom: 0; left: 0; width: 100%; }

.page-calendar-item-calendar.adult-activities { background-color:#f18f3b; }
.page-calendar-item-calendar.activities-for-all { background-color:#4e79a5; }
.page-calendar-item-calendar.tournaments { background-color:#e0585b; }
.page-calendar-item-calendar.food-trucks { background-color:#77b7b2; }
.page-calendar-item-calendar.kids-teen-activities { background-color:#5aa155; }
.page-calendar-item-calendar.live-entertainment { background-color:#9b5891; }
.page-calendar-item-calendar.art-activities { background-color:#e3507e; }

.adult-activities .page-calendar-item-title { color:#f18f3b; }
.activities-for-all .page-calendar-item-title { color:#4e79a5; }
.tournaments .page-calendar-item-title { color:#e0585b; }
.food-trucks .page-calendar-item-title { color:#77b7b2; }
.kids-teen-activities .page-calendar-item-title { color:#5aa155; }
.live-entertainment .page-calendar-item-title { color:#9b5891; }
.art-activities .page-calendar-item-title { color:#e3507e; }

.page-calendar-item.adult-activities { border-left:6px solid #f18f3b; }
.page-calendar-item.activities-for-all { border-left:6px solid #4e79a5; }
.page-calendar-item.tournaments { border-left:6px solid #e0585b; }
.page-calendar-item.food-trucks { border-left:6px solid #77b7b2; }
.page-calendar-item.kids-teen-activities { border-left:6px solid #5aa155; }
.page-calendar-item.live-entertainment { border-left:6px solid #9b5891; }
.page-calendar-item.art-activities { border-left:6px solid #e3507e; }

.month { text-align: center; width:100%;max-width: 97px; }
.month-row { display: grid; grid-template-columns: repeat(7, 13px);grid-gap:1px;font-size: 8px; }
.month-day, .month-day form button { text-align:center;height:13px;line-height:13px;margin-bottom:1px; }
.month-day form button { margin:0 auto 1px auto!important;padding:0!important;width:100%; }

.header-month-title { font-family: var(--header-font); text-transform: uppercase; font-weight: bold; font-size: 8px; }
.header .month-day { text-transform: uppercase;font-weight: bold; }
.month-row:not(.header) .month-day { background-color: var(--light-grey);color:#8f8f8f;font-weight: bold; }
.month-day.this_day { background-color: var(--orange)!important;color:var(--black)!important;font-weight:bold; }

.month-day.disabled { color: var(--tertiary-dark); }

.month-day.today { background-color:var(--primary-accent); }
.month-day.holiday { background-color:#FFFF00;color:#000000; }

@media all and (max-width:767px) {
    .month-holder { grid-template-columns: 1fr; }
}

.page-calendar-header-image { width: 100%;max-width: 800px;height: 300px;margin: 24px auto;background-position: center center;background-size: cover; }

.live-entertainment .page-calendar-header-image { background-image: url('/images/BG_LiveEntertainment.jpg'); }

.kids-all-ages-activities .page-calendar-header-image { background-image: url('/images/BG_KidsActivities.jpg'); }

.tournaments .page-calendar-header-image { background-image: url('/images/BG_Tournaments.jpg'); }

.adult-activities .page-calendar-header-image { background-image: url('/images/BG_AdultActivities.jpg'); }

.page-calendar-holder.food-trucks .page-calendar-header-image {
  display: none;
}

.page-calendar-main-links { margin-bottom:36px; }
.page-calendar-main-links-item {
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  display:inline-block;
  vertical-align: top;
  margin-bottom:6px;
  width:calc(25% - 6px);
}
.page-calendar-main-links-item:not(:last-child) { margin-right:6px; }
.page-calendar-main-links-item a { transition:all ease 250ms;border-left:6px solid var(--blue);padding:12px!important; }
.page-calendar-main-links-item a:link, .page-calendar-main-links-item a:visited { background-color: var(--light-grey); color:var(--black); padding: 6px 12px;display:block;text-decoration:none; }
.page-calendar-main-links-item a:hover { background-color: var(--blue); color: var(--white); }

.page-calendar-main-links-header { text-transform: uppercase; font-weight: bold; font-size: 24px; background-color: var(--blue);color:var(--white); margin-bottom: 12px;padding:6px 12px;display:inline-block; }

    

/* Book Now
   The negative-margin trick guarantees this section spans 100vw and
   re-centers on the viewport regardless of any constraint on the
   parent container. Without this, on monitors wider than the parent
   container the 100vw box starts at the parent's offset left edge,
   which pushes the inner .homepage-book-now-inner grid right of
   viewport center.

   Scoped to >=1024px because the mobile breakpoint below applies
   `margin: 0 !important` to #homepage_book_now, which would zero out
   the negative margins and leave only `left: 50%`, shifting the whole
   section halfway off-screen. On phones #container is already 100%
   wide, so the section fills the viewport naturally. */
#homepage_book_now {
  background-color: var(--lightest-grey); /* fallback */
  padding: 4rem 0;
  overflow: hidden;
  position: relative;
}
@media (min-width: 1024px) {
  #homepage_book_now {
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

.homepage-book-now-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(2, calc(50% - 1rem));
  position:relative;
  z-index:999;
}

.homepage-book-now-holder,
.homepage-social-holder {
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: block;
}
.homepage-book-now-button { margin:2rem auto 1rem auto; }
.homepage-book-now-image { margin-top:1rem; }
.homepage-book-now-details {
  min-height: 600px;
}
#homepage_book_now_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#homepage_book_now_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  display: block;
}


@media (max-width: 768px) {
  .homepage-book-now-inner {
    grid-template-columns: 1fr;
  }
}


/* Activities and Amenities */
/* Activities & Amenities Group Styles */
#activities-amenities {
  max-width: 1200px;
    margin: 0 auto;
}
.amenity-group {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background-color: var(--lightest-grey);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Flip image/text for even rows */
.amenity-group:nth-child(even) {
  direction: rtl;
}
.amenity-group:nth-child(even) .amenity-info {
  direction: ltr;
}

/* Image styling */
.amenity-accent-img img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Title + icon */
.amenity-info h3 {
  font-family: var(--header-font);
  font-size: 1.4rem;
  color: var(--forest-green);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* List styles */
.amenity-info ul {
  padding-left: 1.2rem;
  list-style: none;
}
.amenity-info ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.4rem;
  font-size: 1rem;
  color: var(--text);
}
.amenity-info ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-orange);
  font-size: 1.2rem;
}

/* Mobile */
@media (max-width: 768px) {
  #menu_bg { width:100%!important; }
  .amenity-group {
    grid-template-columns: 1fr;
    direction: ltr !important;
  }

  .amenity-accent-img img {
    max-height: 300px;
  }

  .amenity-info ul {
    padding-left: 0;
  }

  .amenity-info ul li {
    padding-left: 0;
  }

  .amenity-info ul li::before {
    display: none;
  }
}


/* Rates */

/* Rates Page Styling */
#rates {
  padding: 4rem 2rem;
}

#rates .page-header {
  font-family: var(--header-font);
  font-size: 2.25rem;
  text-align: center;
  color: var(--forest-green);
  margin-bottom: 3rem;
  text-transform: uppercase;
}

.rates-table {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto 3rem auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.rates-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.5fr;
  background-color: var(--lightest-grey);
  border-bottom: 1px solid var(--light-grey);
}

.rates-row.header {
  background-color: var(--forest-green);
  color: var(--white);
  font-weight: bold;
  text-align: center;
}

.rates-cell {
  padding: 1rem;
  border-right: 1px solid var(--light-grey);
  text-align: center;
  font-size: 1rem;
}

.rates-cell.label {
  font-weight: bold;
  color: var(--forest-green);
  text-align: left;
}

.rates-cell small {
  display: block;
  font-size: 0.75rem;
  color: var(--grey);
  margin-top: 4px;
}

/* Section styles */
.rates-section {
  max-width: 1140px;
  margin: 0 auto 3rem auto;
  padding: 2rem;
  background-color: var(--lightest-grey);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.rates-section h3 {
  font-family: var(--header-font);
  font-size: 1.5rem;
  color: var(--forest-green);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.rates-section ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  line-height: 1.8;
}

.rates-section ul.notes {
  padding-left: 0;
  list-style: none;
  margin-top: 1rem;
}

.rates-section ul.notes li {
  font-style: italic;
  font-size: 0.95rem;
}

/* Passes grid */
.rates-passes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.pass {
  background-color: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  text-align: center;
}

.pass h4 {
  font-family: var(--header-font);
  font-size: 1.1rem;
  color: var(--forest-green);
  margin-bottom: 0.5rem;
}

.pass p {
  font-size: 1rem;
  font-weight: bold;
  color: var(--accent-orange);
}

.pass small {
  display: block;
  font-size: 0.85rem;
  color: var(--grey);
  margin-top: 4px;
}

/* Responsive fixes */
@media (max-width: 768px) {
  .rates-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }

  .rates-cell {
    text-align: left;
    font-size: 0.95rem;
  }

  .rates-cell.label {
    font-weight: bold;
  }
}


/* Header Styling */
.rental-tab-content h2 {
  font-size: 1.75rem;
  color: var(--forest-green);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--accent-orange);
  padding-bottom: 0.25rem;
}

.rental-tab-content h3 {
  font-size: 1.25rem;
  color: var(--medium-blue);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* List Item Enhancements */
.rental-tab-content ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}

.rental-tab-content li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--text);
}

/* Better Spacing Around Sections */
.rental-tab-content > *:not(:last-child) {
  margin-bottom: 2rem;
}

/* Gallery and Descriptions */
.page-content-image-description {
  margin-top: 1rem;
  font-style: italic;
  color: var(--dark-grey);
  font-size: 0.95rem;
}

/* Improve gallery spacing on mobile */
@media (max-width: 600px) {
  .page-content-image-gallery-thumbnail img {
    width: 50px;
  }

  .rental-tab-content h2 {
    font-size: 1.5rem;
  }

  .rental-tab-content h3 {
    font-size: 1.125rem;
  }
}
.page-content-section-description {
  margin-bottom: 2rem;
}
.page-content-list-header {
  font-family: var(--header-font);
  font-size: 2rem;
}
.page-content-list-items ol {
  margin-left: 2rem;
  margin-top:1rem;
}
.page-content-image {
  margin: 0 auto;
  max-width: 600px;
}
.page-content-image-header {
  font-size: 2rem;
  font-family: var(--header-font);
}
.page-content-image-header span {
  display:block;
}
.page-content-list {
  max-width: 600px;
  margin: 0 auto;
}
.page-content-list-items-item {
  display: grid
;
  grid-template-columns: 100px auto;
  align-items: center;
}
.page-content-list-items-item-label {
  font-weight: bold;
}
.page-content-list-items-feature {
  display: grid
;
  grid-template-columns: 30px auto;
  margin-bottom: 0.5rem;
}
.page-content-main-section {
  margin-top: 4rem;
}
.page-content {
  padding-bottom: 4rem;
  width:calc(100% - 1rem);
  margin:0 auto;
}

/* Rentals Tabs */
.page-content-header {
  font-family: var(--header-font);
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--forest-green);
  text-transform: uppercase;
}

.page-content-menu {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.page-content-menu-item {
  background-color: var(--light-grey);
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--forest-green);
  border: 2px solid var(--forest-green);
}

.page-content-menu-item:hover {
  background-color: var(--forest-green);
  color: var(--white);
}

.page-content-menu-item.active {
  background-color: var(--forest-green);
  color: var(--white);
}

.rental-tab-content {
  max-width: 1140px;
  margin: 0 auto;
  background-color: var(--lightest-grey);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* RV & Golf Cart Inner Layout */
.rental-tab-content h2, .rental-tab-content h3 {
  font-family: var(--header-font);
  color: var(--forest-green);
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.rental-tab-content ul {
  padding-left: 1.5rem;
  line-height: 1.8;
}

.rental-tab-content li {
  margin-bottom: 0.5rem;
}

.page-content-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.page-content-image-gallery-thumbnail img {
  width: 80px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s ease;
}

.page-content-image-gallery-thumbnail.active img {
  border-color: var(--accent-orange);
}

/* Responsive Fixes */
@media (max-width: 768px) {
  .page-content-menu {
    flex-direction: column;
    align-items: center;
  }

  .page-content-menu-item {
    width: 100%;
    text-align: center;
  }

  .page-content-image-gallery-thumbnail img {
    width: 60px;
  }
  .page-calendar-events { grid-template-columns: 1fr; }
  .page-content { padding:1rem!important;}
  .page-calendar { padding:0!important;width:100%!important; }
  #homepage_about { padding: 2rem!important; }
  .homepage-book-now-inner { padding:0!important; }
}

/* Gallery Enhancements */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}

.gallery img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}



/* Lightbox Styles */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.85);
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}
.lightbox-overlay.active {
  display: flex;
}

/* Lightbox Styles */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.85);
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}
.lightbox-overlay.active {
  display: flex;
}

@media (max-width: 600px) {
  .lightbox-overlay img {
    max-width: 95%;
    max-height: 80%;
  }
}


.page-content-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.page-content-image-gallery-thumbnail img {
  width: 80px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s ease;
}

.page-content-image-gallery-thumbnail.active img {
  border-color: var(--accent-orange);
}


/* ================================================
   Text Alerts Signup Form
   Append to style-2_0_0.css
   ================================================ */

.text-alerts-form {
  max-width: 560px;
  margin: 0 auto;
  background-color: var(--lightest-grey);
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.text-alerts-form-field {
  margin-bottom: 1.5rem;
}

.text-alerts-form-field label:not(.text-alerts-consent-label) {
  display: block;
  font-weight: bold;
  color: var(--forest-green);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.text-alerts-form-field input[type="tel"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--light-grey);
  border-radius: 6px;
  font-family: var(--body-font);
  font-size: 1rem;
  color: var(--text);
  background-color: var(--white);
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.text-alerts-form-field input[type="tel"]:focus {
  outline: none;
  border-color: var(--forest-green);
}

.text-alerts-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dark-grey);
}

.text-alerts-consent-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--forest-green);
  cursor: pointer;
}

.text-alerts-consent-label a {
  color: var(--forest-green);
  text-decoration: underline;
}

.text-alerts-consent-label a:hover {
  color: var(--accent-orange);
}

.text-alerts-form-field button {
  width: 100%;
  background-color: var(--accent-orange);
  color: var(--white);
  padding: 0.85rem 1.75rem;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.text-alerts-form-field button:hover {
  background-color: #c96a3d;
  transform: translateY(-2px);
}

.text-alerts-form-field button:disabled {
  background-color: var(--stone);
  cursor: not-allowed;
  transform: none;
}

.text-alerts-form-message {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
}

.text-alerts-form-message.success {
  background-color: #e6f4ea;
  color: #2d6a34;
  border: 1px solid #a8d5b0;
}

.text-alerts-form-message.error {
  background-color: #fdecea;
  color: #b91c1c;
  border: 1px solid #f5b8b4;
}

@media (max-width: 600px) {
  .text-alerts-form {
    padding: 1.25rem;
  }
}


/* Social Media */ 
.footer-facebook-container { position:relative;z-index:999; }
  .footer-facebook-container h3 {
    font-family: 'Coustard', serif;
    font-size: 1.5rem;
    color: var(--forest-green);
    margin-bottom: 1rem;
    flex: 2;
  }
  
  .footer-facebook-section h3 i {
    color: #1877f2;
    margin-right: 8px;
  }
  .widget-container .card, .widget-container .card-body.no-cover {
    height: 100%!important;
}

/* Footer */
footer { position:relative; }
.site-footer {
    background-color: var(--forest-green);
    color: var(--white);
    padding: 3rem 1rem 1rem 1rem;
    font-size: 0.95rem;
    overflow:hidden;
  }
  
  .footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 2rem;
    position:relative;
    z-index:999;
  }
  
  .footer-column {
    flex: 1 1 200px;
    min-width: 220px;
  }
  
  .footer-column h4 {
    font-family: 'Coustard', serif;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--white);
  }
  
  .footer-column p,
  .footer-column ul {
    margin-bottom: 1rem;
    line-height: 1.6;
  }
  
  .footer-column a {
    color: var(--sky-blue);
    text-decoration: none;
  }
  
  .footer-column a:hover {
    text-decoration: underline;
  }
  
  .footer-socials li {
    list-style: none;
    margin-bottom: 0.5rem;
  }
  
  .footer-book-now {
    display: inline-block;
    background-color: var(--accent-orange);
    color: var(--white)!important;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
  }
  
  .footer-book-now:hover {
    background-color: #c96a3d;
  }

  .footer-waitlist { margin-top: 1rem; }
  
  .footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: 0.85rem;
    color: #cfe6d7;
    position:relative;
    z-index:999;
  }

  .widget-container .card, .widget-container .card-body.no-cover { height:100%!important; }

@media all and ( min-width:769px ) {
    .menu-logo { 
        width: 100px;
        height:100px;
        position:relative;
    }
    .menu-logo img { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:auto;max-width: 125%; height: auto; }
    .info-menu { display:none; }
}

/* Responsive Enhancements */
@media all and ( max-width:1199px ) {
  .menu-items.desktop .waitlist { display:none; }
}
@media all and ( min-width:1024px ) and ( max-width: 1200px ) {
  .homepage-tiles-holder {
    grid-template-columns: repeat(2, 1fr);
  }
  #homepage_book_now { display:block; }
  .homepage-tiles-holder, #homepage_book_now {  text-align: center; }
  .homepage-book-now-holder, .footer-facebook-container { padding: 2rem!important; }
  .homepage-book-now-image { margin-top:2rem!important; }
  .homepage-tile:not(:last-child) { margin-bottom: 2rem!important; }
}
@media (max-width: 1023px) {
    .menu-items {
      gap: 1rem;
      white-space: nowrap;
    }
  
    .homepage-tiles-holder {
      grid-template-columns: 1fr;
    }
  
    .homepage-tile:first-child {
      grid-column: auto;
    }
  
    #homepage_book_now {
      grid-template-columns: 1fr;
      text-align: center;
    }
  
    .menu-holder {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
  
    .footer-container {
      flex-direction: column;
      align-items: center;
    }
  
    .footer-column {
      text-align: center;
      min-width: auto;
    }

    .homepage-events-holder, .homepage-tiles-holder, #homepage_book_now {
      margin:0!important;
      display: block;
      text-align: center;
    }
    .homepage-book-now-holder, .footer-facebook-container { padding: 2rem!important; }
    .homepage-book-now-image { margin-top:2rem!important; }
    .homepage-book-now-holder, .homepage-tile:not(:last-child) { margin-bottom: 2rem!important; }
    .page-calendar-day { text-align: left; }
  }
  
  @media (max-width: 768px) {
    .super-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        font-size: 14px;
    }
  
    .menu-items {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .homepage-tile-image {
      height: 180px;
    }
  
    .tile-cta-button {
      width: 100%;
      text-align: center;
    }

    .menu-items.mobile.active {
        display: flex
    ;
        grid-column: 1 / span 2;
        gap: 0.5rem;
        text-align: center;
    }
    .amenity-info h3 { display:grid;grid-template-columns:1fr;text-align:center; }


  }
  
  @media (max-width: 480px) {
    body {
      font-size: 15px;
    }
  
    h1, h2, h3 {
      font-size: 1.25rem;
    }
  
    .homepage-tile-image {
      height: 150px;
    }
  
    #homepage_about, .homepage-book-now-holder{
        display: block;
        text-align: left;
    }

    .footer-book-now {
      width: 100%;
      text-align: center;
    }

    
  }
  
  .mobile-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--forest-green);
  }
  
  .menu-items.mobile {
    display: none;
    flex-direction: column;
    background-color: var(--white);
    padding: 1rem;
    gap: 1rem;
    transition:all ease 0.3s;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }
  
  .menu-items.mobile.active {
    display: flex;
    max-height: 500px; /* enough to show full content */
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  
  @media (max-width: 768px) {
    .menu-holder {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 50px auto;
        align-items: center;
        padding: 1rem;
    }
    
  
    .menu-items.desktop {
      display: none;
    }
  
    .mobile-toggle {
      display: block;
      margin-left: auto;
    }

    #check_availability .menu-items.mobile {
      display:flex!important;
      max-height:none!important;
      padding:1rem!important;
    }
    #check_availability .menu-item {
      margin: 0 auto;
  }
  }


  @media (min-width: 1600px) {
    .homepage-tiles-holder {
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
    }
  
    .menu-holder {
      padding: 0 3rem;
    }
  }
/* ──────────────────────────────────────────────────────────────────
   Walhonding Hills — "Reservations Opening Soon" disabled buttons
   ──────────────────────────────────────────────────────────────────
   Styled to occupy the same visual weight as an active booking
   button, but visually muted and non-interactive. The intent is
   that the page layout is unchanged whether booking is active
   or not — only the button treatment shifts.
*/
.menu-button-disabled,
.homepage-book-now-button-disabled,
.footer-book-now-disabled {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background-color: var(--stone);
    color: var(--light-sand);
    opacity: 0.75;
    cursor: default;
    user-select: none;
    pointer-events: none;
    border: 1px dashed var(--sand);
}
.menu-button-disabled i,
.homepage-book-now-button-disabled i,
.footer-book-now-disabled i {
    font-size: 0.9em;
    opacity: 0.85;
}

/* Menu-button version: inherit button sizing from .menu-button */
.menu-button.menu-button-disabled {
    /* keep parent padding/spacing */
}


/* ─────────────────────────────────────────────────────────────────
   Homepage Notify Signup
   Pre-launch data capture block. Sits between #homepage_about (cream)
   and #homepage_tiles (sage). Uses the deep tree-line green as a
   contrast background so it reads as a featured/pinned section,
   with a cream card floating on top.
   ───────────────────────────────────────────────────────────────── */

#homepage_notify_signup {
    position: relative;
    background-color: var(--forest-green-deep);
    padding: 5rem 1.5rem;
    overflow: hidden;
    color: var(--light-sand);
}

/* Subtle radial glow behind the card so the dark green has a little life. */
.notify-signup-bg {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 140%;
    background:
        radial-gradient(ellipse at center, rgba(240, 224, 144, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(176, 112, 48, 0.18) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.notify-signup-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

/* "Opening Soon" badge with pulsing dot. */
.notify-signup-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(241, 89, 42, 0.15);
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
}
.notify-signup-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--accent-orange);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(241, 89, 42, 0.7);
    animation: notify-pulse 2s infinite;
}
@keyframes notify-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(241, 89, 42, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(241, 89, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(241, 89, 42, 0); }
}

#homepage_notify_signup .notify-signup-header {
    color: var(--sand);
    font-size: 2.4rem;
    margin-bottom: 0.75rem;
}
#homepage_notify_signup .notify-signup-header i {
    color: var(--accent-orange);
    margin-right: 0.5rem;
}
.notify-signup-subheader {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 2.5rem;
    color: rgba(250, 246, 235, 0.85);
}

/* The cream card holding the form. */
.notify-signup-card {
    background-color: var(--light-sand);
    border: 1px solid var(--stone);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    text-align: left;
    color: var(--text);
}

.notify-signup-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.notify-signup-input {
    display: flex;
    flex-direction: column;
}
.notify-signup-input label,
.notify-signup-textarea label,
.notify-signup-interests-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--forest-green-dark);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.notify-signup-input label .optional,
.notify-signup-textarea label .optional,
.notify-signup-interests-label .optional {
    color: var(--grey);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}

.notify-signup-input input,
.notify-signup-textarea textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    background-color: var(--white);
    color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.notify-signup-input input:focus,
.notify-signup-textarea textarea:focus {
    outline: none;
    border-color: var(--forest-green);
    box-shadow: 0 0 0 3px rgba(80, 112, 64, 0.18);
}
.notify-signup-textarea {
    margin-top: 1rem;
}
.notify-signup-textarea textarea {
    min-height: 90px;
    resize: vertical;
    font-family: var(--body-font);
}

/* Interest checkbox tiles. */
.notify-signup-interests {
    margin-top: 1.5rem;
}
.notify-signup-interests-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.notify-interest {
    cursor: pointer;
    display: block;
    position: relative;
}
.notify-interest input {
    /* Hidden but accessible: real checkbox under the tile. */
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}
.notify-interest-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    border: 2px solid var(--light-grey);
    border-radius: 8px;
    background-color: var(--white);
    text-align: center;
    transition: all 0.2s ease;
    height: 100%;
    min-height: 90px;
}
.notify-interest-tile i {
    font-size: 1.5rem;
    color: var(--forest-green);
    transition: transform 0.2s ease, color 0.2s ease;
}
.notify-interest-tile span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.notify-interest:hover .notify-interest-tile {
    border-color: var(--forest-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
.notify-interest:hover .notify-interest-tile i {
    transform: scale(1.1);
}
.notify-interest input:checked + .notify-interest-tile {
    border-color: var(--accent-orange);
    background-color: rgba(241, 89, 42, 0.08);
}
.notify-interest input:checked + .notify-interest-tile i {
    color: var(--accent-orange);
}
.notify-interest input:focus-visible + .notify-interest-tile {
    box-shadow: 0 0 0 3px rgba(80, 112, 64, 0.25);
}
.notify-interest-wide {
    grid-column: 1 / -1;
}
.notify-interest-wide .notify-interest-tile {
    flex-direction: row;
    min-height: auto;
    padding: 0.85rem 1rem;
}
.notify-interest-wide .notify-interest-tile i {
    font-size: 1.25rem;
}

/* Honeypot — visually hidden but not display:none (so bots see it). */
.notify-signup-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notify-signup-recaptcha {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

.notify-signup-message {
    margin-top: 1rem;
    text-align: center;
    font-weight: 600;
    min-height: 1.4em;
}
.notify-signup-message.error   { color: var(--accent-orange); }
.notify-signup-message.success { color: var(--forest-green); }

.notify-signup-submit {
    margin-top: 1.25rem;
    text-align: center;
}
.notify-signup-submit button {
    background-color: var(--accent-orange);
    color: var(--white);
    border: none;
    padding: 0.9rem 2.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(241, 89, 42, 0.3);
}
.notify-signup-submit button:hover {
    background-color: #d94d23;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(241, 89, 42, 0.4);
}
.notify-signup-submit button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.notify-signup-submit button i {
    margin-right: 0.4rem;
}

.notify-signup-privacy {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--grey);
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #homepage_notify_signup {
        padding: 3rem 1rem;
    }
    #homepage_notify_signup .notify-signup-header {
        font-size: 1.8rem;
    }
    .notify-signup-subheader {
        font-size: 1rem;
        margin-bottom: 1.75rem;
    }
    .notify-signup-card {
        padding: 1.5rem 1.25rem;
    }
    .notify-signup-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .notify-signup-interests-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .notify-interest-tile {
        min-height: 80px;
        padding: 0.75rem 0.5rem;
    }
    .notify-interest-tile i {
        font-size: 1.25rem;
    }
    .notify-interest-tile span {
        font-size: 0.82rem;
    }
}
@media (max-width: 420px) {
    .notify-signup-interests-grid {
        grid-template-columns: 1fr;
    }
    .notify-interest-tile {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
        min-height: auto;
        padding: 0.75rem 1rem;
    }
}

.contact-form-recaptcha-notice {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--grey);
    line-height: 1.4;
}

.grecaptcha-badge {
    visibility: hidden !important;
}