/* ============================================================
   THE VIEW RV PARK — style.css
   1. Variables  2. Reset  3. Typography  4. Nav  5. Hero
   6. Layouts    7. Cards  8. Gallery     9. Rates 10. Testimonials
   11. Badges   12. Attractions  13. Policies  14. Weather
   15. Booking  16. Directions   17. Rules     18. Footer
   19. Utilities  20. Responsive
   ============================================================ */


/* ── 1. CSS Variables ───────────────────────────────────── */
:root {
  /* ── Brand Palette ────────────────────────────────────────
     Deep Space Blue + Blue Green + Amber Flame + Princeton Orange
     Bold coastal, adventurous, sun-soaked.
  ──────────────────────────────────────────────────────── */

  /* Source palette */
  --charcoal-blue:  #023047;   /* deep space blue  — primary dark              */
  --verdigris:      #219ebc;   /* blue green       — secondary teal             */
  --tuscan-sun:     #ffb703;   /* amber flame      — primary accent             */
  --sandy-brown:    #fb8500;   /* princeton orange — hover accent               */
  --burnt-peach:    #fb8500;   /* princeton orange                              */

  /* Semantic color aliases — used throughout the stylesheet */
  --amber:          #ffb703;   /* amber flame      — primary accent             */
  --amber-dark:     #fb8500;   /* princeton orange — hover / dark accent        */

  /* Text colors */
  --text-dark:      #023047;   /* deep space blue  — headings on light bg       */
  --text-mid:       #1a4a60;   /* medium dark blue — body text                  */
  --text-muted:     #4a7a90;   /* muted blue-gray  — secondary / captions       */
  --text-light:     #d2eaf5;   /* sky blue light   — text on dark bg            */

  /* Background colors */
  --warm-white:     #f0f8fc;   /* very light blue-tinted white                  */
  --off-white:      #e8f4fa;   /* light blue for alternate section bg           */
  --cream:          #f0f8fc;

  /* Structural palette (same roles as before) */
  --forest-dark:    #023047;   /* deep space blue — dark section/footer bg      */
  --forest:         #219ebc;   /* blue green      — main accent / gradient end  */
  --forest-pale:    #e8f4fa;   /* sky blue 900    — card icon bg, placeholders  */
  --forest-mid:     #219ebc;   /* blue green      — mid accent                  */

  /* Border / divider colors */
  --tan-pale:       #ceeef6;   /* blue green 900  — subtle borders              */
  --tan:            #9cddee;   /* blue green 800  — dashed borders              */

  /* Accent & Supporting Colors */
  --coral:          #fb8500;   /* princeton orange — secondary accent           */
  --verdigris-dark: #1a7d95;   /* deeper blue green — hover for teal elements   */

  /* Spacing scale */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;

  /* Typography — Barlow */
  --font-display: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif:   'Barlow Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows — deep space blue tinted */
  --shadow-sm:  0 1px 3px rgba(2, 48, 71, 0.10);
  --shadow-md:  0 4px 12px rgba(2, 48, 71, 0.13);
  --shadow-lg:  0 8px 24px rgba(2, 48, 71, 0.17);
  --shadow-xl:  0 16px 40px rgba(2, 48, 71, 0.22);

  /* Layout */
  --max-width:     1140px;
  --nav-height:    68px;
}


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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mid);
  background-color: var(--warm-white);
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}


/* ── 3. Typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--text-dark);
  font-weight: 700;
}

h1 { font-size: clamp(2.8rem, 7vw, 5.625rem); line-height: 1; }   /* 90px / 80px lh target */
h2 { font-size: clamp(1.9rem, 4vw, 3.4375rem); line-height: 1; }  /* 55px / 55px lh target */
h3 { font-size: clamp(1.3rem, 2.8vw, 1.75rem); }
h4 { font-size: 1.15rem; }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-sm);
}

.section-heading {
  font-family: var(--font-sans);
  color: var(--text-dark);
  margin-bottom: var(--space-md);
}

.section-subtext {
  font-size: 1rem;
  color: var(--text-mid);
  max-width: 580px;
  margin-bottom: var(--space-xl);
}

