/* ==========================================================================
   Dental Vedaa — Custom Stylesheet
   All Tailwind utility classes live in index.html (via CDN).
   This file contains only custom rules that cannot be expressed as Tailwind
   utilities, plus new interactive state styles driven by JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MATERIAL ICONS
   Required to render outlined-style icons at the correct optical size.
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   2. BRAND GRADIENTS
   Used on primary CTA buttons and the hero section.
   To change the gradient, update both values here.
   -------------------------------------------------------------------------- */
.hero-gradient {
  background: linear-gradient(135deg, #001425 0%, #052943 100%);
}

/* --------------------------------------------------------------------------
   3. GLASSMORPHISM
   Applied to the sticky navigation header.
   -------------------------------------------------------------------------- */
.glass-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* --------------------------------------------------------------------------
   4. FAQ ACCORDION — hide default browser arrow
   -------------------------------------------------------------------------- */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* FAQ content slide-down animation (triggered when <details> opens) */
details[open] > div {
  animation: faq-slide-down 0.2s ease-out;
}

@keyframes faq-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   5. MOBILE MENU
   Hidden by default; JS adds .is-open class on hamburger click.
   -------------------------------------------------------------------------- */
#mobile-menu {
  display: none;
  flex-direction: column;
}

#mobile-menu.is-open {
  display: flex;
}

/* --------------------------------------------------------------------------
   6. GALLERY
   Hover scale on individual gallery items.
   -------------------------------------------------------------------------- */
.gallery-item img {
  transition: transform 0.35s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* Gallery placeholder shown while no real image is present */
.gallery-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e3efff;
  color: #43474d;
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   7. ACTIVE NAV LINK
   JS adds .nav-active class to the currently-visible section's nav anchor.
   -------------------------------------------------------------------------- */
nav a.nav-active {
  color: #ffb41d !important;
  border-bottom-color: #ffb41d !important;
}

/* --------------------------------------------------------------------------
   8. SMOOTH SCROLL
   Enables smooth scrolling for all anchor links site-wide.
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}