/* ---------------------------------------------------------------------------
   Footer — Figma "RDV Updates" frames 8 + 11 (2026-10-05). Markup:
   patterns/footer.php.

   Desktop: two menu columns left; the chamfered sign-up box right (mark ·
   heading · text · Gravity Form, email + button inline); privacy + copyright
   right-aligned below. Band: black until 52%, then into the deep red.
   Mobile was not designed: everything stacks, left-aligned, and the form's
   field and button stack below 576px.
--------------------------------------------------------------------------- */

/* The footer owns its own top spacing — kill the 24px root blockGap margin the
   .wp-site-blocks flow puts on the footer template part as <main>'s next
   sibling. Core's rule is `:root :where(.wp-site-blocks) > *` (0,1,0), so this
   (0,2,1) wins outright. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.footer--section {
	--rdv-cut: 10px;
	padding: 64px 0 48px;
	background: linear-gradient(180deg, #000 51.923%, var(--rdv-red-deep, #6b2021) 100%);
	/* reset.min.css hovers links to `color: inherit` — make that white */
	color: #fff;
}

.footer--row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

/* --- the two menu columns ------------------------------------------------ */
.footer--menus {
	display: flex;
	flex-wrap: wrap;
	gap: 0 48px;
}

ul.footer--menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.footer--menu li { margin: 0; }

ul.footer--menu a {
	display: inline-block;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 40px;
	letter-spacing: .035em;
	text-decoration: none;
	transition: color .2s ease;
}

