/*
 * Сторінки політик і перелік /policies (docs/tz/rozdil-polityky.md, §5 і §6).
 *
 * Усі кольори в змінних .policy-page. Темна й контрастна теми панелі
 * доступності нижче перевизначають змінні (зразок .svitlo-page у svitlo.css).
 * Загальне правило тем фарбує p, span, li, h1–h6 у колір теми з !important,
 * тож рядок дат, назву блока «Зміст» і пункти змісту в темах задано
 * правилами, сильнішими за body.am-theme-* p і body.am-theme-* span.
 *
 * Контраст (CLAUDE.md, «Теми доступності»), текст від 4,5:1 у трьох темах:
 *   рядок дат        #5f6b7a на #fff 5,4:1;  #b0b8c4 на #000 10,5:1;  #ff0 на #000 19,6:1
 *   пункти змісту    #2757c9 на #f4f7fd 5,9:1;  #7ca6fb на #0b1220 7,8:1;  #0ff на #000 16,7:1
 *   дати на картці   #5f6b7a на #f4f7fd 5,1:1;  #b0b8c4 на #0b1220 9,4:1
 */

.policy-page {
	--pl-text: #000714;
	--pl-muted: #5f6b7a;
	--pl-link: #2757c9;
	--pl-card-bg: #f4f7fd;
	--pl-card-line: #dbe4f5;
}

/* ------------------------------------------------- відступи під H1 (§5) */

/*
 * H1 → рядок дат 12px, рядок дат → зміст 24px, зміст → текст 32px.
 * Без рядка дат і змісту від H1 до тексту 24px.
 */
.policy-page .main-post-content-title {
	margin-bottom: 0;
}

.policy-meta {
	margin: 12px 0 0;
	color: var(--pl-muted);
	font-size: 14px;
	line-height: 1.45;
}

.policy-page .policy-text {
	margin-top: 24px;
}

.policy-page .policy-toc ~ .policy-text {
	margin-top: 32px;
}

/* ----------------------------------------------------------- зміст (§4) */

.policy-toc {
	margin: 24px 0 0;
	padding: 16px 20px;
	border: 1px solid var(--pl-card-line);
	border-radius: 12px;
	background-color: var(--pl-card-bg);
}

.policy-toc-title {
	color: var(--pl-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
}

.policy-toc-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.policy-toc-list li {
	margin: 0;
	padding: 4px 0;
	font-size: 16px;
	line-height: 1.4;
}

.policy-toc-list li::before {
	content: none;
}

.policy-toc-list a {
	display: flex;
	align-items: baseline;
	color: var(--pl-link);
	text-decoration: none;
}

.policy-toc-list a:hover,
.policy-toc-list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Номер окремою колонкою: довгі назви переносяться під текст, а не під номер. */
.policy-toc-num {
	flex: 0 0 3.4em;
	font-weight: 700;
}

/* -------------------------------------------- номери розділів у тексті */

.policy-text h2 .policy-num {
	color: inherit;
	font-weight: 700;
}

/* Якір не ховається під липкою смугою меню. */
.policy-text h2[id] {
	scroll-margin-top: 80px;
}

/* --------------------------------------------- перелік /policies (§6) */

.policy-page .policy-intro {
	max-width: 720px;
	margin: 24px 0 0;
	color: var(--pl-text);
	font-size: 17px;
	line-height: 1.5;
}

.policy-cards {
	display: grid;
	gap: 16px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.policy-card {
	margin: 0;
	padding: 20px 24px;
	border: 1px solid var(--pl-card-line);
	border-radius: 12px;
	background-color: var(--pl-card-bg);
}

.policy-card::before {
	content: none;
}

.policy-card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.policy-card-title a {
	color: var(--pl-link);
	text-decoration: none;
}

.policy-card-title a:hover,
.policy-card-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.policy-card-text {
	margin: 8px 0 0;
	color: var(--pl-text);
	font-size: 16px;
	line-height: 1.5;
}

.policy-card .policy-meta {
	margin-top: 8px;
}

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

@media (max-width: 767px) {
	.policy-toc {
		padding: 12px 16px;
	}

	.policy-toc-title {
		font-size: 17px;
	}

	.policy-card {
		padding: 16px;
	}

	.policy-card-title {
		font-size: 18px;
	}
}

/* -------------------------------------------------------- темна тема */

body.am-theme-dark .policy-page {
	--pl-text: #fff;
	--pl-muted: #b0b8c4;
	--pl-link: #7ca6fb;
	--pl-card-bg: #0b1220;
	--pl-card-line: #2757c9;
}

/* ---------------------------------------------------- контрастна тема */

body.am-theme-contrast .policy-page {
	--pl-text: #ff0;
	--pl-muted: #ff0;
	--pl-link: #0ff;
	--pl-card-bg: #000;
	--pl-card-line: #ff0;
}

/*
 * Тексти, які загальне правило тем фарбує в білий чи жовтий з !important
 * (body.am-theme-* p, span, li): рядок дат, назва «Зміст», пункти змісту
 * разом із номером.
 */
body:is(.am-theme-dark, .am-theme-contrast) .policy-page .policy-meta,
body:is(.am-theme-dark, .am-theme-contrast) .policy-page .policy-meta time {
	color: var(--pl-muted) !important;
}

body:is(.am-theme-dark, .am-theme-contrast) .policy-page .policy-toc-title {
	color: var(--pl-text) !important;
}

body:is(.am-theme-dark, .am-theme-contrast) .policy-page .policy-toc-list a,
body:is(.am-theme-dark, .am-theme-contrast) .policy-page .policy-toc-list a .policy-toc-num,
body:is(.am-theme-dark, .am-theme-contrast) .policy-page .policy-card-title a {
	color: var(--pl-link) !important;
}

/* Контрастна: посилання змісту й переліку видно не лише кольором. */
body.am-theme-contrast .policy-page .policy-toc-list a,
body.am-theme-contrast .policy-page .policy-card-title a {
	text-decoration: underline;
	text-underline-offset: 3px;
}