:root {

	/* ABOVE FOOTER */
	--footer-above-surface: var(--red-dark);
	--footer-above-color: var(--color-text-inverse);
	--footer-above-padding-block: var(--space-large);
	--footer-above-heading-font: var(--title-large);

	/* NEWSLETTER FORM */
	--footer-newsletter-input-radius: 1.5em;

	/* WIDGET AREA */
	--footer-surface: var(--color-surface-subtle);
	--footer-navigation-gap: var(--space-xsmall);

	/* BORDER */
	--footer-border-color: var(--gray-light);
	--footer-border-width: 1px;
	--footer-border-style: solid;

	/* SHARED LAYOUT */
	--footer-content-max-width: 540px;
	--footer-widget-gap: var(--space-large);
	--footer-widgets-padding-top: var(--space-large);
	--footer-widgets-padding-top-wide: var(--space-xlarge);
	--footer-widget-heading-font: var(--title-small);
	--footer-widget-heading-weight: var(--typeface-weight-display-bold);

	/* BOTTOM BAR */
	--footer-bottom-font: var(--label-large);
	--footer-bottom-margin-top: var(--space-large);
	--footer-bottom-padding-block: 1.81rem var(--space-normal);
}

/* DO NOT EDIT BELOW THIS LINE — these are the actual styles using the above tokens. */

/* ===== SITE FOOTER: OUTER WRAPPER ===== */

.site-footer {
	margin-top: var(--space-xlarge);
}

.site-footer .widget {
    margin: 0 auto;
}

.site-footer a {
	text-decoration: none;
}

.site-footer-inner {

	@media (min-width: 64em) {
		margin: 0 auto;
		max-width: var(--max-width-wide);
	}
}

.site-footer :where(.is-layout-flow) > * {
	margin-block-start: 0;
	margin-block-end: var(--space-small);
}

.site-footer .wp-block-navigation {
	gap: var(--footer-navigation-gap);
}

/* ===== ABOVE FOOTER ===== */

.al-above-footer {
	background-color: var(--footer-above-surface);
	color: var(--footer-above-color);
	padding: var(--footer-above-padding-block) var(--gutter-width);
}

.al-above-footer h3 {
	color: inherit;
	font: var(--footer-above-heading-font);
	line-height: 1.46;

	@media (min-width: 37.5em) {
		margin: 0;
		margin-block-end: var(--space-xsmall);

	}
}

/* Stacked: cap width & center each half for readability. */
.al-above-footer .widget {

	@media (min-width: 37.5em) and (max-width: 63.99em) {
		margin-inline: auto;
		max-width: var(--footer-content-max-width);
		width: 100%;
	}
}

.footer-catalog-request {
	gap: var(--space-xlarge);
	padding-top: var(--space-large);

	@media (min-width: 64em) {
		padding-top: 0;
		padding-left: var(--space-xlarge);
	}
}

.al-above-footer .site-footer-inner {
	display: flex;
	flex-direction: column;

	@media (min-width: 64em) {
		flex-direction: row;
		align-items: stretch;          /* divider spans the full row height */
	}
}

/* Side-by-side: even 50% columns, no centering cap fighting the divider. */
@media (min-width: 64em) {

	.footer-email-signup,
	.footer-catalog-request {
		flex: 1 1 50%;
		max-width: 50%;
		margin-block: var(--space-xlarge);
	}
}

/* DIVIDER — horizontal when stacked, vertical when side-by-side. */
.footer-email-signup {
	border-bottom: var(--footer-border-width) var(--footer-border-style) rgba(255, 255, 255, 0.25);
	padding-bottom: var(--space-large);

	@media (min-width: 64em) {
		border-bottom: 0;
		border-right: var(--footer-border-width) var(--footer-border-style) rgba(255, 255, 255, 0.25);
		padding-bottom: 0;
		padding-right: var(--space-xlarge);
	}
}

/* ===== NEWSLETTER EMAIL SIGNUP ===== */

.footer-newsletter-form .gfield input {
	border-radius: var(--footer-newsletter-input-radius);
}

/* Inline field message sits inside the legacy light error field box, so the
   brand error red reads against it (not the inherited inverse footer color). */
.footer-newsletter-form .validation_message {
	color: var(--color-form-error);
}

.footer-newsletter-form form {

	@media (min-width: 37.5em) {
		display: flex;
		flex-wrap: wrap;
	}
}

