/* ==========================================================================
   Age Gate — pixel-perfect from Figma spec
   Strategy:
   - wp-admin Appearance     → background colour, blur, foreground colour (#F4F4F4), text colour
                                (plugin outputs these as --ag-* vars; do not duplicate here)
   - CSS variables in :root  → properties not exposed in wp-admin Appearance
                                (no !important needed — source order wins, our CSS loads last)
   - .age-restriction scoped → properties not covered by any plugin variable
   - !important               → ONLY for display:none (hiding elements) and body scroll lock
   ========================================================================== */

/* ---------- CSS variable overrides (properties NOT in wp-admin Appearance) ---------- */
:root {
	/* Overlay */
	--ag-wrapper-padding: 20px;
	--ag-form-overlow: auto; /* note: plugin spells it "overlow" (typo in plugin source) */

	/* Card */
	--ag-form-max-width: 663px;
	--ag-form-padding: 32px 40px;
	--ag-form-radius: 0;
	--ag-form-border: 0;
	--ag-form-shadow: none;

	/* Text */
	--ag-text-align: center;

	/* Logo — 300px wide, 40px below */
	--ag-logo-max-width: 300px;
	--ag-logo-height: auto;
	--ag-text-heading-margin: 0 0 40px;

	/* Headline — 64px, weight 700, 40px below */
	--ag-text-headline-size: 64px;
	--ag-text-headline-weight: 700;
	--ag-text-headline-margin: 0 0 40px;

	/* Inputs — 60px height via padding trick, dark border, 3px radius */
	--ag-input-padding: 0 20px;
	--ag-input-text-size: 16px;
	--ag-input-border: solid;
	--ag-input-border-width: 1px;
	--ag-input-radius: 3px;
	--ag-input-background-color: #ffffff;
	--ag-input-color: #2D292B;   /* also sets border-color (inherits) */
	--ag-input-spacing: 10px;
	--ag-fields-margin: 0 auto 40px;
	--ag-label-display: none;

	/* Submit button */
	--ag-button-color-background: #2D292B;
	--ag-button-color-text: #ffffff;
	--ag-button-padding: 22px 15px;
	--ag-button-size: 20px;
	--ag-button-weight: 600;
	--ag-button-radius: 4px;
	--ag-button-border: 0;
	--ag-button-color-hover: #111111;
	--ag-submit-margin: 0 0 40px;

	/* Disclaimer */
	--ag-text-additional-size: 14px;
	--ag-text-additional-margin: 0;
	--ag-text-additional-padding: 0;

	/* Remember me — hidden via margin 0 (display:none below) */
	--ag-remember-margin: 0;
}

/* ---------- Lock page scroll while age gate is active ---------- */
.age-restriction,
.age-gate__restricted,
.age-gate-restricted {
	overflow: hidden !important;
	height: 100vh !important;
}

/* ---------- Wrapper — center card (align/justify not in plugin variables) ---------- */
.age-restriction .age-gate__wrapper,
.age-restriction .age-gate-wrapper {
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* ---------- Form — ensure no gap between flex children ---------- */
.age-restriction .age-gate__form,
.age-restriction .age-gate-form {
	gap: 0;
}

/* ---------- Logo — block + centered, capped to Figma dimensions (300×134px) ---------- */
.age-restriction .age-gate__heading-title--logo,
.age-restriction .age-gate-heading-title-logo {
	display: block;
	margin-bottom: 40px;
	max-width: 300px;
	max-height: 134px;
	width: auto;
	height: auto;
}

/* ---------- Headline — color, font-family, decoration (not in plugin variables) ---------- */
.age-restriction .age-gate__headline,
.age-restriction .age-gate-headline {
	color: #7398B3;
	font-family: 'Saira ExtraCondensed', 'Saira Extra Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin-bottom: 40px;
}

/* ---------- Inputs — height, font-family, box-sizing (not in plugin variables) ---------- */
.age-restriction .age-gate input[type="text"].age-gate__input,
.age-restriction .age-gate input[type="text"].age-gate-input {
	height: 60px;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	box-sizing: border-box;
}

.age-restriction .age-gate input[type="text"].age-gate__input::placeholder,
.age-restriction .age-gate input[type="text"].age-gate-input::placeholder {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
}

/* ---------- Submit wrapper — flex center (margin handled by --ag-submit-margin) ---------- */
.age-restriction .age-gate__submit,
.age-restriction .age-gate-submit {
	display: flex;
	justify-content: center;
}

/* ---------- Submit button — width, font decoration (not in plugin variables) ---------- */
.age-restriction button.age-gate__button,
.age-restriction button.age-gate-button,
.age-restriction button.age-gate__submit--yes,
.age-restriction button.age-gate-submit-yes {
	width: 104px;
	height: auto;
	font-family: 'Saira ExtraCondensed', 'Saira Extra Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* ---------- Additional information — flex column with 20px gap (not in plugin variables) ---------- */
.age-restriction .age-gate__additional-information,
.age-restriction .age-gate-additional-information {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	line-height: 1.6;
}

.age-restriction .age-gate__additional-information p,
.age-restriction .age-gate-additional-information p {
	margin: 0;
	width: 100%;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 400;
}

.age-restriction .age-gate__additional-information hr,
.age-restriction .age-gate-additional-information hr {
	display: block;
	border: none;
	border-top: 1px solid #2D292B;
	margin: 0;
	width: 100%;
	height: 0;
}

.age-restriction .age-gate__additional-information a,
.age-restriction .age-gate-additional-information a {
	color: #2D292B;
	text-decoration: underline;
}

/* ---------- Hide subheadline, remember me ---------- */
.age-gate__subheadline,
.age-gate-subheadline,
.age-gate__remember-wrapper,
.age-gate-remember-wrapper {
	display: none !important;
}

/* ---------- Error messages ---------- */
.age-gate__errors,
.age-gate-errors {
	margin: 0 0 20px;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #c00;
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {
	:root {
		--ag-form-padding: 28px 24px;
		--ag-text-headline-size: 48px;
		--ag-logo-max-width: 220px;
	}
}

@media (max-width: 375px) {
	:root {
		--ag-form-padding: 24px 20px;
		--ag-text-headline-size: 40px;
	}

	.age-restriction button.age-gate__button,
	.age-restriction button.age-gate-button {
		width: 90px;
		font-size: 17px;
	}
}

/* ---------- Short viewport (≤800px tall) — compress spacing to avoid scroll ---------- */
@media (max-height: 800px) {
	:root {
		--ag-form-padding: 24px 40px;
		--ag-logo-max-width: 200px;
		--ag-text-heading-margin: 0 0 24px;
		--ag-text-headline-size: 48px;
		--ag-text-headline-margin: 0 0 40px;
		--ag-fields-margin: 0 auto 20px;
		--ag-submit-margin: 0 0 40px;
	}
}