/* theme-extra.css — современный слой поверх qnima:
   1) CSS-only выпадающее меню (вместо jQuery ddsmoothmenu);
   2) адаптив (старый сайт не был адаптивным — responsive-layout.css был отключён);
   3) мелкие правки под новые компоненты.
   Грузится последним, поэтому переопределяет style.css. */

/* ---- CSS-only выпадающее подменю ---- */
#access .menu ul li:hover > ul,
#access .menu ul li:focus-within > ul {
  display: block;
  visibility: visible;
}

/* бургер скрыт на десктопе */
.menu-burger { display: none; }

/* ---- общие правки ---- */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
.content-body { overflow-wrap: break-word; }

.tags a {
  display: inline-block;
  margin: 0 4px 6px 0;
  padding: 3px 9px;
  background: #f3f3f3;
  border-radius: 3px;
  font-size: 12px;
  color: #555;
}
.tags a:hover { background: #f47b20; color: #fff; }
.footer-countries a { display: inline-block; margin: 0 8px 6px 0; }

/* ---- соцыконки шапки (Simple Icons): белые на круглом фоне, hover оранжевый ---- */
.top_contact_info .right_sec .socials li a {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; line-height: 0; background-color: #666;
}
.top_contact_info .right_sec .socials li a .soc-svg { width: 14px; height: 14px; fill: #fff; color: #fff; }
.top_contact_info .right_sec .socials li a:hover { background-color: #f47b20; }
.top_contact_info .right_sec .socials li a:hover .soc-svg { fill: #fff; }
.children-list { list-style: none; padding: 0; }
.children-list li { padding: 6px 0; border-bottom: 1px solid #eee; }
.social-link { font-weight: 600; }

/* ---- адаптив ---- */
@media (max-width: 1199px) {
  .wrapper_boxed, .site_wrapper, .container {
    width: auto !important;
    max-width: 1170px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .content_left { width: 62%; }
  .right_sidebar { width: 34%; }
  /* меню компактнее, чтобы 7 пунктов влезали в одну строку на планшете */
  #access .menu ul li a { padding: 25px 14px 23px 14px; font-size: 13px; }
}

@media (max-width: 980px) {
  .content_left, .right_sidebar, .content_fullwidth {
    width: 100% !important;
    float: none !important;
  }
  .right_sidebar { margin-top: 40px; }
  .footer .one_fourth { width: 48% !important; }
  .footer .one_fourth:nth-child(2n) { margin-right: 0 !important; }
  /* бургер виден ниже 980px (полное оформление — в блоке мобильной шапки ниже) */
  .menu-burger { display: inline-block; cursor: pointer; color: #fff; }
  #access .menu ul { height: auto; }
  #access .menu > ul { display: none; }
  #menu-toggle:checked ~ .menu > ul { display: block; }
  #access .menu ul li { display: block; }
  #access .menu ul li a { display: block; padding: 14px 20px; }
}

@media (max-width: 640px) {
  .footer .one_fourth { width: 100% !important; margin-right: 0 !important; }
}

/* ---- лента статей на главной ---- */
.post-card { padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid #eee; }
.post-card__img { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.post-card__title { margin: 0 0 6px; font-size: 24px; }
.post-card__title a { color: #333; }
.post-card__title a:hover { color: #f47b20; }
.post-card__meta { color: #999; font-style: italic; margin-bottom: 12px; }
.post-card__intro img { margin: 8px 0; }
.post-card__more { display: inline-block; margin-top: 10px; font-weight: 600; color: #f47b20; }

/* ---- архив стихов / похожие ---- */
.stihi-year { margin-bottom: 22px; }
.stihi-year h2 { font-size: 22px; margin: 0 0 8px; }
.stihi-year ul { list-style: none; padding-left: 0; }
.stihi-year li { padding: 3px 0; }
.related { clear: both; width: 100%; float: left; margin-top: 40px; padding-top: 20px; border-top: 2px solid #f47b20; }
.related-list {
  list-style: none; padding: 0; margin: 16px 0 0; width: 100%; float: left;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.related-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.related-list li > a:last-child { flex: 1 1 auto; min-width: 0; }
.related-list img { flex: 0 0 auto; width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
@media (max-width: 640px) { .related-list { grid-template-columns: 1fr; } }

/* ---- адаптивные эмбеды (видео/карты) ---- */
.content-body iframe { max-width: 100%; }
.embed-responsive { position: relative; width: 100%; max-width: 660px; aspect-ratio: 16 / 9; margin: 16px 0; }
.embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =========================================================
   Доводка после миграции (спека 07)
   ========================================================= */

/* ---- превью ленты (спека 07 S3.1+Stage3-fix): дата-календарь слева, контент справа ---- */
/* Дата = ровный бейдж-календарь: число и месяц одинаковой ширины (55px), центр. */
.blog_post a.date {
  width: 55px; height: auto; padding: 0; overflow: hidden;
}
.blog_post a.date strong {
  display: block; width: 100%; margin: 0; padding: 8px 0 6px;
  text-align: center; box-sizing: border-box;
}
.blog_post a.date i {
  display: block; width: 100%; margin: 0; padding: 3px 0;
  text-align: center; box-sizing: border-box; border-top: 1px solid #f3f3f3;
}
/* Колонка «заголовок → мета → анонс»: обычный поток сверху вниз, BFC (не под дату).
   Сбрасываем оригинальные float/проценты/отрицательные margin темы.
   ВАЖНО: тема даёт h3{float:left;width:85%} и h3 a{float:left} — без сброса float
   мета и анонс обтекают заголовок справа («разъезжаются»). */
.blog_post .post_body { overflow: hidden; }
.blog_post .post_body h3 { float: none; width: auto; margin: 0 0 6px; }
.blog_post .post_body h3 a { float: none; margin-top: 0; }
.blog_post .post_body ul.post_meta_links {
  float: none; width: auto; margin: 0 0 10px; padding: 0;
}
.blog_post .post_body ul.post_meta_links li { float: none; display: inline-block; }
.blog_post .post_body .post_info_content {
  float: none; width: auto;       /* тема даёт margin-left:10%;width:90%;float — сброс */
  margin: 0; padding: 0;          /* вровень с заголовком/метой */
}
/* featureImage — ниже блока, в полную ширину контента */
.blog_post .image_frame { clear: both; width: 100%; margin-top: 12px; }

/* ---- sticky-меню на десктопе (при прокрутке прилипает к верху) ----
   #header делаем display:contents, чтобы #trueHeader стал прямым потомком
   высокого .site_wrapper — иначе sticky «уезжает» вместе с коротким #header. */
@media (min-width: 981px) {
  #header { display: contents; }
  #trueHeader { position: sticky; top: 0; z-index: 1000; }
}

/* ---- меню: подменю по ширине текста, без серого отступа справа, в одну строку ---- */
#access .menu ul li ul { width: auto; min-width: 180px; }
#access .menu ul li ul li a {
  width: auto; white-space: nowrap; padding: 14px 20px;
}

/* ---- меню: третий уровень раскрывается вправо (Стихи → Год) ---- */
#access .menu ul li ul li.has-sub > ul {
  top: 0;
  left: 100%;
}
#access .menu ul li ul li ul {
  display: none;
  visibility: hidden;
}
#access .menu ul li ul li.has-sub:hover > ul,
#access .menu ul li ul li.has-sub:focus-within > ul {
  display: block;
  visibility: visible;
}
#access .menu ul li ul li.has-sub > a .fa-angle-right { float: right; margin-left: 8px; }

/* ---- облако тэгов: размер по «весу» ---- */
.tags--cloud a { line-height: 1.5; }
.tags--cloud .tag-size-1 { font-size: 11px; }
.tags--cloud .tag-size-2 { font-size: 13px; }
.tags--cloud .tag-size-3 { font-size: 15px; }
.tags--cloud .tag-size-4 { font-size: 18px; }
.tags--cloud .tag-size-5 { font-size: 22px; }
.tags--cloud .tag-size-6 { font-size: 26px; }

/* ---- индекс /tag/ и /country/: список с числами (Stage3-fix п.6) ---- */
.tag-cloud, .country-list { list-style: none; padding: 0; margin: 0; column-count: 3; column-gap: 30px; }
.tag-cloud li, .country-list li { padding: 5px 0; break-inside: avoid; }
.tag-cloud a, .country-list a { color: #f47b20; }
.tag-cloud a:hover, .country-list a:hover { color: #d8691a; text-decoration: underline; }
.tag-count { color: #999; font-size: 12px; }
@media (max-width: 640px) { .tag-cloud, .country-list { column-count: 2; } }

/* ---- поиск: вернуть исходный float-поток, поле той же высоты, что и кнопка (41px) ---- */
#site-searchform #s { height: 41px; box-sizing: border-box; }
#site-searchform::after { content: ''; display: block; clear: both; }

/* ---- пагинация: flex-строка, всё по средней линии (Stage3-fix п.4) ---- */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.pagination b, .pagination a.navlinks, .pagination a.current, .pagination .gap {
  float: none; margin: 0;          /* сброс оригинальных float */
}
.pagination b { padding: 7px 6px; }   /* «Стр. N из M» — та же высота, центрируется flex */
.pagination .gap { padding: 7px 4px; color: #999; }
/* активная страница: те же размеры, что и .navlinks (в оригинале a.current задаёт
   только цвет/фон без padding → номер «кривой») — спека 07 S3.2 */
.pagination a.current {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  padding: 7px 10px; border-radius: 3px;
}

/* ---- breadcrumbs: разрядить ---- */
.page_title .pagenation li { margin-right: 6px; }
.page_title .pagenation a { padding: 0 2px; }

/* ---- теги под статьёй ---- */
.post-tags { margin-top: 26px; padding-top: 14px; border-top: 1px solid #eee; font-size: 13px; }
.post-tags .fa-tags { color: #f47b20; margin-right: 6px; }
.post-tags a {
  display: inline-block; margin: 0 4px 6px 0; padding: 3px 9px;
  background: #f3f3f3; border-radius: 3px; color: #555;
}
.post-tags a:hover { background: #f47b20; color: #fff; }

/* ---- кнопки шеринга ---- */
.share-buttons { margin-top: 26px; padding-top: 16px; border-top: 1px solid #eee; }
.share-buttons h4 { margin: 0 0 10px; font-size: 15px; }
.share-buttons a, .share-buttons button {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 8px 8px 0; padding: 7px 12px; border: 0; border-radius: 4px;
  font: 600 13px 'Open Sans', sans-serif; color: #fff; cursor: pointer; text-decoration: none;
}
.share-buttons .sh-x { background: #000; }
.share-buttons .sh-tg { background: #29a9eb; }
.share-buttons .sh-vk { background: #4a76a8; }
.share-buttons .sh-fb { background: #3b5998; }
.share-buttons .sh-copy { background: #777; }
.share-buttons a:hover, .share-buttons button:hover { opacity: .88; }

/* ---- похожие записи: блок на всю ширину контента, не сбоку ---- */
.content .related { clear: both; width: 100%; }

/* ---- стихи: отступ перед названием ---- */
.stihi-year ul { padding-left: 18px; }
.stihi-year li { padding: 3px 0 3px 6px; }

/* ---- лайтбокс ---- */
.lb-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.88);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.lb-overlay.open { display: flex; }
.lb-overlay img { max-width: 92vw; max-height: 92vh; box-shadow: 0 0 40px rgba(0,0,0,.6); }
.lb-close, .lb-prev, .lb-next {
  position: absolute; color: #fff; background: rgba(0,0,0,.4);
  border: 0; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; font-size: 30px; line-height: 1; padding: 0;
}
.lb-close { top: 16px; right: 20px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---- страница 404 (Stage3-fix п.8) ---- */
.error404 { text-align: center; padding: 50px 15px 70px; }
.error404__code { font-size: 130px; line-height: 1; font-weight: 800; color: #f47b20; font-family: 'Open Sans', sans-serif; }
.error404__title { font-size: 28px; margin: 10px 0 14px; color: #333; }
.error404__text { font-size: 16px; color: #777; max-width: 560px; margin: 0 auto 28px; }
.error404__text a { color: #0787c5; }
.error404__text a:hover { color: #f47b20; }
.error404__home {
  display: inline-block; background: #f47b20; color: #fff;
  padding: 12px 28px; border-radius: 4px; font-weight: 600; text-decoration: none;
}
.error404__home:hover { background: #d8691a; color: #fff; }

/* ---- список стран в сайдбаре (travel) ---- */
.sidebar-countries { list-style: none; padding: 0; margin: 0; }
.sidebar-countries li { padding: 4px 0; border-bottom: 1px solid #eee; }

/* ---- /travel/ хронология (контент 1:1 из backup/travel.txt): год → поездка → дни.
   Структура: ul.TravelList > li (год-h3 | поездка); дни — вложенный ul.TravelList. ---- */
.TravelList { list-style: none; padding: 0; margin: 0; }
.TravelList li { padding: 3px 0; }
/* строка года (li содержит h3) — без верхнего отступа у первого */
.TravelList > li:has(> h3) { margin-top: 16px; padding-left: 0; }
.TravelList > li:first-child { margin-top: 0; }
.TravelList h3 { margin: 0; font-size: 20px; color: #333; font-weight: 600; }
.TravelList h3 .fa-calendar { color: #f47b20; margin-right: 6px; }
/* вложенный список дней — с отступом */
.TravelList .TravelList { margin: 2px 0 6px; padding-left: 28px; }
.TravelList .TravelList li { padding: 2px 0; }
.TravelList a { color: #f47b20; text-decoration: none; }
.TravelList a:hover { color: #d8691a; text-decoration: underline; }

/* =========================================================
   Мобильная шапка (Stage3-fix п.7): ОДИН оранжевый бар фикс. высоты, sticky к верху.
   Заголовки слева по центру по вертикали (не обрезаны), гамбургер справа,
   меню — оранжевый оверлей, соцсети — иконки в ряд под меню.
   ========================================================= */
@media (max-width: 980px) {
  /* единый sticky-бар: #header прилеплен к верху, внутри #topHeader (бар), меню оверлеем */
  #header {
    position: sticky; top: 0; z-index: 1000;
    background: #f47b20;
  }

  /* #topHeader = сам бар фикс. высоты, во всю ширину, без боковых отступов */
  #topHeader .wrapper { height: 100%; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  #topHeader .container { height: 100%; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .top_contact_info {
    background: #f47b20 !important; min-height: 0 !important;
    height: 60px; padding: 0 !important;
    display: flex; align-items: center;   /* заголовки по центру по вертикали */
  }
  .top_contact_info .container {
    display: flex; align-items: center;
    width: 100% !important; height: 100%; padding: 0 54px 0 0 !important;  /* место под бургер справа */
  }
  #topHeader .left_sec, #topHeader .right_sec { display: none; }  /* лого-текст и десктоп-иконки (соцсети — только в меню) */
  #topHeader .center_sec {
    float: none !important; text-align: left !important; padding: 0 0 0 15px !important;
    margin: 0 !important; min-width: 0; flex: 1 1 auto;
  }
  /* заголовки: компактные, без обрезки (перенос разрешён, но строки короткие) */
  #topHeader .center_sec h1 {
    font-size: 16px; line-height: 1.15; white-space: nowrap; color: #fff; margin: 0;
  }
  #topHeader .center_sec h2 {
    font-size: 11px; line-height: 1.2; white-space: nowrap; color: #fff; margin: 1px 0 0;
    font-weight: 400; opacity: .95;
  }

  /* #trueHeader перестаёт быть отдельным баром — только держит гамбургер */
  #trueHeader { background: transparent !important; position: static; }
  #trueHeader .wrapper, #trueHeader .container { position: static; padding: 0; }

  /* гамбургер — справа в баре (только иконка), по центру по вертикали */
  .menu-burger {
    position: absolute; top: 0; right: 10px; z-index: 1001;
    display: flex; align-items: center; justify-content: center;
    height: 60px; width: 44px; padding: 0; margin: 0;
    color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  }

  /* меню — оранжевый оверлей под баром (НЕ белый). Целиком скрыт, пока не тапнут бургер,
     поэтому НЕ перекрывает контент и соц-иконки не торчат в шапке. */
  #access { position: static; }
  #access .menu {
    display: none;                /* закрыто — оверлея нет вообще */
    position: absolute; top: 60px; left: 0; right: 0; z-index: 1000;
    background: #f47b20; box-shadow: 0 8px 16px rgba(0,0,0,.2);
  }
  #menu-toggle:checked ~ .menu { display: block; }   /* открыто по тапу */
  #access .menu ul li a { color: #fff; border-top: 1px solid rgba(255,255,255,.18); }
  #access .menu ul li a:hover { background: rgba(0,0,0,.08); }

  /* показываем только верхний уровень; подменю скрыты */
  #access .menu > ul > li > ul { display: none; }

  /* соцсети — компактные иконки в ряд под меню */
  #access .menu .socials-mobile {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 12px;
    padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.25);
  }
  #access .menu .socials-mobile li { display: block; margin: 0; flex: 0 0 auto; }
  #access .menu .socials-mobile li a {
    display: flex !important; align-items: center; justify-content: center;
    width: 38px !important; height: 38px !important; min-width: 38px; padding: 0 !important;
    border-top: 0 !important; box-sizing: border-box;
    background: rgba(255,255,255,.18); border-radius: 50%;
    transition: background-color .15s;     /* меняется только фон, не размер */
  }
  #access .menu .socials-mobile li a .soc-svg {
    width: 18px !important; height: 18px !important; flex: 0 0 18px; fill: #fff;
  }
  #access .menu .socials-mobile li a:hover { background: rgba(255,255,255,.35); }
}
.menu .socials-mobile { display: none; }