/*
Theme Name: hairhomecare.ru 2026
Template: hhc
Version: 2.0
Description: Современная тема на базе hhc. Типографика, mobile-first, места под рекламу и YMYL-блоки.
*/

/* ==========================================================================
   1. Токены
   ========================================================================== */
:root{
  --font-text: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-base: 18px;
  --lh-base: 1.7;
  --measure: 860px;       /* ширина колонки текста */

  --c-text: #23202e;
  --c-muted: #6b6580;
  --c-accent: #634c9d;
  --c-accent-dark: #4e3c7d;
  --c-accent-soft: #f3effb;
  --c-bg: #ffffff;
  --c-bg-alt: #f7f6fa;
  --c-border: #e4e0ee;

  --radius: 12px;
  --gap: 24px;
  --container: 1440px;
  --shadow: 0 2px 12px rgba(35,32,46,.07);
}

/* ==========================================================================
   2. База
   ========================================================================== */
html{-webkit-text-size-adjust:100%;}
html,body{
  width:auto; height:auto;
  margin:0; padding:0;
  font-family:var(--font-text);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-bg);
}
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%; height:auto;}

a{color:var(--c-accent); text-decoration:none;}
a:hover,a:active{color:var(--c-accent-dark); text-decoration:underline;}

/* ==========================================================================
   3. Типографика
   ========================================================================== */
h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--c-text);
  font-weight:700;
  line-height:1.25;
  margin:0 0 .6em;
  clear:none;
}
h1{font-size:2rem; margin-bottom:.5em; letter-spacing:-.02em;}
h2{font-size:1.5rem; margin-top:2em;}
h3{font-size:1.22rem; margin-top:1.6em;}
h4{font-size:1.06rem; margin-top:1.4em;}

p{margin:0 0 1.15em; font-size:inherit; line-height:inherit;}

.content ul,.content ol{margin:0 0 1.3em; padding-left:1.4em;}
.content li{margin-bottom:.5em; font-size:inherit;}

/* Родитель рисует маркеры картинкой bullet.png (жёлтая точка 2016 года).
   Заменяем на аккуратный кружок в цвет акцента. */
.content ul li{
  background:none !important;
  padding-left:0 !important;
  position:relative;
  list-style:none;
}
.content ul li::before{
  content:''; position:absolute;
  left:-1em; top:.62em;
  width:6px; height:6px;
  background:var(--c-accent); border-radius:50%;
  opacity:.55;
}
.content ol li::marker{color:var(--c-accent); font-weight:600;}

blockquote{
  margin:1.6em 0; padding:1em 1.3em;
  background:var(--c-accent-soft);
  border-left:4px solid var(--c-accent);
  border-radius:0 var(--radius) var(--radius) 0;
}
blockquote p:last-child{margin-bottom:0;}

.content table{
  width:100%; border-collapse:collapse; margin:1.6em 0;
  font-size:.95rem; display:block; overflow-x:auto;
}

/* Видео: в статьях iframe с жёстко прописанными width/height от 2016 года.
   Делаем адаптивными на всю ширину колонки с сохранением пропорций 16:9. */
.content iframe[src*="youtube"],
.content iframe[src*="youtu.be"],
.content iframe[src*="rutube"],
.content iframe[src*="vk.com/video"],
.content iframe[src*="vimeo"],
.content .video-container iframe,
.content object,
.content embed{
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9;
  margin:1.8em 0;
  border:0; border-radius:var(--radius);
}

/* обёртки, которыми плагины оборачивают видео */
.content .video-container,
.content .wp-video,
.content .wp-block-embed__wrapper{
  width:100% !important; max-width:100% !important;
  margin:1.8em 0;
}

/* Картинки в статьях: выравнивание из редактора 2016 года
   не даёт тексту нормальных отступов */
.content img{height:auto; border-radius:8px;}
.content img.alignleft,
.content .alignleft{
  float:left; margin:.4em 1.6em 1.2em 0; max-width:45%;
}
.content img.alignright,
.content .alignright{
  float:right; margin:.4em 0 1.2em 1.6em; max-width:45%;
}
.content img.aligncenter,
.content .aligncenter{
  display:block; float:none; margin:1.6em auto;
}
.content img.alignnone{display:block; margin:1.6em 0;}

/* подписи под картинками */
.content .wp-caption{max-width:100% !important; height:auto;}
.content .wp-caption-text{
  font-size:.85rem; color:var(--c-muted);
  line-height:1.4; margin:.5em 0 0; text-align:center;
}

/* заголовки не должны налезать на обтекаемые картинки */
.content h2,.content h3{clear:both;}

/* ==========================================================================
   Карточки записей в списках (главная, рубрики, поиск)
   Родитель верстает их обтеканием — сохраняем, только причёсываем.
   ========================================================================== */
