/*
Theme Name:     PBN TT1
Theme URI:
Description:    Twentytwentyone child theme.
Author:         You
Author URI:
Template:       twentytwentyone
Version:        0.1.0
*/
/* контейнер пункта */
/* заголовок */
/* скрываем подменю по умолчанию */
/* скрываем подменю по умолчанию */
/* БЛОКИРУЕМ уезжание вправо — якорим к правому краю */
/* ========== общие переменные ========== */
/* Десктоп — оставь как было у тебя */
.menu-item-has-children { position: relative; }
.menu-item-has-children > .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: none;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 9999;
  white-space: nowrap;
  max-width: 90vw;
  overflow-x: auto;
  box-sizing: border-box;
}
.menu-item-has-children:hover > .sub-menu { display: block; }
.menu-item-has-children > .menu-label { cursor: pointer; padding: .5em 1em; display: inline-block; user-select: none; }
.sub-menu .menu-item a { display:block; padding:.6em 1em; text-decoration:none; }

/* Мобилки — панель с точным позиционированием JS */
@media (max-width: 481px) {
  .menu-item-has-children:hover > .sub-menu { display: none; }

  .menu-item-has-children > .sub-menu {
    position: fixed;      /* важно */
    display: none;        /* откроем JS-ом */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.2);
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    max-width: 92vw;      /* ширина ограничена экраном */
    max-height: 70vh;     /* чтобы не уползало вниз */
    z-index: 10001;
    padding: 8px 0 12px;
  }

  .cat-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    display: none; z-index: 10000;
  }
  .cat-open .cat-overlay { display: block; }
  .cat-open .menu-item-has-children > .sub-menu.is-open { display: block; }

  /* Анти-клик-зона над первым пунктом */
  .menu-item-has-children > .sub-menu::before { content:''; display:block; height:12px; }

  /* Кнопка закрытия */
  .menu-item-has-children > .sub-menu .cat-close {
    position: sticky; top: 0; margin: 0 8px 6px auto; padding: 10px 14px;
    background: transparent; border: 0; font-size: 16px; line-height: 1; cursor: pointer;
  }
}

/* убираем стрелочку/рамки у tt1 */
.sub-menu::before,
.sub-menu::after { content: none !important; display: none !important; }

/* мобилка: показываем категории «плоским» списком вместо выпадающего */
@media (max-width: 481px) {
  /* скрыть заголовок "Категории" */
  .menu-item-has-children > .menu-label { display: none !important; }

  /* сам список — всегда видим, как обычные пункты */
  .menu-item-has-children > .sub-menu {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    max-width: 100% !important;
    white-space: normal !important;   /* перенос длинных названий */
    overflow: visible !important;
    padding: 0; margin: 0;
  }

  /* вид элементов — как у верхнего уровня */
  .menu-item-has-children > .sub-menu > .menu-item a {
    display: block;
    padding: 0.6em 1em;
    text-decoration: none;
  }

  /* на мобилке ховер не нужен вовсе */
  .menu-item-has-children:hover > .sub-menu { display: block !important; }
}


/* === Мобильная версия (<=782px): фон под цвет сайта === */
@media (max-width: 481px) {
  .menu-item-has-children > .sub-menu {
    background: inherit !important;  /* унаследует фон сайта */
    border: none !important;
    box-shadow: none !important;
    padding: 0;
  }
}

/* контейнер заголовка и описания */
.pbn-home-header {
  margin: 0 auto 3rem;
  max-width: 960px;         /* чтобы текст не растягивался слишком широко */
  text-align: center;       /* центрируем всё */
  padding: 2rem 1rem;
}

/* заголовок */
.pbn-home__h1 {
  margin: 0 0 1rem;
  font-size: clamp(32px, 6vw, 64px); /* адаптив: от 32px до 64px */
  line-height: 1.2;
  font-weight: 700;
}

/* описание */
.pbn-home__lead {
  margin: 0 auto;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.6;
  color: #444;
  max-width: 960px;         /* чтобы текст не расползался на всю ширину экрана */
  text-align: justify;      /* выравнивание по обеим краям */
  text-align-last: center;  /* последняя строка центрируется красиво */
}