/*
 * Arrakon theme — global chrome styles.
 *
 * Ported 1:1 from the Next.js storefront's shop layout
 * (`F:\Alligears-Webapp\app\(shop)\layout.tsx`, `.ag-skiplink`) and design
 * tokens (`F:\Alligears-Webapp\lib\design-tokens.ts`), using the theme.json
 * custom properties so no value is retyped by hand.
 */

/* Skip link — invisible until it takes keyboard focus; first in tab order. */
.ag-skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--wp--custom--z-index--above-all, 100);
	background: var(--wp--preset--color--dark-surface-a, #111827);
	color: #ffffff;
	padding: 12px 18px;
	border-radius: 0 0 10px 0;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.ag-skiplink:focus {
	left: 0;
}

/*
 * Focus ring — every interactive element, 2px brand orange, 2px offset.
 * Source: app/globals.css:168-172, a global `:focus-visible` rule whose
 * outline is `!important` on purpose (the source's own comment: inline
 * `outline: none` on the header search box and the form fields must not win).
 * Ported with the same `!important`.
 *
 * The source's `border-radius: 3px` in that rule only shows on elements with
 * no radius of their own (an inline or later class radius beats it there).
 * Here it sits in `:where()` — zero specificity — so it does the same: any
 * element whose own stylesheet sets a radius keeps it, one without gets 3px.
 */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-orange, #f97316) !important;
	outline-offset: 2px;
}

:where(:focus-visible) {
	border-radius: 3px;
}

/* Reduced motion kill switch — app/globals.css:218-227. 0.01ms, not 0, so
   transitionend/animationend still fire and nothing waiting on them hangs. */
@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;
	}
}

/* Container utility classes — widths from theme.json settings.layout / settings.custom.container. */
.ag-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1360px);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter--base, 32px);
}

.ag-container--wide {
	max-width: var(--wp--style--global--wide-size, 1760px);
}

.ag-container--editorial {
	max-width: var(--wp--custom--container--editorial, 1240px);
}

.ag-container--checkout {
	max-width: var(--wp--custom--container--checkout, 1160px);
}

.ag-container--narrow {
	max-width: var(--wp--custom--container--narrow, 1000px);
}

.ag-container--prose {
	max-width: var(--wp--custom--container--prose, 860px);
}

.ag-container--track {
	max-width: var(--wp--custom--container--track, 720px);
}

@media (max-width: 640px) {
	.ag-container,
	.ag-container--wide,
	.ag-container--editorial,
	.ag-container--checkout,
	.ag-container--narrow,
	.ag-container--prose,
	.ag-container--track {
		padding-inline: var(--wp--custom--gutter--mobile, 18px);
	}
}

/* app/globals.css:143-148. Line height 1.5 (Tailwind preflight, html) is
   theme.json styles.typography.lineHeight. */
body {
	background: var(--wp--preset--color--body-bg, #fafaf9);
	color: var(--wp--preset--color--body-text, #111827);
	font-feature-settings: "tnum" 1;
	-webkit-font-smoothing: antialiased;
}