/* ============================================================
   Shalom Medicare — Custom CSS
   Design: Smile-Dent · Premium · Warm · Photo-first
   ============================================================ */

html  { scroll-behavior: smooth; }

/* Base body: 16px on mobile, 18px on sm+ */
body  { font-size: 16px; line-height: 1.7; }
@media (min-width: 640px) { body { font-size: 18px; } }

/* ── Sticky header shadow ── */
#main-header.scrolled { box-shadow: 0 2px 20px rgba(15,45,122,0.09); }

/* ── Active nav link ── */
.nav-link.active { color: #1d54c4; background-color: #dbeafe; font-weight: 700; }

/* ── Hero: right-side panel ── */
.hero-circle { pointer-events: none; }

/* Hero placeholder: hidden by default, show on img error via JS */
.hero-ph { display: none; }

/* ── Testimonial: giant background quote mark ── */
.quote-giant-mark {
  position: absolute;
  top: 8px;
  right: 20px;
  font-size: 140px;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(255,255,255,0.035);
  user-select: none;
  pointer-events: none;
}

/* ── Select dropdown arrow ── */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%231d54c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 44px !important;
  appearance: none;
}

/* ── Mobile drawer — transition handled by inline style; CSS is fallback ── */
@media (min-width: 1280px) {
  #mobile-menu, #menu-backdrop { display: none !important; }
}

/* ── Back to top ── */
#back-to-top.visible { opacity: 1 !important; visibility: visible !important; }

/* ── Entry animations ── */
.fade-in-up,
.fade-in-left,
.fade-in-right,
.scale-in {
  transition-duration: 0.65s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-property: opacity, transform;
}
.fade-in-up    { opacity: 0; transform: translateY(28px); }
.fade-in-left  { opacity: 0; transform: translateX(-36px); }
.fade-in-right { opacity: 0; transform: translateX(36px); }
.scale-in      { opacity: 0; transform: scale(0.93); }

.fade-in-up.visible,
.fade-in-left.visible,
.fade-in-right.visible,
.scale-in.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delay utilities */
.anim-delay-1 { transition-delay: 0.08s; }
.anim-delay-2 { transition-delay: 0.18s; }
.anim-delay-3 { transition-delay: 0.30s; }
.anim-delay-4 { transition-delay: 0.44s; }
.anim-delay-5 { transition-delay: 0.60s; }

/* Hero: keyframe animations (above fold — no IO, runs on load) */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero-animate       { animation: heroFadeUp   0.75s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-animate-right { animation: heroFadeRight 0.80s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-d1 { animation-delay: 0.05s; }
.hero-d2 { animation-delay: 0.18s; }
.hero-d3 { animation-delay: 0.32s; }
.hero-d4 { animation-delay: 0.48s; }
.hero-d5 { animation-delay: 0.64s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up, .fade-in-left, .fade-in-right, .scale-in {
    opacity: 1; transform: none; transition: none;
  }
  .hero-animate, .hero-animate-right {
    animation: none; opacity: 1; transform: none;
  }
}

/* ── Line clamp for testimonial quotes ── */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Focus ring (accessibility) ── */
:focus-visible { outline: 2px solid #1d54c4; outline-offset: 2px; }

/* ── Touch: disable hover lifts ── */
@media (hover: none) {
  [class*="hover:-translate-y"] { transform: none !important; }
}

/* ── Responsive hero headline clamp ── */
@media (max-width: 480px) {
  .hero-image-wrap { max-height: 320px; }
}

/* ── Mobile: show phone pill at xs ── */
@media (max-width: 639px) {
  #mobile-phone-pill { display: flex !important; }
}

/* ── Prevent horizontal overflow — clip avoids breaking position:fixed on iOS Safari ── */
html { overflow-x: clip; }

/* ── Print ── */
@media print {
  #main-header, #back-to-top { display: none; }
}