/*
 * Doprava a platba (page-doprava-a-platba.php). Breadcrumb and H1 reuse
 * .cat-breadcrumb / .cat-head (components/catalog.css), section headings .nd-sec-h.
 *
 * Classes:
 *   .dap                       page block (section)
 *   .dap__body                 contents box + main column (side by side from 861px)
 *   .dap__main                 the two legal sections and related links
 *   .dap-toc                   "Na tejto stránke" box (__title, __list, __link, __text, __meta)
 *   .dap-sec                   one legal section (anchor target)
 *   .dap-list, __item, __text  numbered card with counters in tinted circles
 *   .dap-related               related pages (__title, __list, __link)
 */

.dap {
	font-family: var(--nd-font);
	font-size: var(--nd-fs-body);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-ink);
}

/* A grid; one class already outranks layout.css "section > div" (flex column). */
.dap__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--nd-sp-28);
	padding-top: var(--nd-sp-22);
}

/* ---- Contents box ---- */
.dap-toc {
	padding: var(--nd-sp-14) var(--nd-sp-16);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-brand-tint);
}

.dap-toc__title,
.dap-related__title {
	margin: 0 0 var(--nd-sp-6);
	font-size: var(--nd-fs-13);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-head);
	color: var(--nd-c-head);
}

.dap-toc__list,
.dap-related__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dap-toc__list li + li {
	border-top: 1px solid var(--nd-c-brand-tint-2);
}

.dap-toc__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nd-sp-12);
	min-height: var(--nd-btn-h);
	padding: var(--nd-sp-6) 0;
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-semibold);
	line-height: var(--nd-lh-snug);
	color: var(--nd-c-head);
	transition: color var(--nd-dur-fast);
}

.dap-toc__meta {
	flex: 0 0 auto;
	padding: var(--nd-sp-2) var(--nd-sp-8);
	border-radius: var(--nd-radius-xs);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-12);
	font-weight: var(--nd-fw-medium);
	color: var(--nd-c-muted);
}

.dap-toc__link:hover,
.dap-toc__link:focus-visible {
	color: var(--nd-c-brand);
}

/* Legacy scorg CSS sets a global ":focus-visible { outline: none }"; restore the ring. */
.dap :is(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: var(--focus-width) solid var(--nd-c-brand);
	outline-offset: var(--focus-width);
}

/* ---- Legal sections ---- */
.dap-sec + .dap-sec {
	margin-top: var(--nd-sp-40);
}

.dap-sec .nd-sec-h {
	margin-bottom: var(--nd-sp-26);
}

.dap-list {
	margin: 0;
	padding: var(--nd-sp-4) var(--nd-sp-16);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius);
	background: var(--nd-c-surface);
	list-style: none;
	counter-reset: dap;
}

.dap-list__item {
	display: grid;
	grid-template-columns: var(--nd-sp-28) minmax(0, var(--nd-measure-seo));
	gap: var(--nd-sp-14);
	padding: var(--nd-sp-14) 0;
	line-height: var(--nd-lh-seo);
	counter-increment: dap;
}

.dap-list__item + .dap-list__item {
	border-top: 1px solid var(--nd-c-line-soft);
}

.dap-list__item::before {
	content: counter(dap);
	display: grid;
	place-items: center;
	width: var(--nd-sp-28);
	height: var(--nd-sp-28);
	margin-top: var(--nd-sp-2);
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-brand-tint);
	font-size: var(--nd-fs-13);
	font-weight: var(--nd-fw-bold);
	line-height: 1;
	color: var(--nd-c-brand);
}

.dap-list__item strong {
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-head);
}

/* ---- Related pages ---- */
.dap-related {
	margin-top: var(--nd-sp-40);
	padding-top: var(--nd-sp-22);
	border-top: 1px solid var(--nd-c-line);
}

.dap-related__title {
	margin-bottom: var(--nd-sp-10);
}

.dap-related__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nd-sp-8);
}

.dap-related__link {
	display: inline-flex;
	align-items: center;
	gap: var(--nd-sp-6);
	min-height: var(--nd-btn-h);
	padding: 0 var(--nd-sp-14);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius-m);
	background: var(--nd-c-surface);
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-head);
	transition: border-color var(--nd-dur-fast), box-shadow var(--nd-dur-fast), color var(--nd-dur-fast);
}

.dap-related__link::after {
	content: "\203A";
	color: var(--nd-c-brand);
}

.dap-related__link:hover,
.dap-related__link:focus-visible {
	border-color: var(--nd-c-brand);
	box-shadow: var(--nd-shadow);
	color: var(--nd-c-brand);
}

@media (min-width: 721px) {
	.dap-list {
		padding: var(--nd-sp-6) var(--nd-sp-24);
	}

	.dap-list__item {
		gap: var(--nd-sp-16);
		padding: var(--nd-sp-16) 0;
	}
}

@media (min-width: 861px) {
	.dap__body {
		grid-template-columns: var(--nd-aside-w-md) minmax(0, 1fr);
		gap: var(--nd-sp-32);
		padding-top: var(--nd-sp-26);
	}
}

@media (min-width: 1101px) {
	.dap__body {
		grid-template-columns: var(--nd-aside-w) minmax(0, 1fr);
		gap: var(--nd-sp-40);
	}
}

@media (max-width: 720px) {
	/* catalog.css hides the current crumb below 721px; here it is the only crumb, so show it. */
	.dap .cat-breadcrumb__crumb--current {
		display: inline-flex;
	}

	.dap-list__item {
		grid-template-columns: var(--nd-sp-24) minmax(0, 1fr);
		gap: var(--nd-sp-12);
	}

	.dap-list__item::before {
		width: var(--nd-sp-24);
		height: var(--nd-sp-24);
		font-size: var(--nd-fs-12);
	}

	.dap-sec + .dap-sec,
	.dap-related {
		margin-top: var(--nd-sp-32);
	}
}