/*
 * LiveSpecial — Site footer
 * Structure and measurements from the LSRD26-15 footer.html export.
 *
 * ⚠ ACCESSIBILITY (LSRD26-14/15 finding, shipped as designed by decision):
 * Every text colour in this footer fails WCAG 2.2 AA against #EC720A —
 * white 3.01:1, white/80 2.43:1, white/70 2.18:1 (AA needs 4.5:1).
 * Darkening --ls-secondary to #BD5B08 would bring all of them to 4.50:1.
 * The opacity values below are therefore deliberately tokenised so the fix
 * is a one-line change once the brand owner rules on it.
 */

.ls-footer {
	position: relative;
	overflow: hidden;
	background: var( --ls-secondary );
	color: var( --ls-white );
}

.ls-footer__pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url( "../img/jwa-pattern.webp" );
	background-repeat: repeat;
	background-size: 200px auto;
	opacity: var( --ls-pattern-opacity );
}

.ls-footer > *:not( .ls-footer__pattern ) { position: relative; }

.ls-footer a { color: inherit; }

/* Text tiers — see the accessibility note above. */
.ls-footer__text-strong { color: var( --ls-white ); }
.ls-footer__text-body   { color: rgba( 255, 255, 255, 0.8 ); }
.ls-footer__text-meta   { color: rgba( 255, 255, 255, 0.7 ); }

/* ── Newsletter band ──────────────────────────────────── */
.ls-footer__newsletter { border-bottom: 1px solid var( --ls-border-on-dark ); }

.ls-footer__newsletter-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	padding-block: 2.5rem;
}

@media ( min-width: 640px ) {
	.ls-footer__newsletter-inner { flex-direction: row; align-items: center; gap: 2.5rem; }
}

.ls-footer__newsletter-copy { flex: 1; min-width: 0; }

.ls-footer__newsletter-title {
	margin: 0;
	color: var( --ls-white );
	font-size: var( --ls-fs-lg );
	font-weight: var( --ls-fw-bold );
	line-height: 1.375;
}

.ls-footer__newsletter-text {
	margin: 0.25rem 0 0;
	color: rgba( 255, 255, 255, 0.8 );
	font-size: var( --ls-fs-sm );
}

.ls-footer__form {
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
	width: 100%;
}

@media ( min-width: 640px ) {
	.ls-footer__form { width: auto; }
}

.ls-footer__form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 0.625rem 1rem;
	background: var( --ls-white );
	border: 1px solid transparent;
	border-radius: var( --ls-radius-full );
	color: var( --ls-foreground );
	font: inherit;
	font-size: var( --ls-fs-sm );
}

@media ( min-width: 640px ) {
	.ls-footer__form input[type="email"] { flex: 0 0 15rem; width: 15rem; }
}

.ls-footer__form input::placeholder { color: var( --ls-muted-foreground ); opacity: 1; }

.ls-footer__submit {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	background: var( --ls-primary );
	border: 0;
	border-radius: var( --ls-radius-full );
	color: var( --ls-white );
	font-family: inherit;
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
	cursor: pointer;
	transition: background-color var( --ls-transition );
}

.ls-footer__submit:hover { background: color-mix( in srgb, var( --ls-primary ) 90%, transparent ); }

/* ── Columns ──────────────────────────────────────────── */
.ls-footer__main { padding-block: 3rem; }

@media ( min-width: 640px ) {
	.ls-footer__main { padding-block: 3.5rem; }
}

.ls-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

@media ( min-width: 640px ) {
	.ls-footer__cols { grid-template-columns: repeat( 2, 1fr ); gap: 2.5rem; }
}

@media ( min-width: 1024px ) {
	.ls-footer__cols { grid-template-columns: repeat( 4, 1fr ); }
}

.ls-footer__logo { display: block; width: auto; height: 40px; margin-bottom: 1rem; object-fit: contain; }

.ls-footer__tagline {
	margin: 0;
	color: rgba( 255, 255, 255, 0.8 );
	font-size: var( --ls-fs-sm );
	line-height: 1.625;
}

.ls-footer__heading {
	margin: 0 0 1rem;
	color: var( --ls-white );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-bold );
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ls-footer__list { margin: 0; padding: 0; list-style: none; }

.ls-footer__list li + li { margin-top: 0.625rem; }

.ls-footer__list a {
	color: rgba( 255, 255, 255, 0.8 );
	font-size: var( --ls-fs-sm );
	text-decoration: none;
	transition: color var( --ls-transition );
}

.ls-footer__list a:hover,
.ls-footer__list a:focus-visible { color: var( --ls-white ); text-decoration: underline; }

/* ── Bottom bar ───────────────────────────────────────── */
.ls-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --ls-border-on-dark );
}

@media ( min-width: 640px ) {
	.ls-footer__bottom { flex-direction: row; align-items: center; }
}

.ls-footer__copyright {
	margin: 0;
	color: rgba( 255, 255, 255, 0.7 );
	font-size: var( --ls-fs-sm );
}

.ls-footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

.ls-footer a.ls-footer__contact-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba( 255, 255, 255, 0.7 );
	font-size: var( --ls-fs-sm );
	text-decoration: none;
}

