/* Bilingual menu labels: Arabic name (Title) + Hebrew gloss (description).
   Override stylesheet linked after style-1.css. Scoped to the desktop
   (rd-navbar-static) navbar; !important is used on layout-critical props
   so rules reliably beat the template/skin rules in style-1.css. */

.menu-ar {
    display: inline;
    font-family: 'Tajawal', system-ui, sans-serif;
}

.menu-he {
    display: inline;
    margin-inline-start: 8px;
    font-family: 'Heebo', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: #334155;
    direction: rtl;
}

/* ------------------------------------------------------------------
   Dropdown (menuViewMode = 1)
   Keep it a single-column dropdown. Stack Arabic over Hebrew so the
   bilingual pair is consistent, shrink the link type/padding so 11+
   items stay compact without feeling jam-packed, and cap the panel
   height so it can never overflow past the taskbar (scrolls if needed).
   ------------------------------------------------------------------ */
.rd-navbar-static .rd-navbar-dropdown {
    width: 280px !important;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

.rd-navbar-static .rd-dropdown-link {
    position: relative !important;
    padding-block: 13px !important;
    padding-inline-start: 40px !important;
    padding-inline-end: 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

/* Thin hairline between items for a more organized list. */
.rd-navbar-static .rd-dropdown-item + .rd-dropdown-item {
    border-top: 1px solid #f1f5f9 !important;
}

/* Leading chevron at the inline-start (right in RTL), pointing left (forward
   in RTL). Drawn with CSS borders so the RTL bidi algorithm can't mirror it
   the way it mirrors the ‹ character. Muted at rest, blue on hover. */
.rd-navbar-static .rd-dropdown-link::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 18px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border-style: solid !important;
    border-width: 0 2px 2px 0 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-50%) rotate(135deg) !important;
    transition: border-color .18s ease !important;
}

/* Modern hover/focus/open: soft blue-tinted wash + a 3px accent bar on the
   start edge (right in RTL) via inset shadow (no layout shift), accent text,
   and the chevron turns blue. */
.rd-navbar-static .rd-dropdown-link:hover,
.rd-navbar-static .rd-dropdown-item.focus .rd-dropdown-link,
.rd-navbar-static .rd-dropdown-item.opened .rd-dropdown-link {
    background: #f3f7fb !important;
    color: #57a4e0 !important;
    box-shadow: inset -3px 0 0 #57a4e0 !important;
}

.rd-navbar-static .rd-dropdown-link:hover::after,
.rd-navbar-static .rd-dropdown-item.focus .rd-dropdown-link::after,
.rd-navbar-static .rd-dropdown-item.opened .rd-dropdown-link::after {
    border-color: #57a4e0 !important;
}

.rd-navbar-static .rd-navbar-dropdown .menu-ar {
    display: block !important;
}

.rd-navbar-static .rd-navbar-dropdown .menu-he {
    display: block !important;
    margin-inline-start: 0 !important;
    margin-top: 2px !important;
}

/* On hover/focus/open, let the Hebrew inherit the link's accent color so
   both lines react together instead of the Hebrew staying a flat color. */
.rd-navbar-static .rd-dropdown-item:hover .menu-he,
.rd-navbar-static .rd-dropdown-item.focus .menu-he,
.rd-navbar-static .rd-dropdown-item.opened .menu-he {
    color: inherit !important;
}

/* ------------------------------------------------------------------
   Megamenu (menuViewMode = 2)
   Stacked full-width bands (one category on top of the next) instead of
   side-by-side columns. Each band: a brand-blue header with a start-edge
   accent bar, then its leaves as a responsive card grid (inline Arabic +
   Hebrew per card) so items are evenly sized and top-aligned. Headers
   stack Hebrew under the Arabic; cards show both languages inline.
   ------------------------------------------------------------------ */
.rd-navbar-static .rd-navbar-megamenu {
    display: block !important; /* was display: flex (side-by-side) */
    padding: 24px 28px !important;
    background: #ffffff !important;
}

/* Categories stack as clean, borderless sections on white — separated by
   whitespace and a single hairline, not by panels/cards. Matches the
   minimalist reference: white surface, hairline dividers, generous air. */
.rd-navbar-static .rd-navbar-megamenu > .col {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.rd-navbar-static .rd-navbar-megamenu > .col + .col {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 2px solid #e3e8ef !important;
}

/* Category header: a calm charcoal Arabic title (Tajawal) with the Hebrew
   gloss (Heebo) as a muted subtitle, seated on a soft hairline. Monochrome
   like the reference — color arrives only on hover. */
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: #111827 !important;
    padding: 0 0 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef1f5 !important;
    margin-bottom: 16px !important;
}

.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-title::before {
    display: none !important;
}

.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-title a {
    color: inherit !important;
}

