/**
 * CREST frontend typography scale (headings, body, prose).
 * Use utility classes: type-display, type-h1 … type-h4, type-eyebrow, type-lead.
 */

:root {
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-arabic: 'Noto Sans Arabic', system-ui, sans-serif;
    --text-body: 1rem;
    --leading-body: 1.65;
    --type-display: clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem);
    --type-h1: clamp(2rem, 3.25vw + 0.5rem, 2.75rem);
    --type-h2: clamp(1.5rem, 2vw + 0.5rem, 2rem);
    --type-h3: clamp(1.25rem, 1.25vw + 0.5rem, 1.5rem);
    --type-h4: 1.125rem;
    --type-h5: 1rem;
    --type-h6: 0.875rem;
    --type-lead: clamp(1.0625rem, 0.5vw + 0.75rem, 1.25rem);
    --type-eyebrow: 0.8125rem;
    --color-text-muted: #6b7280;
}

[dir="rtl"] {
    --font-sans: var(--font-arabic);
}

body {
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

main {
    color: var(--color-text-muted);
}

/* Display — hero/page mastheads only */
.type-display {
    font-family: var(--font-sans);
    font-size: var(--type-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

[dir="rtl"] .type-display {
    letter-spacing: 0;
}

.type-h1 {
    font-family: var(--font-sans);
    font-size: var(--type-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

[dir="rtl"] .type-h1 {
    letter-spacing: 0;
}

.type-h2 {
    font-family: var(--font-sans);
    font-size: var(--type-h2);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

[dir="rtl"] .type-h2 {
    letter-spacing: 0;
}

.type-h3 {
    font-family: var(--font-sans);
    font-size: var(--type-h3);
    font-weight: 600;
    line-height: 1.25;
}

.type-h4 {
    font-family: var(--font-sans);
    font-size: var(--type-h4);
    font-weight: 600;
    line-height: 1.3;
}

.type-h5 {
    font-size: var(--type-h5);
    font-weight: 600;
    line-height: 1.4;
}

.type-h6 {
    font-size: var(--type-h6);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.type-eyebrow {
    display: block;
    font-size: var(--type-eyebrow);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

[dir="rtl"] .type-eyebrow {
    letter-spacing: 0.05em;
}

.type-lead {
    font-size: var(--type-lead);
    font-weight: 500;
    line-height: 1.6;
}

/* Rich text / blog / project descriptions */
.prose-crest {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #4b5563;
}

.prose-crest :where(p) {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.prose-crest :where(h2) {
    font-size: var(--type-h2);
    font-weight: 700;
    line-height: 1.2;
    color: #213548;
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.prose-crest :where(h3) {
    font-size: var(--type-h3);
    font-weight: 600;
    line-height: 1.25;
    color: #213548;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
}

.prose-crest :where(h4) {
    font-size: var(--type-h4);
    font-weight: 600;
    color: #213548;
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}

.prose-crest :where(ul, ol) {
    margin-bottom: 1.25em;
    padding-inline-start: 1.25em;
}

.prose-crest :where(li) {
    margin-bottom: 0.35em;
}

.prose-crest :where(img) {
    border-radius: 1rem;
}

.prose.prose-crest :where(h2, h3, h4) {
    font-weight: 700;
}

/* TinyMCE output: per-paragraph / per-block direction */
.prose-crest [dir="rtl"],
.prose-crest p[dir="rtl"],
.prose-crest li[dir="rtl"] {
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
}

.prose-crest [dir="ltr"],
.prose-crest p[dir="ltr"],
.prose-crest li[dir="ltr"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* One H1 per page — fallback if legacy markup slips through */
main > section:first-of-type h1:not([class*="type-"]) {
    font-size: var(--type-h1);
    font-weight: 700;
    line-height: 1.15;
}