.content .post,
.content .post2{
  float:none !important; clear:both;
  width:auto !important;
  overflow:hidden;                      /* очищает float картинки */
}
.content .post{
  margin:0 0 28px !important;
  padding:0 0 28px !important;
  border-bottom:1px solid var(--c-border);
  background:none;
}
.content .post:last-child{border-bottom:none;}

.content .post2{
  margin:0 0 28px !important;
  padding:24px !important;
  background:var(--c-bg-alt);
  border-radius:var(--radius);
}

/* картинка обтекается текстом — как было в старой теме */
.content .post .wp-post-image,
.content .post2 .wp-post-image{
  float:left !important;
  width:300px !important; height:auto !important;
  max-width:40%;
  object-fit:cover;
  margin:0 24px 16px 0 !important;
  border-radius:8px;
}

.content .post h2,
.content .post2 h2{
  clear:none !important;
  margin:0 0 .5em !important;
  font-size:1.22rem; line-height:1.3;
}
.content .post p,
.content .post2 p{
  font-size:.97rem; line-height:1.6; color:var(--c-text);
  margin:0 0 .8em;
}

.meta-post{
  font-size:.83rem; line-height:1.5;
  margin:0 !important; color:var(--c-muted);
}
.meta-post a{color:var(--c-muted);}
.meta-post a:hover{color:var(--c-accent);}

/* ==========================================================================
   Пагинация
   Родитель верстает её через ul.page-numbers с display:inline у li —
   номера налезали друг на друга. Переводим на flex.
   ========================================================================== */
.content ul.page-numbers,
ul.page-numbers{
  display:flex !important;
  flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
  list-style:none !important;
  margin:40px 0 !important; padding:0 !important;
  clear:both;
  background:none !important;      /* общая рамка и фон не нужны */
  border:none !important;
  border-radius:0 !important;
}
.content ul.page-numbers li,
ul.page-numbers li{
  display:block !important;
  margin:0 !important; padding:0 !important;
  background:none !important;
  list-style:none !important;
  font-size:inherit;
}
/* убираем маркеры-точки от общих правил списков */
.content ul.page-numbers li::before,
ul.page-numbers li::before,
.content ul.page-numbers li::marker,
ul.page-numbers li::marker{content:none !important; display:none !important;}

/* класс .page-numbers висит и на самом <ul>, и на кнопках —
   оформляем только кнопки (a и span), не контейнер */
a.page-numbers,
span.page-numbers{
  display:flex !important; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--c-border); border-radius:8px;
  background:var(--c-bg); color:var(--c-text);
  font-size:.95rem; font-weight:500; line-height:1;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
a.page-numbers:hover{
  background:var(--c-accent-soft);
  border-color:var(--c-accent);
  color:var(--c-accent); text-decoration:none;
}
span.page-numbers.current,
a.page-numbers.current{
  background:var(--c-accent) !important;
  border-color:var(--c-accent) !important;
  color:#fff !important; font-weight:600;
}
span.page-numbers.dots{
  border:none; background:none; min-width:24px; padding:0 4px;
  color:var(--c-muted);
}
a.page-numbers.next,a.page-numbers.prev{font-size:1.1rem;}

/* на узких экранах обтекание не работает — картинка на всю ширину */
@media (max-width:620px){
  .content .post .wp-post-image,
  .content .post2 .wp-post-image{
    float:none !important; display:block;
    width:100% !important; max-width:100% !important;
    margin:0 0 16px !important;
  }
}
.content th,.content td{padding:.7em .9em; border:1px solid var(--c-border); text-align:left;}
.content th{background:var(--c-bg-alt); font-weight:600;}

/* ==========================================================================
   4. Каркас — резиновый вместо 1300px
   ========================================================================== */
/* Родитель задаёт жёсткие width:1170px / 1300px / 94% и в базе, и внутри
   девяти медиа-запросов. Перекрываем везде — иначе макет остаётся старым.

   Схема: .wrapper тянется во всю ширину экрана и красит фон,
   а внутренние блоки (.header/.header2/.navigation/.main/.wrapper2)
   центрируются по --container. Так полосы шапки, меню и подвала
   идут от края до края, а контент остаётся читаемым. */
/* .wrapper — полоса во всю ширину, на ней же фон */
body .wrapper{
  width:100% !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  background:none;
}
/* фоны полос: :has() поддерживается не везде, поэтому красим сами блоки */

/* внутренние блоки центрируются по контейнеру и держат боковые отступы */
body .header,
body .header2,
body .navigation,
body .main,
body .wrapper2{
  width:100% !important;
  max-width:var(--container) !important;
  margin:0 auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  float:none;
}

body .main{
  padding-top:32px !important; padding-bottom:32px !important;
  display:flex; gap:56px; align-items:flex-start;
  background:none;
}

