/**
 * Public and editor styles for the JJFrías Brevo newsletter block.
 * Everything is scoped below .jjfnl so both sites can use one plugin safely.
 */

.jjfnl {
	--jjfnl-surface: var(--wp--preset--color--base, #fffdf8);
	--jjfnl-surface-soft: var(--wp--preset--color--canvas, #f3f7f5);
	--jjfnl-ink: var(--wp--preset--color--ink, #18323a);
	--jjfnl-muted: var(--wp--preset--color--muted, #607277);
	--jjfnl-line: var(--wp--preset--color--line, #dfe7e3);
	--jjfnl-accent: #176c65;
	--jjfnl-highlight: var(--wp--preset--color--brand-yellow, #f4c95d);
	--jjfnl-focus: #0b554f;
	--jjfnl-alert: var(--wp--preset--color--brand-red, #c94e4a);
	--jjfnl-success: #247b5f;
	--jjfnl-radius: 22px;
	--jjfnl-control-radius: 999px;
	--jjfnl-shadow: 0 18px 48px rgba(24, 50, 58, 0.1);
	background-color: var(--jjfnl-background, var(--jjfnl-surface));
	border: 1px solid var(--jjfnl-line);
	border-radius: var(--jjfnl-radius);
	box-shadow: var(--jjfnl-shadow);
	color: var(--jjfnl-ink);
	container-name: jjfnl;
	container-type: inline-size;
	font-family: inherit;
	font-size: inherit;
	isolation: isolate;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	position: relative;
	width: 100%;
}

.jjfnl,
.jjfnl *,
.jjfnl *::before,
.jjfnl *::after {
	box-sizing: border-box;
}

.jjfnl::before {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--brand-blue, #5aa6b8) 0 18%,
		var(--wp--preset--color--brand-green, #6aab70) 18% 36%,
		var(--jjfnl-highlight) 36% 54%,
		var(--wp--preset--color--brand-orange, #e9a641) 54% 72%,
		var(--wp--preset--color--brand-red, #e76f68) 72% 86%,
		#9b84a8 86% 100%
	);
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

.jjfnl::after {
	background: radial-gradient(circle, color-mix(in srgb, var(--jjfnl-highlight) 28%, transparent) 0, transparent 68%);
	content: "";
	height: 18rem;
	pointer-events: none;
	position: absolute;
	right: -8rem;
	top: -9rem;
	width: 18rem;
	z-index: -1;
}

.jjfnl :where(h2, h3, h4, p, figure) {
	margin: 0;
}

.jjfnl :where(button, input) {
	font: inherit;
}

.jjfnl__inner {
	align-items: center;
	display: flex;
	gap: clamp(1.25rem, 3vw, 3rem);
	margin: 0 auto;
	max-width: 1240px;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.jjfnl__logo {
	display: block;
	flex: 0 0 auto;
	height: auto;
	max-height: 88px;
	max-width: 128px;
	object-fit: contain;
	width: auto;
}

.jjfnl__logo img {
	display: block;
	height: auto;
	max-height: 88px;
	max-width: 128px;
	object-fit: contain;
	width: auto;
}

.jjfnl__template-icon {
	display: block;
	height: auto;
	max-height: 72%;
	width: 62%;
}

.jjfnl--form-layout-compact-footer .jjfnl__consent,
.jjfnl--form-layout-compact-footer .jjfnl__legal {
	color: var(--jjfnl-muted);
}

.jjfnl--form-layout-compact-footer .jjfnl__consent a,
.jjfnl--form-layout-compact-footer .jjfnl__legal a {
	color: var(--jjfnl-highlight);
}

/* Keep a real accessible label without adding a second visual line above the
 * input in the compact footer composition. */
.jjfnl--form-layout-compact-footer .jjfnl__label {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.jjfnl__logo--placeholder {
	align-items: center;
	color: var(--jjfnl-ink);
	display: grid;
	font-size: 0.68em;
	font-weight: 800;
	gap: 0.3rem;
	justify-items: center;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
}

.jjfnl__logo--placeholder svg {
	background: #fff0bd;
	background: color-mix(in srgb, var(--jjfnl-highlight) 38%, var(--jjfnl-surface));
	border-radius: 50%;
	height: 56px;
	padding: 0.55rem;
	width: 56px;
}

.jjfnl__copy {
	flex: 1 1 310px;
	min-width: min(100%, 14rem);
}

.jjfnl__eyebrow {
	color: var(--jjfnl-accent);
	font-size: 0.75em;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.25;
	margin-bottom: 0.55rem !important;
	text-transform: uppercase;
}

.jjfnl__heading {
	color: var(--jjfnl-ink);
	font-family: Georgia, Cambria, "Times New Roman", serif;
	font-size: clamp(1.65em, 1.25em + 1.25vw, 2.55em);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 0 !important;
	overflow-wrap: anywhere;
}

.jjfnl__description {
	color: var(--jjfnl-muted);
	font-size: 0.95em;
	line-height: 1.6;
	margin-top: 0.75rem !important;
	max-width: 58ch;
}

.jjfnl__form {
	display: grid;
	flex: 1.25 1 500px;
	gap: 0.7rem;
	margin: 0;
	min-width: min(100%, 20rem);
}

.jjfnl__controls {
	align-items: end;
	display: grid;
	gap: 0.65rem;
	grid-template-columns: minmax(13rem, 1fr) auto;
	min-width: 0;
}

.jjfnl__email {
	display: grid;
	gap: 0.38rem;
	min-width: 0;
}

.jjfnl__label {
	color: var(--jjfnl-ink);
	font-size: 0.8em;
	font-weight: 750;
	line-height: 1.35;
}

.jjfnl__input {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: 1px solid #9eaca9;
	border-color: color-mix(in srgb, var(--jjfnl-ink) 28%, transparent);
	border-radius: var(--jjfnl-control-radius);
	box-shadow: 0 2px 0 rgba(24, 50, 58, 0.04);
	color: var(--jjfnl-ink);
	display: block;
	font-size: max(1em, 16px);
	height: auto;
	line-height: 1.35;
	margin: 0;
	max-width: none;
	min-height: 52px;
	min-width: 0;
	padding: 0.78rem 1.15rem;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
	width: 100%;
}

.jjfnl__input::placeholder {
	color: #586a70;
	opacity: 1;
}

.jjfnl__input:hover {
	border-color: var(--jjfnl-accent);
	border-color: color-mix(in srgb, var(--jjfnl-accent) 58%, var(--jjfnl-line));
}

.jjfnl__input:focus,
.jjfnl__input:focus-visible {
	border-color: var(--jjfnl-accent);
	box-shadow: 0 0 0 4px rgba(35, 135, 124, 0.18);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--jjfnl-accent) 20%, transparent);
	outline: 3px solid var(--jjfnl-focus);
	outline-offset: 2px;
}

.jjfnl__input[aria-invalid="true"] {
	border-color: var(--jjfnl-alert);
	box-shadow: 0 0 0 4px rgba(201, 78, 74, 0.14);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--jjfnl-alert) 16%, transparent);
}

.jjfnl__submit {
	-webkit-appearance: none;
	appearance: none;
	background: var(--jjfnl-ink);
	border: 1px solid var(--jjfnl-ink);
	border-radius: var(--jjfnl-control-radius);
	box-shadow: none;
	color: var(--jjfnl-surface);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	font-size: 0.92em;
	font-weight: 800;
	gap: 0.45rem;
	height: auto;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.15;
	margin: 0;
	max-width: none;
	min-height: 52px;
	min-width: 10.75rem;
	padding: 0.75rem 1.35rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	white-space: normal;
}

.jjfnl__submit:hover {
	background: var(--jjfnl-accent);
	border-color: var(--jjfnl-accent);
	color: #fff;
	transform: translateY(-1px);
}

.jjfnl__submit:active {
	transform: translateY(0);
}

.jjfnl__submit:focus,
.jjfnl__submit:focus-visible,
.jjfnl__consent a:focus,
.jjfnl__consent a:focus-visible,
.jjfnl__legal a:focus,
.jjfnl__legal a:focus-visible {
	box-shadow: 0 0 0 4px rgba(244, 201, 93, 0.42);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--jjfnl-highlight) 48%, transparent);
	outline: 3px solid var(--jjfnl-focus);
	outline-offset: 2px;
}

.jjfnl__submit:disabled {
	cursor: not-allowed;
	opacity: 0.86;
	transform: none;
}

.jjfnl__submit.is-loading {
	color: transparent;
	cursor: wait;
}

.jjfnl__submit.is-loading::after {
	color: #fff;
	content: attr(data-loading-label);
	font: inherit;
	font-weight: 800;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.jjfnl__consent {
	align-items: flex-start;
	color: var(--jjfnl-muted);
	cursor: pointer;
	display: flex;
	font-size: 0.82em;
	font-weight: 400;
	gap: 0.55rem;
	line-height: 1.45;
	margin: 0;
	max-width: 66ch;
}

.jjfnl__consent input {
	accent-color: var(--jjfnl-accent);
	flex: 0 0 auto;
	height: 19px;
	margin: 0.05rem 0 0;
	min-height: 19px;
	width: 19px;
}

.jjfnl__consent a,
.jjfnl__legal a {
	color: var(--jjfnl-accent);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.jjfnl__consent a:hover,
.jjfnl__legal a:hover {
	color: var(--jjfnl-ink);
}

.jjfnl__legal {
	color: var(--jjfnl-muted);
	font-size: 0.78em;
	line-height: 1.5;
}

.jjfnl__honeypot {
	height: 1px;
	left: -10000px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

.jjfnl__turnstile {
	max-width: 100%;
	overflow: hidden;
}

.jjfnl__turnstile iframe {
	max-width: 100%;
}

.jjfnl__status {
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 0.84em;
	font-weight: 700;
	line-height: 1.5;
	margin: 0 !important;
	padding: 0.72rem 0.85rem;
}

.jjfnl__status[hidden],
.jjfnl__status:empty {
	display: none;
}

.jjfnl__status.is-success {
	background: #edf8f3;
	background: color-mix(in srgb, var(--jjfnl-success) 10%, #fff);
	border-color: #b9d8cb;
	border-color: color-mix(in srgb, var(--jjfnl-success) 34%, #fff);
	color: #175e47;
}

.jjfnl__status.is-error {
	background: #fdf2f1;
	background: color-mix(in srgb, var(--jjfnl-alert) 9%, #fff);
	border-color: #e6bfbd;
	border-color: color-mix(in srgb, var(--jjfnl-alert) 32%, #fff);
	color: #8b302f;
}

/* JJFrías: warm editorial surface, serif newsletter headline and pill controls. */
.jjfnl--jjfrias {
	--jjfnl-surface: var(--wp--preset--color--base, #fffdf8);
	--jjfnl-surface-soft: var(--wp--preset--color--canvas, #f3f7f5);
	--jjfnl-ink: var(--wp--preset--color--ink, #18323a);
	--jjfnl-muted: var(--wp--preset--color--muted, #607277);
	--jjfnl-line: var(--wp--preset--color--line, #dfe7e3);
	--jjfnl-accent: #176c65;
	--jjfnl-highlight: var(--wp--preset--color--brand-yellow, #f4c95d);
	--jjfnl-radius: 22px;
	--jjfnl-control-radius: 999px;
}

/* Aula: compact, clear and aligned with the educational child theme. */
.jjfnl--aula {
	--jjfnl-surface: var(--aula-paper, var(--wp--preset--color--paper, #fff));
	--jjfnl-surface-soft: var(--aula-mist, var(--wp--preset--color--mist, #f4f7f6));
	--jjfnl-ink: var(--aula-ink, var(--wp--preset--color--ink, #18323a));
	--jjfnl-muted: var(--aula-muted, #5b6d72);
	--jjfnl-line: var(--aula-border, #d9e1df);
	--jjfnl-accent: #176c65;
	--jjfnl-highlight: var(--aula-sun, var(--wp--preset--color--sun, #f4c95d));
	--jjfnl-alert: var(--aula-coral, var(--wp--preset--color--coral, #e76f68));
	--jjfnl-radius: var(--aula-radius, 8px);
	--jjfnl-control-radius: 6px;
	--jjfnl-shadow: var(--aula-shadow, 0 12px 30px rgba(24, 50, 58, 0.08));
}

.jjfnl--aula::before {
	background: linear-gradient(90deg, var(--jjfnl-highlight) 0 34%, var(--jjfnl-accent) 34% 68%, var(--jjfnl-alert) 68% 100%);
}

.jjfnl--aula .jjfnl__heading {
	font-family: var(--wp--preset--font-family--display, ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif);
	letter-spacing: 0;
}

.jjfnl--aula .jjfnl__label,
.jjfnl--aula .jjfnl__submit {
	font-weight: 800;
}

/* Horizontal bar: copy and controls share the available width. */
.jjfnl--bar .jjfnl__inner {
	flex-wrap: wrap;
}

.jjfnl--bar .jjfnl__copy {
	max-width: 36rem;
}

/* Card: a self-contained centered component for pages and side areas. */
.jjfnl--card {
	margin-left: auto;
	margin-right: auto;
	max-width: 760px;
	padding: clamp(1.75rem, 5vw, 3.5rem);
}

.jjfnl--card .jjfnl__inner {
	display: grid;
	gap: 1.35rem;
	justify-items: center;
	max-width: 640px;
	text-align: center;
}

.jjfnl--card .jjfnl__copy,
.jjfnl--card .jjfnl__form {
	min-width: 0;
	width: 100%;
}

.jjfnl--card .jjfnl__description,
.jjfnl--card .jjfnl__consent {
	margin-left: auto;
	margin-right: auto;
}

.jjfnl--card .jjfnl__logo {
	margin: 0 auto;
	max-height: 76px;
}

/* Minimal: no card effect, useful inside an existing designed section. */
.jjfnl--minimal {
	--jjfnl-shadow: none;
	background-color: transparent;
	border-left: 0;
	border-radius: 0;
	border-right: 0;
	box-shadow: none;
	overflow: visible;
	padding: clamp(1.25rem, 2.5vw, 2rem) 0;
}

.jjfnl--minimal::after {
	display: none;
}

.jjfnl--minimal .jjfnl__inner {
	flex-wrap: wrap;
	gap: clamp(1rem, 2.5vw, 2rem);
}

/*
 * Intrinsic fallback for browsers without container queries: controls wrap
 * before either item can force the newsletter outside a narrow theme column.
 */
.jjfnl--bar .jjfnl__controls,
.jjfnl--minimal .jjfnl__controls {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.jjfnl--minimal .jjfnl__heading {
	font-size: clamp(1.4em, 1.2em + 0.8vw, 2em);
}

.jjfnl--minimal .jjfnl__description {
	font-size: 0.88em;
	margin-top: 0.45rem !important;
}

.jjfnl--minimal .jjfnl__logo {
	max-height: 60px;
	max-width: 96px;
}

/* Native Gutenberg text/background choices remain authoritative. */
.jjfnl.has-text-color .jjfnl__eyebrow,
.jjfnl.has-text-color .jjfnl__heading,
.jjfnl.has-text-color .jjfnl__description,
.jjfnl.has-text-color .jjfnl__label,
.jjfnl.has-text-color .jjfnl__consent,
.jjfnl.has-text-color .jjfnl__legal {
	color: inherit;
}

/* The editor preview is intentionally inert but visually equivalent. */
.jjfnl--editor-preview .jjfnl__form {
	pointer-events: none;
}

.jjfnl--editor-preview .jjfnl__input {
	cursor: default;
}

.jjfnl--editor-preview .jjfnl__consent input {
	opacity: 0.72;
}

/* Respond to the component's real column width, not only to the viewport. */
@container jjfnl (min-width: 761px) {
	.jjfnl--bar .jjfnl__controls,
	.jjfnl--minimal .jjfnl__controls {
		grid-template-columns: minmax(13rem, 1fr) auto;
	}
}

@container jjfnl (max-width: 760px) {
	.jjfnl--bar .jjfnl__inner,
	.jjfnl--minimal .jjfnl__inner {
		align-items: stretch;
		display: grid;
		gap: 1.2rem;
	}

	.jjfnl--bar .jjfnl__copy,
	.jjfnl--bar .jjfnl__form,
	.jjfnl--minimal .jjfnl__copy,
	.jjfnl--minimal .jjfnl__form {
		min-width: 0;
		width: 100%;
	}

	.jjfnl--bar .jjfnl__controls,
	.jjfnl--minimal .jjfnl__controls {
		align-items: stretch;
		grid-template-columns: minmax(0, 1fr);
	}

	.jjfnl--bar .jjfnl__submit,
	.jjfnl--minimal .jjfnl__submit {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 960px) {
	.jjfnl--bar .jjfnl__inner,
	.jjfnl--minimal .jjfnl__inner {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.jjfnl--bar .jjfnl__form,
	.jjfnl--minimal .jjfnl__form {
		flex-basis: 100%;
	}
}

@media (max-width: 680px) {
	.jjfnl {
		padding: 1.45rem;
	}

	.jjfnl__inner {
		align-items: stretch;
		display: grid;
		gap: 1.2rem;
	}

	.jjfnl__logo,
	.jjfnl__logo img {
		max-height: 68px;
		max-width: 112px;
	}

	.jjfnl__controls {
		align-items: stretch;
		grid-template-columns: minmax(0, 1fr);
	}

	.jjfnl__submit {
		min-width: 0;
		width: 100%;
	}

	.jjfnl--card {
		padding: 1.65rem;
	}

	.jjfnl--minimal {
		padding: 1.25rem 0;
	}
}

@media (max-width: 390px) {
	.jjfnl {
		border-radius: min(var(--jjfnl-radius), 14px);
		padding: 1.2rem;
	}

	.jjfnl--minimal {
		border-radius: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.jjfnl__heading {
		font-size: 1.55em;
	}

	.jjfnl__input,
	.jjfnl__submit {
		height: auto;
		min-height: 50px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jjfnl *,
	.jjfnl *::before,
	.jjfnl *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.jjfnl__submit:hover,
	.jjfnl__submit:active {
		transform: none;
	}
}

@media (forced-colors: active) {
	.jjfnl,
	.jjfnl__input,
	.jjfnl__submit,
	.jjfnl__status {
		border: 1px solid CanvasText;
	}

	.jjfnl::before,
	.jjfnl::after {
		display: none;
	}

	.jjfnl__submit {
		background: ButtonFace;
		color: ButtonText;
	}
}