/* =====================================================================
   Zack's Sports — frontend behavior styles (token-driven only)
   Pairs with assets/js/interactions.js. Colors/sizes reference theme.json
   presets; only layout geometry (display/position/clip-path) is literal.
   ===================================================================== */

/* ---- Spacing & interaction polish (home rhythm ref: nz-safety) ------ */
/* Bands stack flush — no default block gap leaking between header/sections.
   Section breathing room comes from each band's section/outer padding tokens. */
.wp-site-blocks > * + * {
	margin-top: 0;
}
/* Smooth interactive transitions + a subtle button hover lift. */
a,
.wp-element-button,
.wp-block-button__link {
	transition: color 0.25s ease, background-color 0.25s ease,
		border-color 0.25s ease, transform 0.2s ease, opacity 0.2s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY( -1px );
}

/* ---- Mega menu: hidden until JS opens it ---------------------------- */
/* The header is the positioning context so the pop-out anchors to its
   bottom edge (below the utility bar, main bar, and category bar). */
.zsi-header {
	position: relative;
	z-index: 60;
}
.zsi-mega-menu {
	display: none;
}
.zsi-mega-menu.is-open {
	display: block;
}
/* Anchored full-width pop-out flush under the whole header on desktop. */
@media ( min-width: 721px ) {
	.zsi-mega-menu.is-open {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
	}
}
/* Mobile: render in flow as an accordion panel inside the drawer. */
@media ( max-width: 720px ) {
	.zsi-mega-menu.is-open {
		position: static;
	}
}

/* Trigger affordance + open-state cue. */
.zsi-mega-trigger {
	cursor: pointer;
}
.zsi-mega-trigger[aria-expanded="true"] {
	color: var(--wp--preset--color--orange);
}

/* ---- Inline SVG icons ---------------------------------------------- */
/* Glyphs inherit text color via stroke="currentColor"; modifiers below
   recolor them with tokens. Sizing comes from width/height attrs. */
.zsi-icon {
	display: inline-block;
	vertical-align: -0.18em;
	flex-shrink: 0;
}
.zsi-icon.is-accent {
	color: var(--wp--preset--color--orange);
}
.zsi-icon.is-muted {
	color: var(--wp--preset--color--muted);
}

/* ---- Header utility icons ------------------------------------------ */
.zsi-header-actions {
	gap: var(--wp--preset--spacing--50);
}
.zsi-action {
	display: inline-flex;
	color: var(--wp--preset--color--paper);
	line-height: 0;
}
.zsi-action:hover,
.zsi-action:focus-visible {
	color: var(--wp--preset--color--orange);
}

/* ---- Category bar -------------------------------------------------- */
.zsi-catbar {
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--30);
}
.zsi-catbar p {
	margin: 0;
}
.zsi-catbar a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: inherit;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--control);
	text-decoration: none;
}
.zsi-catbar a:hover,
.zsi-catbar a:focus-visible {
	background-color: var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--paper);
}

/* ---- Hero: navy gradient + right-side diagonal photo panel ---------- */
.zsi-hero-angled {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(
		120deg,
		var(--wp--preset--color--navy-900) 0%,
		var(--wp--preset--color--navy-800) 55%,
		var(--wp--preset--color--navy-700) 100%
	);
}
/* Keep copy above the panel and clear of the diagonal. The content column is
   constrained to 1180 (centered) by the block layout; its inner blocks sit in
   the left 56% so they clear the right-side diagonal. */
.zsi-hero-content {
	position: relative;
	z-index: 1;
}
.zsi-hero-content > * {
	max-width: 56%;
}
/* Styled "storefront photo" placeholder — right diagonal wedge. */
@supports ( clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ) ) {
	.zsi-hero-angled::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 46%;
		z-index: 0;
		background-color: var(--wp--preset--color--navy-600);
		opacity: 0.55;
		clip-path: polygon( 22% 0, 100% 0, 100% 100%, 0 100% );
	}
}
@media ( max-width: 781px ) {
	.zsi-hero-content > * {
		max-width: 100%;
	}
	.zsi-hero-angled::after {
		display: none;
	}
}

/* ---- Button variants (hero / CTAs) --------------------------------- */
/* Dark: solid navy fill (bg set by token class; add hover + active). */
.zsi-btn-dark .wp-block-button__link:hover,
.zsi-btn-dark .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--navy-600) !important;
}
/* Ghost: transparent fill + border, overrides theme.json button bg. */
.zsi-btn-ghost .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--navy-500);
}
.zsi-btn-ghost .wp-block-button__link:hover,
.zsi-btn-ghost .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--navy-700);
	border-color: var(--wp--preset--color--paper);
}
/* Trailing-icon button: keep glyph inline with the label. */
.zsi-btn-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
/* Compact add-to-cart on product minis. */
.zsi-btn-sm .wp-block-button__link {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--sm);
}

/* ---- Product mini (featured rail) ---------------------------------- */
.zsi-mini {
	overflow: hidden;
}
/* Two rows of three on desktop (columnCount:3); collapse on small screens. */
@media ( max-width: 781px ) {
	.zsi-rail {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}
@media ( max-width: 480px ) {
	.zsi-rail {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}
}
.zsi-mini-img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ---- Why-shop: 2x2 icon grid + storefront card -------------------- */
.zsi-why-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var(--wp--preset--spacing--50);
}
.zsi-why-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}
.zsi-why-text h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--navy-800);
}
.zsi-why-text p {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.zsi-why-photo {
	overflow: hidden;
	height: 100%;
}
.zsi-why-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 9rem;
	background-color: var(--wp--preset--color--navy-700);
	border-bottom: 1px solid var(--wp--preset--color--navy-600);
}

/* ---- Handgun learning: media / play panel -------------------------- */
.zsi-hgl-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 16rem;
	border-radius: var(--wp--custom--radius--card);
	background-image: linear-gradient(
		145deg,
		var(--wp--preset--color--navy-700) 0%,
		var(--wp--preset--color--navy-600) 100%
	);
}
.zsi-hgl-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--orange);
}
.zsi-hgl-caption {
	position: absolute;
	left: var(--wp--preset--spacing--50);
	bottom: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--lg);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--paper);
}
.zsi-hgl-caption strong {
	color: var(--wp--preset--color--orange);
}

/* ---- Subscribe band ------------------------------------------------ */
.zsi-subscribe-band h2 {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
.zsi-subscribe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}
.zsi-subscribe input[type="email"] {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--navy-500);
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	min-width: 16rem;
}
.zsi-subscribe label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--paper);
}
.zsi-subscribe input[type="checkbox"] {
	accent-color: var(--wp--preset--color--orange);
}

/* ---- Breadcrumb (woocommerce/breadcrumbs in .zsi-breadcrumb) -------- */
.zsi-breadcrumb,
.zsi-breadcrumb .wc-block-breadcrumbs,
.zsi-breadcrumb .woocommerce-breadcrumb {
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}
.zsi-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.zsi-breadcrumb a:hover,
.zsi-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--orange);
}
.zsi-breadcrumb .zsi-crumb-sep {
	color: var(--wp--preset--color--border);
}

/* ---- Spec tabs ----------------------------------------------------- */
.zsi-spec-tabs p {
	cursor: pointer;
	margin: 0;
}
.zsi-spec-tabs p[aria-selected="true"],
.zsi-spec-tabs p.is-active {
	color: var(--wp--preset--color--navy-800);
	border-bottom-color: var(--wp--preset--color--orange);
}

/* Focus visibility for keyboard users on enhanced controls. */
.zsi-mega-trigger:focus-visible,
.zsi-spec-tabs p:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
}