/* ===================================================
   TYPOGRAPHY.CSS — Morning Sunday Teer
   Global Responsive Typography System with clamp()
   ===================================================
   This stylesheet enforces minimum readable font sizes
   across all devices (360px mobile → 4K desktop).
   
   It overrides Tailwind's small utility classes and
   hardcoded inline sizes to ensure WCAG AA readability.
   =================================================== */


/* ─── 1. CSS CUSTOM PROPERTIES (clamp-based) ─── */
:root {
  /* Headings */
  --typo-h1:        clamp(32px, 4vw + 12px, 56px);
  --typo-h2:        clamp(26px, 3vw + 10px, 42px);
  --typo-h3:        clamp(20px, 2vw + 8px, 28px);
  --typo-h4:        clamp(18px, 1.5vw + 6px, 24px);

  /* Body & UI */
  --typo-body:      clamp(16px, 0.9vw + 10px, 18px);
  --typo-body-sm:   clamp(15px, 0.8vw + 9px, 17px);
  --typo-nav:       clamp(16px, 0.9vw + 10px, 17px);
  --typo-btn:       clamp(16px, 0.9vw + 10px, 18px);
  --typo-table:     clamp(15px, 0.8vw + 9px, 17px);
  --typo-label:     clamp(14px, 0.7vw + 8px, 16px);
  --typo-badge:     clamp(13px, 0.7vw + 7px, 15px);
  --typo-footer:    clamp(15px, 0.8vw + 9px, 16px);
  --typo-small:     clamp(13px, 0.7vw + 7px, 15px);

  /* Result Numbers (keep large and bold) */
  --typo-result-num: clamp(34px, 4vw + 10px, 48px);

  /* Line heights */
  --lh-heading:     1.2;
  --lh-body:        1.7;
  --lh-tight:       1.3;
}


/* ─── 2. GLOBAL ELEMENT DEFAULTS ─── */
body {
  font-size: var(--typo-body);
  line-height: var(--lh-body);
}

p {
  font-size: var(--typo-body);
  line-height: var(--lh-body);
}

h1 { font-size: var(--typo-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--typo-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--typo-h3); line-height: var(--lh-tight); }
h4 { font-size: var(--typo-h4); line-height: var(--lh-tight); }
h5 { font-size: clamp(16px, 1vw + 8px, 20px); line-height: var(--lh-tight); }
h6 { font-size: clamp(15px, 0.9vw + 7px, 18px); line-height: var(--lh-tight); }

/* Form elements */
button,
input,
select,
textarea {
  font-size: var(--typo-body) !important;
}

label {
  font-size: var(--typo-label);
}

/* Table defaults */
table {
  font-size: var(--typo-table);
}

th {
  font-size: var(--typo-table);
  font-weight: 700;
  padding: 14px 16px;
}

td {
  font-size: var(--typo-table);
  padding: 12px 16px;
  line-height: 1.5;
}

/* Links & buttons base */
a {
  font-size: inherit;
}


/* ─── 3. TAILWIND SMALL-CLASS OVERRIDES ─── */
/* These override Tailwind's utility classes that produce tiny text.
   Using !important to beat Tailwind's specificity. */

/* text-xs = 12px → minimum 14px */
.text-xs {
  font-size: var(--typo-badge) !important;
  line-height: 1.4 !important;
}

/* text-sm = 14px → minimum 15-16px */
.text-sm {
  font-size: var(--typo-body-sm) !important;
  line-height: 1.5 !important;
}

/* Tailwind arbitrary small sizes */
/* text-[9px] through text-[13px] → enforce readable minimum */
[class*="text-\[9px\]"],
[class*="text-\[10px\]"],
[class*="text-\[11px\]"] {
  font-size: var(--typo-badge) !important;
  line-height: 1.4 !important;
}

[class*="text-\[12px\]"],
[class*="text-\[13px\]"] {
  font-size: var(--typo-small) !important;
  line-height: 1.5 !important;
}