/* Leaf list as a row-major grid. Column count is set per-category via a
   cols-N class emitted from the code-behind (cols-1/2/3), so a sparse
   category uses fewer columns instead of leaving near-empty ones. Dividers
   are per-item (border-inline-start) so they only run where content is. */
.rd-navbar-static .rd-megamenu-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 28px !important;
    columns: auto !important;          /* neutralize template multicol */
    column-rule: 0 !important;
    max-width: none !important;
    margin-top: 0 !important;
}

.rd-navbar-static .rd-megamenu-list.cols-1 {
    grid-template-columns: 1fr !important;
}
.rd-navbar-static .rd-megamenu-list.cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
.rd-navbar-static .rd-megamenu-list.cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Leaf items: no side dividers — columns separated by gap alone. Vertical
   padding on the link gives each item comfortable top/bottom breathing.
   min-width:0 lets grid tracks shrink below content min-content (so a long
   unbreakable token wraps instead of forcing the column wider than the panel). */
.rd-navbar-static .rd-megamenu-list li {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Leaf item: a calm stacked pair — Arabic (Tajawal, charcoal) over Hebrew
   gloss (Heebo, muted). Generous vertical padding gives the airy rhythm; no
   boxes, no borders — typography and whitespace lead, like the reference. */
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li > a {
    position: relative !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    padding: 10px 0 !important;
    padding-inline-start: 20px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: 0 !important;
    overflow-wrap: anywhere !important;
    color: #1f2937 !important;
    transition: color .16s ease, background-color .16s ease !important;
}

/* Keep the template's chevron off — clean text only */
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li > a::before {
    display: none !important;
}

/* Leading chevron at the inline-start (right in RTL), pointing left (forward).
   CSS-drawn so bidi can't mirror it. Hidden at rest to keep the clean look;
   fades in on hover to feel alive. */
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li > a::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 4px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-style: solid !important;
    border-width: 0 1.5px 1.5px 0 !important;
    border-color: #2f6fb0 !important;
    transform: translateY(-50%) rotate(135deg) !important;
    opacity: 0 !important;
    transition: opacity .16s ease !important;
}

/* Hover/focus/open: minimal — Arabic shifts to brand blue, a very faint cool
   wash marks the hit target, Hebrew follows, and the chevron fades in. */
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li > a:hover,
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li.focus > a,
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li.opened > a {
    background: #f5f8fc !important;
    color: #2f6fb0 !important;
}

.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li > a:hover::after,
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li.focus > a::after,
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li.opened > a::after {
    opacity: 1 !important;
}

/* Header: Arabic title (Tajawal) stacked over Hebrew gloss (Heebo, muted). */
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-title .menu-ar {
    display: block !important;
    font-family: 'Tajawal', system-ui, sans-serif !important;
}

.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-title .menu-he {
    display: block !important;
    font-family: 'Heebo', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    color: #9ca3af !important;
    margin-inline-start: 0 !important;
    margin-top: 4px !important;
}

/* Leaf items: stacked bilingual — Arabic (Tajawal, charcoal) over Hebrew
   (Heebo, muted), start-aligned (right in RTL). Consistent in every item. */
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list .menu-ar {
    display: block !important;
    font-family: 'Tajawal', system-ui, sans-serif !important;
}

.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list .menu-he {
    display: block !important;
    font-family: 'Heebo', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-inline-start: 0 !important;
    margin-top: 2px !important;
    border: 0 !important;
    padding: 0 !important;
}

/* On hover/focus/open, let the Hebrew inherit the accent so the whole item
   reacts together instead of the gloss staying a flat gray. */
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li > a:hover .menu-he,
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li.focus > a .menu-he,
.rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li.opened > a .menu-he {
    color: inherit !important;
}

/* ------------------------------------------------------------------
   Modern surface refinements (dropdown + megamenu)
   Rounded bottom corners, soft layered shadows, slimmer accent bar.
   The template casts shadow via a ::before blob; neutralize it and use a
   direct box-shadow for a cleaner, more modern elevation. No theme colors
   or structure changed beyond the surface.
   ------------------------------------------------------------------ */
.rd-navbar-static .rd-navbar-dropdown,
.rd-navbar-static .rd-navbar-megamenu {
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06) !important;
}

.rd-navbar-static .rd-navbar-megamenu {
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .07) !important;
}

/* Slim the dropdown's 7px bottom accent bar to 4px (keeps its theme color) */
.rd-navbar-static .rd-navbar-dropdown {
    border-bottom-width: 4px !important;
}

/* Neutralize the template's ::before shadow blobs (we use direct shadow now) */
.rd-navbar-static .rd-navbar-dropdown::before,
.rd-navbar-static .rd-navbar-megamenu::before {
    box-shadow: none !important;
}

