/*
 * RTL Stylesheet — Digital Keys Child
 * Loaded automatically by WordPress when site language is Arabic (RTL).
 * Overrides only the LTR-specific rules from style.css.
 *
 * TABLE OF CONTENTS
 * 1.  Body & Base
 * 2.  Typography
 * 3.  Eyebrow / Section Labels
 * 4.  Buttons
 * 5.  Layout Utilities
 * 6.  Elementor Widget Overrides
 * 7.  TranslatePress Language Switcher
 * 8.  Contact Form 7
 * 9.  Responsive — Mobile (max 767px)
 * 10. Mobile Nav Menu (#menu-sm) — RTL fixes
 */


/* ============================================================
   1. BODY & BASE
   ============================================================ */

body {
    font-family: var(--font-ar);
    direction:   rtl;
    text-align:  right;
}


/* ============================================================
   2. TYPOGRAPHY
   ============================================================ */

h1,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-xxl"],
.elementor-widget-heading h1 {
    font-family:    var(--font-ar);
    letter-spacing: 0;
}

h2,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-xl"],
.elementor-widget-heading h2 {
    font-family:    var(--font-ar);
    letter-spacing: 0;
}

h3,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-large"],
.elementor-widget-heading h3 {
    font-family: var(--font-ar);
}

h4,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-medium"],
.elementor-widget-heading h4 {
    font-family: var(--font-ar);
}

h5,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-small"],
.elementor-widget-heading h5 {
    font-family: var(--font-ar);
}

h6,
.elementor-widget-heading .elementor-heading-title[class*="elementor-size-xs"],
.elementor-widget-heading h6 {
    font-family:    var(--font-ar);
    letter-spacing: 0;
}

p {
    font-family: var(--font-ar);
}

.p-small,
.elementor-widget-text-editor.p-small p {
    font-family: var(--font-ar);
}

.text-caption {
    font-family: var(--font-ar);
}

strong, b {
    font-family: var(--font-ar);
}


/* ============================================================
   3. EYEBROW / SECTION LABELS
   ============================================================ */

.eyebrow,
.text-eyebrow,
h6.eyebrow,
.elementor-widget-heading h6.eyebrow,
.elementor-heading-title.eyebrow {
    font-family:    var(--font-ar);
    letter-spacing: 0;
    flex-direction: row-reverse;
}

.eyebrow .elementor-icon-list-text,
.elementor-widget-icon-list.eyebrow .elementor-icon-list-text {
    font-family:    var(--font-ar);
    letter-spacing: 0;
}


/* ============================================================
   4. BUTTONS
   ============================================================ */

.btn-primary,
.elementor-button.btn-primary,
.elementor-widget-button.btn-primary .elementor-button {
    font-family: var(--font-ar);
}

.btn-outline,
.elementor-button.btn-outline {
    font-family: var(--font-ar);
}

.elementor-widget-button .elementor-button {
    font-family: var(--font-ar);
}

/* Reverse icon+text order: icon moves to the right of text in RTL */
.elementor-widget-button .elementor-button-content-wrapper {
    flex-direction: row-reverse;
}

/* btn-stroke — glow is geometry-based, direction-agnostic.
   Only ensure the ::before pseudo-element isn't offset by RTL. */
.elementor-widget-button.btn-stroke .elementor-button::before {
    right: -1px;
    left:  -1px;
}

/* Flip the arrow icon to point left (←) in RTL.
   Elementor always outputs e-fas-arrow-right regardless of language. */
.elementor-widget-button .elementor-button-icon svg,
.elementor-widget-button .elementor-button-icon i {
    transform: scaleX(-1);
}

/* Same flip for custom btn-primary / btn-outline classes */
.btn-primary .elementor-button-icon svg,
.btn-primary .elementor-button-icon i,
.btn-outline .elementor-button-icon svg,
.btn-outline .elementor-button-icon i {
    transform: scaleX(-1);
}


/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */

.content-narrow {
    margin-right: auto;
    margin-left:  auto;
}


/* ============================================================
   6. ELEMENTOR WIDGET OVERRIDES
   ============================================================ */

.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-ar);
}

.elementor-widget-text-editor p {
    font-family: var(--font-ar);
}

.elementor-icon-list-item > .elementor-icon-list-text {
    font-family: var(--font-ar);
}

.elementor-nav-menu .elementor-item {
    font-family:    var(--font-ar);
    letter-spacing: 0;
}

.elementor-widget-button .elementor-button {
    font-family: var(--font-ar);
}

.elementor-counter-number-wrapper {
    font-family: var(--font-ar);
}

.elementor-counter-title {
    font-family: var(--font-ar);
}

