/* ============================================================
   GAARA EXPORT — Custom Site Header (code-built, all languages)
   One header for AR / EN / TR / ZH  ·  WPML menu per language
   Transparent on top · solid + sticky on scroll
   No shadow · no border · RTL-aware
============================================================ */

:root {
    --gh-dark:       #1a3a27;
    --gh-green:      #3a6e3a;
    --gh-cream:      #f5f0e6;
    --gh-white:      #ffffff;
    --gh-h:          92px;
    --gh-h-scrolled: 70px;
    --gh-transition: .3s ease;
    --gaara-font: "IBM Plex Sans Arabic", system-ui, -apple-system,
                  "Segoe UI", Tahoma, "Helvetica Neue", Arial,
                  "PingFang SC", "Noto Sans SC", "Microsoft YaHei",
                  sans-serif;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL SITE FONT — IBM Plex Sans Arabic (all languages)
════════════════════════════════════════════════════════════ */
body,
button, input, select, textarea,
.et_pb_module,
.et-l p, .et-l a, .et-l span, .et-l li, .et-l td, .et-l th,
.et-l label, .et-l blockquote,
.et_pb_text, .nav li a, .et-menu li a,
.gaara-site-header, .gaara-site-header a,
h1, h2, h3, h4, h5, h6,
.et_pb_section h1, .et_pb_section h2, .et_pb_section h3,
.et_pb_section h4, .et_pb_section h5, .et_pb_section h6 {
    font-family: var(--gaara-font) !important;
}
/* Icon fonts keep their own !important rules — never targeted here */

/* ════════════════════════════════════════════════════════════
   THE HEADER
════════════════════════════════════════════════════════════ */
/* ALWAYS fixed & pinned to the very top — works no matter where
   in the DOM it is printed (wp_body_open OR wp_footer). */
.gaara-site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    inset-inline: 0;
    width: 100%;
    z-index: 9990;          /* below the WP admin bar (#wpadminbar = 99999) */
    background: var(--gh-dark);
    box-shadow: none;
    border: 0;
    transition: background var(--gh-transition), backdrop-filter var(--gh-transition),
                transform .35s ease;
}
.gaara-site-header * { box-sizing: border-box; }

/* Hidden while scrolling down (header.js). The resting state stays
   transform:none on purpose — any transform on the header would make it the
   containing block for the fixed off-canvas menu inside it. */
body.gaara-hdr-hidden .gaara-site-header { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
    .gaara-site-header { transition: none; }
}

/* Keep the WordPress admin bar visible ABOVE the header */
body.admin-bar .gaara-site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar .gaara-site-header { top: 46px !important; }
}


.gaara-hdr-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: none;                 /* span wide like the hero, not capped */
    margin: 0 auto;
    /* align logo/menu with the hero content's left/right edge (~6%) */
    padding: 16px clamp(20px, 6%, 140px);
    transition: padding var(--gh-transition);
}
body.gaara-hdr-scrolled .gaara-hdr-inner { padding-top: 11px; padding-bottom: 11px; }

/* SOLID pages (Posts, Products, archives): dark header + push
   content down so the fixed header never covers it. */
body.gaara-hdr-solid-page #gaara-site-header,
body.gaara-hdr-solid-page .gaara-site-header { background: var(--gh-dark); }
body.gaara-hdr-solid-page { padding-top: var(--gh-h); }

/* OVERLAY pages (Home + Pages): transparent over the hero,
   turns solid dark once the visitor scrolls. NO content offset
   so the hero sits behind the header. */
body.gaara-hdr-overlay-page #gaara-site-header,
.gaara-site-header.gaara-hdr-overlay { background: transparent; }
body.gaara-hdr-overlay-page.gaara-hdr-scrolled #gaara-site-header,
body.gaara-hdr-scrolled .gaara-site-header.gaara-hdr-overlay {
    background: var(--gh-dark);
    backdrop-filter: saturate(140%) blur(2px);
}

/* ── Logo ─────────────────────────────────────────────────── */
.gaara-hdr-logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}
.gaara-hdr-logo {
    height: 82px;
    width: auto;
    display: block;
    transition: height var(--gh-transition);
}
body.gaara-hdr-scrolled .gaara-hdr-logo { height: 64px; }

/* ── Navigation menu ──────────────────────────────────────── */
.gaara-hdr-nav { margin-inline-start: 12px; }
.gaara-hdr-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px;
}
.gaara-hdr-menu li { position: relative; margin: 0; }
.gaara-hdr-menu a {
    color: var(--gh-white);
    text-decoration: none;
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: .01em;
    padding: 8px 0;
    display: inline-block;
    transition: opacity var(--gh-transition);
}
.gaara-hdr-menu a:hover,
.gaara-hdr-menu .current-menu-item > a,
.gaara-hdr-menu .current_page_item > a { opacity: .7; }

