/*
Theme Name: Детское Посольство
Theme URI: https://detskoeposolstvo.ru
Author: Илья Егоров
Description: Тёплая рукодельная тема для центра «Детское Посольство»: акварельная бумага, сургучные печати, девять волшебных домиков. Сверстана по авторскому дизайн-концепту.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: detposol
*/

:root{
  --paper:#f6ead4;
  --paper-deep:#eeddbe;
  --card:#fcf5e6;
  --ink:#4c3421;
  --ink-soft:#7a5c40;
  --moss:#5f7f4e;
  --moss-deep:#46613a;
  --blush:#e88f6f;
  --teal:#6f9d8d;
  --wax:#b0492f;
  --line:#c9b18c;
  --shadow:0 10px 24px rgba(76,52,33,.14);
  --grain-opacity:.5;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#221910;
    --paper-deep:#1a130c;
    --card:#2c2115;
    --ink:#f0e3cb;
    --ink-soft:#c9ae8b;
    --moss:#8fae7c;
    --moss-deep:#a8c494;
    --blush:#e89577;
    --teal:#8ab5a5;
    --wax:#d4694c;
    --line:#54402a;
    --shadow:0 10px 24px rgba(0,0,0,.4);
    --grain-opacity:.25;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
/* бумажное зерно поверх всего */
body::after{
  content:"";
  position:fixed; inset:0; z-index:99; pointer-events:none;
  opacity:var(--grain-opacity); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .26 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--moss-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blush);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%;height:auto}
h1,h2,h3{line-height:1.2;text-wrap:balance;font-weight:normal}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--wax);color:#fff8ee;padding:10px 18px;font-style:italic;
}
.skip-link:focus{left:12px;top:12px}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.eyebrow{
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blush);margin:0 0 10px;
}
section{padding:64px 0}
.section-title{font-size:clamp(28px,4.4vw,40px);font-style:italic;margin:0 0 14px}
.section-lead{max-width:62ch;color:var(--ink-soft);margin:0 0 36px}
.bg-deep{background:var(--paper-deep)}

/* ── шапка ── */
header.top{
  position:relative;
  background:var(--paper-deep);
  padding:14px 0 22px;
}
header.top::after{ /* фестончатый край, как кружево скатерти */
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;z-index:5;
  background:radial-gradient(circle at 6px -3px, var(--paper-deep) 8px, transparent 9px);
  background-size:22px 12px;background-repeat:repeat-x;
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo b{font-style:italic;font-weight:normal;font-size:22px;line-height:1.1;display:block}
.logo small{font-family:ui-sans-serif,system-ui,sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
nav.main ul{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:0;padding:0}
nav.main a{
  text-decoration:none;color:var(--ink);font-style:italic;font-size:16px;
  border-bottom:1px dashed transparent;padding-bottom:2px;
}
nav.main a:hover{border-bottom-color:var(--blush);color:var(--moss-deep)}
.top-tel{font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--line);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:8px 14px;white-space:nowrap}
.top-tel:hover{background:var(--card)}
.burger{
  display:none;background:none;color:var(--ink);font:inherit;font-style:italic;
  border:1.5px solid var(--line);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  padding:8px 14px;cursor:pointer;
}

/* ── герой ── */
.hero{padding:56px 0 0;position:relative}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,54px);font-style:italic;margin:6px 0 16px}
.hero h1 em{font-style:italic;color:var(--moss-deep)}
.hero p.lead{font-size:19px;max-width:52ch;color:var(--ink-soft);margin:0 0 24px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.chips li{
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:13.5px;
  background:var(--card);border:1.5px dashed var(--line);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  padding:7px 13px;color:var(--ink);
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-block;text-decoration:none;text-align:center;
  font-family:Georgia,serif;font-style:italic;font-size:18px;
  padding:14px 26px;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px) rotate(-.4deg);box-shadow:var(--shadow)}
.btn-wax{background:var(--wax);color:#fff8ee;border:2px solid transparent}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--moss)}
.hero-note{font-size:14px;color:var(--ink-soft);font-style:italic;margin-top:14px}

/* сцена */
.scene{position:relative}
.scene svg{display:block;width:100%;height:auto}
.cloud{animation:drift 26s linear infinite alternate}
.cloud.c2{animation-duration:34s;animation-delay:-8s}
.balloon{animation:bob 5.5s ease-in-out infinite alternate;transform-origin:center bottom}
.laundry{animation:flutter 4s ease-in-out infinite alternate;transform-origin:top center}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(20px)}}
@keyframes bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-10px) rotate(2deg)}}
@keyframes flutter{from{transform:skewX(0deg)}to{transform:skewX(4deg)}}
@media (prefers-reduced-motion: reduce){
  .cloud,.balloon,.laundry{animation:none}
  html{scroll-behavior:auto}
}

