/**
 * eup-footer-v3 — the footer as drawn at the bottom of Homepage.svg (2026-09-29).
 *
 * Handle:  eup-footer-v3 (inc/enqueue-system-v3.php), with system v3 and footer v2 both on.
 * Markup:  template-parts/footer-v3/footer.php and band.php.
 *
 * Measured at 1920 (SVG units = CSS px):
 *   band    #f3ebd6, 420 tall; title Poppins Light 49 px #3d3935, centred; field white pill
 *           756 x 77 (radius 38), text Light 19 px; submit a 50 px #3d3935 disc inset 15 px;
 *           note Light 16 px with the two links underlined.
 *   footer  #00ccb8, 362 tall; white logo 180 x 131 at x 200; three 29 px white-ring social
 *           marks, right; contact Light 19 px white, right aligned; a 0.5 px #f3ebd6 hairline
 *           from x 200 to 1720 at 280 px; copyright ExtraLight 16 px white, centred.
 * Sizes reach those values at 1920 and scale down with clamp().
 *
 * capture.css (footer v2's band stylesheet) still loads and still neutralises MailPoet's inline
 * styles and the legacy `footer #mailpoet_form_1 ... !important` rules. The rules here are keyed
 * on `#footer.eup-ft3` to outrank it; the few `!important`s answer an `!important` there or an
 * inline style from MailPoet, and are marked.
 *
 * Contrast (see SYSTEM-V3-PORT.md): white on the accent is 2.03:1, as drawn. Since 2026-10-05 every white
 * on the teal ground reads var(--eup3-accent-ink, #ffffff), and the logo filter reads
 * var(--eup3-accent-ink-filter, ...): with eupepsia_teal_text_v1 on they turn ink (5.6:1). One line changes it:
 * --eup3-accent in system-v3.css.
 */

#footer.eup-ft3 {
	--eup3-ft-pad: clamp(40px, 5.5vw, 105px);

	background: var(--eup3-accent);
	color: var(--eup3-accent-ink);
	font-family: var(--eup3-font);
	font-weight: 300;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: left;
	width: 100%;
}

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

.eup-ft3 .eup-ft3__wrap {
	margin: 0 auto;
	max-width: calc(var(--eup3-wrap) + 2 * var(--eup3-gutter));
	padding-left: var(--eup3-gutter);
	padding-right: var(--eup3-gutter);
	width: 100%;
}

.eup-ft3 a:focus-visible,
.eup-ft3 button:focus-visible {
	outline: 3px solid var(--eup3-accent-ink, #ffffff);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * The band
 * ---------------------------------------------------------------------- */

#footer.eup-ft3 .eup-ft3__band {
	background: var(--eup3-cream);
	border: 0;
	color: var(--eup3-ink);
	margin: 0;
	padding: clamp(40px, 4.2vw, 80px) var(--eup3-gutter) clamp(36px, 3.8vw, 72px);
	text-align: center;
}

#footer.eup-ft3 .eup-ft3__band a:focus-visible,
#footer.eup-ft3 .eup-ft3__band input:focus-visible,
#footer.eup-ft3 .eup-ft3__band button:focus-visible {
	outline-color: var(--eup3-focus);
}

.eup-ft3 .eup-ft3__band-inner {
	margin: 0 auto;
	max-width: 1100px;
}

#footer.eup-ft3 .eup-ft3__band-title {
	color: var(--eup3-ink);
	font-family: var(--eup3-font);
	font-size: clamp(26px, 2.55vw, 49px);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0 0 clamp(20px, 1.9vw, 36px);
	text-transform: none;
}

#footer.eup-ft3 .eup-ft3__band-form {
	margin: 0 auto;
	max-width: 756px;
	text-align: left;
}

#footer.eup-ft3 .eup-ft3__band form.mailpoet_form {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 0 !important; /* legacy footer #mailpoet_form_1 form */
	padding: 0 !important; /* legacy + MailPoet */
	position: relative;
}

#footer.eup-ft3 .eup-ft3__band .mailpoet_paragraph {
	flex: 0 0 auto;
	margin: 0;
	position: static;
}

/* The field: the white pill, room on the right for the disc. */
#footer.eup-ft3 .eup-ft3__band .mailpoet_paragraph:has(.mailpoet_text) {
	order: 1;
	position: relative;
}

/* Colour only, never the `background` shorthand (2026-10-01): a shorthand with !important also
   forces background-repeat back to `repeat`, so a browser extension's field icon (autofill, mail
   alias) tiled across the whole field. Image, position, size and repeat are left to whoever sets
   them; `no-repeat` is the fallback for an icon that sets none. */
#footer.eup-ft3 .eup-ft3__band .eup-capture__form .mailpoet_text {
	background-color: #ffffff !important; /* capture.css !important */
	background-repeat: no-repeat;
	border: 1px solid transparent !important; /* capture.css and legacy !important */
	border-radius: var(--eup3-radius-pill);
	color: var(--eup3-ink);
	font-family: var(--eup3-font) !important; /* legacy !important */
	font-size: clamp(16px, 1vw, 19px);
	font-weight: 300;
	height: clamp(56px, 4vw, 77px);
	min-height: 0;
	padding: 0 calc(clamp(44px, 2.6vw, 50px) + 24px) 0 clamp(20px, 2.2vw, 41px) !important; /* MailPoet inline, legacy !important */
}

