/**
 * CZAR Theme - RTL (Right-to-Left) Overrides
 *
 * Directional style overrides for Arabic mode.
 * Only loaded when body has the 'czar-rtl' class.
 * All flex/grid mirroring, text alignment, and directional
 * padding/margin adjustments live here.
 *
 * @package Czar_Theme
 * @since   1.0.0
 */

/* ─── Global RTL Adjustments ───────────────────────────────────────────────── */
.czar-rtl body,
body.czar-rtl {
    font-family: var(--czar-font-arabic);
    direction: rtl;
    text-align: right;
}

/* ─── Header ───────────────────────────────────────────────────────────────── */
/* No flex-direction override needed on .czar-header__inner — the inherited
   direction: rtl from body.czar-rtl already mirrors the flex layout
   (logo → right, toggle → left).  An explicit row-reverse would double-
   reverse and cancel the mirroring. */

.czar-rtl .czar-header__lang {
    flex-direction: row-reverse;
}

/* ─── Mobile Nav ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    /* Slide in from the RIGHT in RTL mode */
    .czar-rtl .czar-header__nav {
        transform: translateX(100%);
    }

    .czar-rtl .czar-header__nav.is-open {
        transform: translateX(0);
    }

    /* Keep centering behavior from LTR — do NOT override to flex-end */
    .czar-rtl .czar-header__nav-list {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .czar-rtl .czar-header__nav-link {
        text-align: center;
    }

    .czar-rtl .czar-header__submenu {
        padding-left: 0;
        padding-right: var(--czar-space-md);
        text-align: center;
    }
}

/* ─── Category Filter Bar ──────────────────────────────────────────────────── */
.czar-rtl .czar-filter {
    flex-direction: row-reverse;
}

/* ─── Grid Cards ───────────────────────────────────────────────────────────── */
.czar-rtl .czar-card__title {
    text-align: center;
}

/* ─── Modal ────────────────────────────────────────────────────────────────── */
.czar-rtl .czar-modal__close {
    right: auto;
    left: var(--czar-space-md);
}

/* Swap the 50/50 columns so text column is on the right in RTL */
.czar-rtl .czar-modal__grid {
    direction: rtl;
}

.czar-rtl .czar-modal__left {
    border-right: none;
    border-left: 1px solid var(--czar-grey-light);
}

/* Text alignment in right column */
.czar-rtl .czar-modal__right {
    text-align: right;
}

.czar-rtl .czar-modal__title {
    text-align: right;
}

.czar-rtl .czar-modal__description {
    text-align: right;
}

