/*
Theme Name: Chagbig
Theme URI: https://chagbig.ru/
Description: Дочерняя тема для chagbig.ru: личный блог и раздел услуг 1С. Только типографика, светлая и тёмная палитры с переключением. Собрана по docs/site-redesign-plan.md, этап 5.
Author: Chagbig
Template: twentytwentyfive
Version: 1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: chagbig
*/

/* Шрифты в теме, а не с чужого сервера: ни одного стороннего запроса при
   заходе на сайт. Literata и Golos Text — вариативные, поэтому один файл
   покрывает весь диапазон весов; отсюда font-weight двумя числами. */
@font-face{
  font-family:"Literata";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/literata-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Literata";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/literata-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Literata";
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/literata-400i-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Literata";
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/literata-400i-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Golos Text";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/golos-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Golos Text";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/golos-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/plexmono-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────────────────────
   Палитры. theme.json ссылается на эти переменные, поэтому цвет задаётся
   в одном месте, а тёмная тема получается подменой значений.

   Три состояния, а не два: явный выбор ставит data-tema на корне, а по
   умолчанию его нет — тогда решает системная настройка. Ни один цвет не
   определяется только внутри медиазапроса: иначе в состоянии «без выбора»
   он просто не применился бы.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --fon:#FAFBFC;
  --plita:#F1F4F6;
  --tekst:#12181D;
  --tihiy:#4C5860;        /* 7.06:1 на фоне — этап 4 */
  --akcent:#1F5F7A;       /* 6.81:1 */
  --linia:#DDE3E7;        /* декоративная линейка */
  --linia-el:#84919C;     /* граница элемента управления, 3.11:1 */
  --vydelenie:#E8F0F4;

  --mera:38rem;           /* мера чтения, около 68 знаков */
  --shag:8px;             /* шаг ритма */
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svetlaya"]){
    --fon:#0E1418;
    --plita:#161E24;
    --tekst:#E7EDF1;
    --tihiy:#93A3AE;      /* 7.15:1 */
    --akcent:#6FB3CE;     /* 7.96:1 */
    --linia:#243039;
    --linia-el:#566B77;   /* 3.33:1 */
    --vydelenie:#16252D;
  }
}
:root[data-tema="temnaya"]{
  --fon:#0E1418;
  --plita:#161E24;
  --tekst:#E7EDF1;
  --tihiy:#93A3AE;
  --akcent:#6FB3CE;
  --linia:#243039;
  --linia-el:#566B77;
  --vydelenie:#16252D;
}

/* ── Основа ─────────────────────────────────────────────────────────── */
body{
  background:var(--fon);
  color:var(--tekst);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--akcent)}
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--akcent);
  outline-offset:2px;
  border-radius:2px;
}

/* ── Шапка сайта ──────────────────────────────────────────────────────
   Часть шаблона отрисовывается вне ограниченной раскладки, поэтому ширину
   задаём здесь: иначе заголовок сайта прижимается к левому краю экрана, а
   навигация улетает к правому, и шапка перестаёт совпадать с колонкой
   содержимого. Найдено при сдаче этапа 5 по снимку экрана.               */
.shapka-sajta,
.podval-sajta{
  max-width:58rem; width:100%; margin-inline:auto;
}
.shapka-sajta{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:calc(var(--shag) * 2.5); flex-wrap:wrap;
  padding-bottom:calc(var(--shag) * 2);
  border-bottom:1px solid var(--linia);
  margin-bottom:calc(var(--shag) * 2);
}
.shapka-sajta .wp-block-site-title{
  font-family:Literata,Georgia,serif; font-weight:600; font-size:21px;
  letter-spacing:-0.01em; line-height:1.2; margin:0;
}
.shapka-sajta .wp-block-site-title a{color:var(--tekst); text-decoration:none}
.shapka-sajta .wp-block-site-tagline{
  font-size:12.5px; color:var(--tihiy); margin:2px 0 0; letter-spacing:0.02em;
}
.navigaciya{display:flex; align-items:center; gap:calc(var(--shag) * 2.75); flex-wrap:wrap}
.navigaciya .wp-block-navigation__container{gap:calc(var(--shag) * 2.75)}
.navigaciya a{
  color:var(--tekst); text-decoration:none; font-size:14px;
  border-bottom:1px solid transparent;
  padding:5px 2px 4px; min-height:28px;      /* минимум цели нажатия — этап 4 */
  display:inline-flex; align-items:center;
}
.navigaciya a:hover{border-bottom-color:var(--linia-el)}
.navigaciya .current-menu-item a{border-bottom-color:var(--akcent)}

