/* ==========================================================================
   WADI MATROUH — ARABIC TYPOGRAPHY & RTL SYSTEM
   Arabic-first. RTL is the default direction, not an afterthought.
   ========================================================================== */

/* ---- BASE ---- */
html[dir="rtl"], body { direction: rtl; text-align: right; }

body {
  font-family: var(--wadi-font-ar);
  font-size: var(--wadi-fs-base);
  line-height: var(--wadi-lh-body);
  color: var(--wadi-ink);
  background: var(--wadi-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ---- HEADINGS ----
   Arabic display type needs tighter leading than body but never below 1.3 —
   descenders and diacritics collide. */
h1, h2, h3, h4, h5, h6, .wadi-h {
  font-family: var(--wadi-font-ar-display);
  font-weight: var(--wadi-fw-bold);
  line-height: var(--wadi-lh-tight);
  /* Was var(--wadi-olive): EVERY heading on the site was brand green, which is
     what made the design read as "green-heavy". Green is now an accent applied
     deliberately, not the default text colour. */
  color: var(--wadi-heading);
  letter-spacing: var(--wadi-ls-normal);
  margin: 0 0 var(--wadi-sp-4);
  text-wrap: balance;
}

h1, .wadi-h1 { font-size: var(--wadi-fs-3xl); }
h2, .wadi-h2 { font-size: var(--wadi-fs-2xl); }
h3, .wadi-h3 { font-size: var(--wadi-fs-xl); }
h4, .wadi-h4 { font-size: var(--wadi-fs-lg); font-weight: var(--wadi-fw-semi); }
h5, .wadi-h5 { font-size: var(--wadi-fs-md); font-weight: var(--wadi-fw-semi); }
h6, .wadi-h6 { font-size: var(--wadi-fs-base); font-weight: var(--wadi-fw-semi); }

p { margin: 0 0 var(--wadi-sp-4); max-width: var(--wadi-container-text); }
.wadi-lead { font-size: var(--wadi-fs-md); color: var(--wadi-ink-soft); line-height: var(--wadi-lh-snug); }
.wadi-meta { font-size: var(--wadi-fs-sm); color: var(--wadi-ink-muted); }

/* ---- LATIN INSIDE ARABIC ----
   Numerals, EGP, sizes and SKUs must render LTR inside RTL text. */
.wadi-ltr, .wadi-price, .wadi-sku, .wadi-size, bdi {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--wadi-font-latin), var(--wadi-font-ar);
  font-feature-settings: "tnum" 1;   /* tabular numerals — prices align */
}

/* Latin display — the brand lockup face (El Messiri Latin) */
.wadi-latin-display {
  font-family: var(--wadi-font-lockup);
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: var(--wadi-ls-wide);
}

/* ---- LINKS ---- */
a { color: var(--wadi-olive); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--wadi-dur) var(--wadi-ease); }
a:hover { color: var(--wadi-olive-500); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--wadi-olive);
  outline-offset: 2px;
  border-radius: var(--wadi-r-sm);
}

/* ---- LISTS ---- */
ul, ol { padding-inline-start: 1.4em; margin: 0 0 var(--wadi-sp-4); }
li { margin-bottom: var(--wadi-sp-2); }

/* ==========================================================================
   RTL LOGICAL PROPERTIES
   Use logical properties everywhere so LTR fallback works without a second sheet.
   ========================================================================== */
.wadi-stack > * + * { margin-block-start: var(--wadi-sp-4); }
.wadi-inline > * + * { margin-inline-start: var(--wadi-sp-3); }

/* Mirror directional icons in RTL (arrows, chevrons, carets) */
[dir="rtl"] .wadi-icon-directional { transform: scaleX(-1); }

/* WooCommerce RTL corrections — Woo ships some hard-coded left/right */
[dir="rtl"] .woocommerce ul.products li.product .button { margin-inline-start: 0; }
[dir="rtl"] .woocommerce .quantity .qty { text-align: center; }
[dir="rtl"] .woocommerce-breadcrumb { text-align: right; }
[dir="rtl"] .woocommerce form .form-row label { text-align: right; display: block; }

/* ==========================================================================
   FONT LOADING — self-hosted variable fonts, no third-party request
   ==========================================================================

   Two families, four files, ~108 KB total for the complete weight range.

   | family     | role            | file                       | subset |
   |------------|-----------------|----------------------------|--------|
   | El Messiri | display/heading | elmessiri-var-arabic.woff2 | arabic |
   | El Messiri | display/heading | elmessiri-var-latin.woff2  | latin  |
   | Cairo      | body/UI/numeral | cairo-var-arabic.woff2     | arabic |
   | Cairo      | body/UI/numeral | cairo-var-latin.woff2      | latin  |

   These are VARIABLE fonts: `font-weight: 200 900` in one @font-face covers
   every weight, so 400/500/600/700 cost nothing beyond the single file.
   The cyrillic and latin-ext subsets are deliberately NOT shipped — nothing
   on an Arabic Egyptian storefront renders them.

   unicode-range lets the browser skip a file entirely: an all-Arabic page
   never downloads the Latin file until a price or SKU appears on it.
   ========================================================================== */

/* ---- CAIRO — body, UI, numerals ---- */
@font-face {
  font-family: "Cairo";
  src: url("../fonts/cairo-var-arabic.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  src: url("../fonts/cairo-var-latin.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  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;
}

/* ---- EL MESSIRI — headings and the Latin lockup ---- */
@font-face {
  font-family: "El Messiri";
  src: url("../fonts/elmessiri-var-arabic.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "El Messiri";
  src: url("../fonts/elmessiri-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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;
}

/* ==========================================================================
   DISPLAY TYPE TUNING
   El Messiri sits optically larger and tighter than Cairo. Headings therefore
   get their own leading and a hair of negative tracking; Arabic never takes
   positive tracking — it breaks the joins between letters.
   ========================================================================== */
h1, h2, h3, .wadi-h1, .wadi-h2, .wadi-h3 {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.32;
}
h4, h5, h6, .wadi-h4, .wadi-h5, .wadi-h6 { letter-spacing: 0; }

/* The Latin lockup — "WADI MATROUH" and similar. Wide tracking is safe here
   because it is Latin, not Arabic. */
.wadi-lockup {
  font-family: var(--wadi-font-lockup);
  direction: ltr; unicode-bidi: isolate;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}