/*
 * WP-NECO base styles.
 *
 * Rules:
 *  - Selectors are wrapped in :where() so everything here has zero specificity and
 *    any block style, Global Styles value or user CSS wins without !important.
 *  - Values come from design tokens (theme.json) so style variations just work.
 *  - No @layer: core block CSS is unlayered and would always beat layered rules.
 */

:where(html) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--neco-header-offset, 0px) + 1rem);
}

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

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

:where(img, video, svg, canvas) {
	max-width: 100%;
	height: auto;
}

:where(a) {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 0.06em;
}

:where(:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
}

:where(.wp-site-blocks) {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

:where(.wp-site-blocks > main) {
	flex: 1 0 auto;
}

/* The gap between header, main and footer is controlled by the templates, not by blockGap. */
:where(.wp-site-blocks > * + *) {
	margin-block-start: 0;
}

/* Skip link target and anchors are not hidden under a sticky header. */
:where([id]) {
	scroll-margin-top: calc(var(--neco-header-offset, 0px) + 1rem);
}

/* ---------- Header / footer ---------- */

:where(.neco-header) {
	min-height: var(--neco-header-height, var(--wp--custom--header--height));
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

:where(.neco-footer) {
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--s);
}

@media (max-width: 781px) {
	:where(.neco-header) {
		min-height: var(--neco-header-height-mobile, var(--wp--custom--header--height-mobile));
	}
}

/* ---------- Post lists ---------- */

:where(.neco-post-card) {
	height: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--l);
	overflow: hidden;
	background: var(--wp--preset--color--base);
	transition: box-shadow var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--out);
}

:where(.neco-post-card:hover, .neco-post-card:focus-within) {
	box-shadow: var(--wp--preset--shadow--m);
}

:where(.neco-post-card .wp-block-post-featured-image) {
	margin: 0;
}

:where(.neco-post-card .wp-block-post-featured-image img) {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ---------- Forms ---------- */

:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"]), textarea, select) {
	max-width: 100%;
	padding: 0.6em 0.8em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--s);
	background: var(--wp--preset--color--base);
	color: inherit;
	font: inherit;
	line-height: 1.5;
}

/* ---------- Tables scroll inside their own box on narrow screens ---------- */

:where(.wp-block-table) {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- Motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
	:where(*, *::before, *::after) {
		scroll-behavior: auto;
	}
}

/* ---------- Visually hidden text for screen readers ---------- */

:where(.screen-reader-text) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}