/*
Theme Name: Дзюдо изнутри
Theme URI: https://judoinside.ru/
Description: Тема справочника по дзюдо: белое кимоно, графит, лента поясов, синий татами с жёлтой зоной безопасности; Jost + Noto Sans. Mobile-first, без jQuery и JS.
Version: 1.0.0
Author: Редакция «Дзюдо изнутри»
Text Domain: judoinside
Requires PHP: 7.4
*/

:root {
	--bg: #fbfbf8;
	--paper: #ffffff;
	--ink: #16171b;
	--text: #2a2c33;
	--muted: #686b74;
	--line: #e2e2dc;
	--line-2: #efefea;
	--red: #c5282f;
	--mat: #1d4280;
	--mat-2: #173666;
	--safety: #f2c80f;
	--b-yellow: #f2c80f;
	--b-orange: #ef7d1a;
	--b-green: #2f8f4e;
	--b-blue: #2458b8;
	--b-brown: #6b3d22;
	--head: "Jost", "Futura", "Century Gothic", Arial, sans-serif;
	--sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--w: 1180px;
	--r: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--sans); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mat); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); line-height: 1.2; font-weight: 600; margin: 0; }
.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { font: 600 12px/1.3 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 10px; }

/* ---------- Лента поясов ---------- */
.beltline { display: flex; height: 6px; }
.beltline span { flex: 1; }
.beltline span:first-child { box-shadow: inset 0 -1px 0 var(--line); }
.beltline--top { height: 5px; }

/* ---------- Шапка ---------- */
.top { background: var(--paper); position: relative; z-index: 20; }
.top__row { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; margin-right: auto; }
.logo:hover { color: var(--ink); }
.logo__mark { width: 34px; height: 34px; color: var(--ink); flex: none; --bg: var(--paper); }
.logo__txt { white-space: nowrap; font: 500 21px/1 var(--head); letter-spacing: -.01em; }
.logo__txt b { font-weight: 700; }
.top__nav { display: none; }
.top__menu { position: static; }
.top__menu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); font: 600 14px/1 var(--head); color: var(--ink); }
.top__menu summary::-webkit-details-marker { display: none; }
.top__bars { display: grid; gap: 3px; }
.top__bars i { display: block; width: 16px; height: 2px; background: var(--ink); }
.top__drop { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 14px 24px rgba(0, 0, 0, .08); padding: 8px 16px 16px; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu--drop li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font: 500 17px/1.3 var(--head); }
.top__find { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--ink); border-radius: 50%; }
.top__find:hover { background: var(--line-2); color: var(--ink); }

@media (min-width: 921px) {
	.top__menu { display: none; }
	.top__nav { display: block; }
	.top__nav .menu { display: flex; gap: 4px; }
	.top__nav .menu a { display: block; padding: 8px 12px; color: var(--ink); text-decoration: none; font: 500 15px/1 var(--head); border-radius: var(--r); }
	.top__nav .menu a:hover, .top__nav .current-menu-item > a { background: var(--line-2); }
	.top__row { min-height: 72px; }
}

