/* =============================================================================
   Bio Lotus AR — RTL Overrides
   Loaded automatically by WordPress when the site language is Arabic (RTL).
   Supplements (does not replace) cart-drawer.css and theme.css.

   Structural principle:
     - Layout uses CSS logical properties throughout (inset-inline, margin-inline,
       padding-inline, border-inline-*) so they flip automatically in RTL.
     - Only physical-coordinate properties that cannot self-flip need overrides here.
   ============================================================================= */

/* ── Font stacks: Arabic fonts take priority over Latin ─────────────────── */
/*
 * Amiri     — Arabic serif (pairs with Cormorant Garamond for brand name)
 * Tajawal   — Arabic sans-serif (pairs with Jost for UI text)
 * Both are already loaded by the Google Fonts <link> in enqueue.php.
 */
:root {
	--bl-font-serif: 'Amiri', 'Cormorant Garamond', serif;
	--bl-font-sans:  'Tajawal', 'Jost', sans-serif;
}

/* ── Cart drawer: physical overrides for RTL ─────────────────────────────── */
/*
 * The drawer uses inset-inline-end: 0 — in RTL this anchors it to the LEFT edge.
 * The default LTR hidden state is translateX(110%) — slides off to the RIGHT.
 * In RTL we must slide it off to the LEFT instead: translateX(-110%).
 * The panel shadow is also physical, so it flips to fall toward the page.
 */
.bl-cart-drawer {
	transform:  translateX(-110%);
	box-shadow: 8px 0 40px rgba(28, 23, 16, 0.18);
}

.bl-cart-drawer.is-open {
	transform: translateX(0);
}

/* Progress fill: gradient direction mirrored (fill already grows from the
   right because block children align to inline-start in RTL) */
.bl-cart-drawer__meter-fill {
	background: linear-gradient(270deg, var(--bl-accent, #5C6E50), var(--bl-bold, #7A4830));
}

/* ── Promo banner: message/action order is already logical ─────────────────
 * flex-direction and gap are direction-agnostic; no overrides needed.
 * If a secondary message needs to align differently, add here.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Number formatting: Arabic numerals (optional) ──────────────────────── */
/*
 * WooCommerce prices, review counts etc. use Latin digits by default.
 * Setting font-variant-numeric or a different digit glyphs set is done at
 * the application level (WC setting + Tajawal already supports both).
 * No CSS override needed — Arabic numerals are controlled by WP locale.
 */

/* ── Footer contact: address dir stays LTR for street numbers ────────────── */
/*
 * The PHP template wraps the phone in <span dir="ltr">; street numbers in
 * the address are typically written LTR in Tunisia. The <address> element
 * inherits document RTL, but numeric parts inside will still display correctly
 * because the Unicode Bidirectional Algorithm handles mixed directionality.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   ARABIC TYPOGRAPHIC RHYTHM
   Loaded last (bla-rtl) so these rules win the cascade over the tracked,
   Latin-tuned rules in theme/header/home/pages/woocommerce CSS.

   Principles:
   - Arabic letterforms are CONNECTED — any letter-spacing breaks the script.
     Tracking is zeroed globally.
   - Amiri ascenders/descenders + diacritics need taller line-heights than
     Cormorant's 1.1 editorial setting.
   - There is no Arabic uppercase: the FR "tracked uppercase eyebrow" device
     is replaced by weight + size contrast (text-transform neutralized).
   - Slightly larger UI sizes: Tajawal reads smaller than Jost at equal px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Tracking is zeroed everywhere — non-negotiable for connected script */
body, h1, h2, h3, h4, h5, h6,
p, a, li, span, em, strong, address, blockquote, figcaption,
button, input, select, textarea, summary, label, legend {
	letter-spacing: 0;
}

/* 2. Headings: taller line-height so Amiri never clips */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.4;
}

.bl-hero__headline           { line-height: 1.35; }
.bl-mega-drop__heading       { line-height: 1.4; }
.bl-page-hero__title         { line-height: 1.4; }
.bl-policy__section-title    { line-height: 1.5; }
.bl-newsletter__title        { line-height: 1.45; }
.bl-footer-nlband__title     { line-height: 1.45; }
.bl-cart-drawer__title       { line-height: 1.45; }

/* 3. Body copy: a touch more leading for Tajawal */
.bl-policy__section-body,
.bl-faq__answer,
.bl-page-hero__lead {
	line-height: 1.9;
}

/* 4. Micro-labels (FR: tracked uppercase) → AR: weight + size, no transform */
.bl-hero__eyebrow span,
.bl-mega-drop__eyebrow,
.bl-page-hero__eyebrow,
.bl-page-section__sub,
.bl-footer-contact__col-title,
.bl-footer-nl__label,
.bl-policy__toc-title,
.bl-faq__group-title {
	text-transform: none;
	font-weight:    500;
}
.bl-footer-contact__col-title { font-size: 12px; }
.bl-policy__toc-title         { font-size: 11px; }

/* 5. Buttons & nav: Tajawal 500 reads like Jost 500 — sizes up one step */
.bl-site-header__menu > li > a {
	font-size:      13px;
	text-transform: none;
	font-weight:    500;
}
.bl-btn-primary,
.bl-footer-nl__submit,
.bl-newsletter__submit,
.bl-placeholder__cta,
.bl-mega-drop__feat-cta,
.bl-mega-drop__cat-cta,
.bl-mega-drop__bar-link--accent,
.bl-cart-drawer__view-cart {
	text-transform: none;
	font-size:      12.5px;
	font-weight:    500;
}

/* 6. Mega menu quick links + picks: comfortable Arabic sizes */
.bl-mega-drop__bar-link { font-size: 12.5px; }
.bl-mega-drop__picks a  { font-size: 13px; }
.bl-mega-drop__intro    { font-size: 12.5px; line-height: 1.8; }

/* 7. Footer links: one step up for Tajawal legibility */
.bl-footer-contact__link { font-size: 13.5px; }

/* 8. No slanted Arabic — the script is never obliqued on this fork.
 *
 * This rule used to be a hand-written list of ~9 selectors. That list was
 * incomplete: ~15 other components still asked for italic (promo banner
 * secondary message, ticker, philosophy quote, testimonials title + quote,
 * journal title, mobile nav links, process numbers, several page-hero and
 * section titles), so Arabic text in them rendered slanted — contradicting
 * the stated intent above and, more importantly, pulling in the Amiri
 * italic webfonts (~128KB of Arabic-subset woff2, measured live 2026-08-21).
 *
 * The Amiri (and Cormorant) italic variants are now deliberately NOT
 * requested — see inc/enqueue.php. That raises the cost of missing a
 * selector: instead of loading a real italic face, the browser would
 * SYNTHESISE a fake oblique by shearing the upright glyphs, which is
 * exactly the deformation this rule exists to prevent. A per-component
 * list can't be trusted to stay exhaustive as components are added, so
 * this is enforced as a catch-all with !important: on this fork, nothing
 * is slanted, deliberately and unconditionally.
 */
[class*="bl-"],
[class*="bl-"] em,
[class*="bl-"] i,
em, i, cite, dfn, var, address, blockquote {
	font-style: normal !important;
}