/**
 * Base Theme - global foundation.
 *
 * Loaded on every page. Everything here is either something theme.json cannot
 * express (focus rings, reduced motion, utility classes) or a component class
 * used by the pattern library.
 *
 * Rules:
 *   - No hard-coded colours, sizes or spacing. Use the design tokens.
 *   - No !important unless overriding a core inline style, and say why.
 *   - No media queries where a modern layout primitive does the job.
 *
 * Token reference: docs/DESIGN-SYSTEM.md
 */

/* -------------------------------------------------------------------------
 * 1. Document
 * ---------------------------------------------------------------------- */

:root {
	/*
	 * Header height. Defined here rather than in header.css because base.css
	 * needs it for scroll-padding, and a token has to exist before it is used.
	 */
	--base-header-height: 4.5rem;

	/* Set by inc/accessibility.php when the admin bar is showing. */
	--base-admin-bar-height: 0px;

	/* Inline data URI so the checklist tick costs no request and no icon font. */
	--base-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/*
	 * Anchor links must not land under the sticky header. scroll-padding on the
	 * scroll container is the modern way to do this - no JavaScript, and no
	 * scroll-margin repeated on every possible target.
	 */
	scroll-padding-block-start: calc(var(--base-header-height) + var(--base-admin-bar-height) + var(--wp--preset--spacing--md));
}

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Long words and URLs should wrap rather than force a horizontal scrollbar. */
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Headings read better when the last line is not a single orphaned word. */
h1,
h2,
h3 {
	text-wrap: balance;
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text-inverse);
}

/* -------------------------------------------------------------------------
 * 2. Accessibility
 * ---------------------------------------------------------------------- */

/*
 * One focus treatment for the whole site. :focus-visible means a mouse click
 * does not draw a ring, but keyboard focus always does - which is the WCAG 2.2
 * requirement without the visual cost that makes people remove focus styles.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--custom--radius--sm);
}

/* On dark backgrounds the primary-coloured ring loses contrast. */
.has-dark-background-color :where(a, button, summary):focus-visible,
.base-footer :where(a, button, summary):focus-visible,
.wp-block-cover :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--text-inverse);
}

/* Visually hidden, still announced. Core emits this class in several places. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--background);
	clip-path: none;
	color: var(--wp--preset--color--primary);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	height: auto;
	inset-block-start: var(--wp--preset--spacing--md);
	inset-inline-start: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
	text-decoration: none;
	width: auto;
	z-index: 100000;
}

/* WordPress injects the skip link into block themes automatically. */
.skip-link:focus {
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--md);
	outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
	outline-offset: var(--wp--custom--focus--offset);
}

/*
 * Honour the operating system setting. Anything that moves is reduced to a
 * near-instant change rather than removed, so state changes stay perceivable.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; /* Overrides per-component durations. */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 3. Typography helpers (block styles registered in inc/blocks.php)
 * ---------------------------------------------------------------------- */

/* Small uppercase label that sits above a heading. */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin-block-end: 0;
	text-transform: uppercase;
}

/* Introductory paragraph, one step up from body copy. */
.is-style-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
}

/* List with a tick instead of a bullet. */
.wp-block-list.is-style-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-checklist > li {
	padding-inline-start: 1.9em;
	position: relative;
}

.wp-block-list.is-style-checklist > li::before {
	/* Inline SVG keeps the tick crisp and avoids an icon font request. */
	background-color: currentColor;
	color: var(--wp--preset--color--primary);
	content: "";
	display: block;
	height: 1.15em;
	inset-block-start: 0.18em;
	inset-inline-start: 0;
	-webkit-mask-image: var(--base-icon-check);
	mask-image: var(--base-icon-check);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	position: absolute;
	width: 1.15em;
}

.wp-block-list.is-style-unstyled {
	list-style: none;
	padding-inline-start: 0;
}

/* -------------------------------------------------------------------------
 * 4. Layout utilities
 * ---------------------------------------------------------------------- */

/*
 * Section wrapper. Patterns set their own padding from the spacing scale, so
 * this only guarantees a section never collapses to nothing when a developer
 * clears the padding in the editor.
 */
.base-section {
	position: relative;
}

/* Narrow reading measure, for prose inside a wider container. */
.container-narrow {
	margin-inline: auto;
	max-width: var(--wp--custom--container--narrow);
}

/* Stack the columns of a reversed split so the text still reads first. */
@media (max-width: 781px) {
	.wp-block-columns.base-split--reverse {
		flex-direction: column-reverse;
	}
}

/*
 * Optional scroll-triggered reveal, with no JavaScript.
 *
 * Uses scroll-driven animations where the browser supports them, and is a
 * no-op everywhere else - so content is never hidden by a script that failed
 * to run. Add the class in "Additional CSS class(es)".
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.animate-in {
			animation: base-fade-up linear both;
			animation-range: entry 0% cover 22%;
			animation-timeline: view();
		}
	}
}

@keyframes base-fade-up {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 5. Pattern components
 * ---------------------------------------------------------------------- */

