/* Section row «Меню страницы» under the site header of a long landing.
   Figma «LidFly — Проекты · новая структура» → «20 · Шапка и меню сайта» (473:3003): V4 at the top (469:3031),
   V7 sticky on desktop (505:1636), V7m swipe row on the phone (505:1797), V7m-2 header back above it (509:2);
   link component «Landing / Local Nav Link» Default · Active (450:485).
   Markup: <nav class="lf-page-nav" aria-label="Меню страницы" data-page-nav> right after the shared header,
   every item a plain <a href="#section"> in the server HTML. /js/page-nav.js only adds the sticky shadow,
   the current section and the button look of the row action; without it the row still sticks and links. */

.lf-page-nav {
  --lpn-height: 52px;
  /* Height of the header bar the row sits under (site-header.css: 72 px desktop, 56 px below 1120 px). */
  --lpn-header: 72px;
  --lpn-shadow: 0 4px 16px color-mix(in srgb, var(--v2-night) 8%, transparent);
  position: sticky;
  top: 0;
  z-index: 990;
  height: var(--lpn-height);
  border-bottom: 1px solid var(--v2-grid);
  background: var(--v2-cream);
  color: var(--v2-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  transition: box-shadow 0.2s ease, transform 0.22s ease;
}
.lf-page-nav,
.lf-page-nav * { box-sizing: border-box; }
.lf-page-nav.is-stuck { box-shadow: var(--lpn-shadow); }

/* Same 120 px gutters at 1440 as the header bar. */
.lf-page-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, calc(50vw - 600px), 120px);
}
.lf-page-nav :where(a) { text-decoration: none; }
.lf-page-nav .lf-page-nav__title {
  flex: 0 0 auto;
  border-radius: 6px;
  color: var(--v2-ink);
  font-weight: 600;
  white-space: nowrap;
}
.lf-page-nav .lf-page-nav__title:hover { color: var(--color-forest); }

/* Links scroll sideways when they do not fit; the fade on the right says there is more (V7m). */
.lf-page-nav__list {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.lf-page-nav__list::-webkit-scrollbar { display: none; }
.lf-page-nav__list > li { flex: 0 0 auto; margin: 0; padding: 0; }
.lf-page-nav[data-more] .lf-page-nav__list {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

/* «Landing / Local Nav Link»: Default · Active */
.lf-page-nav .lf-page-nav__link {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--v2-ink-secondary);
  font-weight: 500;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.lf-page-nav .lf-page-nav__link:hover { background: var(--v2-sand); color: var(--v2-ink); }
.lf-page-nav .lf-page-nav__link.is-active { background: var(--v2-lime-soft); color: var(--color-forest); }

/* Row action: a text link at the top of the page (V4), Button / Landing Filled M once the row sticks (V7).
   page-nav.js adds the button classes, so the palette and size come from buttons.css / landing-buttons.css;
   margin: 0 cancels the 12 px top margin of .btn, which pushed the button onto the bottom border. */
.lf-page-nav .lf-page-nav__cta {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.lf-page-nav .lf-page-nav__cta:not(.btn) {
  border-radius: 6px;
  color: var(--color-forest);
  font-weight: 600;
}
.lf-page-nav .lf-page-nav__cta:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.lf-page-nav__arrow {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lf-page-nav__cta.btn .lf-page-nav__arrow { display: none; }

/* Keyboard focus: Forest 2 px, drawn inside the links so the scrolling list does not clip it. */
.lf-page-nav :is(a):focus { outline: none; }
.lf-page-nav :is(a):focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; }
.lf-page-nav .lf-page-nav__link:focus-visible { outline-offset: -2px; }

/* Every width (V7, V7m-2; owner decision 22.10.2026 — the desktop works like the phone): the header bar hides
   on scroll down and returns on scroll up (/js/mobile-nav.js), the row sticks right under it and moves up with
   it, so a scroll down leaves only the row on top. Without JavaScript the header stays in the page flow
   (desktop: below; phone: site-header-nojs.css) and the row sticks to the very top. */
.lf-header--page-nav[data-site-header-ready] + .lf-page-nav { top: var(--lpn-header); }
.lf-header--page-nav.is-hidden:not([data-menu-open]) + .lf-page-nav { transform: translateY(calc(-1 * var(--lpn-header))); }
@media (min-width: 1120px) {
  .lf-header.lf-header--page-nav:not([data-site-header-ready]) { position: relative; }
  .lf-header.lf-header--page-nav.is-hidden { transform: translateY(-100%); }
}
@media (max-width: 1119.98px) {
  .lf-page-nav { --lpn-header: 56px; }
  .lf-page-nav__inner { padding: 0 16px; }
}

/* Narrow windows: the title goes first, so all links and the action still fit (they need about 730 px). */
@media (max-width: 899.98px) {
  .lf-page-nav__title { display: none; }
}

/* Phone (V7m): a 48 px swipe row of links only; the main action moves to the page's bottom panel, which the
   page shows from the same width (vkontakte-landing-sections.css → .vg-sticky). */
@media (max-width: 729.98px) {
  .lf-page-nav { --lpn-height: 48px; }
  .lf-page-nav__inner { padding: 0; }
  .lf-page-nav .lf-page-nav__cta { display: none; }
  .lf-page-nav__list { gap: 4px; height: 100%; padding: 0 16px; scroll-padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-page-nav { transition: none; }
}