/**
 * FiLLi Cafe — Country RTL Overrides
 *
 * Loaded conditionally when dir="rtl" (Arabic pages).
 * Flexbox auto-flips with dir="rtl" — only directional CSS
 * properties that don't auto-flip need overrides here.
 *
 * Selector specificity matches the original rules (same selectors).
 * Loaded after country.css, menu-cards.css, menu-nav.css — wins by source order.
 */

/* ── Typography — Arabic font stack ──────────────────────── */

[dir="rtl"] body {
    font-family: 'Noto Sans Arabic', 'ARSMaquettePro', Helvetica, Arial, sans-serif;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: 'Noto Sans Arabic', Georgia, serif;
}

/* Playfair Display (the Latin accent font used for <em> in every heading)
   has no Arabic glyphs. On RTL pages the emphasized text falls through to
   the browser's Arabic fallback, which breaks the visual rhythm of the
   heading. Force Noto Sans Arabic on every heading's emphasized span so
   Arabic emphasized words match the surrounding Arabic flow — keeping the
   orange color accent from the base CSS. */
[dir="rtl"] .cy-hero h1 em,
[dir="rtl"] .cy-hero--cream h1 em,
[dir="rtl"] .cy-intro h2 em,
[dir="rtl"] .cy-about-extra h2 em,
[dir="rtl"] .cy-menu-head h2 em,
[dir="rtl"] .cy-stores-section h2 em,
[dir="rtl"] .cy-cta h2 em,
[dir="rtl"] .cy-empty-state h2 em,
[dir="rtl"] .cy-contact-hero h1 em,
[dir="rtl"] .sl-detail-about__content h2 em,
[dir="rtl"] .sl-detail-about__content h3 em,
[dir="rtl"] .sl-nearby__heading em,
[dir="rtl"] .sl-detail-faq__head h2 em,
[dir="rtl"] .fm-section-title {
    font-family: 'Noto Sans Arabic', Georgia, serif;
    font-style: normal;
}

/* ── country.css overrides ───────────────────────────────── */

/* .cy-ext-icon, .cy-global-link, .cy-store-slide-info h3 now use logical
   margin-inline-start/end and text-align: start in country.css — no
   RTL-specific overrides needed. */

/* ── menu-cards.css overrides ────────────────────────────── */

/* Size label margin (menu-cards.css:62) */
[dir="rtl"] .fm-size-pill .fm-sl {
    margin-right: 0;
    margin-left: 3px;
}

/* ── Language switcher ───────────────────────────────────── */
/* Base .cy-lang-switch styles live in country.css so both LTR and RTL
   pages render the pill identically. No direction-specific overrides
   needed here — symmetric flex layout, logical padding. */

/* ── Scroll container padding flip ───────────────────────── */

[dir="rtl"] .cy-menu-scroll,
[dir="rtl"] .cy-store-strip {
    /* Flexbox auto-reverses, but the edge inset needs flipping.
       Views use inline padding-left — this override ensures
       the scroll origin shifts to the right edge in RTL. */
    direction: rtl;
}

/* ── Breadcrumb separator ────────────────────────────────── */

[dir="rtl"] .sl-breadcrumbs li + li::before {
    content: '\\';
}

/* ── Navbar float utility ────────────────────────────────── */
/* Bootstrap float-end auto-flips with dir="rtl", so no override needed */

/* ── Store detail sidebar layout ─────────────────────────── */
/* Grid/flex layouts auto-flip — no override needed */

/* ── Mobile sticky CTA ───────────────────────────────────── */
/* Flex row auto-reverses — no override needed */

/* ── Phase: Qatar finish pass — missing RTL overrides ────── */

/* Navbar button spacing: moved to country.css as margin-inline-* logical
   properties (Phase 2 layout fix). Logical properties auto-flip on RTL
   so per-direction px literals are no longer needed here. Left as a
   comment anchor so future greps for ".find-store-btn" land on the note. */

/* Background image flip retained as a harmless no-op. Phase 2 switches
   .cy-intro to a real <img> element, so the background-position rule no
   longer paints anything; kept only in case a future variant reintroduces
   a background layer on the section. */
[dir="rtl"] .cy-intro {
    background-position: right center;
}

/* Menu nav pill padding */
[dir="rtl"] .fm-nav-group-label {
    padding: 9px 0 9px 16px;
}

/* Nearby stores arrow animation */
[dir="rtl"] .sl-nearby__card:hover .sl-nearby__arrow {
    transform: translateX(-3px);
}

/* Region selector dropdown arrow */
[dir="rtl"] .cm-region-select select {
    background-position: left 10px center;
    padding-left: 28px;
    padding-right: 12px;
}

/* Banner positioning */
[dir="rtl"] .banner_content {
    left: auto;
    right: 0;
}

/* Arabic typography tuning — 5% body size boost improves Arabic script
   legibility. The navbar opts OUT of this boost below so the fixed-header
   rendered height stays equal to English (see Phase 2 layout fix). */
