/* ==========================================================================
   MR Casting - Blog typography (type1-20261004)
   Loaded ONLY by blog.php, blog-ar.php, blog-single.php, blog-single-ar.php
   (via $pageAdditionalFontHrefs). Every rule below is additionally scoped to
   blog-only containers, so the shared header, nav and footer are untouched.

   Why the selectors look heavy: /one-page/css/fonts.css (global) sets
     body {font-family:Roboto !important}  and  h1-h6 {Source Sans Pro !important}
   and each template's inline <style> (printed AFTER this file) sets sizes.
   We win with specificity, not source order:
     EN article   body.stretched > section ...   (hero / #content / related)
     EN listing   body #mr-blog-page ...
     AR article   body #mr-article-page-ar ...
     AR listing   body #mr-blog-page-ar ...
   ('body' is added so we also beat the templates' own #id rules that are
   printed later in the page.)
   !important is used ONLY for font-family on elements that fonts.css targets
   with !important (h1-h6, small, label). Nothing else uses it.

   Fonts: Thmanyah (owner-confirmed licence: use only; files unmodified,
   original names, self-hosted). EN body uses the platform UI font (0 KB).
   Rollback: remove the <link> to this file (template hook) - nothing else
   depends on it.
   ========================================================================== */

/* ---------- 1. Font faces (3 files, ~234 KB total, woff2, unmodified) ---------- */
@font-face {
    font-family: 'Thmanyah Sans';
    src: url('/assets/fonts/thmanyah/thmanyahsans-Regular.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Thmanyah Sans';
    src: url('/assets/fonts/thmanyah/thmanyahsans-Bold.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Thmanyah Serif Display';
    src: url('/assets/fonts/thmanyah/thmanyahserifdisplay-Bold.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
    /* families */
    --mcb-ar-text: 'Thmanyah Sans', 'SF Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
    --mcb-ar-display: 'Thmanyah Serif Display', 'Thmanyah Sans', 'SF Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, serif;
    --mcb-en-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --mcb-en-display: 'Thmanyah Serif Display', Georgia, 'Times New Roman', serif;

    /* desktop -> mobile sizes (fluid between 375 and ~1200 px) */
    --mcb-h1: clamp(2rem, 1.2rem + 2.5vw, 3rem);           /* 32 -> 48 */
    --mcb-h2: clamp(1.5rem, 1.1rem + 1.25vw, 2rem);         /* 24 -> 32 */
    --mcb-h3: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);         /* 20 -> 24 */
    --mcb-h4: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);       /* 18 -> 20 */
    --mcb-body: clamp(1.0625rem, 0.95rem + 0.2vw, 1.125rem);/* 17 -> 18 */
    --mcb-body-s: 1rem;                                     /* 16 (cards, bio, excerpts) -> 15 mobile */
    --mcb-lead: clamp(1.1875rem, 1.05rem + 0.35vw, 1.3125rem); /* 19 -> 21 */
    --mcb-quote: clamp(1.1875rem, 1rem + 0.45vw, 1.375rem);   /* 19 -> 22 */
    --mcb-small: 0.875rem;                                  /* 14 -> 13 */
    --mcb-caption: 0.8125rem;                               /* 13 -> 12 */
    --mcb-btn: 1rem;                                        /* 16 */
    --mcb-table: 0.9375rem;                                 /* 15 -> 14 */
}
@media (max-width: 767.98px) {
    :root {
        --mcb-body-s: 0.9375rem;
        --mcb-small: 0.8125rem;
        --mcb-caption: 0.75rem;
        --mcb-table: 0.875rem;
    }
}

/* ==========================================================================
   3. ENGLISH  (EN article = direct <section> children of body; EN listing)
   ========================================================================== */
body.stretched > section,
body #mr-blog-page {
    font-family: var(--mcb-en-text);
    font-size: var(--mcb-body);
    line-height: 1.7;
}
body.stretched > section :is(h1, h2, h3, h4, h5, h6),
body #mr-blog-page :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--mcb-en-display) !important;
    font-weight: 700;
    letter-spacing: 0;
}
/* H3/H4 and card titles (<=24px): text family Bold, same rule as Arabic */
body.stretched > section :is(h3, h4, h5, h6),
body #mr-blog-page :is(h3, h4, h5, h6) {
    font-family: var(--mcb-en-text) !important;
}
body.stretched > section :is(small, label),
body #mr-blog-page :is(small, label) {
    font-family: var(--mcb-en-text) !important;
}

/* --- EN article: hero --- */
body.stretched > .article-hero h1 {
    font-size: var(--mcb-h1);
    line-height: 1.15;
    font-weight: 700;
}
body.stretched > .article-hero .lead-text {
    font-size: var(--mcb-lead);
    line-height: 1.6;
}
body.stretched > .article-hero .meta-line {
    font-size: var(--mcb-small);
    line-height: 1.5;
    font-weight: 500;
}
body.stretched > .article-hero .category-badge {
    font-family: var(--mcb-en-text);
    font-size: var(--mcb-caption);
    line-height: 1.5;
}

