/* ============================================================
   CENTRO DE MEDICINA AMERICANA — CUSTOM VISUALS
   ============================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Specific mobile font size overrides for readability without scaling the entire page layout */
@media (max-width: 640px) {
  /* 1. Main Headlines (H1 & H2) */
  h1.text-2xl {
    font-size: 2.1rem !important; /* ~33px, well increased! */
    line-height: 1.25 !important;
  }
  h2.text-2xl, h2.text-3xl {
    font-size: 1.85rem !important; /* ~30px instead of 24px */
    line-height: 1.3 !important;
  }

  /* 2. Taglines & Category Labels (uppercase tracking texts) */
  .font-mono.tracking-widest.uppercase,
  .font-mono.tracking-wider.uppercase,
  .font-mono.tracking-\[0\.2em\].uppercase {
    font-size: 14px !important;
  }

  /* 3. Subtitles/texts immediately below titles (e.g., text-center max-w-3xl p, hero intro, etc.) */
  .text-center > p,
  h2 + p,
  h2 + div p,
  .max-w-3xl p,
  .max-w-5xl p,
  .space-y-4 p,
  .bg-rose-50\/50 p,
  .max-w-3xl .text-gray-500 {
    font-size: 18px !important; /* Subtitles under headings increased to 18px! */
    line-height: 1.65 !important;
  }

  /* 4. Paragraphs in all blocks (cards, treatments, steps, doctor cards) */
  .grid p,
  .grid span,
  .bg-teal-50\/50 p,
  .p-6 p,
  .p-8 p,
  .p-10 p,
  .space-y-1.5 p,
  .space-y-4 p.text-sm {
    font-size: 16px !important; /* Body descriptions inside blocks raised to 16px */
    line-height: 1.6 !important;
  }

  /* 5. Testimonial quotes and texts (aumentado tudo) */
  p.italic,
  .space-y-3 p.italic,
  p.leading-relaxed.italic {
    font-size: 18px !important; /* Testimonials increased to 18px! */
    line-height: 1.65 !important;
  }

  /* 6. FAQ (Perguntas e Respostas) */
  .faq-item button span, 
  .faq-item span.text-sm,
  .faq-item button div.flex span {
    font-size: 17px !important; /* FAQ Questions raised to 17px */
    line-height: 1.45 !important;
  }
  .faq-content {
    font-size: 16.5px !important; /* FAQ Answers raised to 16.5px */
    line-height: 1.6 !important;
  }

  /* 7. Rodapé (Footer - Linhas de cuidado, Informações, Links, Copyright) */
  footer p,
  footer ul,
  footer li,
  footer span,
  footer a,
  footer button {
    font-size: 15.5px !important; /* Footer text raised to 15.5px */
    line-height: 1.6 !important;
  }
  footer h4.font-mono {
    font-size: 15px !important; /* Footer headers raised to 15px */
  }
  footer p.text-\[10px\] {
    font-size: 13.5px !important; /* Small legal text raised to 13.5px */
  }

  /* Metadata labels and small tags */
  .text-\[11px\], 
  .text-\[10px\], 
  .text-\[9px\],
  span.text-[9px] {
    font-size: 13px !important;
  }
}

/* Base tweaks to augment Tailwind */

/* Pulsing and micro-animations */
@keyframes pulse-slow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 25px -5px rgba(161, 23, 57, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 20px 35px -5px rgba(161, 23, 57, 0.6);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3.2s ease-in-out infinite;
}

/* Elegant header underline */
#cma-header-menu {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Selection custom color */
::selection {
  background-color: rgb(254 226 226);
  color: rgb(161 23, 57);
}

/* FAQ transition adjustments */
.faq-content {
  animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}