/* ============================================================
   GLOBAL TYPOGRAPHY — srinivasbojanapu.in
   FILE: /assets/css/typography.css
   LINKED FROM: /includes/header.php (applies to ALL pages)
   
   To change any font size site-wide, edit ONLY this file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&family=Merriweather:ital,wght@0,300;0,700;0,900;1,300&display=swap');

/* ============================================================
   SCALE — edit these variables to change everything at once
   ============================================================ */
:root {
    /* Fonts */
    --font-body: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    --font-head: 'Merriweather', Georgia, serif;

    /* Heading sizes */
    --sz-h1:   2.8rem;    /* 44.8px — page title */
    --sz-h2:   2rem;      /* 32px   — section heading */
    --sz-h3:   1.5rem;    /* 24px   — sub-section */
    --sz-h4:   1.2rem;    /* 19.2px — card/block title */

    /* Body sizes */
    --sz-body: 1.125rem;  /* 18px   — all paragraph text */
    --sz-sm:   1rem;      /* 16px   — table cells, list items */
    --sz-xs:   0.875rem;  /* 14px   — labels, badges, breadcrumb */

    /* Line heights */
    --lh:      1.75;      /* body paragraphs */
    --lh-head: 1.25;      /* all headings */
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
body {
    font-family: var(--font-body);
    font-size:   var(--sz-body);
    line-height: var(--lh);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-family: var(--font-head);
    font-size:   var(--sz-h1);
    line-height: var(--lh-head);
    margin:      0 0 20px 0;
}

h2 {
    font-family: var(--font-head);
    font-size:   var(--sz-h2);
    line-height: var(--lh-head);
    margin:      0 0 16px 0;
}

h3 {
    font-family: var(--font-head);
    font-size:   var(--sz-h3);
    line-height: var(--lh-head);
    margin:      0 0 12px 0;
}

h4 {
    font-family: var(--font-head);
    font-size:   var(--sz-h4);
    line-height: var(--lh-head);
    margin:      0 0 10px 0;
}

p {
    font-size:   var(--sz-body);
    line-height: var(--lh);
    margin-bottom: 16px;
}

li {
    font-size:   var(--sz-body);
    line-height: var(--lh);
}

/* ============================================================
   COMPONENT OVERRIDES
   These target the shared classes used across all specialty pages
   ============================================================ */

/* Hub cards */
.hub-card h3 {
    font-size:      1.1rem;
    letter-spacing: 0.04em;
    margin-bottom:  14px;
    line-height:    1.3;
}
.hub-card p {
    font-size:   1.063rem;
    line-height: 1.78;
}

/* Focus / oncology section items */
.focus-item h4,
.oncology-item h4 {
    font-size:   var(--sz-h4);
    line-height: var(--lh-head);
}
.focus-item p,
.oncology-item p {
    font-size:   var(--sz-sm);
    line-height: 1.7;
}

/* Protocol cards */
.proto-head {
    font-size: 1.063rem;
}
.proto-card p {
    font-size:   var(--sz-sm);
    line-height: 1.65;
}

/* Snug lists */
.snug-list li    { font-size: var(--sz-body); }
.snug-list span  { font-size: var(--sz-sm);   line-height: 1.6; }
.snug-list strong{ font-size: var(--sz-body); }

/* Check lists */
.check-list li { font-size: var(--sz-body); }

/* Stat boxes */
.stat-number { font-size: 2.2rem; }
.stat-label  { font-size: var(--sz-xs); }

/* Regen timeline cards */
.regen-number { font-size: 2rem; }
.regen-card p { font-size: var(--sz-sm); }

/* Tables */
.fibrosis-table,
.meld-table {
    font-size: var(--sz-sm);
}
.fibrosis-table th,
.meld-table th {
    font-size: var(--sz-sm);
}

/* Badges & labels — always stay small */
.stage-badge,
.meld-badge,
.hero-tag,
.insider-title,
.ev-title,
.wt {
    font-size: var(--sz-xs);
}

/* Boxes */
.insider-box p,
.alert-tip p  { font-size: var(--sz-body); line-height: var(--lh); }
.evidence-box p { font-size: var(--sz-sm); line-height: 1.65; }
.warning-box p  { font-size: var(--sz-sm); line-height: 1.65; }

/* Expert quote */
.expert-quote      { font-size: 1.1rem;       line-height: 1.7; }
.expert-quote cite { font-size: var(--sz-xs); }

/* FAQ */
.faq-trigger  { font-size: 1.125rem; }
.faq-content  { font-size: var(--sz-body); line-height: var(--lh); }
.faq-q        { font-size: var(--sz-body); }
.faq-a        { font-size: var(--sz-sm);   line-height: 1.7; }

/* Breadcrumb */
.breadcrumb-nav { font-size: var(--sz-xs); }

/* Sidebar quick reference */
.sidebar ul li,
.side-col  ul li { font-size: var(--sz-sm); }

/* Blood group cards */
.blood-type    { font-size: 1.8rem; }
.blood-card span:last-child { font-size: var(--sz-xs); }

/* Info cards (LDLT page) */
.info-card h3  { font-size: var(--sz-h3); }
.info-card p   { font-size: var(--sz-sm); line-height: 1.65; }

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES
   Scales down headings on small screens only
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --sz-h1:   2.1rem;    /* 33.6px */
        --sz-h2:   1.6rem;    /* 25.6px */
        --sz-h3:   1.3rem;    /* 20.8px */
        --sz-h4:   1.1rem;    /* 17.6px */
        --sz-body: 1.063rem;  /* 17px — slightly tighter on mobile */
        --sz-sm:   0.95rem;   /* 15.2px */
    }

    .stat-number  { font-size: 1.8rem; }
    .regen-number { font-size: 1.6rem; }
}