/* 
  [NomeDaClinica] Saúde — Vanilla CSS Styling
  Design System & Custom Utility Classes
*/

:root {
  /* Theme HSL Variables matching Tailwind theme */
  --background: 40 20% 98%;      /* Warm white #fcfbf9 */
  --foreground: 222 47% 11%;     /* Deep slate #0f172a */
  --border: 214.3 31.8% 91.4%;   /* Border light #e2e8f0 */
  --card: 0 0% 100%;
  
  --primary: 174 72% 36%;        /* Teal Emerald #149380 */
  --primary-foreground: 0 0% 100%;
  
  --secondary: 38 92% 50%;       /* Golden Amber #f59e0b */
  --secondary-foreground: 222 47% 11%;
  
  --muted: 210 40% 96.1%;        /* Muted bg #f1f5f9 */
  --muted-foreground: 215.4 16.3% 46.9%; /* Muted text #64748b */
  
  --accent: 174 40% 94%;         /* Light Teal accent #e6f7f5 */
  --accent-foreground: 174 72% 36%;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 1rem;
}

/* Reset & Base */
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Utilities */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary { color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-secondary { color: hsl(var(--secondary)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: #ffffff;
}

.btn-primary:hover {
  background-color: hsl(174 72% 30%);
  box-shadow: 0 10px 25px -5px rgba(20, 147, 128, 0.4);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.btn-secondary:hover {
  background-color: hsl(38 92% 45%);
  box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.4);
}

/* Header & Scrolled State */
header.scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Keyframe Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes float-delayed {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(8px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 4.5s ease-in-out infinite 1s;
}

/* FAQ Accordion Styling */
.faq-item {
  transition: all 0.3s ease;
}

.faq-item.active {
  border-color: rgba(20, 147, 128, 0.3) !important;
  background-color: rgba(20, 147, 128, 0.05) !important;
}

.faq-icon {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  background-color: hsl(var(--primary));
  color: #ffffff;
}

.faq-content {
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.faq-content.hidden {
  display: none;
}

/* Responsive Utilities fallback */
@media (max-width: 768px) {
  .hero-float-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 1rem;
  }
}