/* ============================================================
   FRASER COAST ADVENTURES — Complete Brand CSS
   Playfair Display + Nunito Sans | Warm Australian Adventure
   Brand: Sand Dune #D4A853 | Pacific Teal #2A9D8F
          Eucalyptus #4A7C59 | Deep Coast #1B3A4B
          Warm White #FAF7F2 | Sunset Ember #E07B4C
          Driftwood #8B7355
   ============================================================ */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Nunito+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* === DESIGN TOKENS === */
:root {
  /* Brand palette */
  --sand-dune:      #D4A853;   /* Primary — CTAs, warmth, Fraser Island sand */
  --sand-dune-dark:  #B8893A;   /* Hover state */
  --sand-dune-light: rgba(212, 168, 83, 0.15);

  --pacific-teal:    #2A9D8F;   /* Trust, water, nature */
  --pacific-teal-dark: #1F7A6F;
  --pacific-teal-light: rgba(42, 157, 143, 0.1);

  --eucalyptus:      #4A7C59;   /* Forest, calm, island interior */
  --eucalyptus-dark: #3A6247;

  --deep-coast:      #1B3A4B;  /* Authority, text, night sky */
  --deep-coast-light: #264B60;

  --warm-white:      #FAF7F2;  /* Backgrounds */
  --warm-white-dark: #F0EBE3;  /* Card backgrounds, dividers */

  --sunset-ember:    #E07B4C;  /* Accent pops, urgency */
  --sunset-ember-dark: #C4663A;

  --driftwood:       #8B7355;  /* Subtle borders, muted text */
  --driftwood-light: #A89680;

  /* Neutrals */
  --white:    #FFFFFF;
  --text:     #1B3A4B;         /* Use deep-coast as text colour */
  --text-sec: #5A4A3A;         /* Warm readable secondary */
  --text-faint: #9A8878;      /* Metadata, captions */

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito Sans', system-ui, sans-serif;

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

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(27, 58, 75, 0.08), 0 1px 2px rgba(27, 58, 75, 0.04);
  --shadow-card-hover: 0 12px 32px rgba(27, 58, 75, 0.16), 0 4px 8px rgba(27, 58, 75, 0.08);
  --shadow-header: 0 2px 12px rgba(27, 58, 75, 0.12);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Container */
  --container: 1100px;
  --container-pad: 1.5rem;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--warm-white);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--warm-white-dark); }
::-webkit-scrollbar-thumb { background: var(--deep-coast); border-radius: 4px; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--deep-coast);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; }

p { margin-bottom: 0.85rem; max-width: 680px; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--pacific-teal);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--deep-coast); }

strong { font-weight: 600; }

/* === LAYOUT === */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.narrow-content {
  max-width: 720px;
  margin: 0 auto;
}

.text-center { text-align: center; }
.bg-deep-coast { background: var(--deep-coast); }
.bg-warm-white { background: var(--warm-white-dark); }
.text-white { color: var(--white); }

/* === SITE HEADER === */
.site-header {
  background: var(--deep-coast);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--shadow-header);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  gap: var(--space-lg);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.logo span {
  color: var(--sand-dune);
}

.logo:hover {
  color: var(--white);
  opacity: 0.9;
}

nav, .site-nav {
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
  align-items: center;
}

nav a, .site-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

nav a:hover, .site-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

nav a.active, .site-nav a.active {
  background: rgba(212, 168, 83, 0.2);
  color: var(--sand-dune);
}

/* === HOMEPAGE HERO === */
.home-hero {
  background: var(--deep-coast);
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl) 0 calc(var(--space-2xl) + 1rem);
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(42, 157, 143, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(212, 168, 83, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

.home-hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath d='M0,80 L0,40 Q150,0 300,30 Q450,60 600,20 Q750,-20 900,25 Q1050,70 1200,30 L1200,80 Z' fill='%23FAF7F2'/%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
}

.home-hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(212, 168, 83, 0.2);
  border: 1px solid rgba(212, 168, 83, 0.35);
  color: var(--sand-dune);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  margin-bottom: var(--space-lg);
}

.home-hero-eyebrow::before {
  content: '✦';
  font-size: 0.6rem;
}

.home-hero h1 {
  color: var(--white);
  max-width: 760px;
  margin: 0 auto var(--space-lg);
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

.home-hero .lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 580px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.home-hero-ctas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.home-hero-stats {
  display: flex;
  gap: var(--space-xl);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.home-hero-stat {
  text-align: center;
}

.home-hero-stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--sand-dune);
  line-height: 1;
}

