/*
 * Meridian — Global CSS
 *
 * Layout helpers, resets, and utility rules that cannot be expressed
 * in theme.json. Everything decorative lives in theme.json instead.
 * This file is enqueued on both the front-end and in the block editor.
 */

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

/* -------------------------------------------------------------------------
 * Base resets
 * ---------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

p {
	margin-block-start: 0;
	margin-block-end: var(--wp--preset--spacing--16);
}

p:last-child {
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
 * Site layout
 * ---------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--parchment);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);

	/* Scroll-driven background fill transition */
	transition: box-shadow var(--wp--custom--transition--smooth);
}

.site-header.is-scrolled {
	box-shadow: 0 1px 12px rgba(15, 15, 15, 0.06);
}

.site-main {
	min-height: 60vh;
}

/* -------------------------------------------------------------------------
 * Focus styles — keyboard accessible, on-brand
 * ---------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

/* -------------------------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------------------- */
.wp-block-navigation a {
	text-decoration: none;
	color: inherit;
	transition: color var(--wp--custom--transition--base);
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-deep);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Site Logo
 * ---------------------------------------------------------------------- */
.wp-block-site-logo a {
	display: inline-flex;
	text-decoration: none;
}

.wp-block-site-logo img {
	height: auto;
}

/* -------------------------------------------------------------------------
 * Buttons — transition not expressible in theme.json
 * ---------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--smooth),
		border-color var(--wp--custom--transition--smooth),
		color var(--wp--custom--transition--smooth);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	white-space: nowrap;
}

/* Ghost / outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--parchment);
}

/* Accent fill button variant */
.wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/* -------------------------------------------------------------------------
 * Separator
 * ---------------------------------------------------------------------- */
.wp-block-separator {
	border: none;
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	margin-block: var(--wp--preset--spacing--48);
}

.wp-block-separator.is-style-wide {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Images
 * ---------------------------------------------------------------------- */
.wp-block-image img {
	border-radius: inherit;
}

.wp-block-cover,
.wp-block-cover__image-background {
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Search
 * ---------------------------------------------------------------------- */
.site-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 0;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	background: transparent;
	color: var(--wp--preset--color--ink);
	transition: border-color var(--wp--custom--transition--base);
}

.site-search .wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------
 * Scroll-driven sticky header — add .is-scrolled via minimal inline JS
 * or use pure CSS @keyframes with animation-timeline: scroll()
 * (Progressive enhancement: Chrome 115+, Firefox 110+)
 * ---------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
	@keyframes header-scroll-reveal {
		from { box-shadow: none; }
		to   { box-shadow: 0 1px 12px rgba(15, 15, 15, 0.07); }
	}

	.site-header {
		animation: header-scroll-reveal linear both;
		animation-timeline: scroll(root block);
		animation-range: 0px 80px;
	}
}

/* -------------------------------------------------------------------------
 * Scroll-driven section entrance animations
 * Progressive enhancement — no-JS, no library
 * (Chrome 115+, Firefox 110+)
 * ---------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	.meridian-fade-up {
		animation: meridian-fade-in-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	@keyframes meridian-fade-in-up {
		from {
			opacity: 0;
			transform: translateY(24px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * Mini Cart
 * ---------------------------------------------------------------------- */
.wc-block-mini-cart__button {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--ink);
	transition: color var(--wp--custom--transition--base);
	position: relative;
	display: inline-flex;
	align-items: center;
}

.wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--accent-deep);
}

.wc-block-mini-cart__quantity-badge {
	position: absolute;
	top: -4px;
	right: -6px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 10px;
	font-weight: 500;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * Utility classes
 * ---------------------------------------------------------------------- */
.u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.u-text-balance {
	text-wrap: balance;
}

.u-text-pretty {
	text-wrap: pretty;
}