/* --- EN article: body --- */
body.stretched > #content .article-body {
    font-size: var(--mcb-body);
    line-height: 1.7;
}
body.stretched > #content .article-body p { margin-bottom: 1.5em; }
body.stretched > #content .article-body h2 { font-size: var(--mcb-h2); line-height: 1.25; margin-top: 2.2em; margin-bottom: 0.75em; }
body.stretched > #content .article-body h3 { font-size: var(--mcb-h3); line-height: 1.3;  margin-top: 1.8em; margin-bottom: 0.6em; }
body.stretched > #content .article-body h4 { font-size: var(--mcb-h4); line-height: 1.35; font-weight: 600; margin-top: 1.6em; margin-bottom: 0.5em; }
body.stretched > #content .article-body .lead,
body.stretched > #content .article-body p.lead { font-size: var(--mcb-lead); line-height: 1.6; }
body.stretched > #content .article-body > p:first-of-type::first-letter { font-family: var(--mcb-en-display); font-weight: 700; }
body.stretched > #content :is(.blockquote-elegant, .article-body blockquote) {
    font-family: var(--mcb-en-display);
    font-size: var(--mcb-quote);
    line-height: 1.5;
    font-weight: 700;
    font-style: normal;
}
body.stretched > #content .article-body :is(table, th, td) { font-size: var(--mcb-table); line-height: 1.5; }
body.stretched > #content :is(figcaption, .video-caption, .article-figure figcaption) { font-size: var(--mcb-caption); line-height: 1.5; }
body.stretched > #content :is(.tldr-label, .callout-label, .video-block-label, .author-bio-label) { font-size: var(--mcb-caption); line-height: 1.5; }
body.stretched > #content .faq-list dt { font-family: var(--mcb-en-text); font-weight: 700; font-size: var(--mcb-h4); line-height: 1.35; }
body.stretched > #content .faq-list dd { font-size: var(--mcb-body); line-height: 1.7; }

/* --- EN article: author card, CTA, buttons --- */
body.stretched > #content .author-bio-name { font-size: var(--mcb-h4); line-height: 1.35; }
body.stretched > #content .author-bio-placeholder { font-family: var(--mcb-en-display); }
body.stretched > #content :is(.author-bio-job, .author-bio-link) { font-size: var(--mcb-small); line-height: 1.5; }
body.stretched > #content .author-bio-text { font-size: var(--mcb-body-s); line-height: 1.7; }
body.stretched > #content .mc-rounded-5 h2,
body.stretched > #content .rounded-5 h2 { font-size: var(--mcb-h2); line-height: 1.25; }
body.stretched > #content :is(.mc-rounded-5, .rounded-5) p { font-size: var(--mcb-body-s); line-height: 1.7; }
body.stretched > section .btn,
body #mr-blog-page :is(.btn, .mr-cta) {
    font-family: var(--mcb-en-text);
    font-size: var(--mcb-btn);
    line-height: 1.2;
    font-weight: 600;
}

/* --- EN article: related ("More from the Studio") --- */
body.stretched > section.bg-light h2 { font-size: var(--mcb-h2); line-height: 1.25; }
body.stretched > section.bg-light .related-card h4 { font-size: var(--mcb-h4); line-height: 1.35; }
body.stretched > section.bg-light :is(.small, .text-uppercase.text-muted) { font-size: var(--mcb-caption); line-height: 1.5; }

/* --- EN listing (/blog) --- */
body #mr-blog-page .mr-blog-title { font-size: var(--mcb-h1); line-height: 1.15; letter-spacing: 0; }
body #mr-blog-page .mr-blog-copy { font-size: var(--mcb-lead); line-height: 1.6; }
body #mr-blog-page .mr-blog-topbar-title { font-size: var(--mcb-h2); line-height: 1.25; }
body #mr-blog-page .mr-blog-topbar-copy,
body #mr-blog-page .mr-card-excerpt { font-size: var(--mcb-body-s); line-height: 1.7; }
body #mr-blog-page .mr-card-title { font-size: var(--mcb-h4); line-height: 1.35; }
body #mr-blog-page :is(.mr-meta, .mr-author-name, .mr-readmore) { font-size: var(--mcb-small); line-height: 1.5; }
body #mr-blog-page :is(.mr-eyebrow, .mr-card-badge, .mr-author-meta) { font-family: var(--mcb-en-text); font-size: var(--mcb-caption); line-height: 1.5; }
body #mr-blog-page .mr-empty h3 { font-size: var(--mcb-h3); line-height: 1.3; }

/* ==========================================================================
   4. ARABIC  (#mr-article-page-ar, #mr-blog-page-ar) - RTL, no letter-spacing
   ========================================================================== */
