/*!
Theme Name: AOFCU Classic
Theme URI: http://underscores.me/
Author: Affinity One FCU
Author URI: http://underscores.me/
Description: Classic theme for Affinity One FCU.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: aofcu-classic
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

AOFCU Classic is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ─── Design Tokens ─── */

:root {
	/* Warm, brand-tinted shadows — purple at low opacity reads as soft, not muddy gray */
	--shadow-xs: 0 1px 2px rgba(63, 31, 99, 0.06);
	--shadow-sm: 0 2px 6px rgba(63, 31, 99, 0.08);
	--shadow-md: 0 8px 24px rgba(63, 31, 99, 0.10);
	--shadow-lg: 0 18px 48px rgba(63, 31, 99, 0.16);
	--shadow-press: 0 2px 0 rgba(63, 31, 99, 0.22);

	/* Display font, declared once so utility classes can pick it up */
	--font-display: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Page Color Themes ─── */

body.theme-banking {
	--wp--preset--color--primary: #2E5EA1;
	--wp--preset--color--primary-dark: #1E3F6E;
	--wp--preset--color--primary-light: #EBF0F8;
	--shadow-md: 0 8px 24px rgba(30, 63, 110, 0.10);
	--shadow-lg: 0 18px 48px rgba(30, 63, 110, 0.16);
	--shadow-press: 0 2px 0 rgba(30, 63, 110, 0.22);
}

body.theme-loans {
	--wp--preset--color--primary: #2E7D32;
	--wp--preset--color--primary-dark: #1B5E20;
	--wp--preset--color--primary-light: #E8F5E9;
	--shadow-md: 0 8px 24px rgba(27, 94, 32, 0.10);
	--shadow-lg: 0 18px 48px rgba(27, 94, 32, 0.16);
	--shadow-press: 0 2px 0 rgba(27, 94, 32, 0.22);
}

body.theme-info {
	--wp--preset--color--primary: #5B2D8E;
	--wp--preset--color--primary-dark: #3F1F63;
	--wp--preset--color--primary-light: #F3EDF8;
}

/* ─── Reset & Base ─── */

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Neutralize any blocks still saved with a cream/cream-dark background.
   The cream color was removed from the palette; any post-content usage
   should now render as the surrounding white. */
.has-cream-background-color,
.has-cream-dark-background-color {
	background-color: transparent !important;
}

img {
	max-width: 100%;
	height: auto;
}

/* ─── Display Headings ─── */

/* DM Sans variable axes: opsz (9–40) drives optical-size grading.
   Big display gets opsz 40 (display-grade) while smaller headings get text-grade. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-variation-settings: "opsz" 24;
	text-wrap: balance;
}

h1, .wp-block-heading.h-display {
	font-variation-settings: "opsz" 40;
}

h2 {
	font-variation-settings: "opsz" 36;
}

/* Flourish — wraps a key word inside a heading for emphasis.
   Renders as a chunky color underline rather than italic.
   <span class="flourish">community</span>-owned banking */
.flourish {
	font-style: normal;
	color: var(--wp--preset--color--dark);
	background-image: linear-gradient(
		var(--wp--preset--color--primary),
		var(--wp--preset--color--primary)
	);
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 100% 0.18em;
	padding-bottom: 0.04em;
}

/* Eyebrow — small all-caps label that sits above a heading. */
.eyebrow {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.75rem;
	position: relative;
	padding-left: 2rem;
}

.eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
	transform: translateY(-50%);
}

.eyebrow.center {
	padding-left: 0;
	padding-right: 0;
}

.eyebrow.center::before {
	display: none;
}

/* ─── Product Page Hero ───
   Elevates the standard "primary-light → white gradient" wrapper used at the top
   of banking-themed pages (savings, money market, certificates, checking, web banking)
   into a real hero: deep brand-color background, large heading, inverted buttons,
   subtle decorative element. Targets both palette-gradient and inline-gradient versions. */

:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"],
.product-hero {
	/* Default image — editors can override per-page via the block sidebar
	   (Styles → Background → Add background image). The block's inline style
	   takes precedence as long as these rules don't use !important. */
	background-image: url('/wp-content/uploads/2026/04/hero-image-2048x1638.jpeg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--wp--preset--color--primary-dark) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 0 0 28px 28px;
	margin-bottom: var(--wp--preset--spacing--60) !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow: var(--shadow-md);
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--wp--preset--spacing--60) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
	padding-left: var(--wp--preset--spacing--60) !important;
	padding-right: var(--wp--preset--spacing--60) !important;
}

/* Inset card — solid primary-dark card sits over the left portion of the image.
   Text content lives inside the card, never touching the image directly. */
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background::before,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"]::before,
.product-hero::before {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--60);
	bottom: var(--wp--preset--spacing--60);
	left: var(--wp--preset--spacing--60);
	width: min(50%, 540px);
	background: var(--wp--preset--color--primary-dark);
	border-radius: 18px;
	box-shadow: var(--shadow-lg);
	z-index: 0;
	pointer-events: none;
}

/* Constrain all hero content to live inside the inset card */
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background > *,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] > *,
.product-hero > * {
	position: relative;
	z-index: 1;
	max-width: calc(min(50%, 540px) - 4rem) !important;
	margin-left: 2rem !important;
	margin-right: auto !important;
}

/* Override constrained-layout's auto-centering for hero children */
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"].is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.product-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: calc(min(50%, 540px) - 4rem) !important;
	margin-left: 2rem !important;
	margin-right: auto !important;
}

@media (max-width: 900px) {
	/* === Gradient-based heroes (Membership / Apply / Request Info):
	   inset card spans full width with the gradient behind. === */
	:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background,
	:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] {
		min-height: auto;
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40) !important;
	}

	:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background::before,
	:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"]::before {
		top: var(--wp--preset--spacing--50);
		left: var(--wp--preset--spacing--40);
		right: var(--wp--preset--spacing--40);
		bottom: var(--wp--preset--spacing--50);
		width: auto;
	}

	:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background > *,
	:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] > *,
	:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
	:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"].is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: calc(100% - 4rem) !important;
		margin-left: 2rem !important;
	}

	/* === Image-based product heroes: stack vertically.
	   Text/headline on the dark color band at the top, hero image fills a
	   fixed-height stripe at the bottom (uses cover so the image is never
	   warped, and inherits the parent's background-position so any focal
	   point set in the editor still applies). The inset card disappears
	   since the section bg color now serves the same backdrop role. === */
	.product-hero:not([style*="linear-gradient"]) {
		position: relative;
		min-height: auto;
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--40) + 240px) !important;
		/* Hide the parent's background image — the ::after pseudo-element
		   below renders it in the dedicated bottom stripe instead. We use
		   background-size:0 (not background-image:none) so the inherited
		   URL is still available to ::after. */
		background-size: 0 !important;
	}

	.product-hero:not([style*="linear-gradient"])::before {
		display: none;
	}

	.product-hero:not([style*="linear-gradient"])::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 240px;
		background-image: inherit;
		background-position: inherit;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 0 0 28px 28px;
	}

	.product-hero:not([style*="linear-gradient"]) > *,
	.product-hero:not([style*="linear-gradient"]).is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		position: relative;
		z-index: 1;
	}
}

/* Eyebrow paragraph (uppercase tag like "Savings", "Checking") */
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background .has-primary-color,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] .has-primary-color,
.product-hero .has-primary-color {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Main heading */
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background h1,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] h1,
.product-hero h1 {
	color: var(--wp--preset--color--white) !important;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem) !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.025em !important;
	margin-top: 0.5rem !important;
	margin-bottom: 1rem !important;
	text-wrap: balance;
	hyphens: auto;
}

/* Description paragraph — covers .has-body-text-color (banking pages),
   .body-text utility class (loans pages), and bare paragraphs */
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background p,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] p,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background .body-text,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] .body-text,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background .has-body-text-color,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] .has-body-text-color,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background .has-dark-color,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] .has-dark-color,
.product-hero p,
.product-hero .body-text,
.product-hero .has-body-text-color,
.product-hero .has-dark-color {
	color: rgba(255, 255, 255, 0.92) !important;
}

/* Primary (filled) button — invert to white on dark */
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background .wp-block-button:not(.is-style-outline) .wp-block-button__link,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.product-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary) !important;
}

:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.product-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream-dark, #F2EBDB) !important;
	background: rgba(255, 255, 255, 0.92) !important;
}

/* Secondary (outline) button — white-bordered ghost.
   The selectors include .wp-block-button alongside .is-style-outline so the
   hover state's color wins against the base hover rule defined later in the
   file (otherwise the base sets white !important on color and we end up with
   white text on a white background). */
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background .wp-block-button.is-style-outline .wp-block-button__link,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] .wp-block-button.is-style-outline .wp-block-button__link,
.product-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.55) !important;
	color: var(--wp--preset--color--white) !important;
}

:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-primary-light-to-white-gradient-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
:is(body.theme-banking, body.theme-loans, body.theme-info) .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] .wp-block-button.is-style-outline .wp-block-button__link:hover,
.product-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--white) !important;
}

/* theme-info pages (membership, contact, forms, locations, staff, board, privacy) get
   a clean solid-color header instead of the image+inset-card hero. Same white text and
   inverted buttons, but no photograph, no card overlay, content flows normally. */
body.theme-info .wp-block-group.has-primary-light-to-white-gradient-background,
body.theme-info .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] {
	background-image: none !important;
	background-color: var(--wp--preset--color--primary) !important;
	min-height: auto;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
	padding-top: var(--wp--preset--spacing--70) !important;
	padding-bottom: var(--wp--preset--spacing--70) !important;
}

body.theme-info .wp-block-group.has-primary-light-to-white-gradient-background::before,
body.theme-info .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"]::before {
	display: none !important;
}

