/**
 * Typography.
 *
 * Display headings: Miriam Libre.  Body, UI and every commerce number: Assistant.
 * Chosen 2026-09-06 from a six-way specimen comparison; the deciding artifact
 * emits exactly the two family declarations below and nothing else, so the type
 * scale here comes from the canvas (Components.dc.html), not from that document.
 *
 * Both families are self-hosted — no Google Fonts request in production.
 * Assistant is a variable font split by Unicode range, so a Hebrew page fetches
 * 7KB and never touches the 22KB Latin subset. Miriam Libre ships as two static
 * weights covering all three scripts in ~25KB each; splitting those by range
 * would add build steps to save nothing.
 *
 * Nothing here uses !important. The old rules did, to outrank Luchiana's
 * stylesheet; with no competing stylesheet the specificity war is over.
 */

/* ---- Assistant (variable, 300-800) ---- */

@font-face {
	font-family: "Assistant";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/assistant-hebrew-variable.woff2") format("woff2");
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: "Assistant";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/assistant-latin-ext-variable.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Assistant";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/assistant-latin-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Miriam Libre (static, 400 and 700 only) ---- */

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

@font-face {
	font-family: "Miriam Libre";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/miriam-libre-700.woff2") format("woff2");
}

/* ---- base ---- */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	font-family: var(--hp-font-ui);
	font-size: var(--hp-text-base);
	font-weight: 400;
	line-height: var(--hp-leading-body);
	color: var(--hp-text);
	background: var(--hp-surface);
}

/* ---- headings ----
 * Display face, capped at 700: Miriam Libre has no 800 and the browser would
 * synthesise one. The canvas leans on size for emphasis anyway.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--hp-font-display);
	font-weight: 700;
	line-height: var(--hp-leading-heading);
	letter-spacing: -0.015em;
	margin-block: 0;
	text-wrap: balance;
}

h1 {
	font-size: var(--hp-text-h1);
	line-height: var(--hp-leading-tight);
}

h2 {
	font-size: var(--hp-text-h2);
}

h3 {
	font-size: var(--hp-text-h3);
}

h4 {
	font-size: var(--hp-text-md);
}

h5,
h6 {
	font-size: var(--hp-text-base);
}

/* ---- prose ---- */

p {
	margin-block: 0;
}

a {
	color: var(--hp-link);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--hp-link-hover);
}

strong,
b {
	font-weight: 700;
}

small{
	font-size: var(--hp-text-xs);
	color: var(--hp-text-muted);
}

/* ---- controls inherit the UI face ----
 * The UA stylesheet forces Arial on form controls, so this is a reset, not a
 * specificity fight.
 */

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}
.woocommerce .price,
.woocommerce .amount,
.woocommerce .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* ---- Elementor bridge ----
 * Elementor still renders the pages awaiting migration and reads these globals
 * for its own typography controls. Pointing them at the theme's families keeps
 * those pages consistent without touching Elementor's settings. Comes out with
 * the last Elementor page.
 *
 * These sit on `body.hp-theme`, not on :root, and that placement is the whole
 * point. Elementor writes the same variables into `.elementor-kit-18`, a class
 * it puts on <body>, in a stylesheet that loads after this one. A custom
 * property set on body shadows one inherited from :root no matter how specific
 * the :root selector is — they are different elements, so specificity never
 * enters into it. The declaration has to land on body as well, and carry one
 * class more than the kit does to win there. `hp-theme` is added by
 * hairport_body_classes(); no !important is needed.
 */

body.hp-theme {
	--e-global-typography-primary-font-family: var(--hp-font-display);
	--e-global-typography-secondary-font-family: var(--hp-font-display);
	--e-global-typography-text-font-family: var(--hp-font-ui);
	--e-global-typography-accent-font-family: var(--hp-font-ui);
}