[class*="text-\[14px\]"] {
  font-size: var(--typo-body-sm) !important;
  line-height: 1.5 !important;
}

[class*="text-\[15px\]"] {
  font-size: var(--typo-body) !important;
  line-height: 1.5 !important;
}


/* ─── 4. NAVIGATION OVERRIDES ─── */
/* Desktop nav links */
header nav a,
.navbar .nav-link {
  font-size: var(--typo-nav) !important;
}

/* Mobile menu links */
.mobile-menu .menu-link {
  font-size: clamp(16px, 1vw + 10px, 18px) !important;
}

.mobile-menu .menu-brand {
  font-size: clamp(17px, 1.2vw + 10px, 20px) !important;
}

.mobile-menu .menu-footer p {
  font-size: var(--typo-badge) !important;
}


/* ─── 5. BUTTON OVERRIDES ─── */
.btn-coral,
.btn-primary,
a.btn-coral,
button[type="submit"],
.btn-cta,
[class*="btn"] {
  font-size: var(--typo-btn) !important;
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 48px;
}


/* ─── 6. RESULT CARD OVERRIDES ─── */
/* Result card header */
.result-header h2,
.result-header h3 {
  font-size: clamp(20px, 2vw + 8px, 26px) !important;
}

/* Result card date */
.result-table .date-row {
  font-size: clamp(16px, 1.2vw + 8px, 20px) !important;
}

/* Result card region */
.result-table .region-row {
  font-size: clamp(15px, 1vw + 8px, 18px) !important;
}

/* Result card round headers */
.result-table .round-header {
  font-size: clamp(15px, 1vw + 8px, 18px) !important;
}

/* Result numbers — keep bold and prominent */
.result-table .number-cell {
  font-size: clamp(48px, 5vw + 16px, 64px) !important;
  font-weight: 800;
}

/* Circle result numbers */
.result-circle span {
  font-size: var(--typo-result-num) !important;
  font-weight: 800;
}

/* VS divider */
.result-vs span {
  font-size: var(--typo-badge) !important;
  font-weight: 700;
}


/* ─── 7. FEATURE CARD OVERRIDES ─── */
.feature-card .card-title,
.feature-grid h3 {
  font-size: clamp(14px, 1vw + 6px, 18px) !important;
  line-height: 1.3 !important;
}

.feature-grid p,
.feature-card p {
  font-size: clamp(13px, 0.8vw + 5px, 15px) !important;
  line-height: 1.4 !important;
}

.feature-card i,
.feature-grid .card-icon i {
  font-size: clamp(20px, 2vw + 8px, 32px);
}


/* ─── 8. MARQUEE OVERRIDES ─── */
.marquee-track,
.marquee-text {
  font-size: clamp(14px, 1vw + 8px, 16px) !important;
}


/* ─── 9. FAQ / ACCORDION OVERRIDES ─── */
.faq-accordion .accordion-button,
.accordion-trigger {
  font-size: clamp(16px, 1vw + 8px, 18px) !important;
  line-height: 1.4 !important;
  padding: 18px 22px !important;
}

.faq-accordion .accordion-body,
.accordion-content {
  font-size: var(--typo-body) !important;
  line-height: var(--lh-body) !important;
}


/* ─── 10. TRUST / INFO SECTION OVERRIDES ─── */
.trust-box h3 {
  font-size: var(--typo-h3) !important;
}

.trust-box p {
  font-size: var(--typo-body) !important;
  line-height: var(--lh-body) !important;
}


/* ─── 11. FOOTER OVERRIDES ─── */
.footer p,
.footer a,
footer p,
footer a {
  font-size: var(--typo-footer) !important;
}

.footer .disclaimer,
footer .disclaimer {
  font-size: var(--typo-small) !important;
  line-height: 1.6 !important;
}