/* Restore normal content flow — content is no longer constrained to a left-half card */
body.theme-info .wp-block-group.has-primary-light-to-white-gradient-background > *,
body.theme-info .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"] > *,
body.theme-info .wp-block-group.has-primary-light-to-white-gradient-background.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.theme-info .wp-block-group.has-background[style*="linear-gradient"][style*="primary-light"].is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size, 1200px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ─── Page Header pattern ───
   Standalone solid-color page header. Drop the "Page Header" pattern from the
   inserter on any page; CSS below makes it self-styling regardless of body class. */

.page-header {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--white) !important;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40) !important;
	margin: 0 0 var(--wp--preset--spacing--60) 0 !important;
	border-radius: 0 !important;
}

.page-header h1,
.page-header h2,
.page-header .wp-block-heading {
	color: var(--wp--preset--color--white) !important;
	font-size: clamp(2.5rem, 5vw, 3.75rem) !important;
	font-weight: 700 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.03em !important;
	margin-top: 0.5rem !important;
	margin-bottom: 1rem !important;
}

.page-header p {
	color: rgba(255, 255, 255, 0.92) !important;
}

.page-header .page-header-eyebrow {
	color: rgba(255, 255, 255, 0.7) !important;
	margin-bottom: 0 !important;
}

.page-header .page-header-desc {
	max-width: 36rem;
	margin-bottom: 1.5rem !important;
}

.page-header .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary) !important;
}

.page-header .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.55) !important;
	color: var(--wp--preset--color--white) !important;
	background: transparent !important;
}

.page-header .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--white) !important;
}

/* Opt-in centered variant — add "is-centered" to the page-header group. */
.page-header.is-centered {
	text-align: center;
}

.page-header.is-centered .page-header-desc {
	margin-left: auto !important;
	margin-right: auto !important;
}

.page-header.is-centered .wp-block-buttons {
	justify-content: center;
}

/* ─── Announcement Bar ─── */

.announcement-bar {
	position: relative;
	z-index: 1001;
}

.announcement-bar p {
	margin: 0;
}

/* ─── Header ─── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1002;
	background: var(--wp--preset--color--white);
	box-shadow: var(--shadow-sm);
}

/* Anchor jumps land below the sticky header. */
.wp-block-group[id] {
	scroll-margin-top: 5rem;
}

/* Inline branch info — used where a CTA used to say "Find a branch". */
.branches-inline {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 2rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	text-align: center;
	/* Explicit dark color so the component is readable on light backgrounds.
	   Dark-background callers (e.g. purple panels) override via inline
	   style="color:#fff" which beats this class. */
	color: var(--wp--preset--color--dark);
}
.branches-inline .branch-name {
	display: block;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	margin-bottom: 0.5rem;
}
.branches-inline .branch-hours {
	list-style: none;
	padding: 0;
	margin: 0.85rem 0 0;
	line-height: 1.7;
}
.branches-inline .branch-fax,
.branches-inline .branch-note {
	display: block;
	margin-top: 0.5rem;
}
.branches-inline .branch-note {
	font-weight: 600;
}
.branches-inline a {
	display: inline-block;
	margin-top: 0.85rem;
	padding: 0.55rem 1.5rem;
	border: 2px solid currentColor;
	border-radius: 50px;
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: 0.01em;
	transition: opacity 0.2s ease;
}
.branches-inline a:hover {
	opacity: 0.75;
}
@media (max-width: 600px) {
	.branches-inline {
		grid-template-columns: 1fr;
	}
}

.site-header .wp-block-site-title a {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none !important;
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

.site-header .wp-block-navigation {
	gap: 0;
}

.site-header .wp-block-navigation a {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none !important;
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	position: relative;
	transition: color 0.2s;
}

.site-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.35rem;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.3s ease;
}

.site-header .wp-block-navigation a:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.site-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--primary) !important;
}

/* Header buttons */
.header-login-btn a {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--white) !important;
	padding: 0.5rem 1.25rem !important;
	border-radius: 50px !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	text-decoration: none !important;
	border: none !important;
	transition: all 0.2s !important;
}

.header-login-btn a:hover {
	background: var(--wp--preset--color--primary-dark) !important;
}

.header-member-link a {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: underline !important;
	font-weight: 500;
	font-size: 0.875rem;
}

.header-member-link a:hover {
	color: var(--wp--preset--color--primary-dark) !important;
}

.header-become-member {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	font-weight: 500;
	font-size: 0.875rem;
	white-space: nowrap;
	transition: color 0.2s;
}

.header-become-member:hover {
	color: var(--wp--preset--color--primary-dark);
}

.header-web-banking {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 0.5rem 1.25rem;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	border: none;
	white-space: nowrap;
	transition: background 0.2s;
}

.header-web-banking:hover {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
}

/* ─── Mega Menu ─── */

.mega-menu-nav {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu-trigger {
	position: relative;
}

.mega-menu-toggle {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.5rem 0.85rem;
	border-radius: 6px;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
	transition: color 0.2s;
	white-space: nowrap;
}

.mega-menu-toggle::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.3rem;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.3s ease;
}

.mega-menu-toggle:hover,
.mega-menu-trigger.is-active .mega-menu-toggle {
	color: var(--wp--preset--color--primary-dark);
}

.mega-menu-toggle:hover::after,
.mega-menu-trigger.is-active .mega-menu-toggle::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.mega-menu-toggle svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	transition: transform 0.2s;
}

.mega-menu-trigger.is-active .mega-menu-toggle svg {
	transform: rotate(180deg);
}

.mega-menu-panel {
	position: fixed;
	top: auto;
	left: 50%;
	transform: translateX(-50%);
	width: 1000px;
	max-width: calc(100vw - 2rem);
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--white);
	border-radius: 0 0 12px 12px;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s, transform 0.25s ease;
	z-index: 999;
}

.mega-menu-panel.is-open {
	opacity: 1;
	visibility: visible;
}

.mega-menu-inner {
	display: flex;
}

.mega-menu-main {
	flex: 1;
	padding: 1.5rem 2rem;
	border-right: 1px solid var(--wp--preset--color--border);
}

.mega-menu-sidebar {
	width: 260px;
	padding: 2rem;
	flex-shrink: 0;
	background: #FAFAFA;
}

.mega-menu-section {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mega-menu-section:first-child {
	padding-top: 0;
}

.mega-menu-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.mega-menu-section-title {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--body-text);
	margin: 0 0 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mega-menu-section-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mega-menu-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1.5rem;
}

.mega-menu-link {
	text-decoration: none;
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	transition: background 0.15s;
}

.mega-menu-link:hover {
	background: var(--wp--preset--color--primary-light);
}

.mega-menu-link:hover .mega-menu-link-title {
	color: var(--wp--preset--color--primary);
}

.mega-menu-link-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	margin: 0 0 0.15rem;
	transition: color 0.15s;
}

.mega-menu-link-desc {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body-text);
	line-height: 1.45;
	margin: 0;
}

.mega-menu-sidebar-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	margin: 0 0 0.75rem;
}

.mega-menu-sidebar-desc {
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

.mega-menu-sidebar-desc p:first-child {
	margin-top: 0;
}

.mega-menu-sidebar-desc p:last-child {
	margin-bottom: 0;
}

.mega-menu-sidebar-desc a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.mega-menu-sidebar-btn {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
	padding: 0.7rem 1.6rem;
	border-radius: 50px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	box-shadow: var(--shadow-sm);
}

.mega-menu-sidebar-btn:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.mega-menu-sidebar-link {
	display: block;
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s;
}

.mega-menu-sidebar-link:hover {
	color: var(--wp--preset--color--primary-dark) !important;
	text-decoration: underline;
}

/* No sidebar variant */
.mega-menu-panel.no-sidebar .mega-menu-main {
	border-right: none;
}

/* Loans panel: 2×2 grid so the bottom row (Mortgages & Home Equity + Credit
   Cards) sits side by side rather than stacking under Personal/Vehicle. */
.mega-menu-panel--loans .mega-menu-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
	row-gap: 0;
}

.mega-menu-panel--loans .mega-menu-section {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mega-menu-panel--loans .mega-menu-section:nth-child(-n+2) {
	padding-top: 0;
}

.mega-menu-panel--loans .mega-menu-section:nth-last-child(-n+2) {
	border-bottom: none;
	padding-bottom: 0;
}

.mega-menu-panel--loans .mega-menu-links {
	grid-template-columns: 1fr;
}

@media (max-width: 900px) {
	.mega-menu-nav {
		display: none;
	}

	.header-become-member {
		display: none !important;
	}
}

/* ─── Mobile Menu ─── */

.mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	padding: 0;
}

.mobile-menu-icon-close {
	display: none;
}

.mobile-menu-toggle.is-active {
	position: fixed;
	top: 0.75rem;
	right: var(--wp--preset--spacing--40, 1.5rem);
	z-index: 1010;
}

.mobile-menu-toggle.is-active .mobile-menu-icon-open {
	display: none;
}

.mobile-menu-toggle.is-active .mobile-menu-icon-close {
	display: block;
}

@media (max-width: 900px) {
	.mobile-menu-toggle {
		display: flex;
	}
}

.mobile-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--wp--preset--color--white);
	z-index: 999;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: 70px;
}

.mobile-menu.is-open {
	display: block;
	margin-top: 0 !important;
}

.mobile-menu-inner {
	padding: 1rem 1.5rem 2rem;
}

.mobile-menu-section {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mobile-menu-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 0;
	border: none;
	background: none;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
	cursor: pointer;
}

.mobile-menu-heading svg {
	transition: transform 0.2s;
	fill: none;
}

.mobile-menu-heading.is-active svg {
	transform: rotate(180deg);
}

.mobile-menu-links {
	display: none;
	padding: 0 0 1rem;
}

.mobile-menu-links.is-open {
	display: block;
}

