/* =====================
   m_navbar — PMO
   Desktop: fixed full-height sidebar (Figma 1:353, 238×968, pad-block 20)
   Mobile:  glass top bar (1:747, 121h) + glass fixed bottom bar (1:702, 37h)
   (Replaces the Embacy baseline navbar — PMO uses a static sidebar pattern.)
===================== */

/* ---- desktop sidebar ---- */
.m_navbar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--site--margin);
  width: var(--site--sidebar);
  /* 20 (page line at y20) + 16 gap to first/last item — the 1400px lines
     themselves live at page level (.page_line) */
  padding-block: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 100;
  background: var(--color--bg-main);
}

.m_navbar_top,
.m_navbar_bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.m_navbar_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.m_navbar_link,
.m_navbar_text {
  font-size: var(--font-size--label);
  line-height: var(--line-height--tight);
}

/* logo: box 124×43; the union path (letters + scribble) extends
   -8.87% left / +50.91% below the box — Figma Logos / PMO / Charcoal */
.m_navbar_logo {
  position: relative;
  width: 124px;
  height: 43px;
  color: var(--swatch--charcoal);
  flex-shrink: 0;
}
.m_navbar_logo svg {
  position: absolute;
  top: 0;
  left: -8.87%;
  width: 108.87%;
  height: 150.91%;
  overflow: visible;
  display: block;
}

/* contacts (bottom cluster): no underline animation — hover recolors to Blue */
.m_navbar_bottom .m_navbar_link {
  transition: color 0.2s ease;
}
.m_navbar_bottom .m_navbar_link:hover {
  color: var(--color--accent);
}

/* socials — icon 18×18, Blue, wrap 4/9 (Figma 1:954) */
.m_navbar_socials {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  color: var(--swatch--blue);
}
.m_navbar_social_icon {
  width: 18px;
  height: 18px;
  display: block;
}

.m_navbar_copyright {
  font-size: var(--font-size--label);
  line-height: var(--line-height--body); /* 130% — the one 16/1.3 block in the sidebar */
}

/* ---- mobile top bar (glass) ---- */
.m_navbar_mob {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0 var(--site--margin);
  background: var(--color--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass--blur));
  backdrop-filter: blur(var(--glass--blur));
}

.m_navbar_mob_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* mobile logo 115.35×40, same overflow geometry as desktop */
.m_navbar_mob .m_navbar_logo { width: 115.35px; height: 40px; }

.m_navbar_mob_links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--font-size--label-mob);
  line-height: var(--line-height--tight);
}

/* case selector row inside the mobile navbar (Figma 2084:2157) —
   scrolls horizontally, 15/110, gap 16 */
.m_navbar_mob_cases {
  display: none;
  align-items: center;
  gap: 16px;
  width: 100%;
  font-size: var(--font-size--label-mob);
  line-height: var(--line-height--tight);
  overflow-x: auto;
  scrollbar-width: none;
}
.m_navbar_mob_cases::-webkit-scrollbar { display: none; }
@media (max-width: 991px) {
  .m_navbar_mob_cases { display: flex; }
}
.m_navbar_mob_cases .m_case_list_item { white-space: nowrap; flex-shrink: 0; }

/* ---- mobile fixed bottom bar (glass) ---- */
.m_bottombar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0 var(--site--margin);
  background: var(--color--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass--blur));
  backdrop-filter: blur(var(--glass--blur));
}

.m_bottombar_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--font-size--label-mob);
  line-height: var(--line-height--tight);
}
.m_bottombar_row .m_navbar_link { white-space: nowrap; }

/* ---- mobile big footer (flow block at page end; Figma Navbar 1:700) ---- */
.m_footer_mob {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: var(--color--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass--blur));
  backdrop-filter: blur(var(--glass--blur));
  font-size: var(--font-size--label-mob);
  line-height: var(--line-height--tight);
}

.m_footer_mob_cols {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.m_footer_mob_col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
  min-width: 1px;
}

.m_footer_mob_col.is-right {
  flex: none;
  align-items: flex-end;
  justify-content: space-between;
}

.m_footer_mob_socials {
  display: flex;
  gap: 6px;
  padding-block: 4px;
  color: var(--swatch--blue);
}
.m_footer_mob_socials .m_navbar_social_icon { width: 22px; height: 22px; }

.m_footer_mob_legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* the small fixed bar hides while the big footer is on screen (JS toggle) */
.m_bottombar { transition: opacity 0.2s ease; }
.m_bottombar.is-hidden { opacity: 0; pointer-events: none; }

/* ---- breakpoints ---- */
@media (max-width: 991px) {
  .m_navbar { display: none; }
  .m_navbar_mob { display: flex; }
  .m_bottombar { display: flex; }
  .m_footer_mob { display: flex; }
}