/* Netábor — mobile menu (#nvMobileMenu, .pl-mm) styles.
 * Split out of tokens.css so pages with their own legacy layout (legal pages)
 * can load just the menu without the design system's global resets.
 * tokens.css @imports this file, so the ~38 pages on the design system are
 * unaffected. Brand colors carry literal fallbacks for the standalone case.
 */
/* ── Mobile menu ── */
.nv-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;                /* full-screen overlay — kryje i header (fix překryvu) */
  background: hsl(223 25% 17%);
  z-index: 60;             /* nad nv-header (z-index 50) */
  padding: 1.5rem;
  padding-top: 4.75rem;    /* místo pro fixed top bar (brand + zavírací X) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-direction: column;
  gap: 0.25rem;
}
.nv-mobile-menu.open { display: flex; }
/* Legal/legacy pages keep a visible fixed nav (z-index 200) — the menu has to
   cover it, otherwise the injected close X sits underneath. */
.nv-mobile-menu.above-legacy-nav { z-index: 250; }

/* Top bar uvnitř full-screen menu — brand vlevo + zavírací X vpravo (injektováno JS) */
.nv-menu-brand {
  position: fixed;
  top: 1.25rem;
  left: 1.5rem;
  z-index: 2;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #fff;
}
.nv-menu-close {
  position: fixed;
  top: 0.95rem;
  right: 1rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
}
.nv-menu-close:hover { background: rgba(255, 255, 255, 0.16); }
.nv-menu-close:focus-visible { outline: 2px solid #0D1B3E; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255,255,255,.9); }
.nv-mobile-menu a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  padding: 0.95rem 1rem;
  border-radius: 0.85rem;
  transition: background 0.2s, color 0.2s;
}
.nv-mobile-menu a:hover,
.nv-mobile-menu a.active {
  background: rgba(253, 207, 0, 0.15);
  color: var(--netabor-yellow, #FDCF00);
}

/* ── Mobile menu — unified hero pattern (.pl-mm), site-wide ──
   Selectors are scoped under .nv-mobile-menu so they win over the generic
   `.nv-mobile-menu a` rules above (same specificity would otherwise depend on
   source order). Colors use the shared --netabor-* tokens. */
.nv-mobile-menu.pl-mm { gap: 6px; }
.nv-mobile-menu .pl-mm-hero {
  display: block;
  background: var(--netabor-yellow, #FDCF00);
  color: #222936 !important;
  border-radius: 16px;
  padding: 16px 16px 14px;
  text-decoration: none;
  margin: 4px 0 10px;
}
.nv-mobile-menu .pl-mm-hero:hover { background: var(--netabor-yellow, #FDCF00); }
/* `.nv-mobile-menu a.active` (above) would otherwise repaint the hero card with
   a translucent yellow — restate the solid fill and keep only the ring. */
.nv-mobile-menu .pl-mm-hero.active {
  background: var(--netabor-yellow, #FDCF00);
  color: #222936 !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.pl-mm-hero-title { font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.pl-mm-hero-sub { font-size: 0.82rem; opacity: 0.8; margin-top: 4px; }
.pl-mm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pl-mm-chips span {
  background: rgba(34, 41, 54, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
}
.nv-mobile-menu .pl-mm-section {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 10px 4px 2px;
  padding: 0;
}
.nv-mobile-menu .pl-mm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.nv-mobile-menu .pl-mm-row:hover { background: rgba(255, 255, 255, 0.1); }
.nv-mobile-menu .pl-mm-row.active {
  background: rgba(253, 207, 0, 0.12);
  border-color: rgba(253, 207, 0, 0.3);
  color: var(--netabor-yellow, #FDCF00);
}
.pl-mm-ico { width: 28px; text-align: center; font-size: 1.1rem; flex: none; }