/* ==========================================================================
   Wamda Ibda3 — Typography system (v1.2)
   One unified font (Tajawal) for the whole site.
   Fustat (--wib-display) is reserved for feature headings only:
   the home hero, page titles and main section titles.
   Loaded last so it is the single source of truth for font sizes.
   ========================================================================== */

:root {
	/* Scale — every size derives from the body size (--wib-fs) or the heading scale (--wib-hs). */
	--t-display: calc(clamp(40px, 5.2vw, 74px) * var(--wib-hs, 1));
	--t-h1:      calc(clamp(32px, 3.6vw, 50px) * var(--wib-hs, 1));
	--t-h2:      calc(clamp(27px, 2.6vw, 38px) * var(--wib-hs, 1));
	--t-h2s:     calc(clamp(24px, 2.1vw, 30px) * var(--wib-hs, 1));
	--t-h3l:     calc(clamp(20px, 1.7vw, 24px) * var(--wib-hs, 1));
	--t-h3:      calc(19px * var(--wib-hs, 1));
	--t-h4:      calc(17px * var(--wib-hs, 1));
	--t-num:     calc(clamp(34px, 3.2vw, 46px) * var(--wib-hs, 1));
	--t-lead:    calc(var(--wib-fs, 17px) + 2px);
	--t-body:    var(--wib-fs, 17px);
	--t-sm:      calc(var(--wib-fs, 17px) - 1px);
	--t-xs:      calc(var(--wib-fs, 17px) - 3px);
	--t-2xs:     calc(var(--wib-fs, 17px) - 4px);
	--t-btn:     var(--wib-btn-fs, 15px);
	--t-eyebrow: var(--wib-eyebrow-fs, 13px);
	--t-lh:      var(--wib-lh, 1.8);
	--t-lh-h:    1.3;
	--t-lh-d:    1.12;
}
@media (max-width: 760px) {
	:root {
		--t-display: calc(clamp(34px, 9.6vw, 44px) * var(--wib-hs, 1));
		--t-h1:      calc(clamp(28px, 7.6vw, 34px) * var(--wib-hs, 1));
		--t-h2:      calc(clamp(24px, 6.6vw, 29px) * var(--wib-hs, 1));
		--t-h2s:     calc(22px * var(--wib-hs, 1));
		--t-h3l:     calc(20px * var(--wib-hs, 1));
		--t-h3:      calc(18px * var(--wib-hs, 1));
		--t-h4:      calc(16.5px * var(--wib-hs, 1));
		--t-num:     calc(32px * var(--wib-hs, 1));
		--t-lead:    calc(var(--wib-fs, 17px) + 0px);
		--t-body:    calc(var(--wib-fs, 17px) - 1px);
		--t-sm:      calc(var(--wib-fs, 17px) - 2px);
	}
}

/* --------------------------------------------------------------------------
   1. One font everywhere
   -------------------------------------------------------------------------- */
