{# Served as text/css by landing_typography(). Font URLs go through the
   static tag so Whitenoise-hashed names resolve at render time. #}
/* ============================================================================
   Thmanyah typography layer for the landing page.
   Loaded AFTER the Vite bundle so it wins without fighting Tailwind.
   Family roles (skill: one family per job):
     Display  -> hero, section titles, card titles, pull quotes, big numerals
     Text     -> paragraphs, descriptions (reading)
     Sans     -> navbar, buttons, labels, badges, footer, forms
   Weights: 300 / 400 / 500 / 700 / 900 only. No 600, no 800, no italics.
   ========================================================================== */

/* ---- 1. Faces: 3 families x 5 weights, woff2 ---------------------------- */
@font-face { font-family: "Thmanyah Display"; src: url("/static/fonts/thmanyah/woff2/thmanyahserifdisplay-Light.1cd9b168195f.woff2") format("woff2");   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Display"; src: url("/static/fonts/thmanyah/woff2/thmanyahserifdisplay-Regular.c8f23e36d51a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Display"; src: url("/static/fonts/thmanyah/woff2/thmanyahserifdisplay-Medium.094c96c007f4.woff2") format("woff2");  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Display"; src: url("/static/fonts/thmanyah/woff2/thmanyahserifdisplay-Bold.648327b59366.woff2") format("woff2");    font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Display"; src: url("/static/fonts/thmanyah/woff2/thmanyahserifdisplay-Black.651bfb483caa.woff2") format("woff2");   font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Thmanyah Text"; src: url("/static/fonts/thmanyah/woff2/thmanyahseriftext-Light.74148a2074b7.woff2") format("woff2");   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Text"; src: url("/static/fonts/thmanyah/woff2/thmanyahseriftext-Regular.5c87e8ee0f0d.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Text"; src: url("/static/fonts/thmanyah/woff2/thmanyahseriftext-Medium.7ecd03bf1c5e.woff2") format("woff2");  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Text"; src: url("/static/fonts/thmanyah/woff2/thmanyahseriftext-Bold.3ffcc048a650.woff2") format("woff2");    font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Text"; src: url("/static/fonts/thmanyah/woff2/thmanyahseriftext-Black.ef548d6697e2.woff2") format("woff2");   font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Thmanyah Sans"; src: url("/static/fonts/thmanyah/woff2/thmanyahsans-Light.b3f215c6386a.woff2") format("woff2");   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("/static/fonts/thmanyah/woff2/thmanyahsans-Regular.7089f03a7ccd.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("/static/fonts/thmanyah/woff2/thmanyahsans-Medium.1391e0f4b3ad.woff2") format("woff2");  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("/static/fonts/thmanyah/woff2/thmanyahsans-Bold.b6d5de40be17.woff2") format("woff2");    font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("/static/fonts/thmanyah/woff2/thmanyahsans-Black.fc840e8c42b3.woff2") format("woff2");   font-weight: 900; font-style: normal; font-display: swap; }

/* ---- 2. Tokens ---------------------------------------------------------- */
:root {
  --font-display: "Thmanyah Display", serif;
  --font-text: "Thmanyah Text", serif;
  --font-ui: "Thmanyah Sans", sans-serif;

  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-bold: 700; --w-black: 900;

  /* Scale borrowed from font.thmanyah.com: the hero is poster-sized, the
     second line short, and the leading tight (their h1 sits at ~0.95). */
  --fs-hero: clamp(2.5rem, 3.6vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.875rem, 2.6vw + 1rem, 3rem);
  --fs-h3: clamp(1.25rem, 0.9vw + 1rem, 1.5rem);
  --fs-lead: clamp(1.5rem, 0.8vw + 1.2rem, 1.75rem);
  --fs-body: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
  --fs-small: 0.875rem;
}

/* ---- 3. Global reset of the old stack ----------------------------------- */
html {
  font-synthesis: none;              /* never fake a weight the file lacks */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Changa / Tajawal / IBM Plex are gone: body reads in Thmanyah Text 400 */
body,
.font-changa,
.font-sans,
.font-mono {
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  line-height: 1.7;
}
/* Arabic must never be tracked — Tailwind's tracking-* utilities are single
   class selectors, so an attribute match with !important is the honest way to
   neutralise them without editing the compiled bundle. */
[class*="tracking-"] { letter-spacing: 0 !important; }
b, strong { font-weight: var(--w-bold); }
em, i { font-style: normal; font-weight: var(--w-medium); }

/* The footer's AMoshref-Thulth is a different Arabic face — one voice only */
[style*="Moshref"],
.font-moshref-thulth,
[class*="font-moshref"] {
  font-family: var(--font-display) !important;
  font-weight: var(--w-medium);
  letter-spacing: 0;
}

/* ---- 4. Display: hero and section titles -------------------------------- */
h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--w-black);        /* 900: the loudest voice, hero only */
  line-height: 1.38;                  /* Arabic dots and descenders need the room */
  letter-spacing: 0;
  font-feature-settings: "salt" 1;    /* flowing alternates, big titles only */
  text-wrap: balance;
  margin-block: 0 0.4em;
  padding-block: 0.06em;              /* keep the tallest dot inside the box */
}
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-black);
  line-height: 1.4;
  letter-spacing: 0;
  font-feature-settings: "salt" 1;
}
h3, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  line-height: 1.35;
  letter-spacing: 0;
}
/* Reference technique: the key phrase is marked with a flat block of colour,
   not a weight change — the headline keeps one Black voice. box-decoration-break
   keeps the tint intact if the phrase wraps. */