/* ---------- Поиск ---------- */
.finder { display: flex; gap: 0; max-width: 520px; margin-top: 20px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper); }
.finder input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 14px; font: 400 16px var(--sans); color: var(--ink); }
.finder input:focus { outline: none; }
.finder button { border: 0; background: var(--ink); color: #fff; font: 600 15px var(--head); padding: 0 18px; cursor: pointer; }
.finder button:hover { background: var(--red); }

/* ---------- Главная: hero + пояса ---------- */
.hero { padding: 32px 0 36px; border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; gap: 28px; }
.hero__t { font-size: clamp(30px, 7.4vw, 50px); font-weight: 700; letter-spacing: -.02em; }
.hero__lede { font-size: 18px; color: var(--muted); max-width: 560px; margin: 14px 0 0; }
.belts { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 18px; text-decoration: none; color: var(--ink); }
.belts:hover { color: var(--ink); border-color: var(--ink); }
.belts__h { display: block; font: 600 13px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.belts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.belts__list li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; }
.belts__sw { height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.belts__n { font: 500 16px/1.3 var(--head); }
.belts__k { font: 500 13px/1 var(--head); color: var(--muted); }
.belts__more { display: block; margin-top: 14px; font: 600 14px var(--head); color: var(--red); }

@media (min-width: 921px) {
	.hero { padding: 56px 0 60px; }
	.hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 56px; }
	.belts { padding: 24px; }
	.belts__list li { grid-template-columns: 110px 1fr auto; }
}

/* ---------- Секции ---------- */
.sec { padding: 36px 16px; }
.sec__t { font-size: clamp(24px, 5.4vw, 32px); font-weight: 600; margin: 0 0 20px; display: flex; align-items: baseline; gap: 12px; }
.sec__t span { font: 500 14px/1 var(--head); color: var(--red); letter-spacing: .08em; }
.sec__t--inv { color: #fff; }
.sec__t--inv span { color: var(--safety); }

/* С чего начать */
.steps { display: grid; gap: 10px; }
.step { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--text); }
.step:hover { border-color: var(--ink); color: var(--text); }
.step__n { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 600 20px/1 var(--head); }
.step__t { font: 600 18px/1.25 var(--head); color: var(--ink); }
.step__d { font-size: 15px; color: var(--muted); }
@media (min-width: 561px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 921px) {
	.steps { grid-template-columns: repeat(4, 1fr); }
	.step { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 6px; padding: 20px; }
	.step__n { grid-row: auto; margin-bottom: 8px; }
}

/* Правила: татами */
.mat { background: var(--mat); border-top: 10px solid var(--safety); border-bottom: 10px solid var(--safety); color: #dfe7f5; padding: 36px 0; }
.scores { display: grid; gap: 12px; }
.score { background: var(--mat-2); border-radius: 6px; padding: 18px; border-left: 6px solid #fff; }
.score--waza { border-left-color: var(--safety); }
.score--shido { border-left-color: var(--red); }
.score b { display: block; font: 700 24px/1.1 var(--head); color: #fff; }
.score i { font: 500 13px/1 var(--head); color: #a9bbdc; letter-spacing: .06em; }
.score p { margin: 8px 0 0; font-size: 15px; }
.mat__links { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; }
.mat__links a { color: #fff; font: 500 16px/1.35 var(--head); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); display: inline-block; padding-bottom: 2px; }
.mat__links a:hover { border-color: var(--safety); color: var(--safety); }
@media (min-width: 921px) {
	.mat { padding: 52px 0; }
	.scores { grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.mat__links { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* Техника */
.tech { display: grid; gap: 10px; margin-bottom: 22px; }
.tech__g { padding: 16px 18px; border-top: 3px solid var(--ink); background: var(--paper); }
.tech__g b { font: 600 20px/1.2 var(--head); color: var(--ink); }
.tech__g span { display: block; font: 500 12px/1.4 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.tech__g p { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
@media (min-width: 921px) { .tech { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Дзюдо или самбо */
.vs__head p { color: var(--muted); margin: -8px 0 18px; }
.vs__tbl { border: 1px solid var(--line); border-radius: 6px; background: var(--paper); overflow: hidden; margin-bottom: 18px; }
.vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 14px; border-top: 1px solid var(--line-2); }
.vs__row:first-child { border-top: 0; }
.vs__row span { grid-column: 1 / -1; font: 600 12px/1.3 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vs__row p { margin: 0; font-size: 15px; }
.vs__row--h { background: var(--ink); }
.vs__row--h span { display: none; }
.vs__row--h b { color: #fff; font: 600 16px var(--head); }
@media (min-width: 561px) {
	.vs__row { grid-template-columns: 170px 1fr 1fr; align-items: baseline; }
	.vs__row span { grid-column: auto; }
	.vs__row--h span { display: block; }
}

.btn { display: inline-block; background: var(--ink); color: #fff; text-decoration: none; font: 600 15px/1 var(--head); padding: 14px 20px; border-radius: var(--r); }
.btn:hover { background: var(--red); color: #fff; }

/* ---------- Карточки ---------- */
.cards { display: grid; gap: 14px; }
@media (min-width: 561px) { .cards--3, .cards--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 921px) { .cards--3 { grid-template-columns: repeat(3, 1fr); gap: 22px; } .cards--4 { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.card__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__b { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__cat { align-self: flex-start; font: 600 11px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-left: 22px; position: relative; }
.card__cat::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 5px; margin-top: -3px; border-radius: 1px; background: var(--ink); }
.card__cat--poyasa::before { background: var(--b-orange); }
.card__cat--pravila::before { background: var(--b-blue); }
.card__cat--tehnika::before { background: var(--b-green); }
.card__cat--deti::before { background: var(--b-yellow); }
.card__cat--ekipirovka::before { background: var(--b-brown); }
.card__cat--istoriya::before { background: var(--red); }
.card__t { font-size: 19px; font-weight: 600; }
.card__t a { color: var(--ink); text-decoration: none; }
.card__t a:hover { color: var(--red); }
.card__ex { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* ---------- Шапка рубрики / поиска ---------- */
.phead { padding: 30px 0 26px; border-bottom: 1px solid var(--line); background: var(--paper); }
.phead__t { font-size: clamp(28px, 6.5vw, 44px); font-weight: 700; letter-spacing: -.015em; }
.phead__d { color: var(--muted); max-width: 680px; margin-top: 10px; }
.phead__d p { margin: 0; }
.phead--poyasa { box-shadow: inset 0 -5px 0 var(--b-orange); }
.phead--pravila { box-shadow: inset 0 -5px 0 var(--b-blue); }
.phead--tehnika { box-shadow: inset 0 -5px 0 var(--b-green); }
.phead--deti { box-shadow: inset 0 -5px 0 var(--b-yellow); }
.phead--ekipirovka { box-shadow: inset 0 -5px 0 var(--b-brown); }
.phead--istoriya { box-shadow: inset 0 -5px 0 var(--red); }
.empty { color: var(--muted); }

/* ---------- Статья ---------- */
.art__head { padding-top: 28px; padding-bottom: 20px; }
.art__t, .art__meta { max-width: 900px; }
.art__cat { font: 600 12px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding-left: 22px; position: relative; display: inline-block; margin-bottom: 14px; }
.art__cat::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 5px; margin-top: -3px; background: var(--ink); }
.art__cat.card__cat--poyasa::before { background: var(--b-orange); }
.art__cat.card__cat--pravila::before { background: var(--b-blue); }
.art__cat.card__cat--tehnika::before { background: var(--b-green); }
.art__cat.card__cat--deti::before { background: var(--b-yellow); }
.art__cat.card__cat--ekipirovka::before { background: var(--b-brown); }
.art__cat.card__cat--istoriya::before { background: var(--red); }
.art__t { font-size: clamp(28px, 6.6vw, 46px); font-weight: 700; letter-spacing: -.02em; }
.art__meta { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.art__cover { margin-bottom: 26px; }
.art__cover img { width: 100%; border-radius: 6px; aspect-ratio: 2 / 1; object-fit: cover; }
.art__cover figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.art__grid { display: grid; gap: 32px; padding-bottom: 20px; }
.art__main { min-width: 0; max-width: 740px; }
.art__side { display: none; }
.toc--mob { border: 1px solid var(--line); border-radius: 6px; background: var(--paper); margin-bottom: 22px; }
.toc--mob summary { cursor: pointer; padding: 12px 16px; font: 600 15px var(--head); color: var(--ink); }
.toc--mob ol { margin: 0; padding: 0 16px 14px 34px; font-size: 15px; }
.toc--mob li { margin: 4px 0; }
@media (min-width: 921px) {
	.art__grid { grid-template-columns: minmax(0, 740px) 280px; justify-content: space-between; }
	.art__side { display: block; }
	.toc--mob { display: none; }
	.toc { position: sticky; top: 24px; border-left: 3px solid var(--ink); padding: 4px 0 4px 18px; }
	.toc__h { font: 600 12px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
	.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
	.toc li { counter-increment: t; margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
	.toc li::before { content: counter(t, decimal-leading-zero) " "; font: 600 12px var(--head); color: var(--red); }
	.toc a { color: var(--text); text-decoration: none; }
	.toc a:hover { color: var(--red); }
}

/* Текст */
.content > * { margin-top: 0; margin-bottom: 1.1em; }
.content h2 { font-size: clamp(23px, 5vw, 30px); margin: 1.7em 0 .6em; padding-top: 14px; border-top: 2px solid var(--ink); scroll-margin-top: 16px; }
.content h3 { font-size: 20px; margin: 1.4em 0 .5em; }
.content ul, .content ol { padding-left: 1.3em; }
.content li { margin: .35em 0; }
.content ul li::marker { color: var(--red); }
.content ol li::marker { font-family: var(--head); font-weight: 600; color: var(--ink); }
.content blockquote { margin: 1.4em 0; padding: 14px 18px; border-left: 4px solid var(--safety); background: #fffbe6; }
.content blockquote p { margin: 0; }
.content figure { margin: 1.5em 0; }
.content figure img { border-radius: 6px; }
.content figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.content strong { color: var(--ink); }
.tbl { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.tbl th { background: var(--ink); color: #fff; font: 600 14px var(--head); text-align: left; padding: 10px 12px; }
.tbl td, .tbl th { border: 0; }
.tbl td { padding: 10px 12px; border-top: 1px solid var(--line-2); vertical-align: top; }
.tbl tr:nth-child(even) td { background: #f7f7f3; }
.content .wp-block-table { margin: 0; }

/* Шорткод [poyas] */
.belt-card { display: grid; grid-template-columns: 14px 1fr; gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper); margin: 1.1em 0; }
.belt-card__bar { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); }
.belt-card__b { padding: 12px 16px; }
.belt-card__t { font: 600 18px/1.3 var(--head); color: var(--ink); margin: 0; }
.belt-card__t span { font-weight: 500; font-size: 14px; color: var(--muted); margin-left: 6px; }
.belt-card__x { font-size: 15px; margin-top: 4px; }
.belt-card__x p { margin: 0 0 .5em; }

/* Оффер/виджеты */
.jdi-slot { margin: 28px 0; }
.jdi-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 2px solid var(--ink); border-radius: 6px; padding: 16px; background: var(--paper); }
.jdi-offer__body { flex: 1 1 240px; }
.jdi-offer__note { font: 600 11px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jdi-offer__title { font: 600 18px var(--head); margin: 4px 0; color: var(--ink); }
.jdi-offer__text { margin: 0; font-size: 15px; }
.jdi-offer__btn { background: var(--red); color: #fff; text-decoration: none; padding: 12px 18px; border-radius: var(--r); font: 600 15px var(--head); }

/* Страница */
.pg { max-width: 780px; padding-top: 30px; padding-bottom: 40px; }
.pg__t { font-size: clamp(28px, 6vw, 42px); font-weight: 700; margin-bottom: 20px; }

/* Пагинация */
.pagination { margin-top: 28px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.page-numbers { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--paper); font: 500 15px var(--head); }
.page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 404 */
.nf { padding: 48px 16px 60px; max-width: 720px; }
.nf__code { font: 700 96px/1 var(--head); color: var(--ink); margin: 0 0 10px; letter-spacing: -.04em; }
.nf__code span { color: var(--red); }
.nf .btn { margin-top: 18px; }

/* ---------- Подвал ---------- */
.foot { background: var(--ink); color: #b9bbc2; margin-top: 40px; }
.foot__row { display: grid; gap: 22px; padding-top: 32px; padding-bottom: 20px; }
.logo--foot { color: #fff; }
.logo--foot .logo__mark { color: #fff; --bg: var(--ink); }
.foot__t { margin: 10px 0 0; font-size: 15px; max-width: 360px; }
.foot__menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.foot__menu a, .foot__l a { color: #e7e8ec; text-decoration: none; font-size: 15px; }
.foot__menu a:hover, .foot__l a:hover { color: var(--safety); }
.foot__l { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.foot__c { border-top: 1px solid #2c2e35; padding-top: 14px; padding-bottom: 18px; font-size: 13px; color: #8a8d96; }
@media (min-width: 921px) {
	.foot__row { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; padding-top: 44px; }
	.foot__l { flex-direction: column; }
}