/* ============================================================
   theme.css — Banana Slug Getaways
   Loaded AFTER base.css, so anything here wins.

   Palette pulled from the client's circular logo badge:
   mint-teal starry sky, sand horizon, orange-yellow sun,
   dark slug silhouette, cream lettering.
   ============================================================ */
:root {
  --bg: #FAF8F2;            /* warm cream, like the logo's lettering    */
  --surface: #FFFFFF;
  --surface-alt: #F3EFE3;   /* pale sand                                */
  --text: #22322C;          /* deep slug-silhouette green-charcoal      */
  --text-muted: #5C6B63;
  --text-subtle: #8B978F;
  --border: #E5DFCE;        /* sandy hairline                           */
  --primary: #22322C;
  --primary-text: #FFF9EC;

  /* Logo sky teal, darkened until it holds 4.5:1 on white */
  --accent: #187A66;
  --accent-dark: #0F5A4B;
  --accent-soft: #E1F2EC;
  --star: #E8A13C;          /* the logo's sun                           */

  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;  /* echoes the logo's rounded lettering */

  /* Hook band = the logo horizon: teal sky over a sand seam */
  --hook-bg: linear-gradient(180deg, #2E8C77 0%, #1F7361 100%);
  --hook-text: #FFF9EC;
  --rule-gradient: linear-gradient(90deg, #187A66 0%, #E8A13C 55%, #D9BC8A 100%);

  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
}

/* --- Signature elements go below this line --- */

/* 1 · The horizon seam.
   The logo is a sky sitting on a band of sand. The hook band and the
   footer both borrow it: teal above, a thin sand strip below, and the
   sun as a small gradient disc rising on the seam. */
.hook-band {
  background: var(--hook-bg);   /* base.css ships a leftover photo URL here — reclaim it */
  border-bottom: 6px solid #D9BC8A;
  position: relative;
  overflow: hidden;
}
.hook-title { color: var(--hook-text); }
.hook-band::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -14px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #F2B03C 0%, #E07A2E 85%);
  opacity: 0.9;
  pointer-events: none;
}
/* Starfield in the hook sky, like the logo's sparkles */
.hook-band::before {
  background-image:
    radial-gradient(circle 1.5px at 12% 30%, rgba(255,249,236,.8) 0 1.5px, transparent 2px),
    radial-gradient(circle 1px   at 28% 62%, rgba(255,249,236,.6) 0 1px, transparent 1.5px),
    radial-gradient(circle 1.5px at 47% 22%, rgba(255,249,236,.7) 0 1.5px, transparent 2px),
    radial-gradient(circle 1px   at 63% 55%, rgba(255,249,236,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle 1.5px at 82% 34%, rgba(255,249,236,.75) 0 1.5px, transparent 2px),
    radial-gradient(circle 1px   at 93% 68%, rgba(255,249,236,.5) 0 1px, transparent 1.5px);
}

/* 2 · The slug trail.
   Section titles are underlined by a short meandering dotted trail
   instead of a plain bar — the mark a slug leaves, in sand-gold. */
.section-title::after {
  width: 64px;
  height: 8px;
  border-radius: 0;
  background:
    radial-gradient(circle 2px at 4px 6px,  #D9A94E 0 2px, transparent 2.5px),
    radial-gradient(circle 2px at 16px 3px, #D9A94E 0 2px, transparent 2.5px),
    radial-gradient(circle 2px at 28px 5px, #D9A94E 0 2px, transparent 2.5px),
    radial-gradient(circle 2px at 40px 2px, #D9A94E 0 2px, transparent 2.5px),
    radial-gradient(circle 2px at 52px 5px, #D9A94E 0 2px, transparent 2.5px),
    radial-gradient(circle 3px at 61px 4px, #187A66 0 3px, transparent 3.5px);
}

/* 3 · Evening-sky footer.
   The logo sky after dark: deep slug-charcoal green with the same
   sprinkle of stars, sitting on a sand seam. */
.footer {
  background:
    radial-gradient(circle 1.5px at 8% 22%,  rgba(255,249,236,.35) 0 1.5px, transparent 2px),
    radial-gradient(circle 1px   at 21% 58%, rgba(255,249,236,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle 1.5px at 38% 18%, rgba(255,249,236,.3)  0 1.5px, transparent 2px),
    radial-gradient(circle 1px   at 55% 44%, rgba(255,249,236,.2)  0 1px, transparent 1.5px),
    radial-gradient(circle 1.5px at 71% 26%, rgba(255,249,236,.32) 0 1.5px, transparent 2px),
    radial-gradient(circle 1px   at 86% 60%, rgba(255,249,236,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle 1.5px at 95% 14%, rgba(255,249,236,.28) 0 1.5px, transparent 2px),
    #1B2A25;
  border-top: 6px solid #D9BC8A;
}

/* 4 · The two panels of the split hero meet like the two halves of the
   brand: dome (teal dusk) and cabin (sand dusk) tint their overlays. */
.split-panel:first-child::after {
  background: linear-gradient(180deg, rgba(24,90,76,0) 30%, rgba(16,53,45,.82) 100%);
}
.split-panel:last-child::after {
  background: linear-gradient(180deg, rgba(90,68,24,0) 30%, rgba(46,36,16,.82) 100%);
}

/* base.css ships a few hard-coded red tints from an earlier client — retint to teal */
.map-privacy-circle { background: rgba(24, 122, 102, 0.10); }
.header-badge { border-color: rgba(24, 122, 102, 0.22); }
.hook-band { border-top-color: transparent; }

/* Rounded display face needs a touch more air than the default */
.brand-name { letter-spacing: 0.01em; }
.header-cta, .booking-cta, .mobile-cta-btn { font-family: var(--font-display); letter-spacing: 0.02em; }