/* ── Переключатель темы ─────────────────────────────────────────────────
   Скрыт, пока скрипт не сообщил о себе классом est-js: без JavaScript
   кнопка не работала бы, а мёртвых органов управления быть не должно.
   Сайт при этом остаётся читаемым — действует системная тема.          */
.perekluchatel-temy{display:none}
.est-js .perekluchatel-temy{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  color:var(--tihiy); background:transparent;
  border:1px solid var(--linia-el); border-radius:2px;
  padding:6px 10px; min-height:28px; cursor:pointer;
}
.perekluchatel-temy:hover{color:var(--tekst); border-color:var(--akcent)}

/* ── Лента записей ──────────────────────────────────────────────────── */
.lenta .wp-block-post{
  display:grid; grid-template-columns:104px minmax(0,1fr);
  gap:calc(var(--shag) * 3.25);
  padding:calc(var(--shag) * 3) 0;
  border-bottom:1px solid var(--linia);
}
.lenta .wp-block-post:last-child{border-bottom:0}
.polya{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  color:var(--tihiy); line-height:1.7; padding-top:5px;
  display:flex; flex-direction:column; gap:2px;
}
.polya a{color:var(--tihiy); text-decoration:none}
.polya a:hover{color:var(--akcent)}
.lenta .wp-block-post-title{
  font-family:Literata,Georgia,serif; font-weight:600; font-size:20px;
  line-height:1.3; letter-spacing:-0.005em; margin:0 0 6px;
}
.lenta .wp-block-post-title a{color:var(--tekst); text-decoration:none}
.lenta .wp-block-post-title a:hover{color:var(--akcent)}
.lenta .wp-block-post-excerpt{margin:0}
.lenta .wp-block-post-excerpt__excerpt{
  color:var(--tihiy); font-size:15px; margin:0; max-width:64ch;
}
@media (max-width:640px){
  .lenta .wp-block-post{grid-template-columns:1fr; gap:6px}
  .polya{padding-top:0; flex-direction:row; gap:calc(var(--shag) * 1.5)}
}

/* ── Запись и страница ──────────────────────────────────────────────── */
.polya-zapisi{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  color:var(--tihiy); letter-spacing:0.05em; text-transform:uppercase;
  display:flex; gap:calc(var(--shag) * 1.5); flex-wrap:wrap;
}
.polya-zapisi a{color:var(--tihiy); text-decoration:none}
.zagolovok-zapisi{
  font-family:Literata,Georgia,serif; font-weight:600;
  font-size:clamp(26px,3.6vw,36px); line-height:1.2; letter-spacing:-0.015em;
  text-wrap:balance; margin:calc(var(--shag) * 2) 0 calc(var(--shag) * 1.25);
}
.telo-zapisi{max-width:var(--mera)}
.telo-zapisi p,
.telo-zapisi li{
  font-family:Literata,Georgia,serif; font-size:17.5px; line-height:1.72;
}
.telo-zapisi p{margin:calc(var(--shag) * 2.25) 0}
.telo-zapisi h2,.telo-zapisi h3,.telo-zapisi h4{
  font-family:Literata,Georgia,serif; font-weight:600; line-height:1.3;
  margin:calc(var(--shag) * 4) 0 calc(var(--shag) * 1.5);
}
.telo-zapisi h2{font-size:24px}
.telo-zapisi h3{font-size:20px}
.telo-zapisi blockquote{
  margin:calc(var(--shag) * 3) 0; padding-left:calc(var(--shag) * 2.5);
  border-left:2px solid var(--akcent);
  font-family:Literata,Georgia,serif; font-style:italic; color:var(--tihiy);
}
.telo-zapisi img{height:auto; max-width:100%; border-radius:2px}
.telo-zapisi figure{margin:calc(var(--shag) * 3) 0}
.telo-zapisi figcaption{
  font-size:13px; color:var(--tihiy); margin-top:calc(var(--shag));
}
.telo-zapisi pre{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:14px;
  background:var(--plita); padding:calc(var(--shag) * 2);
  border-radius:2px; overflow-x:auto;
}
.telo-zapisi code{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:0.88em;
  background:var(--plita); padding:1px 5px; border-radius:2px;
}

