/* ============================================================
   LMU DESIGN SYSTEM — Coastal Calm aesthetic override
   Fraunces + Nunito  |  Tide blue primary  |  Sentence case
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,500&family=Nunito:wght@300;400;500;600;700&display=swap');

/* ── New design tokens ──────────────────────────────────────── */
:root {
  /* Primary palette */
  --c-tide:        #4a7d9c;
  --c-tide-deep:   #355f7a;
  --c-tide-light:  #6699b4;
  --c-sage:        #84a59d;
  --c-ember:       #f28482;   /* warm highlight only */
  --c-sun:         #f6bd60;   /* badges only */
  --c-shell:       #f5cac3;
  --c-sand:        #f7ede2;
  --c-seafoam:     #edf6f9;
  --c-paper:       #ffffff;
  --c-ink:         #2b2b2b;
  --c-ink-soft:    #5a5a58;
  --c-ink-quiet:   #8a8a86;

  /* Remap legacy variables to new palette */
  --flame:         #4a7d9c;   /* tide replaces orange primary */
  --ember:         #355f7a;   /* tide-deep replaces dark orange */
  --sunset:        #6699b4;   /* tide-light replaces sunset orange */
  --golden:        #f6bd60;   /* sun replaces gold */
  --sand:          #f7ede2;   /* warm sand bg */
  --cream:         #f7ede2;   /* warm page bg */
  --warm-white:    #ffffff;
  --blush:         #f5cac3;   /* shell replaces blush */
  --ocean:         #84a59d;   /* sage replaces ocean */
  --dusk:          #2b2b2b;   /* ink replaces dusk */
  --text-dark:     #2b2b2b;
  --text-mid:      #5a5a58;
  --text-light:    #8a8a86;
  --white:         #ffffff;

  /* New fonts */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Nunito', system-ui, sans-serif;

  /* New shadows */
  --shadow-soft:   0 2px 8px rgba(43,43,43,0.06), 0 1px 2px rgba(43,43,43,0.04);
  --shadow-float:  0 12px 32px rgba(43,43,43,0.10), 0 2px 6px rgba(43,43,43,0.05);
  --shadow-warm:   0 4px 20px rgba(74,125,156,0.18);
}

/* ── Base body reset to new tokens ─────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--c-sand);
  color: var(--c-ink);
  line-height: 1.72;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;        /* sentence case — no uppercase */
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

.btn-primary {
  background: var(--c-tide);
  color: #fff;
  box-shadow: 0 4px 16px rgba(74,125,156,0.22);
}

.btn-primary:hover {
  background: var(--c-tide-deep);
  transform: none;             /* no translateY lift */
  box-shadow: 0 6px 24px rgba(74,125,156,0.30);
}

.btn-outline {
  color: var(--c-tide);
  border-color: var(--c-tide);
}

.btn-outline:hover {
  background: var(--c-tide);
  color: #fff;
  transform: none;
}

.btn-ghost:hover {
  background: #fff;
  color: var(--c-tide);
}

.btn-white {
  color: var(--c-tide);
}

.btn-white:hover {
  background: var(--c-seafoam);
  transform: none;
}

/* ── Typography ─────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  color: var(--c-tide);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c-ink);
}

.section-title em {
  color: var(--c-tide);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* ── Header / Nav ───────────────────────────────────────────── */