/* травяная лента под героем */
.grass-band{
  height:64px;margin-top:-6px;
  background:var(--moss);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cpath d='M0 24 Q 10 10 20 22 Q 26 6 34 20 Q 44 8 52 22 Q 60 12 70 24 Q 78 8 88 20 Q 98 10 108 22 Q 114 14 120 24 L 120 64 L 0 64 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/120px 64px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cpath d='M0 24 Q 10 10 20 22 Q 26 6 34 20 Q 44 8 52 22 Q 60 12 70 24 Q 78 8 88 20 Q 98 10 108 22 Q 114 14 120 24 L 120 64 L 0 64 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/120px 64px;
}

/* ── карточки-«три кита» ── */
.kits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kit{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:18px 22px 16px 24px;
  padding:26px 24px 24px;
  position:relative;
  box-shadow:var(--shadow);
}
.kit::before{ /* строчка-прошивка */
  content:"";position:absolute;inset:7px;pointer-events:none;
  border:1.5px dashed color-mix(in srgb, var(--line) 80%, var(--ink) 20%);
  border-radius:14px 18px 12px 20px;opacity:.7;
}
.kit h3{font-style:italic;font-size:21px;margin:14px 0 10px}
.kit ul{margin:0;padding-left:19px;color:var(--ink-soft);font-size:15.5px}
.kit li{margin-bottom:6px}
.kit .icon{width:56px;height:56px;color:var(--moss-deep)}

/* ── домики ── */
.houses-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:18px;overflow-x:auto;padding:6px 4px 22px;scroll-snap-type:x proximity}
.houses-scroll::-webkit-scrollbar{height:8px}
.houses-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.house-card{
  scroll-snap-align:start;
  background:var(--card);border:1.5px solid var(--line);
  border-radius:16px 20px 14px 22px;padding:18px 16px 14px;text-align:center;
  transition:transform .18s ease;
}
.house-card:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--shadow)}
.house-card svg{width:96px;height:84px;margin:0 auto 6px}
.house-card b{display:block;font-style:italic;font-weight:normal;font-size:17px}
.house-card small{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11.5px;color:var(--ink-soft);letter-spacing:.06em}

/* ── цены ── */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.price-card{
  background:var(--card);border:1.5px solid var(--line);
  border-radius:22px 16px 24px 18px;padding:28px;position:relative;box-shadow:var(--shadow);
}
.price-card h3{font-style:italic;font-size:24px;margin:0 0 2px}
.price-card .hours{font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--blush);margin-bottom:18px}
.price-row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding:10px 2px}
.price-row:last-of-type{border-bottom:none}
.price-row .val{font-size:22px;color:var(--moss-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.price-note{font-size:14px;font-style:italic;color:var(--ink-soft);margin-top:18px}
.stamp{ /* сургучная печать */
  position:absolute;top:-18px;right:-10px;width:88px;height:88px;transform:rotate(9deg);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.18));
}

.school-note{
  margin-top:34px;padding:20px 24px;
  background:var(--paper-deep);border:1.5px dashed var(--line);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  font-style:italic;color:var(--ink-soft);
}
.school-note b{color:var(--ink);font-weight:normal}

/* занятия-ярлычки */
.tags{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.tags li{
  background:var(--paper-deep);border:1.5px solid var(--line);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  padding:8px 15px;font-size:15px;font-style:italic;
  transition:transform .15s ease;
}
.tags li:hover{transform:rotate(-1.2deg) translateY(-2px);border-color:var(--moss)}

/* ── программы-«страницы паспорта» ── */
.programs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.program{
  background:var(--card);border:1.5px solid var(--line);
  border-radius:16px 22px 18px 24px;padding:26px 24px;position:relative;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.program h3{font-style:italic;font-size:22px;margin:0 0 4px;padding-right:64px}
.program .age{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;padding-right:64px}
.program p{color:var(--ink-soft);font-size:15.5px;margin:0 0 14px}
.program dl{margin:0 0 18px;font-size:15px}
.program dt{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blush);margin-top:9px}
.program dd{margin:1px 0 0}
.program .btn{margin-top:auto;font-size:16px;padding:11px 18px}
.program .visa{position:absolute;top:14px;right:14px;width:64px;height:64px;opacity:.9;transform:rotate(-8deg)}

/* ── отзывы-письма ── */
.letters{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.letter{
  background:var(--card);border:1.5px solid var(--line);
  border-radius:6px;padding:30px 28px 24px;position:relative;box-shadow:var(--shadow);
  transform:rotate(-.5deg);margin:0;
}
.letter:nth-child(2){transform:rotate(.7deg)}
.letter::before{ /* полоска «скотча» */
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:110px;height:26px;background:color-mix(in srgb, var(--paper-deep) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 60%, transparent);opacity:.9;
}
.letter p{font-style:italic;font-size:17px;margin:0 0 14px}
.letter cite{font-style:normal;font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;color:var(--ink-soft)}

/* ── как найти ── */
.find{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start}
.addr-list{margin:0;padding:0;list-style:none}
.addr-list li{
  display:flex;gap:10px;align-items:baseline;padding:9px 2px;border-bottom:1px dashed var(--line);
  font-size:15.5px;
}
.addr-list b{font-style:italic;font-weight:normal;white-space:nowrap}
.addr-list span{color:var(--ink-soft);font-family:ui-sans-serif,system-ui,sans-serif;font-size:13.5px;margin-left:auto;white-space:nowrap}
.find-card{
  background:var(--card);border:1.5px solid var(--line);border-radius:22px 16px 24px 18px;
  padding:26px;box-shadow:var(--shadow);
}
.find-card p{margin:0 0 12px}
.contact-lines{list-style:none;margin:0 0 20px;padding:0}
.contact-lines li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:16px;display:flex;gap:12px;align-items:baseline}
.c-label{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);min-width:86px}
.contact-lines a{text-decoration:none}
.contact-lines a:hover{text-decoration:underline}

