/* =============================================
   Radiant Souls Psychiatry — Global Stylesheet
   Design System: Premium Minimalist / The Sanctuary
   ============================================= */

/* ---- Base ---- */
html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ---- Material Symbols ---- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Focus States (WCAG 2.1 AA) ---- */
:focus-visible {
  outline: 2px solid #1B6B6B;
  outline-offset: 3px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #1B6B6B;
  outline-offset: 3px;
}

/* ---- Nav Active State ---- */
.nav-link-active {
  color: #1B4F4F !important;
  border-bottom: 2px solid #0D6670;
  font-weight: 600;
}

/* ---- Sanctuary Shadow (Tonal, Not Heavy) ---- */
.sanctuary-shadow {
  box-shadow: 0 4px 20px rgba(15, 28, 44, 0.04);
}

.sanctuary-shadow-md {
  box-shadow: 0 8px 32px rgba(15, 28, 44, 0.06);
}

/* ---- Scroll-Triggered Fade-In Animations ---- */
.fade-in-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-section.delay-1 { transition-delay: 0.1s; }
.fade-in-section.delay-2 { transition-delay: 0.2s; }
.fade-in-section.delay-3 { transition-delay: 0.3s; }
.fade-in-section.delay-4 { transition-delay: 0.4s; }

/* ---- Mobile Menu ---- */
#mobile-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid rgba(231, 229, 228, 0.5);
}

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

/* ---- FAQ Accordion ---- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
  opacity: 0;
}

.faq-item.is-open .faq-answer {
  max-height: 400px;
  opacity: 1;
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}

.faq-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

/* ---- Blog Category Filter ---- */
.category-btn {
  transition: background-color 0.25s ease, color 0.25s ease;
}

.category-btn.is-active {
  background-color: #1B6B6B;
  color: #ffffff;
  border-color: #1B6B6B;
}

/* ---- Contact Form Validation ---- */
.field-error {
  border-color: #ba1a1a !important;
}

.error-msg {
  color: #ba1a1a;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.error-msg.visible {
  display: block;
}

/* Form success state */
.form-success {
  display: none;
  text-align: center;
  padding: 48px 24px;
}

.form-success.visible {
  display: block;
}

/* ---- Step Connector Line (Contact page) ---- */
.step-connector {
  position: absolute;
  top: 50%;
  left: calc(10% + 80px);
  right: calc(10% + 80px);
  height: 1px;
  background: linear-gradient(to right, #C9A96E, transparent, #C9A96E);
  opacity: 0.3;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---- Insurance Logo Cards ---- */
.insurance-logo-card img {
  transition: filter 0.35s ease, opacity 0.35s ease;
  filter: grayscale(1);
  opacity: 0.6;
}

.insurance-logo-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ---- Provider Card Hover ---- */
.provider-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.provider-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(15, 28, 44, 0.08);
}

/* ---- Service Card Hover ---- */
.service-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(27, 107, 107, 0.08);
}

/* ---- Hero gradient overlay ---- */
.hero-overlay {
  background: linear-gradient(
    105deg,
    rgba(251, 249, 250, 0.92) 0%,
    rgba(251, 249, 250, 0.6) 55%,
    rgba(251, 249, 250, 0.1) 100%
  );
}

/* ---- Gold accent border for secondary buttons ---- */
.btn-secondary {
  background: transparent;
  border: 1px solid #C9A96E;
  color: #0D1B2A;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn-secondary:hover {
  background-color: rgba(201, 169, 110, 0.08);
}

/* ---- Print / Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  .fade-in-section {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .faq-answer {
    transition: none;
  }

  .faq-icon {
    transition: none;
  }
}