/* Nav dropdown — Social Fires etc */
.nav-item{position:relative;display:inline-flex;align-items:center;}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid rgba(74,125,156,0.14);border-radius:12px;box-shadow:0 8px 32px rgba(43,43,43,0.10);padding:6px 0;min-width:168px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s;z-index:200;}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dropdown a{display:block;padding:10px 18px;font-size:0.80rem;color:#5a5a58;font-weight:500;transition:background 0.18s ease,color 0.18s ease;white-space:nowrap;}
.nav-dropdown a:hover{background:rgba(74,125,156,0.07);color:#4a7d9c;}
.nav-item > a::after{content:'';display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;margin-left:5px;opacity:0.45;vertical-align:middle;}
.logo-banner {
  background: #fff;
  border-bottom: 1px solid rgba(74,125,156,0.12);
}

.logo-banner .logo-fallback span {
  color: var(--c-tide);
}

.logo-banner .logo-tagline {
  color: var(--c-ink-soft);
}

.site-header {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(74,125,156,0.10);
}

.site-header.scrolled {
  box-shadow: 0 3px 24px rgba(43,43,43,0.08);
}

.header-nav a:hover {
  color: var(--c-tide);
  background: rgba(74,125,156,0.07);
}

.header-nav a.active {
  color: var(--c-tide);
  background: rgba(74,125,156,0.09);
}

.mobile-nav {
  background: #fff;
  border-top: 1px solid rgba(74,125,156,0.08);
}

.mobile-nav a {
  border-bottom-color: rgba(74,125,156,0.07);
}

.mobile-nav a:hover {
  color: var(--c-tide);
}

/* ── Hero overlays — remove orange tint ─────────────────────── */
.hero-bg::after {
  background: linear-gradient(
    to bottom,
    rgba(43,43,43,0.28) 0%,
    rgba(43,43,43,0.18) 40%,
    rgba(43,43,43,0.55) 100%
  ) !important;
}

/* ── Cards ──────────────────────────────────────────────────── */
.package-card.featured,
.rental-card.featured,
.picnic-card.featured {
  border-color: var(--c-tide);
  box-shadow: 0 12px 40px rgba(74,125,156,0.16);
}

.package-card .badge,
.rental-card .badge,
.picnic-card .badge {
  background: var(--c-tide);
  color: #fff;
}

.price-amount {
  color: var(--c-tide);
}

.addon-category-title {
  color: var(--c-tide);
  border-bottom-color: rgba(74,125,156,0.18);
}

/* ── Booking section — gradient bar ─────────────────────────── */
.booking-section::before {
  background: linear-gradient(90deg, var(--c-tide), var(--c-sage)) !important;
}

/* ── Process steps ──────────────────────────────────────────── */
.step-number {
  background: var(--c-tide);
  color: #fff;
}

.step-circle {
  background: var(--c-tide);
  color: #fff;
}

.process-step .step-num {
  background: var(--c-tide);
}

/* ── CTA sections — replace orange gradient ──────────────────── */
.cta-section,
.cta-dark {
  background: linear-gradient(135deg, var(--c-ink) 0%, #1a3040 60%, var(--c-tide-deep) 100%) !important;
}

.policies-bar {
  background: var(--c-seafoam);
  border-top: 1px solid rgba(74,125,156,0.14);
  color: var(--c-ink-soft);
}

/* ── Featured / highlight badges ───────────────────────────── */
.featured-badge {
  background: var(--c-tide);
  color: #fff;
}

.occasion-badge {
  background: var(--c-seafoam);
  color: var(--c-tide);
}

/* ── Booking form progress bar ──────────────────────────────── */
.step-indicator .step.active .step-dot {
  background: var(--c-tide);
  border-color: var(--c-tide);
}

.step-indicator .step.completed .step-dot {
  background: var(--c-tide);
  border-color: var(--c-tide);
}

.progress-bar-fill {
  background: var(--c-tide);
}

/* ── Form elements ───────────────────────────────────────────── */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-tide) !important;
  box-shadow: 0 0 0 3px rgba(74,125,156,0.12) !important;
  outline: none;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--c-ink);
}

.footer-links a:hover {
  color: var(--c-tide-light);
}

/* ── FAQ / policy page ───────────────────────────────────────── */
.policy-item summary {
  color: var(--c-ink);
}

.policy-item summary:hover {
  color: var(--c-tide);
}

.policy-item[open] summary {
  color: var(--c-tide);
}

.jump-nav {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(74,125,156,0.10);
}

.jump-nav a {
  color: var(--c-tide);
}

.jump-nav a:hover {
  background: var(--c-seafoam);
}

/* ── Location pills ──────────────────────────────────────────── */
.location-pill {
  background: var(--c-seafoam);
  color: var(--c-tide);
  border: 1px solid rgba(74,125,156,0.18);
}

/* ── Occasion grid cards ─────────────────────────────────────── */
.occasion-card:hover .occasion-label {
  color: var(--c-tide);
}

/* ── Bonfire packages "popular" or highlighted items ─────────── */
.popular-badge {
  background: var(--c-tide);
}

/* ── Service includes tiles ──────────────────────────────────── */
.include-tile .include-icon {
  color: var(--c-tide);
}

/* ── Chairs "add-on notice" card ─────────────────────────────── */
.addon-notice {
  background: linear-gradient(135deg, var(--c-tide-deep), var(--c-tide));
}

/* ── Hardcoded rgba(200,86,42,...) overrides ─────────────────── */
/* These patterns appear in inline <style> blocks using orange rgba values */

