/* ================= home.css ================= */
/*
Cleaned & reordered version
Goals:

* Remove duplicates
* Group related styles
* Reduce mobile overflow risks
* Make responsive rules predictable
* Sync CSS variables to the official 4-token brand palette:
    - Telehealth Cyan  #0EA5E9  — primary CTAs, tech elements
    - Health Navy      #0F172A — structure, typography, dark sections
    - Soft Warm Cream  #F8FAFC — canvas baseline / neutral background
    - Triage Amber     #F59E0B — urgency flags & status badges ONLY,
                                  never a full section background
  (Previously the tokens here described an unrelated green/yellow
  theme, and several sections used an extra ad-hoc cream (#FEF3E2)
  that was never part of the approved palette. Both have been
  resolved below — see inline notes.)

ORDER:

1. CSS variables & base
2. Layout helpers
3. Typography
4. Buttons
5. Generic components (cards, images)
6. Sections (Hero, Why, Services, App, CTA, Search, Trust, FAQ)
7. Utilities
8. Responsive overrides
   */

/* ================= 1. Variables & Base ================= */
:root {
  /* Official 4-token brand palette */
  --blue: #0EA5E9;     /* Telehealth Cyan — primary brand / CTA color */
  --navy: #0F172A;     /* Health Navy — structure & typography */
  --offwhite: #F8FAFC; /* Soft Warm Cream — canvas baseline */
  --yellow: #F59E0B;   /* Triage Amber — urgency flags & status badges ONLY */

  /* Derived tint, not a separate brand color — a lightened version of
     Telehealth Cyan, used for the "why" section background and the
     icon-circle fills. Not officially in the 4-token doc, but it's a
     transparent tint of an approved token rather than a new hue. */
  --blue-light: #E0F2FE;

  /* Not part of the official palette. Kept only because it's already
     used for checklist checkmarks / FAQ active-state accents
     elsewhere in this file — flagged below at each usage so it's easy
     to swap to --blue if you want strict 4-token adherence there too. */
  --green: #00BF63;

  --dark: var(--navy);
  --radius: 10px;
}

.home {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================= 2. Layout Helpers ================= */

section {
  padding: 35px 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* ================= 3. Typography ================= */
h1, h2, h3 {
  line-height: 1.2;
}

.heroTitle {
  font-size: 2rem;
  /* Was #fff (white) — a leftover from an earlier dark hero-photo
     background. The hero is now a light background (#F8FAFC), so the
     default needs to be dark or the title is invisible unless every
     call site remembers to override it inline, which is fragile. */
  color: var(--navy);
}

.searchTitle {
  font-size: 1rem;
  color: #000;
}

.customSectionTitle {
  font-size: 2rem;
  line-height: 1.2;
  color: #000;
}

.section-lead {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.section-sub {
  font-size: 1rem;
  color: #64748B;
  max-width: 620px;
  margin: 0.75rem auto 3rem;
  line-height: 1.6;
}

.text-center {
  text-align: center;
}

/* ================= 4. Buttons ================= */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  white-space: normal;
  text-align: center;
}

.btn.primary {
  background: var(--blue);
  color: #fff;
}

.btn.secondary {
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue);
}

.btn.large {
  font-size: 1.1rem;
  padding: 14px 28px;
}

/* Class name kept as "btn-success" since it's referenced throughout
   Home.js, but it now points at the actual brand blue rather than
   green — this was previously overridden inline on every single call
   site (~6 times) with the same hardcoded #0EA5E9. Centralizing it
   here means new buttons get the right color for free. */
.btn-success {
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
}

.backgroundYellow {
  background: var(--yellow);
  color: #333;
}

.backgroundBlack {
  background: #333;
  color: #fff;
}

/* ================= 5. Generic Components ================= */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.card.highlight {
  background: var(--offwhite);
}

.image-card {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}

.image-card img {
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* ================= 6. Sections ================= */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.15);
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 12px;
}