/* ── About Section Gallery (3 landscape cards in column) ─── */
.about-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.about-gallery .gallery-item {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  grid-row: unset;
  grid-column: unset;
}

.about-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.about-gallery .gallery-item:hover img {
  transform: scale(1.04);
}


/* ── 4. Navigation ──────────────────────────────────────── */

/* ─── Main bar ─────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 1.25rem;
  font-family: 'Ubuntu', sans-serif;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-nav.scrolled {
  background: #023047;
  box-shadow: 0 2px 20px rgba(0,0,0,0.45);
}

.site-nav.nav-page-color {
  background: #023047;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}


/* Push non-hero pages down so content isn't hidden under the fixed nav */
body:not(:has(.hero)) {
  padding-top: 84px;
}


/* ─── Left — Logo ───────────────────────────────────────── */
.nav-left {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: #fff;
  height: 100%;
}

.nav-logo img {
  height: 100%;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255,255,255,0.6));
}

/* Phone call button — beside the logo */
.nav-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 1rem;
  padding: 0.48rem 1.1rem;
  border-radius: 999px;
  background: #ffb703;
  color: #023047;
  font-family: 'Ubuntu', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s;
}

.nav-contact-btn i {
  font-size: 0.8rem;
}

.nav-contact-btn:hover {
  background: #ffb703;
  color: #023047;
  transform: translateY(-1px);
}

/* ─── Center — Nav Links ────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  flex: 1;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  display: inline-block;
  padding: 0 2rem;
  height: 84px;
  line-height: 84px;
  color: rgba(255,255,255,0.90);
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
}

/* Yellow underline slide-in on hover/active */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.1rem;
  right: 1.1rem;
  height: 3px;
  background: #ffb703;
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.nav-links a:hover {
  color: #fff;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-links a.active {
  color: #fff;
}

/* ─── Right — Book Now + Search ─────────────────────────── */
.nav-right {
  display: flex;
  align-items: center;
  height: 84px;
  flex-shrink: 0;
}

/* BOOK NOW pill button */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #ffb703;
  color: #023047;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  transition: background 0.2s, transform 0.15s;
  margin-right: 1rem;
}

.nav-cta:hover {
  background: #fb8500;
  transform: translateY(-1px);
  color: #023047;
}

.nav-cta-arrow {
  font-size: 0.7em;
  line-height: 1;
}

/* ─── Hamburger (mobile only) ───────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 6px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.nav-toggle:hover { background: rgba(255,255,255,0.1); }

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── 5. Hero Section ────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;

  background: url('../assets/images/IMG_4384.webp') center 70%/cover no-repeat;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl) var(--space-3xl);
  color: #fff;
  text-align: center;
}

.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.625rem);
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

.hero-tagline {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 900;
  color: #ffffff;
  max-width: 560px;
  margin: 0 auto var(--space-xl);
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Wave divider at bottom of hero */
.hero-wave {
  position: relative;
  z-index: 1;
  line-height: 0;
}

.hero-wave svg {
  display: block;
  width: 100%;
}


/* ── 6. Section Layouts ──────────────────────────────────── */
.section {
  padding: var(--space-4xl) var(--space-xl);
}

.section-alt {
  background-color: var(--off-white);  /* #f3f3ed medium tan */
}

.section-dark {
  background-color: #023047;
  color: rgba(255,255,255,0.85);
  font-family: 'Overpass', sans-serif;
  font-weight: 400;
  word-spacing: 0.15em;
}

.section-dark .section-heading {
  color: #fff;
}

.section-dark .section-subtext {
  color: rgba(255,255,255,0.72);
}

.section-dark .section-eyebrow {
  color: var(--amber);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}


/* ── 7. Feature / Info Cards ────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(188,186,177,0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card-icon {
  width: 56px;
  height: 56px;
  background: var(--forest-pale);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  font-size: 1.5rem;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
}

.card p {
  font-size: 0.9rem;
  color: var(--text-mid);
}

/* Small category label above card title */
.card-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.card-dark {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
}

.card-dark h3 {
  color: #fff;
  font-family: 'Overpass', sans-serif;
  letter-spacing: 0.08em;
  word-spacing: 0.12em;
}

