/* ══════════════════════════════════════════════════════════════════════════
   NEW — дополнения к /static/style.css. Существующие правила не меняются,
   новые блоки собраны из тех же токенов, радиусов и размеров шрифтов.
   Каждый этап редизайна добавляет сюда только то, что использует —
   остальные правила из docs/redesign/code/new.css переносятся по мере
   того, как соответствующие этапы их задействуют.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Кнопки меню стали ссылками <a> — внешний вид прежний (этап 2, H1/H5) ── */
a.nav-btn, a.mobile-menu-item { display: inline-flex; align-items: center; text-decoration: none; color: var(--tx); }
a.nav-btn:hover, a.mobile-menu-item:hover { color: var(--tx); }
a.mobile-menu-item { display: block; }
a.bug-btn { text-decoration: none; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ── Меню «Города» (этап 2, H2/H3) ───────────────────────────────────────── */
.nav-dd { position: relative; }
.nav-dd .nav-btn { gap: 6px; }
.nav-dd__chev { transition: transform .15s ease; }
.nav-dd.open .nav-dd__chev { transform: rotate(180deg); }
.nav-dd__menu { position: absolute; top: 100%; left: 0; padding-top: 8px; min-width: 240px; display: none; z-index: 35; }
.nav-dd.open .nav-dd__menu { display: block; }
.nav-dd__list {
  border: 1px solid var(--bd); border-radius: 14px; background: var(--card); padding: 6px;
  box-shadow: 0 12px 28px rgba(19,24,41,.12); display: flex; flex-direction: column; gap: 2px;
}
.nav-dd__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--tx);
}
.nav-dd__item:hover, .nav-dd__item:focus-visible, .nav-dd__item.active { background: var(--acs); color: var(--tx); }

/* Мобильное меню: раскрывающийся список городов */
.mobile-menu-item--toggle { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-sub { display: none; flex-direction: column; gap: 6px; padding-left: 12px; }
.mobile-menu-sub.open { display: flex; }
.mobile-menu-sub a { font-size: 16px; font-weight: 600; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bd); background: var(--card); color: var(--tx); }
.mobile-menu-sub a.active { background: var(--acs); border-color: var(--ac); }

/* ── Подвал: структура сайта (этап 2, H6) ─────────────────────────────────
   Компактная версия: один ряд (лого+тег-лайн слева, ссылки в строку справа)
   вместо трёх колонок со списками в столбик — то же содержимое, в разы
   меньше высоты. */
.site-footer { background: var(--card); border-top: 1px solid var(--bd); }
.site-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 16px 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
}
.site-footer__brand .logo svg { width: 18px; height: 18px; }
.site-footer__brand .logo-text { font-size: 16px; }
.site-footer__brand p { display: none; } /* tagline dropped — the header/hero already say it */
.site-footer__title { display: none; } /* "ГОРОДА"/"СЕРВИС" labels dropped — links are self-explanatory in a single row */
.site-footer__col { display: flex; align-items: center; }
.site-footer__links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
.site-footer__links a { font-size: 13px; color: var(--mu); }
.site-footer__links a:hover { color: var(--ac); }
.site-footer__bottom { max-width: 1120px; margin: 0 auto; padding: 8px 0 10px; border-top: 1px solid var(--bd); font-size: 12px; color: var(--mu); }

