/*
Theme Name: Мир в войне
Theme URI: https://mirvvoyne.ru/
Description: Дочерняя тема для военно-исторического проекта «Мир в войне». Playfair Display и Golos Text, тёмно-синяя палитра, адаптивная вёрстка без слайдеров и конструкторов.
Author: m-lotos
Template: twentytwentyone
Version: 1.0
Text Domain: mirvvoyne
*/

:root {
  --mv-dark:#1B2A3A; --mv-dark2:#2A3F53;
  --mv-accent:#3D6284; --mv-accent-h:#4B769C;
  --mv-ice:#A9C3D8; --mv-gold:#A8791F;
  --mv-ink:#233140; --mv-muted:#5C6B79;
  --mv-line:#E1E7ED; --mv-soft:#EDF2F7;
  --mv-bg:#F4F6F9; --mv-bg2:#DFE5EC;
  --mv-r:8px; --mv-r-lg:16px; --mv-r-btn:999px;
  --mv-shadow:0 4px 16px rgba(27,42,58,.06);
  --mv-font:"Golos Text",Roboto,Arial,sans-serif;
  --mv-font-head:"Playfair Display",Georgia,serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--mv-font); color: var(--mv-ink); font-size:17px; line-height:1.6;
  background: linear-gradient(180deg, var(--mv-bg) 0%, var(--mv-bg) 30%, var(--mv-bg2) 100%);
  background-attachment: fixed; -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; }
a { color: var(--mv-accent); }
a:hover { color: var(--mv-accent-h); }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:8px; top:8px; background:#fff; padding:10px 16px; border-radius:var(--mv-r); z-index:100; }

/* Шапка */
.topbar { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--mv-line); }
.topbar-in { display:flex; align-items:center; gap:24px; min-height:72px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; white-space:nowrap; }
.logo .mark { width:34px; height:34px; border-radius:50%; background:var(--mv-dark); display:flex; align-items:center; justify-content:center; }
.logo .name { font-family:var(--mv-font-head); font-size:25px; font-weight:600; color:var(--mv-dark); }
.topnav { flex-grow:1; }
.topnav ul { display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.topnav a { font-size:15px; font-weight:500; color:var(--mv-dark); text-decoration:none; }
.topnav a:hover { color:var(--mv-accent); }
.nav-toggle { display:none; height:44px; padding:0 16px; border:1px solid var(--mv-line); background:#fff;
  border-radius:var(--mv-r-btn); font-family:inherit; font-size:15px; color:var(--mv-dark); cursor:pointer; }

.btn { display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 26px;
  font-family:inherit; font-size:15px; font-weight:500; border-radius:var(--mv-r-btn);
  border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease; }
.btn-primary { background:var(--mv-accent); color:#fff; }
.btn-primary:hover { background:var(--mv-accent-h); color:#fff; }
.btn-ghost { background:#fff; color:var(--mv-dark); border-color:var(--mv-line); box-shadow:var(--mv-shadow); }
.btn-ghost:hover { border-color:var(--mv-accent); color:var(--mv-accent); }

.crumbs { padding:22px 0 0; font-size:14px; color:var(--mv-muted); }
.crumbs a { text-decoration:none; }
.crumbs .sep { color:#A9B6C2; padding:0 6px; }

.cols { display:flex; gap:40px; align-items:flex-start; padding-top:12px; }
.main { flex:1 1 720px; min-width:0; }
.side { flex:0 0 320px; display:flex; flex-direction:column; gap:20px; }

.kicker { font-size:13px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--mv-accent); }
h1 { margin:16px 0 0; font-family:var(--mv-font-head); font-size:clamp(28px,4.2vw,46px);
  font-weight:600; line-height:1.15; letter-spacing:-0.5px; color:var(--mv-dark); }
h2 { margin:42px 0 0; font-family:var(--mv-font-head); font-size:clamp(22px,3vw,31px); font-weight:600; line-height:1.25; color:var(--mv-dark); }
h3 { margin:30px 0 0; font-family:var(--mv-font-head); font-size:22px; font-weight:600; color:var(--mv-dark); }
.byline { margin-top:18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--mv-muted); }
.byline .d { width:1px; height:14px; background:#C8D3DC; }
.lead { margin:24px 0 0; font-size:19px; line-height:1.65; }

.card { background:#fff; border:1px solid var(--mv-line); border-radius:var(--mv-r-lg); box-shadow:var(--mv-shadow); }

.entry-content p { margin:16px 0 0; font-size:17px; line-height:1.75; }
.entry-content ul, .entry-content ol { margin:16px 0 0; padding-left:22px; }
.entry-content li { margin:6px 0; line-height:1.7; }
.entry-content blockquote { margin:26px 0 0; padding:22px 26px; border-radius:var(--mv-r-lg);
  background:var(--mv-soft); border:1px solid var(--mv-line); }
.entry-content blockquote p:first-child { margin-top:0; }
.entry-content img { border-radius:var(--mv-r-lg); }
.entry-content table { margin-top:20px; width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--mv-line); border-radius:var(--mv-r-lg); overflow:hidden; box-shadow:var(--mv-shadow); }
.entry-content th { text-align:left; padding:14px 18px; font-size:14px; font-weight:600; color:var(--mv-dark);
  background:var(--mv-soft); border-bottom:1px solid var(--mv-line); }
.entry-content td { padding:13px 18px; font-size:15px; border-bottom:1px solid var(--mv-line); }
.entry-content tr:last-child td { border-bottom:0; }
.archive-note { margin-top:26px; padding:18px 22px; border-radius:var(--mv-r); background:var(--mv-soft);
  border:1px solid var(--mv-line); font-size:15px; color:var(--mv-muted); }

/* Лента и карточки */
.feed { margin-top:24px; display:flex; flex-direction:column; gap:18px; }
.item { padding:24px 26px; }
.item .cat { font-size:13px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--mv-accent); text-decoration:none; }
.item h2, .item h1 { margin:10px 0 0; font-size:clamp(20px,2.4vw,26px); }
.item h2 a { color:var(--mv-dark); text-decoration:none; }
.item h2 a:hover { color:var(--mv-accent); }
.item .meta { margin-top:10px; font-size:13px; color:var(--mv-muted); display:flex; gap:12px; flex-wrap:wrap; }
.item .ex { margin-top:12px; font-size:16px; line-height:1.65; color:var(--mv-ink); }

.side .box { padding:22px 24px; }
.side .t { font-size:13px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--mv-muted); }
.side .links { margin-top:14px; display:flex; flex-direction:column; }
.side .links a { font-family:var(--mv-font-head); font-size:17px; font-weight:600; line-height:1.35;
  color:var(--mv-dark); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--mv-line); }
.side .links a:last-child { border-bottom:0; padding-bottom:0; }
.side .links a:hover { color:var(--mv-accent); }
.side .links .n { font-family:var(--mv-font); font-size:13px; font-weight:400; color:var(--mv-muted); }

/* Комментарии */
.comments { margin-top:44px; padding-top:28px; border-top:1px solid var(--mv-line); }
.comments h2 { margin-top:0; }
.comment-list { list-style:none; margin:0; padding:0; }
.comment-list ul.children { list-style:none; margin:0 0 0 24px; padding:0; }
.comment-body { margin-top:18px; padding:20px 22px; background:#fff; border:1px solid var(--mv-line);
  border-radius:var(--mv-r-lg); box-shadow:var(--mv-shadow); }
.comment-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.avatar-ini { width:40px; height:40px; border-radius:50%; background:var(--mv-soft); display:flex;
  align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--mv-accent); flex-shrink:0; }