/* ── Блок услуг на главной ──────────────────────────────────────────── */
.blok-uslug{
  background:var(--vydelenie); border-radius:3px;
  padding:calc(var(--shag) * 2.75) calc(var(--shag) * 3);
  margin:0 0 calc(var(--shag) * 2);
}
.blok-uslug .metka{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--tihiy);
  margin:0 0 calc(var(--shag));
}
.blok-uslug p{margin:0; font-size:15.5px; max-width:62ch}

/* ── Страница услуг ─────────────────────────────────────────────────── */
.uslugi{margin:calc(var(--shag) * 3) 0 0}
.uslugi .usluga{
  display:grid; grid-template-columns:132px minmax(0,1fr);
  gap:calc(var(--shag) * 3.25);
  padding:calc(var(--shag) * 2.5) 0;
  border-bottom:1px solid var(--linia);
}
.uslugi .usluga:last-child{border-bottom:0}
.uslugi .registr{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--akcent);
  padding-top:4px;
}
.uslugi .opisanie{font-size:16.5px; line-height:1.5; max-width:60ch}
@media (max-width:640px){
  .uslugi .usluga{grid-template-columns:1fr; gap:4px}
}

/* ── Комментарии ────────────────────────────────────────────────────── */
.wp-block-comments{margin-top:calc(var(--shag) * 6); max-width:var(--mera)}
.wp-block-comments-title{
  font-family:Literata,Georgia,serif; font-size:20px; font-weight:600;
  margin-bottom:calc(var(--shag) * 2);
}
.wp-block-comment-author-name{font-weight:600; font-size:15px}
.wp-block-comment-date{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px;
  color:var(--tihiy);
}
.wp-block-comment-content p{font-size:16px; line-height:1.6}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
  font:inherit; font-size:15px; width:100%; max-width:32rem;
  padding:9px 12px; border:1px solid var(--linia-el); border-radius:2px;
  background:var(--fon); color:var(--tekst);
}
.comment-respond .submit,
.wp-block-search__button,
.wp-element-button{
  font:inherit; font-size:15px; padding:9px 18px; cursor:pointer;
  border:1px solid var(--akcent); background:var(--akcent); color:var(--fon);
  border-radius:2px; min-height:28px;
}

/* ── Поиск ──────────────────────────────────────────────────────────── */
.wp-block-search__input{
  font:inherit; font-size:15px; padding:9px 12px;
  border:1px solid var(--linia-el); border-radius:2px;
  background:var(--fon); color:var(--tekst);
}

/* ── Постраничная навигация ─────────────────────────────────────────── */
.wp-block-query-pagination{
  margin-top:calc(var(--shag) * 4); display:flex;
  gap:calc(var(--shag) * 2); font-size:14px;
}
.wp-block-query-pagination a{text-decoration:none}

/* ── Пустые состояния: 404 и «ничего не нашлось» ────────────────────── */
/* Ширину здесь задавать НЕЛЬЗЯ: .pusto висит на самом <main>, и max-width
   сужал его без центрирования — блок уезжал к левому краю. Ширину колонки
   держит ограниченная раскладка блока, а мы ограничиваем только текст. */
.pusto{padding:calc(var(--shag) * 4) 0 var(--shag)}
.pusto h1,.pusto p{max-width:56ch}
.pusto .kod-oshibki{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:48px;
  color:var(--linia); line-height:1; margin:0 0 calc(var(--shag) * 2);
}
.pusto h1{font-family:Literata,Georgia,serif; font-size:26px; margin:0 0 var(--shag)}
.pusto p{color:var(--tihiy); margin:0}

/* ── Подвал ─────────────────────────────────────────────────────────── */
.podval-sajta{
  margin-top:calc(var(--shag) * 6); padding-top:calc(var(--shag) * 2);
  border-top:1px solid var(--linia);
  display:flex; justify-content:space-between; gap:calc(var(--shag) * 2);
  flex-wrap:wrap; font-size:13px; color:var(--tihiy);
}
.podval-sajta a{color:var(--tihiy)}
.podval-sajta a:hover{color:var(--akcent)}

@media (prefers-reduced-motion: no-preference){
  a,.perekluchatel-temy{transition:color .15s ease, border-color .15s ease}
}