/* ==========================================================================
   KEFI HEALTHCARE  ·  TYPE SCALE
   Loaded last on every page so one scale governs the whole site.

     Main headings     48 / 32
     Section headings  36 / 26
     Card headings     24 / 20
     Paragraph         16 / 15
     Small and labels  14 / 13
     Buttons           16
   ========================================================================== */

:root{
  --fs-main:    48px;
  --fs-section: 36px;
  --fs-card:    24px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-btn:     16px;
}

@media (max-width: 768px){
  :root{
    --fs-main:    32px;
    --fs-section: 26px;
    --fs-card:    20px;
    --fs-body:    15px;
    --fs-small:   13px;
  }
}

/* --------------------------------------------------------------
   1. MAIN HEADINGS
   -------------------------------------------------------------- */
h1,
.hero-title{
  font-size: var(--fs-main);
  line-height: 1.14;
  letter-spacing: -.03em;
}
/* the page banner is a shorter band now, so its title sits a step below
   the main heading size rather than filling the whole strip */
.banner-title{
  font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.6rem) !important;
  line-height: 1.1;
  letter-spacing: -.03em;
}

/* --------------------------------------------------------------
   2. SECTION HEADINGS
   -------------------------------------------------------------- */
h2,
.display-md,
/* the home page uses .display-lg on its section h2s, not on a main heading */
.display-lg,
.faq-header h2,
.why-choose-us-section > .container > h2,
.core-values-section > .container > h2,
.compassionate-care-section > .container > h2{
  font-size: var(--fs-section);
  line-height: 1.2;
  letter-spacing: -.025em;
}

/* --------------------------------------------------------------
   3. CARD HEADINGS
   -------------------------------------------------------------- */
h3,
.display-sm,
.h4,
h3.h4,
.care-detail-card h4,
.aftercare-card h4,
.diff-card h4,
.trach-card h4,
.disease-card h4,
.symptom-card h4,
.value-item h4,
.feature-title,
.why-item h4,
.service-card h3,
.service-card.featured h3,
.mv-card h3,
.equipment-info-col h3,
.overlay-content h3,
.testi-name,
.adv-content h3,
.care-address-box h3{
  font-size: var(--fs-card) !important;
  line-height: 1.32;
  letter-spacing: -.018em;
}

/* --------------------------------------------------------------
   4. BODY COPY
   -------------------------------------------------------------- */
body,
p,
li,
.intro-text-col p,
.story-content p,
.about-content > p,
.hero-desc,
.section-header p,
.gallery-intro p,
.procedure-content p,
.care-address-box p,
.care-address-box ul li,
.faq-answer-inner,
.testi-quote,
.contact-info > p,
.care-item span,
.reason-text,
.equipment-info-col ul li,
.footer-brand p,
.service-card p,
.feature-desc,
.adv-content p,
.why-item p,
.mv-card p,
.value-item p,
.perk-card p,
.response-card p,
.process-step p,
.care-detail-card p,
.type-card p, .program-card p, .pillar-card p, .transplant-card p,
.aftercare-card p, .diff-card p, .trach-card p, .disease-card p,
.symptom-card p, .visit-card p, .service-icon + h3 + p,
.banner-sub{
  font-size: var(--fs-body) !important;
  line-height: 1.75;
}

/* form fields read as body copy */
.form-group input,
.form-group select,
.form-group textarea,
.form-group label{
  font-size: var(--fs-body) !important;
}

/* --------------------------------------------------------------
   5. SMALL TEXT AND LABELS
   -------------------------------------------------------------- */
.section-eyebrow,
.dark-eyebrow,
.mega-title,
.mega-aside-label,
.overlay-cat,
.hero-badge,
.stat-label,
.stat-desc,
.testi-role,
.contact-card h4,
.footer-col h4,
.footer-bottom p,
.footer-bottom-links a,
.footer-contact-list,
.footer-contact-list a,
.footer-contact-list span,
.footer-col ul li a,
.why-icon-item span,
.file-name-display,
.story-badge small,
.hero-scroll-hint,
.submenu-link,
.dropdown-submenu > .submenu-link{
  font-size: var(--fs-small) !important;
}

/* --------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------- */
.btn,
.btn-outline,
.btn-primary,
.btn-outline-primary,
.btn-submit,
.btn-call,
.nav-cta,
.mobile-cta,
.msc-book,
.service-arrow,
.testi-btn,
.file-upload-label,
.mega-aside-cta,
#hero .btn-primary,
#about .btn-primary{
  font-size: var(--fs-btn) !important;
}
.btn-sm{ font-size: var(--fs-small) !important; }

/* icons inside buttons scale with their label rather than jumping */
.btn i, .btn-outline i, .btn-primary i, .btn-submit i,
.btn-call i, .nav-cta i, .mobile-cta i, .msc-book i,
.mega-aside-cta i{ font-size: .85em; }

/* --------------------------------------------------------------
   7. NAVIGATION
   Kept at body size so the bar does not overpower the page.
   -------------------------------------------------------------- */
.nav-link,
.mobile-link,
.mobile-dropdown-toggle{
  font-size: var(--fs-body) !important;
}
.mega-col > a,
.acc-inner > a,
.dropdown-menu > a,
.sub-menu-level > a,
.mobile-submenu-toggle{
  font-size: var(--fs-small) !important;
}

/* --------------------------------------------------------------
   8. LONG HEADINGS NEED A SENSIBLE MEASURE AT 48px
   -------------------------------------------------------------- */
.hero-title{ max-width: 16ch; }
.banner-title{ line-height: 1.1; }

@media (max-width: 768px){
  .hero-title{ max-width: none; }
}