#footer.eup-ft3 .eup-ft3__band .eup-capture__form .mailpoet_text::placeholder {
	color: var(--eup3-ink);
	font-weight: 300;
	opacity: 1;
}

#footer.eup-ft3 .eup-ft3__band .eup-capture__form .mailpoet_text:focus {
	border-color: var(--eup3-ink) !important; /* pairs with the !important above */
	outline: 3px solid var(--eup3-focus);
	outline-offset: 2px;
}

/* The submit: the dark disc with a white arrow, placed inside the field's right end. The value
   (its accessible name, "Subscribe") is kept and hidden from sight. */
#footer.eup-ft3 .eup-ft3__band .mailpoet_paragraph:has(.mailpoet_submit) {
	order: 2;
	pointer-events: none;
	position: absolute;
	right: clamp(6px, 0.8vw, 13px);
	top: calc((clamp(56px, 4vw, 77px) - clamp(44px, 2.6vw, 50px)) / 2);
}

#footer.eup-ft3 .eup-ft3__band .eup-capture__form .mailpoet_submit {
	background: var(--eup3-ink-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important; /* capture.css and legacy !important */
	border: 0 !important; /* capture.css and legacy !important */
	border-radius: 50%;
	color: transparent !important; /* capture.css and legacy !important */
	font-size: 0;
	height: clamp(44px, 2.6vw, 50px);
	min-height: 0;
	overflow: hidden;
	padding: 0 !important; /* MailPoet inline */
	pointer-events: auto;
	position: static;
	text-indent: -9999px;
	width: clamp(44px, 2.6vw, 50px) !important; /* MailPoet inline width 100% */
}

#footer.eup-ft3 .eup-ft3__band .eup-capture__form .mailpoet_submit:hover {
	background-color: #000000 !important; /* capture.css :hover !important */
}

#footer.eup-ft3 .eup-ft3__band .eup-capture__form .mailpoet_submit:focus-visible {
	outline: 3px solid var(--eup3-focus);
	outline-offset: 2px;
}

#footer.eup-ft3 .eup-ft3__band .mailpoet_form_loading {
	position: absolute;
	right: 60px;
	top: 50%;
}

/* MailPoet's consent checkbox (the marketing opt-in) under the field, then messages. */
#footer.eup-ft3 .eup-ft3__band .mailpoet_paragraph:has(.mailpoet_checkbox_label) {
	order: 3;
	padding: 0 clamp(8px, 1.5vw, 28px);
}

#footer.eup-ft3 .eup-ft3__band .mailpoet_checkbox_label {
	color: var(--eup3-ink);
	font-size: 14px;
	font-weight: 300;
}

#footer.eup-ft3 .eup-ft3__band .mailpoet_checkbox {
	accent-color: var(--eup3-ink-strong);
}

#footer.eup-ft3 .eup-ft3__band .mailpoet_turnstile {
	order: 4;
}

/* MailPoet reveals a message by setting display: block on its <p>; until then the empty box
   would only add a gap. The Turnstile container is left alone (it must stay renderable).
   Round 3d (2026-10-28): the box takes no box of its own (display: contents), so while both <p>s are
   display: none (MailPoet's inline style) nothing is laid out and no gap is added; a shown <p> becomes
   the form's flex item and inherits the box's order, flex and side padding (computed as before by
   footer-v3/v4/v5.css and capture.css). This replaces `:not(:has(p[style*="block"]))`, which made
   Chrome recheck styles on every inline-style change on the page: the homepage slider's frames went
   from 16.7 ms to 50 ms (Lane HP's trace at 1440). The box carries no role or live region. */
#footer.eup-ft3 .eup-ft3__band .mailpoet_message {
	display: contents;
}

#footer.eup-ft3 .eup-ft3__band .mailpoet_message > p {
	flex: inherit;
	order: inherit;
	padding-left: inherit;
	padding-right: inherit;
}

#footer.eup-ft3 .eup-ft3__band .mailpoet_message {
	order: 5;
	padding: 0 clamp(8px, 1.5vw, 28px);
}

#footer.eup-ft3 .eup-ft3__band .mailpoet_validate_success {
	color: var(--eup3-ink) !important; /* capture.css !important */
}

#footer.eup-ft3 .eup-ft3__band-note {
	color: var(--eup3-ink);
	font-size: clamp(13px, 0.84vw, 16px);
	font-weight: 300;
	line-height: 1.5;
	margin: clamp(16px, 1.6vw, 30px) 0 0;
}