/* Icon badge used by the services, features and contact patterns. */
.base-icon-badge {
	align-items: center;
	background-color: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.base-icon-badge svg {
	height: 1.375rem;
	width: 1.375rem;
}

/* No container, just the glyph. */
.base-icon-badge--plain {
	background-color: transparent;
	height: auto;
	width: auto;
}

.base-icon-badge--plain svg {
	height: 1.75rem;
	width: 1.75rem;
}

.base-icon-badge--quote {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	height: auto;
	width: auto;
}

.base-icon-badge--quote svg {
	height: 2.5rem;
	width: 2.5rem;
}

/* Star rating. The accessible name lives on the wrapper's aria-label. */
.base-rating {
	color: var(--wp--preset--color--warning);
	display: flex;
	gap: 0.125rem;
	margin: 0;
}

.base-rating svg {
	fill: currentColor;
	height: 1.125rem;
	width: 1.125rem;
}

/* Numbered process steps. */
.base-step-number {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	margin-block-end: 0;
	opacity: 0.85;
}

/* Statistics. */
.base-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin-block-end: 0;
}

/* Story timeline: a single rule down the left with a marker per entry. */
.base-timeline {
	border-inline-start: 1px solid var(--wp--preset--color--border);
	padding-inline-start: var(--wp--preset--spacing--xl);
}

.base-timeline__item {
	position: relative;
}

.base-timeline__item::before {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	height: 0.625rem;
	inset-block-start: 0.45em;
	inset-inline-start: calc(var(--wp--preset--spacing--xl) * -1 - 0.3125rem);
	position: absolute;
	width: 0.625rem;
}

/* Hairline-separated rows, used by the services list. */
.base-list-rows__row {
	border-block-start: 1px solid var(--wp--preset--color--border);
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--xl);
}

.base-list-rows__row:last-child {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

/* Card whose whole surface behaves like a link target. */
.base-card--link {
	position: relative;
	transition: border-color var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		box-shadow var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		transform var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.base-card--link:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.base-card--link h3 a {
	text-decoration: none;
}

/*
 * Stretch the heading link across the card so the entire card is clickable,
 * while the accessible name stays the heading text alone.
 */
.base-card--link h3 a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.base-card__more {
	font-weight: 600;
	margin-block-end: 0;
	margin-block-start: auto;
}

/* People. */
.base-person .wp-block-image img {
	border-radius: var(--wp--custom--radius--md);
}

.base-avatar img {
	border-radius: var(--wp--custom--radius--pill);
}

/* Pricing. */
.base-price {
	display: flex;
	flex-direction: column;
	position: relative;
}

.base-price__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin-block-end: 0;
}

.base-price__badge {
	align-self: flex-start;
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-inverse);
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	padding: 0.3rem 0.75rem;
	text-transform: uppercase;
}

.base-price--featured {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--lg);
}

.base-price__box {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--xl);
}

/* The buttons block should sit at the bottom of every pricing card. */
.base-price .wp-block-buttons {
	margin-block-start: auto;
}

/* Testimonials. */
.base-testimonial {
	display: flex;
	flex-direction: column;
}

/* Logos: muted until hover, so they support the page rather than shout. */
.base-logos img {
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter var(--wp--custom--transition--base) var(--wp--custom--transition--easing),
		opacity var(--wp--custom--transition--base) var(--wp--custom--transition--easing);
}

.base-logos img:hover {
	filter: none;
	opacity: 1;
}

.base-logos__grid > .wp-block-image {
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	justify-content: center;
	margin: -0.5px;
	min-height: 7rem;
	padding: var(--wp--preset--spacing--lg);
}

.base-logos__grid img {
	max-width: 8rem;
}

/* Contact. */
.base-contact-details p {
	margin-block-end: 0;
}

.base-form-wrap {
	container-type: inline-size;
}

/* Post lists. */
.base-post-list__item {
	border-block-start: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--md);
}

.base-post-list__item:last-child {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.base-post-nav {
	gap: var(--wp--preset--spacing--md);
}

.base-post-nav .wp-block-post-navigation-link {
	max-width: 48%;
}

.base-post-meta {
	color: var(--wp--preset--color--text-muted);
}

/* Separate the meta items with a dot that assistive tech never reads. */
.base-post-meta > *:not(:first-child)::before {
	color: var(--wp--preset--color--border);
	content: "\00B7";
	margin-inline-end: var(--wp--preset--spacing--md);
}

/* -------------------------------------------------------------------------
 * 6. Breadcrumbs (rendered by inc/breadcrumbs.php)
 * ---------------------------------------------------------------------- */

.base-breadcrumbs {
	font-size: var(--wp--preset--font-size--sm);
}

.base-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.base-breadcrumbs__item {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--sm);
}

/* The separator is decorative, so it is a pseudo-element, not text. */
.base-breadcrumbs__item:not(:first-child)::before {
	color: var(--wp--preset--color--border);
	content: "/";
}

.base-breadcrumbs__link {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.base-breadcrumbs__link:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.base-breadcrumbs__current {
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * 7. Sidebar and misc core blocks that have no dedicated file
 * ---------------------------------------------------------------------- */

.base-sidebar .wp-block-latest-posts,
.base-sidebar .wp-block-categories {
	list-style: none;
	padding-inline-start: 0;
}

.base-sidebar li {
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--sm);
}

.base-sidebar a {
	text-decoration: none;
}

.base-sidebar a:hover {
	text-decoration: underline;
}

/* Page header band sits flush against the header above it. */
.base-page-header {
	border-block-end: 1px solid var(--wp--preset--color--border);
}