/* ═══════════════════════════════════════════════════════════
   FANAVAR STEEL - CENTRALIZED TYPOGRAPHY SYSTEM
   Nielsen Norman Group Typography Standards for LTR
   Single point of control for ALL typography across the site

   LTR (English) Typography - NNgroup Standard:
   - Headings: Inter (wght 700-800)
   - Body/UI: Source Sans 3 (wght 400-600)
   - Body size: 18px, Line-height: ~1.7
   - H1: 50px/800, H2: 32px/700 (following NNgroup proportions)

   RTL (Persian/Arabic/Pashto) Typography:
   - Pashto: Bahij Muna
   - Persian/Arabic: Dibaj FaNum

   PORTO DOCS: https://www.okler.net/previews/porto/docs/
   NN/G REFERENCE: https://www.nngroup.com/
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FONT FAMILY - Nielsen Norman Group Typography Standards
   LTR: Inter for headings, Source Sans for body
   RTL: Language-specific fonts (Bahij Muna, Dibaj FaNum)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Nielsen Norman Group Typography (Inter + Source Sans) */
html[dir="ltr"] body,
html[dir="ltr"] html,
html[dir="ltr"] .body {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    /* NNgroup body: 18px, line-height ~1.7 */
    letter-spacing: normal;
}

/* RTL - Language-specific fonts via CSS variables */
html[dir="rtl"] body,
html[dir="rtl"] html,
html[dir="rtl"] .body,
body,
html,
.body {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════
   HEADINGS (H1-H6) - Nielsen Norman Group Standard
   LTR: Inter font for headings
   ═══════════════════════════════════════════════════════════ */

/* LTR - Inter for headings (NNgroup standard) */
html[dir="ltr"] h1,
html[dir="ltr"] .h1,
html[dir="ltr"] .text-12 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 50px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

html[dir="ltr"] h2,
html[dir="ltr"] .h2,
html[dir="ltr"] .text-10,
html[dir="ltr"] .text-11 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

html[dir="ltr"] h3,
html[dir="ltr"] .h3,
html[dir="ltr"] .text-9 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 27px;
    line-height: 1.4;
    letter-spacing: normal;
}

html[dir="ltr"] h4,
html[dir="ltr"] .h4,
html[dir="ltr"] .text-8 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: normal;
}

html[dir="ltr"] h5,
html[dir="ltr"] .h5,
html[dir="ltr"] .text-7 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: normal;
}

html[dir="ltr"] h6,
html[dir="ltr"] .h6,
html[dir="ltr"] .text-6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Base headings (fallback for all directions) */
h1,
.h1,
.text-12 {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 60px;
    line-height: 72px;
    letter-spacing: -0.3px;
}

h2,
.h2,
.text-10,
.text-11 {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 45px;
    line-height: 54px;
    letter-spacing: -0.3px;
}

h3,
.h3,
.text-9 {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 27px;
    line-height: 36px;
    letter-spacing: normal;
}

h4,
.h4,
.text-8 {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: normal;
}

h5,
.h5,
.text-7 {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: normal;
}

