/* ============================================================
   Финсабат — unified typography system.
   - Raleway is the single font family across the platform.
     Same choice as finsabat.kg, full Cyrillic + Kyrgyz Latin
     coverage, 9 weights from Thin (100) to Black (900).
   - Served from Google Fonts CDN — fonts.googleapis.com.
     A preconnect to fonts.gstatic.com is added by the layout.
   - Scale: H1..H6 + P1..P4 — clamp()-based, larger than the
     previous Manrope baseline.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700&display=swap');

/* ============================================================
   Typography scale tokens (used by everything below + by ed-*,
   mini-calc-*, site-polish v2). Sized up ~15% from the previous
   Manrope baseline per user request.
   ============================================================ */
:root {
    --font-display: 'Raleway', 'Manrope', 'PT Sans', system-ui, -apple-system,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Type scale — minor third + clamp for fluid mobile→desktop */
    --text-xs:   .82rem;       /* 13.1px */
    --text-sm:   .94rem;       /* 15px   */
    --text-base: 1.05rem;      /* 16.8px */
    --text-lg:   1.22rem;      /* 19.5px */
    --text-xl:   clamp(1.35rem, 1.18rem + .55vw, 1.55rem);
    --text-2xl:  clamp(1.6rem, 1.32rem + 1vw, 1.95rem);
    --text-3xl:  clamp(2rem, 1.55rem + 1.7vw, 2.5rem);
    --text-4xl:  clamp(2.5rem, 1.85rem + 2.6vw, 3.3rem);
    --text-5xl:  clamp(3rem, 2.1rem + 3.5vw, 4.2rem);

    --leading-tight: 1.18;
    --leading-snug: 1.32;
    --leading-normal: 1.55;
    --leading-relaxed: 1.7;

    --tracking-tighter: -.025em;
    --tracking-tight: -.015em;
    --tracking-normal: 0;
    --tracking-wide: .04em;
    --tracking-wider: .1em;
}

/* ============================================================
   Global font cascade — every element renders in DIN Pro by
   default; Manrope/PT Sans/system-ui pick up where DIN Pro is
   missing a glyph (rare for KGZ Cyrillic, but safety net).
   ============================================================ */
html, body {
    font-family: var(--font-display) !important;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--ink, #1f2a26);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Override any legacy theme font-family rules — but NEVER touch icon-font
   elements. The theme uses Flaticon (.fi-*), Font Awesome (.fa-*, .fas,
   .far, .fab, .fa-solid, .fa-regular, .fa-brands), UIcons
   (.uicons-*), Entypo (.entypo-*) and Bootstrap Icons (.bi-*). All of
   those need their original icon-font-family preserved.
   Listing the legacy theme classes explicitly (no `body *` wildcard). */
body,
h1, h2, h3, h4, h5, h6, p, a, button, label, input, textarea,
select, option, table, th, td, li, blockquote, figcaption, em,
strong, small, code, pre, samp, sub, sup, .title, .title-1, .title-2,
.title-3, .title-4, .title-5, .subtitle, .subtitle-1, .subtitle-2,
.subtitle-3, .subtitle-4, .subtitle-5, .btn, .nav, .nav-link,
.menu, .menu-parent-a, .menu-child-a, .form-control, .form-select,
.form-label, .alert, .badge, .breadcrumb, .breadcrumb-item,
.dropdown-item, .modal-title, .page-link, .card-title,
.tooltip-inner, .popover-header, .popover-body, .toast-header,
.toast-body, .offcanvas-title, .menu-block {
    font-family: var(--font-display) !important;
}

/* span / div / .calc-page etc. — apply DIN cascade, but exclude icon classes */
span:not([class*="fi-"]):not([class*="fa-"]):not(.fi):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="uicons-"]):not([class*="entypo-"]):not([class*="bi-"]):not([class*="icon-"]):not(.category-icon),
div:not([class*="fi-"]):not([class*="fa-"]):not(.fi):not(.fa) {
    font-family: var(--font-display);
}

/* CRITICAL — restore icon fonts so they actually render their glyphs. */
[class*="fi-rr-"], [class*="fi-rs-"], [class*="fi-br-"], [class*="fi-bs-"],
[class*="fi-sr-"], [class*="fi-tr-"], [class*="fi-ts-"], [class*="fi-cr-"],
.fi-rr-arrow-right, .fi { font-family: "uicons-regular-rounded" !important; }
[class*="fi-rs-"]   { font-family: "uicons-solid-rounded" !important; }
[class*="fi-br-"]   { font-family: "uicons-bold-rounded" !important; }
[class*="fi-bs-"]   { font-family: "uicons-bold-straight" !important; }
[class*="fi-sr-"]   { font-family: "uicons-solid-straight" !important; }
[class*="fi-tr-"]   { font-family: "uicons-thin-rounded" !important; }
[class*="fi-ts-"]   { font-family: "uicons-thin-straight" !important; }
[class*="uicons-"]  { font-family: inherit; }
[class*="uicons-regular-rounded"] { font-family: "uicons-regular-rounded" !important; }
[class*="uicons-bold-rounded"]    { font-family: "uicons-bold-rounded" !important; }
[class*="uicons-bold-straight"]   { font-family: "uicons-bold-straight" !important; }
[class*="uicons-solid-rounded"]   { font-family: "uicons-solid-rounded" !important; }
[class*="uicons-solid-straight"]  { font-family: "uicons-solid-straight" !important; }
[class*="uicons-thin-rounded"]    { font-family: "uicons-thin-rounded" !important; }
[class*="uicons-thin-straight"]   { font-family: "uicons-thin-straight" !important; }

