/*
Theme Name: Воспитание Bento
Theme URI: https://pro-vospitanie-detey.ru/
Author: Растём вместе
Description: SEO-тема для информационного сайта о воспитании и развитии детей. Bento-UI, семантическая разметка, поддержка Yoast SEO, Breadcrumb NavXT, Easy Table of Contents, Post Views Counter. Тёплый редакционный стиль.
Version: 1.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU GPL v2 or later
Text Domain: vospitanie-bento
*/

:root{
  --bg:#FBF8F3; --surface:#FFFFFF; --ink:#221F1B; --muted:#6B635A;
  --line:#EBE4D9; --accent:#D9663F; --accent-soft:#FBEDE6; --green:#3F7A5E;
  --green-soft:#EDF4EF; --blue-soft:#E9EEF4; --violet-soft:#EEEAF3;
  --shadow:0 1px 2px rgba(34,31,27,.04), 0 14px 34px -14px rgba(34,31,27,.14);
  --shadow-hover:0 2px 4px rgba(34,31,27,.06), 0 22px 44px -16px rgba(34,31,27,.22);
  --radius:22px; --radius-sm:14px;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.14;letter-spacing:-.01em;margin:0 0 .5em}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:#b8502e}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- ПРОМО-ПЛАШКА ---------- */
