/* ============================================
   THE DENTAL VISION INSTITUTE
   Dark Navy + Teal Theme
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { overflow-x: hidden; font-weight: 500; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
p, li, span, a, blockquote { font-weight: 500; }

/* Scroll anchors offset */
[id] { scroll-margin-top: 100px; }

/* ============================================
   NAVBAR — Dark state (over hero)
   ============================================ */
#navbar { background: #1e3a8a; transition: background 0.5s, backdrop-filter 0.5s, box-shadow 0.5s; }

.nav-text { color: white; }
.nav-text-dim { color: rgba(255,255,255,0.85); }
.nav-ham { background: white; }

/* Scrolled past hero — fully transparent (for dark sections) */
#navbar.nav-light {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

#navbar.nav-light .nav-text { color: white; }
#navbar.nav-light .nav-text-dim { color: rgba(255,255,255,0.85); }
#navbar.nav-light .nav-ham { background: white; }
/* Over light/white backgrounds — blue header */
#navbar.nav-on-light {
  background: #1e3a8a;
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

#navbar.nav-on-light .nav-text { color: white; }
#navbar.nav-on-light .nav-text-dim { color: rgba(255,255,255,0.85); }
#navbar.nav-on-light .nav-ham { background: white; }

/* ============================================
   HAMBURGER
   ============================================ */
.hamburger.active span:first-child { transform: translateY(3.5px) rotate(45deg); width: 100%; }
.hamburger.active span:last-child { transform: translateY(-3.5px) rotate(-45deg); width: 100%; }

/* Mobile menu */
#mobile-menu.open { opacity: 1; pointer-events: all; }
#mobile-menu.open .mob-link {
  opacity: 1; transform: translateY(0);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.open .mob-link:nth-child(1) { transition-delay: 0.05s; }
#mobile-menu.open .mob-link:nth-child(2) { transition-delay: 0.1s; }
#mobile-menu.open .mob-link:nth-child(3) { transition-delay: 0.15s; }
#mobile-menu.open .mob-link:nth-child(4) { transition-delay: 0.2s; }
#mobile-menu.open .mob-link:nth-child(5) { transition-delay: 0.25s; }
#mobile-menu.open .mob-link:nth-child(6) { transition-delay: 0.3s; }

/* ============================================
   HERO ANIMATIONS
   ============================================ */
.hero-el { opacity: 0; transform: translateY(30px); }
.hero-img { opacity: 0; transform: translateY(40px) scale(0.95); }

/* ============================================
   SECTION REVEAL (GSAP driven)
   ============================================ */
.section-label, .section-title, .section-sub {
  opacity: 0; transform: translateY(30px);
}
.service-card, .plan-card, .testimonial-card, .stat-item {
  opacity: 0; transform: translateY(40px);
}

/* ============================================
   REVIEW MARQUEE
   ============================================ */
.review-marquee {
  animation: marquee-scroll 30s linear infinite;
}
.review-marquee:hover {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   FAQ
   ============================================ */
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-item.active .faq-icon svg { stroke: #0D9488; }
.faq-item.active .faq-answer { max-height: 200px; }

/* ============================================
   FORM
   ============================================ */
.member-btn.active {
  border-color: #1d4ed8;
  color: #1d4ed8;
  background: #eff6ff;
}

input:focus, select:focus, textarea:focus {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.08);
}

/* ============================================
   SCROLL PROGRESS
   ============================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; background: #1d4ed8;
  z-index: 999; transform-origin: left;
  will-change: transform;
}

/* ============================================
   SELECTION
   ============================================ */
::selection { background: rgba(29,78,216,0.15); color: #1e3a8a; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================
   PRINT
   ============================================ */
@media print {
  .section-label, .section-title, .section-sub,
  .service-card, .plan-card, .testimonial-card,
  .hero-el, .hero-img, .stat-item {
    opacity: 1 !important; transform: none !important;
  }
  #navbar, #mobile-menu, .scroll-progress { display: none !important; }
}