/* CoreCave editorial — header module.
 * Wave 1 / T1.4 — RTL header layout repair only (no editorial typography or
 * color; those land in Wave 3). Loads after style.css, so we match the
 * existing `html[dir="rtl"] .header-*` specificity (0,1,1) to override
 * cleanly without `!important`. Selector intent documented inline.
 */

/* -----------------------------------------------------------------------
 * 1. Promo strip — protect natural full-bleed.
 *    `.page-top-bar.top-bar-02` is already 100% wide via normal block flow;
 *    we just defend against accidental max-width or float constraints that
 *    a later rule (or future plugin) could introduce. We do NOT translate
 *    it with calc(50% - 50vw) — that would shove it off-canvas because the
 *    element already spans the viewport.
 * --------------------------------------------------------------------- */
html[dir="rtl"] .page-top-bar,
html[dir="rtl"] .page-top-bar.top-bar-02 {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

html[dir="rtl"] .page-top-bar .top-bar-text {
  unicode-bidi: plaintext;
  text-align: center;
}

/* -----------------------------------------------------------------------
 * 2. Header wrap — flex container holding logo, category menu, and the
 *    search/menu/cart cluster. `gap: 18px` already set in style.css
 *    (line 525); we only add the alignment + min-width-0 guarantees the
 *    children need to behave.
 * --------------------------------------------------------------------- */
html[dir="rtl"] .header-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

/* -----------------------------------------------------------------------
 * 3. `.header-left` (logo) — was rendering at w=0 because its flex spec
 *    was `0 1 auto`, letting the wider `.header-right` sibling devour it
 *    when min-width: auto was still in effect. Lock it to its intrinsic
 *    width and forbid shrink.
 * --------------------------------------------------------------------- */
html[dir="rtl"] .header-wrap > .header-left {
  flex: 0 0 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
}

html[dir="rtl"] .header-left .branding-logo-wrap,
html[dir="rtl"] .header-left .branding {
  display: inline-flex;
  align-items: center;
}

html[dir="rtl"] .header-left .branding-logo {
  display: block;
  height: auto;
  max-height: 48px;
  width: auto;
}

/* -----------------------------------------------------------------------
 * 4. `.header-category-menu` — small fixed-width pill. Keep it from
 *    shrinking when the search field grows.
 * --------------------------------------------------------------------- */
html[dir="rtl"] .header-wrap > .header-category-menu {
  flex: 0 0 auto;
  min-width: max-content;
}

/* -----------------------------------------------------------------------
 * 5. `.header-right` — THE load-bearing fix.
 *    style.css already sets `min-width: 0` on `.header-right-inner-content`
 *    (the inner), but the direct flex child of `.header-wrap` is
 *    `.header-right` (the outer). Without `min-width: 0` on the outer,
 *    its intrinsic min-content (search field + 6-item menu + cart +
 *    register link) exceeds the parent's 1100px, overflowing past x=0 in
 *    RTL. Setting `min-width: 0` lets it shrink below intrinsic min-width;
 *    `max-width: 100%` ensures it never exceeds the wrap; the inner chain
 *    (already styled in style.css) shrinks its children proportionally.
 * --------------------------------------------------------------------- */
html[dir="rtl"] .header-wrap > .header-right {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

html[dir="rtl"] .header-right > .header-content-inner,
html[dir="rtl"] .header-right .header-right-inner {
  min-width: 0;
  width: 100%;
}

/* -----------------------------------------------------------------------
 * 6. Search field — the most-elastic child inside `.header-right-inner-content`.
 *    Allow it to shrink ahead of the menu / cart so cart never wraps.
 * --------------------------------------------------------------------- */
html[dir="rtl"] .header-search-form {
  flex: 1 1 220px;
  min-width: 0;
}

html[dir="rtl"] .header-search-form .search-field {
  width: 100%;
  min-width: 0;
}

html[dir="rtl"] .page-navigation,
html[dir="rtl"] .desktop-menu {
  min-width: 0;
}

html[dir="rtl"] .header-right .header-icon,
html[dir="rtl"] .header-right .mini-cart,
html[dir="rtl"] .header-right .header-cart {
  flex: 0 0 auto;
}

/* -----------------------------------------------------------------------
 * 7. Medium-desktop (1025–1199): trim the search basis so the menu still
 *    fits without truncation. The existing style.css block at this range
 *    already shrinks menu padding/font; we just pair it with a tighter
 *    search basis.
 * --------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1199px) {
  html[dir="rtl"] .header-search-form {
    flex-basis: 180px;
  }
}

/* -----------------------------------------------------------------------
 * 8. Below 1025px the theme switches to `.mobile-header-wrap`. Make
 *    absolutely sure the desktop wrap stays out of the way and the mobile
 *    bar has the same full-width / safe padding behavior. We do NOT
 *    restyle the mobile menu drawer here — that is theme territory.
 * --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html[dir="rtl"] .header-wrap {
    flex-wrap: wrap;
  }

  html[dir="rtl"] .mobile-header-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-inline: 16px;
    min-width: 0;
  }

  html[dir="rtl"] .mobile-header-wrap .branding-logo {
    max-height: 40px;
    width: auto;
  }
}

@media (max-width: 480px) {
  html[dir="rtl"] .mobile-header-wrap {
    padding-inline: 12px;
    gap: 10px;
  }
}

/* =====================================================================
 * Wave 4 — header polish (2026-05-16).
 * Live-DOM diagnostic at 1920 + 1440 viewports exposed three remaining
 * defects that Wave 1 missed. Patch is purely additive; specificity
 * matches the existing `html[dir="rtl"] .header-*` chain (0,1,1).
 * ===================================================================== */

/* 1. Promo strip — actual full-bleed.
 *    Wave 1 set `width: 100%` but `.page-top-bar` lives inside
 *    `.header-inner` (max-width: 1200px), so 100% caps at 1200px and
 *    leaves a white gap each side at ≥1280 viewports. We extend the
 *    background to viewport edges with the box-shadow + clip-path
 *    trick — content alignment is unchanged, only the navy fill grows.
 *    Live DOM confirmed `.header-inner { overflow: visible }`, so the
 *    shadow is not clipped by the parent. */
html[dir="rtl"] .page-top-bar,
html[dir="rtl"] .page-top-bar.top-bar-01,
html[dir="rtl"] .page-top-bar.top-bar-02 {
  position: relative;
  background-color: #031f42;
  box-shadow: 0 0 0 100vmax #031f42;
  clip-path: inset(0 -100vmax);
}

/* 2. Cart vs. menu — flex gap.
 *    Live probe: `.mini-cart` sat 18px from the navigation edge with no
 *    breathing room, so the cart "0" badge visually clipped into the
 *    last menu item. A modest gap on the flex parent restores rhythm
 *    for every child (search ↔ nav ↔ cart) in one rule. */
html[dir="rtl"] .header-right-inner-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 3. Search submit — sane size + inline-end pin.
 *    Default theme stamps a 60×60 circle absolutely positioned at the
 *    inline-start of the search field; in a 120px-wide field that means
 *    the button covers half the input and crashes through the
 *    placeholder. Shrink to 40×40, pin to inline-end with 6px inset,
 *    and pad the input on that side so text never slides under it. */
html[dir="rtl"] .header-search-form .search-form {
  position: relative;
}

html[dir="rtl"] .header-search-form .search-form .search-field {
  padding-inline-end: 52px;
  padding-inline-start: 16px;
}

html[dir="rtl"] .header-search-form .search-form .search-submit {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 6px;
  inset-inline-start: auto;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[dir="rtl"] .header-search-form .search-form .search-submit .search-btn-icon {
  position: static;
  inset: auto;
}

/* 4. Widen the header container at ≥1500px.
 *    The constrained box is `.page-header-inner.held` (id=page-header-inner)
 *    with its inner `.container` and `.header-wrap` — all three cap at
 *    1200px max-width by default. After demoting 3 menu items to the
 *    `حول المنصة` sub-menu the top-level has 8 items, fitting cleanly at
 *    a 1440px cap on wide viewports. Below 1500px the 1200px default
 *    still applies, preserving the theme's existing 1024–1499 tuning. */
@media (min-width: 1400px) {
  html[dir="rtl"] .page-header-inner,
  html[dir="rtl"] .page-header-inner > .container,
  html[dir="rtl"] .page-header-inner .header-wrap,
  html[dir="rtl"] .page-top-bar > .container {
    max-width: min(1440px, calc(100vw - 40px));
  }
}

/* 5. Center .page-header-inner — the widen rule (4) bumped max-width to
 *    1440 but block elements without `margin: auto` flush to inline-start
 *    in RTL = visual right. That left a 480px gap from viewport-left at
 *    1920. `margin-inline: auto` restores horizontal centering inside
 *    the viewport so cart + menu + logo distribute evenly across the
 *    available width. */
@media (min-width: 1400px) {
  html[dir="rtl"] .page-header-inner {
    inset-inline: 0;
    margin-inline: auto;
  }
}

/* 6. Search submit icon — center the FA glyph inside the 40×44 button.
 *    The theme rendered `.search-btn-icon` as a 16×16 span with
 *    line-height:50px and font-size:20px — the glyph overflowed the box
 *    and the box itself sat offset from the button's center. Reset to
 *    natural inline-block sized to font-size; the parent's flex
 *    `justify/align: center` handles the rest. */
html[dir="rtl"] .header-search-form .search-form .search-submit {
  line-height: 1;
  font-size: 16px;
}
html[dir="rtl"] .header-search-form .search-form .search-submit .search-btn-icon {
  display: inline-block;
  width: auto;
  height: auto;
  font-size: 16px;
  line-height: 1;
}

/* 7. Auth buttons cluster — `.header-user-buttons` (تسجيل دخول | تسجيل)
 *    appears in the same flex row as nav + cart + search on the
 *    logged-out homepage. With 4 children inside the row, the 14px gap
 *    plus the cluster's 256px intrinsic width crowded nav at viewports
 *    below 1500. Move it to the promo strip (already shows the same two
 *    links there) by hiding in the desktop header to break the
 *    collision. The links remain reachable via the promo strip. */
html[dir="rtl"] .header-right-inner-content > .header-user-buttons {
  display: none;
}

/* 8. Widen Elementor inner containers to match the page header.
 *    `.page-header-inner` widens to min(1440px, calc(100vw - 40px)) at
 *    ≥1400px viewports, but Elementor's `.elementor-container` and
 *    `.e-con-boxed > .e-con-inner` keep their 1140px default — so at
 *    wide viewports the page content sits inside a narrower box than
 *    the header above it, producing visible asymmetric padding the
 *    eye reads as "content pushed to one side". Match the same width
 *    rule so the column lines up. */
@media (min-width: 1400px) {
  html[dir="rtl"] .elementor-section > .elementor-container,
  html[dir="rtl"] section.elementor-section > .elementor-container,
  html[dir="rtl"] .e-con.e-con-boxed > .e-con-inner {
    max-width: min(1440px, calc(100vw - 40px));
    margin-inline: auto;
  }
}

/* 9. Search submit icon — neutralize parent-theme transform.
 *    Root cause: parent edumall/style-rtl.css ships
 *    `.header-search-form .search-btn-icon { transform: translate(50%, -50%); }`
 *    which was designed for the original `position: absolute; top: 50%;
 *    left: 50%;` centering scheme. Rule 3 above re-statics the icon and
 *    relies on the parent button's flex centering, but the inherited
 *    transform still nudges the glyph +8px x / -8px y from the button
 *    center. Override transform to none; parent flex centering then
 *    delivers exact geometric center. */
html[dir="rtl"] .header-search-form .search-form .search-submit .search-btn-icon {
  transform: none;
  width: auto;
  height: auto;
  margin: 0;
}