/* ── SHARED HEADER / NAVIGATION COMPONENT ─────────────────────────────────
   Single source of truth for the top bar + mobile drawer, used by every page
   (home, work-with-us, insights, all practice-area pages). Previously each
   page carried its own copy-pasted version of these rules, which had drifted
   out of sync (the actual bug behind "the top bar renders inconsistently on
   practice area pages"). Do not duplicate these rules into individual pages —
   edit here so every page stays identical.

   Depends on CSS custom properties already declared in each page's own
   :root block (--black, --gold, --gold-dark, --text, --text-light, --border,
   --bg, --bg-warm, --radius, --transition) — confirmed present/consistent
   across index.html and every services/*.html page.
*/

/* ── Skip-to-content link ──────────────────────────────────────────────────
   Injected by header.js as the very first focusable element on every page.
   Off-screen until it receives keyboard focus (Tab), then becomes visible —
   standard pattern so it never affects normal mouse/visual use of the page. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 10000;
  background: var(--black);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
[dir="rtl"] .skip-link { left: auto; right: 12px; }

/* ── MP+ logo ── */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
  flex-shrink: 0;
  direction: ltr; /* keep MP+ order fixed in RTL mode */
}
.logo-mark-mp {
  font-family: 'Cormorant Garamond', Georgia, serif;
  /* Subtly enlarged (36px -> 40px) per request — logo/firm name should read
     a little more prominently without a dramatic resize. */
  font-size: 40px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.03em;
  line-height: 1;
}
.logo-mark-plus {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px; /* was 20px */
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 2px;
  margin-left: 1px;
  display: inline-block;
  line-height: 1;
}
.logo-words {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.logo-firm-name {
  font-size: 12px; /* was 11px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
}
.logo-community-name {
  font-size: 10px; /* was 9.5px */
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  line-height: 1;
}

/* ── Top bar ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  /* Deliberately NOT centered with a max-width column like the page content
     below it. On wide screens a centered 1160px column left the language
     switcher and Login button floating well inside the viewport instead of
     pinned to its physical corner (unlike the client portal's edge-to-edge
     header, which is the reference behavior). The bar itself now always
     spans the full width, with padding as the only edge inset. */
  padding: 0 40px;
  display: flex;
  align-items: center;
  height: 72px; /* was 68px — a touch taller to comfortably fit the larger logo */
  gap: 32px;
}
.nav-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--gold-dark); }
.nav-links a.nav-active { color: var(--gold) !important; font-weight: 500; }

/* Login / Sign-in CTA — always visible in the top bar at every breakpoint
   (not moved into the hamburger drawer). It's the single most important
   action for returning clients/staff, so it stays permanently reachable
   rather than being buried in a menu — a deliberate choice, not an oversight. */
.nav-cta {
  background: var(--black);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-cta:hover { background: #1d4a46; }

/* ── Language switcher ── */
.lang-selector { position: relative; flex-shrink: 0; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Noto Serif', 'Noto Naskh Arabic', Georgia, serif;
}
.lang-btn:hover { color: var(--gold-dark); border-color: var(--gold); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0E2826;
  border: 1px solid rgba(195,161,93,0.28);
  border-radius: 10px;
  padding: 5px;
  min-width: 130px;
  z-index: 300;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 12px 32px rgba(14,40,38,0.35), 0 2px 8px rgba(14,40,38,0.2);
}
[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-menu.lang-menu-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px; text-align: left;
  font-size: 12.5px; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.65);
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer; transition: background 0.14s, color 0.14s;
  font-family: 'Noto Serif', 'Noto Naskh Arabic', Georgia, serif;
  white-space: nowrap;
}
[dir="rtl"] .lang-opt { text-align: right; }
.lang-opt:hover { background: rgba(195,161,93,0.1); color: rgba(255,255,255,0.9); }
.lang-opt.lang-opt-active { color: #C3A15D; font-weight: 500; }
.lang-opt-flag { font-size: 15px; line-height: 1; }

/* ── Hamburger button ── */
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; /* was 36px — meets the ~40-44px tap-target guideline */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger svg { color: var(--black); }
.nav-burger:hover { border-color: var(--gold); }

/* ── Mobile drawer ── */
.drawer-overlay {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.5); opacity: 0;
  transition: opacity 0.25s ease;
}
.drawer-overlay.open { display: block; opacity: 1; }
.nav-drawer {
  position: fixed; top: 0; bottom: 0; z-index: 9999;
  width: 280px; background: var(--bg); border-inline-end: 1px solid var(--border);
  transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; overflow-y: auto;
  box-shadow: 4px 0 24px rgba(14,40,38,0.12);
}
[dir="rtl"] .nav-drawer {
  inset-inline-start: auto; inset-inline-end: 0; right: 0; left: auto;
  transform: translateX(100%);
  border-inline-end: none; border-inline-start: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(14,40,38,0.12);
}
.nav-drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.drawer-close {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; color: var(--text-light);
  border-radius: var(--radius);
}
.drawer-close:hover { color: var(--black); background: var(--bg-warm); }
.drawer-links { padding: 12px 0; }
.drawer-links a {
  display: block; padding: 15px 24px; font-size: 15px; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--bg-warm);
  transition: color 0.15s, background 0.15s;
  min-height: 44px; /* tap-target guideline */
  display: flex; align-items: center;
}
.drawer-links a:hover { color: var(--gold-dark); background: var(--bg-warm); }
.drawer-links a.active { color: var(--gold-dark); font-weight: 500; }
/* Login CTA repeated at the bottom of the drawer for anyone who opens the
   menu first — the top-bar CTA remains the primary, always-visible path. */
