/**
 * Métier age gate — production match.
 *
 * The Age Gate plugin (Phil Baker) renders the 21+ confirmation. The functional
 * bits (buttons mode, "Yup :)" / "Nope :(" labels, order) live in the plugin
 * options; this file is the visual match to production: the white MBC logo and
 * heading with two coral text choices, centered over a full-bleed community
 * photo. Injected onto the plugin's own `age-gate-custom` style handle from
 * functions.php (mete_age_gate_styles). Scoped to .age-gate*, not Tailwind.
 */

/* Card + button-system variables (the plugin reads these --ag-* custom props). */
.age-gate {
	--ag-form-background: transparent;
	--ag-form-shadow: none;
	--ag-form-border: 0;
	--ag-form-max-width: 720px;
	--ag-form-padding: 24px;
	--ag-text-color: #fff;
	--ag-text-align: center;

	/* The two choices render as coral text, not filled buttons. */
	--ag-button-color-background: transparent;
	--ag-button-color-hover: transparent;
	--ag-button-color-text: #f1614d;
	--ag-button-color-text-hover: #ff7a66;
	--ag-button-size: 1.75rem;
	--ag-button-weight: 700;
	--ag-button-padding: 0;
	--ag-button-gap: 3rem;
}

/* Full-bleed photo with a dark wash so white text stays legible. */
.age-gate-background,
.age-gate__background {
	background-image: linear-gradient( 180deg, rgba( 0, 0, 0, 0.45 ), rgba( 0, 0, 0, 0.68 ) ), var( --ag-background-image ) !important;
}

/* White MBC lockup. The plugin logo setting resolves an attachment ID only, so
 * we render the theme's white logo as a background on the heading wrapper (which
 * always prints) and suppress the plugin's site-name fallback via disable_title.
 * Root-relative URL keeps it environment-independent. */
.age-gate-heading,
.age-gate__heading {
	width: 220px;
	max-width: 70vw;
	height: 100px;
	margin: 0 auto 1.75rem;
	background: url( /wp-content/themes/metier/resources/img/mbc-logo-white.png ) center / contain no-repeat;
}

/* "Are you over 21?" */
.age-gate-challenge,
.age-gate__challenge {
	font-family: var( --font-display, "Manrope", ui-sans-serif, system-ui, sans-serif );
	font-size: clamp( 1.75rem, 4vw, 2.75rem );
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1.5rem;
}

/* Coral text choices, no button chrome. */
.age-gate-buttons button,
.age-gate__buttons button {
	background: transparent !important;
	color: #f1614d !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var( --font-display, "Manrope", ui-sans-serif, system-ui, sans-serif );
	font-weight: 700;
	padding: 0 !important;
	transition: color 0.15s ease;
}
.age-gate-buttons button:hover,
.age-gate-buttons button:focus,
.age-gate__buttons button:hover,
.age-gate__buttons button:focus {
	background: transparent !important;
	color: #ff7a66 !important;
	text-decoration: none;
	outline: none;
}

/* A yes/no gate has no "remember me" checkbox (prod matches). */
.age-gate-remember-wrapper,
.age-gate__remember-wrapper {
	display: none !important;
}