.card-dark p {
  color: rgba(255,255,255,0.68);
}

.card-dark .card-icon {
  background: rgba(33,158,188,0.15);  /* verdigris tint */
}

.card-bright {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
  border-radius: 20px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.35s ease;
  will-change: transform;
}

.card-bright:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-8px) scale(1.02);
}

.card-bright .card-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-bright:hover .card-icon {
  transform: scale(1.18) rotate(-6deg);
}


/* ── 8. Photo Gallery ───────────────────────────────────── */
.gallery-item {
  background: var(--forest-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Show a subtle placeholder when image hasn't loaded yet */
.gallery-item img[src] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item img:not([src]),
.gallery-item img[src=""] {
  display: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.03);
}



/* ── 9. Simple Rate Card ─────────────────────────────────── */
.simple-rate-card {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--tan-pale);
  overflow: hidden;
}

.simple-rate-card-header {
  background: var(--forest-dark);
  color: #fff;
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
}

.simple-rate-card-header h3 {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.simple-rate-card-header p {
  font-size: 0.9rem;
  opacity: 0.75;
  margin: 0;
}

.simple-rate-table {
  width: 100%;
  border-collapse: collapse;
}

.simple-rate-table tr {
  border-bottom: 1px solid var(--tan-pale);
}

.simple-rate-table tr:last-child {
  border-bottom: none;
}

.simple-rate-table td {
  padding: 0.9rem var(--space-2xl);
  font-size: 0.95rem;
  color: var(--text-mid);
}

.simple-rate-table td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--text-dark);
  font-size: 1.05rem;
}

.simple-rate-card-footer {
  background: var(--off-white);
  padding: var(--space-lg) var(--space-2xl);
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  border-top: 1px solid var(--tan-pale);
}

/* ── 10. Badges ─────────────────────────────────────────── */
.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
  margin-top: var(--space-2xl);
}

.badge {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--forest-pale);
  border: 1px solid rgba(188,186,177,0.4);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-dark);
}

.badge-icon {
  font-size: 1.1rem;
}


/* ── Featured Attraction Cards ──────────────────────────── */
.featured-attractions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 1rem;
}

.featured-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--forest-dark);
  box-shadow: 0 6px 24px rgba(2, 48, 71, 0.28);
  transition: transform 0.2s, box-shadow 0.2s;
}

.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(2, 48, 71, 0.38);
}

.featured-card-img {
  width: 100%;
  height: 320px;
  background-size: cover;
  background-position: center;
}

.featured-card-body {
  padding: 2rem;
  font-family: 'Overpass', sans-serif;
  background: linear-gradient(160deg, #023047 0%, #1a4a60 100%);
  border-top: 2px solid var(--amber);
}

.featured-card-tag {
  display: inline-block;
  font-family: 'Overpass', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 0.5rem;
}

.featured-card-body h3 {
  font-family: 'Overpass', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.featured-card-body p {
  font-family: 'Overpass', sans-serif;
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.featured-card-distance {
  font-family: 'Overpass', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--verdigris);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

@media (max-width: 768px) {
  .featured-attractions {
    grid-template-columns: 1fr;
  }
}

/* ── 12. Policies / Notes ───────────────────────────────── */
.policies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-xl);
}

.policy-block {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--tan-pale);
}

.policy-block h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--amber);
}

.policy-block ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.policy-block ul li {
  font-size: 0.875rem;
  color: var(--text-mid);
  padding-left: var(--space-md);
  position: relative;
}

.policy-block ul li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--amber-dark);
  font-size: 1.2rem;
  line-height: 1.4;
}


/* ── 14. Weather Widget ─────────────────────────────────── */
.weather-widget {
  background: linear-gradient(135deg, #023047 0%, #219ebc 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.weather-temp {
  font-size: 3rem;
  font-family: var(--font-serif);
  font-weight: bold;
  line-height: 1;
}

.weather-meta {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 4px;
}

.weather-icon {
  font-size: 3.5rem;
}

.weather-placeholder-note {
  font-size: 0.75rem;
  opacity: 0.65;
  margin-top: var(--space-sm);
}


/* ── 15. Booking Form ───────────────────────────────────── */
.booking-wrapper {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-3xl);
  align-items: start;
}