.content{flex:1 1 auto; min-width:0; max-width:var(--measure);}
.sidebar{flex:0 0 340px;}

/* ==========================================================================
   5. Шапка
   ========================================================================== */
/* Фон полос во всю ширину: блок центрирован по контейнеру, а псевдоэлемент
   растягивает заливку до краёв экрана. Работает во всех браузерах,
   в отличие от :has() на родителе. */
body .header,
body .header2,
body .navigation,
body .footer{position:relative; z-index:0;}

/* Заливка полос до краёв: красим .wrapper — он и так во всю ширину.
   Фирменные фоны шапки сохраняем (розовый градиент + иллюстрация). */
body .wrapper:has(> .header){
  /* Фирменный градиент шапки. PNG весил 69 КБ - пересохранён в WebP (9.6 КБ,
     картинка та же). image-set отдаёт png тем, кто webp не понимает. */
  background:url('../hhc/images/top_bg.png') center top / cover no-repeat;
  background-image:image-set(
    url('../hhc/images/top_bg.webp') type('image/webp'),
    url('../hhc/images/top_bg.png') type('image/png')
  );
}
/* Новая иллюстрация шапки. Исходник 2168×725 PNG весил 1.6 МБ —
   пересохранён: WebP 57 КБ (десктоп) и 19 КБ (мобильный), JPEG как запасной.
   image-set сам отдаёт webp тем, кто его понимает. */
body .wrapper:has(> .header2){
  background:url('images/hd_bg.jpg') center / cover no-repeat;
  background-image:image-set(
    url('images/hd_bg.webp') type('image/webp'),
    url('images/hd_bg.jpg') type('image/jpeg')
  );
  border-bottom:1px solid var(--c-border);
}
body .wrapper:has(> .navigation){background:var(--c-accent);}

/* запасной вариант для браузеров без :has() */
@supports not selector(:has(*)){
  body .header{background:url('../hhc/images/top_bg.png') center/cover no-repeat !important;}
  body .header2{background:url('../hhc/images/hd_bg.jpg') center/cover no-repeat !important;}
  body .navigation{background:var(--c-accent) !important;}
}

body .header::before,
body .header2::before,
body .navigation::before{content:none;}

/* --- верхняя полоса с логотипом --- */
body .header{
  height:auto !important;
  padding-top:18px !important; padding-bottom:18px !important;
  background:none !important; border:none;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:20px;
}
body .header::before{background:var(--c-bg);}

.logo{
  float:none !important;
  display:flex !important;
  align-items:center;
  justify-content:flex-start !important;
  gap:12px;
  margin:0 auto 0 0 !important;   /* прижать влево */
}
.logo a{
  display:inline-flex !important;
  align-items:center; gap:10px; text-decoration:none;
  margin:0 !important;
}
/* Логотип — белый, на фирменном розовом градиенте шапки читается хорошо */
.logo img{
  display:block !important;
  height:40px !important; width:auto !important;
  max-width:none;
}
.logo a::before,.logo a::after{content:none;}

/* --- полоса «популярное» с фирменной иллюстрацией --- */
body .header2{
  min-height:370px;
  height:auto !important;
  padding-top:26px !important; padding-bottom:26px !important;
  background:none !important; border:none;
  display:flex; flex-direction:column; justify-content:center;
}
/* превью и поиск прижимаем вправо — слева фоновая иллюстрация */
.hd_posts{margin-left:auto; max-width:58%;}
.hd_search{margin-left:auto !important; margin-right:0 !important;}
body .header2::before{
  background:var(--c-bg-alt);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}
.hd_posts{float:none; display:flex; gap:var(--gap); flex-wrap:wrap;}
.hd_post{width:auto; flex:1 1 150px; float:none; margin:0; min-width:130px;}
.hd_post_thumb{margin:0 auto 10px;}
.hd_post_thumb a{width:84px; height:84px; border-radius:50%;}
.hd_post_title a{font-size:.83rem; line-height:1.35; color:var(--c-text);}
.hd_post_title a:hover{color:var(--c-accent);}

.hd_search{float:none; width:100%; max-width:380px; margin:18px auto 0;}
.hd_search input[type=text]{
  font-size:1rem; padding:12px 46px 12px 18px;
  border:1px solid var(--c-border); border-radius:var(--radius);
}
.hd_search input[type=submit]{border-radius:8px;}

/* ==========================================================================
   6. Навигация
   ========================================================================== */