/* Font Awesome — uses its own family per icon style */
.fa, .fas, .fa-solid     { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; font-weight: 900 !important; }
.far, .fa-regular        { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; font-weight: 400 !important; }
.fab, .fa-brands         { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; font-weight: 400 !important; }
.fa-light, .fal          { font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important; font-weight: 300 !important; }
.fa-thin, .fat           { font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important; font-weight: 100 !important; }

/* Entypo / Bootstrap-icons */
[class*="entypo-"]   { font-family: "entypo", "fontello" !important; }
[class*="bi-"], .bi  { font-family: "bootstrap-icons" !important; }

/* Reset italic on <i> when it's used as an icon container.
   Note: do NOT override font-family on .category-icon — it's a
   wrapper class always paired with .fas/.fab/.far which must keep
   their Font Awesome family. */
i[class*="fi-"], i[class*="fa-"], i[class*="bi-"], i[class*="uicons-"],
i.fa, i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands {
    font-style: normal;
}

/* ============================================================
   H1..H6 — single typographic ladder used everywhere.
   Bigger than the previous baseline (~15% up).
   ============================================================ */
h1, .h1, .title-1, .banner-title {
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
    margin: 0 0 var(--space-5, 1.25rem);
}

h2, .h2, .title-2, .title {
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0 0 var(--space-4, 1rem);
}

h3, .h3, .title-3 {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0 0 var(--space-3, .75rem);
}

h4, .h4, .title-4 {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0 0 var(--space-3, .75rem);
}

h5, .h5, .title-5 {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-snug);
    color: var(--ink);
    margin: 0 0 var(--space-2, .5rem);
}

h6, .h6, .subtitle, .subtitle-1, .subtitle-2 {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: var(--leading-normal);
    color: var(--ink);
    margin: 0 0 var(--space-2, .5rem);
}

/* ============================================================
   Paragraphs — semantic scale P1..P4
   P1 = lead, P2 = body (default), P3 = small, P4 = caption/meta
   ============================================================ */
p, .p2 {
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-relaxed);
    color: var(--body, #4b5563);
    margin: 0 0 var(--space-4, 1rem);
}

.p1, .lead, p.lead {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: var(--leading-relaxed);
    color: var(--body);
    margin: 0 0 var(--space-5, 1.25rem);
}

.p3, small, .small, .subtitle-3, .subtitle-4, .subtitle-5,
.in-subtitle-14px, .text-13px, .text-14px, .fs-13px, .fs-14px {
    font-size: var(--text-sm) !important;
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--body);
}

.p4, .caption, .meta, .eyebrow, .text-12px, .fs-12px {
    font-size: var(--text-xs) !important;
    font-weight: 500;
    line-height: var(--leading-normal);
    color: var(--muted, #6b7280);
    letter-spacing: var(--tracking-wide);
}

/* ============================================================
   Body text + interactive controls — inherit body font size
   ============================================================ */
button, .btn, input, textarea, select, label, a {
    font-size: var(--text-base);
}

.btn-sm,
.form-control.form-control-sm,
.form-select.form-select-sm {
    font-size: var(--text-sm) !important;
}

.btn-lg {
    font-size: var(--text-lg);
}

label, .form-label {
    font-weight: 500;
}

/* ============================================================
   List + blockquote — match body
   ============================================================ */
li {
    line-height: var(--leading-relaxed);
}

blockquote {
    font-size: var(--text-lg);
    font-style: normal;
    border-left: 3px solid var(--brand, #24bb8c);
    padding-left: var(--space-5, 1.25rem);
    color: var(--ink);
    margin: var(--space-5, 1.25rem) 0;
}

/* ============================================================
   Existing legacy size overrides — neutralize fixed pixel sizes
   so the global scale wins.
   ============================================================ */
.fs-56px, .fs-48px, .fs-44px, .fs-40px { font-size: var(--text-4xl) !important; }
.fs-36px, .fs-34px, .fs-32px           { font-size: var(--text-3xl) !important; }
.fs-28px, .fs-26px                     { font-size: var(--text-2xl) !important; }
.fs-24px, .fs-22px                     { font-size: var(--text-xl) !important; }
.fs-20px                               { font-size: var(--text-lg) !important; }
.fs-18px, .fs-16px                     { font-size: var(--text-base) !important; }
.fs-15px, .fs-14px                     { font-size: var(--text-sm) !important; }
.fs-13px, .fs-12px                     { font-size: var(--text-xs) !important; }

/* Tabular numbers for prices, calculator results, money */
.tabular-nums, .price, .mc-result-value, .ed-primary-value,
.ed-stat-value, .ed-status-value {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Dark theme inherits everything — only colour shifts
   ============================================================ */
html[data-theme="dark"] body { color: var(--body); }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--ink); }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}