/* ============================================================
   AGE GATE — habillage du plugin age-gate à la DA G2
   (« Riso Zine »)
   ============================================================
   Le plugin (v3.7.x) se style via des custom properties --ag-*
   (cf. wp-content/plugins/age-gate/dist/raw/main.css). On les
   redéfinit sur .age-gate__wrapper (plus spécifique que le
   :root inline du plugin, donc prioritaire quel que soit
   l'ordre de chargement), + quelques règles ciblées pour la
   typo et les 2 boutons (couleurs différenciées Yes/No). */

.age-gate__wrapper {
	/* Fond plein écran : le papier, opaque */
	--ag-background-color: var(--g2-paper, #F2EDE3);
	--ag-background-opacity: 1;
	--ag-blur: 0px;

	/* Carte centrale : blanche, contour noir, ombre bleue décalée, angles droits */
	--ag-form-background: var(--g2-white, #ffffff);
	--ag-form-border: 2px solid var(--g2-ink, #1A1A1A);
	--ag-form-border-width: 2px;
	--ag-form-radius: 0;
	--ag-form-shadow: 8px 8px 0 var(--g2-blue, #0078BF);
	--ag-form-padding: 48px 40px;
	--ag-form-max-width: 520px;

	/* Texte */
	--ag-text-color: var(--g2-ink, #1A1A1A);
	--ag-text-heading-size: 44px;
	--ag-text-heading-weight: 400;
	--ag-text-heading-margin: 0 0 14px;

	/* Boutons (base commune ; couleurs par bouton plus bas) */
	--ag-button-radius: 0;
	--ag-button-padding: 13px 34px;
	--ag-button-size: 15px;
	--ag-button-weight: 700;
	--ag-button-gap: 18px;

	/* Divers */
	--ag-remember-size: 12px;
	--ag-text-error-color: var(--g2-ink, #1A1A1A);
	--ag-text-error-weight: 700;
	--ag-loader-color: var(--g2-pink, #FF48B0);
}

/* Logo du site au-dessus du titre */
.age-gate__wrapper .age-gate__heading::before {
	content: "";
	display: block;
	width: 96px;
	height: 64px;
	margin: 0 auto 18px;
	background: url("../images/logo-bed-240.png") center / contain no-repeat;
}

/* Nom du site : Bagel en minuscules, bleu, l'encre rose décalée */
.age-gate__wrapper .age-gate__heading-title {
	font-family: var(--g2-font-display, "Bagel Fat One", sans-serif);
	font-weight: 400;
	line-height: 1;
	text-transform: lowercase;
	color: var(--g2-blue, #0078BF);
	text-shadow: 4px 3px 0 var(--g2-pink, #FF48B0);
}

/* Question */
.age-gate__wrapper .age-gate__challenge {
	font-family: var(--g2-font-body, "Space Mono", monospace);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 30px;
	color: var(--g2-ink, #1A1A1A);
}

/* Boutons : Yes = bleu à ombre rose, No = blanc contouré. */
.age-gate button.age-gate__submit--yes,
.age-gate button.age-gate__submit--no {
	font-family: var(--g2-font-body, "Space Mono", monospace);
	text-transform: lowercase;
	border: 2px solid var(--g2-ink, #1A1A1A);
	transition: background-color .15s ease, color .15s ease;
}

.age-gate button.age-gate__submit--yes {
	background: var(--g2-blue, #0078BF);
	color: #fff;
	box-shadow: 4px 4px 0 var(--g2-pink, #FF48B0);
}

.age-gate button.age-gate__submit--no {
	background: var(--g2-white, #ffffff);
	color: var(--g2-ink, #1A1A1A);
}

.age-gate button.age-gate__submit--yes:hover,
.age-gate button.age-gate__submit--yes:focus,
.age-gate button.age-gate__submit--yes:active,
.age-gate button.age-gate__submit--no:hover,
.age-gate button.age-gate__submit--no:focus,
.age-gate button.age-gate__submit--no:active {
	background: var(--g2-ink, #1A1A1A);
	color: #fff;
	border: 2px solid var(--g2-ink, #1A1A1A);
}

/* Remember me */
.age-gate__wrapper .age-gate__remember {
	font-family: var(--g2-font-body, "Space Mono", monospace);
	font-weight: 700;
	color: var(--g2-muted, #55504a);
}

.age-gate__wrapper .age-gate__remember-field {
	accent-color: var(--g2-blue, #0078BF);
}

/* Message d'erreur */
.age-gate__wrapper .age-gate__errors {
	font-family: var(--g2-font-body, "Space Mono", monospace);
}

@media (max-width: 480px) {
	.age-gate__wrapper {
		--ag-form-padding: 34px 22px;
		--ag-text-heading-size: 34px;
		--ag-button-padding: 12px 26px;
		--ag-form-max-width: calc(100vw - 40px);
		--ag-form-shadow: 6px 6px 0 var(--g2-blue, #0078BF);
	}

	.age-gate__wrapper .age-gate__heading::before {
		width: 84px;
		height: 56px;
	}
}