.mobile-menu-links a {
	display: block;
	padding: 0.6rem 0 0.6rem 0.75rem;
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color 0.15s;
}

.mobile-menu-links a:hover {
	color: var(--wp--preset--color--primary);
}

/* Sidebar callout flattened into the expanded section on mobile — the
   button and link render as plain menu items, matching the section links. */
.mobile-menu-sidebar-btn,
.mobile-menu-sidebar-link {
	display: block;
	padding: 0.6rem 0 0.6rem 0.75rem;
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color 0.15s;
}

.mobile-menu-sidebar-btn:hover,
.mobile-menu-sidebar-link:hover {
	color: var(--wp--preset--color--primary);
}

/* Locations block — branch addresses + phone links, shown as its own
   section below the CTA buttons rather than inside the About flyout. */
.mobile-menu-locations {
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.mobile-menu-locations-title {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--dark);
}

.mobile-menu-locations-body {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
}

.mobile-menu-locations-body p {
	margin: 0 0 1rem;
}

.mobile-menu-locations-body p:last-child {
	margin-bottom: 0;
}

.mobile-menu-locations-body a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}

.mobile-menu-locations-body a:hover {
	text-decoration: underline;
}

.mobile-menu-cta {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1.5rem;
}

.mobile-menu-btn-outline {
	display: block;
	text-align: center;
	padding: 0.75rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50px;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: all 0.2s;
}

.mobile-menu-btn-outline:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mobile-menu-btn-filled {
	display: block;
	text-align: center;
	padding: 0.75rem;
	background: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50px;
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: all 0.2s;
}

.mobile-menu-btn-filled:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

/* ─── Hero Card ─── */

.hero-card-image {
	margin-bottom: 0 !important;
}

.hero-card-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* ─── Hero Banner ─── */

.hero-banner {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	min-height: 320px;
}

.hero-banner .wp-block-cover__inner-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* On mobile, break the cover overlay so the image sits on top as its own
   block and the white card stacks below it (rather than the card floating
   over a cropped background image). */
@media (max-width: 781px) {
	.hero-banner.wp-block-cover {
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		min-height: 0 !important;
		background-color: transparent !important;
		overflow: visible;
		gap: 1rem;
		padding: 0 !important;
	}

	.hero-banner .wp-block-cover__image-background {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: 12px;
		order: 2;
	}

	.hero-banner .wp-block-cover__background {
		display: none !important;
	}

	.hero-banner .wp-block-cover__inner-container {
		display: block;
		width: 100%;
		order: 1;
	}

	/* Hide the empty left placeholder column on mobile. */
	.hero-banner .wp-block-columns > .wp-block-column:first-child {
		display: none;
	}
}

.hero-content {
	background: rgba(255, 255, 255, 0.96);
	border-radius: 16px;
	padding: 2.25rem 2.5rem;
	max-width: 460px;
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-md);
}

.hero-content h2 {
	font-family: var(--font-display) !important;
	font-size: clamp(1.85rem, 3.2vw, 2.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	margin-bottom: 1rem !important;
	color: var(--wp--preset--color--dark) !important;
	font-variation-settings: "opsz" 40;
}

.hero-content p {
	font-size: 1rem;
	color: var(--wp--preset--color--body-text);
	margin-bottom: 1.5rem;
	line-height: 1.55;
}

/* ─── Product Cards ─── */

.product-cards-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.product-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 1.25rem;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
	text-decoration: none !important;
}

.product-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
	border-color: transparent;
}

.product-card .card-icon {
	width: 48px;
	height: 48px;
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--white);
}

.product-card .card-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.product-card h3 {
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	margin-bottom: 0.375rem !important;
	color: var(--wp--preset--color--dark) !important;
}

.product-card p {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body-text);
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 900px) {
	.product-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.product-cards-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Colored top-border cards ─── */

.card-accent-purple { --accent: var(--wp--preset--color--primary); border-top: 4px solid var(--accent) !important; }
.card-accent-blue   { --accent: var(--wp--preset--color--blue);    border-top: 4px solid var(--accent) !important; }
.card-accent-teal   { --accent: var(--wp--preset--color--teal);    border-top: 4px solid var(--accent) !important; }
.card-accent-green  { --accent: var(--wp--preset--color--green);   border-top: 4px solid var(--accent) !important; }
.card-accent-gold   { --accent: var(--wp--preset--color--gold);    border-top: 4px solid var(--accent) !important; }
.card-accent-orange { --accent: var(--wp--preset--color--orange);  border-top: 4px solid var(--accent) !important; }

[class*="card-accent-"] {
	position: relative;
	cursor: pointer;
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[class*="card-accent-"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--accent, transparent);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

[class*="card-accent-"]:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

[class*="card-accent-"]:hover::before {
	opacity: 0.04;
}

[class*="card-accent-"] > * {
	position: relative;
	z-index: 1;
}

[class*="card-accent-"] h3 a,
[class*="card-accent-"] h3 a:hover,
[class*="card-accent-"] h3 a:focus {
	color: inherit;
	text-decoration: none;
}

[class*="card-accent-"] h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Keep the linked heading static so the stretched-link ::after above anchors
   to the whole card (not just the h3 row), making the entire card clickable. */
[class*="card-accent-"] h3:has(> a) {
	position: static;
}

/* ─── Section Styles ─── */

.section-icon {
	width: 56px;
	height: 56px;
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}

.section-icon svg {
	width: 28px;
	height: 28px;
	fill: var(--wp--preset--color--white);
}

/* ─── Benefits Section ─── */

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	text-align: center;
}

.benefit-item {
	padding: 1rem;
}

.benefit-icon {
	width: 64px;
	height: 64px;
	background: var(--wp--preset--color--primary-light);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.25rem;
}

.benefit-icon svg {
	width: 30px;
	height: 30px;
	fill: var(--wp--preset--color--primary);
}

.benefit-item h3 {
	font-size: 1rem !important;
	font-weight: 700 !important;
	margin-bottom: 0.5rem !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.benefit-item p {
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.benefits-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ─── CTA Banner ─── */

.cta-banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: 16px;
	overflow: hidden;
	min-height: 240px;
}

.cta-banner-image {
	background-size: cover;
	background-position: center;
	min-height: 240px;
}

.cta-banner-content {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem 3rem;
}

.cta-banner-content h2 {
	color: var(--wp--preset--color--white) !important;
	font-family: var(--font-display) !important;
	font-size: clamp(1.85rem, 3.2vw, 2.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	margin-bottom: 0.85rem !important;
	font-variation-settings: "opsz" 40;
}

.cta-banner-content p {
	font-size: 0.9375rem;
	opacity: 0.9;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

@media (max-width: 768px) {
	.cta-banner {
		grid-template-columns: 1fr;
	}
}

/* ─── Buttons ─── */

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	/* Default outline color so the border (currentColor) and text are visible on
	   light backgrounds before hover. Dark-background contexts (product-hero,
	   gradient sections, page-header) override this to white with !important. */
	color: var(--wp--preset--color--primary);
	border-radius: 50px;
	padding: 0.7rem 1.6rem;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.wp-block-button.is-style-outline .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: var(--shadow-press);
}

/* Filled button */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border-radius: 50px;
	padding: 0.8rem 1.85rem;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: var(--shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: var(--shadow-press);
}

/* White outlined button (for dark backgrounds) */
.wp-block-button.btn-outline-white .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--white) !important;
	background: transparent !important;
	border-radius: 50px !important;
}

.wp-block-button.btn-outline-white .wp-block-button__link:hover {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary-dark) !important;
	border-color: var(--wp--preset--color--white) !important;
}

/* Dark filled button */
.btn-dark .wp-block-button__link {
	background: var(--wp--preset--color--dark) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 50px !important;
}

.btn-dark .wp-block-button__link:hover {
	background: #333 !important;
}

/* ─── Split Section ─── */

.split-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.split-section.reverse {
	direction: rtl;
}

.split-section.reverse > * {
	direction: ltr;
}

.split-section-image {
	border-radius: 16px;
	overflow: hidden;
}

.split-section-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 768px) {
	.split-section {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.split-section.reverse {
		direction: ltr;
	}
}

/* ─── Footer ─── */

.site-footer {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.site-footer ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 !important;
}

.site-footer a,
.site-footer li a {
	color: var(--wp--preset--color--white) !important;
}

/* ─── Footer Locations ───
   Branch contact strip rendered by the aofcu/footer-locations block above
   the link columns. Pulls live from the Locations CPT. */

.footer-locations {
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.footer-locations-heading {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin: 0 0 1.25rem !important;
}

.footer-locations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem 2rem;
}

.footer-location {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.footer-location-name {
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em !important;
	color: var(--wp--preset--color--white) !important;
	margin: 0 0 0.15rem !important;
	font-family: inherit !important;
}

.footer-location-address {
	font-style: normal;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.footer-location-phone {
	color: var(--wp--preset--color--white) !important;
	text-decoration: none !important;
	font-weight: 600;
	width: max-content;
	transition: opacity 0.2s ease;
}

.footer-location-phone:hover {
	opacity: 0.85;
	text-decoration: underline !important;
}

.footer-location-hours {
	list-style: none !important;
	padding: 0 !important;
	margin: 0.25rem 0 0 !important;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.55;
}

.footer-location-hours li {
	padding: 0;
	margin: 0;
}

.footer-location-note {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}

.footer-cta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--wp--preset--color--white);
	margin-left: calc(-1 * var(--wp--preset--spacing--40));
	margin-right: calc(-1 * var(--wp--preset--spacing--40));
}

.footer-cta-bar p {
	color: var(--wp--preset--color--primary) !important;
}

.footer-cta-bar .site-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wp--preset--color--white);
}

.footer-cta-bar .cta-text {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.8);
}

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

.footer-links li {
	margin-bottom: 0.5rem;
}

.site-footer a {
	color: var(--wp--preset--color--white) !important;
	transition: opacity 0.2s;
}

