/* =============================================================================
   custom.css — small amount of CSS beyond Tailwind CDN utilities
   -----------------------------------------------------------------------------
   Tailwind (via Play CDN) handles ~all styling through utility classes in the
   HTML. This file covers the few things utilities can't do cleanly:
     - the mobile sticky call bar (fixed position + iOS safe-area inset)
     - form field error state
     - reduced-motion friendliness
   Keep this file tiny.
   ============================================================================= */

/* ---- Mobile sticky call bar ------------------------------------------------
   Always visible < 768px, min 56px tall, respects the iPhone home-indicator
   safe area. Hidden on desktop and while a form field is focused
   (sticky-cta--hidden, toggled by sticky-cta.js). */
[data-sticky-cta] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  min-height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(0);
  transition: transform 0.18s ease-in-out;
  will-change: transform;
}
[data-sticky-cta].sticky-cta--hidden {
  /* Slide fully out of view when a field is focused (keyboard open). */
  transform: translateY(120%);
}
/* The tap target inside the bar must be a comfortable size. */
[data-sticky-cta] a {
  min-height: 56px;
}
@media (min-width: 768px) {
  [data-sticky-cta] { display: none !important; }
}

/* ---- Form field error state ------------------------------------------------ */
.field-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626;
}
[data-error-for]:not(:empty) {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.2rem;
  color: #dc2626;
}

/* ---- FAQ icon rotation (progressive enhancement) --------------------------- */
.faq-trigger[aria-expanded="true"] .faq-icon {
  color: var(--haq-accent, #c8102e);
}

/* ---- Skip link (a11y) ------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 2px solid var(--haq-accent, #c8102e);
  border-radius: 0.375rem;
}

/* ---- Respect reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Prevent horizontal overflow on small screens ------------------------- */
html, body { overflow-x: hidden; }

/* ---- Placeholder image boxes (until real photos arrive) -------------------- */
.placeholder-img {
  background:
    repeating-linear-gradient(45deg, #f3f4f6 0 12px, #e5e7eb 12px 24px);
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 220px;
  border-radius: 0.75rem;
}