/* CTA gradient section — orange → dark coastal */
.cta-section {
  background: linear-gradient(135deg, #1e2d38 0%, #1a3040 55%, var(--c-tide-deep) 100%) !important;
}

/* Hero image overlay — remove orange tint */
.hero-bg::after {
  background: linear-gradient(
    to bottom,
    rgba(30,40,50,0.22) 0%,
    rgba(20,30,40,0.12) 40%,
    rgba(20,30,40,0.58) 100%
  ) !important;
}

/* Form step indicator active dot glow */
.progress-step.active .step-dot {
  background: var(--c-tide) !important;
  border-color: var(--c-tide) !important;
  box-shadow: 0 0 0 5px rgba(74,125,156,0.16) !important;
}

/* Selected cards and sub-packages */
.service-card.selected,
.sub-pkg.selected {
  border-color: var(--c-tide) !important;
  background: rgba(74,125,156,0.05) !important;
  box-shadow: 0 0 0 3px rgba(74,125,156,0.14) !important;
}

/* Form info notice blocks */
.form-notice {
  background: rgba(74,125,156,0.05) !important;
  border-color: rgba(74,125,156,0.18) !important;
}

/* Icon backgrounds (about, feature icons) */
.about-feature .icon,
.feature-icon {
  background: rgba(74,125,156,0.09) !important;
  color: var(--c-tide) !important;
}

/* Pricing section decorative radial glow */
.pricing-section::before {
  background: radial-gradient(circle, rgba(74,125,156,0.08) 0%, transparent 70%) !important;
}

/* FAQ accordion items border */
details.faq-item {
  border-color: rgba(74,125,156,0.12) !important;
}

/* Card / included tile borders */
.included-tile,
.how-step,
.occasion-card {
  border-color: rgba(74,125,156,0.12) !important;
}

/* Section dividers that use orange rgba borders */
.intro-section,
.how-section,
.occasions-section,
.locations-section {
  border-color: rgba(74,125,156,0.10) !important;
}

/* Inline hardcoded hex overrides */
[style*="color:#C8562A"], [style*="color: #C8562A"] { color: var(--c-tide) !important; }
[style*="background:#C8562A"] { background: var(--c-tide) !important; }
[style*="background:#923218"] { background: linear-gradient(135deg, var(--c-ink), var(--c-tide-deep)) !important; }

/* ============================================================
   LOCATION INTELLIGENCE — shared across all booking forms
   ============================================================ */

/* Small caption text next to a form field label */
.field-caption {
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 0.72rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-tide, #5A96A8);
  margin-left: 6px;
}

/* Geocoding status line below address input */
.geocoding-status { font-size: 0.78rem; color: #8A9098; padding: 5px 0; min-height: 20px; transition: color 0.2s; }
.geocoding-status.searching { color: #5A96A8; }
.geocoding-status.found     { color: #C8562A; }
.geocoding-status.error     { color: #c0392b; }

/* Dual-mode tabs */
.location-mode-tabs { display: flex; border: 1.5px solid #DDD5C5; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.location-mode-tab  { flex: 1; padding: 10px 12px; font-size: 0.80rem; font-weight: 600; text-align: center; cursor: pointer; background: #FAF5EC; color: #48545E; border: none; font-family: inherit; transition: background 0.25s, color 0.25s; }
.location-mode-tab:not(:last-child) { border-right: 1px solid #DDD5C5; }
.location-mode-tab.active { background: #C8562A; color: #fff; }

/* Hotel match banner */
.hotel-match-banner { background: rgba(74,125,156,0.09); border: 1.5px solid rgba(74,125,156,0.28); border-radius: 12px; padding: 16px 18px; margin: 14px 0; display: none; }
.hotel-match-banner.visible { display: block; }
.hotel-match-banner p { font-size: 0.88rem; color: #1C2228; margin-bottom: 12px; line-height: 1.6; }
.hotel-match-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hotel-match-actions .btn { font-size: 0.78rem; padding: 9px 20px; }

/* Beach access section */
.beach-access-section { display: none; margin-top: 4px; }
.beach-access-section.visible { display: block; }
.beach-access-label { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #48545E; margin-bottom: 8px; display: block; }

/* List + map side-by-side layout */
.beach-access-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 640px) { .beach-access-layout { grid-template-columns: 1fr; } }
.beach-access-list-col { display: flex; flex-direction: column; gap: 6px; }
.beach-access-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
#beach-access-map { height: 340px; border-radius: 12px; border: 1.5px solid #DDD5C5; z-index: 1; }

/* Location list rows */
.beach-access-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; border: 1.5px solid #DDD5C5; border-radius: 12px; cursor: default; background: #FAF5EC; transition: background 0.25s, border-color 0.25s; }
.beach-access-option.in-prefs { border-color: rgba(74,125,156,0.36); background: rgba(74,125,156,0.05); }
.beach-access-name { font-size: 0.86rem; font-weight: 500; color: #1C2228; flex: 1; line-height: 1.3; }
.beach-access-dist { font-size: 0.70rem; color: #8A9098; margin-top: 2px; }
.beach-access-badge { font-size: 0.60rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: #5A96A8; color: #fff; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.beach-access-add-btn { font-size: 0.70rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: #C8562A; color: #fff; border: none; border-radius: 999px; padding: 3px 10px; cursor: pointer; flex-shrink: 0; margin-top: 2px; transition: background 0.2s; }
.beach-access-add-btn:hover { background: #A83E18; }
.beach-access-add-btn.added { background: rgba(74,125,156,0.18); color: #5A96A8; cursor: default; }
.beach-access-show-more { font-size: 0.78rem; color: #5A96A8; cursor: pointer; padding: 7px 0; text-align: center; border-top: 1px solid rgba(74,125,156,0.12); margin-top: 4px; }
.beach-access-show-more:hover { color: #C8562A; }

/* Hotel-selected mode: hide map/list, show only single hotel slot */
.beach-access-section.hotel-selected .beach-access-layout { display: none; }
.beach-access-section.hotel-selected > .beach-access-label { display: none; }
.beach-access-section.hotel-selected #pref-slot-1, .beach-access-section.hotel-selected #pref-slot-2 { display: none; }
.beach-access-section.hotel-selected .pref-hint { display: none; }

/* 3-ranked preference picker */
.pref-picker { background: rgba(74,125,156,0.06); border: 1.5px solid rgba(74,125,156,0.22); border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.pref-picker-title { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #48545E; margin-bottom: 10px; }
.pref-slots { display: flex; flex-direction: column; gap: 7px; }
.pref-slot { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #FAF5EC; border: 1.5px solid #DDD5C5; min-height: 42px; }
.pref-slot.filled { border-color: #C8562A; background: rgba(200,86,42,0.04); }
.pref-rank { width: 10px; height: 10px; border-radius: 50%; background: #C8562A; flex-shrink: 0; }
.pref-name  { flex: 1; font-size: 0.86rem; font-weight: 500; color: #1C2228; }
.pref-empty { flex: 1; font-size: 0.80rem; color: #8A9098; font-style: italic; }
.pref-remove { background: none; border: none; color: #8A9098; cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 4px; transition: color 0.15s; }
.pref-remove:hover { color: #c0392b; }
.pref-hint { font-size: 0.74rem; color: #8A9098; margin-top: 9px; line-height: 1.5; }

/* Social fire nudge (legacy — kept for backwards compat) */
.social-fire-nudge { font-size: 0.83rem; color: #5A96A8; background: rgba(74,125,156,0.06); border: 1px solid rgba(74,125,156,0.18); border-radius: 6px; padding: 10px 14px; margin-top: 10px; display: none; }
.social-fire-nudge.visible { display: block; }
.social-fire-nudge a { color: #C8562A; text-decoration: underline; }

/* Beach area flat-button grid */
.beach-area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
@media (max-width: 540px) { .beach-area-grid { grid-template-columns: repeat(2, 1fr); } }
.beach-area-btn { background: #FAF5EC; border: 1.5px solid #DDD5C5; border-radius: 10px; padding: 10px 10px; font-size: 0.83rem; font-weight: 500; color: #1C2228; cursor: pointer; text-align: center; transition: border-color 0.2s, background 0.2s, color 0.2s; font-family: inherit; line-height: 1.3; }
.beach-area-btn:hover { border-color: #C8562A; background: rgba(200,86,42,0.04); }
.beach-area-btn.selected { border-color: #C8562A; background: rgba(200,86,42,0.08); color: #C8562A; font-weight: 600; }

/* Static social fires note */
.social-fires-note { font-size: 0.84rem; color: #48545E; background: rgba(200,86,42,0.04); border: 1px solid rgba(200,86,42,0.14); border-radius: 8px; padding: 10px 14px; margin: 12px 0; line-height: 1.6; }
.social-fires-note a { color: #C8562A; text-decoration: underline; font-weight: 500; }

/* Wall of Love photos */
.wol-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1060px; margin: 40px auto 0; }
.wol-photo { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(28,34,40,0.10); display: block; }
@media (max-width: 768px) { .wol-photos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wol-photos { grid-template-columns: 1fr; } }