body .navigation{
  height:auto !important; padding-top:0 !important; padding-bottom:0 !important;
  background:none !important; border-radius:0;
}
/* фиолетовая полоса — во всю ширину экрана */
body .navigation::before{background:var(--c-accent);}
#mainnav-menu{background:none; float:none; width:100%;}
#mainnav-menu ul{font-size:.97rem; display:flex; flex-wrap:wrap; float:none;}
#mainnav-menu ul li{float:none; position:relative;}
#mainnav-menu ul li a{
  padding:15px 18px; display:block; line-height:1.3;
  color:#fff; transition:background .15s ease;
}
#mainnav-menu ul li:hover > a{background:rgba(255,255,255,.14); color:#fff;}

/* --- выпадающее подменю: чистая карточка вместо жёлтой рамки --- */
#mainnav-menu ul ul,
#mainnav-menu .sub-menu{
  display:none; position:absolute; top:100%; left:0;
  min-width:250px; margin:0; padding:8px 0;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(35,32,46,.14);
  z-index:99999;
  flex-direction:column;
}
#mainnav-menu ul li:hover > ul,
#mainnav-menu ul li:hover > .sub-menu{display:block;}

#mainnav-menu ul ul li{width:100%;}
#mainnav-menu ul ul li a,
#mainnav-menu .sub-menu li a{
  min-width:0; margin:0; padding:9px 18px;
  line-height:1.4; font-size:.95rem; font-weight:400;
  color:var(--c-text); background:none;
  border-radius:0; white-space:nowrap;
}
#mainnav-menu ul ul li:hover > a,
#mainnav-menu ul ul a:hover{
  background:var(--c-accent-soft); color:var(--c-accent); text-decoration:none;
}

/* вложенность третьего уровня */
#mainnav-menu ul ul ul{top:-9px; left:100%;}

#mainnav-icon{
  display:none; color:#fff;
  padding:16px 0; line-height:1.3;
  cursor:pointer; font-size:1rem;
}
#mainnav-icon span{margin-right:8px;}

/* ==========================================================================
   7. Статья
   ========================================================================== */
.breadcrumbs{
  font-size:.85rem; color:var(--c-muted);
  margin:20px 0 14px; line-height:1.5;
}
.breadcrumbs a{color:var(--c-muted);}
.breadcrumbs a:hover{color:var(--c-accent);}

.content{padding-bottom:40px;}

/* мета-строка: дата обновления */
.post-meta{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  font-size:.87rem; color:var(--c-muted);
  padding:12px 0; margin-bottom:26px;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}

/* блок автора (наполняется на этапе 4) */
.post-author{
  display:flex; gap:14px; align-items:center;
  padding:16px; margin:26px 0;
  background:var(--c-bg-alt); border-radius:var(--radius);
}
.post-author__avatar{
  flex:0 0 56px; width:56px; height:56px;
  border-radius:50%; overflow:hidden; background:var(--c-accent-soft);
}
.post-author__avatar img{width:100%; height:100%; object-fit:cover;}
.post-author__name{font-weight:600; color:var(--c-text);}
.post-author__role{font-size:.87rem; color:var(--c-muted);}

/* проверено экспертом (YMYL) */
.post-expert{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 16px; margin:0 0 26px;
  background:var(--c-accent-soft); border-radius:var(--radius);
  font-size:.9rem; line-height:1.5;
}
.post-expert__icon{flex:0 0 auto; font-size:1.1rem;}

/* источники */
.post-sources{
  margin:36px 0 0; padding:18px 20px;
  background:var(--c-bg-alt); border-radius:var(--radius);
  font-size:.9rem;
}
.post-sources h4{margin-top:0; font-size:1rem;}
.post-sources ol{margin:0; padding-left:1.3em;}
.post-sources li{margin-bottom:.45em;}

/* дисклеймер для медицинских тем */
.post-disclaimer{
  margin:26px 0 0; padding:14px 18px;
  border:1px solid var(--c-border); border-radius:var(--radius);
  font-size:.87rem; color:var(--c-muted); line-height:1.55;
}

/* ==========================================================================
   Оглавление статьи (blockquote.contents)
   Разметка: <li class="top"> — верхний уровень,
   <div class="right_contents"> со <span class="sub sub_1"> — вложенные.
   ========================================================================== */
.content blockquote.contents{
  margin:30px 0 !important;
  padding:22px 26px 22px 24px !important;
  background:var(--c-bg-alt) !important;
  border:1px solid var(--c-border);
  border-left:4px solid var(--c-accent);
  border-radius:var(--radius);
  font-size:.96rem;
}

/* заголовок «Содержание» вместо скрытого */
.content blockquote.contents::before{
  content:'Содержание';
  display:block; margin-bottom:.9em;
  font-family:var(--font-head); font-size:1.05rem; font-weight:700;
  color:var(--c-text); line-height:1.3;
}
.contents_title{display:none;}

/* сам список — без маркеров и отступов */
.content blockquote.contents ul.contents,
.content blockquote.contents ul{
  list-style:none !important; margin:0 !important; padding:0 !important;
}

