/* ==========================================================================
   SibLearn — Unified Typography System
   Fluid, responsive, RTL-friendly. Loaded on every public page.
   Loaded AFTER compact-ui.css so it owns final word on type.
   ========================================================================== */

:root {
    /* Type family — single source of truth */
    --font-sans: 'Vazirmatn', 'Estedad', 'Tahoma', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Fluid type scale (clamp(min, preferred, max)) ----------------------- */
    /* H1 — hero/page title */
    --fs-h1: clamp(1.25rem,   1.05rem + 0.9vw, 1.625rem);    /* 20 → 26px */
    --fs-h2: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);    /* 17 → 22px */
    --fs-h3: clamp(0.9375rem, 0.88rem + 0.35vw, 1.125rem);   /* 15 → 18px */
    --fs-h4: clamp(0.9rem,    0.86rem + 0.2vw, 1.0625rem);   /* 14.4 → 17px */
    --fs-h5: clamp(0.875rem,  0.85rem + 0.15vw, 0.9375rem);  /* 14 → 15px */
    --fs-h6: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);     /* 13 → 14px */

    /* Body */
    --fs-body:  clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);  /* 15 → 16px */
    --fs-lead:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);    /* 16 → 18px subtitle/intro */
    --fs-small: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem); /* 13 → 14px */
    --fs-xs:    clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);   /* 12 → 13px */

    /* Component-specific */
    --fs-btn:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 → 15px */
    --fs-nav:   clamp(0.9375rem, 0.92rem + 0.1vw, 0.9375rem); /* ~15px */
    --fs-input: var(--fs-body);
    --fs-label: clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem);/* 13 → 15px */
    --fs-table: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 → 15px */
    --fs-table-th: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);

    /* Weights — single canonical scale */
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;
    --fw-heavy:   800;

    /* Line heights */
    --lh-tight:   1.25;
    --lh-snug:    1.4;
    --lh-normal:  1.6;
    --lh-relaxed: 1.8;

    /* Letter spacing — minor RTL tuning */
    --ls-tight: -0.005em;
    --ls-normal: 0;
}

/* Base ------------------------------------------------------------------- */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Inherit family across every element so legacy CSS can't drift */
* {
    font-family: var(--font-sans);
}

/* Headings --------------------------------------------------------------- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--font-sans) !important;
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    margin: 0 0 0.5em;
    color: inherit;
}

h1, .h1 { font-size: var(--fs-h1) !important; font-weight: var(--fw-heavy); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2) !important; font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-h3) !important; font-weight: var(--fw-bold); }
h4, .h4 { font-size: var(--fs-h4) !important; font-weight: var(--fw-semibold); }
h5, .h5 { font-size: var(--fs-h5) !important; font-weight: var(--fw-semibold); }
h6, .h6 { font-size: var(--fs-h6) !important; font-weight: var(--fw-semibold); }

/* Common section title patterns — normalize over-sized hero headers */
.section-title,
.page-title,
.hero-title,
.about-hero h1,
.contact-hero h1,
.courses-hero h1,
.blog-hero h1,
.instructors-hero h1 {
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-heavy);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

.section-subtitle,
.page-subtitle,
.hero-subtitle,
.lead {
    font-size: var(--fs-lead) !important;
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: inherit;
    opacity: 0.85;
}

/* Paragraphs & body copy ------------------------------------------------- */
p {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    margin: 0 0 1em;
}

p:last-child { margin-bottom: 0; }

small,
.small,
.text-small,
.text-muted {
    font-size: var(--fs-small);
    line-height: var(--lh-normal);
}

.text-xs { font-size: var(--fs-xs); line-height: var(--lh-normal); }

/* Links ------------------------------------------------------------------ */
a {
    font-weight: inherit;
    color: inherit;
}

strong, b { font-weight: var(--fw-bold); }
em, i    { font-style: italic; }

/* Lists ------------------------------------------------------------------ */
ul, ol {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
}

li { margin-bottom: 0.35em; }
li:last-child { margin-bottom: 0; }

/* Navigation ------------------------------------------------------------- */
nav, .nav, .navbar, .menu {
    font-size: var(--fs-nav);
    font-weight: var(--fw-semibold);
}

nav a, .nav a, .navbar a, .menu a {
    font-size: var(--fs-nav);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}

/* Buttons ---------------------------------------------------------------- */
.btn, button, .button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-btn) !important;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    letter-spacing: var(--ls-normal);
}

.btn-sm, button.sm { font-size: var(--fs-small) !important; }
.btn-lg, button.lg { font-size: var(--fs-lead) !important; }

/* Forms ------------------------------------------------------------------ */
label, .form-label {
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin-bottom: 0.4em;
    display: inline-block;
}

input, select, textarea {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-input) !important;
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
}

::placeholder {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    opacity: 0.55;
}

.form-help, .form-hint, .help-text {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    font-weight: var(--fw-regular);
}

/* Cards ------------------------------------------------------------------ */
.card-title,
.course-card .title,
.course-card-title,
.blog-card-title,
.instructor-card-title {
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

.card-subtitle,
.card-meta {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
}

.card-text,
.card-body p,
.card-description {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
}

/* Tables ----------------------------------------------------------------- */
table {
    font-size: var(--fs-table);
    font-weight: var(--fw-regular);
}

th {
    font-size: var(--fs-table-th);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: 0.01em;
}

td {
    font-size: var(--fs-table);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
}

/* Badges / pills / tags -------------------------------------------------- */
.badge, .tag, .pill, .chip {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Breadcrumbs ------------------------------------------------------------ */
.breadcrumb, .breadcrumbs {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

/* Blockquote ------------------------------------------------------------- */
blockquote {
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    font-style: italic;
}

/* Code (rare on public pages, still normalize) --------------------------- */
code, pre, kbd, samp {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* RTL spacing tweaks ----------------------------------------------------- */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    word-spacing: 0.02em;
}

/* Mobile fine-tune ------------------------------------------------------- */
@media (max-width: 480px) {
    body { line-height: 1.65; }
    p    { line-height: 1.75; }
}