/* ===================================================
   Super Natural Healing — Custom Styles
   Supplements Tailwind CSS (loaded via CDN)
=================================================== */

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

/* Font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================================================
   Navigation
=================================================== */
nav a {
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* ===================================================
   Hero Section
=================================================== */
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(88, 28, 135, 0.85) 0%,
    rgba(67, 56, 202, 0.5) 60%,
    transparent 100%
  );
}

/* ===================================================
   Buttons
=================================================== */
a[href], button {
  transition: all 0.2s ease;
}

/* ===================================================
   Cards — hover lift effect
=================================================== */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.15);
}

/* ===================================================
   Form Inputs — focus glow
=================================================== */
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Select arrow fix */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px !important;
}

/* ===================================================
   FAQ <details> / accordion
=================================================== */
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details[open] {
  border-color: #8B5CF6 !important;
}
details[open] summary {
  color: #7C3AED;
}

/* ===================================================
   Chakra circles — glow on hover
=================================================== */
.chakra-circle {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chakra-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}

/* ===================================================
   Page transitions — fade in on load
=================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main,
section:first-of-type {
  animation: fadeInUp 0.5s ease both;
}

/* ===================================================
   Testimonial cards
=================================================== */
.testimonial-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ===================================================
   Footer links
=================================================== */
footer a {
  transition: color 0.15s ease;
}

/* ===================================================
   Print styles — clean printout
=================================================== */
@media print {
  nav, footer, button, .no-print {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
}

/* ===================================================
   Responsive utilities
=================================================== */
@media (max-width: 640px) {
  h1 { font-size: 2.5rem !important; }
  h2 { font-size: 2rem !important; }
}