.th-hero-mark {
  background: rgba(72, 166, 167, 0.16);
  padding: 0.06em 0.22em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.th-hero-light { font-weight: var(--w-light); }

/* ---- 5. Reading text ---------------------------------------------------- */
p, li, dd, figcaption {
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  line-height: 1.95;                  /* Arabic reads looser than Latin */
  letter-spacing: 0;
}
p + p, li + li { margin-top: 0.7em; }
/* Lead lines: 300 is only legal at 24px+, so these are raised to --fs-lead */
p[class*="text-[23px]"],
p[class*="text-[19px]"] {
  font-size: var(--fs-lead);
  font-weight: var(--w-light);
  line-height: 1.75;
  margin-block: 0.5em 0.9em;
}
/* Long measures get a readable width */
p { max-width: 68ch; }

/* Quotes read as display, large and light */
blockquote, .quote { font-family: var(--font-display); font-weight: var(--w-light); line-height: 1.6; }

/* ---- 6. UI: nav, buttons, labels, badges -------------------------------- */
nav a, nav button, header a, header button,
body button[class], body .btn,
body a[class*="bg-"], button {
  font-family: var(--font-ui);
  font-weight: var(--w-bold);
  letter-spacing: 0;
  line-height: 1.45;
  min-height: 46px;                   /* thumb-sized, text clear of the edges */
  padding-inline: 1.35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
nav a, nav button {
  min-height: 0;
  padding-inline: 0.35em;
  padding-block: 0.4em;
  display: inline-block;
}
nav a, nav button { font-weight: var(--w-medium); }
nav a:hover, nav a[aria-current="page"] { font-weight: var(--w-bold); }

/* Eyebrows / small labels: quiet structure */
[class*="font-semibold"]:not(h1, h2, h3, h4, h5, h6, blockquote, button, a) {
  font-family: var(--font-ui);
  font-weight: var(--w-medium);       /* 600 is banned; 500 is its job */
}
[class*="font-bold"] h1, [class*="font-bold"] h2 { font-weight: var(--w-black); }

/* Table-like content and stats numerals */
table, th, td, .stat, .stat-number, [class*="text-[26px]"] { font-family: var(--font-ui); }
.stat-number, .stat-value {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  letter-spacing: -0.02em;   /* their numerals are tracked slightly tight */
}

/* Badges and pills */
[class*="rounded-full"][class*="px-"] { font-family: var(--font-ui); font-weight: var(--w-medium); }

/* ---- 7. Inputs and forms ------------------------------------------------ */
input, textarea, select, ::placeholder {
  font-family: var(--font-ui);
  font-weight: var(--w-regular);
  letter-spacing: 0;
}
label { font-family: var(--font-ui); font-weight: var(--w-medium); }

/* ---- 8. Footer ---------------------------------------------------------- */
footer h1, footer h2, footer h3, footer h4 { font-family: var(--font-display); font-weight: var(--w-bold); }
footer p, footer a, footer li { font-family: var(--font-ui); }
footer li a { font-weight: var(--w-regular); }

/* ---- 9. Responsive tightening ------------------------------------------ */
@media (max-width: 640px) {
  :root { --fs-hero: 2.125rem; --fs-h2: 1.625rem; }
  p { max-width: none; }
}

/* Headings win the cascade: the bundle adds font-semibold/font-bold classes to
   h2/h3, and a class selector beats an element selector. This block is last so
   the display family and its weight always win. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: 0;
}
h1 { font-weight: var(--w-black); }
h2 { font-weight: var(--w-black); }
h3, h4 { font-weight: var(--w-bold); }
h5, h6 { font-weight: var(--w-medium); }