/* верхний уровень */
.content blockquote.contents li.top,
.content blockquote.contents ul.contents > li{
  list-style:none !important; list-style-type:none !important;
  list-style-image:none !important;
  margin:0 0 .5em; padding:0;
  line-height:1.45;
}
/* Жёлтые точки — это ФОНОВАЯ КАРТИНКА bullet.png из родительской темы
   (.content ul li{background:url(bullet.png)}), а не маркер списка.
   Поэтому list-style её не убирал — нужен background:none. */
.content blockquote.contents li,
.content blockquote.contents li.top{
  display:block !important;
  background:none !important;
  padding-left:0 !important;
  list-style:none !important;
  list-style-image:none !important;
  list-style-type:none !important;
}
.content blockquote.contents ul,
.content blockquote.contents ul.contents{
  list-style:none !important; list-style-image:none !important;
}
.content blockquote.contents li::marker{content:none !important;}
.content blockquote.contents li::before{content:none !important;}
.content blockquote.contents li.top > a{
  font-weight:600; color:var(--c-text);
}
.content blockquote.contents li.top > a:hover{
  color:var(--c-accent); text-decoration:none;
}

/* Вложенные пункты. Разметка: внутри .right_contents идут
   <span class="sub">…</span><br> — то есть переносы делает сам <br>.
   Поэтому никакого flex/gap: он бы удвоил промежутки. */
.content blockquote.contents .right_contents{
  margin:0 0 .5em; padding:0; display:block;
}
.content blockquote.contents .right_contents:empty{margin:0; display:none;}

/* <br> внутри блока не нужны — переносы даёт сам span */
.content blockquote.contents .right_contents br{display:none;}

.content blockquote.contents .sub{
  display:block; position:relative;
  padding:0 0 0 30px; margin:0 0 .4em;
  line-height:1.45;
}
.content blockquote.contents .sub:last-child{margin-bottom:0;}
.content blockquote.contents .sub a{
  color:var(--c-accent); font-weight:400; font-size:.94rem;
}
.content blockquote.contents .sub a:hover{
  color:var(--c-accent-dark); text-decoration:underline;
}

/* FontAwesome не подключён — рисуем маркер сами */
.content blockquote.contents .sub i{display:none;}
.content blockquote.contents .sub::before{
  content:''; position:absolute;
  left:14px; top:.62em;
  width:5px; height:5px;
  background:var(--c-accent); border-radius:50%;
  opacity:.55;
}

.content blockquote.contents ol,
.content blockquote.contents ul{margin:0; padding:0; list-style:none;}

/* --- если появится плагин оглавления --- */
#toc_container,.toc{
  background:var(--c-bg-alt) !important;
  border:1px solid var(--c-border) !important;
  border-radius:var(--radius);
  padding:18px 20px !important;
  margin:0 0 30px !important;
  width:auto !important;
  font-size:.95rem;
}
#toc_container .toc_title{font-weight:600; margin-bottom:.6em;}
#toc_container ul{padding-left:1.2em;}
#toc_container li{margin-bottom:.4em;}

/* «Главное по теме» — перелинковка, этап 2 */
.related-hub{
  margin:36px 0; padding:20px;
  border:1px solid var(--c-border); border-radius:var(--radius);
}
.related-hub h3{margin:0 0 .8em; font-size:1.1rem;}
.related-hub ul{margin:0; padding-left:1.2em;}
.related-hub li{margin-bottom:.5em;}

/* --- Похожие записи (YARPP) — карточки вместо голого списка --- */
.yarpp-related{
  margin:40px 0 0; padding:24px;
  background:var(--c-bg-alt); border-radius:var(--radius);
}
.yarpp-related > h3,
.yarpp-related > p:first-child{
  margin:0 0 1em !important; padding:0;
  font-size:1.25rem; font-weight:700; text-align:left;
  color:var(--c-text); font-family:var(--font-head);
}
.yarpp-related ol,
.yarpp-related ul{
  margin:0 !important; padding:0 !important;
  list-style:none; counter-reset:yarpp;
  display:grid; gap:10px;
}
.yarpp-related li{
  margin:0 !important; padding:0;
  display:flex; gap:12px; align-items:flex-start;
  counter-increment:yarpp;
}
.yarpp-related li::before{
  content:counter(yarpp);
  flex:0 0 26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-accent); color:#fff;
  border-radius:50%; font-size:.8rem; font-weight:600;
  margin-top:2px;
}
.yarpp-related li a{
  text-align:left; font-weight:500; line-height:1.45;
  color:var(--c-accent);
}
.yarpp-related li a:hover{color:var(--c-accent-dark);}

/* вариант с миниатюрами */
.yarpp-thumbnails-horizontal{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:18px; margin:0;
}
.yarpp-thumbnails-horizontal a.block{
  display:block; text-decoration:none;
  background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--radius); overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