/*
 * Validation summary.
 *
 * The above-footer CTA sits on a dark maroon surface where Gravity Forms'
 * default dark-red summary text is illegible — and, because GF's own CSS is
 * disabled site-wide, the summary heading inherits the theme's display-size
 * font (the oversized, overflowing text). Render the summary as a compact
 * light alert card with a left-aligned, normal-size heading. Covers both the
 * legacy (.validation_error) and theme (.gform_validation_errors) markup.
 */
.footer-newsletter-form .gform_validation_errors,
.footer-newsletter-form .gform_legacy_markup_wrapper .validation_error {
	background-color: var(--color-form-surface);
	border: var(--input-border-width) solid var(--color-form-error);
	border-radius: var(--input-border-radius);
	color: var(--color-form-error);
	font: var(--label-large);
	margin-bottom: var(--space-small);
	padding: var(--gf-message-padding);
	text-align: left;
}

.footer-newsletter-form .gform_validation_errors h2 {
	color: inherit;
	font: inherit;
	margin: 0;
}

.footer-newsletter-form .gform_validation_errors ol {
	font: var(--label-medium);
	margin: var(--space-xsmall) 0 0;
	padding-left: var(--space-medium);
}

.footer-newsletter-form .gform_body {

	@media (min-width: 37.5em) {
		flex-grow: 1;
	}
}

.footer-newsletter-form .gfield {

	@media (min-width: 37.5em) {
		margin: 0;
	}
}

.footer-newsletter-form .gform_footer {

	@media (min-width: 37.5em) {
		margin: 0;
	}
}

.site-footer .gform_legacy_markup_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]) {
	padding: var(--space-xxsmall) var(--space-normal);
}

@media (min-width: 641px) {

	.site-footer .gform_wrapper form {
		display: flex;
		flex-wrap: nowrap;
	}

	.site-footer .gform_legacy_markup_wrapper .gform_footer {
		margin: 0;
		width: auto;
	}
}

/* ===== FOOTER WIDGET AREA ===== */

.al-site-footer {
	background-color: var(--footer-surface);
	padding: 0 var(--gutter-width);
}

.al-site-footer .logo-mobile a {
	display: block;
}

.al-site-footer .logo-regs {
	display: none;
}

.al-site-footer .footer-widgets {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	max-width: var(--footer-content-max-width);

	@media (min-width: 64em) {
		justify-content: space-between;
		max-width: none;
		padding-top: var(--footer-widgets-padding-top-wide);
	}
}

.footer-widgets {
	padding-top: var(--footer-widgets-padding-top);
}

.footer-widgets a:not(.button) {
	color: inherit;
}

.footer-widget :where(h2, h3, h4) {
	font: var(--footer-widget-heading-font);
	font-weight: var(--footer-widget-heading-weight);
	margin-block-end: var(--space-xsmall);
}

.footer-widget {
	max-width: 100%;
	min-width: 100%;
	padding: var(--space-xxsmall) 0;

	@media (min-width: 30em) {
		max-width: 50%;
		min-width: 50%;
	}

	@media (min-width: 64em) {
		max-width: 25%;
		min-width: auto;
		padding-left: var(--footer-widget-gap);
	}
}

.footer-widget.annalee-head {
	min-width: 100%;

	@media (min-width: 64em) {
		min-width: inherit;
		order: 1;
		padding-left: 0;
	}
}

@media (min-width: 30em) {

	.footer-widget.about-us,
	.footer-widget.social {
		padding-left: var(--footer-widget-gap);
	}
}

@media (min-width: 64em) {

	.footer-widget.contact { order: 2; }

	.footer-widget.help-support { order: 3; }

	.footer-widget.about-us { order: 4; }
	
	.footer-widget.social { order: 5; }
}

/* ===== CONTACT ===== */

.al-contact address {
	font-style: normal;
}

.al-contact dl {
	margin: 0;
}

.al-contact dt {
	display: inline;
	text-transform: lowercase;
}

.al-contact dt::after {
	content: ":";
}

.al-contact dd {
	display: inline;
	margin: 0;
}

.al-contact dd::after {
	content: "\A";
	white-space: pre;
}

/* ===== FOOTER BOTTOM ===== */

.footer-bottom {
	border-top: var(--footer-border-width) var(--footer-border-style) var(--footer-border-color);
	font: var(--footer-bottom-font);
	margin-block-end: 0;
	margin-top: var(--footer-bottom-margin-top);
	padding-block: var(--footer-bottom-padding-block);
	text-align: center;
}

.al-footer-bottom {
	margin-block-end: 0;
}