.form-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--tan-pale);
}

.form-card h2 {
  color: var(--forest-dark);
  margin-bottom: var(--space-sm);
}

.form-card .form-subtitle {
  color: var(--text-mid);
  font-size: 0.95rem;
  margin-bottom: var(--space-2xl);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-lg);
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-dark);
  margin-bottom: var(--space-xs);
}

.form-group label .required {
  color: var(--amber-dark);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: 0.7rem var(--space-md);
  border: 1.5px solid #ddd;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--warm-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-control:focus {
  border-color: var(--amber-dark);
  box-shadow: 0 0 0 3px rgba(33,158,188,0.20);
}

.form-control::placeholder {
  color: #bbb;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.form-notice {
  background: var(--off-white);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 0.85rem;
  color: var(--text-dark);
  margin-bottom: var(--space-xl);
}

/* Success / error messages */
#form-message {
  display: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: var(--space-lg);
  text-align: center;
}

#form-message.success {
  display: block;
  background: #f0fdf4;
  color: #166534;
  border: 1.5px solid #86efac;
}

#form-message.error {
  display: block;
  background: #fde8e8;
  color: #b00;
  border: 1.5px solid #f99;
}

/* Booking sidebar */
.booking-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sidebar-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--tan-pale);
}

.sidebar-card h4 {
  color: var(--text-dark);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--amber);
}

.sidebar-card ul li {
  font-size: 0.85rem;
  color: var(--text-mid);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--off-white);
  display: flex;
  justify-content: space-between;
}

.sidebar-card ul li:last-child {
  border-bottom: none;
}

.sidebar-card .contact-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: var(--text-mid);
  padding: var(--space-xs) 0;
}

.sidebar-card .contact-line strong {
  color: var(--forest-dark);
}


/* ── 16. Maps & Directions ──────────────────────────────── */
.map-embed {
  width: 100%;
  height: 440px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.map-placeholder {
  text-align: center;
  color: var(--forest-mid);
  padding: var(--space-xl);
}

.map-placeholder p {
  font-size: 0.85rem;
  opacity: 0.7;
  font-family: monospace;
}

.directions-block {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--tan-pale);
}

.directions-block h3 {
  color: var(--text-dark);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--amber);
}

.directions-step {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  align-items: flex-start;
}

.step-num {
  width: 28px;
  height: 28px;
  background: var(--amber);
  color: var(--text-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.directions-step p {
  font-size: 0.9rem;
  color: var(--text-mid);
  margin: 0;
}


/* ── 17. Amenities / Park Rules ─────────────────────────── */
.rules-section {
  max-width: 800px;
  margin: 0 auto;
}

.rules-group {
  margin-bottom: var(--space-2xl);
}

.rules-group h3 {
  color: var(--text-dark);
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--off-white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--amber);
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: var(--space-md);
}

.rules-list li {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.6;
  position: relative;
  padding-left: var(--space-lg);
}

.rules-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--amber-dark);
}

.park-map-placeholder {
  background: var(--off-white);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--tan);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-3xl);
  color: var(--text-muted);
}

.park-map-placeholder span {
  font-size: 3rem;
  opacity: 0.4;
}

.park-map-placeholder p {
  font-size: 0.9rem;
  opacity: 0.7;
  max-width: 360px;
}

.park-map-placeholder code {
  font-size: 0.8rem;
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}


/* ── 18. Footer ─────────────────────────────────────────── */
.site-footer {
  background: var(--forest-dark);
  color: rgba(255,255,255,0.75);
  padding: var(--space-3xl) var(--space-xl) var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
  align-items: start;
}

.footer-brand .nav-logo {
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
}

.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.7;
  opacity: 0.7;
  margin-bottom: 0;
}

.footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-col ul li a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}

.footer-col ul li a:hover {
  color: var(--amber);
}

.footer-col address {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.8;
}

.footer-col address a {
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}

.footer-col address a:hover {
  color: var(--amber);
}

