/**
 * Site-wide page header — the "print sheet" band.
 *
 * Rendered by page_header/functions.php on every regular view (pages, posts,
 * blog index, services, archives, search, 404). A dark ink band (matching
 * the footer surface) styled like a sheet on the press: thin crop-mark
 * brackets in the four corners, a halftone-dot fade on the right, and the
 * CMYK registration strip as the bottom trim edge. Eyebrow tick and title
 * bar take the per-context ink via --vk-tick (set inline on the section):
 * cyan = info pages, magenta = services, yellow = blog, red = search/404.
 *
 * Markup:
 * <section class="vk-page-header" style="--vk-tick:…">
 *   <div class="vk-container vk-page-header__inner">
 *     <div class="vk-page-header__breadcrumbs">   (only with Rank Math active)
 *       <nav class="rank-math-breadcrumb"><p><a>…</a><span class="separator">…</span><span class="last">…</span></p></nav>
 *     </div>
 *     <h1 class="vk-page-header__title">…</h1>
 *     <p class="vk-page-header__lead">…</p>
 *   </div>
 *   <span class="vk-cmyk-strip vk-page-header__strip"></span>
 * </section>
 */

.vk-page-header {
	position: relative;
	overflow: hidden;
	background-color: var(--vk-bg-dark);
	/* Bottom padding clears the 6px trim strip overlaid at the bottom edge. */
	padding: var(--vk-space-4) 0 calc(var(--vk-space-4) + 6px);
}

/* Crop marks — thin trim brackets in the four corners of the sheet. */
.vk-page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--vk-border-invert-strong), var(--vk-border-invert-strong)),
		linear-gradient(var(--vk-border-invert-strong), var(--vk-border-invert-strong)),
		linear-gradient(var(--vk-border-invert-strong), var(--vk-border-invert-strong)),
		linear-gradient(var(--vk-border-invert-strong), var(--vk-border-invert-strong)),
		linear-gradient(var(--vk-border-invert-strong), var(--vk-border-invert-strong)),
		linear-gradient(var(--vk-border-invert-strong), var(--vk-border-invert-strong)),
		linear-gradient(var(--vk-border-invert-strong), var(--vk-border-invert-strong)),
		linear-gradient(var(--vk-border-invert-strong), var(--vk-border-invert-strong));
	background-size:
		12px 1px, 1px 12px,
		12px 1px, 1px 12px,
		12px 1px, 1px 12px,
		12px 1px, 1px 12px;
	background-position:
		left 10px top 10px, left 10px top 10px,
		right 10px top 10px, right 10px top 10px,
		left 10px bottom 16px, left 10px bottom 16px,
		right 10px bottom 16px, right 10px bottom 16px;
}

/* Halftone dots fading in from the right — the printed-tone texture. */
.vk-page-header::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 6px;
	width: 42%;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(circle, var(--vk-border-invert-strong) 1px, transparent 1.4px);
	background-size: 11px 11px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 75%);
	mask-image: linear-gradient(90deg, transparent, #000 75%);
}

/* CMYK registration strip pinned to the bottom trim edge. */
.vk-page-header__strip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
}

/* Content sits above the decorative layers. */
.vk-page-header__inner {
	position: relative;
	z-index: 1;
}

/* Rank Math breadcrumb trail — inverted variant of the WooCommerce trail
   bar (breadcrumbs.css): parent links muted, current crumb brighter, plain
   "»" separators inherit the faint trail colour. */
.vk-page-header__breadcrumbs {
	margin-bottom: var(--vk-space-2);
	color: var(--vk-ink-invert-muted);
	font-size: var(--vk-text-md);
	font-weight: 600;
	letter-spacing: .03em;
}

.vk-page-header__breadcrumbs p {
	margin: 0;
}

.vk-page-header__breadcrumbs a {
	color: var(--vk-ink-invert-muted);
	text-decoration: none;
	transition: color var(--vk-anim-fast);
}

.vk-page-header__breadcrumbs a:hover {
	color: var(--vk-ink-invert);
}

.vk-page-header__breadcrumbs a:focus-visible {
	outline: 2px solid var(--vk-ink-invert);
	outline-offset: 2px;
	color: var(--vk-ink-invert);
}

.vk-page-header__breadcrumbs .last {
	color: var(--vk-ink-invert-soft);
}

/* Clean title — the eyebrow tick and CMYK trim strip carry the accent. */
.vk-page-header__title {
	margin: 0;
	color: var(--vk-ink-invert);
	font-size: var(--vk-title-hero);
	font-weight: 700;
	line-height: 1.15;
}

.vk-page-header__lead {
	margin: 10px 0 0;
	max-width: 62ch;
	color: var(--vk-ink-invert-soft);
	font-size: var(--vk-lead-hero);
	line-height: 1.6;
}

@media (min-width: 600px) {
	.vk-page-header {
		padding: var(--vk-space-5) 0 calc(var(--vk-space-5) + 6px);
	}
}

/* The band carries the H1; GP's no-results heading is not gated by the
   generate_show_title filter, so hide that duplicate here. */
.has-vk-page-header .no-results .entry-title {
	display: none;
}