.home-hero-stat-label {
  display: block;
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  border: none;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--sand-dune);
  color: #1a1200;
  box-shadow: 0 2px 8px rgba(212, 168, 83, 0.35);
}
.btn-primary:hover {
  background: var(--sand-dune-dark);
  color: #1a1200;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 168, 83, 0.45);
}

.btn-secondary {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.18);
  color: var(--white);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-color: rgba(255,255,255,0.8);
}

/* BOOK BTN — primary CTA for money pages */
.book-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sand-dune);
  color: #1a1200;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 8px rgba(212, 168, 83, 0.35);
  white-space: nowrap;
}

.book-btn::after {
  content: '→';
  font-size: 0.9rem;
  transition: transform var(--transition-fast);
}

.book-btn:hover {
  background: var(--sand-dune-dark);
  color: #1a1200;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 168, 83, 0.45);
}

.book-btn:hover::after {
  transform: translateX(3px);
}

/* CTA BAND */
.cta-band {
  background: var(--deep-coast);
  padding: var(--space-xl) 0;
  text-align: center;
}

.cta-band h2 {
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.cta-band p {
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin: 0 auto var(--space-lg);
}

.cta-band .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sand-dune);
  color: #1a1200;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.cta-band .btn-cta:hover {
  background: var(--sand-dune-dark);
  color: #1a1200;
  transform: translateY(-1px);
}

/* === SECTION SPACING === */
.section-pad {
  padding: var(--space-2xl) 0;
}

/* === VALUE PROPS (HOMEPAGE) === */
.value-prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: var(--space-xl);
}

.value-prop-item {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(27,58,75,0.06);
}

.value-prop-item h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--deep-coast);
  margin-bottom: 0.5rem;
}

.value-prop-item p {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.65;
  margin: 0;
}

/* === TOWN CARDS (HOMEPAGE PILLARS) === */
.town-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(27,58,75,0.06);
  margin-bottom: 2.5rem;
}

.town-card:last-child { margin-bottom: 0; }

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

.town-card-image {
  height: 200px;
  background: var(--deep-coast);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.town-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,58,75,0.35) 0%, transparent 60%);
}

.town-card:hover .town-card-image {
  background-size: 110%;
}

.town-card-content {
  padding: 1.35rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.town-card-badge {
  display: inline-block;
  background: var(--pacific-teal);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  width: fit-content;
}

.town-card-content h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--deep-coast);
  margin-bottom: 0.6rem;
}

.town-card-content p {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.65;
  margin-bottom: 0.75rem;
  flex: 1;
}

.town-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

.town-card .btn {
  align-self: flex-start;
}

/* === HOMEPAGE PERMIT CALLOUT === */
.permit-callout {
  background: var(--deep-coast);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.permit-callout h2 {
  color: var(--white);
  margin-bottom: var(--space-md);
}

.permit-callout p {
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  margin: 0 auto var(--space-xl);
}

/* === TRUST NOTE === */
.trust-note {
  background: var(--warm-white-dark);
  border: 1px solid var(--driftwood-light);
  border-left: 4px solid var(--driftwood);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.88rem;
  color: var(--text-sec);
  line-height: 1.7;
}

.trust-note strong {
  color: var(--deep-coast);
}

/* === TOWN HERO (SUB-PAGES) === */
.town-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--deep-coast);
}

.town-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.town-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(27, 58, 75, 0.92) 0%,
    rgba(27, 58, 75, 0.55) 45%,
    rgba(27, 58, 75, 0.15) 100%
  );
}

.town-hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-2xl) 0 calc(var(--space-xl) + 2rem);
  width: 100%;
}

.town-hero-content .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.town-hero-text {}

.town-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sand-dune);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.town-hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sand-dune);
}

.town-hero h1 {
  color: var(--white);
  max-width: 600px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
  margin-bottom: 0.6rem;
}

.town-hero-tagline {
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  max-width: 480px;
  line-height: 1.6;
}

.town-hero-ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.town-hero-ctas .book-btn {
  font-size: 0.875rem;
}

@media (max-width: 480px) {
  .town-hero-ctas {
    margin-top: 1rem;
  }
}

.town-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.town-hero-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hero-badge.gold {
  background: rgba(212, 168, 83, 0.25);
  border-color: rgba(212, 168, 83, 0.5);
  color: var(--sand-dune);
}

