/* Brand tokens + small overrides on top of Tailwind Play CDN */
:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --brand-blue: #0369a1;
  --brand-orange: #ea580c;
}

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

main { flex: 1 1 auto; min-width: 0; }

::selection {
  background: color-mix(in oklab, var(--brand-blue) 25%, white);
}

/* Hero parallax helper */
#hero-parallax { will-change: transform; }
.hero-bg-img { transition: opacity 1200ms ease-out; }

/* Hero slider transform */
.hero-slider-track { transition: transform 500ms ease-out; }

/* Faq panel collapse animation */
.faq-panel { display: none; }
.faq-panel.open { display: block; }

/* Booking modal: lock body scroll */
body.modal-open { overflow: hidden; }

/* Flatpickr brand color tweak (orange selected day to match site) */
.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange.selected,
.flatpickr-day.endRange.selected {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
}
.flatpickr-day:hover { background: #fff7ed; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-weight: 600;
}

/* Hero quick-enquiry widget: keep the input layout intact when Flatpickr is
 * used in static mode, and make sure the floating calendar is always on top of
 * the other form fields and never clipped by the hero section. */
#hero-quick-book .flatpickr-wrapper { display: block; width: 100%; }
#hero-quick-book .flatpickr-calendar.static { z-index: 60; }
#hero-quick-book .flatpickr-calendar.static.open { z-index: 60; }
/* Keep the leading lucide icon visible above Flatpickr's wrapper/altInput */
#hero-quick-book label > .relative > svg.lucide,
#hero-quick-book label > .relative > i[data-lucide] { z-index: 2; }

/* Booking modal: scrollable body, visible date fields, calendar on top */
#booking-modal-scroll { -webkit-overflow-scrolling: touch; }
#booking-form .flatpickr-wrapper { display: block; width: 100%; min-width: 0; }
#booking-form .flatpickr-input.form-control,
#booking-form input.flatpickr-input { width: 100% !important; min-width: 0; }
#booking-form .flatpickr-calendar { z-index: 400 !important; }
.flatpickr-calendar.open { z-index: 400 !important; }

/* Who we work with: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .who-card,
  .who-card img {
    transition: none !important;
  }
  .who-card:hover {
    transform: none;
  }
}