/* ------------------------------------------------------------------
   Polish: viewport safety, scrollbars, keyboard focus, reduced motion.
   These are the "great UI standard" finishes — robust on short screens,
   accessible to keyboard users, and respectful of motion preferences.
   ------------------------------------------------------------------ */

/* Megamenu viewport safety: cap height so the panel can never reach the
   floor, even as more Hebrew is added. Scrolls vertically if needed.
   overflow-x:hidden stops the horizontal scrollbar that would otherwise
   appear from sub-pixel grid rounding or a long unbreakable word in a cell
   (setting overflow-y:auto alone makes overflow-x compute to auto). */
.rd-navbar-static .rd-navbar-megamenu {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Thin, subtle scrollbars for both panels (WebKit) */
.rd-navbar-static .rd-navbar-dropdown::-webkit-scrollbar,
.rd-navbar-static .rd-navbar-megamenu::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.rd-navbar-static .rd-navbar-dropdown::-webkit-scrollbar-track,
.rd-navbar-static .rd-navbar-megamenu::-webkit-scrollbar-track {
    background: transparent;
}
.rd-navbar-static .rd-navbar-dropdown::-webkit-scrollbar-thumb,
.rd-navbar-static .rd-navbar-megamenu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.rd-navbar-static .rd-navbar-dropdown::-webkit-scrollbar-thumb:hover,
.rd-navbar-static .rd-navbar-megamenu::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: content-box;
}
/* Firefox */
.rd-navbar-static .rd-navbar-dropdown,
.rd-navbar-static .rd-navbar-megamenu {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Keyboard focus: a visible accent outline for users who tab through the
   menu (mouse hover still uses the wash). outline-offset:-2px keeps it
   inside the item so it doesn't get clipped by the panel radius. */
.rd-navbar-static .rd-dropdown-link:focus-visible,
.rd-navbar-static .rd-megamenu-list li > a:focus-visible,
.rd-navbar-static .rd-megamenu-title a:focus-visible {
    outline: 2px solid #57a4e0 !important;
    outline-offset: -2px !important;
    border-radius: 6px !important;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rd-navbar-static .rd-dropdown-link,
    .rd-navbar-static .rd-navbar-megamenu .rd-megamenu-list li > a,
    .rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title a {
        transition: none !important;
    }
}

/* ------------------------------------------------------------------
   2-level megamenu (no grandchildren)
   When a megamenu has NO leaf lists anywhere, the parent titles ARE the
   clickable items. Detected via :not(:has(.rd-megamenu-list)) on the panel.
   Restyle the panel as a responsive grid of normal-sized items (instead of
   one giant 24px section header per wide row) so it reads as an organized,
   alive grid — matching the leaf style: stacked bilingual, leading chevron
   that fades in on hover, soft hover wash, no section dividers.
   ------------------------------------------------------------------ */
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 4px !important;
    padding: 24px 28px !important;
}

/* Bands become borderless grid cells — no section surfaces or dividers */
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) > .col,
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) > .col + .col {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
}

/* Header stops being a section title and becomes a normal item */
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: inherit !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title a {
    position: relative !important;
    display: block !important;
    font-family: 'Tajawal', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    padding: 10px 0 !important;
    padding-inline-start: 20px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: 0 !important;
    color: #1f2937 !important;
    transition: color .16s ease, background-color .16s ease !important;
}

.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title a::before {
    display: none !important;
}

/* Leading chevron (right in RTL), pointing left (forward), CSS-drawn so bidi
   can't mirror it. Hidden at rest, fades in on hover. */
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title a::after {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 4px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-style: solid !important;
    border-width: 0 1.5px 1.5px 0 !important;
    border-color: #2f6fb0 !important;
    transform: translateY(-50%) rotate(135deg) !important;
    opacity: 0 !important;
    transition: opacity .16s ease !important;
}

/* Hover/focus/open: soft cool wash, brand-blue text, chevron fades in */
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title a:hover,
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-item.focus .rd-megamenu-title a,
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-item.opened .rd-megamenu-title a {
    background: #f5f8fc !important;
    color: #2f6fb0 !important;
}

.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title a:hover::after,
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-item.focus .rd-megamenu-title a::after,
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-item.opened .rd-megamenu-title a::after {
    opacity: 1 !important;
}

/* Stacked bilingual inside flat items: Arabic (Tajawal) over Hebrew (Heebo) */
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title .menu-ar {
    display: block !important;
    font-family: 'Tajawal', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: inherit !important;
}

.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title .menu-he {
    display: block !important;
    font-family: 'Heebo', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    margin-inline-start: 0 !important;
    margin-top: 2px !important;
}

.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-title a:hover .menu-he,
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-item.focus .rd-megamenu-title .menu-he,
.rd-navbar-static .rd-navbar-megamenu:not(:has(.rd-megamenu-list)) .rd-megamenu-item.opened .rd-megamenu-title .menu-he {
    color: inherit !important;
}