.footer-map {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

.footer-bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  font-size: 0.8rem;
  opacity: 0.5;
  flex-wrap: wrap;
}


/* ── 19. Utilities ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: all 0.2s;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--amber);         /* #ffb703 tuscan sun */
  color: var(--text-dark);          /* #011c2a deep charcoal */
  border-color: var(--amber);
}

.btn-primary:hover {
  background: var(--amber-dark);    /* #fb8500 sandy brown hover */
  border-color: var(--amber-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,183,3,0.40);
}

.btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--forest-dark);
  border-color: var(--forest-dark);
}

.btn-outline:hover {
  background: var(--forest-dark);
  color: #fff;
}

.btn-full { width: 100%; }

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.text-center { text-align: center; }
.mt-sm  { margin-top: var(--space-sm);  }
.mt-md  { margin-top: var(--space-md);  }
.mt-lg  { margin-top: var(--space-lg);  }
.mt-xl  { margin-top: var(--space-xl);  }
.mt-2xl { margin-top: var(--space-2xl); }

.divider {
  border: none;
  border-top: 1px solid var(--tan-pale);
  margin: var(--space-3xl) 0;
}

.contact-info-strip {
  background: var(--forest-dark);
  color: #fff;
  padding: var(--space-md) var(--space-xl);
}

.contact-info-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  font-size: 0.875rem;
}

.contact-info-strip a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: rgba(255,255,255,0.85);
  transition: color 0.2s;
}

.contact-info-strip a:hover {
  color: var(--amber);
}

/* ── 20. Responsive / Media Queries ─────────────────────── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .booking-wrapper {
    grid-template-columns: 1fr;
  }

  .booking-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .four-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Nav breakpoint: collapse links at 900px ─────────────── */