.site-footer a:hover {
	opacity: 0.8;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none !important;
	font-size: 0.875rem;
	transition: color 0.2s;
}

.footer-links a:hover {
	color: var(--wp--preset--color--white) !important;
	text-decoration: underline !important;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: 1.5rem 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--white) !important;
	text-decoration: none !important;
	margin-right: 0.5rem;
	transition: background 0.2s;
}

.footer-social a:hover {
	background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
	.footer-links {
		grid-template-columns: repeat(2, 1fr);
	}
	.footer-cta-bar {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.footer-links {
		grid-template-columns: 1fr;
	}
}

/* ─── Awards Section ─── */

.awards-grid {
	display: flex;
	justify-content: center;
	gap: 3rem;
	flex-wrap: wrap;
}

.award-item {
	text-align: center;
	max-width: 200px;
}

.award-item img {
	height: 100px;
	width: auto;
	margin-bottom: 0.75rem;
}

.award-item p {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body-text);
	line-height: 1.4;
}

/* ─── Decorative Backgrounds ─── */

/* Wave top - adds a wave shape at the top of a section */
.wave-top {
	position: relative;
}

.wave-top::before {
	content: "";
	position: absolute;
	top: -48px;
	left: 0;
	right: 0;
	height: 48px;
	background: inherit;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48h1440V24C1320 4 1200 0 1080 8c-120 8-240 28-360 32S480 36 360 24C240 12 120 4 0 8z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48h1440V24C1320 4 1200 0 1080 8c-120 8-240 28-360 32S480 36 360 24C240 12 120 4 0 8z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* Wave bottom - adds a wave shape at the bottom of a section */
.wave-bottom {
	position: relative;
}

.wave-bottom::after {
	content: "";
	position: absolute;
	bottom: -48px;
	left: 0;
	right: 0;
	height: 48px;
	background: inherit;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v24c-120 20-240 24-360 16-120-8-240-28-360-32S480 12 360 24C240 36 120 44 0 40z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v24c-120 20-240 24-360 16-120-8-240-28-360-32S480 12 360 24C240 36 120 44 0 40z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	z-index: 1;
}

/* Slant top - diagonal cut */
.slant-top {
	position: relative;
}

.slant-top::before {
	content: "";
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	height: 60px;
	background: inherit;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Slant bottom - diagonal cut */
.slant-bottom {
	position: relative;
}

.slant-bottom::after {
	content: "";
	position: absolute;
	bottom: -60px;
	left: 0;
	right: 0;
	height: 60px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	z-index: 1;
}

/* Curve top - smooth arc */
.curve-top {
	position: relative;
}

.curve-top::before {
	content: "";
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	height: 60px;
	background: inherit;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60h1440V30C1080 0 360 0 0 30z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60h1440V30C1080 0 360 0 0 30z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* Curve bottom - smooth arc */
.curve-bottom {
	position: relative;
}

.curve-bottom::after {
	content: "";
	position: absolute;
	bottom: -60px;
	left: 0;
	right: 0;
	height: 60px;
	background: inherit;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v30C1080 60 360 60 0 30z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v30C1080 60 360 60 0 30z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	z-index: 1;
}

/* Spacing helpers - add margin to account for the decorative shape overflow */
.wave-top,
.curve-top { margin-top: 48px; }
.wave-bottom,
.curve-bottom { margin-bottom: 48px; }
.slant-top { margin-top: 60px; }
.slant-bottom { margin-bottom: 60px; }

/* ─── SVG Pattern Backgrounds ─── */

/* Wavy lines - subtle horizontal waves */
.bg-waves {
	background-color: #f0f0f0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q25 10 50 20 Q75 30 100 20 Q125 10 150 20 Q175 30 200 20' fill='none' stroke='%23d4d4d4' stroke-width='1.5'/%3E%3C/svg%3E");
	background-size: 200px 40px;
}

.bg-waves-purple {
	background-color: var(--wp--preset--color--primary-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q25 10 50 20 Q75 30 100 20 Q125 10 150 20 Q175 30 200 20' fill='none' stroke='%23d6c4e8' stroke-width='1.5'/%3E%3C/svg%3E");
	background-size: 200px 40px;
}

/* Dots grid */
.bg-dots {
	background-color: #f0f0f0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23d4d4d4'/%3E%3C/svg%3E");
	background-size: 24px 24px;
}

.bg-dots-purple {
	background-color: var(--wp--preset--color--primary-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23d6c4e8'/%3E%3C/svg%3E");
	background-size: 24px 24px;
}

/* Diagonal lines */
.bg-diagonal {
	background-color: #f0f0f0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 20L20 0' fill='none' stroke='%23d4d4d4' stroke-width='0.75'/%3E%3C/svg%3E");
	background-size: 20px 20px;
}

.bg-diagonal-purple {
	background-color: var(--wp--preset--color--primary-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 20L20 0' fill='none' stroke='%23d6c4e8' stroke-width='0.75'/%3E%3C/svg%3E");
	background-size: 20px 20px;
}

/* Cross / plus pattern */
.bg-cross {
	background-color: #f0f0f0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 12v8M12 16h8' fill='none' stroke='%23d4d4d4' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 32px 32px;
}

.bg-cross-purple {
	background-color: var(--wp--preset--color--primary-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 12v8M12 16h8' fill='none' stroke='%23d6c4e8' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 32px 32px;
}

/* ─── Query Loop Slider ─── */

.wp-block-query.is-style-slider {
	position: relative;
}

.wp-block-query.is-style-slider .wp-block-post-template.swiper {
	overflow: hidden;
	padding-bottom: 2.5rem;
}

.wp-block-query.is-style-slider .swiper-slide {
	height: auto;
}

.wp-block-query.is-style-slider .swiper-button-prev,
.wp-block-query.is-style-slider .swiper-button-next {
	color: var(--wp--preset--color--primary);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.2s;
}

.wp-block-query.is-style-slider .swiper-button-prev::after,
.wp-block-query.is-style-slider .swiper-button-next::after {
	font-size: 16px;
	font-weight: 700;
}

.wp-block-query.is-style-slider .swiper-button-prev:hover,
.wp-block-query.is-style-slider .swiper-button-next:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.wp-block-query.is-style-slider .swiper-pagination-bullet {
	background: var(--wp--preset--color--border);
	opacity: 1;
	transition: background 0.2s;
}

.wp-block-query.is-style-slider .swiper-pagination-bullet-active {
	background: var(--wp--preset--color--primary);
}

/* ─── Gallery slider (.photo-slider) ───
   A core Gallery block upgraded to a one-up Swiper by query-slider.js. Every
   slide shares a fixed frame height so navigation doesn't jump between
   portrait and landscape photos; object-fit:contain keeps each photo uncropped
   inside that frame. */

.wp-block-gallery.photo-slider {
	position: relative;
}

.wp-block-gallery.photo-slider.swiper {
	display: block;
	overflow: hidden;
	padding-bottom: 2.5rem;
}

/* Constrain the wrapper (Swiper reads this for slide height) rather than the
   flex slide, which is more reliable than a height on the flex item itself. */
.wp-block-gallery.photo-slider .swiper-wrapper {
	height: clamp(240px, 50vw, 500px);
}

.wp-block-gallery.photo-slider .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	background: rgba(224, 224, 224, 0.3);
	border-radius: 10px;
	overflow: hidden;
}

.wp-block-gallery.photo-slider.swiper .swiper-slide.wp-block-image,
.wp-block-gallery.photo-slider.swiper .swiper-slide figure.wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

/* Selector is intentionally specific (4 classes + 2 elements) so it beats
   core's `.wp-block-gallery.has-nested-images figure.wp-block-image img`
   rule, which otherwise forces height:auto/width:auto on the photo. */
.wp-block-gallery.photo-slider.swiper figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 10px;
}

.wp-block-gallery.photo-slider .swiper-button-prev,
.wp-block-gallery.photo-slider .swiper-button-next {
	color: var(--wp--preset--color--primary);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.2s;
}

.wp-block-gallery.photo-slider .swiper-button-prev::after,
.wp-block-gallery.photo-slider .swiper-button-next::after {
	font-size: 16px;
	font-weight: 700;
}

.wp-block-gallery.photo-slider .swiper-button-prev:hover,
.wp-block-gallery.photo-slider .swiper-button-next:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.wp-block-gallery.photo-slider .swiper-pagination-bullet {
	background: var(--wp--preset--color--border);
	opacity: 1;
	transition: background 0.2s;
}

.wp-block-gallery.photo-slider .swiper-pagination-bullet-active {
	background: var(--wp--preset--color--primary);
}

/* ─── Archive (category / tag / CPT) ───
   Constrains the archive page and styles its header; the post list itself
   reuses the .is-style-card grid below. */

.archive-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.archive-header {
	margin-bottom: var(--wp--preset--spacing--50);
}

.archive-title {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--dark);
	margin: 0;
}

.archive-description {
	margin-top: 0.75rem;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--body-text);
	max-width: 60ch;
}

.archive-wrap .pagination {
	margin-top: var(--wp--preset--spacing--60);
}

.archive-wrap .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.archive-wrap .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
}

.archive-wrap .pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.archive-wrap .pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ─── Query Loop Card Style ───
   Apply by selecting the Query block and choosing Styles → Card.
   Each post in the loop renders as a card: image on top, eyebrow + title +
   excerpt + read-more link on a clean white surface with hover lift. */

.wp-block-query.is-style-card .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 900px) {
	.wp-block-query.is-style-card .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.wp-block-query.is-style-card .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* Latest news: 4 across on desktop, 2-up on tablet, stacked on mobile.
   Scoped to .latest-news so other is-style-card grids keep their 3-up layout.
   Specificity (0,4,0) beats both the is-style-card and is-layout-grid systems. */
.latest-news.wp-block-query.is-style-card .wp-block-post-template {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
	.latest-news.wp-block-query.is-style-card .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.latest-news.wp-block-query.is-style-card .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* News cards are a single wrapping <a>, so the default link underline hits all
   card text. Suppress it; underline only the title on hover for affordance. */
.news-card,
.news-card:hover,
.news-card:focus {
	text-decoration: none;
	color: inherit;
	display: block;
}
.news-card:hover .wp-block-post-title,
.news-card:focus-visible .wp-block-post-title {
	text-decoration: underline;
}

.wp-block-query.is-style-card .wp-block-post {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
	margin: 0;
	position: relative;
}

/* The post-title link is stretched to cover the whole card, making the card clickable */
.wp-block-query.is-style-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Inner links (e.g. category terms) sit above the card-spanning link so they remain clickable */
.wp-block-query.is-style-card .wp-block-post-terms,
.wp-block-query.is-style-card .wp-block-post-terms a {
	position: relative;
	z-index: 3;
}

.wp-block-query.is-style-card .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

/* Featured image fills the top of the card, fixed aspect ratio so cards align */
.wp-block-query.is-style-card .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--light-gray);
}

.wp-block-query.is-style-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.wp-block-query.is-style-card .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Inner content padding */
.wp-block-query.is-style-card .wp-block-post > *:not(.wp-block-post-featured-image) {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.wp-block-query.is-style-card .wp-block-post > *:not(.wp-block-post-featured-image):first-child,
.wp-block-query.is-style-card .wp-block-post > .wp-block-post-featured-image + * {
	padding-top: 1.25rem;
}

.wp-block-query.is-style-card .wp-block-post > *:last-child {
	padding-bottom: 1.25rem;
	margin-top: auto;
}

/* Eyebrow: post terms or date rendered small + uppercase */
.wp-block-query.is-style-card .wp-block-post-terms,
.wp-block-query.is-style-card .wp-block-post-date {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.wp-block-query.is-style-card .wp-block-post-terms a,
.wp-block-query.is-style-card .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/* Card title */
.wp-block-query.is-style-card .wp-block-post-title {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	margin: 0.5rem 0 0.5rem !important;
	color: var(--wp--preset--color--dark) !important;
}

.wp-block-query.is-style-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-query.is-style-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Excerpt */
.wp-block-query.is-style-card .wp-block-post-excerpt {
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
	line-height: 1.55;
	margin: 0;
}

.wp-block-query.is-style-card .wp-block-post-excerpt p {
	margin: 0;
}

/* Read more / more-link */
.wp-block-query.is-style-card .wp-block-post-excerpt__more-link,
.wp-block-query.is-style-card .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.85rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.wp-block-query.is-style-card .wp-block-post-excerpt__more-link::after,
.wp-block-query.is-style-card .wp-block-read-more::after {
	content: "→";
	transition: transform 0.2s ease;
}

.wp-block-query.is-style-card .wp-block-post:hover .wp-block-post-excerpt__more-link::after,
.wp-block-query.is-style-card .wp-block-post:hover .wp-block-read-more::after {
	transform: translateX(3px);
}

/* ─── Block layout fallbacks ───
   These pages were converted from block markup to static HTML, so the
   per-instance `.wp-container-core-*-is-layout-<hash>` rules WordPress normally
   generates are absent (the markup keeps the classes, but the styles were never
   emitted because the content is no longer parsed as blocks). Core still ships
   the base `.is-layout-flex/flow/constrained` rules — which is why basic flex
   and constrained widths work — but orientation, content justification,
   flex-wrap, and column vertical-alignment were encoded ONLY in those missing
   per-instance rules. Reconstruct them from the stable layout classes that
   remain in the markup, mirroring WordPress's own generation logic.

   Note: per-instance blockGap overrides can't be recovered generically; the
   core base gap (24px) applies everywhere. Fix specific spots as needed. */

/* Orientation — vertical groups stack (core base leaves them row + wrap). */
.is-layout-flex.is-vertical {
	flex-direction: column;
}

/* Content justification — horizontal groups: maps to the main (horizontal) axis. */
.is-layout-flex:not(.is-vertical).is-content-justification-left { justify-content: flex-start; }
.is-layout-flex:not(.is-vertical).is-content-justification-center { justify-content: center; }
.is-layout-flex:not(.is-vertical).is-content-justification-right { justify-content: flex-end; }
.is-layout-flex:not(.is-vertical).is-content-justification-space-between { justify-content: space-between; }

/* Content justification — vertical groups: maps to the cross (horizontal) axis. */
.is-layout-flex.is-vertical.is-content-justification-left { align-items: flex-start; }
.is-layout-flex.is-vertical.is-content-justification-center { align-items: center; }
.is-layout-flex.is-vertical.is-content-justification-right { align-items: flex-end; }

/* No-wrap flex rows. */
.is-layout-flex.is-nowrap { flex-wrap: nowrap; }

/* Column vertical alignment — whole row (sets align-items on the columns flex). */
.wp-block-columns.are-vertically-aligned-top { align-items: flex-start; }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; }
.wp-block-columns.are-vertically-aligned-stretch { align-items: stretch; }

/* Column vertical alignment — single column (align-self). */
.wp-block-column.is-vertically-aligned-top { align-self: flex-start; }
.wp-block-column.is-vertically-aligned-center { align-self: center; }
.wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; }
.wp-block-column.is-vertically-aligned-stretch { align-self: stretch; }

/* ─── Numbered Step Cards ───
   Targets the "How to Open Your Account"-style 3-column step section.
   The selector is structural: a Group inside a Column whose first child is a
   centered, primary-colored, oversized paragraph (the step number). That
   shape is unique to step sections, so this won't bleed into eyebrows or
   icon cards elsewhere. */

.wp-block-columns > .wp-block-column > .wp-block-group:has(> p.has-primary-color.has-text-align-center[style*="2rem"]:first-child) {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 2rem 1.5rem 1.75rem !important;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
	height: 100%;
	gap: 0.5rem !important;
	position: relative;
}

.wp-block-columns > .wp-block-column > .wp-block-group:has(> p.has-primary-color.has-text-align-center[style*="2rem"]:first-child):hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

/* Replace the plain number paragraph with a circular badge */
.wp-block-columns > .wp-block-column > .wp-block-group:has(> p.has-primary-color.has-text-align-center[style*="2rem"]:first-child) > .has-primary-color.has-text-align-center[style*="2rem"]:first-child {
	width: 56px;
	height: 56px;
	margin: -3rem auto 0.5rem !important;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-shadow: var(--shadow-md);
	position: relative;
	z-index: 1;
}

/* Step heading */
.wp-block-columns > .wp-block-column > .wp-block-group:has(> p.has-primary-color.has-text-align-center[style*="2rem"]:first-child) > h3 {
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	margin: 0.5rem 0 0.25rem !important;
	color: var(--wp--preset--color--dark) !important;
}

/* Step description */
.wp-block-columns > .wp-block-column > .wp-block-group:has(> p.has-primary-color.has-text-align-center[style*="2rem"]:first-child) > p:not(:first-child) {
	font-size: 0.875rem !important;
	color: var(--wp--preset--color--body-text) !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

/* Add breathing room above the column row so the badge can hang outside */
.wp-block-columns:has(> .wp-block-column > .wp-block-group:has(> p.has-primary-color.has-text-align-center[style*="2rem"]:first-child)) {
	margin-top: 3rem;
	gap: 1.25rem;
}

/* Thin connector line between step cards on desktop (drawn behind the badges) */
@media (min-width: 781px) {
	.wp-block-columns:has(> .wp-block-column > .wp-block-group:has(> p.has-primary-color.has-text-align-center[style*="2rem"]:first-child)) {
		position: relative;
	}
	.wp-block-columns:has(> .wp-block-column > .wp-block-group:has(> p.has-primary-color.has-text-align-center[style*="2rem"]:first-child))::before {
		content: "";
		position: absolute;
		top: 28px;
		left: 16%;
		right: 16%;
		height: 2px;
		background-image: linear-gradient(to right, var(--wp--preset--color--primary) 50%, transparent 0%);
		background-size: 12px 2px;
		background-repeat: repeat-x;
		opacity: 0.35;
		z-index: 0;
		pointer-events: none;
	}
}

/* ─── Bordered Feature Columns ───
   Targets 3-up "why choose us" sections where each Column carries its own
   border + radius (e.g. "Why Choose a Share Certificate?"). Upgrades them
   into elevated cards with a colored accent stripe, hover lift, and cleaner
   typography. Distinct enough not to bleed into card grids that nest a Group
   inside each column instead. */

.wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"] {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 16px !important;
	padding: 2rem 1.5rem 1.75rem !important;
	box-shadow: var(--shadow-xs);
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* Top accent stripe — cycles colors across the 3 cards */
.wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--wp--preset--color--primary);
}

.wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"]:nth-child(3n+2)::before {
	background: var(--wp--preset--color--teal);
}

.wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"]:nth-child(3n)::before {
	background: var(--wp--preset--color--gold);
}

.wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"]:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent !important;
}

/* Card title */
.wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"] > h3 {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	margin: 0.25rem 0 0.65rem !important;
	color: var(--wp--preset--color--dark) !important;
}

/* Card body copy */
.wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"] > p,
.wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"] > .body-text {
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--body-text) !important;
	margin: 0 !important;
}

/* Center & upgrade the section heading sitting above this column row */
.wp-block-group:has(> .wp-block-columns > .wp-block-column.has-border-color[style*="border-radius"]) > h2 {
	text-align: center;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	letter-spacing: -0.025em !important;
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* ─── Account Feature Cards ───
   Targets 3-up "account features" cards where each card is a white-bg Group
   nested inside a Column (distinct from the column-bordered "Feature Cards"
   pattern). Adds a small primary-color check badge, hover lift, and tighter
   typography. Section wrapper (typically light-gray bg) gets a centered,
   upsized heading via :has(). */

.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"] {
	position: relative;
	padding: 2rem 1.5rem 1.5rem !important;
	margin-top: 22px;
	border-radius: 14px !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
	flex: 1; /* fill the column height for equal-height card rows */
}