/* === HERO TRUST CLUSTER === */
.hero-trust-cluster {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.hero-trust-item {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.hero-trust-item::before {
  content: '✓';
  color: var(--pacific-teal);
  font-size: 0.65rem;
  flex-shrink: 0;
}



/* === PRICE EXPECTATION BOX === */
.price-expectation-box {
  background: rgba(42, 157, 143, 0.08);
  border: 1px solid rgba(42, 157, 143, 0.25);
  border-left: 4px solid var(--pacific-teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.price-expectation-header {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--deep-coast);
  margin-bottom: 0.6rem;
}

.price-expectation-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(42, 157, 143, 0.12);
}

.price-expectation-row:last-of-type {
  border-bottom: none;
}

.price-expectation-label {
  font-size: 0.875rem;
  color: var(--text-sec);
}

.price-expectation-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--deep-coast);
  font-weight: 600;
}

.price-expectation-note {
  font-size: 0.78rem;
  color: var(--pacific-teal);
  margin-top: 0.6rem;
  font-weight: 500;
}

/* === CONTENT SECTIONS === */
.content-section {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--warm-white-dark);
}

.content-section:last-child { border-bottom: none; }

.content-section h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  margin-bottom: var(--space-md);
  padding-top: var(--space-sm);
}

.content-section h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-coast);
  margin-bottom: 0.5rem;
}

.content-section p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 720px;
}

.content-section ul {
  margin: var(--space-md) 0 var(--space-md) 1.5rem;
  max-width: 700px;
}

.content-section li {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 0.4rem;
  color: var(--text);
}

.content-section ul li strong {
  color: var(--deep-coast);
}

/* === BACK LINK === */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--deep-coast);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 1.5rem 0 0.5rem;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.back-link:hover {
  color: var(--pacific-teal);
  gap: 0.6rem;
}

.back-link::before {
  content: '←';
  font-size: 0.95rem;
  transition: transform var(--transition-fast);
}

.back-link:hover::before {
  transform: translateX(-3px);
}

/* === PRODUCT CARDS (4WD PAGE) === */
.product-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: var(--space-md);
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(27,58,75,0.07);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

.product-card-header {
  background: var(--deep-coast);
  padding: 1rem 1.25rem;
}

.product-card-header h3 {
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.35;
}

.product-card-body {
  padding: 1.25rem;
}

.product-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.product-meta-item {
  font-size: 0.8rem;
  color: var(--text-faint);
}

.product-meta-item strong {
  color: var(--text-sec);
  font-weight: 600;
}

.product-card-description {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.7;
  margin: 0;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--warm-white);
  border-top: 1px solid var(--warm-white-dark);
  flex-wrap: wrap;
}

.product-price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--deep-coast);
  line-height: 1;
}

.product-price span {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-faint);
  font-weight: 400;
}

.btn-book {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sand-dune);
  color: #1a1200;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 6px rgba(212, 168, 83, 0.3);
}

.btn-book::after {
  content: '→';
  transition: transform var(--transition-fast);
}

.btn-book:hover {
  background: var(--sand-dune-dark);
  color: #1a1200;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 168, 83, 0.4);
}

.btn-book:hover::after {
  transform: translateX(3px);
}

/* === COMPARISON TABLE === */
.comparison-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--warm-white-dark);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--white);
}

.comparison-table th {
  background: var(--deep-coast);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  text-align: left;
}

.comparison-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--warm-white-dark);
  vertical-align: top;
  color: var(--text-sec);
  line-height: 1.5;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table tr:hover td {
  background: rgba(250, 247, 242, 0.6);
}

/* === PACKING GRID === */
.packing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  margin-top: var(--space-md);
}

.packing-item {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  color: var(--text-sec);
  border-left: 3px solid var(--pacific-teal);
  box-shadow: var(--shadow-card);
  line-height: 1.5;
}

/* === FAQ LIST === */
.faq-list {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--warm-white-dark);
}

.faq-item:last-child { border-bottom: none; }

.faq-question {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pacific-teal);
  padding: 1rem 0 0.75rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--deep-coast);
}

.faq-answer {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.75;
  padding: 0 0 1rem;
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

/* Permit page uses these class names */
.faq-q {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pacific-teal);
  padding: 1rem 0 0.75rem;
  cursor: pointer;
  transition: color var(--transition-fast);
  display: block;
  border-bottom: 1px solid var(--warm-white-dark);
}

.faq-q:hover { color: var(--deep-coast); }

.faq-a {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.75;
  padding: 0.75rem 0 1rem;
  display: none;
}

.faq-item.open .faq-a,
.faq-item.faq-a { /* fallback for adjacent display */
  display: block;
}

/* Make FAQ items open on click via JS toggle */
.faq-item.is-open .faq-a { display: block; }

/* === OPERATOR CARDS (WHALE PAGE) === */
.operator-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(27,58,75,0.07);
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

