/**
 * AVELUNEXA - base layer.
 *
 * Typography, layout primitives, buttons, forms and utilities that apply to
 * every page. Shop-specific rules live in woocommerce.css.
 *
 * Rules here are deliberately low-specificity so Blocksy's Customizer output
 * can still win where the client wants it to. There is exactly one !important
 * in this file and it is annotated.
 */

body {
	font-family: var(--av-font-body);
	font-size: var(--av-text-base);
	line-height: var(--av-leading-normal);
	color: var(--av-color-text);
	background-color: var(--av-color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .av-display {
	font-family: var(--av-font-display);
	font-weight: var(--av-weight-regular);
	line-height: var(--av-leading-tight);
	letter-spacing: var(--av-tracking-tight);
	color: var(--av-color-text);
	text-wrap: balance;
}

h1 { font-size: var(--av-text-4xl); }
h2 { font-size: var(--av-text-3xl); }
h3 { font-size: var(--av-text-2xl); }
h4 { font-size: var(--av-text-xl); }

h5, h6 {
	font-family: var(--av-font-body);
	font-size: var(--av-text-sm);
	font-weight: var(--av-weight-semibold);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	color: var(--av-color-text-muted);
}

p { text-wrap: pretty; }

/* Eyebrow label above section headings. */
.av-eyebrow {
	display: block;
	margin-bottom: var(--av-space-xs);
	font-family: var(--av-font-body);
	font-size: var(--av-text-xs);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-widest);
	text-transform: uppercase;
	color: var(--av-color-accent-hover);
}

.av-lede {
	max-width: 58ch;
	font-size: var(--av-text-lg);
	line-height: var(--av-leading-relaxed);
	color: var(--av-color-text-muted);
}

a {
	color: inherit;
	text-decoration-color: var(--av-color-accent);
	text-underline-offset: 0.2em;
	transition: color var(--av-duration-fast) var(--av-ease);
}

a:hover { color: var(--av-color-accent-hover); }

/* --- Focus: visible on ivory, navy and gold alike --- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--av-color-focus);
	outline-offset: 2px;
	border-radius: var(--av-radius-sm);
	box-shadow: 0 0 0 4px var(--av-color-focus-contrast);
}

.av-section--inverse :where(a, button, input, select, textarea):focus-visible {
	outline-color: var(--av-color-focus-contrast);
	box-shadow: 0 0 0 4px rgba(13, 27, 42, 0.9);
}

.av-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: var(--av-space-2xs) var(--av-space-sm);
	background: var(--av-color-bg-inverse);
	color: var(--av-color-text-inverse);
}

.av-skip-link:focus {
	left: var(--av-space-sm);
	top: var(--av-space-sm);
	width: auto;
	height: auto;
	clip-path: none;
}

/* --- Layout primitives --- */

.av-container {
	width: 100%;
	max-width: var(--av-container);
	margin-inline: auto;
	padding-inline: var(--av-gutter);
}

.av-container--narrow { max-width: var(--av-container-narrow); }

.av-section { padding-block: var(--av-section-y); }
.av-section--sunken { background-color: var(--av-color-bg-sunken); }

.av-section--inverse {
	background-color: var(--av-color-bg-inverse);
	color: var(--av-color-text-inverse);
}

.av-section--inverse :is(h1, h2, h3, h4) { color: var(--av-color-text-inverse); }
.av-section--inverse .av-lede { color: var(--av-gray-300); }

.av-stack > * + * { margin-block-start: var(--av-space-sm); }
.av-stack--lg > * + * { margin-block-start: var(--av-space-lg); }

/* Auto-fitting grid. The 15rem floor keeps cards from collapsing into
   unreadable slivers at 360px. */
.av-grid {
	display: grid;
	gap: var(--av-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.av-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

.av-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--av-space-md);
	margin-block-end: var(--av-space-lg);
}

/* --- Buttons --- */

.av-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--av-space-2xs);
	min-height: var(--av-tap-target);
	padding: var(--av-space-xs) var(--av-space-lg);
	border: 1px solid transparent;
	border-radius: var(--av-radius-sm);
	font-family: var(--av-font-body);
	font-size: var(--av-text-sm);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--av-duration-fast) var(--av-ease),
		border-color var(--av-duration-fast) var(--av-ease),
		color var(--av-duration-fast) var(--av-ease);
}

.av-btn--primary {
	background-color: var(--av-color-bg-inverse);
	color: var(--av-color-text-inverse);
}

.av-btn--primary:hover {
	background-color: var(--av-navy-600);
	color: var(--av-color-text-inverse);
}

/* Gold is an accent, not a primary action colour: #D4AF37 on white is only
   ~1.9:1, so gold buttons always carry navy text. */
.av-btn--gold {
	background-color: var(--av-color-accent);
	color: var(--av-color-text-on-gold);
}

.av-btn--gold:hover {
	background-color: var(--av-color-accent-hover);
	color: var(--av-ivory-100);
}

.av-btn--ghost {
	background-color: transparent;
	border-color: var(--av-color-border-strong);
	color: var(--av-color-text);
}

.av-btn--ghost:hover {
	border-color: var(--av-color-text);
	background-color: var(--av-color-bg-raised);
}

.av-btn[aria-disabled='true'], .av-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- Forms --- */

input[type='text'], input[type='email'], input[type='tel'], input[type='password'],
input[type='search'], input[type='number'], select, textarea {
	width: 100%;
	min-height: var(--av-tap-target);
	padding: var(--av-space-2xs) var(--av-space-xs);
	border: 1px solid var(--av-color-border-strong);
	border-radius: var(--av-radius-sm);
	background-color: var(--av-color-bg-raised);
	color: var(--av-color-text);
	font-family: var(--av-font-body);
	/* 16px minimum stops iOS Safari zooming the viewport on focus. */
	font-size: max(16px, var(--av-text-base));
	line-height: var(--av-leading-normal);
	transition: border-color var(--av-duration-fast) var(--av-ease);
}

input:hover, select:hover, textarea:hover { border-color: var(--av-gray-700); }

label {
	display: inline-block;
	margin-block-end: var(--av-space-3xs);
	font-size: var(--av-text-sm);
	font-weight: var(--av-weight-medium);
}

/* --- Media --- */

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

/* Reserve the box before the image arrives. Together with width/height
   attributes on the img, this is what keeps CLS under 0.1. */
.av-media {
	position: relative;
	overflow: hidden;
	background-color: var(--av-color-bg-sunken);
	aspect-ratio: 3 / 4;
}

.av-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--av-duration-base) var(--av-ease);
}

.av-media--square { aspect-ratio: 1 / 1; }
.av-media--wide { aspect-ratio: 16 / 9; }

/* --- Utilities --- */

.av-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.av-text-center { text-align: center; }
.av-muted { color: var(--av-color-text-muted); }

.av-rule {
	width: 3rem;
	height: 1px;
	margin-block: var(--av-space-sm);
	border: 0;
	background-color: var(--av-color-accent);
}

.av-text-center .av-rule { margin-inline: auto; }

/* --- Global guards --- */

/* Nothing may push the document sideways. This is the single !important in the
   file: third-party embeds (payment iframes, review widgets) routinely set
   inline widths that overflow at 360px and we cannot outrank them otherwise. */
html, body { overflow-x: clip !important; }

/* Long unbroken strings - order references, SKUs, emails - must wrap rather
   than widen their container. */
.av-break { overflow-wrap: anywhere; }