/* Equal-height card rows: stretch the columns row, and make each column a
   vertical flex so its card grows to the full row height. (The per-instance
   stretch/align styles aren't generated for this converted markup — see the
   block layout fallbacks above.) flex:1 above honours the 22px badge offset,
   which a plain height:100% would overflow. */
.wp-block-columns:has(> .wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]) {
	align-items: stretch;
}
.wp-block-columns:has(> .wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]) > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Default badge: a checkmark in a primary-color circle hanging above the card
   top edge — guaranteed not to collide with the first heading regardless of
   WordPress's layout/gap rules. */
.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 1.5rem;
	width: 44px;
	height: 44px;
	background-color: var(--wp--preset--color--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	border-radius: 50%;
	box-shadow: var(--shadow-md);
	z-index: 2;
}

/* Editor override — when the user places an Image block as the first child of
   a card, that image becomes the badge. The default ::before checkmark hides.
   Best with white-on-transparent SVG icons; any image works. */
.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]:has(> figure.wp-block-image:first-child)::before {
	display: none;
}

.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"] > figure.wp-block-image:first-child {
	position: absolute;
	top: -22px;
	left: 1.5rem;
	width: 44px;
	height: 44px;
	margin: 0 !important;
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	box-sizing: border-box;
	box-shadow: var(--shadow-md);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 9px;
}

.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"] > figure.wp-block-image:first-child img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent !important;
}

.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"] > h3 {
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	color: var(--wp--preset--color--dark) !important;
}

.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"] > p {
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	color: var(--wp--preset--color--body-text) !important;
}

/* Center & upgrade the section heading sitting above this row */
.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]) > h2 {
	text-align: center;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	letter-spacing: -0.025em !important;
	margin-bottom: 0.5rem !important;
}

/* Optional intro paragraph styling if one exists between heading and cards */
.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]) > p {
	text-align: center;
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}

/* The membership "How to apply" branches card is a white, bordered, rounded
   flex Group inside a Column, so it matches the account-feature-card selectors
   above and picks up their hanging check badge + top offset. It is not an
   account-feature card, so suppress the badge, drop the badge offset, and
   center the (shrink-wrapped) branch grid within the card. */
.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]:has(.branches-inline) {
	margin-top: 0;
}
.wp-block-column > .wp-block-group.has-border-color.has-white-background-color[style*="border-radius"]:has(.branches-inline)::before {
	display: none;
}
.wp-block-group.is-layout-flex > .branches-inline {
	margin-inline: auto;
}

/* ─── Product Comparison Cards ───
   Side-by-side product comparison: each card has a colored header band
   (name/eyebrow/tagline/CTA) followed by a divider-separated feature list. */

.comparison-cards .wp-block-columns {
	gap: 1rem;
	align-items: stretch;
}

.comparison-cards .comparison-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	height: 100%;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.comparison-cards .comparison-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}

/* Header band — light gray, centered content, fixed-ish height so cards align */
.comparison-cards .comparison-card-header {
	padding: 1.75rem 1.25rem 1.5rem !important;
	text-align: center;
}

.comparison-cards .comparison-card-header > h3 {
	margin: 0 0 0.5rem !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	color: var(--wp--preset--color--primary) !important;
}

.comparison-cards .comparison-eyebrow {
	font-size: 0.6875rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary-dark) !important;
	margin: 0 0 0.5rem !important;
}

.comparison-cards .comparison-tagline {
	font-size: 0.9375rem !important;
	color: var(--wp--preset--color--body-text) !important;
	line-height: 1.5 !important;
	margin: 0 0 1.25rem !important;
	min-height: 3em;
}

.comparison-cards .comparison-card-header .wp-block-buttons {
	margin-top: auto;
}

/* Feature list — every direct child gets a top divider so rows separate visually */
.comparison-cards .comparison-card-body {
	padding: 0 1.25rem 1.5rem !important;
	background: var(--wp--preset--color--white);
}

.comparison-cards .comparison-card-body > * {
	padding: 1rem 0 !important;
	margin: 0 !important;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
	color: var(--wp--preset--color--dark) !important;
}

/* Section heading + intro centering (uses :has() to find the wrapper) */
.comparison-cards > h2 {
	text-align: center;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	letter-spacing: -0.025em !important;
	margin-bottom: 0.5rem !important;
}

.comparison-cards > p {
	text-align: center;
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 781px) {
	/* On mobile, stack the cards full-width so each comparison reads top-to-bottom */
	.comparison-cards .wp-block-columns {
		gap: 1.5rem;
	}
}

/* ─── Features Grid ───
   Marketing-style features layout: centered heading + intro on a light-gray
   band, one large hero feature card (text + image side-by-side) followed by
   rows of smaller feature cards (text on top, image at bottom). White cards
   on gray surface with hover lift. */

.features-grid > h2 {
	text-align: center;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	letter-spacing: -0.025em !important;
	margin-bottom: 0.5rem !important;
}

.features-grid > p {
	text-align: center;
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
}

/* Cards (both large and small share the same surface treatment) */
.features-grid .feature-card {
	background: var(--wp--preset--color--white);
	border-radius: 14px;
	padding: 2rem 1.75rem !important;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	height: 100%;
	overflow: hidden;
}

.features-grid .feature-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.features-grid .feature-card > h3 {
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 0.65rem !important;
	color: var(--wp--preset--color--dark) !important;
}

.features-grid .feature-card > p {
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--body-text) !important;
	margin: 0 0 1.25rem !important;
}

/* Image at the bottom of small cards — push it down with auto top margin */
.features-grid .feature-card > .wp-block-image {
	margin: auto 0 0 !important;
	overflow: hidden;
}

.features-grid .feature-card > .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Hero feature card spans the full width with horizontal text+image layout */
.features-grid .feature-card-large {
	margin-bottom: 1.25rem !important;
	padding: 2.5rem !important;
}

.features-grid .feature-card-large > .wp-block-columns {
	gap: 1.5rem;
	margin: 0;
}

.features-grid .feature-card-large h3 {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem) !important;
	margin-top: 0 !important;
	margin-bottom: 0.75rem !important;
}

.features-grid .feature-card-large p {
	font-size: 1rem !important;
	margin-bottom: 0 !important;
}

.features-grid .feature-card-large .wp-block-image {
	margin: 0 !important;
}

/* Stretch columns so cards in a row line up to the same height */
.features-grid > .wp-block-columns {
	align-items: stretch;
}

.features-grid > .wp-block-columns > .wp-block-column {
	display: flex;
}

.features-grid > .wp-block-columns > .wp-block-column > .feature-card {
	flex: 1;
	display: flex;
	flex-direction: column;
}

@media (max-width: 781px) {
	.features-grid .feature-card-large {
		padding: 1.75rem !important;
	}
	.features-grid .feature-card {
		padding: 1.5rem 1.25rem !important;
	}
}

/* ─── Banded Features ───
   Three outlined cards on a full-bleed primary-color band. Each card has a
   centered circular outline icon at the top, then title + description in
   white. Adapts to page theme via primary color CSS var. */

.banded-features > h2 {
	color: var(--wp--preset--color--white) !important;
	text-align: center;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	letter-spacing: -0.025em !important;
	margin-bottom: 0.5rem !important;
}

.banded-features .wp-block-columns {
	align-items: stretch;
	gap: 1.5rem;
}

.banded-features .outlined-feature {
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 14px;
	padding: 2rem 1.5rem 1.75rem !important;
	text-align: center;
	height: 100%;
	transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
	color: var(--wp--preset--color--white);
}

.banded-features .outlined-feature:hover {
	border-color: rgba(255, 255, 255, 0.65);
	background-color: rgba(255, 255, 255, 0.04);
	transform: translateY(-2px);
}

/* Centered circular outline icon at the top of each card */
.banded-features .outlined-feature > figure.wp-block-image:first-child {
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem !important;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	box-sizing: border-box;
	overflow: hidden;
}

.banded-features .outlined-feature > figure.wp-block-image:first-child img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1); /* Force any uploaded SVG/PNG to render white */
}

/* Title */
.banded-features .outlined-feature > h3 {
	color: var(--wp--preset--color--white) !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 0.5rem !important;
}

/* Description */
.banded-features .outlined-feature > p {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

/* Stretch cards to equal height */
.banded-features .wp-block-columns > .wp-block-column {
	display: flex;
}

.banded-features .wp-block-columns > .wp-block-column > .outlined-feature {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* ─── Framed CTA ───
   Two-column CTA: text + dark pill buttons on the left, image on the right
   with a colored box offset down-right behind it for visual depth. */

.framed-cta h2 {
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	letter-spacing: -0.02em !important;
	line-height: 1.15 !important;
	margin: 0 0 1rem !important;
	color: var(--wp--preset--color--dark) !important;
}

.framed-cta p {
	font-size: 1rem !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--body-text) !important;
	margin: 0 !important;
}

/* The framed image — image with a colored box offset behind it */
.framed-cta .framed-image {
	position: relative;
	padding: 0 !important;
	isolation: isolate;
}

.framed-cta .framed-image::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	right: -1.5rem;
	bottom: -1.5rem;
	left: 2rem;
	background: var(--wp--preset--color--primary-light);
	border-radius: 8px;
	z-index: -1;
}

.framed-cta .framed-image .wp-block-image {
	margin: 0 !important;
	position: relative;
	z-index: 1;
}

.framed-cta .framed-image .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