/* Sub-menus */
.gaara-hdr-menu .sub-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 210px;
    background: var(--gh-white);
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(26,58,39,.2);
    list-style: none;
    margin: 10px 0 0;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 50;
}
.gaara-hdr-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.gaara-hdr-menu .sub-menu a {
    color: var(--gh-dark);
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    font-weight: 600;
}
.gaara-hdr-menu .sub-menu a:hover { background: var(--gh-cream); opacity: 1; }

/* ── Extras: phone + language ─────────────────────────────── */
.gaara-hdr-extras {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-inline-start: auto;
}

.gaara-hdr-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gh-white);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
    transition: opacity var(--gh-transition);
}
.gaara-hdr-phone:hover { opacity: .8; color: var(--gh-white); }
.gaara-hdr-phone svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Language dropdown */
.gaara-lang { position: relative; }
.gaara-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    color: var(--gh-white);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    line-height: 1;
    transition: background var(--gh-transition);
}
.gaara-lang-toggle:hover { background: rgba(255,255,255,.22); }
.gaara-lang-toggle svg {
    width: 12px; height: 12px; flex-shrink: 0;
    transition: transform var(--gh-transition);
}
.gaara-lang.is-open .gaara-lang-toggle svg { transform: rotate(180deg); }

.gaara-lang-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 10px);
    min-width: 170px;
    background: var(--gh-white);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(26,58,39,.22);
    padding: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 100;
}
.gaara-lang.is-open .gaara-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.gaara-lang-menu li { margin: 0; }
.gaara-lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--gh-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: background .15s;
}
.gaara-lang-menu a:hover { background: var(--gh-cream); }
.gaara-lang-menu .gaara-lang-active a { color: var(--gh-green); font-weight: 800; }
.gaara-lang-menu .gaara-lang-active a::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gh-green);
    margin-inline-start: auto;
}

/* ── Burger (mobile) ──────────────────────────────────────── */
.gaara-hdr-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 9px;
    margin-inline-start: auto;
}
.gaara-hdr-burger span {
    display: block;
    height: 2.5px;
    width: 100%;
    background: var(--gh-white);
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}
body.gaara-nav-open .gaara-hdr-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.gaara-nav-open .gaara-hdr-burger span:nth-child(2) { opacity: 0; }
body.gaara-nav-open .gaara-hdr-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE  —  off-canvas menu under 1080px
════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .gaara-hdr-inner { padding: 14px 22px; gap: 14px; }
    body.gaara-hdr-scrolled .gaara-hdr-inner { padding: 10px 22px; }

    .gaara-hdr-burger { display: flex; order: 3; }
    .gaara-hdr-extras { order: 2; margin-inline-start: auto; gap: 14px; }
    .gaara-hdr-phone span { display: none; }

    .gaara-hdr-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        height: 100vh;
        width: min(82vw, 340px);
        background: var(--gh-dark);
        padding: 96px 30px 40px;
        transform: translateX(100%);
        transition: transform .35s ease;
        overflow-y: auto;
        margin: 0;
        visibility: hidden;
        box-shadow: -10px 0 40px rgba(0,0,0,.25);
    }
    body.gaara-nav-open .gaara-hdr-nav { transform: translateX(0); visibility: visible; }

    .gaara-hdr-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }
    .gaara-hdr-menu li { width: 100%; }
    .gaara-hdr-menu a {
        width: 100%;
        padding: 13px 4px;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .gaara-hdr-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        margin: 0;
        padding: 0 0 0 14px;
    }
    .gaara-hdr-menu .sub-menu a { color: rgba(255,255,255,.8); }
    .gaara-hdr-menu .sub-menu a:hover { background: rgba(255,255,255,.08); }

    /* off-canvas panel starts below the WP admin bar too */
    body.admin-bar .gaara-hdr-nav { top: 46px; height: calc(100vh - 46px); }

    /* dim page when menu open */
    body.gaara-nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 99980;
    }
    .gaara-site-header { z-index: 99990; }
}

@media (max-width: 600px) {
    .gaara-hdr-inner { padding: 12px 16px; }
    .gaara-hdr-logo { height: 60px; }
    body.gaara-hdr-scrolled .gaara-hdr-logo { height: 50px; }
    .gaara-lang-toggle { padding: 8px 12px; font-size: .82rem; }
    .gaara-hdr-extras { gap: 10px; }
}

/* ── Spacer for pages whose first section is NOT a hero ────── */
body.gaara-hdr-offset { padding-top: var(--gh-h); }