.operator-card-header {
  background: var(--deep-coast);
  padding: 1.15rem 1.35rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.operator-card-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.operator-card-header h3 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.operator-tag {
  display: inline-block;
  background: rgba(212, 168, 83, 0.2);
  border: 1px solid rgba(212, 168, 83, 0.4);
  color: var(--sand-dune);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 100px;
  letter-spacing: 0.05em;
  width: fit-content;
}

.operator-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.price-from {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.price-amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--sand-dune);
  line-height: 1;
}

.price-per {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
}

.operator-card > p {
  padding: 1rem 1.35rem;
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.7;
  margin: 0;
  border-top: 1px solid var(--warm-white-dark);
}

.operator-details {
  display: grid;
  gap: 0.5rem;
  padding: 0 1.35rem 1rem;
}

.detail-item {
  font-size: 0.82rem;
  color: var(--text-sec);
}

.detail-item strong {
  color: var(--deep-coast);
  font-weight: 600;
}

.operator-cta {
  padding: 0.85rem 1.35rem 1.15rem;
  border-top: 1px solid var(--warm-white-dark);
}

/* === SEASON CARDS (WHALE PAGE) === */
.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: var(--space-lg);
}

.season-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  border-left: 5px solid var(--driftwood-light);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.season-card h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--deep-coast);
  margin-bottom: 0.4rem;
}

.season-card p {
  font-size: 0.85rem;
  color: var(--text-sec);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.season-rating {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  border-radius: 100px;
}

.season-rating.Best {
  background: rgba(212, 168, 83, 0.2);
  color: var(--sand-dune-dark);
  border: 1px solid rgba(212, 168, 83, 0.4);
}

.season-rating.Good {
  background: rgba(42, 157, 143, 0.15);
  color: var(--pacific-teal-dark);
  border: 1px solid rgba(42, 157, 143, 0.3);
}

.season-rating.Moderate {
  background: rgba(74, 124, 89, 0.15);
  color: var(--eucalyptus-dark);
  border: 1px solid rgba(74, 124, 89, 0.3);
}

.season-rating.Low {
  background: var(--warm-white-dark);
  color: var(--driftwood);
  border: 1px solid var(--driftwood-light);
}

.season-rating.None {
  background: var(--warm-white-dark);
  color: var(--text-faint);
  border: 1px solid var(--warm-white-dark);
}

/* === SEASON BLOCK (alternative format, used on 4WD page) === */
.season-block {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--eucalyptus);
  box-shadow: var(--shadow-card);
}

.season-block-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.season-block-month {
  font-weight: 700;
  color: var(--deep-coast);
  font-size: 0.9rem;
}

.season-block-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
}

/* === CALLOUT BOX === */
.callout-box {
  background: var(--pacific-teal-light);
  border-left: 4px solid var(--pacific-teal);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-lg) 0;
}

.callout-box h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--deep-coast);
  margin-bottom: 0.6rem;
}

.callout-box ul {
  margin: 0;
  padding-left: 1.25rem;
}

.callout-box li {
  font-size: 0.88rem;
  color: var(--text-sec);
  line-height: 1.65;
  margin-bottom: 0.3rem;
}

.callout-box li strong {
  color: var(--deep-coast);
}

/* === BOOKING NOTE === */
.booking-note {
  background: rgba(42, 157, 143, 0.07);
  border-left: 4px solid var(--pacific-teal);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.7;
  margin-top: var(--space-md);
}

.booking-note strong {
  color: var(--deep-coast);
  font-weight: 600;
}

.booking-note-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--deep-coast);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* === CHARTER CARDS (DAY TOURS PAGE) === */
.charter-list {
  display: grid;
  gap: 1rem;
  margin-top: var(--space-md);
}

.charter-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(27,58,75,0.07);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: start;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

.charter-card-main {}

.charter-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.charter-card h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-coast);
  margin: 0;
  line-height: 1.3;
}

.charter-card-type {
  font-size: 0.78rem;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.charter-card > p {
  font-size: 0.88rem;
  color: var(--text-sec);
  line-height: 1.65;
  margin: 0 0 0.75rem;
}

.charter-card-species {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.species-pill {
  background: rgba(27, 58, 75, 0.07);
  color: var(--deep-coast);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  border: 1px solid rgba(27, 58, 75, 0.1);
}

.charter-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 120px;
}

.charter-price {
  text-align: right;
}

.charter-price-from {
  font-size: 0.7rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  display: block;
}

.charter-price-amount {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--deep-coast);
  display: block;
  line-height: 1;
}

.charter-price-note {
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: right;
}

/* === PERMIT GUIDE PAGE HERO === */
.page-hero {
  background: var(--deep-coast);
  padding: var(--space-2xl) 0;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(212, 168, 83, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sand-dune);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.page-hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sand-dune);
}