@media (max-width: 781px) {
	/* Pull the offset back in on mobile so the box doesn't poke past container edge */
	.framed-cta .framed-image::before {
		top: 0.75rem;
		right: -0.5rem;
		bottom: -0.75rem;
		left: 0.75rem;
	}
}

/* ─── Rates Table ─── */

/* Shared column sizing for header and rows */
.rates-table-header,
.rates-table-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
}

.rates-table-header > :nth-child(1),
.rates-table-term {
	flex: 1 1 0;
	min-width: 0;
}

.rates-table-header > :nth-child(2),
.rates-table-rate {
	flex: 0 0 80px;
	text-align: right;
}

.rates-table-header.with-apy > :nth-child(3),
.rates-table-row.with-apy .rates-table-apy {
	flex: 0 0 80px;
	text-align: right;
}

.rates-table-apy {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	font-size: 1.0625rem;
}

/* Header styling */
.rates-table-header {
	background: var(--wp--preset--color--light-gray);
	border-bottom: 2px solid var(--wp--preset--color--primary);
}

.rates-table-header-cell {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--body-text);
}

/* Row styling */
.rates-table-row {
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: background 0.15s;
}

.rates-table-row:hover {
	background: var(--wp--preset--color--primary-light);
}

.rates-table-row h3 {
	display: none;
}

.rates-table-term {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--dark);
	font-weight: 600;
}

.rates-table-note {
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body-text);
}

.rates-table-rate {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	font-size: 1.0625rem;
}

@media (max-width: 600px) {
	.rates-table-header {
		display: none;
	}

	.rates-table-row {
		flex-wrap: wrap !important;
		gap: 0.25rem 1rem;
	}

	.rates-table-term,
	.rates-table-rate,
	.rates-table-apy {
		flex: 0 0 auto !important;
	}
}

/* ─── Rate Card ─── */

.rate-card {
	text-align: center;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.rate-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.rate-card-rate {
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 700;
	font-variation-settings: "opsz" 40;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.1rem;
}

.rate-card-percent {
	font-size: 1.25rem;
	font-weight: 600;
	margin-left: 0.1em;
	color: var(--wp--preset--color--primary);
}

.rate-card-aslow {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--body-text);
	margin-top: -0.25rem;
	margin-bottom: 0;
}

.rate-card-term {
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
	margin-top: 0;
	margin-bottom: 0;
}

.rate-card-type {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary-dark);
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 0.2rem;
	margin-top: 0.2rem;
}

/* ─── Rate Tile (APR + type only, no term) ─── */

.rate-tile {
	text-align: center;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	/* Fill the grid cell / slide so tiles in a row are equal height and line up,
	   even when term text varies in length. The "type" footer sticks to the bottom. */
	height: 100%;
	display: flex;
	flex-direction: column;
}

.rate-tile .rate-tile-type {
	margin-top: auto;
}

.rate-tile:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.rate-tile-rate {
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 700;
	font-variation-settings: "opsz" 40;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.25rem;
}

.rate-tile-percent {
	font-size: 1.25rem;
	font-weight: 600;
	margin-left: 0.1em;
	color: var(--wp--preset--color--primary);
}

.rate-tile-aslow {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--body-text);
	margin-top: -0.25rem;
	margin-bottom: 0.75rem;
}

.rate-tile-term {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
	margin-top: 0;
	margin-bottom: 0;
}

.rate-tile-type {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary-dark);
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 0.75rem;
	margin-top: 0.75rem;
}

/* ─── Rates savings/loan toggle ───
   [aofcu_rates_toggle] renders a pill switch over two grids of rate tiles. */
.rates-toggle-switch {
	display: inline-flex;
	gap: 0.25rem;
	margin: 0 auto 2rem;
	padding: 0.25rem;
	background: var(--wp--preset--color--light-gray);
	border-radius: 999px;
}
.rates-toggle {
	text-align: center;
}
.rates-toggle-btn {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--body-text);
	font-size: 0.9375rem;
	font-weight: 700;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.rates-toggle-btn.is-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	box-shadow: var(--shadow-xs);
}
.rates-toggle-btn:not(.is-active):hover {
	color: var(--wp--preset--color--primary);
}
.rates-toggle-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rates-toggle-grid .wp-block-post {
	margin: 0;
}
@media (max-width: 900px) {
	.rates-toggle-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.rates-toggle-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* ─── CD Special Promo ─── */

/* Constrain to a centered card; its constrained layout otherwise only limits
   the children, leaving the purple background full-bleed. */
.cd-special-promo {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* ─── Testimonial Card ─── */

.testimonial-card {
	display: flex !important;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.testimonial-card .wp-block-post-title {
	display: none;
}

.testimonial-card-glyph {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 0.6;
	color: var(--wp--preset--color--gold);
	margin-bottom: -0.5rem;
}

.testimonial-card-quote {
	font-size: 1rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--wp--preset--color--dark);
	margin: 0;
	flex: 1;
}

.testimonial-card-attribution {
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.testimonial-card-author {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
	margin: 0 0 0.125rem;
}

.testimonial-card-role {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body-text);
	margin: 0;
}

.testimonial-card-tenure {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary);
	margin: 0.375rem 0 0;
}

/* ─── Staff Card ─── */

.staff-card {
	text-align: center;
	transition: box-shadow 0.2s, transform 0.2s;
}

.staff-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.staff-card .wp-block-post-featured-image {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 auto 1rem !important;
}

.staff-card .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0 !important;
}

/* Override WP's default block-flow gap so the name/title/email lines stack tightly */
.staff-card > *,
.staff-card.is-layout-flow > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.staff-card .wp-block-post-title {
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin: 0 !important;
}

.staff-card-title {
	font-size: 0.875rem;
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	line-height: 1.3 !important;
	margin: 0.15rem 0 0 !important;
}

.staff-card-email {
	font-size: 0.8125rem;
	line-height: 1.3 !important;
	margin: 0.4rem 0 0 !important;
}

.staff-card-email a {
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
	transition: color 0.15s;
}

.staff-card-email a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ─── Location Card ─── */

.location-card {
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.location-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.location-card .wp-block-post-title {
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	margin-bottom: 0.75rem !important;
}

.location-card-address {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--body-text);
	line-height: 1.6;
	margin-bottom: 0.75rem;
}

.location-card-phone,
.location-card-fax {
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
	margin-bottom: 0.25rem;
}

.location-card-phone a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.location-card-phone a:hover {
	text-decoration: underline;
}

.location-card-hours {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--body-text);
}

.location-card-hours strong {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--wp--preset--color--dark);
}

.location-hours-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.location-hours-list li {
	padding: 0.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 0.8125rem;
}

.location-hours-list li:last-child {
	border-bottom: none;
}

.location-card-note {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* ─── Board Card ─── */

.board-card {
	text-align: center;
	transition: box-shadow 0.2s, transform 0.2s;
}

.board-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.board-card .wp-block-post-featured-image {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 1rem;
}

.board-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.board-card .wp-block-post-title {
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	margin-bottom: 0.125rem !important;
}

.board-card-position {
	font-size: 0.875rem;
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* ─── Utility ─── */

.body-text {
	color: var(--wp--preset--color--body-text);
	font-size: 1rem;
}

.text-center {
	text-align: center;
}

.rounded-lg {
	border-radius: 16px;
	overflow: hidden;
}


/* ─── Disclaimer Text ─── */

.disclaimer-text {
	font-size: 0.6875rem;
	color: rgba(0, 0, 0, 0.45);
	line-height: 1.5;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 1.5rem;
	margin-top: 1.5rem;
}


/* ──────────────────────────────────────────────────────────────────
   Classic theme structure
   ────────────────────────────────────────────────────────────────────
   Rules for the semantic classes used by header.php and footer.php
   (the parts that don't go through do_blocks anymore).
   ────────────────────────────────────────────────────────────────── */

/* Announcement bar — dark purple strip above the header. */
.announcement-bar {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	padding: 0.5rem var(--wp--preset--spacing--40);
	text-align: center;
}

.announcement-bar p {
	max-width: 1200px;
	margin: 0 auto;
	font-size: 0.8125rem;
	color: inherit;
}

.announcement-bar a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

/* Header row — logo + mega menu on the left, member/banking links on the right. */
.site-header {
	background: var(--wp--preset--color--white);
	padding: 0.75rem var(--wp--preset--spacing--40);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
}

.site-header-left {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex: 1;
	min-width: 0;
}

.site-header-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	white-space: nowrap;
}

.site-logo img,
.site-logo .site-logo-img {
	height: 40px;
	width: auto;
	display: block;
}

/* Mobile: let the logo shrink so the Web Banking button never overlaps it. */
@media (max-width: 900px) {
	.site-header-inner {
		gap: 0.75rem;
	}

	.site-logo {
		flex-shrink: 1;
		min-width: 0;
	}

	.site-logo img,
	.site-logo .site-logo-img {
		height: auto;
		max-height: 36px;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.header-web-banking {
		padding: 0.5rem 0.9rem;
	}
}

/* Footer ───────────────────────────────────────────────── */

.site-footer {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: 0 var(--wp--preset--spacing--40);
}

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

.site-footer a:hover {
	text-decoration: underline;
}

/* Top white CTA bar that bleeds full-width before the purple. */
.footer-cta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	background: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--40);
	margin: 0 calc(-1 * var(--wp--preset--spacing--40));
}

.footer-cta-bar .footer-logo {
	width: 160px;
	height: auto;
}

.footer-cta-right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.footer-cta-text {
	color: var(--wp--preset--color--primary);
	font-size: 0.9375rem;
	margin: 0;
}

.footer-cta-button {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
	padding: 0.7rem 1.75rem;
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.2s ease;
}

.footer-cta-button:hover {
	background: var(--wp--preset--color--primary-dark);
}

/* The four link columns. */
.footer-link-columns {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2rem;
	padding: var(--wp--preset--spacing--50) 0;
	max-width: 1200px;
	margin: 0 auto;
}