.comment-who { font-size:15px; font-weight:600; color:var(--mv-dark); }
.comment-when { font-size:13px; color:var(--mv-muted); }
.comment-text p { margin:12px 0 0; font-size:16px; line-height:1.7; }
.comment-respond { margin-top:32px; padding:24px 26px; background:#fff; border:1px solid var(--mv-line);
  border-radius:var(--mv-r-lg); box-shadow:var(--mv-shadow); }
.comment-form label { display:block; margin-bottom:6px; font-size:14px; color:var(--mv-muted); }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
  width:100%; padding:13px 16px; font-family:inherit; font-size:15px; color:var(--mv-ink);
  border:1px solid var(--mv-line); border-radius:var(--mv-r); background:#fff; }
.comment-form textarea { resize:vertical; min-height:120px; }
.comment-form input:focus, .comment-form textarea:focus { outline:2px solid var(--mv-accent); outline-offset:1px; }
.comment-form .form-submit input { height:46px; padding:0 26px; border:0; border-radius:var(--mv-r-btn);
  background:var(--mv-accent); color:#fff; font-family:inherit; font-size:15px; font-weight:500; cursor:pointer; }
.comment-form .form-submit input:hover { background:var(--mv-accent-h); }

/* Постраничная навигация */
.pager { margin-top:36px; display:flex; gap:10px; flex-wrap:wrap; }
.pager .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px;
  padding:0 14px; background:#fff; border:1px solid var(--mv-line); border-radius:var(--mv-r-btn);
  text-decoration:none; color:var(--mv-dark); font-size:15px; }
.pager .page-numbers.current { background:var(--mv-accent); border-color:var(--mv-accent); color:#fff; }
.pager .page-numbers:hover { border-color:var(--mv-accent); }

/* Подвал */
.site-footer { margin-top:72px; background:#fff; border-top:1px solid var(--mv-line); }
.foot-top { padding:36px 0; display:flex; gap:32px; flex-wrap:wrap; justify-content:space-between; }
.foot-col .t { font-size:13px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--mv-muted); }
.foot-col ul { list-style:none; margin:12px 0 0; padding:0; }
.foot-col li { margin:8px 0; }
.foot-col a { font-size:15px; color:var(--mv-dark); text-decoration:none; }
.foot-col a:hover { color:var(--mv-accent); }
.foot-bottom { padding:20px 0 28px; font-size:13px; color:var(--mv-muted); display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--mv-line); }

@media (max-width:1040px) {
  .cols { flex-direction:column; }
  .side { flex:1 1 auto; width:100%; }
}
@media (max-width:720px) {
  body { font-size:16px; }
  .wrap { padding:0 16px; }
  .topbar-in { flex-wrap:wrap; gap:12px; padding:12px 0; }
  .nav-toggle { display:inline-flex; align-items:center; }
  .topnav { flex-basis:100%; display:none; }
  .topnav.open { display:block; }
  .topnav ul { flex-direction:column; gap:0; }
  .topnav li { border-top:1px solid var(--mv-line); }
  .topnav a { display:block; padding:12px 0; }
  .topbar .btn-primary { display:none; }
  .item { padding:20px; }
  .comment-list ul.children { margin-left:12px; }
  .entry-content table { display:block; overflow-x:auto; }
}