.page-hero h1 {
  color: var(--white);
  max-width: 640px;
  margin-bottom: var(--space-md);
}

.page-hero .lead {
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.7;
  margin: 0;
}

/* === PERMIT GUIDE ARTICLE BODY === */
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--container-pad) var(--space-2xl);
}

.article-body h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  color: var(--deep-coast);
  margin: var(--space-xl) 0 var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--warm-white-dark);
}

.article-body h2:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.article-body h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep-coast);
  margin: var(--space-lg) 0 var(--space-sm);
}

.article-body p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-sec);
  margin-bottom: 0.85rem;
}

.article-body ul, .article-body ol {
  margin: var(--space-md) 0 var(--space-md) 1.5rem;
  padding: 0;
}

.article-body li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-sec);
  margin-bottom: 0.4rem;
}

.article-body li strong {
  color: var(--deep-coast);
}

/* TOC */
.toc {
  background: var(--warm-white-dark);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: var(--space-xl);
}

.toc h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 0.75rem;
}

.toc ol {
  margin: 0;
  padding-left: 1.25rem;
  counter-reset: none;
}

.toc li {
  font-size: 0.875rem;
  margin-bottom: 0.4rem;
}

.toc a {
  color: var(--pacific-teal);
  font-weight: 600;
}

.toc a:hover { color: var(--deep-coast); }

/* INFO BOX */
.info-box {
  background: rgba(42, 157, 143, 0.07);
  border: 1px solid rgba(42, 157, 143, 0.2);
  border-left: 4px solid var(--pacific-teal);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-md) 0;
  font-size: 0.88rem;
  color: var(--text-sec);
  line-height: 1.7;
}

.info-box strong {
  color: var(--deep-coast);
}

/* NOTE */
.note {
  background: rgba(212, 168, 83, 0.12);
  border-left: 4px solid var(--sand-dune);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-md) 0;
  font-size: 0.88rem;
  color: var(--text-sec);
  line-height: 1.7;
}

.note strong {
  color: var(--deep-coast);
}

/* PRICE TABLE */
.price-table-wrap {
  overflow-x: auto;
  margin: var(--space-md) 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--warm-white-dark);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--white);
}

.price-table th {
  background: var(--deep-coast);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  text-align: left;
}

.price-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--warm-white-dark);
  vertical-align: top;
}

.price-table tr:last-child td { border-bottom: none; }

.tour-name {
  font-weight: 600;
  color: var(--deep-coast);
}

.tour-price {
  font-family: var(--font-display);
  color: var(--deep-coast);
  white-space: nowrap;
}

/* CTA BANNER */
.cta-banner {
  background: var(--deep-coast);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  margin-top: var(--space-xl);
}

.cta-banner h2 {
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.cta-banner p {
  color: rgba(255,255,255,0.72);
  max-width: 480px;
  margin: 0 auto var(--space-lg);
}

.cta-banner .btn {
  background: var(--sand-dune);
  color: #1a1200;
  font-weight: 700;
}

.cta-banner .btn:hover {
  background: var(--sand-dune-dark);
  color: #1a1200;
}

/* === RELATED TOWNS === */
.related-towns {
  background: var(--white);
  padding: var(--space-xl) 0;
  margin-top: var(--space-xl);
  border-top: 1px solid var(--warm-white-dark);
}

.related-towns h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.related-towns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.related-town-card {
  background: var(--warm-white-dark);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition-fast), transform var(--transition-fast);
  border: 1px solid transparent;
}

.related-town-card:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: rgba(27,58,75,0.07);
}