/* Products cell is double-width and holds two labeled sub-columns: Banking and
   Loans, each with its own heading. */
.footer-products {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}
@media (max-width: 781px) {
	.footer-products {
		grid-column: 1 / -1;
	}
}

.footer-link-column h4 {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin: 0 0 0.75rem;
}

.footer-link-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.875rem;
	line-height: 2;
}

.footer-link-column li {
	margin: 0;
}

@media (max-width: 781px) {
	.footer-link-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 480px) {
	.footer-link-columns {
		grid-template-columns: 1fr;
	}
}

/* Hairline separators between footer rows. */
.footer-separator {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: 0;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Long-form disclosure text — small, dim, on purple. */
.footer-disclosure {
	padding: var(--wp--preset--spacing--30) 0;
	max-width: 1200px;
	margin: 0 auto;
}

.footer-disclosure p {
	font-size: 0.6875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

/* Bottom row: "Federally insured by NCUA" + copyright. */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
	max-width: 1200px;
	margin: 0 auto;
}

.footer-bottom p {
	font-size: 0.75rem;
	color: var(--wp--preset--color--white);
	margin: 0;
}

/* Left side of the bottom row: NCUA + Equal Housing badges, insured text underneath. */
.footer-bottom-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.footer-badges {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.footer-badges img {
	height: 64px;
	width: auto;
	display: block;
}

/* Accessibility — visually-hidden helper for skip links. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	background-color: #fff;
	color: var(--wp--preset--color--primary);
	display: block;
	font-weight: 700;
	left: 6px;
	line-height: normal;
	padding: 1rem 1.5rem;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
	height: auto;
}


/* Post-template grid columns for shortcode-rendered query loops.
   The block-editor side normally generates per-instance inline CSS
   for grid-template-columns; for the static markup our shortcodes
   output, define the rule once per columns-N variant. */
.wp-block-post-template.is-layout-grid {
	display: grid;
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.wp-block-post-template.is-layout-grid.columns-1 { grid-template-columns: 1fr; }
.wp-block-post-template.is-layout-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-block-post-template.is-layout-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-post-template.is-layout-grid.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 781px) {
	.wp-block-post-template.is-layout-grid.columns-3,
	.wp-block-post-template.is-layout-grid.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ─── Latest-news card alignment ───
   These cards wrap the featured image + text in a single <a class="news-card">,
   so the generic .is-style-card rules (which target direct children of
   .wp-block-post) don't pin the image height or stretch the card. Define the
   layout explicitly: a full-height flex card, a flush fixed-ratio image on top,
   and a content area that fills the remaining space — so every card in the row
   lines up regardless of image dimensions or copy length. */
.latest-news.wp-block-query.is-style-card .wp-block-post > .news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	margin: 0;
}
.latest-news .news-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 10;
	margin: 0;
	flex: 0 0 auto;
	overflow: hidden;
}
.latest-news .news-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.latest-news .news-card > div:last-child {
	flex: 1 1 auto;
}

/* ─── Image-split CTA equal height ───
   The left photo is a cover block; stretch it to fill the (stretch-aligned)
   column so the image panel matches the height of the color panel beside it. */
.image-split-cta .wp-block-columns > .wp-block-column:first-child {
	display: flex;
}
.image-split-cta .wp-block-columns > .wp-block-column:first-child > .wp-block-cover {
	flex: 1;
	width: 100%;
}

/* ─── Rate callout box ───
   A centered, bordered rate highlight (e.g. "3.00% APR") used on product pages
   that quote a single headline rate instead of a rates slider. */
.rate-cta {
	text-align: center;
}

/* ─── Home hero (full-width photo banner with right-hand card) ───
   Mirrors the product-hero banner treatment (rounded bottom, drop shadow); the
   cover supplies the image, min-height and vertical centering, the white card
   floats to the right. */
.home-hero {
	box-shadow: var(--shadow-md);
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Lift the white text card off the photo */
.home-hero .wp-block-column .has-white-background-color {
	box-shadow: var(--shadow-lg);
}

/* Mobile: stack like the product hero — text card on top, photo as a fixed
   stripe at the bottom (instead of the card floating over the full photo). */
@media (max-width: 781px) {
	.home-hero.wp-block-cover {
		flex-direction: column;
		min-height: auto;
		padding: 0;
	}

	/* Content band first */
	.home-hero .wp-block-cover__inner-container {
		order: 1;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	/* Drop the empty spacer column */
	.home-hero .wp-block-column:first-child {
		display: none;
	}

	/* Card spans the band full width */
	.home-hero .wp-block-column .has-white-background-color {
		box-shadow: none;
	}

	/* Photo becomes a static stripe below the content */
	.home-hero .wp-block-cover__image-background {
		order: 2;
		position: relative !important;
		height: 240px;
		width: 100%;
		border-radius: 0 0 28px 28px;
	}
}

/* ─── Insured badges ([aofcu_insured_badges]) ───
   NCUA + Equal Housing badges for use inside page content (e.g. a loan CTA).
   The source logos are white (for the dark footer), so recolor them dark grey
   for light backgrounds. When dropped in an apply-cta card, pin them to the
   bottom so they line up with the foot of the taller panel beside it. */
.insured-badges {
	margin-top: 1.5rem;
}
.insured-badges-logos {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.insured-badges-logos img {
	height: 80px;
	width: auto;
	filter: brightness(0) invert(0.2); /* white -> ~#333 dark grey */
}
.insured-badges-text {
	margin: 0.6rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
}
.apply-cta .wp-block-column:has(.insured-badges) {
	display: flex;
	flex-direction: column;
}
.apply-cta .insured-badges {
	margin-top: auto;
}

/* ─── Single Post (editorial layout) ───
   Designed reading view for blog posts (single.php). A tinted header band
   carries the category pill, title and byline; the featured image bleeds
   slightly wider than the text column; body copy sits on a comfortable
   reading measure with branded typographic styling. */

.single-wrap {
	--single-measure: 44rem;
	max-width: 52rem;
	margin: 0 auto;
	padding: 0 1.5rem 5rem;
}

.single-header {
	max-width: var(--single-measure);
	margin: 0 auto;
	padding: 3.5rem 0 2rem;
	text-align: center;
}

.single-eyebrow {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-light);
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.single-eyebrow:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.single-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--dark);
	margin: 1.25rem 0 1.5rem;
}

.single-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.9rem;
	color: var(--wp--preset--color--body-text);
}

.single-thumbnail {
	margin: 0 0 3rem;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.single-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

.single-thumbnail figcaption {
	font-family: 'Inter', sans-serif;
	font-size: 0.8rem;
	color: var(--wp--preset--color--body-text);
	text-align: center;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--light-gray);
}

/* Body copy — constrained reading measure, branded type scale. */
.single-content {
	max-width: var(--single-measure);
	margin: 0 auto;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--wp--preset--color--body-text);
}

.single-content > * {
	margin-block: 1.5rem;
}

.single-content > :first-child {
	margin-top: 0;
}

.single-content p:first-of-type {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--wp--preset--color--dark);
}

.single-content h2,
.single-content h3 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--dark);
	margin-top: 2.75rem;
	margin-bottom: 0.75rem;
}

.single-content h2 {
	font-size: 1.7rem;
	line-height: 1.2;
}

.single-content h3 {
	font-size: 1.3rem;
	line-height: 1.25;
}

.single-content a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.08em;
	transition: color 0.18s ease;
}

.single-content a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--primary-dark);
}

.single-content strong {
	color: var(--wp--preset--color--dark);
	font-weight: 700;
}

.single-content ul,
.single-content ol {
	padding-left: 1.4rem;
}

.single-content li {
	margin-block: 0.5rem;
}

.single-content img,
.single-content .wp-block-image {
	border-radius: 14px;
}

.single-content .wp-block-image img {
	border-radius: 14px;
}

.single-content blockquote {
	margin: 2rem 0;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--primary);
	font-size: 1.3rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--wp--preset--color--dark);
}

/* Footer — categories the post is filed under. */
.single-footer {
	max-width: var(--single-measure);
	margin: 3.5rem auto 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.single-footer-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--body-text);
}

.single-footer-tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.single-footer-tag {
	font-family: 'Inter', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-light);
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.single-footer-tag:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

@media (max-width: 600px) {
	.single-wrap {
		padding: 0 1.1rem 3.5rem;
	}
	.single-header {
		padding: 2.25rem 0 1.5rem;
	}
	.single-thumbnail {
		margin-bottom: 2rem;
		border-radius: 14px;
	}
	.single-content {
		font-size: 1.0625rem;
	}
	.single-content p:first-of-type {
		font-size: 1.15rem;
	}
}

/* === External-link warning dialog (assets/js/exit-warning.js) ============== */
.exit-warning {
	max-width: 540px;
	width: calc(100% - 2rem);
	padding: 0;
	border: none;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	color: #1a1a1a;
	background: #fff;
}
.exit-warning::backdrop {
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
}
.exit-warning-inner {
	padding: 2rem 2.25rem 2.25rem;
}
.exit-warning-inner h2 {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
}
.exit-warning-inner p {
	margin: 0 0 1.75rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #444;
}
.exit-warning-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}
.exit-warning-actions .exit-warning-cancel,
.exit-warning-actions .exit-warning-continue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.5rem;
	border-radius: 50px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.exit-warning-actions .exit-warning-cancel {
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #334155;
}
.exit-warning-actions .exit-warning-cancel:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
}
.exit-warning-actions .exit-warning-continue {
	border: 1px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.exit-warning-actions .exit-warning-continue:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
}

@media (max-width: 600px) {
	.exit-warning-inner {
		padding: 1.5rem 1.5rem 1.75rem;
	}
	.exit-warning-actions .exit-warning-cancel,
	.exit-warning-actions .exit-warning-continue {
		flex: 1 1 auto;
	}
}