.ls-footer a.ls-footer__contact-item:hover { color: var( --ls-white ); }

.ls-footer__social { display: flex; align-items: center; gap: 1rem; }

.ls-footer__social a {
	display: inline-flex;
	color: rgba( 255, 255, 255, 0.7 );
	transition: color var( --ls-transition );
}

.ls-footer__social a:hover,
.ls-footer__social a:focus-visible { color: var( --ls-white ); }

/*
 * Gravity Forms newsletter — reshape GF's default stacked layout into the
 * single-row pill field + pill button from the design. Scoped to the footer so
 * no other form on the site is affected.
 */
.ls-footer__form--gf { width: 100%; }

@media ( min-width: 640px ) {
	.ls-footer__form--gf { width: auto; }
}

.ls-footer__form--gf .gform_wrapper { margin: 0; }

.ls-footer__form--gf form {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
}

/* GF gives the footer its own top margin, which knocks the button out of line. */
.ls-footer__form--gf .gform_footer,
.ls-footer__form--gf .gform-footer {
	margin: 0 !important;
	padding: 0;
}

.ls-footer__form--gf .gform-body,
.ls-footer__form--gf .gform_body { flex: 1; min-width: 0; margin: 0; }

.ls-footer__form--gf .gform_fields { display: block !important; grid-template-columns: none !important; margin: 0; padding: 0; }

.ls-footer__form--gf .gfield { margin: 0; padding: 0; }

.ls-footer__form--gf .gfield_label,
.ls-footer__form--gf .gform_required_legend,
.ls-footer__form--gf .gfield_description:not(.validation_message) { display: none; }

.ls-footer__form--gf input[type="email"] {
	width: 100%;
	min-width: 0;
	padding: 0.625rem 1rem;
	background: var( --ls-white );
	border: 1px solid transparent;
	border-radius: var( --ls-radius-full );
	color: var( --ls-foreground );
	font-family: inherit;
	font-size: var( --ls-fs-sm );
}

@media ( min-width: 640px ) {
	.ls-footer__form--gf input[type="email"] { width: 15rem; }
}

.ls-footer__form--gf input::placeholder { color: var( --ls-muted-foreground ); opacity: 1; }

.ls-footer__form--gf .gform_footer {
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	width: auto;
}

.ls-footer__form--gf .gform_footer input[type="submit"],
.ls-footer__form--gf .gform_footer button {
	margin: 0;
	padding: 0.625rem 1.25rem;
	background: var( --ls-primary );
	border: 0;
	border-radius: var( --ls-radius-full );
	color: var( --ls-white );
	font-family: inherit;
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var( --ls-transition );
}

.ls-footer__form--gf .gform_footer input[type="submit"]:hover {
	background: color-mix( in srgb, var( --ls-primary ) 90%, transparent );
}

/* Validation + confirmation need to stay legible on the orange field. */
.ls-footer__form--gf .gform_validation_errors,
.ls-footer__form--gf .gfield_validation_message,
.ls-footer__form--gf .validation_message {
	margin-top: 0.5rem;
	padding: 0.375rem 0.75rem;
	background: var( --ls-white );
	border: 0;
	border-radius: var( --ls-radius-lg );
	color: #8C2A1F;
	font-size: var( --ls-fs-xs );
}

.ls-footer__form--gf .gform_confirmation_message {
	color: var( --ls-white );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
}

/*
 * GF 2.9 "orbital" theme. Its controls resolve sizing/colour through
 * --gf-ctrl-* custom properties on the wrapper, so setting those is the
 * supported way to theme it — and it sidesteps GF's own high-specificity
 * rules (`.gform-theme.gform-theme--framework.gform_wrapper .button`, 0,4,0)
 * rather than trying to out-specify them.
 */
.ls-footer .gform_wrapper.gform-theme {
	/* Text inputs */
	--gf-ctrl-radius: var( --ls-radius-full );
	--gf-ctrl-border-color: transparent;
	--gf-ctrl-border-color-focus: var( --ls-primary );
	--gf-ctrl-bg-color: var( --ls-white );
	--gf-ctrl-color: var( --ls-foreground );
	--gf-ctrl-size: 2.75rem;
	--gf-ctrl-padding-x: 1rem;
	--gf-ctrl-font-size: var( --ls-fs-sm );

	/* Submit button */
	--gf-ctrl-btn-radius: var( --ls-radius-full );
	--gf-ctrl-btn-size: 2.75rem;
	--gf-ctrl-btn-padding-x: 1.25rem;
	--gf-ctrl-btn-font-size: var( --ls-fs-sm );
	--gf-ctrl-btn-font-weight: var( --ls-fw-semibold );
	--gf-ctrl-btn-bg-color-primary: var( --ls-primary );
	--gf-ctrl-btn-bg-color-hover-primary: #14294F;
	--gf-ctrl-btn-bg-color-focus-primary: #14294F;
	--gf-ctrl-btn-border-color-primary: var( --ls-primary );
	--gf-ctrl-btn-border-color-hover-primary: #14294F;
	--gf-ctrl-btn-border-color-focus-primary: #14294F;
	--gf-ctrl-btn-color-primary: var( --ls-white );
}