/* ==========================================================================
   Princeton-style главное меню — стейтовые правила (видимость/позиционирование).
   Визуальное оформление (цвета/шрифты/размеры/отступы) — на Tailwind (tw-).
   Открытие/закрытие оверлея по-прежнему обеспечивает .nav.collapse в main.css.
   ========================================================================== */

/* Жёсткая блокировка прокрутки страницы при открытом меню.
   .body-fixed (overflow:hidden) сам по себе не всегда останавливает скролл,
   поэтому дополнительно фиксируем высоту body высотой вьюпорта. */
body.body-fixed {
  overflow: hidden !important;
  height: 100vh !important;
  overscroll-behavior: none;
}

/* Явная высота контейнера меню — гарантирует разрешение высот в любой ситуации
   (чтобы flex-1 у .pm-main растягивался и нижний футер прижимался к низу). */
.pm {
  height: 100vh;
}

/* Подменю по умолчанию скрыто (инлайн-вариант для мобильных) */
.pm-sub {
  display: none;
}

.pm-arrow {
  transition: transform 0.3s ease;
}

/* Активный пункт — подсветка ссылки и поворот стрелки */
.pm-item.active > .pm-link {
  color: #d62e1f; /* #f8ce46 */
}

.pm-item.active .pm-arrow {
  color: #d62e1f; /* #f8ce46 */
  transform: rotate(90deg);
}

/* Подсветка пункта текущей страницы */
.pm-item.pm-current > .pm-link {
  color: #d62e1f; /* #f8ce46 */
}

/* ----- Мобильные / планшеты: аккордеон под пунктом ----- */
@media (max-width: 1023px) {
  .pm-item.active > .pm-sub {
    display: block;
  }

  .pm-item.active .pm-arrow {
    transform: rotate(90deg);
  }

  .pm-sub-item {
    margin-bottom: clamp(8px, 1.5vh, 16px);
    border-color: rgb(255 255 255 / 0.1);
    border-bottom-width: 1px;
  }

  /* Весь блок меню (пункты + нижняя строка) прокручивается как единое целое.
     Нижний отступ с учётом safe-area, чтобы низ не прятался за панелью браузера
     (iPhone 14 и т.п.). */
  .pm {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Скрываем полосу прокрутки в мобильном меню (WebKit: Safari/Chrome) */
  .pm::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

/* ----- Десктоп: правая панель ----- */
@media (min-width: 1024px) {
  /* Инлайн-подменю на десктопе не показываем — контент переносит JS в .pm-panel */
  .pm-sub {
    display: none !important;
  }

  .pm-item.active .pm-arrow {
    transform: rotate(0deg);
  }

  /* Плавное появление контента правой панели */
  .pm-panel > * {
    animation: pmPanelFade 0.3s ease;
  }

  /* Пропорциональное масштабирование по высоте экрана:
     на низких десктопных вьюпортах меню уменьшается и влезает без скролла.
     min в clamp у .pm сверху не меньше высоты шапки, чтобы пункты её не перекрывали. */
  .pm {
    padding-top: clamp(84px, 11vh, 120px);
    padding-bottom: clamp(16px, 3vh, 40px);
  }

  /* Больше воздуха между пунктами основного меню первого уровня */
  .pm-link {
    font-size: clamp(20px, 3.2vh, 34px);
    padding-top: clamp(10px, 2vh, 26px);
    padding-bottom: clamp(10px, 2vh, 26px);
  }

  .pm-sub-item {
    margin-bottom: clamp(8px, 1.5vh, 16px);
    border-color: rgb(255 255 255 / 0.1);
    border-bottom-width: 1px;
  }

  .pm-sub-link {
    font-size: clamp(20px, 3.2vh, 34px);
    padding-top: clamp(10px, 2vh, 26px);
    padding-bottom: clamp(10px, 2vh, 26px);
    font-weight: 300;
    line-height: 1.25;
    /* font-size: clamp(15px, 2vh, 19px);
    padding-top: clamp(3px, 0.5vh, 6px);
    padding-bottom: clamp(3px, 0.5vh, 6px); */
  }

  .pm-sub-sub {
    margin-top: clamp(4px, 0.8vh, 8px);
  }

  .pm-sub-sub-item > a {
    font-size: clamp(16px, 1.45vh, 14px);
    padding-top: clamp(1px, 0.25vh, 2px);
    padding-bottom: clamp(1px, 0.25vh, 2px);
  }

  /* Футер меню прижат к нижнему краю */
  .pm-bottom {
    margin-top: auto;
    padding-top: clamp(10px, 1.8vh, 20px);
  }

  .pm-bottom-link {
    font-size: clamp(10px, 1.2vh, 10px); /* 12px 1.6vh 15px */
  }
}

@keyframes pmPanelFade {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Скроллбары внутренних областей делаем ненавязчивыми */
.pm-list::-webkit-scrollbar,
.pm-panel::-webkit-scrollbar {
  width: 6px;
}

.pm-list::-webkit-scrollbar-thumb,
.pm-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
}