.yarpp-thumbnails-horizontal a.block:hover{
  box-shadow:var(--shadow); transform:translateY(-2px); text-decoration:none;
}
.yarpp-thumbnails-horizontal img{
  width:100%; height:120px; object-fit:cover; display:block; margin:0;
}
.yarpp-thumbnail-title{
  padding:10px 12px; font-size:.85rem; line-height:1.35;
  color:var(--c-text); font-weight:500;
}

/* ==========================================================================
   8. Места под рекламу — пустые и скрытые (включаются снятием .ads-off)
   ========================================================================== */
.ad-slot{
  display:block; margin:28px 0;
  text-align:center; overflow:hidden;
}
.ad-slot--after-intro{min-height:250px;}
.ad-slot--in-content{min-height:250px;}
.ad-slot--after-content{min-height:280px;}
.ad-slot--sidebar{min-height:600px; position:sticky; top:20px;}

body.ads-off .ad-slot{display:none !important; min-height:0 !important;}

/* ==========================================================================
   9. Сайдбар
   ========================================================================== */
/* Родитель верстает сайдбар флоатами (.sidebar float:right, .new-post float:left,
   .new-post img float:left) и они нигде не очищаются — карточки схлопываются,
   текст вылезает наружу. Переводим всё на flex. */
body .sidebar{
  float:none !important; width:auto !important; margin:0 !important;
  font-size:.95rem;
}

body .sidebar .widget,
body .sidebar .wid,
body .sidebar .wid2{
  float:none !important; clear:none !important;
  width:auto !important; margin:0 0 22px !important;
  padding:20px !important;
  background:var(--c-bg-alt) !important;
  border:1px solid var(--c-border) !important;  /* вместо жёлтой рамки 5px */
  border-radius:var(--radius);
  overflow:hidden;                               /* страхуем от вылезания */
}

body .sidebar .widgettitle,
body .sidebar div.widgettitle,
body .sidebar .widget-title,
body .sidebar h3{
  float:none !important; width:auto !important;
  margin:0 0 .9em !important; padding:0;
  font-family:var(--font-head); font-size:1.05rem; font-weight:700;
  line-height:1.3; color:var(--c-text);
}

body .sidebar ul,body .sidebar ol{list-style:none; margin:0; padding:0;}
body .sidebar ul li,body .sidebar ol li{
  margin:0 0 .7em !important; padding:0 !important;
  line-height:1.45; font-size:.95rem;
}
body .sidebar li:last-child{margin-bottom:0 !important;}

/* «›» перед пунктами — аккуратнее и в цвет */
body .sidebar ul li:before{
  content:'›'; padding-right:8px;
  font-size:1rem; line-height:inherit; font-weight:700;
  color:var(--c-accent);
}
body .sidebar ul#recentcomments li:before{content:''; padding:0;}

/* Список рубрик */
.new-cat ul li{
  margin:0 !important; padding:8px 0 !important;
  font-size:.95rem; font-weight:600; line-height:1.4;
}
.new-cat ul li:hover{background:none;}
.new-cat ul li a{color:var(--c-text);}
.new-cat ul li a:hover{color:var(--c-accent);}

/* «Последние публикации». Разметка родителя: .new-post — обёртка записи,
   а картинка и текст лежат внутри .desc. Flex вешаем на .desc, иначе
   записи выстраиваются в строку. */
body .sidebar .new-post{
  display:block !important;
  float:none !important; clear:none !important;
  width:auto !important;
  margin:0 0 18px !important;
  padding:0 0 18px !important;
  border-bottom:1px solid var(--c-border);
}
body .sidebar .new-post:last-child{
  margin-bottom:0 !important; padding-bottom:0 !important; border-bottom:none;
}
/* между блоком заголовка и первой записью */
body .sidebar .widgettitle + .new-post{margin-top:4px !important;}

/* Картинка и текст — соседи внутри .desc, обёртки для текста нет.
   Grid с двумя колонками: картинка в первой, весь текст переносится
   во вторую. Обтекания нет — строки не подтекают под картинку. */
/* Порядок в .desc: <a><img></a>, затем <span>рубрика</span> и <a>заголовок</a>.
   Обёртки для текста нет, поэтому картинку ставим абсолютом в левый угол,
   а тексту даём отступ слева. Обтекания нет — строки идут ровной колонкой. */
