/* Shared navigation for the public website. Page content keeps its own styles. */
:root { --bm-header-offset: 104px; }
html { scroll-padding-top: var(--bm-header-offset); }
body { scroll-padding-top: var(--bm-header-offset); }
header.bm-header {
  box-sizing: border-box;
  line-height: 1.5;
  position: fixed;
  z-index: 2200;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, calc(100% - 40px));
  height: 72px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(13,13,21,.9);
  box-shadow: 0 12px 36px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: #f5f2fa;
  font-family: "Cairo", sans-serif;
  transition: background .2s, box-shadow .2s;
}
header.bm-header.scrolled { background: rgba(13,13,21,.97); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.bm-header *, .bm-menu-overlay * { box-sizing: border-box; }
.bm-header a, .bm-menu-overlay a { text-decoration: none; }
.bm-header button, .bm-menu-overlay button { font: inherit; cursor: pointer; }
.bm-header .bm-brand { display: flex; align-items: center; gap: 10px; flex: none; color: #f5f2fa; }
.bm-brand img { display: block; width: 42px; height: 42px; object-fit: contain; }
.bm-brand-copy { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.bm-brand-copy strong { font: 800 17px/1.2 "Inter", sans-serif; letter-spacing: -.4px; direction: ltr; color: #ede6fc; }
.bm-brand-copy small { font-size: 10px; font-weight: 600; color: #aaa5b7; white-space: nowrap; }
.bm-header .bm-links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bm-links a { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 12px; border-radius: 10px; color: #b8b4c4; font-size: 13px; font-weight: 700; white-space: nowrap; transition: color .2s, background .2s; }
.bm-links a:hover { color: #fff; background: rgba(255,255,255,.05); }
.bm-links a[aria-current] { color: #e4ceff; background: rgba(164,112,255,.12); }
.bm-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.bm-header .bm-language, .bm-header .bm-menu-toggle, .bm-menu-close {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: transparent; color: #e5e1ee;
  font: 700 12px/1 "Inter", "Cairo", sans-serif;
}
.bm-header .bm-language:hover, .bm-header .bm-menu-toggle:hover, .bm-menu-close:hover { background: rgba(255,255,255,.07); }
.bm-header .bm-contact { padding: 10px 2px; color: #c7c2d2; font-size: 12px; font-weight: 700; white-space: nowrap; }
.bm-header .bm-contact:hover { color: #fff; }
.bm-login { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 0 15px; border: 1px solid rgba(226,196,151,.28); border-radius: 11px; background: #e5c79c; color: #211b14; font-size: 12px; font-weight: 800; white-space: nowrap; transition: background .2s; }
.bm-login:hover { background: #f1d8b4; }
.bm-login svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.bm-header .bm-menu-toggle { display: none; }
.bm-menu-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; }
.bm-header .en-inline, .bm-menu-overlay .en-inline { display: none; }
.bm-header .ar-inline, .bm-menu-overlay .ar-inline { display: inline; }
body.lang-en .bm-header .en-inline, body.lang-en .bm-menu-overlay .en-inline { display: inline; }
body.lang-en .bm-header .ar-inline, body.lang-en .bm-menu-overlay .ar-inline { display: none; }
.bm-header :is(a,button):focus-visible, .bm-menu-overlay :is(a,button):focus-visible { outline: 2px solid #d8b6ff; outline-offset: 4px; }
.bm-menu-overlay[hidden] { display: none !important; }
.bm-menu-overlay { position: fixed; inset: 0; z-index: 2300; padding: 16px; display: flex; justify-content: flex-start; background: rgba(0,0,0,.64); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: "Cairo", sans-serif; color: #f5f2fa; line-height: 1.5; box-sizing: border-box; }
.bm-menu-panel { display: flex; flex-direction: column; width: min(380px,100%); max-height: 100%; padding: 22px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: #101017; box-shadow: 0 24px 80px rgba(0,0,0,.4); }
.bm-menu-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.bm-menu-heading strong { display: block; font-size: 16px; }
.bm-menu-heading small { display: block; margin-top: 5px; color: #aaa5b7; font-size: 11px; }
.bm-menu-close { flex: none; font-size: 26px !important; }
.bm-menu-links { display: grid; gap: 7px; list-style: none; margin: 20px 0; padding: 0; }
.bm-menu-links a { display: flex; align-items: center; min-height: 49px; padding: 10px 14px; border: 1px solid transparent; border-radius: 11px; color: #d5d0df; font-size: 15px; font-weight: 700; }
.bm-menu-links a:hover { background: rgba(255,255,255,.04); }
.bm-menu-links a[aria-current] { color: #e4ceff; border-color: rgba(164,112,255,.2); background: rgba(164,112,255,.1); }
.bm-menu-footer { display: grid; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.bm-menu-footer .bm-login { min-height: 48px; font-size: 14px; }
.bm-menu-footer small { color: #938c9f; font-size: 11px; text-align: center; }
body.bm-menu-open { overflow: hidden; }
body.bm-menu-open :is(#cookie-banner,.cookie-banner,.chat-fab-wrap,.chat-popup) { visibility: hidden !important; }
body.cv-modal-open .bm-header { display: none; }
body.page-employees { padding-top: var(--bm-header-offset); }
.page-employees .chat-panel { top: var(--bm-header-offset); height: calc(100vh - var(--bm-header-offset)); }
.page-employees .skip-link { z-index: 2400; }
@media (max-width: 1200px) { .bm-header .bm-contact { display: none; } }
@media (max-width: 1119px) {
  .bm-header .bm-desktop-nav { display: none; }
  .bm-header .bm-menu-toggle { display: inline-flex; }
}
@media (max-width: 1040px) {
  .page-employees .employee-nav { top: var(--bm-header-offset); }
  .page-employees .chat-panel { height: auto; }
}
@media (max-width: 680px) {
  :root { --bm-header-offset: 86px; }
  header.bm-header { top: 10px; width: calc(100% - 24px); height: 64px; padding: 0 12px; gap: 10px; border-radius: 16px; }
  .bm-brand img { width: 34px; height: 34px; }
  .bm-header .bm-brand { gap: 7px; }
  .bm-brand-copy strong { font-size: 14px; }
  .bm-brand-copy small { font-size: 8px; }
  .bm-actions { gap: 6px; }
  .bm-header .bm-login { display: none; }
  .bm-header .bm-language, .bm-header .bm-menu-toggle { width: 40px; height: 40px; }
  .bm-menu-overlay { padding: 10px; }
  .bm-menu-panel { padding: 18px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .bm-header *, .bm-menu-overlay * { transition: none !important; } }

/* Document and utility pages reserve space without changing their page layout. */
body.bm-nav-offset { padding-top: var(--bm-header-offset); }
.bm-document-scroll { width: 100%; overflow-x: auto; }
html[lang="en"] :is(.bm-header,.bm-menu-overlay) .en-inline { display: inline !important; }
html[lang="en"] :is(.bm-header,.bm-menu-overlay) .ar-inline { display: none !important; }
html[lang="ar"] :is(.bm-header,.bm-menu-overlay) .en-inline { display: none !important; }
html[lang="ar"] :is(.bm-header,.bm-menu-overlay) .ar-inline { display: inline !important; }
@media print {
  .bm-document-scroll { display: contents; }
  .bm-header, .bm-menu-overlay { display: none !important; }
  body.bm-nav-offset, body.page-employees { padding-top: 0 !important; }
  html, body { scroll-padding-top: 0; }
}