/*
 * Inner-page head (templates/components/page-head.php), on tokens.css.
 *
 * Ported from Schedule-A2 (.crumb, .ptitle) and Schedule-MobileLive (.s-crumb, .s-title);
 * BRIEF §5.6 (Kreeti page head: breadcrumb 16/400 Gray, title 44/700 Red, no dash or rule)
 * and §10f (phones: breadcrumb 13, title 28).
 */

.skdr-page-head {
	font-family: var(--skdr-font);
}

.skdr-page-head :is(nav, ol, li, h1, p) {
	font-family: var(--skdr-font);
}

.skdr-crumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-regular);
}

.skdr-crumb li {
	margin: 0;
	padding: 0;
}

.skdr-crumb li + li::before {
	content: " / ";
	color: var(--skdr-gray);
	white-space: pre;
}

/* The theme colours every a, a:visited and a:hover (0,1,1): set ours inside the head */
.skdr-page-head .skdr-crumb a {
	border-radius: 2px;
	color: var(--skdr-gray);
	text-decoration: none;
}

.skdr-page-head .skdr-crumb a:hover {
	color: var(--skdr-red);
	text-decoration: underline;
}

.skdr-page-head .skdr-crumb a:focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

.skdr-page-head .skdr-page-title {
	clear: none;
	margin: 8px 0 0;
	padding: 0;
	color: var(--skdr-red);
	font-size: var(--skdr-fs-title);
	line-height: var(--skdr-lh-title);
	font-weight: var(--skdr-fw-bold);
}

.skdr-page-sub {
	margin: 8px 0 0;
	color: var(--skdr-gray);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
}

/*
 * A placed page's own content (Pages\Shell, #111): editor text around the shortcode sits in
 * the normal content container; the page body (.skdr-placed) is full width. Lists keep their
 * markers whatever the page's own resets say.
 */
.skdr-page-content > :not(.skdr-placed) {
	box-sizing: border-box;
	max-width: var(--skdr-container);
	margin: 0 auto var(--skdr-sp-16);
	color: var(--skdr-gray);
	font-family: var(--skdr-font);
	font-size: var(--skdr-fs-body);
	line-height: var(--skdr-lh-body);
}

.skdr-page-content > :is(ul, ol):not(.skdr-placed) {
	padding-left: 1.5em;
	list-style: revert;
}

@media (max-width: 760px) {
	.skdr-crumb ol {
		font-size: var(--skdr-fs-caption);
		line-height: 18px;
	}

	.skdr-page-head .skdr-page-title {
		margin-top: 2px;
		font-size: 28px;
		line-height: 34px;
	}

	.skdr-page-sub {
		margin-top: 4px;
		font-size: var(--skdr-fs-caption);
		line-height: var(--skdr-lh-caption);
	}
}