/* Flip icon list item direction for RTL */
.elementor-icon-list-item {
    flex-direction: row-reverse;
}

/* Generic form inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea {
    font-family: var(--font-ar);
    direction:   rtl;
    text-align:  right;
}


/* ============================================================
   7. TRANSLATEPRESS LANGUAGE SWITCHER
   ============================================================ */

.trp-opposite-button .trp-language-item {
    font-family: var(--font-ar) !important;
}


/* ============================================================
   8. CONTACT FORM 7
   ============================================================ */

.wpcf7-form label {
    font-family: var(--font-ar);
    text-align:  right;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
    font-family: var(--font-ar);
    direction:   rtl;
    text-align:  right;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
    font-family: var(--font-ar);
    direction:   rtl;
    text-align:  right;
}

.wpcf7 textarea.wpcf7-textarea {
    font-family: var(--font-ar);
}

/* Custom select dropdown — Arabic font + RTL layout */
.dk-select__selected,
.dk-select__option {
    font-family: var(--font-ar);
}

/* Select — move caret to left side */
.wpcf7 select.wpcf7-select {
    font-family:         var(--font-ar);
    background-position: left 14px center;
    padding-right:       var(--space-4);
    padding-left:        40px;
}

.wpcf7 .wpcf7-list-item-label {
    font-family: var(--font-ar);
}

.wpcf7 input[type="file"] {
    font-family: var(--font-ar);
    direction:   rtl;
}

/* CF7 plugin mirrors this in its own style-rtl.css — we match it */
.wpcf7-not-valid-tip {
    font-family: var(--font-ar);
    direction:   rtl;
    text-align:  right;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
    right: 1em;
    left:  auto;
}

/* List item spacing flip (mirrors CF7 style-rtl.css) */
.wpcf7-list-item {
    margin: 0 1em 0 0;
}

.wpcf7 form .wpcf7-response-output {
    font-family: var(--font-ar);
    direction:   rtl;
    text-align:  right;
}

/* Spinner — flip to right side of submit button */
.wpcf7-spinner {
    margin: 0 var(--space-3) 0 0;
}

.wpcf7 input.wpcf7-submit {
    font-family: var(--font-ar);
}


/* ============================================================
   9. RESPONSIVE — MOBILE (max 767px)
   ============================================================ */

@media (max-width: 767px) {
    .wpcf7 input.wpcf7-submit {
        width: 100%;
    }
}


/* ============================================================
   FOOTER MENU — RTL
   ============================================================ */

#footer-menu .sub-menu {
    margin: var(--space-2) 0 0 0 !important;
}

#footer-menu .sub-menu .hfe-sub-menu-item {
    font-family: var(--font-ar);
    text-align:  right;
}


/* ============================================================
   10. MOBILE NAV MENU (#menu-sm) — RTL FIXES
   Scoped entirely to #menu-sm — desktop nav (#menu-l)
   is completely unaffected.

   Issues fixed:
     a. Hamburger toggle — moved from left to right
     b. Close × button  — moved from left to right
     c. Language switcher row — aligned right
   ============================================================ */

/* ── a. Hamburger toggle button — move to right side ──────── */

/* The HFE nav wrapper uses flex to position logo + toggle.
   row-reverse swaps them: logo moves left, toggle moves right */
#menu-sm .hfe-nav-menu {
    flex-direction: row-reverse;
}

/* The toggle button itself — reset any LTR margin/padding */
#menu-sm .hfe-nav-menu__toggle {
    margin-right: auto;
    margin-left:  0;
}

/* ── b. Close × button — move to top-right ────────────────── */

/* HFE renders the close icon inside the open panel header.
   It uses position:absolute with left:0 — override to right */
#menu-sm .hfe-nav-menu__toggle[aria-expanded="true"],
#menu-sm .hfe-nav-menu-icon,
#menu-sm .hfe-nav-menu__close {
    right: 0 !important;
    left:  auto !important;
}

/* ── c. Language switcher row — align right ───────────────── */

/* TranslatePress switcher inside the mobile menu panel */
#menu-sm .trp-shortcode-switcher__wrapper,
#menu-sm .trp-language-item,
#menu-sm .elementor-widget-shortcode {
    margin-right: 0;
    margin-left:  auto;
    text-align:   right;
}

/* HFE menu items row — ensure each item aligns right */
#menu-sm .hfe-nav-menu__layout-vertical li.menu-item {
    text-align: right;
}

/* Fix any flex rows inside the open panel that HFE
   defaults to LTR row direction */
#menu-sm .hfe-has-submenu-container {
    flex-direction: row-reverse;
    justify-content: flex-end;
}