/**
 * DesIDEA — pixel-based responsive typography tokens
 * Brand font: Poppins (loaded in _MainLayout). Uses clamp() for fluid sizing
 * between readable mins and design maxes. Page-specific heroes may override.
 *
 * Breakpoint reference (CSS px):
 *  320–374 small mobile | 375–479 mobile | 480–767 large mobile
 *  768–1023 tablet | 1024–1279 small desktop | 1280–1439 desktop | 1440+ large
 *
 * Wired from: Views/Shared/_MainLayout.cshtml (link + critical body size)
 * Consumers: MainLayout.css (body/footer), layout inline nav/buttons,
 *            home-redesign / Index critical CSS (hero clamps aligned to scale)
 *
 * Exceptions (intentional, not forced onto --di-font-*):
 *  - Home hero titles use DM Sans + larger marketing clamps (30–52px)
 *  - Service pages (services-shared.css) keep existing rem/vw clamps
 *  - Nav dropdown mega-menu item labels may stay smaller than --di-font-nav
 *  - Chatbot / third-party widgets keep their own type scales
 */

:root {
    /* Prefer rem for user zoom; html base stays ~16px-equivalent via body */
    --di-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Body / UI */
    --di-font-body: clamp(14px, 0.35vw + 12.8px, 17px);
    --di-font-body-sm: clamp(13px, 0.25vw + 12.2px, 15px);
    --di-font-small: clamp(12px, 0.2vw + 11.4px, 14px);
    --di-font-caption: clamp(11px, 0.15vw + 10.6px, 13px);

    /* Headings */
    --di-font-hero: clamp(30px, 3.2vw + 18px, 64px);
    --di-font-h1: clamp(28px, 2.4vw + 16px, 48px);
    --di-font-h2: clamp(24px, 1.8vw + 14px, 40px);
    --di-font-h3: clamp(20px, 1.1vw + 14px, 28px);
    --di-font-h4: clamp(18px, 0.6vw + 14px, 24px);
    --di-font-h5: clamp(16px, 0.4vw + 13.5px, 20px);
    --di-font-h6: clamp(14px, 0.3vw + 12.5px, 18px);

    /* Chrome */
    --di-font-nav: clamp(13px, 0.25vw + 12.2px, 15px);
    --di-font-button: clamp(14px, 0.2vw + 13.2px, 16px);
    --di-font-footer: clamp(13px, 0.25vw + 12.2px, 15px);
    --di-font-footer-heading: clamp(14px, 0.35vw + 12.5px, 18px);
    --di-font-label: clamp(13px, 0.2vw + 12.4px, 15px);

    /* Line heights */
    --di-lh-tight: 1.2;
    --di-lh-snug: 1.3;
    --di-lh-body: 1.55;
    --di-lh-relaxed: 1.65;
}

/* ---- Global defaults (low specificity; page CSS can override) ---- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--di-font-sans);
    font-size: var(--di-font-body);
    line-height: var(--di-lh-body);
}

h1, .di-h1 {
    font-size: var(--di-font-h1);
    line-height: var(--di-lh-tight);
}

h2, .di-h2 {
    font-size: var(--di-font-h2);
    line-height: var(--di-lh-tight);
}

h3, .di-h3 {
    font-size: var(--di-font-h3);
    line-height: var(--di-lh-snug);
}

h4, .di-h4 {
    font-size: var(--di-font-h4);
    line-height: var(--di-lh-snug);
}

h5, .di-h5 {
    font-size: var(--di-font-h5);
    line-height: var(--di-lh-snug);
}

h6, .di-h6 {
    font-size: var(--di-font-h6);
    line-height: var(--di-lh-snug);
}

p {
    line-height: var(--di-lh-body);
}

small,
.small,
.di-text-small {
    font-size: var(--di-font-small);
}

.di-text-caption {
    font-size: var(--di-font-caption);
}

/* Shared chrome — MainLayout header / footer / CTAs */
.hero-nav-links a,
.hero-nav-links .hero-dropdown-btn {
    font-size: var(--di-font-nav);
}

.hero-nav-links .hero-mobile-contact-btn,
.header-right-side .contact-btn-head,
.sv-btn,
button.sv-btn,
a.button,
.button,
.modern-btn,
button[type="submit"].modern-btn {
    font-size: var(--di-font-button);
}

.inner-footer h3,
.desidea-footer .inner-footer h3,
.address_clr {
    font-size: var(--di-font-footer-heading);
}

.inner-footer p,
.inner-footer ul li a,
ul.main-pages-footerlinks li a,
.copyright-footer,
.copyright-text-logo span,
.desidea-footer .privacy_policy {
    font-size: var(--di-font-footer);
}

label,
.modern-input,
.modern-textarea,
.field-error {
    font-size: var(--di-font-label);
}

/* Hero utility for pages that opt in */
.di-hero-title {
    font-size: var(--di-font-hero);
    line-height: var(--di-lh-tight);
}

/* Narrow mobile: keep body readable; tighten only display scale slightly via vars already */
@media (max-width: 374px) {
    :root {
        --di-font-hero: clamp(28px, 8vw + 8px, 36px);
        --di-font-h1: clamp(26px, 6vw + 8px, 32px);
        --di-font-h2: clamp(22px, 5vw + 8px, 28px);
    }
}

/* Large desktop: continue from ~17px (avoid a drop vs 1280–1439 cap) */
@media (min-width: 1440px) {
    :root {
        --di-font-body: clamp(17px, 0.12vw + 15.3px, 18px);
    }
}

/* Prefer wrapping over overflow from typography */
h1, h2, h3, h4, h5, h6,
.hero-nav-links a,
.di-hero-title {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}