/*
 * Документи: оферта, політика конфіденційності, оплата й доставка (template-document.php).
 *
 * Довгий юридичний текст читають не підряд, а шукають пункт. Тому: зміст збоку з номерами,
 * великий номер біля кожного розділу, рядок до 68 знаків і спокійний ритм без ліній —
 * розділи відділяє відступ. На телефоні зміст згорнутий під «Зміст».
 */

/* Низ без padding .kit-main: відступ до футера дає сам футер, як на сторінках із секцій. */
.kit-doc { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: 0; }

/* ---------- Заголовок ---------- */

.kit-doc__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--kit-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.kit-doc__title { margin: 0; font-size: clamp(2rem, 5.5vw, 4.5rem); line-height: 1.05; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }

.kit-doc__lead {
	max-width: 60ch;
	margin: 1rem 0 0;
	color: var(--kit-text-muted);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
}

/* ---------- Розкладка ---------- */

.kit-doc__layout {
	display: grid;
	grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	margin-top: var(--wp--preset--spacing--50);
}

.kit-doc__layout--single { grid-template-columns: minmax(0, 1fr); }

/* ---------- Зміст ---------- */

.kit-doc__aside {
	position: sticky;
	top: calc(var(--wp--custom--header--height) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
	max-height: calc(100vh - var(--wp--custom--header--height) - var(--wp-admin--admin-bar--height, 0px) - 3rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.kit-doc__toc {
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--kit-surface-subtle);
}

.kit-doc__toc summary {
	color: var(--kit-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	list-style: none;
	pointer-events: none;
}

.kit-doc__toc summary::-webkit-details-marker { display: none; }

.kit-doc__toc ol { display: grid; gap: 2px; margin: 0.75rem 0 0; padding: 0; list-style: none; }

.kit-doc__toc a {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	gap: 0.5rem;
	align-items: baseline;
	/* align-content центрує рядок у 44 px, не ламаючи спільну базову лінію номера й назви. */
	align-content: center;
	min-height: 44px;
	padding: 0.5rem 0.625rem;
	border-radius: var(--wp--custom--radius--control);
	color: var(--kit-ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--kit-transition), color var(--kit-transition);
}

.kit-doc__num { color: var(--kit-brand); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (hover: hover) {
	.kit-doc__toc a:hover { background: var(--kit-brand-soft); color: var(--kit-brand); }
}

.kit-doc__toc a:active { background: var(--kit-brand-soft-hover); color: var(--kit-brand-active); }

.kit-doc__toc a.is-current { background: var(--kit-surface); color: var(--kit-brand); font-weight: 600; }

/* ---------- Текст ---------- */

.kit-doc__body {
	counter-reset: kit-doc-section;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
}

.kit-doc__body > * { max-width: var(--kit-measure); }

/* Розділ: великий номер у м'якому колі поруч із назвою. */
.kit-doc__body h2 {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	line-height: 1.15;
	counter-increment: kit-doc-section;
}

.kit-doc__body h2::before {
	content: counter(kit-doc-section);
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--kit-brand-soft);
	color: var(--kit-brand);
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
}

.kit-doc__body > h2:first-child { margin-top: 0; }

.kit-doc__body h3 {
	margin: 2rem 0 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

.kit-doc__body h2 + h3 { margin-top: 0.5rem; }

.kit-doc__body p { margin: 0 0 1em; }

.kit-doc__body ul,
.kit-doc__body ol { display: grid; gap: 0.5em; margin: 0 0 1.25em; padding-left: 1.5rem; }

.kit-doc__body ul { list-style: none; padding-left: 1.25rem; }

.kit-doc__body ul li { position: relative; }

.kit-doc__body ul li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: -1.125rem;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kit-brand-decorative);
}

.kit-doc__body a { color: var(--kit-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.kit-doc__body a:hover { color: var(--kit-link-hover); text-decoration-thickness: 2px; }
.kit-doc__body a:active { color: var(--kit-link-active); }

/* ---------- Інші документи й контакти ---------- */

.kit-doc__more {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--60);
}

.kit-doc__card {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.5rem;
	min-height: 9rem;
	padding: 1.5rem;
	border: 1px solid var(--kit-border-subtle);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--kit-surface);
	color: var(--kit-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color var(--kit-transition), background-color var(--kit-transition), transform 0.1s ease;
}

a.kit-doc__card svg {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	fill: none;
	stroke: var(--kit-brand);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--kit-transition);
}

.kit-doc__card-label {
	color: var(--kit-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.kit-doc__card-title { padding-right: 2rem; font-family: var(--wp--preset--font-family--heading); font-size: 1.45rem; line-height: 1.15; }

@media (hover: hover) {
	a.kit-doc__card:hover { border-color: var(--kit-border-control); }
	a.kit-doc__card:hover svg { transform: translateX(4px); }
}

a.kit-doc__card:active { background: var(--kit-surface-subtle); transform: scale(0.98); }

.kit-doc__card--help { border-color: transparent; background: var(--kit-surface-subtle); }

.kit-doc__contact { color: var(--kit-link); font-weight: 600; text-underline-offset: 0.2em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.kit-doc__contact:hover { color: var(--kit-link-hover); text-decoration-thickness: 2px; }
.kit-doc__contact:active { color: var(--kit-link-active); }

.kit-doc a:focus-visible {
	outline: 3px solid var(--kit-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--kit-focus-gap);
}

/* ---------- Телефон ---------- */

@media (max-width: 899px) {
	.kit-doc__layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: var(--wp--preset--spacing--40); }

	.kit-doc__aside { position: static; max-height: none; overflow: visible; }

	/* Зміст — згорнутий рядок «Зміст» зі стрілкою; kit.js згортає його на телефоні. */
	.kit-doc__toc { padding: 0; }

	.kit-doc__toc summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		padding: 0 1.25rem;
		border-radius: var(--wp--custom--radius--panel);
		color: var(--kit-ink);
		font-size: var(--wp--preset--font-size--sm);
		letter-spacing: 0.06em;
		pointer-events: auto;
		cursor: pointer;
	}

	.kit-doc__toc summary::after {
		content: "";
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--kit-brand);
		border-bottom: 2px solid var(--kit-brand);
		transform: translateY(-3px) rotate(45deg);
		transition: transform var(--kit-transition);
	}

	.kit-doc__toc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
	.kit-doc__toc summary:active { background: var(--kit-brand-soft-hover); }
	.kit-doc__toc summary:focus-visible { outline: 3px solid var(--kit-focus); outline-offset: 3px; }

	.kit-doc__toc ol { margin: 0; padding: 0 0.75rem 0.75rem; }

	.kit-doc__body h2 { gap: 0.75rem; }
	.kit-doc__body h2::before { width: 2.5rem; height: 2.5rem; font-size: 1.15rem; }
}