[dir="rtl"] body {
    font-size: 1.05em;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
    line-height: 1.35;
}

/* Navbar carve-out: explicit values matching English so the 1.05em body
   boost cannot inflate the fixed-header box on RTL pages. Every font
   metric that could change the navbar paint height is pinned here. */
[dir="rtl"] header.navbar-section,
[dir="rtl"] header.navbar-section .header-main.navbar,
[dir="rtl"] header.navbar-section .header-main .nav-link,
[dir="rtl"] header.navbar-section .find-store-btn,
[dir="rtl"] header.navbar-section .header-main-right,
[dir="rtl"] header.navbar-section .header-main-left {
    font-size: 14px;
    line-height: 1;
}
@media (max-width: 1199px) {
    [dir="rtl"] header.navbar-section .header-main .nav-link,
    [dir="rtl"] header.navbar-section .find-store-btn {
        font-size: 12px;
    }
}

/* Letter-spacing breaks Arabic ligatures — Latin "Aa Bb" with extra
   tracking looks fine, but Arabic "فيلي كافيه" with 3px tracking
   separates the joined glyphs and the word loses shape, looking like
   disconnected foreign characters. Neutralise tracking on any RTL
   element that had it baked in from the Latin-first base CSS.
   text-transform: uppercase is a no-op in Arabic but reset for cleanliness. */
[dir="rtl"] .cy-hero-tagline,
[dir="rtl"] .cy-kicker,
[dir="rtl"] .cy-btn,
[dir="rtl"] .cy-value,
[dir="rtl"] .cy-hero-btns .cy-btn,
[dir="rtl"] .cy-menu-head h2,
[dir="rtl"] .cy-stores-section h2,
[dir="rtl"] .cy-cta h2,
[dir="rtl"] .cy-hero h1,
[dir="rtl"] .cy-hero--cream h1,
[dir="rtl"] .sl-badge,
[dir="rtl"] .sl-detail-hero__title,
[dir="rtl"] .sl-nearby__heading,
[dir="rtl"] .sl-store-card__name,
[dir="rtl"] .cy-stat-label,
[dir="rtl"] .cy-mcard-ov h3,
[dir="rtl"] .cy-store-slide-info h3 {
    letter-spacing: 0;
    text-transform: none;
}

/* Store detail FAQ icon */
[dir="rtl"] .sl-detail-faq__icon {
    margin-left: 0;
    margin-right: auto;
}

/* .nav-menu hamburger: position handled by wp-shared-styles.blade.php now
   uses margin-inline-start: auto — pushes to end of flex row in either
   direction automatically. No RTL override needed. */

/* Inline numeric/Latin strings (hours, phone numbers, addresses containing
   Latin segments) need an LTR embedding span to stop the BiDi algorithm
   from reversing "10:00 AM – 10:00 PM" into "AM – 10:00 PM 10:00". Use on
   a <bdi> or <span class="ltr-embed"> wrapper in Blade. */
[dir="rtl"] .ltr-embed {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Contact form input direction */
[dir="rtl"] .cy-contact-form input,
[dir="rtl"] .cy-contact-form textarea {
    text-align: right;
}

/* Navbar — in RTL, flex auto-reverses the row. header-main-left (logo+nav)
   goes to the right, header-main-right (EN/Global/FindStore) to the left.
   Just need to flip the auto-margin that pushes right-side to the end. */
[dir="rtl"] header.navbar-section .header-main-right {
    margin-left: 0 !important;
    margin-right: auto !important;
}
[dir="rtl"] .header-main-right .nav-list {
    float: none !important;
}
[dir="rtl"] header.navbar-section .header-main-left {
    margin-left: 0;
}

/* Hero overlay gradient — flip for RTL (text is on the right) */
[dir="rtl"] .cy-hero-overlay {
    background: linear-gradient(-105deg, rgba(26,14,8,0.85) 0%, rgba(26,14,8,0.65) 30%, rgba(26,14,8,0.15) 55%, transparent 70%);
}

/* .cy-hero-text inherits text-align: start from body — resolves to right
   on RTL automatically, no override needed.
   .cy-franchise has no matching selector in country.css — dead override,
   removed. */

/* Intro grid — explicit direction:rtl keeps grid child order consistent
   on Arabic pages where the parent's RTL alone doesn't flip grid flow. */
[dir="rtl"] .cy-intro-grid {
    direction: rtl;
}

/* Footer columns — right-align text within each column */
[dir="rtl"] .footer-section .footerbox {
    text-align: right !important;
}
[dir="rtl"] .footer-section .footerbox h6 {
    text-align: right !important;
}
[dir="rtl"] .footer-section .footerbox .f-menu {
    text-align: right !important;
}
[dir="rtl"] .footer-section .footerbox .f-menu a {
    display: block;
    text-align: right !important;
}
/* fi-footer-top: logo stays right in RTL — no flex-direction override needed */
[dir="rtl"] .fi-footer-bottom-row {
    text-align: right !important;
}