.related-town-card h3 {
  color: var(--deep-coast);
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.related-town-card p {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin: 0;
}

/* === SITE FOOTER === */
footer, .site-footer {
  background: var(--deep-coast);
  color: rgba(255, 255, 255, 0.5);
  padding: 2.5rem 0 1.75rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.footer-col p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: none;
}

.footer-col nav {
  flex-direction: column;
  gap: 0.15rem;
}

.footer-col nav a {
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  padding: 0.2rem 0;
  border-radius: 0;
}

.footer-col nav a:hover {
  background: transparent;
  color: rgba(255,255,255,0.9);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-bottom p {
  font-size: 0.78rem;
  max-width: none;
  margin: 0;
}

.footer-disclaimer, .footer-disclosure {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.3) !important;
  max-width: 480px !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .site-header .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  /* Hamburger button — hidden on desktop */
  .menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
  }

  .menu-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .menu-toggle .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
  }

  .menu-toggle .bar + .bar {
    margin-top: 5px;
  }

  .menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  nav, .site-nav {
    display: none;
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--deep-coast);
    z-index: 999;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 0.25rem;
    overflow-y: auto;
  }

  nav.is-open, .site-nav.is-open {
    display: flex;
  }

  nav a, .site-nav a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius-sm);
    min-height: 48px;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  nav a:last-child, .site-nav a:last-child {
    border-bottom: none;
  }


  nav a:hover, .site-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
  }

  .town-hero-content .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .town-hero-meta {
    align-items: flex-start;
  }

  .town-hero-badges {
    justify-content: flex-start;
  }

  .charter-card {
    grid-template-columns: 1fr;
  }

  .charter-card-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--warm-white-dark);
  }

  .operator-card-header {
    flex-direction: column;
  }

  .operator-price {
    align-items: flex-start;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-hero-stats {
    gap: var(--space-lg);
  }

  .value-prop-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: 1rem;
  }

  .related-towns-grid {
    grid-template-columns: 1fr;
  }

  /* Nav already hidden via 768px rules — mobile hamburger handles visibility */
  nav, .site-nav {
    /* inherits from 768px block above */
  }

  .menu-toggle {
    /* inherits from 768px block above */
  }

  .town-hero {
    min-height: 300px;
  }

  .home-hero-stats {
    flex-direction: column;
    gap: var(--space-md);
  }

  .product-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }


  .footer-grid {
    grid-template-columns: 1fr;
  }
}/* ============================================================
   FRASER COAST ADVENTURES — Accessibility Stylesheet
   WCAG 2.1 AA Compliance Layer
   Load AFTER style.css: <link rel="stylesheet" href="/css/a11y.css">
   ============================================================ */

/* === 1. SKIP TO CONTENT LINK === */

/* The skip link sits off-screen until focused */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--sand-dune, #D4A853);
  color: #1a1200 !important; /* max contrast on sand-dune bg */
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--font-body, 'Nunito Sans', system-ui, sans-serif);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: top 0.15s ease;
}

/* Visible when focused — appears at top of viewport */
.skip-link:focus {
  top: 0;
  outline: 3px solid #1B3A4B;
  outline-offset: 2px;
}

/* === 2. SCREEN READER–ONLY TEXT (.sr-only) === */

/*
 * Visually hidden but accessible to screen readers.
 * Use for: icon labels, supplementary descriptions, off-screen text.
 * NEVER use display:none or visibility:hidden — that hides from AT too.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Extension: sr-only-focusable
 * Makes the element visible on keyboard focus (e.g., skip links, icon buttons).
 * Use sparingly — only when the element needs a visible focus state.
 */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* === 3. FOCUS RING STYLES (WCAG 2.4.7) === */

/*
 * Default focus ring for all interactive elements.
 * High-contrast 3px offset ring — visible on all brand backgrounds.
 * Uses currentColor so it adapts to parent colour context.
 */
:focus-visible {
  outline: 3px solid #D4A853; /* sand-dune — brand colour, high contrast */
  outline-offset: 3px;
  border-radius: 3px;
}

/* Remove default browser outline when :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

/* Specific focus styles for buttons */
.btn:focus-visible,
.book-btn:focus-visible,
.btn-book:focus-visible,
.btn-cta:focus-visible {
  outline: 3px solid #D4A853;
  outline-offset: 3px;
  box-shadow: 0 4px 16px rgba(212, 168, 83, 0.5);
}

/* Focus for links inside cards / interactive containers */
a:focus-visible {
  outline: 3px solid #D4A853;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Focus for form elements (if added later) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid #D4A853;
  outline-offset: 2px;
}

/* === 4. COLOUR CONTRAST FIXES (WCAG 1.4.3 / 1.4.11) === */

/*
 * NAV LINKS — fix rgba(255,255,255,0.72) on #1B3A4B (fails at 3.7:1)
 * Required: 4.5:1 for normal text
 * Fixed: rgba(255,255,255,0.72) → rgba(255,255,255,0.85) gives ~4.8:1
 */
.site-header nav a {
  color: rgba(255, 255, 255, 0.85);
}

/* Footer nav links — rgba(255,255,255,0.5) fails at 2.85:1 */
.footer-col nav a {
  color: rgba(255, 255, 255, 0.75); /* ~4.3:1 — still slightly low, bumped to 0.80 */
  color: rgba(255, 255, 255, 0.82); /* 4.9:1 — passes AA */
}

.footer-col nav a:hover {
  color: #ffffff; /* pure white on deep-coast: 10.9:1 */
}

/*
 * PRIMARY LINKS — #2A9D8F (teal) on #FAF7F2 (warm-white) fails at 3.27:1
 * Use deeper teal for AA compliance on light backgrounds
 */
