/* ══════════════════════════════════════════════════════════════════
   Sirati shared navbar — mega dropdown, mobile drawer, nav buttons.
   Single stylesheet for includes/navbar.php on every page/subdomain.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .mega-panel { display: none !important }
  .mega-overlay { display: none !important }
}

.mega-card { transition: width 300ms cubic-bezier(.4,0,.2,1) }
.mega-dropdown { opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; overflow: hidden; transition: opacity 250ms cubic-bezier(.4,0,.2,1), transform 250ms cubic-bezier(.4,0,.2,1), visibility 250ms, height 300ms cubic-bezier(.4,0,.2,1) }
.mega-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto }
.mega-panel { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(0); transition: none; will-change: transform, opacity }
.mega-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); z-index: 10; transition: opacity 300ms cubic-bezier(.4,0,.2,1), transform 300ms cubic-bezier(.4,0,.2,1) }
.mega-panel.is-leaving-left { opacity: 0; visibility: visible; pointer-events: none; transform: translateX(-60px); z-index: 5; transition: opacity 300ms cubic-bezier(.4,0,.2,1), transform 300ms cubic-bezier(.4,0,.2,1) }
.mega-panel.is-leaving-right { opacity: 0; visibility: visible; pointer-events: none; transform: translateX(60px); z-index: 5; transition: opacity 300ms cubic-bezier(.4,0,.2,1), transform 300ms cubic-bezier(.4,0,.2,1) }
.mega-pill { position: absolute; top: 0; left: 0; height: 100%; border-radius: .5rem; background-color: rgb(0 116 217 / .08); opacity: 0; pointer-events: none; z-index: 0; transition: transform 280ms cubic-bezier(.4,0,.2,1), width 280ms cubic-bezier(.4,0,.2,1), opacity 200ms ease; will-change: transform, width, opacity }
.mega-pill.is-visible { opacity: 1 }
.mega-trigger { transition: color 200ms ease }
.mega-trigger.is-active { color: #0074d9 }
.mega-trigger.is-active .mega-chevron { transform: rotate(180deg) }
.mega-overlay { opacity: 0; visibility: hidden; pointer-events: none; transition: all 300ms ease }
.mega-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto }

/* Mobile drawer */
#mobile-menu { transform: translateX(100%) !important; transition: transform 300ms cubic-bezier(.4,0,.2,1); direction: ltr; text-align: left }
#mobile-menu[data-rtl="true"] { transform: translateX(-100%) !important; direction: rtl; text-align: right }
#mobile-menu.drawer-open { transform: translateX(0) !important }
#mobile-menu[data-rtl="true"].drawer-open { transform: translateX(0) !important }
#mobile-overlay { opacity: 0; visibility: hidden; pointer-events: none; transition: all 300ms ease; z-index: 1001 }
#mobile-overlay.drawer-open { opacity: 1; visibility: visible; pointer-events: auto }
#mobile-menu { z-index: 1002; height: 100vh; height: -webkit-fill-available; height: 100dvh }
#mobile-menu-button { position: relative; z-index: 1003; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center }
#mobile-menu.drawer-open ~ #mega-nav #mobile-menu-button,
body:has(#mobile-menu.drawer-open) #mobile-menu-button { display: none !important }

.mobile-accordion { color: #1f2937 !important }
.mobile-accordion span { color: inherit !important }
.mobile-accordion i.mobile-chev { color: #9ca3af !important }
.mobile-accordion.is-open .mobile-chev { transform: rotate(90deg) }
#mobile-menu[data-rtl="true"] .mobile-submenu { direction: rtl; text-align: right }
#mobile-menu[data-rtl="true"] .mobile-submenu a { flex-direction: row !important }
.mobile-submenu { display: none }
.mobile-submenu.hidden { display: none }
.mobile-submenu:not(.hidden) { display: block; animation: slideDown 200ms ease-out }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: translateY(0) } }
#mobile-menu a, #mobile-menu button { color: #1f2937 }
#mobile-menu .mobile-accordion > span { display: flex; align-items: center; gap: .625rem }

/* RTL guard: site-wide rtl font overrides must not break Font Awesome glyphs */
html[dir=rtl] .fa, html[dir=rtl] .fas, html[dir=rtl] .far,
html[dir=rtl] .fa-solid, html[dir=rtl] .fa-regular,
[dir=rtl] .mega-item .fas, [dir=rtl] #mobile-menu .fas, [dir=rtl] .mega-trigger .fas {
  font-family: var(--fa-style-family, "Font Awesome 6 Free")
}
html[dir=rtl] .fab, html[dir=rtl] .fa-brands {
  font-family: "Font Awesome 6 Brands"
}

/* Nav buttons (shared with the landing page) */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.875rem; padding: 0 1.375rem; border-radius: .625rem; font-size: .9375rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease }
.sh-btn-sm { height: 2.25rem; padding: 0 .875rem; font-size: .875rem; border-radius: .5rem }
.sh-btn-primary { background: #0074d9; color: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / .12), inset 0 1px 0 rgb(255 255 255 / .14) }
.sh-btn-primary:hover { background: #0063ba; color: #fff }
.sh-btn-secondary { background: #fff; color: #151512; border: 1px solid #e3e2db; box-shadow: 0 1px 2px rgb(23 23 20 / .04) }
.sh-btn-secondary:hover { background: #f7f6f2; border-color: #d5d4cc }