#footer.eup-ft3 .eup-ft3__band-link {
	color: var(--eup3-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * The teal footer
 * ---------------------------------------------------------------------- */

.eup-ft3 .eup-ft3__main {
	padding: var(--eup3-ft-pad) 0 clamp(24px, 2vw, 40px);
}

.eup-ft3 .eup-ft3__top {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 28px;
	text-align: center;
}

.eup-ft3 .eup-ft3__logo {
	color: var(--eup3-accent-ink, #ffffff);
	display: inline-block;
	text-decoration: none;
}

/* The logo artwork is the teal SVG; the design draws it white. */
.eup-ft3 .eup-ft3__logo img,
.eup-ft3 .eup-ft3__logo .eup-ft__logo {
	display: block;
	filter: var(--eup3-accent-ink-filter, brightness(0) invert(1));
	height: clamp(84px, 6.8vw, 131px);
	width: auto;
}

.eup-ft3 .eup-ft3__side {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.eup-ft3 .eup-ft3__social {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eup-ft3 .eup-ft3__social li {
	margin: 0;
}

.eup-ft3 .eup-ft3__social-marks {
	display: inline-flex;
	gap: 12px;
}

.eup-ft3 .eup-ft3__social-mark {
	align-items: center;
	border: 1px solid var(--eup3-accent-ink, #ffffff);
	border-radius: 50%;
	color: var(--eup3-accent-ink, #ffffff);
	display: inline-flex;
	height: 29px;
	justify-content: center;
	width: 29px;
}

/* A link needs a 44 px target; the ring stays 29 px, drawn inside. */
.eup-ft3 a.eup-ft3__social-mark {
	border: 0;
	height: 44px;
	position: relative;
	width: 44px;
}

.eup-ft3 a.eup-ft3__social-mark::before {
	border: 1px solid var(--eup3-accent-ink, #ffffff);
	border-radius: 50%;
	content: "";
	height: 29px;
	left: 7.5px;
	position: absolute;
	top: 7.5px;
	width: 29px;
}

.eup-ft3 .eup-ft3__social--pending .eup-ft3__social-mark {
	opacity: 0.85;
}

.eup-ft3 .eup-placeholder {
	background: rgba(255, 255, 255, 0.18);
	color: var(--eup3-accent-ink, #ffffff);
	font-size: 0.8em;
}

.eup-ft3 .eup-ft3__contact {
	color: var(--eup3-accent-ink, #ffffff);
	display: flex;
	flex-direction: column;
	font-size: clamp(15px, 1vw, 19px);
	font-style: normal;
	font-weight: 300;
	gap: clamp(12px, 1.1vw, 20px);
	line-height: 1.4;
	margin: 0;
}

.eup-ft3 .eup-ft3__contact-line {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	justify-content: center;
}

.eup-ft3 .eup-ft3__contact-address {
	display: block;
}

.eup-ft3 .eup-ft3__link {
	background: none;
	border: 0;
	color: var(--eup3-accent-ink, #ffffff);
	cursor: pointer;
	font: inherit;
	letter-spacing: 0;
	margin: 0;
	min-height: 0;
	padding: 0;
	text-decoration: none;
	text-transform: none;
}

.eup-ft3 .eup-ft3__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The contact links read as links at rest (touch has no hover; C-026). */
.eup-ft3 .eup-ft3__contact .eup-ft3__link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* The help row: not in the drawing; small, white, one line where it fits. */
.eup-ft3 .eup-ft3__help {
	margin-top: clamp(28px, 2.4vw, 40px);
}

.eup-ft3 .eup-ft3__help-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eup-ft3 .eup-ft3__help-list li {
	margin: 0;
}

.eup-ft3 .eup-ft3__help-list .eup-ft3__link {
	align-items: center;
	display: inline-flex;
	font-size: 14px;
	font-weight: 300;
	min-height: 44px;
}

.eup-ft3 .eup-ft3__bottom {
	margin-top: clamp(16px, 1.6vw, 28px);
}

.eup-ft3 .eup-ft3__bottom::before {
	border-top: 1px solid var(--eup3-cream);
	content: "";
	display: block;
	margin-bottom: clamp(20px, 1.8vw, 32px);
	opacity: 0.9;
}

.eup-ft3 .eup-ft3__copy {
	color: var(--eup3-accent-ink, #ffffff);
	font-size: clamp(13px, 0.84vw, 16px);
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
	text-align: center;
}

.eup-ft3 .eup-ft3__sep {
	margin: 0 0.35em;
}

.eup-ft3 .eup-ft3__disclaimer {
	color: var(--eup3-accent-ink, #ffffff);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.5;
	margin: 10px auto 0;
	max-width: 70em;
	text-align: center;
}

.eup-ft3 .eup-ft3__cta {
	margin: 14px 0 0;
	text-align: center;
}

.eup-ft3 .eup-ft3__cta .eup-signup-cta__link {
	color: var(--eup3-accent-ink, #ffffff);
}

/* -------------------------------------------------------------------------
 * 768 and up: logo left, contact block right, as drawn
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {
	.eup-ft3 .eup-ft3__top {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		text-align: right;
	}

	.eup-ft3 .eup-ft3__side {
		align-items: flex-end;
	}

	.eup-ft3 .eup-ft3__social {
		justify-content: flex-end;
	}

	.eup-ft3 .eup-ft3__contact-line {
		justify-content: flex-end;
	}

	.eup-ft3 .eup-ft3__help-list {
		justify-content: flex-start;
	}
}