.topbar{background:var(--ink);color:#fff;display:flex;gap:16px;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:10px 20px;font-size:14.5px}
.topbar a{color:#fff;background:var(--accent);padding:7px 15px;border-radius:9px;font-weight:700;font-size:13.5px;white-space:nowrap}
.topbar a:hover{color:#fff;filter:brightness(1.06)}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.82);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.brand{font-family:'Fraunces',serif;font-size:23px;font-weight:600;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.brand b{color:var(--accent);font-weight:600}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block}
.main-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15.5px;font-weight:600}
.main-nav a{color:var(--muted)}
.main-nav a:hover,.main-nav .current-menu-item a{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--ink)}

/* ---------- BENTO GRID ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:36px 0}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;min-height:200px;text-decoration:none;color:var(--ink)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.tile .thumb{height:100%;min-height:150px;background-size:cover;background-position:center;flex:1}
.tile .pad{padding:22px 24px}
.tile .cat{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.tile h3{font-size:21px;margin:8px 0 0}
.tile p{margin:8px 0 0;font-size:15px;color:var(--muted);line-height:1.5}
.tile .meta{margin-top:auto;padding-top:14px;font-size:13px;color:var(--muted)}

/* размеры плиток */
.tile.col2{grid-column:span 2}
.tile.col4{grid-column:span 4}
.tile.row2{grid-row:span 2}

/* hero-плитка */
.tile.hero{grid-column:span 2;grid-row:span 2;min-height:420px;color:#fff;justify-content:flex-end}
.tile.hero .thumb{position:absolute;inset:0;min-height:0}
.tile.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,14,0) 30%,rgba(20,17,14,.82) 100%)}
.tile.hero .pad{position:relative;z-index:2;padding:30px}
.tile.hero .cat{color:#F3C3AC}
.tile.hero h2{font-size:clamp(26px,3vw,36px);color:#fff;margin:10px 0 0}
.tile.hero p{color:rgba(255,255,255,.85);font-size:16px}

/* цветные бренд-плитки */
.tile.brand-green{background:var(--green);color:#fff;border:0}
.tile.brand-green .cat{color:#BFE0CD}
.tile.brand-green h3{color:#fff}
.tile.brand-green p{color:rgba(255,255,255,.85)}
.tile.brand-accent{background:var(--accent);color:#fff;border:0}
.tile.brand-accent .cat{color:#FBD9C9}
.tile.brand-accent h3,.tile.brand-accent .btn{color:#fff}
.tile .btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;font-size:15px}
.tile.soft-green{background:var(--green-soft)}
.tile.soft-blue{background:var(--blue-soft)}
.tile.soft-violet{background:var(--violet-soft)}
.tile.soft-accent{background:var(--accent-soft)}

/* плитка-рубрика (иконка-эмодзи) */
.tile.cat-tile{min-height:150px;justify-content:center;align-items:flex-start}
.tile.cat-tile .ico{font-size:30px;line-height:1}
.tile.cat-tile h3{font-size:19px;margin-top:12px}
.tile.cat-tile .count{font-size:13px;color:var(--muted);margin-top:4px}

/* список популярного */
.tile.list .pad{display:flex;flex-direction:column;gap:2px}
.poplist{list-style:none;margin:10px 0 0;padding:0;counter-reset:pl}
.poplist li{counter-increment:pl;display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line);align-items:baseline}
.poplist li:first-child{border-top:0}
.poplist li::before{content:counter(pl);font-family:'Fraunces',serif;font-size:18px;color:var(--accent);font-weight:600;min-width:20px}
.poplist a{color:var(--ink);font-weight:600;font-size:15px;line-height:1.35}
.poplist a:hover{color:var(--accent)}

/* section heading */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:54px 0 4px}
.section-head h2{font-size:30px;margin:0}
.section-head a{font-size:15px;font-weight:600}

/* newsletter tile */
.tile.subscribe{background:var(--ink);color:#fff;border:0;justify-content:center}
.tile.subscribe .cat{color:#F0B79C}
.tile.subscribe h3{color:#fff;font-size:23px}
.tile.subscribe p{color:#C9C1B7}
.tile.subscribe form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.tile.subscribe input{flex:1;min-width:150px;padding:12px 14px;border-radius:11px;border:0;font-size:14px;font-family:inherit}
.tile.subscribe button{background:var(--accent);color:#fff;border:0;padding:12px 18px;border-radius:11px;font-weight:700;cursor:pointer;font-size:14px}

/* ---------- ARTICLE (single) ---------- */
.article{max-width:760px;margin:0 auto;padding:34px 24px 0}
.breadcrumbs{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--accent)}
.article .eyebrow{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700;padding:5px 13px;border-radius:20px;margin-bottom:16px}
.article h1{font-size:clamp(30px,4.5vw,44px);margin-bottom:16px}
.article .lede{font-size:20px;color:#433d36;line-height:1.55;margin-bottom:24px}
.post-meta{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px;font-size:14.5px;color:var(--muted)}
.post-meta .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#E8A07E,#D9663F);flex:0 0 auto}
.post-meta b{color:var(--ink)}
.post-meta .sep{opacity:.4}
.featured{border-radius:var(--radius);overflow:hidden;margin-bottom:34px;box-shadow:var(--shadow)}
.article-body{font-size:18px}
.article-body p{margin:0 0 22px}
.article-body h2{font-size:29px;margin:44px 0 14px}
.article-body h3{font-family:'Manrope',sans-serif;font-weight:700;font-size:21px;margin:30px 0 10px}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:0;list-style:none}
.article-body ul li{position:relative;padding-left:28px;margin-bottom:11px}
.article-body ul li::before{content:"";position:absolute;left:5px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.article-body ol{counter-reset:n}
.article-body ol li{counter-increment:n;position:relative;padding-left:36px;margin-bottom:11px}
.article-body ol li::before{content:counter(n);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.article-body blockquote{margin:28px 0;padding:18px 24px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0;font-size:19px;color:#433d36}
.article-body a{text-decoration:underline;text-underline-offset:3px}
.article-body img{border-radius:14px;margin:24px 0}

/* Easy TOC вписать в стиль */
#ez-toc-container,.ez-toc-container{background:#F5EFE6 !important;border:1px solid var(--line) !important;border-radius:var(--radius-sm) !important;padding:18px 22px !important}

/* author box */
.author-box{display:flex;gap:18px;background:#F5EFE6;border-radius:var(--radius);padding:24px;margin:46px 0}
.author-box .av{width:60px;height:60px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,#9CC2A8,#3F7A5E)}
.author-box b{font-size:16px}
.author-box .role{color:var(--green);font-size:14px;font-weight:600;margin:2px 0 8px}
.author-box p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}

/* tags */
.post-tags{margin:30px 0}
.post-tags a{display:inline-block;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px 14px;margin:0 6px 8px 0;font-size:13.5px;color:var(--muted)}
.post-tags a:hover{border-color:var(--accent);color:var(--accent)}

/* related */
.related{border-top:1px solid var(--line);margin-top:54px;padding-top:30px}
.related h2{font-size:26px;margin-bottom:20px}

/* CTA inside article */
.inline-cta{background:var(--accent-soft);border:1px solid #F2D8CB;border-radius:var(--radius);padding:24px 26px;margin:34px 0;display:flex;gap:18px;align-items:center}
.inline-cta .ico{font-size:30px}
.inline-cta strong{display:block;font-size:17px}
.inline-cta small{color:var(--muted);font-size:14.5px}
.inline-cta .go{margin-left:auto;background:var(--accent);color:#fff;padding:11px 20px;border-radius:11px;font-weight:700;white-space:nowrap}

/* archive header */
.archive-head{padding:44px 0 6px;text-align:center}
.archive-head .eyebrow{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.archive-head h1{font-size:clamp(30px,4vw,42px);margin:8px 0}
.archive-head p{color:var(--muted);max-width:600px;margin:0 auto}

/* pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin:44px 0;flex-wrap:wrap}
.pagination .page-numbers{padding:9px 15px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- FOOTER ---------- */
.site-footer{margin-top:74px;background:var(--ink);color:#B7AEA3;font-size:14.5px}
.site-footer .wrap{padding:48px 24px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.site-footer .brand{color:#fff;margin-bottom:10px}
.site-footer h4{color:#fff;font-family:'Manrope';font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0;line-height:2}
.site-footer a{color:#C9C1B7}
.site-footer a:hover{color:#fff}
.site-footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:13px;color:#8B837A}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile.hero{grid-column:span 2}
  .tile.col2,.tile.col4{grid-column:span 2}
}
@media(max-width:640px){
  body{font-size:17px}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:0;padding:12px 24px}
  .main-nav li{padding:10px 0;border-top:1px solid var(--line)}
  .nav-toggle{display:block}
  .bento{grid-template-columns:1fr;gap:14px}
  .tile.hero,.tile.col2,.tile.col4,.tile.row2{grid-column:span 1;grid-row:auto}
  .tile.hero{min-height:340px}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .inline-cta{flex-direction:column;align-items:flex-start}
  .inline-cta .go{margin-left:0}
}