a {
  color: #1F7A6F; /* darkened teal: ~5.0:1 on warm-white — passes AA */
}

/* If teal must be used for brand reasons, add underline as secondary cue */
a:hover {
  color: #1B3A4B; /* deep-coast: ~10.9:1 on warm-white */
  text-decoration: underline;
}

/* Teal badge/label on white — fix contrast */
.town-card-badge {
  background: #1F7A6F; /* darkened teal: 5.0:1 on white */
  color: #ffffff;
}

/* Driftwood on warm-white — fails at 3.03:1 */
.trust-note {
  color: #3A2A1A; /* darkened driftwood equivalent */
}

/* Hero eyebrow text rgba(255,255,255,0.6) on deep-coast — 3.1:1 fails */
.home-hero-eyebrow {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(212, 168, 83, 0.5);
}

/* Hero stat labels rgba(255,255,255,0.6) — 3.1:1 fails */
.home-hero-stat-label {
  color: rgba(255, 255, 255, 0.75);
}

/* FAQ question links on bg-warm-white */
.faq-q,
.faq-question {
  color: #1F7A6F; /* darkened teal — passes at 5.0:1 on warm-white */
}

/* Operator meta / price labels — faint text on white */
.product-meta-item {
  color: #3A2A1A; /* darkened for contrast on white/warm-white */
}

/* Season bar labels (text on coloured bars) */
.season-bar span {
  color: #ffffff; /* white on dark bars — passes */
  font-weight: 700;
}

/* === 5. REDUCED MOTION PREFERENCE (WCAG 2.3.3) === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; /* overrides smooth scroll */
  }
}

/* Explicitly disable specific animations that cause issues */
.home-hero::before,
.home-hero::after {
  animation: none !important;
}

/* Hover transforms — disable for reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .book-btn:hover,
  .btn-book:hover,
  .town-card:hover,
  .operator-card:hover,
  .product-card:hover,
  .charter-card:hover,
  .season-card:hover {
    transform: none !important;
  }

  .home-hero-ctas .btn:hover,
  .cta-band .btn-cta:hover {
    transform: none !important;
  }
}

/* === 6. MINIMUM TOUCH TARGET SIZE (WCAG 2.5.5) === */

/*
 * Minimum touch target: 44×44px (Android) / 44×44pt (iOS)
 * Applied to: primary buttons, nav links, FAQ triggers, key CTAs
 */