@media (max-width: 900px) {
  /* Show hamburger, hide search wrap (keep logo + Book Now) */
  .nav-toggle {
    display: flex;
  }

  .nav-search-wrap {
    display: none;
  }

  /* Nav links drop down below the bar */
  .nav-links {
    display: none;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: #023047;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    z-index: 99;
    gap: 0;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    height: auto;
    line-height: 1;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .nav-links a::after {
    display: none;  /* no underline on mobile */
  }

  /* Compact phone button on mobile */
  .nav-contact-btn {
    font-size: 0.7rem;
    padding: 0.38rem 0.75rem;
    margin-left: 0.5rem;
    letter-spacing: 0.03em;
  }

  /* Show Book Now in top-right corner on mobile */
  .nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-right .nav-cta {
    display: inline-flex;
    font-size: 0.72rem;
    padding: 0.4rem 0.85rem;
    letter-spacing: 0.04em;
  }
}

/* ── Mobile: preserve desktop layout, scale everything down ─ */
@media (max-width: 768px) {
  :root {
    --space-4xl: 2.5rem;
    --space-3xl: 1.5rem;
    --space-2xl: 1.25rem;
    --space-xl:  1rem;
    --space-lg:  0.75rem;
    --space-md:  0.75rem;
  }

  body { font-size: 14px; }

  /* Keep two-col as 2 columns — reduce gap instead of stacking */
  .two-col { gap: 1rem; }

  /* Keep three-col as 3 columns with tighter gap */
  .three-col { gap: 0.5rem; }

  /* Keep four-col as 2 columns */
  .four-col { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

  /* Footer: keep 2 columns (set at 1024px), reduce gap */
  .footer-grid { gap: 1rem; }

  /* Featured attractions: keep 3 columns — override the inner 768px rule */
  .featured-attractions {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem;
  }

  .featured-card-img { height: 140px; }

  .featured-card-body {
    padding: 0.75rem;
  }

  .featured-card-body h3 { font-size: 0.9rem; margin-bottom: 0.4rem; }
  .featured-card-body p  { font-size: 0.75rem; line-height: 1.5; margin-bottom: 0.5rem; }
  .featured-card-tag     { font-size: 0.6rem; }
  .featured-card-distance { font-size: 0.65rem; }

  /* Cards: tighter padding */
  .card { padding: 0.85rem; }
  .card-icon { width: 40px; height: 40px; font-size: 1.1rem; margin-bottom: 0.5rem; }
  .card h3 { font-size: 0.9rem; }
  .card p  { font-size: 0.78rem; }

  /* Keep form rows as 2 columns */
  .form-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; }

  /* Booking sidebar: stack to 1 column below form on mobile */
  .booking-sidebar {
    grid-template-columns: 1fr;
  }

  /* Stack Check-In and Prefer to Call vertically */
  .booking-sidebar .policies-grid {
    grid-template-columns: 1fr;
  }

  /* Form card */
  .form-card { padding: 1rem; }

  /* Section header spacing */
  .section-header { margin-bottom: 1rem; }

  /* Rate table */
  .simple-rate-table td { padding: 0.6rem 1rem; font-size: 0.85rem; }

  /* Weather widget */
  .weather-widget { gap: 0.75rem; padding: 0.85rem; }
  .weather-temp   { font-size: 2rem; }
  .weather-icon   { font-size: 2.5rem; }

  /* Hero: keep buttons inline */
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .hero-actions .btn { font-size: 0.75rem; padding: 0.6rem 1.1rem; }

  /* Contact strip: column on very small */
  .contact-info-strip .container {
    gap: var(--space-md);
    font-size: 0.8rem;
  }

  /* Map embed */
  .map-embed { height: 280px; }

  /* Page header */
  .page-header { padding: 1.5rem 1rem; }

  /* Directions */
  .directions-block { padding: 1rem; }

  /* Sidebar cards */
  .sidebar-card { padding: 0.85rem; }

  /* ── About section: stack to single column on mobile ─── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  /* Photo carousel */
  .about-gallery {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 0;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  }

  /* Hide scrollbar */
  .about-gallery::-webkit-scrollbar { display: none; }
  .about-gallery { -ms-overflow-style: none; scrollbar-width: none; }

  .about-carousel-wrap {
    box-shadow: 0 6px 24px rgba(0,0,0,0.14);
    border-radius: 16px;
  }

  .about-gallery .gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 16 / 9;
  }

  .about-gallery .gallery-item img {
    object-position: center center;
  }

  /* Carousel dots */
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 0.75rem;
  }

  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tan-pale);
    transition: background 0.2s, transform 0.2s;
  }

  .dot.active {
    background: var(--forest);
    transform: scale(1.3);
  }

  /* Photo frame: position context for overlay buttons */
  .carousel-photo-frame {
    display: block;
    width: 100%;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
  }

  /* Overlay arrow buttons */
  .carousel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.82);
    color: var(--forest-dark);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.15s;
    z-index: 10;
  }

  .carousel-btn:active {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%) scale(0.93);
  }

  .carousel-btn--next { right: 12px; }
}

/* Hide dots and carousel buttons on desktop */
.carousel-dots { display: none; }
.carousel-btn { display: none; }

@media (max-width: 480px) {
  :root {
    --space-4xl: 2rem;
    --space-3xl: 1.25rem;
    --space-2xl: 1rem;
    --space-xl:  0.75rem;
    --space-lg:  0.5rem;
    --space-md:  0.5rem;
  }

  body { font-size: 13px; }

  /* Three-col: 2 columns on very small phones */
  .three-col { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }

  /* Featured attractions: 2 columns on very small */
  .featured-attractions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem;
  }

  .featured-card-img  { height: 100px; }
  .featured-card-body { padding: 0.5rem; }
  .featured-card-body h3 { font-size: 0.8rem; }
  .featured-card-body p  { display: none; }

  /* Gallery: 2 columns on tiny screens */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  /* Four-col stays 2 columns */
  .four-col { grid-template-columns: repeat(2, 1fr); }

  /* Form rows collapse to 1 column on tiny screens */
  .form-row { grid-template-columns: 1fr; }

  .nav-container { padding: 0 var(--space-md); }
  .section { padding: var(--space-3xl) var(--space-md); }

  /* Hero min height reduced */
  .hero { min-height: 380px; }

  /* Footer stays 2 columns */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  /* Map embed smaller */
  .map-embed { height: 220px; }
}