/* ==========================================================================
   Age Gate - Progressive Enhancements

   Core layout and colors are in an inline <style> block (render_modal).
   This file adds hover/focus states, transitions, animations, accessibility
   preferences, mobile sizing, and print rules. If this file is stripped
   by an optimizer, the gate still renders and functions correctly.
   ========================================================================== */

/* Scroll lock - applied via inline <head> script */
html.hifi-age-gate-active {
	overflow: hidden !important;
	height: 100% !important;
}

/* ==========================================================================
   Hover & Focus states
   ========================================================================== */

.hifi-age-gate__btn {
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.hifi-age-gate__btn:focus-visible {
	outline: 0.125rem solid var(--hifi-color, #F8F7F2);
	outline-offset: 0.1875rem;
}

.hifi-age-gate__btn--yes:hover,
.hifi-age-gate__btn--yes:focus,
.hifi-age-gate__btn--no:hover,
.hifi-age-gate__btn--no:focus {
	background: var(--hifi-color, #F8F7F2);
	color: var(--hifi-bg, #29352F);
}

/* ==========================================================================
   Accessibility - prefers-reduced-motion

   The inline <head> script handles the close fade and attention pulse via
   direct inline styles (and respects prefers-reduced-motion for the latter),
   so this block only needs to disable the button hover transition.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hifi-age-gate__btn {
		transition: none;
	}
}

/* ==========================================================================
   Mobile - ensure touch targets meet 48px minimum
   ========================================================================== */
@media (max-width: 30rem) {
	.hifi-age-gate__content {
		padding: 0.5rem 1rem 0.75rem;
	}

	.hifi-age-gate__logo img {
		max-height: 12rem;
	}

	.hifi-age-gate__question {
		font-size: 1.375rem;
	}

	.hifi-age-gate__btn {
		padding: 0.875rem 1.75rem;
		min-width: 6.25rem;
		min-height: 3rem;
	}
}

/* ==========================================================================
   Print - let verified visitors print page content, not the overlay
   ========================================================================== */
@media print {
	.hifi-age-gate {
		display: none !important;
	}
	html.hifi-age-gate-active {
		overflow: auto !important;
		height: auto !important;
	}
}