h6,
.h6,
.text-6 {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════
   BODY TEXT - Paragraphs & Content
   LTR: Source Sans for body text (NNgroup standard)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Source Sans for body */
html[dir="ltr"] p,
html[dir="ltr"] .paragraph,
html[dir="ltr"] .text-default {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    /* NNgroup: 18px body, ~1.7 line-height */
    letter-spacing: normal;
}

html[dir="ltr"] p.text-sm,
html[dir="ltr"] .text-small {
    font-size: 16px;
    line-height: 1.6;
}

html[dir="ltr"] .lead,
html[dir="ltr"] p.lead {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 400;
}

/* Base (fallback for RTL) */
p,
.paragraph,
.text-default {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: normal;
}

p.text-sm,
.text-small {
    font-size: 14px;
    line-height: 1.5;
}

.lead,
p.lead {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════
   NAVIGATION - Header Links
   LTR: Source Sans with Inter for active/hover states
   ═══════════════════════════════════════════════════════════ */

/* LTR - Source Sans for navigation (NNgroup style) */
html[dir="ltr"] nav,
html[dir="ltr"] nav a,
html[dir="ltr"] .nav-link,
html[dir="ltr"] #header nav a,
html[dir="ltr"] .header-nav-main nav>ul>li>a {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: normal;
}

/* Base navigation (fallback for RTL) */
nav,
nav a,
.nav-link,
#header nav a,
.header-nav-main nav>ul>li>a {
    font-family: var(--font-primary) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════
   BUTTONS - Call to Actions
   LTR: Inter for buttons (NNgroup uses Inter for UI)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Inter for buttons */
html[dir="ltr"] .btn,
html[dir="ltr"] button,
html[dir="ltr"] input[type="submit"],
html[dir="ltr"] input[type="button"],
html[dir="ltr"] .button {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

html[dir="ltr"] .btn-lg,
html[dir="ltr"] .btn-large {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

html[dir="ltr"] .btn-sm,
html[dir="ltr"] .btn-small {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.4px;
}

/* Base buttons (fallback for RTL) */
.btn,
button,
input[type="submit"],
input[type="button"],
.button {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.btn-lg,
.btn-large {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.8px;
}

.btn-sm,
.btn-small {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.6px;
}


/* ═══════════════════════════════════════════════════════════
   SERVICE CARDS - Consistent Typography
   LTR: Inter for titles, Source Sans for descriptions
   ═══════════════════════════════════════════════════════════ */

/* LTR - Service cards */
html[dir="ltr"] .service-card-new__content h5,
html[dir="ltr"] .service-card-grid .service-content h5,
html[dir="ltr"] .service-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
}

html[dir="ltr"] .service-card-new__content p,
html[dir="ltr"] .service-card-grid .service-content p,
html[dir="ltr"] .service-description {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* Base service cards (fallback for RTL) */
.service-card-new__content h5,
.service-card-grid .service-content h5,
.service-title {
    font-family: var(--font-primary) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 27px !important;
    letter-spacing: normal !important;
}

.service-card-new__content p,
.service-card-grid .service-content p,
.service-description {
    font-family: var(--font-primary) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   HERO SECTIONS - Large Impact Text
   LTR: Inter for hero headings (NNgroup standard)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Inter for hero headings */
html[dir="ltr"] .hero h1,
html[dir="ltr"] .hero-title,
html[dir="ltr"] [class*="hero"] h1,
html[dir="ltr"] .page-header h1 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(40px, 5vw, 50px);
    line-height: 1.2;
    letter-spacing: -0.3px;
}

html[dir="ltr"] #hero-section h1.hero-new-headline,
html[dir="ltr"] .hero h1.hero-new-headline {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(32px, 4vw, 50px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
}

html[dir="ltr"] .hero h2,
html[dir="ltr"] .hero-subtitle,
html[dir="ltr"] [class*="hero"] h2 {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(18px, 2.5vw, 20px);
    line-height: 1.5;
    letter-spacing: normal;
}

/* Base hero (fallback for RTL) */
.hero h1,
.hero-title,
[class*="hero"] h1,
.page-header h1 {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: clamp(48px, 6vw, 72px);
    line-height: 1.2;
    letter-spacing: -0.3px;
}

#hero-section h1.hero-new-headline,
.hero h1.hero-new-headline {
    font-weight: 400 !important;
    font-size: clamp(32px, 5vw, 48px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
}

.hero h2,
.hero-subtitle,
[class*="hero"] h2 {
    font-family: var(--font-primary) !important;
    font-weight: 400 !important;
    font-size: clamp(20px, 3vw, 24px);
    line-height: 1.4;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════
   LISTS - Unordered & Ordered
   LTR: Source Sans for list items
   ═══════════════════════════════════════════════════════════ */

/* LTR - Lists use body font */
html[dir="ltr"] ul,
html[dir="ltr"] ol,
html[dir="ltr"] li {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
}

/* Base lists (fallback for RTL) */
ul,
ol,
li {
    font-family: var(--font-primary) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════
   BADGES & LABELS - Small Info Elements
   LTR: Inter for badges (NNgroup uses Inter for UI elements)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Badges use Inter */
html[dir="ltr"] .badge,
html[dir="ltr"] .label,
html[dir="ltr"] .tag {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Base badges (fallback for RTL) */
.badge,
.label,
.tag {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════
   IMPACT NUMBERS - Statistics & Metrics
   LTR: Inter for numbers, Source Sans for labels
   ═══════════════════════════════════════════════════════════ */

/* LTR - Impact numbers */
html[dir="ltr"] .counter,
html[dir="ltr"] .impact-number,
html[dir="ltr"] .stat-number,
html[dir="ltr"] .counter-number {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800;
    font-size: 50px;
    line-height: 1;
    letter-spacing: -0.3px;
}

html[dir="ltr"] .counter-label,
html[dir="ltr"] .stat-label {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Base impact numbers (fallback for RTL) */
.counter,
.impact-number,
.stat-number,
.counter-number {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.3px;
}

.counter-label,
.stat-label {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════
   FORMS - Input Fields & Labels
   LTR: Source Sans for forms (NNgroup style)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Forms use Source Sans */
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select,
html[dir="ltr"] .form-control {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}

html[dir="ltr"] label,
html[dir="ltr"] .form-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: normal;
}

/* Base forms (fallback for RTL) */
input,
textarea,
select,
.form-control {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

label,
.form-label {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER - Footer Typography
   LTR: Source Sans for footer, Inter for headings
   ═══════════════════════════════════════════════════════════ */

/* LTR - Footer typography */
html[dir="ltr"] footer,
html[dir="ltr"] #footer,
html[dir="ltr"] .footer {
    font-family: 'Source Sans 3', 'Source Sans', Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

html[dir="ltr"] footer h1,
html[dir="ltr"] footer h2,
html[dir="ltr"] footer h3,
html[dir="ltr"] footer h4,
html[dir="ltr"] footer h5,
html[dir="ltr"] footer h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
}

/* Base footer (fallback for RTL) */
footer,
#footer,
.footer {
    font-family: var(--font-primary) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    font-family: var(--font-primary) !important;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════
   FONT WEIGHT UTILITIES - SendCutSend Standard
   Variable font (100-900) loaded but brand restricts to: 400
   ═══════════════════════════════════════════════════════════ */

.font-weight-light,
.font-weight-normal,
.fw-normal,
.fw-light {
    font-weight: 400 !important;
}

.font-weight-bold,
.fw-bold,
.font-weight-semibold,
.fw-semibold {
    font-weight: 400 !important;
}

.font-weight-extra-bold,
.font-weight-bolder,
.fw-bolder,
.font-weight-black,
.fw-black {
    font-weight: 400 !important;
}


/* Override any 500 or 600 weights to 400 (brand compliance) */

.font-weight-500,
.fw-500,
.font-weight-medium,
.fw-medium,
.font-weight-600,
.fw-600 {
    font-weight: 400 !important;
}


/* ═══════════════════════════════════════════════════════════
   PORTO TEXT SIZE CLASSES - Override with SendCutSend Scale
   Porto provides .text-1 to .text-15 for font sizes
   ═══════════════════════════════════════════════════════════ */

.text-1 {
    font-size: 11px !important;
    line-height: 1.5;
}

.text-2 {
    font-size: 13px !important;
    line-height: 1.5;
}

.text-3 {
    font-size: 14px !important;
    line-height: 1.5;
}

.text-4 {
    font-size: 16px !important;
    line-height: 1.7;
}

.text-5 {
    font-size: 17px !important;
    line-height: 1.6;
}

.text-6 {
    font-size: 18px !important;
    line-height: 1.5;
}

.text-7 {
    font-size: 21px !important;
    line-height: 1.4;
}

.text-8 {
    font-size: 24px !important;
    line-height: 1.4;
}

.text-9 {
    font-size: 27px !important;
    line-height: 1.3;
}

.text-10 {
    font-size: 36px !important;
    line-height: 1.3;
}

.text-11 {
    font-size: 45px !important;
    line-height: 1.2;
}

.text-12 {
    font-size: 60px !important;
    line-height: 1.2;
}

.text-13 {
    font-size: 72px !important;
    line-height: 1.1;
}

.text-14 {
    font-size: 80px !important;
    line-height: 1.1;
}

.text-15 {
    font-size: 90px !important;
    line-height: 1.1;
}

/* =====================================================
   RTL READABILITY OVERRIDES
   Increase baseline sizes for RTL scripts where glyphs render smaller
   ===================================================== */

html[dir="rtl"] body,
html[dir="rtl"] .body {
    font-size: 18px !important;
    line-height: 1.8;
}

html[dir="rtl"] .custom-font-secondary {
    font-family: var(--font-primary) !important;
}

html[dir="rtl"] .text-1 {
    font-size: 12px !important;
    line-height: 1.6;
}

html[dir="rtl"] .text-2 {
    font-size: 14px !important;
    line-height: 1.6;
}

html[dir="rtl"] .text-3 {
    font-size: 16px !important;
    line-height: 1.7;
}

html[dir="rtl"] .text-3-5 {
    font-size: 16px !important;
    line-height: 1.7;
}

html[dir="rtl"] .text-4 {
    font-size: 18px !important;
    line-height: 1.8;
}

html[dir="rtl"] .text-4-5 {
    font-size: 18px !important;
    line-height: 1.7;
}

html[dir="rtl"] .text-5 {
    font-size: 19px !important;
    line-height: 1.7;
}

html[dir="rtl"] .text-5-5 {
    font-size: 21px !important;
    line-height: 1.6;
}

html[dir="rtl"] .text-6 {
    font-size: 20px !important;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════
   LETTER SPACING UTILITIES - SendCutSend Pattern
   ═══════════════════════════════════════════════════════════ */

.ls-tight {
    letter-spacing: -0.3px !important;
}

.ls-normal {
    letter-spacing: normal !important;
}

.ls-wide {
    letter-spacing: 0.5px !important;
}

.ls-wider {
    letter-spacing: 0.8px !important;
}


/* ═══════════════════════════════════════════════════════════
   PORTO LINE-HEIGHT CLASSES - Brand Compliance
   ═══════════════════════════════════════════════════════════ */

.line-height-1,
.line-height-2,
.line-height-3,
.line-height-4,
.line-height-5,
.line-height-6,
.line-height-7,
.line-height-8,
.line-height-9 {
    font-family: var(--font-primary) !important;
}


/* ═══════════════════════════════════════════════════════════
   IMPORTANT OVERRIDES - Force Typography System
   Remove conflicting inline styles and enforce brand
   ═══════════════════════════════════════════════════════════ */


/* Remove prohibited fonts */

[style*="font-family: 'Lexend'"],
[style*="font-family: 'Poppins'"],
[style*="font-family: 'Playfair'"],
[style*="font-family: 'Open Sans'"] {
    font-family: var(--font-primary) !important;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE TYPOGRAPHY - Mobile Adjustments
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    h1,
    .h1 {
        font-size: 48px;
        line-height: 56px;
    }
    h2,
    .h2 {
        font-size: 36px;
        line-height: 44px;
    }
    h3,
    .h3 {
        font-size: 24px;
        line-height: 32px;
    }
    .hero h1,
    .hero-title {
        font-size: clamp(36px, 8vw, 48px);
    }
}

@media (max-width: 575px) {
    body,
    html {
        font-size: 15px;
        line-height: 1.6;
    }
    h1,
    .h1 {
        font-size: 36px;
        line-height: 42px;
    }
    h2,
    .h2 {
        font-size: 28px;
        line-height: 34px;
    }
    h3,
    .h3 {
        font-size: 21px;
        line-height: 28px;
    }
}