/* lhwd site custom CSS.
 * Loaded after Tailwind Play CDN so these rules override Tailwind utilities.
 * Five things: skip link, scroll progress bar, FAQ slide animation,
 * fade-in transition, focus-visible polish.
 */

:root {
  --lhwd-teal: #19c2c4;
  --lhwd-teal-dark: #10aeb1;
  --lhwd-navy: #061b31;
  --lhwd-cream: #f8fbfc;
}

/* 1. Skip link. Visible only when focused via keyboard. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 24px;
  background: var(--lhwd-teal);
  color: var(--lhwd-navy);
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease-out;
  box-shadow: 0 4px 12px rgba(6, 27, 49, 0.15);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--lhwd-navy);
  outline-offset: 2px;
}

/* 2. Scroll progress bar. Fixed top, thin gradient. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, var(--lhwd-teal), var(--lhwd-teal-dark));
  z-index: 50;
  width: 0;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* 3. FAQ panel slide animation. Replaces Tailwind's `hidden` toggle so
 *    the panel slides instead of snapping open/closed. */
.faq-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 0;
  transition: max-height 0.35s ease-out, opacity 0.25s ease-out, padding-bottom 0.35s ease-out;
}
.faq-panel.open {
  max-height: 600px;
  opacity: 1;
  padding-bottom: 1.25rem;
}

/* 4. Fade-in animation. IntersectionObserver toggles `.visible`. */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 5. Focus-visible polish. Tailwind's defaults are fine but we tighten the
 *    ring offset against the various backgrounds. */
:focus-visible {
  outline: 2px solid var(--lhwd-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Hero headline: keep the price as a deliberate line so it never crowds the
 * copy above it on narrow screens or in odd browser wrapping. */
h1.hero-title {
  line-height: 1.16;
}
h1.hero-title > span {
  display: block;
}
.hero-price {
  margin-block: 0.16em 0.1em;
  white-space: nowrap;
}

/* 6. Reduced motion: disable the slide and fade animations for users who
 *    have requested reduced motion in their OS settings. */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .faq-panel {
    transition: none;
  }
  .skip-link {
    transition: none;
  }
}

/* 7. Sticky header: backdrop blur with subtle bg, so the hero doesn't
 *    feel jarring when content scrolls under it. Already applied via
 *    Tailwind classes on the header itself; this is just a fallback
 *    for browsers that don't support backdrop-blur. */
@supports not (backdrop-filter: blur(8px)) {
  header.sticky {
    background-color: var(--lhwd-cream);
  }
}

/* 8. Form inputs. Custom LHWD styling so the enquiry form (and anything
 *    else using .lhwd-input) matches the brand: sky-soft border, cream-soft
 *    background, teal focus state, navy text. */
.lhwd-input {
  background-color: var(--lhwd-cream);
  border: 1px solid #d9eef3;
  color: var(--lhwd-navy);
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}
.lhwd-input::placeholder {
  color: rgba(6, 27, 49, 0.4);
}
.lhwd-input:hover {
  border-color: #b9dde6;
}
.lhwd-input:focus,
.lhwd-input:focus-visible {
  outline: none;
  border-color: var(--lhwd-teal);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 194, 196, 0.18);
}

/* 9. Checkbox / option cards. Used in the enquiry form for package
 *    interest and extra options. */
.lhwd-check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d9eef3;
  border-radius: 0.75rem;
  background-color: var(--lhwd-cream);
  color: var(--lhwd-navy);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.lhwd-check:hover {
  border-color: var(--lhwd-teal);
  background-color: #ffffff;
}
.lhwd-check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--lhwd-teal);
  flex-shrink: 0;
}

/* 10. Honeypot field. Off-screen and hidden from assistive tech, but the
 *     input is still in the DOM (and labelled) so naive bots will fill it.
 *     The JS rejects any submission where this field is non-empty. */
.lhwd-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}