/* ============================================
   STANDARDIZED TYPOGRAPHY - SITE-WIDE CONSISTENCY
   All similar elements use the same font sizes
   ============================================ */

/* ============================================
   1. HERO & SLOGAN ELEMENTS
   ============================================ */

/* Main slogan/hero text - LARGEST */
.slogan-title {
    font-size: var(--font-display-1); /* 56px → 48px → 32px → 28px */
    font-weight: 900;
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-tight);
    text-align: center;
}

/* ============================================
   2. SECTION HEADERS (All main section titles)
   ============================================ */

/* All main section titles - CONSISTENT */
.section-title,
h2.section-title {
    font-size: var(--font-heading-1); /* 32px → 28px → 24px → 22px */
    font-weight: 900;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
}

/* All section eyebrows - CONSISTENT */
.section-eyebrow {
    font-size: var(--font-label-sm); /* 11px → 10px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
}

/* ============================================
   3. SUBSECTION TITLES (h3 elements)
   ============================================ */

/* All subsection titles - CONSISTENT
   Used for: Timeline steps, FAQ categories, Visa regions */
.timeline-content h3,
.faq-category-title,
.visa-region-title,
h3 {
    font-size: var(--font-heading-3); /* 24px → 22px → 20px → 18px */
    font-weight: 800;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
}

/* ============================================
   4. ITEM TITLES (h4 elements)
   ============================================ */

/* All item titles - CONSISTENT
   Used for: Visa item titles, service items */
.visa-item h4,
.service-item h4,
h4 {
    font-size: var(--font-heading-5); /* 18px → 16px → 15px */
    font-weight: 700;
    line-height: var(--line-height-heading);
}

/* ============================================
   5. QUESTIONS & INTERACTIVE ELEMENTS
   ============================================ */

/* All questions - CONSISTENT
   Used for: FAQ questions, modal FAQ questions */
.faq-question,
.modal-faq-question {
    font-size: var(--font-body-base) !important; /* Match body text: 15px → 14px → 13px */
    font-weight: 600;
    line-height: var(--line-height-heading);
}

/* ============================================
   6. BODY TEXT & DESCRIPTIONS
   ============================================ */

/* All body text - CONSISTENT
   Used for: Timeline descriptions, FAQ answers, visa descriptions, modal content */
.timeline-content p,
.faq-answer p,
.visa-item p,
.modal-faq-answer p,
.country-modal-hero-overlay p,
.country-modal-header p,
.service-description,
p {
    font-size: var(--font-body-base); /* 15px → 14px → 13px */
    line-height: var(--line-height-body);
}

/* ============================================
   7. NUMBERS & BADGES
   ============================================ */

/* Timeline numbers */
.timeline-number {
    font-size: var(--font-heading-4); /* 20px → 18px */
    font-weight: 800;
    line-height: 1;
}

/* Service numbers in modals */
.service-number {
    font-size: var(--font-ui-base); /* 14px → 13px */
    font-weight: 700;
}

/* ============================================
   8. PRICES
   ============================================ */

/* All prices - CONSISTENT */
.visa-price,
.service-price,
.price {
    font-size: var(--font-price-base); /* 20px → 18px → 16px */
    font-weight: 600;
}

/* ============================================
   9. LABELS & CAPTIONS
   ============================================ */

/* All labels - CONSISTENT */
.country-info-label,
.label {
    font-size: var(--font-label-base); /* 12px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* All mini card labels */
.hero-mini-card-label,
.card-label {
    font-size: var(--font-label-base); /* 12px */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

/* ============================================
   10. BUTTONS
   ============================================ */

/* All buttons - CONSISTENT */
.btn-primary,
.btn-secondary,
button.btn,
.modal-cta-btn {
    font-size: var(--font-ui-lg); /* 15px → 14px */
    font-weight: 600;
}

/* Small buttons */
.service-order-btn,
.btn-sm {
    font-size: var(--font-ui-sm); /* 13px → 12px → 11px */
    font-weight: 600;
}

/* ============================================
   SUMMARY OF STANDARDIZATION
   ============================================ */

/*
HIERARCHY FROM LARGEST TO SMALLEST:

1. Hero/Slogan: 56px → 48px → 32px → 28px (--font-display-1)
2. Section Titles (h2): 32px → 28px → 24px → 22px (--font-heading-1)
3. Subsection Titles (h3): 24px → 22px → 20px → 18px (--font-heading-3)
4. Item Titles/Questions (h4): 18px → 16px → 15px (--font-heading-5)
5. Body Text: 15px → 14px → 13px (--font-body-base)
6. Large Buttons: 15px → 14px (--font-ui-lg)
7. Small Buttons: 13px → 12px → 11px (--font-ui-sm)
8. Labels: 12px (--font-label-base)
9. Eyebrows: 11px → 10px (--font-label-sm)

All similar elements now use the SAME SIZE across the entire site!
*/