/* Nav links — ensure minimum 44px height at all breakpoints */
nav a,
.site-nav a {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Buttons — already reasonably sized but enforce minimum */
.btn,
.book-btn,
.btn-book,
.btn-cta,
.btn-primary,
.btn-secondary,
.btn-outline-light {
  min-height: 44px;
  min-width: 44px;
  padding: 0.65rem 1.35rem; /* height ~52px at default font — passes */
}

/* FAQ question trigger — must be ≥44px tall */
.faq-q,
.faq-question {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Back link */
.back-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Inline text links used as CTAs — upgrade to meet 44px target */
.pillar-card a[href],
.town-card {
  min-height: 44px;
}

/* Hero CTA buttons */
.home-hero-ctas .btn {
  min-height: 48px; /* slightly larger for prominence */
}

/* === 7. FAQ ACCESSIBLE DISCLOSURE PATTERN === */

/*
 * Each FAQ item: <div class="faq-item">
 *   <button class="faq-q" aria-expanded="false" aria-controls="faq-answer-1">
 *     Question text
 *   </button>
 *   <div id="faq-answer-1" class="faq-a" hidden>
 *     Answer text
 *   </div>
 * </div>
 *
 * JavaScript toggles aria-expanded on the button and hidden on the answer.
 * Hidden attribute is AT-friendly — screen readers skip hidden content.
 */

/* FAQ question as keyboard-activatable button */
.faq-q {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: #1F7A6F; /* darkened teal for contrast */
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--warm-white-dark, #F0EBE3);
  transition: color 0.15s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Expand/collapse indicator (optional — use CSS or ::after) */
.faq-q::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--driftwood, #8B7355);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Rotate indicator when open */
.faq-q[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.faq-q:hover {
  color: var(--deep-coast, #1B3A4B);
}

/* FAQ answer — hidden by default, shown when .open or [aria-expanded=true] */
.faq-a {
  font-size: 0.9rem;
  color: var(--text-sec, #5A4A3A);
  line-height: 1.75;
  padding: 0.75rem 0 1rem;
  display: none; /* JS adds .open class to show */
}

/* Show state: add .faq-item.is-open to the item, or use JS to toggle */
.faq-item.is-open .faq-a,
.faq-item.faq-a {
  display: block;
}

/* When JS sets aria-expanded=true and removes hidden */
.faq-a:not([hidden]) {
  display: block;
}

/* === 8. LANDMARK POLISH === */

/* Ensure main is always a landmark (it should be by default) */
main {
  display: block; /* fixes some older screen reader quirks */
}

/* Header landmark — declare banner role explicitly */
header.site-header {
  role: banner;
}

/* Footer landmark */
footer.site-footer,
footer:not([class]) {
  role: contentinfo;
}

/* Main nav — provide accessible label */
.site-header nav {
  aria-label: Main navigation;
}

/* Footer nav — distinguish from main nav */
.site-footer nav,
footer .footer-col nav {
  aria-label: Footer navigation;
}

/* === 9. HERO IMAGE ACCESSIBILITY === */

/*
 * Hero images are background images set via CSS (not <img>).
 * Provide a text equivalent using sr-only.
 *
 * In HTML, add inside each .home-hero / .town-hero:
 *   <div class="sr-only" aria-hidden="true">
 *     [Descriptive alt text equivalent for the hero background image]
 *   </div>
 */

/* Ensure sr-only in hero doesn't create layout issues */
.home-hero .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
}

/* Hero with decorative-only background — hide from AT via aria-hidden on the div */
/* (The sr-only div INSIDE provides the real description) */

/* === 10. EMOJI ICON ACCESSIBILITY === */

/*
 * All emoji used as visual icons must be aria-hidden
 * and have a text alternative.
 *
 * Pattern 1: span with aria-label
 *   <span class="packing-icon" aria-label="Closed-toe shoes">👟</span>
 *
 * Pattern 2: aria-hidden + sr-only sibling
 *   <span aria-hidden="true">🚙</span>
 *   <span class="sr-only">4WD Tag-Along</span>
 */

/* Ensure aria-hidden emoji doesn't affect layout */
[aria-hidden="true"] {
  speak: never;
}

/* === 11. EXTERNAL LINK INDICATION === */

/*
 * Links with target="_blank" — add (opens in new tab) for screen readers.
 * Use sr-only span so it's announced but not visually shown.
 *
 * HTML pattern:
 *   <a href="..." target="_blank" rel="noopener">
 *     Book on Viator <span class="sr-only">(opens in new tab)</span>
 *   </a>
 */
a[target="_blank"]::after {
  /*
   * Optional: show small "opens in new tab" icon visually.
   * Currently commented out — visual indication may be enough via sr-only text.
   */
  /* content: ' ' url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231F7A6F' d='M11 0H5a1 1 0 0 0-1 1v3H2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9h2a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1zM9 1v2a1 1 0 0 0 1 1h2'/%3E%3C/svg%3E"); */
}

/* === 12. MOBILE NAV ACCESSIBILITY === */

/*
 * Mobile nav at ≤480px is currently display:none with no accessible alternative.
 * Until a proper hamburger menu is implemented:
 * - At minimum, provide a visible skip-to-nav link
 * - The skip-link already handles skip-to-content
 */
@media (max-width: 480px) {
  /*
   * If JS hamburger menu is added later, this block can be removed.
   * Until then, nav links remain hidden on mobile keyboard/AT.
   * A visible "Menu" button should replace this.
   */
  nav a,
  .site-nav a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* === 13. LIST SEMANTICS FOR NON-Semantic LISTS === */

/*
 * comparison-grid, operator-grid, packing-icon-grid use <div> wrappers.
 * For screen readers, wrap these in <ul role="list"> and use role="listitem".
 * (Full HTML restructure needed — CSS cannot fix semantic HTML.)
 *
 * CSS fallback for role="list" — provides list-style to semantic lists
 */
[role="list"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

[role="listitem"] {
  display: list-item;
}

/* === 14. COMPARISON TABLE ACCESSIBILITY === */

.comparison-table {
  caption-side: top;
}

/* Add visible captions to tables for screen readers */
.comparison-table-wrap caption,
.comparison-table caption {
  font-family: var(--font-body, 'Nunito Sans', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--deep-coast, #1B3A4B);
  text-align: left;
  padding: 0.75rem 1rem 0.5rem;
  caption-side: top;
}

/* === 15. PRINT STYLES (accessibility benefit) === */

@media print {
  .site-header,
  .site-footer,
  nav,
  .cta-band,
  .back-link {
    display: none !important;
  }

  main {
    display: block !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  /* Show full URLs for printed pages */
  a[target="_blank"]::after {
    content: none; /* suppress the (opens in new tab) indicator */
  }
}