body .sidebar .new-post .desc{
  position:relative;
  display:block; min-height:78px;
  padding-left:94px;
  float:none !important; clear:none !important;
  margin:0 !important; line-height:1.5; font-size:.87rem;
}
body .sidebar .new-post .desc > a:first-child{
  position:absolute; top:0; left:0;
  width:78px; height:78px; line-height:0;
}
body .sidebar .new-post .desc img{
  float:none !important; display:block;
  width:78px !important; height:78px !important;
  object-fit:cover; border-radius:8px; margin:0 !important;
}
/* запись без картинки — без пустого отступа */
body .sidebar .new-post .desc:not(:has(img)){
  padding-left:0; min-height:0;
}
body .sidebar .new-post .desc a{text-decoration:none;}
body .sidebar .new-post .desc a:hover{text-decoration:underline;}
body .sidebar .new-post h4.side-title-post,
body .sidebar .new-post div.side-title-post{
  display:inline; margin:0; font-size:.87rem; font-weight:500;
}
body .sidebar .new-post span a{color:var(--c-muted); font-size:.8rem;}

/* «Обсуждения» — последние комментарии */
ul#recentcomments li{
  margin:0 0 12px !important; padding:0 0 12px !important;
  font-size:.88rem; line-height:1.45;
  border-bottom:1px solid var(--c-border);
}
ul#recentcomments li:last-child{
  margin-bottom:0 !important; padding-bottom:0 !important; border-bottom:none;
}
ul#recentcomments li a{text-decoration:none; color:var(--c-accent);}
ul#recentcomments li a:hover{text-decoration:underline;}

/* Текстовые виджеты: родитель задаёт им margin:0 20px — внутри карточки лишнее */
.sidebar .textwidget{margin:0 !important;}
.sidebar .textwidget ul.age{margin:0 !important;}

/* Пустые виджеты — на случай, если появятся снова */
.sidebar .widget:empty{display:none !important;}

/* ==========================================================================
   10. Подвал
   ========================================================================== */
