/* Мобільне меню шапки .top (блог, статті, контакти, матеріали) — redesign-2026-10/menu, варіант B; px→rem як у решти редизайну. Одна навігація .nav: на широкому екрані — рядок посилань,
   до 1000px — панель за кнопкою «Меню» на весь екран (обрано B «Повний екран», 08.10; data-menu="full" на .top).
   Токени — ../blog/base.css. */
:root { --top-h: calc(4.5rem + 1px); } /* висота шапки з нижньою лінією (base.css .top) */
/* «Перейти до змісту» — перше посилання шапки на всіх сторінках з top.php (у блозі власних стилів для нього немає) */
.skip { position: fixed; left: 0.75rem; top: -3.75rem; z-index: 50; padding: 0.625rem 1rem; border-radius: 0.625rem; background: var(--ink); color: var(--bg); text-decoration: none; }
.skip:focus { top: 0.75rem; }

/* Широкий екран: список у рядок, додаткове в панелі сховане */
.nav__list { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.nav__list a { text-decoration: none; }
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--accent); }
.nav__n, .nav__extra, .menu-btn { display: none; }

@media (max-width: 1000px) {
  /* base.css ховає .nav — тут вона стає панеллю */
  .nav { display: flex; flex-direction: column; }
  .menu-btn { display: inline-flex; align-items: center; gap: 0.625rem; height: 2.75rem; padding: 0 0.875rem 0 1.125rem; border: 1.5px solid var(--line); border-radius: 62.4375rem; background: transparent; color: inherit; font: 600 0.9375rem/1 var(--display); cursor: pointer; }
  .menu-btn:hover { border-color: currentColor; }
  .burger { position: relative; width: 1.125rem; height: 0.75rem; }
  .burger i { position: absolute; left: 0; width: 100%; height: 0.125rem; border-radius: 1px; background: currentColor; transition: translate .3s, rotate .3s; }
  .burger i:first-child { top: 1px; } .burger i:last-child { bottom: 1px; }
  .menu-btn[aria-expanded="true"] .burger i:first-child { translate: 0 0.25rem; rotate: 45deg; }
  .menu-btn[aria-expanded="true"] .burger i:last-child { translate: 0 -0.25rem; rotate: -45deg; }
  .top .icon-btn { margin-left: auto; } .top .icon-btn ~ .btn { margin-left: 0; } /* тема · «Надіслати модель» · «Меню» — однією групою праворуч */
  .top .wrap { gap: 0.625rem; }
  html.menu-open .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); } /* blur робить шапку «рамкою» для fixed-панелі */
  html.menu-lock { overflow: hidden; }
  html.menu-open .msg-float { display: none; } /* плаваючі WhatsApp і Telegram (inc/seo-fixes.php) — у відкритому меню є свої посилання */
  .nav { position: fixed; z-index: 9; visibility: hidden; overscroll-behavior: contain; overflow-y: auto; }
  .nav.is-open { visibility: visible; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { display: flex; align-items: baseline; gap: 0.75rem; }
  .nav__extra { display: grid; gap: 0.75rem; }
  .top .nav__extra .btn { display: inline-flex; width: 100%; min-height: 3.25rem; margin: 0; font-size: 1rem; } /* base.css на ≤32.5rem ховає .top .btn — у меню кнопка лишається */
  .nav__contacts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .nav__contacts a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid var(--line); border-radius: 62.4375rem; text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
  .nav__contacts svg { width: 1.125rem; height: 1.125rem; color: var(--accent); }
  .nav__hours { margin: 0; font-size: 0.875rem; color: var(--muted); }

  /* ——— B «Повний екран»: контрастна панель на весь екран, великі пункти з номерами ——— */
  .top[data-menu="full"] .nav { inset: var(--top-h) 0 0; padding: 1.125rem var(--gutter) calc(1.375rem + env(safe-area-inset-bottom, 0px)); gap: 1.5rem; background: var(--ink); color: var(--bg);
    clip-path: inset(0 0 100% 0); transition: clip-path .45s cubic-bezier(.7, 0, .2, 1), visibility 0s .45s; }
  .top[data-menu="full"] .nav.is-open { clip-path: inset(0 0 0 0); transition-delay: 0s; }
  html.menu-open .top[data-menu="full"] { background: var(--ink); color: var(--bg); border-bottom-color: color-mix(in srgb, var(--bg) 16%, transparent); }
  html.menu-open .top[data-menu="full"] .icon-btn, html.menu-open .top[data-menu="full"] .menu-btn { border-color: color-mix(in srgb, var(--bg) 26%, transparent); }
  .top[data-menu="full"] .nav__list a { padding: 0.375rem 0; font: 900 clamp(2.125rem, 10.5vw, 3.625rem)/1.05 var(--display); letter-spacing: -.045em; opacity: 0; translate: 0 1.125rem; transition: opacity .3s, translate .45s cubic-bezier(.2, .8, .2, 1); }
  .top[data-menu="full"] .nav.is-open .nav__list a { opacity: 1; translate: 0 0; transition-delay: calc(.12s + var(--i) * .045s); }
  .top[data-menu="full"] .nav__list a[aria-current="page"] { color: var(--accent); }
  .top[data-menu="full"] .nav__n { display: inline; font: 600 0.8125rem/1 var(--mono); letter-spacing: 0; color: color-mix(in srgb, var(--bg) 55%, transparent); translate: 0 -.9em; }
  .top[data-menu="full"] .nav__extra { margin-top: auto; }
  .top[data-menu="full"] .nav__contacts a { border-color: color-mix(in srgb, var(--bg) 26%, transparent); }
  .top[data-menu="full"] .nav__hours { color: color-mix(in srgb, var(--bg) 60%, transparent); }

}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__list a, .burger i { transition: none !important; }
}