/* ==========================================================
   custom.css — Prime Journey Travel & Tours
   Small styling touches that go beyond plain Tailwind utilities.
   ========================================================== */

html {
  scroll-behavior: smooth;
}

/* ---------- Boarding-pass style package cards ----------
   A perforated notch on the left/right edge of the price row,
   like the tear line on a paper boarding pass / ticket stub. */
.ticket-card {
  position: relative;
}
.ticket-card::before,
.ticket-card::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #F8FAFC;
  border-radius: 9999px;
  bottom: 78px; /* aligns with the dashed divider above the price */
  z-index: 1;
}
.ticket-card::before { left: -9px; }
.ticket-card::after { right: -9px; }

/* ---------- Mobile hamburger animation ---------- */
#mobile-menu-btn.is-open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#mobile-menu-btn.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
#mobile-menu-btn.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- FAQ accordion ---------- */
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}
.faq-item.is-open .faq-answer {
  max-height: 300px;
}

/* ---------- Focus visibility (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

/* ---------- Respect reduced motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}