.hero-sub {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 560px;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.hero-image {
  margin-left: auto;
}

.hero-image img {
  border-radius: 16px;
  object-fit: cover;
}

.hero-steps {
  display: flex;
  gap: 20px;
  margin: 30px 0;
  font-weight: 600;
  flex-wrap: wrap;
}

.step {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Search ---------- */
.home-search {
  background: #fff;
}

/* FLAGS */
.flags-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.flag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.flag-item img {
  width: 33px;
  height: 22px;
  object-fit: cover;
}

.coming-soon {
  margin-top: 30px;
  font-style: italic;
  color: #888;
}

/* ---------- Why / AI Symptom Assistant ---------- */
/* Was var(--yellow) — rendered as a solid saturated orange block
   sitting between two soft cream sections, clashing with the blue CTA
   button placed on top of it. Switched to the same soft blue used for
   the icon-circle fills elsewhere on the page (--blue-light) so this
   section reads as part of the same system instead of a separate,
   unrelated color. */
.why {
  background: var(--blue-light);
  padding: 88px 0;
}

.why .grid-2 {
  align-items: center;
}

.why-text {
  display: flex;
  flex-direction: column;
}

/* ---------- Services ---------- */
.services {
  background: #fff;
}

.services .grid-3 {
  gap: 24px;
}

.service-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.image-wrapper {
  height: 200px;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-card:hover .image-wrapper img {
  transform: scale(1.05);
}

.service-card h3 {
  margin: 16px 16px 8px;
}

.service-card p {
  margin: 0 16px 20px;
  color: #555;
}

.icon-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-overlay i {
  color: #fff;
  font-size: 18px;
}

/* Note: .ai-section (an exact duplicate of .why, also on --yellow) has
   been removed. It isn't referenced anywhere in Home.js — the AI
   section actually uses className="why". Keeping two classes for the
   same section invites them to drift out of sync, which is exactly
   what happened here. */

/* ---------- Trust ---------- */
.trust {
  background: #fff;
}

/* Checklist */
.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  padding-left: 26px;
  margin-bottom: 10px;
  position: relative;
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  /* --green isn't in the official 4-token palette either — left as-is
     for now since it wasn't part of this round's request, but if you
     want strict adherence here too, swap to var(--blue). */
  color: var(--green);
  font-weight: bold;
}

.lead {
  font-size: 1.1rem;
  font-weight: 500;
}

/* ---------- FAQ SECTION ---------- */
/* Was var(--yellow) (solid orange). Home.js already force-overrides
   this to #FFFFFF inline, so the live page was fine — but the CSS
   default was silently wrong, meaning any future refactor that drops
   the inline style regresses straight back to an orange FAQ section
   with no obvious reason why. Defaulting it to white here removes
   that trap. */
.faq-section {
  background: #FFFFFF;
  padding: 60px 0;
}

.faq-grid {
  max-width: 800px;
  margin: 40px auto 0;
}

.faq-item {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 12px;
}

.faq-question:hover {
  background-color: #f5f5f5;
}

.faq-question.active {
  background-color: #fff;
  border-radius: 12px 12px 0 0;
}

.faq-icon {
  font-size: 24px;
  font-weight: 600;
  color: var(--green);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.faq-question.active .faq-icon {
  background-color: var(--green);
  color: #fff;
}

.faq-question h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 24px;
}

.faq-answer.open {
  max-height: 300px;
  padding: 0 24px 20px 70px;
}

.faq-answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #666;
}

/* ---------- App ---------- */
.app {
  background: #fff;
}

.app-links {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.app-links img {
  max-height: 50px;
  width: auto;
  cursor: pointer;
}

.app-image {
  max-width: 360px;
  margin-left: auto;
}

.app-image img {
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}

.app-responsive {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}

.responsive-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.responsive-text {
  font-size: 0.95rem;
  color: #2c3e50;
  line-height: 1.5;
  margin: 0;
}

/* ---------- CTA ---------- */
/* Was var(--yellow) (solid orange). Home.js was inline-overriding
   this to an ad-hoc warm cream (#FEF3E2) that was never part of the
   approved 4-token palette — replaced with the official Canvas
   (--offwhite / #F8FAFC) instead, per the decision to drop that
   extra color rather than formalize it. */
.cta {
  background: var(--offwhite);
  text-align: center;
}

.cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ================= 7. Utilities ================= */
.trust-heart {
  color: #e63946;
}

.align-top {
  align-items: start;
}

/* ================= 8. Responsive ================= */
@media (hover: hover) {
  .service-card:hover .icon-overlay {
    background: var(--blue);
  }
}

@media (max-width: 992px) {
  .grid-2,
  .grid-3,
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  .hero-image,
  .image-card,
  .app-image {
    margin: 0 auto;
    max-width: 100%;
  }

  .faq-answer.open {
    padding: 0 20px 16px 60px;
  }
}

@media (max-width: 768px) {
  .customSectionTitle {
    font-size: 1.6rem;
    line-height: 1.18;
  }

  .image-wrapper {
    height: 180px;
  }

  .icon-overlay {
    width: 40px;
    height: 40px;
  }

  .icon-overlay i {
    font-size: 16px;
  }

  .faq-question {
    padding: 16px 20px;
  }

  .faq-question h3 {
    font-size: 16px;
  }

  .faq-icon {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }

  .faq-answer.open {
    padding: 0 16px 16px 56px;
  }

  .faq-answer p {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .customSectionTitle {
    font-size: 1.35rem;
    line-height: 1.15;
  }

  .cta .btn {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .faq-question {
    padding: 14px 16px;
    gap: 12px;
  }

  .faq-question h3 {
    font-size: 15px;
  }

  .faq-icon {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }

  .faq-answer.open {
    padding: 0 12px 12px 48px;
  }

  .faq-answer p {
    font-size: 13px;
  }
}

@media (max-width: 376px) {
  .hero-image {
    display: none;
  }
}