/* ════════════════════════════════════════════════════════════
   RTL homepage fix — WooCommerce/Divi shop grid + hero heading
   (Arabic pages only; English untouched)
════════════════════════════════════════════════════════════ */
.rtl .et_pb_shop ul.products,
[dir="rtl"] .et_pb_shop ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    direction: rtl !important;   /* fill from the RIGHT first (Arabic) */
    text-align: center !important;
}
.rtl .et_pb_shop ul.products li.product,
[dir="rtl"] .et_pb_shop ul.products li.product {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}
@media (max-width: 980px) {
    .rtl .et_pb_shop ul.products,
    [dir="rtl"] .et_pb_shop ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .rtl .et_pb_shop ul.products,
    [dir="rtl"] .et_pb_shop ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}

/* Hero typing-effect heading: shrink on RTL mobile so the long
   Arabic text + animated word fit without overflow/cut.
   Uses body.rtl to outrank Divi's module CSS (50px on mobile). */
@media (max-width: 980px) {
    body.rtl .dsm_typing_effect_0 h1.et_pb_module_header,
    body.rtl .dsm_typing_effect_0 h2.et_pb_module_header,
    body.rtl .dsm_typing_effect_0 h3.et_pb_module_header {
        font-size: 60px !important;
        line-height: 1.25 !important;
    }
}
@media (max-width: 767px) {
    body.rtl .dsm_typing_effect_0 h1.et_pb_module_header,
    body.rtl .dsm_typing_effect_0 h2.et_pb_module_header,
    body.rtl .dsm_typing_effect_0 h3.et_pb_module_header {
        font-size: 46px !important;
        line-height: 1.3 !important;
    }
    body.rtl .dsm-typing-effect,
    [dir="rtl"] .dsm-typing-effect { white-space: normal !important; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
    body.rtl .dsm_typing_effect_0 h1.et_pb_module_header,
    body.rtl .dsm_typing_effect_0 h2.et_pb_module_header,
    body.rtl .dsm_typing_effect_0 h3.et_pb_module_header {
        font-size: 40px !important;
    }
}

/* RTL homepage: value-prop captions + icons align RIGHT (not centered)
   on tablet/mobile — Arabic reads right-to-left. Scoped to home page. */
@media (max-width: 980px) {
    body.rtl.home .et_pb_text,
    body.rtl.home .et_pb_text h1,
    body.rtl.home .et_pb_text h2,
    body.rtl.home .et_pb_text h3,
    body.rtl.home .et_pb_text h4,
    body.rtl.home .et_pb_text h5,
    body.rtl.home .et_pb_text h6,
    body.rtl.home .et_pb_text p {
        text-align: right !important;
    }
    body.rtl.home .et_pb_image {
        text-align: right !important;
    }
    body.rtl.home .et_pb_image .et_pb_image_wrap {
        margin-right: 0 !important;
        margin-left: auto !important;
    }
}

/* RTL hero reorder (mobile): Title → Description → value-prop icons.
   Source order is Title → icons(text_0/1/2) → description(text_3);
   flex-order moves the description above the icons. */
@media (max-width: 980px) {
    body.rtl.home .et_pb_section_0 .et_pb_column,
    body.rtl.home .et_pb_section_0 .et_pb_column_inner {
        display: flex !important;
        flex-direction: column !important;
    }
    body.rtl.home .et_pb_section_0 .dsm_typing_effect_0 { order: 1 !important; }
    body.rtl.home .et_pb_section_0 .et_pb_text_3        { order: 2 !important; }
    body.rtl.home .et_pb_section_0 .et_pb_text_0        { order: 3 !important; }
    body.rtl.home .et_pb_section_0 .et_pb_text_1        { order: 4 !important; }
    body.rtl.home .et_pb_section_0 .et_pb_text_2        { order: 5 !important; }
    body.rtl.home .et_pb_section_0 .et_pb_image_0       { order: 6 !important; }
}

/* ── Own document skeleton (child header.php / footer.php) ────
   Divi's #page-container / #et-main-area wrappers are gone; the
   page body is now a plain <main id="gaara-main">. The header's
   height offset still lives on <body> (see .gaara-hdr-solid-page),
   so nothing here needs a top padding. */
.gaara-main { display: block; }

/* Hidden with the clip technique, NOT left:-9999px. An absolutely positioned
   element parked off-screen to the left adds ~10,000px of scrollable width on
   RTL pages (the inline axis is mirrored, so left overflow becomes scrollable).
   Clip takes the link out of layout entirely and overflows nothing. */
.gaara-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.gaara-skip-link:focus {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    z-index: 100000;
    background: #1a3a27;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
    outline: 3px solid #c9a227;
}