body.wib-type {
	font-family: var(--wib-body);
	font-size: var(--t-body);
	line-height: var(--t-lh);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.wib-type button,
.wib-type input,
.wib-type select,
.wib-type textarea,
.wib-type optgroup { font-family: var(--wib-body); }
.wib-type h1, .wib-type h2, .wib-type h3, .wib-type h4, .wib-type h5, .wib-type h6 {
	font-family: var(--wib-body);
	font-weight: 700;
	line-height: var(--t-lh-h);
	letter-spacing: 0;
}
/* Arabic script must never be letter-spaced: it breaks the cursive joins. */
.wib-type p, .wib-type li, .wib-type a, .wib-type span, .wib-type strong, .wib-type b,
.wib-type label, .wib-type legend, .wib-type summary, .wib-type small, .wib-type .eyebrow { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   2. Feature headings — the only place Fustat appears
   -------------------------------------------------------------------------- */
.wib-type .wib-h2__title,
.wib-type .wb-hero h1,
.wib-type .wib-phero h1,
.wib-type .wb-head h2,
.wib-type .wb-cta h2,
.wib-type .wib-habout__copy h2,
.wib-type .wib-hstats__copy h2,
.wib-type .wib-offer__copy h2,
.wib-type .wib-rvsec__head h2,
.wib-type .section-heading h1,
.wib-type .section-heading h2,
.wib-type .empty-state h1 {
	font-family: var(--wib-display);
	font-weight: var(--wib-dw, 800);
	letter-spacing: 0;
	text-wrap: balance;
}
.wib-type .wib-h2__title { font-size: var(--t-display); line-height: var(--t-lh-d); }
.wib-type .wib-h2__title span,
.wib-type .wib-h2__title em { font: inherit; }
.wib-type .wb-hero h1,
.wib-type .wib-phero h1,
.wib-type .section-heading h1,
.wib-type .empty-state h1 { font-size: var(--t-h1); line-height: 1.2; }
.wib-type .wb-head h2,
.wib-type .wib-habout__copy h2,
.wib-type .wib-hstats__copy h2,
.wib-type .wib-offer__copy h2,
.wib-type .wib-rvsec__head h2,
.wib-type .section-heading h2 { font-size: var(--t-h2); line-height: 1.28; }
.wib-type .wb-cta h2 { font-size: var(--t-h2s); line-height: 1.35; }
/* Section titles that sit in a side column are one step smaller. */
.wib-type .wb-form__side .wb-head h2,
.wib-type .wb-contact__info .wb-head h2,
.wib-type .wb-split__copy .wb-head h2 { font-size: var(--t-h2s); }

/* --------------------------------------------------------------------------
   3. Regular headings — Tajawal
   -------------------------------------------------------------------------- */
.wib-type .wib-hclients__title,
.wib-type .wib-mag__over h3,
.wib-type .wib-bento__card--1 .wib-bento__body h3 { font-size: var(--t-h3l); line-height: 1.4; font-weight: 800; }
.wib-type .wb-feature h3,
.wib-type .wb-card__title,
.wib-type .wb-steps h3,
.wib-type .wib-bento__body h3,
.wib-type .wib-hcta__card h3,
.wib-type .wib-post-card__body h3,
.wib-type .wib-post-card h3 { font-size: var(--t-h3); line-height: 1.45; font-weight: 700; }
.wib-type .wib-post-card.is-featured h3 { font-size: var(--t-h2s); line-height: 1.4; font-weight: 800; }
.wib-type .wib-mag__item h3 { font-size: var(--t-h4); line-height: 1.55; font-weight: 700; }
.wib-type .wib-ft__col h3,
.wib-type .site-footer h3 { font-size: var(--t-body); font-weight: 700; line-height: 1.4; }
.wib-type .wb-faq__item summary,
.wib-type .faq-list summary { font: 700 var(--t-h4)/1.55 var(--wib-body); }
.wib-type .wb-banner__title { font: 800 var(--t-h3l)/1.45 var(--wib-body); }
.wib-type .wb-contact__stitle,
.wib-type .wib-h2__stories-title { font-size: var(--t-body); font-weight: 700; }

/* Long-form content (articles, policies, editor content) */
.wib-type .prose,
.wib-type .wb-prose { font-size: calc(var(--t-body) + 1px); line-height: 1.9; }
.wib-type .prose p, .wib-type .prose li,
.wib-type .wb-prose p, .wib-type .wb-prose li { font-size: inherit; line-height: inherit; }
.wib-type .prose h2, .wib-type .wb-prose h2 { font: 800 var(--t-h2s)/1.4 var(--wib-body); margin: 1.6em 0 .55em; }
.wib-type .wb--prose .wb-prose > h2:first-child { margin-top: 0; }
.wib-type .prose h3, .wib-type .wb-prose h3 { font: 700 var(--t-h3l)/1.45 var(--wib-body); margin: 1.4em 0 .5em; }
.wib-type .prose h4, .wib-type .wb-prose h4 { font: 700 var(--t-h4)/1.5 var(--wib-body); }

/* --------------------------------------------------------------------------
   4. Text roles
   -------------------------------------------------------------------------- */
/* Lead paragraphs under feature headings */
.wib-type .wib-h2__text,
.wib-type .wb-hero__text,
.wib-type .wib-phero p,
.wib-type .wb-head p,
.wib-type .wib-habout__copy > p,
.wib-type .wib-hstats__copy > p,
.wib-type .wib-offer__text,
.wib-type .section-heading p { font-size: var(--t-lead); line-height: 1.8; }
.wib-type .wb-cta__copy p { font-size: var(--t-body); line-height: 1.75; }
.wib-type .wib-offer__sub { font-size: var(--t-lead); font-weight: 700; }
.wib-type .wib-h2__rotate { font-size: var(--t-h4); font-weight: 700; }
.wib-type .wib-h2__words { font-weight: 800; }

/* Body copy inside cards & sections */
.wib-type .wb-feature p,
.wib-type .wb-steps p,
.wib-type .wib-hcta__card p,
.wib-type .wib-post-card__body p,
.wib-type .wib-mag__over p,
.wib-type .wib-bento__body p,
.wib-type .wb-card__text,
.wib-type .wb-points p,
.wib-type .wb-split p,
.wib-type .wib-ft__tagline { font-size: var(--t-sm); line-height: 1.8; }
.wib-type .wib-habout__points li,
.wib-type .wib-offer__points li,
.wib-type .wb-checklist li,
.wib-type .wb-points strong { font-size: var(--t-body); font-weight: 500; }
.wib-type .wb-points strong { font-weight: 700; }

/* Meta, captions, small print */
.wib-type .wib-breadcrumbs,
.wib-type .wib-breadcrumbs a,
.wib-type .wib-post-card__meta,
.wib-type .wib-mag__meta,
.wib-type .wib-hclients__count,
.wib-type .wib-ft__legal,
.wib-type .wib-ft__legal a,
.wib-type .wib-browser__cap small,
.wib-type .wib-gbadge small,
.wib-type .wb-stats span,
.wib-type .wib-h2__stats span,
.wib-type .wib-offer__certs { font-size: var(--t-xs); line-height: 1.6; }
.wib-type .wib-mag__read,
.wib-type .wib-mag__cat,
.wib-type .wb-logos span,
.wib-type .wib-bento__tags i,
.wib-type .wib-story__label { font-size: var(--t-2xs); font-weight: 700; }
.wib-type .wib-cslider__item span { font-size: var(--t-2xs); }

/* Eyebrows / badges / chips */
.wib-type .eyebrow,
.wib-type .wb-hero__eyebrow,
.wib-type .wib-h2__eyebrow,
.wib-type .wib-phero__eyebrow,
.wib-type .wib-offer__badge,
.wib-type .wib-offer__timer-label,
.wib-type .wib-h2__chip,
.wib-type .wb-feature__num,
.wib-type .wb-card__num { font-size: var(--t-eyebrow); font-weight: 700; text-transform: none; }

/* Numbers */
.wib-type .wb-stats strong { font: 800 var(--t-num)/1 var(--wib-body); }
.wib-type .wib-h2__stats strong { font: 800 calc(var(--t-h3l) + 4px)/1.1 var(--wib-body); }
.wib-type .wb-points b { font-family: var(--wib-body); font-weight: 800; }

/* --------------------------------------------------------------------------
   5. Interface: navigation, buttons, links, forms, footer
   -------------------------------------------------------------------------- */
.wib-type .wib-header__nav > ul > li > a { font: 500 calc(var(--t-body) - 1px)/1.2 var(--wib-body); }
.wib-type .wib-header__nav .sub-menu a { font-size: var(--t-sm); font-weight: 500; }
.wib-type .wib-drawer a { font-family: var(--wib-body); }

.wib-type .wib-btn,
.wib-type .wib-btn span,
.wib-type .wib-header__cta,
.wib-type .wib-drawer__cta,
.wib-type .wb-cta__wa,
.wib-type .wib-drawer__wa,
.wib-type .wib-qf__wa { font-family: var(--wib-body); font-size: var(--t-btn); font-weight: 700; letter-spacing: 0; }
.wib-type .wib-textlink,
.wib-type .wb-card__more,
.wib-type .wib-bento__more,
.wib-type .wib-post-card__more,
.wib-type .wib-filter { font-family: var(--wib-body); font-size: var(--t-xs); font-weight: 700; }
.wib-type .wib-textlink { font-size: calc(var(--t-xs) + 1px); }

/* Quote form */
.wib-type .wib-qf__f > span,
.wib-type .wib-qf__f legend,
.wib-type .wib-qf label > span:first-child { font-size: var(--t-xs); font-weight: 700; }
.wib-type .wib-qf input,
.wib-type .wib-qf select,
.wib-type .wib-qf textarea { font-size: var(--t-body); }
.wib-type .wib-qf__chip span { font-size: var(--t-xs); font-weight: 500; }
.wib-type .wb-form__steps strong { font-size: var(--t-body); }
.wib-type .wb-form__steps b { font-size: var(--t-xs); }

/* Footer & contact lists */
.wib-type .wib-ft__links a,
.wib-type .wib-ft__contact a,
.wib-type .wib-ft__contact span,
.wib-type .wib-drawer__contact a,
.wib-type .wb-contact__list a,
.wib-type .wb-contact__list span { font-size: var(--t-sm); }
.wib-type .wib-ft__col summary span { font-size: var(--t-body); font-weight: 700; }
.wib-type .wib-ft__channel { font-size: var(--t-xs); font-weight: 700; }

/* Marquee */
.wib-type .wib-hmarquee__track span,
.wib-type .wib-hmarquee__track i { font-size: var(--t-xs); font-weight: 700; }

/* --------------------------------------------------------------------------
   6. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.wib-type .wib-h2__title { line-height: 1.18; }
	.wib-type .wb-head h2,
	.wib-type .wib-habout__copy h2,
	.wib-type .wib-hstats__copy h2,
	.wib-type .wib-offer__copy h2 { line-height: 1.35; }
	.wib-type .wib-h2__text,
	.wib-type .wb-hero__text,
	.wib-type .wb-head p { line-height: 1.75; }
	.wib-type .prose, .wib-type .wb-prose { font-size: var(--t-body); }
	.wib-type .wib-header__nav > ul > li > a { font-size: var(--t-body); }
}