@media (max-width: 720px) {
  .site-footer__inner { padding: 16px; gap: 10px 20px; }
  .site-footer__brand { flex: 1 1 100%; }
  /* padding-bottom used to reserve space for .float-cta (removed) — now just
     enough for the safe-area home-indicator strip on modern phones */
  .site-footer__bottom { margin: 0 16px; padding: 14px 0 calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ── 404 (этап 1, S3) ───────────────────────────────────────────────────── */
.notfound-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Главная как одна страница из секций (этап 3, M1) ────────────────────── */
.home-section { display: flex; flex-direction: column; gap: 64px; scroll-margin-top: 96px; }
#search { scroll-margin-top: 96px; }

/* Заголовки, ставшие h2, чтобы на странице остался ровно один h1 (M7/M10) */
.about-hero__text h2 { font-size: 48px; line-height: 1.08; font-weight: 800; letter-spacing: -.025em; }
.contact-header h2 { font-size: 48px; line-height: 1.08; font-weight: 800; letter-spacing: -.025em; }

/* Кнопки, ставшие ссылками <a> — внешний вид прежний (M4/M5/M6/M7) */
a.route-card__btn, a.cta-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }
a.route-card__btn:hover, a.cta-btn:hover { color: #fff; }

/* ── Карточки городов на главной, на базе .route-card (этап 3, M6) ───────── */
.city-cards { display: flex; gap: 20px; align-items: stretch; transition: transform .5s ease; }
.city-cards .route-card { flex: 0 0 calc((100% - 40px) / 3); width: auto; }
.city-card__photo { height: 150px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bd); margin-bottom: 4px; }
.city-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.city-card__actions { margin-top: auto; }
.city-card__actions .route-card__btn { margin-top: 0; }

/* ── Стрелки каруселей «Готовые маршруты», «Города», «Отзывы» (этап 3, M12) */
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.carousel-arrow {
  width: 40px; height: 40px; flex: none; border-radius: 999px; border: 1px solid var(--bd);
  background: var(--card); color: var(--tx); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.carousel-arrow:hover:not(:disabled) { border-color: var(--ac); color: var(--ac); }
.carousel-arrow:disabled { opacity: .35; cursor: not-allowed; }
/* «Готовые маршруты» has one dot per real route (12) — on narrow screens
   that's wider than the viewport. .carousel-dots is itself `display:flex`
   with fixed-width children, so its flex-item default min-width is its own
   content size, not 0 — without min-width:0 it refuses to shrink and forces
   .carousel-nav (then every ancestor up to <body>) to overflow instead,
   which is what pushed both arrows off-screen. overflow-x:auto lets it
   scroll internally if it still doesn't fit rather than overflow the page. */
.carousel-dots { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.carousel-dots::-webkit-scrollbar { display: none; }

@media (max-width: 720px) {
  .home-section { gap: 28px; }
  .about-hero__text h2, .contact-header h2 { font-size: 26px; line-height: 1.15; }
  a.cta-btn { display: inline-flex; }
  .city-cards { gap: 12px; }
  .city-cards .route-card { flex: 0 0 100%; }
  .city-card__photo { height: 120px; }
  .carousel-arrow { width: 36px; height: 36px; }
}

/* ── Страница города (этап 5, C1–C5) — хлебные крошки, генератор (#gen),
   сетки «Достопримечательности»/«Как провести время», плашка и FAQ; все
   классы ниже, кроме перечисленных, уже существуют в style.css и переиспо-
   льзуются как есть (.overview-top, .photo-frame, .city-desc-col,
   .desc-toggle, .day-summary-*, .feature-card, .section-block) ────────── */
.crumbs { font-size: 14px; color: var(--mu); margin-bottom: -40px; }
.crumbs a { color: var(--mu); }
.crumbs a:hover { color: var(--ac); }

a.day-summary-card { text-decoration: none; }
a.day-summary-card:hover { border-color: var(--ac); color: var(--tx); }

#gen { scroll-margin-top: 96px; }

.sights-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.sight-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.tips-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

.cta-band {
  border: 1px solid var(--ac); border-radius: 20px; background: var(--acs); padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cta-band p { font-size: 16px; color: var(--mu); margin-top: 6px; }
.cta-band .cta-btn { margin-top: 0; }

.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--bd); border-radius: 16px; background: var(--card); padding: 18px 20px; }
.faq-item summary { font-size: 17px; font-weight: 700; cursor: pointer; }
.faq-item p { font-size: 15px; line-height: 1.55; color: var(--mu); margin-top: 8px; }
.other-cities { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 720px) {
  /* style.css hides .city-desc-col h1 on mobile — that rule is for the
     generated route overview, which has no H1 of its own elsewhere on the
     page; a city page's H1 is its only one (C1 rule), so show it again,
     scoped to .city-page so the route overview is unaffected. */
  .city-page .city-desc-col h1 { display: block; font-size: 26px; line-height: 1.15; }
  .crumbs { margin-bottom: -16px; font-size: 13px; }
  .sights-grid, .tips-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 18px; }
  .cta-band h2 { font-size: 20px; }
  .cta-band .cta-btn { display: inline-flex; width: 100%; justify-content: center; }
}

/* ── Кнопка «развернуть карту на весь экран» ──────────────────────────────
   Использует Fullscreen API на .map-card__frame-wrap (не на #ymap напрямую —
   тогда пропадала бы рамка/фон-заглушка); JS дергает ymap.container.
   fitToViewport() по fullscreenchange, т.к. Яндекс.Карты не следят за
   изменением размера контейнера сами. */
.map-fullscreen-btn {
  /* left, not right — Yandex Maps' own zoomControl sits top-right by default */
  position: absolute; top: 12px; left: 12px; z-index: 10;
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--bd);
  background: var(--card); color: var(--tx); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(19,24,41,.12);
}
.map-fullscreen-btn:hover { border-color: var(--ac); color: var(--ac); }
.map-fullscreen-btn .icon-collapse { display: none; }
.map-fullscreen-btn.is-fullscreen .icon-expand { display: none; }
.map-fullscreen-btn.is-fullscreen .icon-collapse { display: block; }

.map-card__frame-wrap:fullscreen { height: 100vh; border-radius: 0; }
.map-card__frame-wrap:-webkit-full-screen { height: 100vh; border-radius: 0; }
.map-card__frame-wrap:fullscreen .map-fullscreen-btn,
.map-card__frame-wrap:-webkit-full-screen .map-fullscreen-btn { top: 16px; left: 16px; }

/* iPhone Safari has no Fullscreen API for a plain element (only <video> gets
   one) — app.js feature-detects that (document.fullscreenEnabled) and falls
   back to this fixed-position overlay instead of :fullscreen, toggled by a
   plain class rather than the browser. fake-fullscreen-lock on <body>
   stands in for what real fullscreen gives for free: without it the page
   behind the "fullscreen" map would still scroll. */
.map-card__frame-wrap.map-fake-fullscreen {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1000; border-radius: 0;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.map-card__frame-wrap.map-fake-fullscreen .map-fullscreen-btn {
  top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px;
}
body.fake-fullscreen-lock { overflow: hidden; }

/* ── Экран маршрута (этап 6, A4/A5) ───────────────────────────────────────
   A4: cityDescColHtml()'s heading is now <h2 class="city-desc-title">, not
   <h1> — a route can be shown while a city page's own real <h1> also exists
   in the DOM, so only that one should count as the page's H1. Same look as
   style.css's ".city-desc-col h1" rule, which no longer matches this tag. */
.city-desc-col h2.city-desc-title { font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 720px) {
  .city-desc-col h2.city-desc-title { display: none; }
}