/**
 * The brand faces.
 *
 * TAY for headings and anything bold that is not a button, Loew for everything
 * else. Both are bundled rather than fetched, so there is no third party in the
 * critical path and nothing to fail on a slow connection.
 *
 * TAY has no Arabic glyphs. Rather than switching stacks per language, Cairo is
 * named after TAY in the same stack: a browser picks a face per character, so
 * an English heading gets TAY, an Arabic one gets Cairo, and a heading with
 * both in it gets each word in the right face. The body is the same idea with
 * IBM Plex Sans Arabic after Loew (Diwan, 5 October 2026): Cairo for the
 * Arabic headings, Plex for the Arabic text under them. Both are loaded only
 * on the Arabic side, from the stylesheet that enqueues this one.
 */

@font-face {
	font-family: "TAY";
	src: url("fonts/TAYBenditos.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Loew";
	src: url("fonts/Loew-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Loew";
	src: url("fonts/Loew-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Loew";
	src: url("fonts/Loew-Bold.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Loew";
	src: url("fonts/Loew-Black.woff2") format("woff2");
	font-weight: 800 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--diwan-font-display: "TAY", "Cairo", "Loew", system-ui, sans-serif;
	--diwan-font-body: "Loew", "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, sans-serif;
}

body {
	font-family: var(--diwan-font-body);
	/*
	 * Lining figures (October 2026). Loew's own figures are old style: they
	 * rise and drop like lowercase letters, so "2026" in the footer, a price
	 * on a card or a date on an event sat at different heights from the
	 * capitals beside them and read as letters that did not belong together.
	 * Inherited by everything, Elementor's widgets included.
	 */
	font-variant-numeric: lining-nums;
}

/*
 * TAY is a capitals face: its lowercase letters are small capitals. Where it
 * is set in mixed case (a slide's heading, a card's title) every capital stood
 * a size above the rest of its word, so it is set in capitals throughout, as
 * the section headings already are. Named place by place rather than on every
 * heading: a heading given the body face (a job's title) keeps its case.
 * Arabic has no case, so this changes nothing on the Arabic side.
 */
.diwan-display,
.elementor-slide-heading,
.elementor-slide-description,
.e-loop-item .elementor-widget-theme-post-title .elementor-heading-title {
	text-transform: uppercase;
}

/* Headings carry the display face everywhere, not only inside the sections
   this plugin draws: a WooCommerce page heading is a Diwan heading too. */
h1,
h2,
h3,
h4,
.diwan-display {
	font-family: var(--diwan-font-display);
	letter-spacing: 0.01em;
}

/*
 * A heading widget that is not a heading.
 *
 * Elementor's heading widget can be set to render as a paragraph, and plenty of
 * text on this site is: a book's author, a staff recommendation. It puts all of
 * them in the site's primary face whatever the tag says, and TAY draws its
 * lowercase as small capitals, so a paragraph in it comes out shouted.
 *
 * So the tag decides. Set to p, div or span it is prose and takes the body
 * face; left as a real heading it keeps the display face like everything else.
 * Written with the tag in the selector, which is what puts it one step above
 * Elementor's own rule without an !important.
 */
.elementor-widget-heading p.elementor-heading-title,
.elementor-widget-heading div.elementor-heading-title,
.elementor-widget-heading span.elementor-heading-title {
	font-family: var(--diwan-font-body);
}

/*
 * The same two faces, under the names Elementor's kit writes.
 *
 * Elementor's Site Settings hold one set of global fonts for the whole site,
 * and this site is one site in two languages. TAY has no Arabic glyphs at all,
 * so on the Arabic side the four globals are pointed at the Arabic faces
 * instead, headings at Cairo and text at IBM Plex Sans Arabic: every widget
 * Elementor draws keeps reading its own variable and gets a face that can
 * actually draw the words.
 *
 * The page's own text takes the body stack too: WooCommerce's basket,
 * checkout and account pages are not drawn by Elementor's widgets, and
 * without it their Arabic fell through Loew to whatever the system had.
 *
 * Keyed on the body class WordPress adds for a right-to-left page, which is one
 * class more specific than the kit's own rule, so this wins without !important
 * and without knowing the kit's ID.
 */
body.rtl {
	font-family: var(--diwan-font-body);
	--e-global-typography-primary-font-family: "Cairo";
	--e-global-typography-secondary-font-family: "Cairo";
	--e-global-typography-text-font-family: "IBM Plex Sans Arabic";
	--e-global-typography-accent-font-family: "IBM Plex Sans Arabic";
}