/* =====================================================================
   ISEA2026 typography system
   ---------------------------------------------------------------------
   One family per script, one scale, a handful of text styles.
   Loaded after the page stylesheets; component CSS reads these tokens.

     English  Vogie  (300 / 400 / 500 / 600 / 700)
     Arabic   Cairo  (same scale, taller line heights, no tracking)

   Scale at --type-scale: 1 (desktop -> phone for the fluid steps).
   Currently --type-scale is 0.975 (about 8% below the earlier 1.0625, which read
   bulky at 100% zoom): body 15.6px, caption 11.7px, hero 66px.
     --fs-caption   12        legal, meta, timestamps
     --fs-small     14        hints, secondary text
     --fs-body      16        body copy, labels, inputs, buttons
     --fs-lead      18        intro paragraphs
     --fs-title-sm  20        card titles, large buttons
     --fs-title     24        section titles
     --fs-title-lg  28 -> 24  page sub-titles
     --fs-heading   36 -> 28  page titles
     --fs-display   52 -> 36  hero titles
     --fs-hero      68 -> 40  the single largest heading on a page
   ===================================================================== */

/* Vogie as one family with real weights. Bold/Regular are also declared in
   style_isea.css; Light, Medium and SemiBold were on disk but never registered. */
@font-face {
  font-family: "Vogie";
  src: url("../fonts/Vogie-Light.woff2") format("woff2"), url("../fonts/Vogie-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

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

@font-face {
  font-family: "Vogie";
  src: url("../fonts/Vogie-SemiBold.woff2") format("woff2"), url("../fonts/Vogie-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Families. Cairo sits in the English stack so any Arabic glyph (names,
     venues) falls back to Cairo rather than a system font. */
  --font-sans: "Vogie", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Cairo", "Noto Kufi Arabic", "Vogie", system-ui, sans-serif;
  --font-base: var(--font-sans);

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Sizes. Every step is a multiple of --type-scale, so the whole hierarchy
     grows or shrinks together and keeps its ratios. 1 = 16px body. */
  --type-scale: 0.975;
  --fs-caption: calc(0.75rem * var(--type-scale));
  --fs-small: calc(0.875rem * var(--type-scale));
  --fs-body: calc(1rem * var(--type-scale));
  --fs-lead: calc(1.125rem * var(--type-scale));
  --fs-title-sm: calc(1.25rem * var(--type-scale));
  --fs-title: calc(1.5rem * var(--type-scale));
  --fs-title-lg: calc(clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem) * var(--type-scale));
  --fs-heading: calc(clamp(1.75rem, 1.4rem + 1vw, 2.25rem) * var(--type-scale));
  --fs-display: calc(clamp(2.25rem, 1.6rem + 2vw, 3.25rem) * var(--type-scale));
  --fs-hero: calc(clamp(2.5rem, 1.5rem + 3.2vw, 4.25rem) * var(--type-scale));

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
}

/* Arabic: same sizes, Cairo, more vertical room, and no tracking
   (letter-spacing breaks the joins between Arabic letters). */
html:lang(ar) {
  --font-base: var(--font-arabic);
  --font-sans: var(--font-arabic);
  --lh-tight: 1.3;
  --lh-snug: 1.45;
  --lh-normal: 1.7;
  --lh-relaxed: 1.8;
  --ls-tight: 0;
  --ls-wide: 0;

  /* Cairo's letters are drawn larger within the em than Vogie's, so at the same
     px size Arabic titles read about 10% bigger. Title steps only: body, lead,
     small and caption stay full size so Arabic text stays easy to read. */
  --ar-title-optical: 0.9;
  --fs-title: calc(1.5rem * var(--type-scale) * var(--ar-title-optical));
  --fs-title-lg: calc(clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem) * var(--type-scale) * var(--ar-title-optical));
  --fs-heading: calc(clamp(1.75rem, 1.4rem + 1vw, 2.25rem) * var(--type-scale) * var(--ar-title-optical));
  --fs-display: calc(clamp(2.25rem, 1.6rem + 2vw, 3.25rem) * var(--type-scale) * var(--ar-title-optical));
  --fs-hero: calc(clamp(2.5rem, 1.5rem + 3.2vw, 4.25rem) * var(--type-scale) * var(--ar-title-optical));
}

html:lang(ar) body * {
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------------
   Base elements
   --------------------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

input,
select,
textarea,
button,
.btn,
.form-control {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

/* Arabic on phones: running text gets an Arabic line height where components set a
   tight English one. (The smaller --type-scale now keeps Arabic text from feeling bulky.) */
@media (max-width: 767.98px) {
  /* !important only because the component sets line-height: 1.3 !important. */
  html:lang(ar) .isea-ticket-landing__desc {
    line-height: 1.6 !important;
  }
}

/* Arabic headings: Cairo even where a component names Vogie, and Arabic line
   height (component values like 1.05 clip Arabic). Deliberately more specific
   than component classes, so it sets only these two: weight and size stay the
   component's own. */
html:lang(ar) h1,
html:lang(ar) h2,
html:lang(ar) h3,
html:lang(ar) h4,
html:lang(ar) h5,
html:lang(ar) h6 {
  font-family: var(--font-base);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-heading); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-title-lg); }
h3 { font-size: var(--fs-title); }
h4 { font-size: var(--fs-title-sm); }
h5 { font-size: var(--fs-lead); }
h6 { font-size: var(--fs-body); }

small,
.small {
  font-size: var(--fs-small);
}

/* Every form uses the same label and input type. Inputs stay at 16px on phones
   too: anything smaller makes iOS Safari zoom the page when a field is focused. */
.form-label,
.form-row .form-label,
.register-page .form-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.form-control,
.form-select,
.form-row .form-control,
.register-page .form-control {
  font-size: var(--fs-body);
}

/* Phones: never below 16px inside a field, or iOS Safari zooms in on focus. */
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  .form-row .form-control,
  .register-page .form-control,
  input[type="tel"],
  .otp-input,
  .select2-container .select2-selection__rendered {
    font-size: max(16px, var(--fs-body)) !important;
  }
}

/* ---------------------------------------------------------------------
   Text styles, for new markup: <h2 class="t-display">…</h2>
   --------------------------------------------------------------------- */
.t-hero     { font-size: var(--fs-hero);     font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-display  { font-size: var(--fs-display);  font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h1       { font-size: var(--fs-heading);  font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h2       { font-size: var(--fs-title-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.t-h3       { font-size: var(--fs-title);    font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.t-h4       { font-size: var(--fs-title-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.t-lead     { font-size: var(--fs-lead);     font-weight: var(--fw-regular);  line-height: var(--lh-relaxed); }
.t-body     { font-size: var(--fs-body);     font-weight: var(--fw-regular);  line-height: var(--lh-normal); }
.t-label    { font-size: var(--fs-body);     font-weight: var(--fw-medium);   line-height: var(--lh-snug); }
.t-small    { font-size: var(--fs-small);    font-weight: var(--fw-regular);  line-height: var(--lh-normal); }
.t-caption  { font-size: var(--fs-caption);  font-weight: var(--fw-regular);  line-height: var(--lh-normal); }
.t-overline { font-size: var(--fs-caption);  font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-wide); text-transform: uppercase; }