/* финал */
.final{
  text-align:center;background:var(--paper-deep);
  border-radius:32px 26px 34px 28px;padding:56px 30px;position:relative;overflow:hidden;
}
.final h2{font-size:clamp(26px,4vw,38px);font-style:italic;margin:0 0 12px}
.final p{color:var(--ink-soft);max-width:52ch;margin:0 auto 26px}

footer.site-foot{padding:44px 0 120px;color:var(--ink-soft);font-size:14px}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline}
.foot-love{font-style:italic;opacity:.75}

/* мобильная липкая панель */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:var(--paper-deep);border-top:1.5px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.sticky-cta a{
  flex:1;text-align:center;text-decoration:none;font-style:italic;font-size:15px;
  padding:11px 6px;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
}
.sticky-cta .call{background:var(--wax);color:#fff8ee}
.sticky-cta .wa{border:1.5px solid var(--moss);color:var(--ink)}
.sticky-cta .tg{border:1.5px solid var(--teal);color:var(--ink)}

/* ── внутренние страницы ── */
.page-hero{background:var(--paper-deep);padding:44px 0 36px;position:relative}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;z-index:5;
  background:radial-gradient(circle at 6px -3px, var(--paper-deep) 8px, transparent 9px);
  background-size:22px 12px;background-repeat:repeat-x;
}
.page-hero h1{font-size:clamp(30px,4.6vw,44px);font-style:italic;margin:4px 0 0}
.entry{max-width:760px;margin:0 auto;padding:44px 22px 64px}
.entry h2{font-size:clamp(24px,3.4vw,32px);font-style:italic;margin:36px 0 12px}
.entry h3{font-size:21px;font-style:italic;margin:28px 0 10px}
.entry p{margin:0 0 16px}
.entry ul,.entry ol{margin:0 0 16px;padding-left:22px}
.entry li{margin-bottom:6px}
.entry img{border-radius:16px 20px 14px 22px;border:1.5px solid var(--line)}
.entry blockquote{
  margin:24px 0;padding:18px 22px;background:var(--card);
  border:1.5px solid var(--line);border-radius:6px;font-style:italic;
}
.entry a{color:var(--moss-deep)}
.entry .wp-caption{max-width:100%}
.entry .wp-caption-text{font-size:13.5px;color:var(--ink-soft);font-style:italic;text-align:center;margin-top:6px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left;margin:0 18px 12px 0}
.alignright{float:right;margin:0 0 12px 18px}

/* список записей (архивы, поиск) */
.post-list{display:grid;gap:22px;max-width:760px;margin:0 auto;padding:44px 22px 64px}
.post-card{
  background:var(--card);border:1.5px solid var(--line);
  border-radius:18px 22px 16px 24px;padding:24px;box-shadow:var(--shadow);
}
.post-card h2{font-size:22px;font-style:italic;margin:0 0 8px}
.post-card h2 a{text-decoration:none;color:var(--ink)}
.post-card h2 a:hover{color:var(--moss-deep)}
.post-card .meta{font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blush);margin-bottom:8px}
.post-card p{margin:0;color:var(--ink-soft);font-size:15.5px}

/* служебный текст для скринридеров (пагинация, формы, плагины) */
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* пагинация архивов */
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.page-numbers{
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;text-decoration:none;
  color:var(--ink);background:var(--card);border:1.5px solid var(--line);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:7px 13px;
}
.page-numbers.current{background:var(--wax);color:#fff8ee;border-color:transparent}
a.page-numbers:hover{border-color:var(--moss)}

/* 404 */
.lost{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 22px}
.lost h1{font-size:clamp(30px,5vw,44px);font-style:italic;margin:18px 0 10px}
.lost p{color:var(--ink-soft);max-width:46ch;margin:0 0 24px}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .scene{max-width:520px;margin:0 auto}
  .kits,.programs{grid-template-columns:1fr}
  .prices,.letters,.find{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  .burger{display:block}
  nav.main{display:none;width:100%}
  body.nav-open nav.main{display:block}
  body.nav-open nav.main ul{flex-direction:column;gap:10px;padding-top:10px}
  section{padding:48px 0}
}