.czar-rtl .czar-modal__share {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* ─── Accords Bar Chart ────────────────────────────────────────────────────── */
.czar-rtl .czar-accord-bar {
    flex-direction: row-reverse;
}

.czar-rtl .czar-accord-bar__fill {
    justify-content: flex-end;
}

.czar-rtl .czar-modal__accords-title {
    text-align: right;
}

/* ─── Perfumer Avatar ──────────────────────────────────────────────────────── */
.czar-rtl .czar-modal__perfumer {
    flex-direction: row-reverse;
}

.czar-rtl .czar-modal__perfumer-name {
    text-align: right;
}

/* ─── Notes Pyramid ────────────────────────────────────────────────────────── */
.czar-rtl .czar-pyramid__heading {
    text-align: center;
}

.czar-rtl .czar-pyramid__notes {
    flex-direction: row-reverse;
    justify-content: center;
}

/* ─── Image Zoom ───────────────────────────────────────────────────────────── */
.czar-rtl .czar-modal__zoom-hint {
    right: auto;
    left: 8px;
}

.czar-rtl .czar-zoom-overlay__close {
    right: auto;
    left: 24px;
}

/* ─── Footer ───────────────────────────────────────────────────────────────── */
.czar-rtl .czar-footer__text {
    direction: rtl;
}

.czar-rtl .czar-footer__social {
    direction: rtl;
}

/* ─── Mobile Modal RTL ─────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .czar-rtl .czar-modal__close {
        left: var(--czar-space-sm);
        right: auto;
    }

    .czar-rtl .czar-modal__left {
        border-left: none;
        border-bottom: 1px solid var(--czar-grey-light);
    }

    .czar-rtl .czar-zoom-overlay__close {
        left: 16px;
        right: auto;
    }
}

/* ─── Pricing RTL ──────────────────────────────────────────────────────────── */
.czar-rtl .czar-modal__price {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.czar-rtl .czar-modal__buy-btn {
    text-align: center;
}

/* ─── Articles RTL ─────────────────────────────────────────────────────────── */
.czar-rtl .czar-modal__articles {
    text-align: right;
}

.czar-rtl .czar-modal__articles-link {
    flex-direction: row-reverse;
}

/* ─── Modal-Scoped RTL (in-modal language toggle) ──────────────────────────── */
/* These rules mirror the body.czar-rtl modal rules above, but scoped to
   .czar-modal--rtl so the modal can display RTL content independently of the
   page language. Applied/removed dynamically by the modal JS lang toggle. */

.czar-modal--rtl {
    font-family: var(--czar-font-arabic);
}

.czar-modal--rtl .czar-modal__close {
    right: auto;
    left: var(--czar-space-md);
}

.czar-modal--rtl .czar-modal__grid {
    direction: rtl;
}

.czar-modal--rtl .czar-modal__left {
    border-right: none;
    border-left: 1px solid var(--czar-grey-light);
}

.czar-modal--rtl .czar-modal__right {
    text-align: right;
}

.czar-modal--rtl .czar-modal__title {
    text-align: right;
}

.czar-modal--rtl .czar-modal__description {
    text-align: right;
}

.czar-modal--rtl .czar-modal__share {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.czar-modal--rtl .czar-modal__lang {
    flex-direction: row-reverse;
}

.czar-modal--rtl .czar-accord-bar {
    flex-direction: row-reverse;
}

.czar-modal--rtl .czar-accord-bar__fill {
    justify-content: flex-end;
}

.czar-modal--rtl .czar-modal__accords-title {
    text-align: right;
}

.czar-modal--rtl .czar-modal__perfumer {
    flex-direction: row-reverse;
}

.czar-modal--rtl .czar-modal__perfumer-name {
    text-align: right;
}

.czar-modal--rtl .czar-pyramid__heading {
    text-align: center;
}

.czar-modal--rtl .czar-pyramid__notes {
    flex-direction: row-reverse;
    justify-content: center;
}

.czar-modal--rtl .czar-modal__zoom-hint {
    right: auto;
    left: 8px;
}

.czar-modal--rtl .czar-zoom-overlay__close {
    right: auto;
    left: 24px;
}

.czar-modal--rtl .czar-modal__price {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.czar-modal--rtl .czar-modal__buy-btn {
    text-align: center;
}

.czar-modal--rtl .czar-modal__articles {
    text-align: right;
}

.czar-modal--rtl .czar-modal__articles-link {
    flex-direction: row-reverse;
}

.czar-modal--rtl .czar-modal__year {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Mobile overrides for modal-scoped RTL */
@media screen and (max-width: 768px) {
    .czar-modal--rtl .czar-modal__close {
        left: var(--czar-space-sm);
        right: auto;
    }

    .czar-modal--rtl .czar-modal__left {
        border-left: none;
        border-bottom: 1px solid var(--czar-grey-light);
    }

    .czar-modal--rtl .czar-zoom-overlay__close {
        left: 16px;
        right: auto;
    }
}

/* ─── Search RTL ───────────────────────────────────────────────────────────── */
.czar-rtl .czar-search {
    flex-direction: row-reverse;
}

.czar-rtl .czar-search__input {
    text-align: right;
}

.czar-rtl .czar-search__dropdown {
    left: auto;
    right: 0;
}

.czar-rtl .czar-search__section-title {
    text-align: right;
}

.czar-rtl .czar-search__result {
    text-align: right;
}

@media screen and (max-width: 768px) {
    .czar-rtl .czar-search__dropdown {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ARABIC TYPOGRAPHY NORMALIZATION
   ──────────────────────────────────────────────────────────────────────────
   Permanent fix for Arabic glyph clipping (dots above/below letters being cut
   off on mobile). Three-part strategy:

   1. Relaxed line-height (1.5) replaces the Latin-calibrated 1.2 everywhere
      Arabic text is displayed. Arabic scripts need more vertical room for
      diacritical marks (ن ت ث ف ق ي ج) than Latin.

   2. Neutralize letter-spacing — Arabic is a connected script; wide tracking
      breaks joined letters and adds vertical rendering instability.

   3. Neutralize text-transform: uppercase — a no-op on Arabic glyphs, but
      some rendering engines add subtle vertical padding in uppercase context.

   Scoped to body.czar-rtl AND body.czar-lang-ar (codebase uses both classes)
   AND .czar-modal--rtl (for the in-modal language toggle). No effect on
   English typography — every selector is Arabic-scoped.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── All Headings (H1–H6) ─────────────────────────────────────────────────── */
body.czar-rtl h1, body.czar-rtl h2, body.czar-rtl h3,
body.czar-rtl h4, body.czar-rtl h5, body.czar-rtl h6,
body.czar-lang-ar h1, body.czar-lang-ar h2, body.czar-lang-ar h3,
body.czar-lang-ar h4, body.czar-lang-ar h5, body.czar-lang-ar h6 {
    line-height: var(--czar-leading-arabic-tight);
}

/* ─── Grid Card Titles (homepage fragrance cards) ──────────────────────────── */
body.czar-rtl .czar-card__title,
body.czar-lang-ar .czar-card__title {
    line-height: var(--czar-leading-arabic-tight);
    letter-spacing: 0;
    text-transform: none;
    padding-block: 2px;
}

/* ─── Page Titles & Content Headings (About, Contact, etc.) ────────────────── */
body.czar-rtl .czar-page__title,
body.czar-rtl .czar-page__content h2,
body.czar-rtl .czar-page__content h3,
body.czar-rtl .czar-page__content h4,
body.czar-lang-ar .czar-page__title,
body.czar-lang-ar .czar-page__content h2,
body.czar-lang-ar .czar-page__content h3,
body.czar-lang-ar .czar-page__content h4 {
    line-height: var(--czar-leading-arabic-tight);
    letter-spacing: 0;
    text-transform: none;
    padding-block-start: 2px;
}

/* ─── Single Fragrance & Perfumer Profile Titles ───────────────────────────── */
body.czar-rtl .czar-single-fragrance__title,
body.czar-rtl .czar-perfumer-profile__title,
body.czar-rtl .czar-perfumer-profile__fragrances-heading,
body.czar-lang-ar .czar-single-fragrance__title,
body.czar-lang-ar .czar-perfumer-profile__title,
body.czar-lang-ar .czar-perfumer-profile__fragrances-heading {
    line-height: var(--czar-leading-arabic-tight);
    letter-spacing: 0;
    text-transform: none;
    padding-block-start: 2px;
}

/* ─── Filter Bar, Nav Links, Search Input ──────────────────────────────────── */
body.czar-rtl .czar-filter__link,
body.czar-rtl .czar-header__nav-link,
body.czar-rtl .czar-header__submenu-link,
body.czar-rtl .czar-search__input,
body.czar-rtl .czar-search__input::placeholder,
body.czar-lang-ar .czar-filter__link,
body.czar-lang-ar .czar-header__nav-link,
body.czar-lang-ar .czar-header__submenu-link,
body.czar-lang-ar .czar-search__input,
body.czar-lang-ar .czar-search__input::placeholder {
    letter-spacing: 0;
    text-transform: none;
    line-height: var(--czar-leading-arabic-tight);
}

/* ─── Modal Title & Headings (body-level RTL) ──────────────────────────────── */
body.czar-rtl .czar-modal__title,
body.czar-rtl .czar-modal__accords-title,
body.czar-rtl .czar-pyramid__heading,
body.czar-lang-ar .czar-modal__title,
body.czar-lang-ar .czar-modal__accords-title,
body.czar-lang-ar .czar-pyramid__heading {
    line-height: var(--czar-leading-arabic-tight);
    letter-spacing: 0;
    text-transform: none;
}

/* ─── Modal-Scoped RTL (in-modal language toggle, independent of page lang) ── */
.czar-modal--rtl .czar-modal__title,
.czar-modal--rtl .czar-modal__accords-title,
.czar-modal--rtl .czar-pyramid__heading,
.czar-modal--rtl h1,
.czar-modal--rtl h2,
.czar-modal--rtl h3,
.czar-modal--rtl h4 {
    line-height: var(--czar-leading-arabic-tight);
    letter-spacing: 0;
    text-transform: none;
}

/* ─── Mobile: extra breathing room for tightest surfaces ───────────────────── */
@media screen and (max-width: 768px) {
    body.czar-rtl .czar-card__title,
    body.czar-lang-ar .czar-card__title,
    body.czar-rtl .czar-page__title,
    body.czar-lang-ar .czar-page__title,
    body.czar-rtl .czar-single-fragrance__title,
    body.czar-lang-ar .czar-single-fragrance__title,
    body.czar-rtl .czar-perfumer-profile__title,
    body.czar-lang-ar .czar-perfumer-profile__title {
        line-height: var(--czar-leading-arabic-normal);
    }
}