/*
 * On-page structure: the Yoast SEO breadcrumb trail on light backgrounds, and
 * the designed dead end (404). Every value is a design token — see DESIGN.md.
 *
 * The light-background base below is what the generic page template and the
 * Contact and Services pages use. The dark page heroes (About, Our work,
 * Careers, Blog, Imprint, Privacy, single post, single case study) add
 * .breadcrumbs--invert, whose colours are declared in style.css — but this
 * stylesheet is enqueued AFTER style.css, so the base `.breadcrumbs a` and
 * `.breadcrumbs .breadcrumb_last` rules below out-ranked that variant and left
 * primary-600 links and neutral-900 text sitting on primary-900 (2.0:1 and
 * 1.2:1 — unreadable). The variant is therefore re-stated at the end of this
 * block, after the rules it has to beat, so the trail stays legible on a dark
 * hero no matter which stylesheet loads last.
 */

.breadcrumbs {
	margin-bottom: var(--space-6);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

.breadcrumbs span,
.breadcrumbs p {
	margin: 0;
	max-width: none;
}

.breadcrumbs a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
	color: var(--color-link-hover);
}

/* The separator Yoast prints between the crumbs. */
.breadcrumbs .breadcrumb_last {
	color: var(--color-text);
	font-weight: 500;
}

/*
 * The inverted variant, on the dark heroes. Declared here, after the base
 * rules, and at the same or higher specificity than each one it overrides, so
 * load order can never put dark text back on a dark hero. Contrast against
 * primary-900 (#162b47): neutral-100 12.8:1, neutral-50 13.6:1,
 * accent-300 9.7:1 — all well past the 4.5:1 floor, where the base rules this
 * block replaces scored 1.2:1 and 2.0:1.
 */
.breadcrumbs--invert,
.breadcrumbs--invert span,
.breadcrumbs--invert p {
	color: var(--color-neutral-100);
}

.breadcrumbs--invert .breadcrumb_last {
	color: var(--color-neutral-50);
	font-weight: 500;
}

.breadcrumbs--invert a {
	color: var(--color-accent-300);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.breadcrumbs--invert a:hover,
.breadcrumbs--invert a:focus {
	color: var(--color-neutral-50);
}

/* ==========================================================================
   Logo mark in the header, when the owner uploaded one in the Customizer
   ========================================================================== */

.site-brand__mark--image {
	display: inline-flex;
	align-items: center;
}

.site-brand__mark--image img {
	display: block;
	width: auto;
	max-height: 40px;
}

/* ==========================================================================
   Dead end (404)
   ========================================================================== */

.not-found {
	padding-block: var(--space-section);
}

.not-found__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.not-found__title {
	font-size: clamp(var(--text-xl), 5vw, var(--text-3xl));
}

.not-found__text {
	max-width: var(--measure);
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.not-found__heading {
	margin-top: var(--space-10);
	font-size: var(--text-xl);
}

.not-found__links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.not-found__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.not-found__links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.not-found__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	color: var(--color-text);
	text-decoration: none;
	transition: transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default);
}

.not-found__card:hover,
.not-found__card:focus-visible {
	transform: translateY(-2px);
	border-color: var(--color-primary-300);
	box-shadow: var(--shadow-lg);
	color: var(--color-text);
}

.not-found__card-label {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: var(--letter-tight);
	color: var(--color-primary-800);
}

.not-found__card-text {
	margin: 0;
	max-width: none;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.not-found__search {
	margin-top: var(--space-8);
}

.not-found__search .search-form,
.not-found__search form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	max-width: 32rem;
}

.not-found__search label {
	flex: 1 1 14rem;
}

.not-found__search input[type="search"],
.not-found__search input[type="text"] {
	width: 100%;
	min-height: var(--tap-target);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.not-found__search input[type="submit"],
.not-found__search button[type="submit"] {
	min-height: var(--tap-target);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-neutral-50);
	background: var(--color-accent-700);
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-default);
}

.not-found__search input[type="submit"]:hover,
.not-found__search button[type="submit"]:hover {
	background: var(--color-accent-800);
}

/* ==========================================================================
   Archive / search listing fallback (index.php)
   ========================================================================== */

.listing__head {
	margin-bottom: var(--space-10);
}

.listing__title {
	font-size: clamp(var(--text-xl), 4.5vw, var(--text-3xl));
}

.listing__count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}