/* ============================================================
   AGE GATE — habillage du plugin age-gate à la DA G3
   (néo-brutaliste punk-zine vermillon/lime)
   ============================================================
   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 : paper opaque */
	--ag-background-color: var(--g3-paper, #ffffff);
	--ag-background-opacity: 1;
	--ag-blur: 0px;

	/* Card centrale : bordure 2px ink, radius 0, ombre dure */
	--ag-form-background: var(--g3-paper, #ffffff);
	--ag-form-border: var(--g3-border, 2px solid #0a0a0a);
	--ag-form-border-width: 2px;
	--ag-form-radius: 0;
	--ag-form-shadow: var(--g3-shadow-8, 8px 8px 0 #0a0a0a);
	--ag-form-padding: 48px 40px;
	--ag-form-max-width: 520px;

	/* Texte */
	--ag-text-color: var(--g3-ink, #0a0a0a);
	--ag-text-heading-size: 44px;
	--ag-text-heading-weight: 400; /* Anton est naturellement massif */
	--ag-text-heading-margin: 0 0 10px;

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

	/* Divers */
	--ag-remember-size: 12px;
	--ag-text-error-color: var(--g3-accent, #ee2818);
	--ag-text-error-weight: 700;
	--ag-loader-color: var(--g3-accent, #ee2818);
}

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

/* Titre "Porno Éthique" / "Feminist Porn" : masthead Anton + point vermillon */
.age-gate__wrapper .age-gate__heading-title {
	font-family: var(--g3-font-display, "Anton", sans-serif);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--g3-ink, #0a0a0a);
}

.age-gate__wrapper .age-gate__heading-title::after {
	content: ".";
	color: var(--g3-accent, #ee2818);
}

/* Question : mono, façon kicker punk-zine */
.age-gate__wrapper .age-gate__challenge {
	font-family: var(--g3-font-mono, "JetBrains Mono", monospace);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0 0 28px;
	color: var(--g3-ink, #0a0a0a);
}

/* Boutons : blocs radius 0. Yes = vermillon, No = paper contour. */
.age-gate button.age-gate__submit--yes,
.age-gate button.age-gate__submit--no {
	border: var(--g3-border, 2px solid #0a0a0a);
	box-shadow: var(--g3-shadow-4, 4px 4px 0 #0a0a0a);
	font-family: var(--g3-font-mono, "JetBrains Mono", monospace);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.age-gate button.age-gate__submit--yes {
	background-color: var(--g3-accent, #ee2818);
	color: var(--g3-paper, #ffffff);
}

.age-gate button.age-gate__submit--no {
	background-color: var(--g3-paper, #ffffff);
	color: var(--g3-ink, #0a0a0a);
}

.age-gate button.age-gate__submit--yes:hover,
.age-gate button.age-gate__submit--yes:focus,
.age-gate button.age-gate__submit--yes:active {
	background-color: var(--g3-accent, #ee2818);
	color: var(--g3-paper, #ffffff);
	border: var(--g3-border, 2px solid #0a0a0a);
	transform: translate(-2px, -2px);
	box-shadow: var(--g3-shadow-6, 6px 6px 0 #0a0a0a);
}

.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-color: var(--g3-accent2, #c8ff2d);
	color: var(--g3-ink, #0a0a0a);
	border: var(--g3-border, 2px solid #0a0a0a);
	transform: translate(-2px, -2px);
	box-shadow: var(--g3-shadow-6, 6px 6px 0 #0a0a0a);
}

/* Remember me */
.age-gate__wrapper .age-gate__remember {
	font-family: var(--g3-font-mono, "JetBrains Mono", monospace);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--g3-ink-soft, #666666);
}

.age-gate__wrapper .age-gate__remember-field {
	accent-color: var(--g3-accent, #ee2818);
}

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

@media (max-width: 480px) {
	.age-gate__wrapper {
		--ag-form-padding: 36px 24px;
		--ag-text-heading-size: 32px;
		--ag-button-padding: 13px 26px;
		--ag-form-max-width: calc(100vw - 32px);
	}

	.age-gate__wrapper .age-gate__challenge {
		font-size: 14px;
	}

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