/* =====================================================================
   LX4Tours · Base
   Element defaults that complement theme.json (which only styles core
   elements + a handful of blocks). Keep this layer minimal — anything
   token-able lives in tokens.css; anything component-shaped goes in
   components.css.
   ===================================================================== */

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

html { color-scheme: light; }

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

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

/* Heading rhythm — theme.json sets sizes, this sets margins/balance. */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--wp--preset--spacing--30);
	text-wrap: balance;
}

p { text-wrap: pretty; }

small { font-size: var(--wp--preset--font-size--small); }

hr {
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	margin: var(--wp--preset--spacing--50) 0;
}

/* Selection — orange tint stays on-brand. */
::selection {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast-strong);
}

/* Universal focus ring — design doc §13. Never suppressed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
	border-radius: inherit;
}

/* Reduced motion: drop transitions/animations. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}