/* Подвал — тёмная полоса во всю ширину, содержимое по контейнеру */
body .footer{
  float:none; width:100% !important; max-width:none !important;
  clear:both; padding:44px 0 !important; margin-top:60px;
  background:#4E4669; color:#b9b4c9;
  font-size:.92rem; line-height:1.6;
}
body .footer::before{content:none;}
body .footer .wrapper2{
  display:flex; gap:48px; flex-wrap:wrap;
  max-width:var(--container) !important; margin:0 auto !important;
  padding:0 24px !important;
}
.fc{
  display:block; float:none;
  flex:1 1 280px; width:auto !important; margin:0 !important;
}
.footer a{color:#fff;}
.footer a:hover{color:#fff; text-decoration:underline;}
.footer p{font-size:.88rem; line-height:1.6; margin:0 0 .9em;}
.footer .fc p{margin:0 0 .9em !important;}
/* Ссылки-рубрики в подвале: родитель даёт им display:block, но при
   перекрытии ширины они слипались в строку без пробелов. */
.fc a.fa{
  display:block !important; clear:none;
  width:auto !important;
  margin:0 0 .6em !important;
  padding:0 !important; color:#fff;
  line-height:1.4;
}
.fc p span{
  float:none; display:inline-block; vertical-align:middle;
  color:#fff; line-height:1.2; font-size:1.5rem; font-weight:700;
  margin-right:14px;
}
.logo-footer img{max-height:38px; width:auto; margin-bottom:14px;}

.to_top{margin:30px 0;}

/* ==========================================================================
   11. Адаптив — четыре точки вместо девяти
   ========================================================================== */

/* планшет */
@media (max-width:1024px){
  :root{--fs-base:17px;}
  body .main{gap:32px;}
  .sidebar{flex:0 0 300px;}
}

/* сайдбар вниз */
@media (max-width:900px){
  body .main{flex-direction:column; gap:0;}
  .content{max-width:100%;}
  .sidebar{flex:1 1 auto; width:100% !important;}
  .ad-slot--sidebar{position:static; min-height:250px;}
}

/* мобильный */
@media (max-width:768px){
  :root{--fs-base:17px; --gap:16px;}
  h1{font-size:1.6rem;}
  h2{font-size:1.32rem; margin-top:1.7em;}
  h3{font-size:1.12rem;}

  /* На телефоне — облегчённая и кадрированная версия: вырезан левый фрагмент
     с лицом, чтобы оно попадало в кадр при узком экране. */
  body .wrapper:has(> .header2){
    background-image:image-set(
      url('images/hd_bg-sm.webp') type('image/webp'),
      url('images/hd_bg-sm.jpg') type('image/jpeg')
    );
    background-position:38% center;
    background-size:cover;
  }
  /* На телефоне превью статей убираем — остаётся только иллюстрация,
     кадрированная так, чтобы лицо попадало в кадр. */
  .hd_posts{display:none !important;}

  body .header2{
    min-height:200px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:flex-end;          /* поиск внизу, лицо сверху видно */
    padding-top:20px !important; padding-bottom:20px !important;
  }
  .hd_search{
    margin:0 !important;
    max-width:100%; width:100%;
  }

  body .header,
  body .header2,
  body .navigation,
  body .main,
  body .wrapper2{padding-left:16px !important; padding-right:16px !important;}
  body .header{padding-top:14px !important; padding-bottom:14px !important;}
  body .header2{padding-top:18px !important; padding-bottom:18px !important;}

  /* логотип и название — прижаты влево, не вылезают за экран */
  body .header{justify-content:flex-start !important;}
  .logo{flex:0 1 auto; min-width:0; margin-right:auto !important;}
  .logo a{min-width:0;}
  .logo img{height:32px !important;}

  /* блок «популярное» родитель прячет на узких экранах (max-width:620px) —
     оставляем так, он там лишний */

  .hd_posts{gap:12px;}
  .hd_post{flex:1 1 90px; min-width:90px;}
  .hd_post_thumb a{width:66px; height:66px;}
  .hd_post_title a{font-size:.76rem;}

  /* меню — бургер */
  /* .navigation наследует flex от общих правил — кнопка уезжала вниз */
  body .navigation{
    display:block !important;
    min-height:0 !important;
  }
  #mainnav-icon{
    display:block;
    padding:15px 0 !important;
    line-height:1.2;
  }
  #mainnav-menu{display:none; float:none; width:100%;}
  #mainnav-menu.open{display:block;}
  #mainnav-menu ul{flex-direction:column; float:none; width:100%;}
  #mainnav-menu ul li{width:100%; float:none;}
  #mainnav-menu ul li a{
    padding:13px 16px; border-top:1px solid rgba(255,255,255,.14);
  }

  /* --- Мобильное меню: правки после проверки на 412px ---------------------
     1) Раскрытое меню упиралось в пустую фиолетовую полосу снизу: у
        #mainnav-menu был padding-bottom:30px от общих правил.
     2) Подсветка пункта обрывалась, не доходя до краёв экрана: .navigation
        даёт боковые отступы 16px, из-за чего меню было 380px при фоне 412px.
        Растягиваем пункты на всю ширину отрицательными отступами.          */
  #mainnav-menu{padding:0 !important; margin:0;}
  #mainnav-menu ul{margin:0; padding:0;}
  #mainnav-menu ul li a{
    margin:0 -16px;               /* компенсируем padding контейнера */
    padding:14px 16px;            /* текст остаётся на месте */
    border-top:1px solid rgba(255,255,255,.14);
  }
  /* нижняя граница у последнего пункта, чтобы список не обрывался */
  #mainnav-menu ul li:last-child a{
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  /* подсветка активного и нажатого пункта — во всю ширину */
  #mainnav-menu ul li a:active,
  #mainnav-menu ul li a:focus,
  #mainnav-menu .current-menu-item > a,
  #mainnav-menu .current-menu-ancestor > a{
    background:rgba(255,255,255,.16);
    color:#fff;
  }
  /* Родительская тема (hhc/style.css:274) задаёт кнопке width:90% и розовую
     подсветку при наведении — из-за этого она обрывалась, не доходя до
     правого края, и меняла цвет. Возвращаем полную ширину и фон меню.      */
  #mainnav-icon{
    width:auto !important;
    height:auto !important;
    background:var(--c-accent) !important;
    margin:0 -16px;
    padding:15px 16px !important;
    line-height:1.3;
    font-size:1rem;
  }
  /* на тач-экране :hover залипает после нажатия — подсветку только на нажатие */
  #mainnav-icon:hover{background:var(--c-accent) !important;}
  #mainnav-icon:active{background:rgba(255,255,255,.16) !important;}
  #mainnav-icon span{margin:0 10px 0 0; font-size:1rem; line-height:inherit;}


  .footer .wrapper2{gap:24px;}
  .post-author{flex-direction:column; text-align:center;}
  .post-author__avatar{margin:0 auto;}

  /* на узком экране обтекание нечитаемо — картинки на всю ширину */
  .content img.alignleft,.content .alignleft,
  .content img.alignright,.content .alignright{
    float:none !important; display:block;
    max-width:100% !important; width:auto;
    margin:1.4em auto !important;
  }
  .content .wp-caption{width:auto !important;}
}

/* узкий мобильный */
@media (max-width:420px){
  h1{font-size:1.42rem;}
  .hd_post{flex:1 1 74px; min-width:74px;}
  .hd_post_thumb a{width:58px; height:58px;}
  .content table{font-size:.87rem;}

  /* родитель на 400px задаёт .logo img{width:250px} — распирает шапку */
  body .logo img{width:auto !important; height:28px !important;}

}

/* ==========================================================================
   12. Печать и доступность
   ========================================================================== */
@media print{
  .navigation,.sidebar,.ad-slot,.header2,.to_top,.footer{display:none;}
  .content{max-width:100%;}
}

:focus-visible{outline:2px solid var(--c-accent); outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}