/**
 * Site footer (2026 redesign).
 *
 * Global chrome: it renders on Elementor pages as well as redesigned ones, so
 * like the header it must NOT depend on the `.barkley-redesign` body class.
 * Every token carries a literal hex fallback for that reason.
 *
 * Three stacked panels, per the Figma Footer component (4536:1336):
 *   CTA     cream  #E7ECD5, serif 64/74 heading, two 66px buttons, wave at foot
 *   body    green  #33462E, logo + accreditation + link column + socials
 *   legal   ink    #2A2C2A, 60px, copyright left / Terms + Privacy right
 */

.npc-footer {
	--npcf-green: var(--wp--preset--color--brand-green, #33462e);
	--npcf-green-mid: var(--wp--preset--color--brand-green-mid, #576b52);
	--npcf-gold: var(--wp--preset--color--brand-gold, #d3bb82);
	--npcf-cream: var(--wp--preset--color--cream, #f6f8f2);
	--npcf-cream-deep: var(--wp--preset--color--cream-deep, #e7ecd5);
	--npcf-ink: var(--wp--preset--color--ink, #2a2c2a);

	--npcf-font-heading: var(--wp--preset--font-family--heading, "Frank Ruhl Libre", Georgia, serif);
	--npcf-font-body: var(--wp--preset--font-family--body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);

	/* Figma composes at 1728 with a 1392 content column. */
	--npcf-max: 1392px;
	--npcf-gutter: clamp(20px, 9.7vw, 168px);

	font-family: var(--npcf-font-body);
	letter-spacing: normal;
	margin-top: 0;
}

.npc-footer__inner {
	max-width: var(--npcf-max);
	margin-inline: auto;
	padding-inline: var(--npcf-gutter);
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
}

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

/* ---------- CTA panel ---------- */

.npc-footer__cta {
	position: relative;
	background-color: var(--npcf-cream-deep);
	/* Room for the wave, which is absolutely positioned over the lower edge. */
	/* Scales with the viewport (QA: the footer took a quarter of a laptop screen); the 782px override below still applies. */
	padding: clamp(56px, 6.1vw, 106px) 0 clamp(120px, 11.6vw, 200px);
}

.npc-footer__cta-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 48px;
	position: relative;
	/* Above the wave so the copy is never overlapped by it. */
	z-index: 1;
}

.npc-footer__cta-copy {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 16px;
	max-width: 559px;
}

.npc-footer__cta-heading {
	margin: 0;
	color: var(--npcf-green);
	font-family: var(--npcf-font-heading);
	font-size: clamp(2.25rem, 1rem + 2.9vw, 4rem);
	font-weight: 600;
	line-height: 1.16;
}

.npc-footer__cta-body {
	margin: 0;
	color: var(--npcf-ink);
	font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.25rem);
	line-height: 1.4;
}

.npc-footer__cta-actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 12px;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 360px;
	max-width: 100%;
}

/*
 * Buttons are styled here rather than reused from redesign.css because the
 * footer renders on Elementor pages too, where redesign.css is not loaded.
 */

.npc-footer__btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	min-height: clamp(52px, 3.8vw, 66px);
	padding: 0 40px;
	border: 1px solid transparent;
	border-radius: 16px;
	font-family: var(--npcf-font-heading);
	font-size: clamp(1rem, 0.8rem + 0.3vw, 1.125rem);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	-webkit-transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.npc-footer__btn--outline {
	background-color: transparent;
	border-color: var(--npcf-green);
	color: var(--npcf-green);
}

.npc-footer__btn--outline:hover,
.npc-footer__btn--outline:focus-visible {
	background-color: var(--npcf-green);
	color: var(--npcf-cream);
}

.npc-footer__btn--solid {
	background-color: var(--npcf-green);
	color: var(--npcf-cream);
}

.npc-footer__btn--solid:hover,
.npc-footer__btn--solid:focus-visible {
	background-color: var(--npcf-green-mid);
	color: #fff;
}

/*
 * The wave is the top edge of the green panel, drawn inside the cream one so
 * the two meet seamlessly. `preserveAspectRatio="none"` is set on the SVG
 * itself, so stretching it full width is intended.
 */

.npc-footer__wave {
	display: block;
	position: absolute;
	bottom: -1px; /* hides the sub-pixel seam against the green panel */
	left: 0;
	width: 100%;
	height: clamp(60px, 9.2vw, 159px);
	border-radius: 0;
	pointer-events: none;
}

/* ---------- Body panel ---------- */

.npc-footer__body {
	position: relative;
	background-color: var(--npcf-green);
	padding: clamp(36px, 3.1vw, 53px) 0 clamp(40px, 3.5vw, 60px);
	overflow: hidden;
}

/* Decorative texture, 10% multiply, exactly as composed in Figma. */

.npc-footer__body::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(../images/footer-texture.67dd461e.png);
	background-size: cover;
	background-position: center;
	mix-blend-mode: multiply;
	opacity: 0.1;
	pointer-events: none;
}

.npc-footer__body-inner {
	position: relative;
	display: grid;
	grid-template-columns: 305px minmax(0, 1fr) -webkit-max-content;
	grid-template-columns: 305px minmax(0, 1fr) max-content;
	gap: 64px;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: start;
}

.npc-footer__logo {
	display: block;
	width: 305px;
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

.npc-footer__accreditation {
	color: var(--npcf-cream);
	font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.25rem);
	line-height: 1.4;
}

.npc-footer__accreditation p {
	margin: 0 0 1.25rem;
	letter-spacing: normal;
}

.npc-footer__aanp {
	display: inline-block;
	margin-top: 1.5rem;
}

/*
 * The source PNG is the AANP mark in its brand colours on transparency.
 * `brightness(0)` flattens every opaque pixel to black and `invert(1)` flips
 * that to white, leaving the alpha channel alone — which is how the design
 * shows it on the green panel.
 */

.npc-footer__aanp img {
	display: block;
	width: 302px;
	max-width: 100%;
	height: auto;
	border-radius: 0;
	-webkit-filter: brightness(0) invert(1);
	        filter: brightness(0) invert(1);
}

.npc-footer__links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 32px;
}

.npc-footer__menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.npc-footer__menu > li {
	margin: 0;
}

.npc-footer__menu a {
	color: #fff;
	font-family: var(--npcf-font-heading);
	font-size: clamp(1rem, 0.8rem + 0.3vw, 1.125rem);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.npc-footer__menu a:hover,
.npc-footer__menu a:focus-visible {
	color: var(--npcf-gold);
}

.npc-footer__social {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.npc-footer__social > li {
	margin: 0;
}

.npc-footer__social a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 24px;
	height: 24px;
}

/* The exported icons are already gold (#D3BB82); brighten on hover. */

.npc-footer__social img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
	border-radius: 0;
	-webkit-transition: -webkit-filter 150ms ease;
	transition: -webkit-filter 150ms ease;
	transition: filter 150ms ease;
	transition: filter 150ms ease, -webkit-filter 150ms ease;
}

.npc-footer__social a:hover img,
.npc-footer__social a:focus-visible img {
	-webkit-filter: brightness(1.25);
	        filter: brightness(1.25);
}

/* ---------- Legal bar ---------- */

.npc-footer__legal {
	background-color: var(--npcf-ink);
	min-height: 60px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.npc-footer__legal-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.npc-footer__copyright {
	margin: 0;
	color: var(--npcf-cream);
	font-size: 1rem;
	line-height: 1.5;
}

.npc-footer__legal-menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.npc-footer__legal-menu > li {
	margin: 0;
}

.npc-footer__legal-menu a {
	color: #fff;
	font-size: 1rem;
	line-height: 1.5;
	white-space: nowrap;
}

.npc-footer__legal-menu a:hover,
.npc-footer__legal-menu a:focus-visible {
	color: var(--npcf-gold);
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 1200px) {
	.npc-footer__body-inner {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 48px;
	}
	/* The link column drops under the copy rather than squeezing it. */
	.npc-footer__links {
		grid-column: 2;
	}
}

@media screen and (max-width: 782px) {
	.npc-footer__cta {
		padding: 56px 0 120px;
	}
	.npc-footer__cta-inner {
		gap: 32px;
	}
	.npc-footer__cta-actions {
		width: 100%;
	}
	.npc-footer__body {
		padding: 40px 0 48px;
	}
	.npc-footer__body-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		justify-items: center;
		text-align: center;
	}
	.npc-footer__links {
		grid-column: auto;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	.npc-footer__menu {
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 18px;
	}
	.npc-footer__accreditation {
		font-size: 1.0625rem;
	}
	.npc-footer__legal-inner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		text-align: center;
	}
	/*
	 * The links stay nowrap individually, so the row has to wrap between them —
	 * unwrapped, its min-content width (~430px) stretched the whole bar past a
	 * 375px viewport and scrolled the page sideways.
	 */
	.npc-footer__legal-menu {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		gap: 8px 24px;
	}
	.npc-footer__legal {
		padding: 16px 0;
	}
}