body #mr-article-page-ar,
body #mr-blog-page-ar {
    font-family: var(--mcb-ar-text);
    font-size: var(--mcb-body);
    line-height: 1.9;
}
body #mr-article-page-ar :is(h1, h2, h3, h4, h5, h6),
body #mr-blog-page-ar :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--mcb-ar-display) !important;
    font-weight: 700;
    letter-spacing: 0;
}
/* H3/H4 and card titles: Sans Bold reads better than the display cut at <=24px */
body #mr-article-page-ar :is(h3, h4, h5, h6),
body #mr-blog-page-ar :is(h3, h4, h5, h6) {
    font-family: var(--mcb-ar-text) !important;
}
body #mr-article-page-ar :is(small, label),
body #mr-blog-page-ar :is(small, label) {
    font-family: var(--mcb-ar-text) !important;
}
body #mr-article-page-ar :is(.category-badge, .btn, .meta-line, .small, b, strong),
body #mr-blog-page-ar :is(.mr-eyebrow, .mr-card-badge, .mr-cta, .mr-readmore, .mr-meta, .btn, b, strong) {
    font-family: var(--mcb-ar-text);
    letter-spacing: 0;
}

/* --- AR article: hero --- */
body #mr-article-page-ar .article-hero h1 {
    font-size: var(--mcb-h1);
    line-height: 1.4;
    font-weight: 700;
}
body #mr-article-page-ar .article-hero .hero-subtitle {
    font-size: var(--mcb-lead);
    line-height: 1.8;
}
body #mr-article-page-ar .article-hero .meta-line {
    font-size: var(--mcb-small);
    line-height: 1.6;
    font-weight: 400;
}
body #mr-article-page-ar .article-hero .category-badge {
    font-size: var(--mcb-caption);
    line-height: 1.5;
}

/* --- AR article: body --- */
body #mr-article-page-ar .article-body {
    font-size: var(--mcb-body);
    line-height: 1.9;
}
body #mr-article-page-ar .article-body p { margin-bottom: 1.4em; }
body #mr-article-page-ar .article-body h2 { font-size: var(--mcb-h2); line-height: 1.5;  margin-top: 2em;   margin-bottom: 0.6em; }
body #mr-article-page-ar .article-body h3 { font-size: var(--mcb-h3); line-height: 1.55; margin-top: 1.7em; margin-bottom: 0.5em; }
body #mr-article-page-ar .article-body h4 { font-size: var(--mcb-h4); line-height: 1.6;  margin-top: 1.5em; margin-bottom: 0.45em; }
body #mr-article-page-ar .article-body .lead,
body #mr-article-page-ar .article-body p.lead { font-size: var(--mcb-lead); line-height: 1.8; }
body #mr-article-page-ar .article-body :is(blockquote, .blockquote-elegant),
body #mr-article-page-ar .blockquote-elegant {
    font-family: var(--mcb-ar-display);
    font-size: var(--mcb-quote);
    line-height: 1.7;
    font-weight: 700;
    font-style: normal;
}
body #mr-article-page-ar .article-body :is(table, th, td) { font-size: var(--mcb-table); line-height: 1.6; }
body #mr-article-page-ar .article-body :is(figcaption, .video-caption) { font-size: var(--mcb-caption); line-height: 1.6; }
body #mr-article-page-ar .article-body :is(.tldr-label, .callout-label, .video-block-label) { font-size: var(--mcb-caption); line-height: 1.6; letter-spacing: 0; }
body #mr-article-page-ar .faq-list dt { font-size: var(--mcb-h4); line-height: 1.6; }

/* --- AR article: CTA + related --- */
body #mr-article-page-ar .article-cta h2 { font-size: var(--mcb-h2); line-height: 1.5; }
body #mr-article-page-ar .article-cta p { font-size: var(--mcb-body-s); line-height: 1.9; }
body #mr-article-page-ar .btn {
    font-size: var(--mcb-btn);
    line-height: 1.2;
    font-weight: 700;
}
body #mr-article-page-ar .related-section h2 { font-size: var(--mcb-h2); line-height: 1.5; }
body #mr-article-page-ar .related-section .related-card h4 { font-size: var(--mcb-h4); } /* line-height 1.7 comes from the template's inline style */
body #mr-article-page-ar .related-section .small { font-size: var(--mcb-caption); line-height: 1.6; }

/* --- AR listing (/blog-ar) --- */
body #mr-blog-page-ar .mr-blog-title { font-size: var(--mcb-h1); line-height: 1.4; letter-spacing: 0; }
body #mr-blog-page-ar .mr-blog-copy { font-size: var(--mcb-lead); line-height: 1.8; }
body #mr-blog-page-ar .mr-blog-topbar-title { font-size: var(--mcb-h2); line-height: 1.5; }
body #mr-blog-page-ar .mr-blog-topbar-copy,
body #mr-blog-page-ar .mr-card-excerpt { font-size: var(--mcb-body-s); line-height: 1.9; }
body #mr-blog-page-ar .mr-card-title { font-size: var(--mcb-h4); line-height: 1.6; }
body #mr-blog-page-ar :is(.mr-meta, .mr-author-name, .mr-readmore) { font-size: var(--mcb-small); line-height: 1.6; }
body #mr-blog-page-ar :is(.mr-eyebrow, .mr-card-badge, .mr-author-meta) { font-size: var(--mcb-caption); line-height: 1.6; }
body #mr-blog-page-ar .mr-cta { font-size: var(--mcb-btn); line-height: 1.2; font-weight: 700; }
body #mr-blog-page-ar .mr-empty h3 { font-size: var(--mcb-h3); line-height: 1.55; }