/**
 * Amália KrisztaDent - Modular Card Focus & Scroll Highlight Stylesheet
 * High-performance, GPU-safe border transitions (zero layout thrashing, zero box-shadow re-rasterization)
 * Version: 2.6
 */

/* Base transition for candidate cards: smooth, lightweight border-color transition */
.faq-item,
.faq-visual-card,
.faq-video-card,
.faq-cta-box,
.hero-card,
.service,
.local-card,
.contact-card,
.hours-card,
.home-video-card,
.wa-request-card,
.service-notice-card,
.tourist-emergency-card,
.about-card,
.aboutme-card {
  transition: border-color 0.35s ease-out !important;
  will-change: auto !important;
}

/* Explicitly exclude reviews, clinic cards and aboutme modal from scroll highlighting */
.clinic-card,
.locations-grid,
.review-card,
.reviews-section .review-card,
.reviews-section article,
#aboutme-modal .aboutme-card {
  box-shadow: none !important;
  animation: none !important;
}

/* Nested card protection: only outer container glows */
:is(.faq-item, .local-card, .service, .hero-card) :is(.faq-visual-card, .local-card, .contact-card, .service, .wa-request-card) {
  box-shadow: none !important;
  animation: none !important;
  border-color: var(--line, rgba(255, 255, 255, 0.08)) !important;
}

/* Active center-focus highlight - subtle emerald glow (desktop/default) */
.faq-item.is-scroll-focused,
.faq-visual-card.is-scroll-focused,
.faq-video-card.is-scroll-focused,
.faq-cta-box.is-scroll-focused,
.hero-card.is-scroll-focused,
.service.is-scroll-focused,
.local-card.is-scroll-focused,
.contact-card.is-scroll-focused,
.hours-card.is-scroll-focused,
.home-video-card.is-scroll-focused,
.wa-request-card.is-scroll-focused,
.service-notice-card.is-scroll-focused,
.tourist-emergency-card.is-scroll-focused,
.about-card.is-scroll-focused,
.aboutme-card.is-scroll-focused {
  border-color: rgba(52, 211, 153, 0.42) !important;
  transform: none !important;
}

/* Expanded FAQ item active focus */
details.faq-item[open].is-scroll-focused {
  border-color: rgba(52, 211, 153, 0.50) !important;
}

/* FAQ toggle icon subtle accent */
.faq-item.is-scroll-focused .faq-icon-toggle {
  color: #25d366;
  background: rgba(37, 211, 102, 0.12);
  transition: color 0.25s ease, background 0.25s ease;
}

/* Mobile responsive color tuning */
@media (max-width: 768px) {
  .hero-card.is-scroll-focused,
  .service.is-scroll-focused,
  .local-card.is-scroll-focused,
  .hours-card.is-scroll-focused,
  .home-video-card.is-scroll-focused,
  .service-notice-card.is-scroll-focused,
  .about-card.is-scroll-focused,
  .aboutme-card.is-scroll-focused,
  .faq-item.is-scroll-focused,
  .faq-visual-card.is-scroll-focused {
    border-color: rgba(56, 189, 248, 0.45) !important;
    transform: none !important;
  }

  .tourist-emergency-card.is-scroll-focused,
  .wa-request-card.is-scroll-focused,
  .contact-card.is-scroll-focused,
  .faq-cta-box.is-scroll-focused {
    border-color: rgba(52, 211, 153, 0.48) !important;
    transform: none !important;
  }
}

/* Accessibility: disable transitions when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-visual-card,
  .faq-video-card,
  .faq-cta-box,
  .hero-card,
  .service,
  .local-card,
  .contact-card,
  .hours-card,
  .home-video-card,
  .wa-request-card,
  .service-notice-card,
  .tourist-emergency-card,
  .about-card,
  .aboutme-card {
    transition: none !important;
  }
}