/*
 * Title band for regular WordPress Pages (templates/page.html) — breadcrumb + page
 * title over the page's own featured image, if it has one. Same visual language as the
 * Catalog page's title band (assets/catalog.css, .enacoding-catalog__head), reused here under
 * its own class/stylesheet so ordinary Pages don't load any of the shop-specific CSS.
 */

.enacoding-page,
.enacoding-page * {
	box-sizing: border-box;
}

/* Beats the global WP rule :where(.wp-site-blocks) > * { margin-block-start: 1.2rem; }
   (specificity 0, so any normal selector beats it) — we don't want a gap above, but we
   do want one below, before the footer template part (see the same fix on the Catalog
   page, assets/catalog.css). */
.enacoding-page {
	margin-block-start: 0;
	margin-block-end: 3rem;
}

.enacoding-page__head {
	position: relative;
	background-color: #f8f9fa;
	background-size: cover;
	background-position: center;
	padding: 2rem 0;
	margin-bottom: 2.5rem;
}

/* When the page has a featured image, the background is that photo (matches the Catalog
   page's title band, .enacoding-catalog__head, in assets/catalog.css). */
.enacoding-page__head.has-image {
	padding: 3rem 0;
}

.enacoding-page__head.has-image .enacoding-page__head-inner {
	border-radius: 1rem;
	padding: 1.5rem 2rem;
}

.enacoding-page__head-inner,
.enacoding-page__body {
	max-width: var( --wp--style--global--wide-size, 1340px );
	margin: 0 auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

@media ( min-width: 1100px ) {
	.enacoding-page__head-inner,
	.enacoding-page__body {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.enacoding-page .wc-block-breadcrumbs {
	font-size: 0.75rem;
	color: #666;
	margin: 0 0 0.75rem;
}

.enacoding-page .wc-block-breadcrumbs a {
	color: #666;
	text-decoration: none;
}

.enacoding-page .wc-block-breadcrumbs a:hover {
	color: #008080;
	text-decoration: underline;
}

.enacoding-page .wp-block-post-title.wp-block-post-title {
	color: #333;
	font-weight: 800;
	font-size: 1.875rem;
	line-height: 1.2;
	margin: 0;
	padding: 0;
}

.enacoding-page .wp-block-post-title::after {
	content: '';
	display: block;
	width: 5rem;
	height: 4px;
	margin-top: 0.75rem;
	background: #008080;
	border-radius: 9999px;
}