.footer--section ul.footer--menu a:hover { color: var(--rdv-red, #bf4042); }

/* --- social icons under the menus (Chris Yates 2026-10-25) ----------------
   Not in the Figma: his 32px circles, white, red on hover like the menu
   links. The rows of Site Settings → Social Settings that have a URL. */
ul.footer--social {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

ul.footer--social li { margin: 0; }

.footer--social-link {
	display: block;
	color: #fff;
	transition: color .2s ease;
}

.footer--social-link svg {
	display: block;
	width: 32px;
	height: 32px;
}

.footer--section .footer--social-link:hover { color: var(--rdv-red, #bf4042); }

/* --- sign-up box: chamfered top-right + bottom-left ----------------------- */
/* Cut at the card size, --rdv-chamfer: 20px from 992 up, 15px on phones
   (the Figma iPhone frame cuts this box 15px tall). */
.footer--signup {
	padding: 32px 24px;
	background: rgba(217, 217, 217, 0.1);
	clip-path: polygon(0 0, calc(100% - var(--rdv-chamfer)) 0, 100% var(--rdv-chamfer), 100% 100%, var(--rdv-chamfer) 100%, 0 calc(100% - var(--rdv-chamfer)));
}

.footer--signup-mark {
	display: none;
}

.footer--signup-heading {
	margin: 0 0 11px;
	color: rgba(255, 255, 255, 0.7);
	font-family: inherit;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: .017em;
	text-transform: capitalize;
}

.footer--signup-text {
	margin: 0 0 24px;
	color: #fff;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: .035em;
}

/* --- the Gravity Form (legacy gravity-theme markup, form class
   footer--signup-form). These outrank forms.css's
   `body .gform_wrapper.gravity-theme input[type=email]` (0,3,2). --- */
.footer--signup .gform_wrapper.gravity-theme {
	margin: 0;
}

.footer--signup .gform_wrapper.gravity-theme form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px 28px;
	align-items: start;
}

.footer--signup .gform_wrapper.gravity-theme .gform_validation_errors {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.footer--signup .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
	margin: 0;
	color: #ffb4b4;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.footer--signup .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon { display: none; }

/* The fields and the button are laid out together on the form's grid, so the
   Turnstile notice (an HTML field after the email) can sit under both rather
   than between the email and Sign Up. GF's body and its 12-column fields grid
   step aside; every field is placed explicitly. */
.footer--signup .gform_wrapper.gravity-theme .gform_body,
.footer--signup .gform_wrapper.gravity-theme .gform_fields { display: contents; }

.footer--signup .gform_wrapper.gravity-theme .gfield { grid-column: 1; }

.footer--signup .gform_wrapper.gravity-theme .gfield.turnstile--notice {
	grid-column: 1 / -1;
	order: 1;
	margin-top: -6px;
}

/* The email field's box is drawn on its container, not the <input>: an
   outline would be clipped by the chamfer, so focus is a ring redrawn by
   ::after (evenodd: the outline, then the same outline 2px in). */
.footer--signup .gform_wrapper.gravity-theme .ginput_container_email {
	--c: var(--rdv-cut);
	--b: 2px;
	--k: calc(var(--c) + var(--b) * 0.4142);
	position: relative;
	background: rgba(239, 232, 232, 0.3);
	clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}

.footer--signup .gform_wrapper.gravity-theme .ginput_container_email::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #efede6;
	clip-path: polygon(evenodd,
		0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 0,
		var(--b) var(--b), calc(100% - var(--k)) var(--b), calc(100% - var(--b)) var(--k),
		calc(100% - var(--b)) calc(100% - var(--b)), var(--k) calc(100% - var(--b)), var(--b) calc(100% - var(--k)),
		var(--b) var(--b));
	opacity: 0;
	pointer-events: none;
}

.footer--signup .gform_wrapper.gravity-theme .ginput_container_email:has(input:focus-visible)::after { opacity: 1; }

.footer--signup .gform_wrapper.gravity-theme input[type=email] {
	display: block;
	width: 100%;
	height: 49px;
	min-height: 0;
	margin: 0;
	padding: 0 20px 0 28px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 49px;
	letter-spacing: .055em;
	outline: none;
}

.footer--signup .gform_wrapper.gravity-theme input[type=email]::placeholder {
	color: rgba(255, 255, 255, 0.4);
	opacity: 1;
}

.footer--signup .gform_wrapper.gravity-theme .gfield_error input[type=email] { color: #fff; }

.footer--signup .gform_wrapper.gravity-theme .gfield_validation_message,
.footer--signup .gform_wrapper.gravity-theme .validation_message {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #ffb4b4;
	font-size: 14px;
	line-height: 1.4;
}

.footer--signup .gform_wrapper.gravity-theme .gform_footer {
	margin: 0;
	padding: 0;
}

/* Sign Up — red, chamfered like the field. GF's button carries .theme-button
   (lwh_add_custom_css_classes), so these also have to beat buttons.css. */
.footer--signup .gform_wrapper.gravity-theme .gform_footer .gform_button {
	--c: var(--rdv-cut);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 49px;
	min-width: 122px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 0;
	background: var(--rdv-red, #bf4042);
	color: #fff;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: none;
	box-shadow: none;
	clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
	cursor: pointer;
	transition: background-color .2s ease;
}

.footer--signup .gform_wrapper.gravity-theme .gform_footer .gform_button::after { display: none; }

.footer--signup .gform_wrapper.gravity-theme .gform_footer .gform_button:hover {
	background: #9e3436;
	color: #fff;
}

/* the chamfer clips an outline — an inset ring survives it */
.footer--signup .gform_wrapper.gravity-theme .gform_footer .gform_button:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px #efede6;
}

.footer--signup .gform_confirmation_message {
	color: #fff;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: .035em;
}

/* --- privacy + copyright ------------------------------------------------- */
.footer--legal {
	margin-top: 40px;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: .03em;
}

.footer--legal p { margin: 0; }

.footer--privacy a {
	color: var(--wp--preset--color--gold, #d6c26f);
	text-decoration: none;
	text-transform: uppercase;
}

.footer--section .footer--privacy a:hover {
	color: var(--wp--preset--color--gold, #d6c26f);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.footer--copyright {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.6;
}

.footer--rights { text-transform: uppercase; }

.footer--section a:focus-visible {
	outline: 2px solid #efede6;
	outline-offset: 2px;
}

/* --- ≥576: field + button side by side --- */
@media (min-width: 576px) {
	.footer--signup .gform_wrapper.gravity-theme form {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* --- ≥768: the mark comes in --- */
@media (min-width: 768px) {
	.footer--signup {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		align-items: center;
		column-gap: 40px;
		padding: 34px 40px 35px;
	}

	.footer--signup-mark {
		display: block;
		width: 100%;
		height: auto;
	}

	.footer--signup-heading {
		font-size: 32px;
		line-height: 35px;
	}

	.footer--signup-text { margin-bottom: 33px; }
}

/* --- ≥992: the Figma layout --- */
@media (min-width: 992px) {
	.footer--section {
		padding: clamp(80px, 7.2vw, 124px) 0 64px;
	}

	.footer--row {
		grid-template-columns: auto minmax(0, 898px);
		justify-content: space-between;
		align-items: start;
		gap: 48px;
	}

	.footer--menus { padding-top: 19px; }

	.footer--legal {
		margin-top: 43px;
		text-align: right;
	}
}

@media (min-width: 1200px) {
	.footer--signup {
		grid-template-columns: 163px minmax(0, 1fr);
		column-gap: 65px;
		padding: 34px 47px 35px 54px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.footer--section a,
	.footer--signup .gform_button {
		transition: none;
	}
}