.footer .links a,
footer .links a {
  font-size: var(--typo-footer) !important;
  margin: 0 8px;
}

.footer .copyright,
footer .copyright {
  font-size: var(--typo-footer) !important;
}

.dmca-badge {
  font-size: var(--typo-badge) !important;
}


/* ─── 12. TABLE RESPONSIVE OVERRIDES ─── */
.table-scroll-wrap table {
  font-size: var(--typo-table) !important;
}

.table-scroll-wrap th,
.table-scroll-wrap td {
  padding: 14px 16px !important;
  line-height: 1.5;
}

/* Data tables on sub-pages */
table.min-w-full th,
table.min-w-full td,
.overflow-x-auto table th,
.overflow-x-auto table td {
  font-size: var(--typo-table) !important;
  padding: 14px 16px !important;
}


/* ─── 13. TESTIMONIALS ─── */
.testimonial-slide blockquote,
blockquote {
  font-size: clamp(16px, 1vw + 8px, 18px) !important;
  line-height: 1.6 !important;
}


/* ─── 14. BADGES & TAGS ─── */
/* Small decorative labels / badges */
.bg-white\/20,
[class*="rounded-full"][class*="text-\[9px\]"],
[class*="rounded-full"][class*="text-\[10px\]"],
[class*="rounded-full"][class*="text-xs"] {
  font-size: var(--typo-badge) !important;
}


/* ─── 15. PAGE HEADER (Sub-pages) ─── */
.page-title {
  font-size: var(--typo-h1) !important;
}


/* ─── 16. HERO SECTION ─── */
.hero-bg h2,
.hero-bg .text-4xl,
.hero-bg .text-3xl {
  font-size: var(--typo-h1) !important;
}

.hero-bg p,
.hero-bg .text-sm,
.hero-bg .text-base {
  font-size: var(--typo-body) !important;
  line-height: var(--lh-body) !important;
}


/* ─── 17. INLINE STYLE OVERRIDES ─── */
/* Override the inline font-size:20px on the result card h2 */
[style*="font-size: 20px"],
[style*="font-size:20px"] {
  font-size: clamp(20px, 2vw + 8px, 26px) !important;
}


/* ─── 18. LARGE SCREEN SCALING (2K/4K) ─── */
@media (min-width: 1920px) {
  :root {
    --typo-body:      clamp(17px, 0.9vw + 10px, 20px);
    --typo-body-sm:   clamp(16px, 0.85vw + 9px, 19px);
    --typo-nav:       clamp(17px, 0.9vw + 10px, 19px);
    --typo-table:     clamp(16px, 0.85vw + 9px, 19px);
    --typo-footer:    clamp(16px, 0.85vw + 9px, 18px);
    --typo-badge:     clamp(14px, 0.75vw + 8px, 17px);
  }
}

@media (min-width: 2560px) {
  :root {
    --typo-h1:        clamp(48px, 3.5vw + 14px, 72px);
    --typo-h2:        clamp(36px, 2.5vw + 12px, 56px);
    --typo-h3:        clamp(26px, 2vw + 10px, 36px);
    --typo-body:      clamp(18px, 0.8vw + 12px, 22px);
    --typo-body-sm:   clamp(17px, 0.75vw + 11px, 20px);
    --typo-nav:       clamp(18px, 0.8vw + 12px, 20px);
    --typo-table:     clamp(17px, 0.75vw + 11px, 20px);
    --typo-footer:    clamp(17px, 0.75vw + 11px, 19px);
  }
}


/* ─── 19. ACCESSIBILITY ─── */
/* Minimum touch target */
@media (pointer: coarse) {
  a, button, [role="button"],
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Respect user font-size preferences */
@media (prefers-contrast: more) {
  :root {
    --typo-body: clamp(17px, 1vw + 11px, 20px);
    --typo-body-sm: clamp(16px, 0.9vw + 10px, 19px);
  }
}