/* Shared guest-facing marketing header — styles viewslatte/partials/marketing-nav.latte,
   included by both home.latte and layout.latte (guest branch). Single source so the two
   don't drift into visually different headers again. Namespaced custom properties (--mnav-*)
   so this file has no dependency on tokens defined in home.css/lms-theme.css, whichever of
   those happen to also be loaded on a given page. */
:root {
  --mnav-ink-2: #56534E;
  --mnav-line: #E4E2DE;
  --mnav-teal-tint: #DDF4F1;
  --mnav-primary: var(--brand-primary, #1D857D);
  --mnav-radius: 6px;
  --mnav-surface: #FFFFFF;
  --mnav-shadow-lift: 0 16px 40px rgba(43,43,43,.12);
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--mnav-line);
}
.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand-lockup { display: flex; align-items: center; gap: .6rem; }
.brand-lockup img { height: 38px; }
.nav-actions { display: flex; align-items: stretch; gap: .7rem; margin-left: auto; }
.nav-actions .nav-cta-login { display: flex; align-items: center; }
.nav-actions .btn { height: 40px; padding: 0 1.1rem; font-size: .92rem; display: inline-flex; align-items: center; }
.nav-cta-login {
  color: var(--mnav-ink-2);
  text-decoration: none;
  font-weight: 500;
  font-size: .92rem;
}

/* Always-collapsed anchors dropdown (.nav-menu-dropdown) + locale-switcher
   dropdown — both reuse the same .nav-dropdown/.nav-dropdown-toggle/.nav-dropdown-menu
   component, just with different trigger label/icon and menu content. */
.nav-dropdown { position: relative; display: inline-block; }
.nav-actions .nav-dropdown { display: flex; }
.nav-actions .nav-dropdown-toggle { height: 100%; }
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--mnav-ink-2);
  font-weight: 500;
  font-size: .92rem;
  padding: .5rem .6rem;
  border-radius: var(--mnav-radius);
  white-space: nowrap;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle { background: var(--mnav-teal-tint); color: var(--mnav-primary); }
.nav-dropdown-toggle .nav-chevron { font-size: .7rem; opacity: .7; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0;
  padding-top: .4rem;
  background: var(--mnav-surface);
  border-radius: 8px;
  box-shadow: var(--mnav-shadow-lift);
  min-width: 160px;
  z-index: 1000;
  overflow: hidden;
}
.nav-menu-dropdown .nav-dropdown-menu { right: auto; left: 0; }
.nav-dropdown.open .nav-dropdown-menu { display: block; }
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  color: var(--mnav-ink-2);
  text-decoration: none;
  font-size: .9rem;
}
.nav-dropdown-menu a:hover { background: var(--mnav-teal-tint); }
.locale-link--active { color: var(--mnav-primary); font-weight: 600; }
.locale-spacer { width: 1rem; display: inline-block; flex-shrink: 0; }

/* Mobile: single 72px row has no room for logo + anchors-menu + login + CTA + locale.
   Wrap into two rows instead of hiding any of them. */
@media (max-width: 640px) {
  .nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: .7rem 1rem;
    gap: .5rem .7rem;
  }
  .brand-lockup img { height: 28px; }
  .nav-actions {
    flex-basis: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: .4rem;
  }
  .nav-actions .btn { height: 36px; padding: 0 .8rem; font-size: .85rem; }
  .nav-cta-login { font-size: .85rem; }
}