.drawer-cta-wrap { padding: 16px 24px; margin-top: auto; border-top: 1px solid var(--border); }
.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--black); color: #fff; font-size: 14px; font-weight: 500;
  padding: 13px 20px; border-radius: var(--radius); text-decoration: none;
  min-height: 44px;
}
.drawer-cta:hover { background: #1d4a46; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .drawer-overlay { transition: none; }
}

/* ── Responsive breakpoints ──────────────────────────────────────────────
   Fixed bug: the hamburger previously only activated below 600px, so any
   viewport between ~600-960px (including the commonly-tested 768px tablet
   width) rendered the FULL desktop nav — every link, the language switcher,
   and the Login button all competing for space with no fallback, which is
   what actually caused the inconsistent/broken top bar on narrower screens.
   Raised the threshold so 768px (and anything narrower) reliably gets the
   collapsed hamburger layout, while 1024px+ stays the full desktop nav. */
@media (max-width: 900px) {
  .nav-inner { gap: 10px; padding: 0 20px; height: 64px; }
  .nav-links, .nav-divider { display: none; }
  /* Hamburger + Login grouped together at the leading corner (order puts them
     both ahead of the logo/lang-switcher, tie-broken by DOM order so burger
     renders first, Login right next to it) — logo and language switcher fill
     the remaining space toward the trailing edge. */
  /* flex `order` sorts along the logical start->end axis, which flexbox already
     reverses under dir="rtl" — the same order values below correctly place
     burger+cta at the physical LEFT in LTR and the physical RIGHT in RTL with
     no [dir="rtl"] override needed (verified empirically; an earlier attempt
     at explicit RTL overrides here had the sign backwards and put them on the
     wrong side). */
  .nav-burger { display: flex; order: -2; }
  .nav-cta { order: -1; padding: 9px 12px; font-size: 12.5px; gap: 5px; }
  .logo { order: 0; margin-inline-start: auto; }
  .lang-selector { order: 1; }
  .lang-selector .lang-btn { padding: 6px 10px; font-size: 11px; }
  /* Logo stays legible but doesn't crowd the burger/CTA/lang-switcher row */
  .logo-mark-mp { font-size: 30px; }
  .logo-mark-plus { font-size: 17px; }
  .logo-firm-name { font-size: 10px; }
  .logo-community-name { font-size: 8.5px; }
}
@media (max-width: 480px) {
  .nav-inner { gap: 8px; padding: 0 14px; }
  .nav-cta { padding: 9px 10px; font-size: 12px; gap: 4px; }
  .nav-cta svg { width: 12px; height: 12px; }
  /* The firm name is long enough ("ALMURAIT+PARTNERS") that at ~375px and
     below it was pushing the Login button past the edge of the viewport
     (flex-shrink:0 on .logo keeps it from shrinking on its own). Shrink the
     mark and cap+truncate the wordmark so the row always fits. */
  .logo-mark-mp { font-size: 26px; }
  .logo-mark-plus { font-size: 15px; }
  .logo-words { max-width: 96px; overflow: hidden; }
  .logo-firm-name, .logo-community-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}