/* Shared styles for every HavenSolo page (Tailwind utilities come from the CDN). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --brand: #f43f5e;
  --brand-ring: rgba(244, 63, 94, .15);
  --sb-track: #f4f4f5; --sb-thumb: #d4d4d8; --sb-hover: #a1a1aa;
  --hero-bg: radial-gradient(ellipse at 65% -10%, rgba(244,63,94,.07) 0%, transparent 55%),
             radial-gradient(ellipse at 5% 85%,  rgba(139,92,246,.05) 0%, transparent 50%),
             #fafafa;
}
.dark {
  --sb-track: #09090b; --sb-thumb: #3f3f46; --sb-hover: #52525b;
  --hero-bg: radial-gradient(ellipse at 65% -10%, rgba(244,63,94,.18) 0%, transparent 55%),
             radial-gradient(ellipse at 5% 85%,  rgba(139,92,246,.12) 0%, transparent 50%),
             #09090b;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-hover); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

body.modal-open { overflow: hidden; }

.gradient-text {
  background: linear-gradient(135deg, var(--brand) 0%, #a78bfa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hero-bg { background: var(--hero-bg); }

.dest-card { transition: transform .22s ease, box-shadow .22s ease; }
.dest-card:hover { transform: translateY(-5px); }
:not(.dark) .dest-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.1); }
.dark .dest-card:hover       { box-shadow: 0 24px 48px rgba(0,0,0,.55); }

.form-input { transition: border-color .15s, box-shadow .15s; }
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

.dark input[type="date"] { color-scheme: dark; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin .75s linear infinite; }

@keyframes fadeIn  { from { opacity: 0; }                     to { opacity: 1; }              }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.modal-backdrop { animation: fadeIn  .15s ease; }
.modal-panel    { animation: slideUp .2s  ease; }

/* City guides: inline source references and FAQ disclosure marker */
.src-ref { font-size: .75em; vertical-align: super; line-height: 0; margin-left: 2px; }
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { transition: transform .2s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .dest-card:hover { transform: none !important; }
  .dest-card img  { transform: none !important; }
}

/* ── Touch targets: 44×44 px minimum (WCAG 2.5.5) ─────────────────────────── */
#theme-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Header logo link */
header a.flex {
  min-height: 44px;
}

/* Header nav links */
header nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Modal open buttons in footer */
#open-privacy,
#open-affiliate {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Footer page links (How we work, Booking checklist) */
footer a.underline {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Modal close buttons (X icon and text Close) */
[role="dialog"] .modal-close-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Flatpickr: site theme overrides ───────────────────────────────────────── */
/* altInput inherits the form-input class so no extra cursor fix is needed */

.flatpickr-calendar {
  border-radius: 12px;
  border: 1px solid #d4d4d8;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  font-family: inherit;
}
.flatpickr-day {
  border-radius: 8px;
  max-width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: .875rem;
}
.flatpickr-day:hover, .flatpickr-day:focus {
  background: #f4f4f5;
  border-color: #d4d4d8;
  color: #18181b;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #f43f5e;
  border-color: #f43f5e;
  color: #fff;
}
.flatpickr-day.today { border-color: #f43f5e; }
.flatpickr-day.today:hover { background: #fff1f2; color: #f43f5e; }
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover { color: #a1a1aa; background: transparent; }
.flatpickr-current-month,
.flatpickr-current-month input.cur-year { color: #18181b; }
.flatpickr-weekday { color: #71717a; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #71717a; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #18181b; }

/* Dark theme */
html.dark .flatpickr-calendar {
  background: #18181b;
  border-color: #3f3f46;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  color: #e4e4e7;
}
html.dark .flatpickr-months .flatpickr-month { background: #18181b; }
html.dark .flatpickr-weekdays { background: #18181b; }
html.dark .flatpickr-day { color: #e4e4e7; }
html.dark .flatpickr-day:hover, html.dark .flatpickr-day:focus {
  background: #27272a;
  border-color: #3f3f46;
  color: #f4f4f5;
}
html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.selected:hover {
  background: #f43f5e;
  border-color: #f43f5e;
  color: #fff;
}
html.dark .flatpickr-day.today { border-color: #f43f5e; }
html.dark .flatpickr-day.today:hover { background: #3f1a23; color: #fda4af; }
html.dark .flatpickr-day.disabled,
html.dark .flatpickr-day.disabled:hover { color: #52525b; }
html.dark .flatpickr-current-month,
html.dark .flatpickr-current-month input.cur-year,
html.dark .flatpickr-current-month .numInputWrapper { color: #e4e4e7; }
html.dark .flatpickr-current-month .numInputWrapper span { border-color: #3f3f46; }
html.dark .flatpickr-weekday { color: #a1a1aa; background: #18181b; }
html.dark .flatpickr-prev-month svg, html.dark .flatpickr-next-month svg { fill: #a1a1aa; }
html.dark .flatpickr-prev-month:hover svg, html.dark .flatpickr-next-month:hover svg { fill: #f4f4f5; }
html.dark .flatpickr-prev-month:hover, html.dark .flatpickr-next-month:hover { color: #f4f4f5; }

/* Responsive: ensure calendar fits small screens */
.flatpickr-calendar { max-width: 100%; }
@media (max-width: 380px) {
  .flatpickr-day { max-width: 38px; height: 38px; line-height: 38px; }
}

/* ── Mobile navigation menu ─────────────────────────────────────────────────── */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}
#mobile-menu.menu-open {
  max-height: 220px;
  opacity: 1;
  pointer-events: auto;
}
/* Mobile menu links: 48px touch target (overrides generic header nav a rule) */
#mobile-menu a {
  min-height: 48px;
  display: flex;
  align-items: center;
}