/* ==========================================================================
   Nexcified BRA Theme — Breast Reduction Atlanta stylesheet
   Modern, clean/clinical redesign. Brand colors refreshed, no framework
   dependency (no Bootstrap). Mobile-first, CSS custom properties.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp,
strike, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol { list-style: decimal; padding: 0 0 0 20px; margin: 0 0 15px; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; background: none; cursor: pointer; }

/* ---------- Design tokens ---------- */
:root {
	--color-ink: #18160f;
	--color-body: #55503f;
	--color-muted: #8a8371;
	--color-maroon: #9c2138;
	--color-maroon-dark: #7a1a2c;
	--color-gold: #ab8a4c;
	--color-gold-light: #ddc98f;
	--color-charcoal: #18160f;
	--color-charcoal-soft: #262218;
	--color-black: #000000;
	--color-cream: #f7f5ef;
	--color-cream-deep: #efe9d8;
	--color-white: #ffffff;
	--color-border: #e8e2d2;

	/* Footer-only palette + type, matched exactly to the approved footer
	   design (artifact). Scoped to .site-footer/.footer-cta selectors only —
	   the header and hero keep --color-maroon/--font-body/--font-heading
	   above untouched. Overridable per-site from Customize > Footer. */
	--color-footer-bg: #2C2231;
	--color-footer-text: #D9CFDC;
	--color-footer-muted: #B7A9BB;
	--color-footer-border: #4A3E50;
	--color-footer-accent: #96394A;
	--color-footer-accent-dark: #6F2433;
	--font-footer-display: 'Newsreader', Georgia, serif;
	--font-footer-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-heading: 'Questrial', var(--font-body);

	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 14px;

	--shadow-sm: 0 1px 2px rgba(24, 22, 15, 0.06), 0 1px 1px rgba(24, 22, 15, 0.04);
	--shadow-md: 0 8px 24px rgba(24, 22, 15, 0.07);
	--shadow-lg: 0 20px 45px rgba(24, 22, 15, 0.13);

	--container-width: 1360px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Elementor sometimes scrolls elements into view programmatically (e.g.
   navigating to a selected element); a smoothed/animated scroll can race
   against that instead of landing instantly, so it's turned off specifically
   inside the editor's own preview iframe (Elementor adds this class to
   <body>; :has() falls back harmlessly to no-op on browsers that lack it,
   leaving the body-level override below to still cover it). */
html:has(body.elementor-editor-active) { scroll-behavior: auto; }
body.elementor-editor-active { scroll-behavior: auto; }
body {
	font-family: var(--font-body);
	color: var(--color-body);
	background: var(--color-white);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-maroon); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease; }
a:hover, a:focus { color: var(--color-maroon-dark); }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-ink); font-weight: 400; line-height: 1.2; margin: 0 0 18px; }
h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.01em; }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 21px; color: var(--color-maroon); }
h4, h5, h6 { font-size: 17px; }
p { margin: 0 0 18px; }

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 20px;
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 16px 30px;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-block { display: flex; width: 100%; }
.btn-primary {
	background: var(--color-maroon);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus { background: var(--color-maroon-dark); color: var(--color-white); }
.btn-light {
	background: var(--color-white);
	color: var(--color-maroon);
}
.btn-light:hover { background: var(--color-cream); color: var(--color-maroon-dark); }
.btn-outline {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.55);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-white); border-color: var(--color-white); }
.btn-outline-dark {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-ink);
}
.btn-outline-dark:hover { background: var(--color-ink); color: var(--color-white); }

.list-social { display: flex; align-items: center; gap: 8px; margin: 0; }
.list-social li { margin: 0; }
.list-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
}
.list-social a:hover { background: var(--color-gold); color: var(--color-charcoal); }
.list-social svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- Header / nav ---------- */
.site-header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	/* Must stay above .nav-backdrop (z-index 150): the sliding mobile
	   panel (.main-nav) is nested inside this element, and CSS stacking
	   compares ancestors first — if this were lower than the backdrop,
	   the panel would render behind/tinted by it regardless of its own
	   higher z-index. */
	z-index: 300;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	padding: 24px clamp(20px, 4vw, 56px);
}
.logo, .custom-logo-link { display: inline-flex; align-items: center; flex: none; }
.logo img, .custom-logo { max-height: 88px; width: auto; }
@media (max-width: 600px) {
	.logo img, .custom-logo { max-height: 60px; }
}

/* Text logo — shown until a real logo image is uploaded (Customize > Site
   Identity, or the per-context logo fields in Customize > Header Logos). */
.logo--text {
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--color-ink);
}
@media (max-width: 600px) { .logo--text { font-size: 20px; } }
.site-footer .logo--text { color: var(--color-white); }

/* The homepage header is now always a solid white pill (see
   .site-header--transparent below), so it always shows the "sticky" logo
   variant (meant for a white background) and never the "main" one (meant
   for a transparent/dark overlay). Selectors are scoped under .site-header
   so they reliably out-specificity the base ".logo { display: inline-flex }"
   rule regardless of source order. */
.site-header .logo--sticky { display: none; }
.site-header--transparent .logo--main { display: none; }
.site-header--transparent .logo--sticky { display: inline-flex; }

.header-cta { flex: none; white-space: nowrap; border-radius: 999px; }

.call-btn {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--color-maroon);
	color: var(--color-white);
	padding: 10px 16px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 14px;
}
.call-btn:hover { background: var(--color-maroon-dark); color: var(--color-white); }
.call-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Rounded, floating header overlaying the homepage hero photo — a solid
   white pill inset slightly from the viewport edges (wide, not narrow,
   and not full-bleed). .is-scrolled just switches it from `absolute`
   (parked over the hero image) to `fixed` (follows scroll) once the user
   scrolls past the hero, so it keeps floating instead of scrolling away
   with the rest of the page. .header-anchor is a zero-height positioning
   context so the absolutely placed header sits right at the top of the
   page without needing its own height. */
.site-header--transparent {
	background: var(--color-white);
	border-bottom: none;
	border-radius: 999px;
	box-shadow: var(--shadow-lg);
}
.site-header--transparent .site-header__inner { padding: 16px clamp(20px, 3vw, 40px); }
.site-header--transparent .logo img,
.site-header--transparent .custom-logo { max-height: 56px; }
.site-header--transparent .logo--text { font-size: 23px; }
@media (min-width: 901px) {
	.header-anchor { position: relative; height: 0; }
	.site-header--transparent {
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 48px);
		z-index: 100;
	}
	.site-header--transparent.is-scrolled { position: fixed; top: 14px; }
}
@media (max-width: 900px) {
	.site-header--transparent {
		position: sticky;
		top: 12px;
		left: 0;
		right: 0;
		width: calc(100% - 24px);
		margin-inline: auto;
		border-radius: var(--radius-lg);
	}
}

.nav-close { display: none; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}
.nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav__list {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.main-nav__list > li { position: relative; display: flex; align-items: stretch; }
.main-nav__list > li > a {
	display: flex;
	align-items: center;
	padding: 12px 15px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink);
	border-radius: var(--radius-sm);
	white-space: nowrap;
}
.main-nav__list > li > a:hover,
.main-nav__list > li > a:focus {
	background: var(--color-cream);
	color: var(--color-maroon);
}
.main-nav__list > li.current_page_item > a,
.main-nav__list > li.current-menu-item > a,
.main-nav__list > li.current-menu-ancestor > a { color: var(--color-maroon); }

ul.children {
	list-style: none;
	margin: 0;
}
ul.children li { position: relative; }

/* Desktop dropdown */
@media (min-width: 901px) {
	ul.children {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);
		padding: 8px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
		z-index: 20;
	}
	.main-nav__list > li:hover > ul.children,
	.main-nav__list > li:focus-within > ul.children,
	ul.children li:hover > ul.children,
	ul.children li:focus-within > ul.children {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	/* Nested (3rd-level+) submenus flyout to the right of their parent
	   item instead of stacking below it, so they stay reachable/visible. */
	ul.children ul.children {
		top: -9px;
		left: 100%;
		margin-left: 6px;
	}
	ul.children li a {
		display: block;
		padding: 10px 12px;
		border-radius: var(--radius-sm);
		font-size: 14px;
		font-weight: 500;
		color: var(--color-body);
	}
	ul.children li a:hover { background: var(--color-cream); color: var(--color-maroon); }
	.submenu-toggle { display: none; }

	/* Forward/down indicators for items that have their own submenu. */
	.main-nav__list > li:has(> ul.children) > a {
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}
	.main-nav__list > li:has(> ul.children) > a::after {
		content: '';
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		margin-top: -3px;
		flex: none;
	}
	ul.children li:has(> ul.children) > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	ul.children li:has(> ul.children) > a::after {
		content: '';
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(-45deg);
		flex: none;
	}
}

/* Mobile nav */
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.header-cta { display: none; }
	.main-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 85vw);
		background: var(--color-white);
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		padding: 72px 20px 24px;
		z-index: 200;
	}
	.main-nav.is-open { transform: translateX(0); }
	.nav-close {
		position: absolute;
		top: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-sm);
		border: 1px solid var(--color-border);
		color: var(--color-ink);
	}
	.nav-close svg { width: 18px; height: 18px; }
	.nav-close:hover { background: var(--color-cream); }
	.main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav__list > li { flex-direction: column; border-bottom: 1px solid var(--color-border); }
	.main-nav__list > li > a { padding: 14px 6px; flex: 1; }
	ul.children {
		display: none;
		padding: 0 0 10px 14px;
	}
	li.submenu-open > ul.children { display: block; }
	ul.children li a {
		display: block;
		padding: 10px 6px;
		font-size: 14px;
		color: var(--color-body);
	}
	ul.children ul.children { padding-left: 14px; }
	.submenu-toggle {
		position: absolute;
		right: 0;
		top: 4px;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.submenu-toggle svg { width: 12px; height: 12px; fill: var(--color-ink); transition: transform 0.2s ease; }
	li.submenu-open .submenu-toggle svg { transform: rotate(180deg); }
	.nav-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(20, 17, 12, 0.45);
		z-index: 150;
	}
	.nav-backdrop.is-open { display: block; }
}

/* ---------- Hero (homepage) ---------- */
.hero {
	position: relative;
	color: var(--color-white);
	overflow: hidden;
	/* Shown whenever no hero photo is set (Customize > Homepage Hero >
	   Background image, or the page's own "Page Header / Hero" box) — a
	   branded fallback instead of leaving the section blank. */
	background: linear-gradient(160deg, var(--color-maroon-dark), var(--color-charcoal));
}
.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Lighter than a full dark scrim so the photo stays vibrant, like the
	   reference hero — legibility instead comes from the text-shadow on
	   .hero h1/.hero p below. */
	background: linear-gradient(180deg, rgba(10, 9, 6, 0.45) 0%, rgba(10, 9, 6, 0.12) 32%, rgba(10, 9, 6, 0.58) 100%);
}
.hero__inner {
	position: relative;
	/* 100vh includes the mobile browser's address bar, so it keeps
	   recalculating as that bar shows/hides on scroll — resizing the hero
	   underneath the Ken Burns zoom animation and making it look like it's
	   jumping/resetting instead of smoothly looping. 100dvh tracks the
	   actual visible viewport instead; the 100vh above it is a fallback
	   for browsers that don't support dvh (an unsupported value is
	   ignored, so the vh line still applies there). */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Shifting weight from top to bottom padding nudges the centered
	   content up a bit (see the mobile media query below for the math)
	   while keeping enough top clearance for the floating transparent
	   header, which overlaps the hero on desktop. */
	padding: 100px 0 150px;
}
@media (max-width: 900px) {
	/* On mobile the header sits in normal flow above the hero (not
	   floating on top of it like on desktop), so the hero no longer
	   needs extra top padding to clear it — removing it lets the
	   content center properly in the viewport instead of sitting low. */
	/* With justify-content: center on a column flex, shifting weight from
	   top padding to bottom padding nudges the centered content upward
	   without breaking the centering. */
	.hero__inner { padding: 16px 0 72px; }
}
@media (min-width: 901px) and (max-width: 1024px) {
	/* Landscape tablets still use the floating desktop-style header (it
	   overlaps the hero here), so some top clearance is still needed —
	   just less than the desktop value, since tablet viewports are
	   shorter and the full 160px pushes content off-center. */
	.hero__inner { padding: 120px 0 70px; }
}
.hero .eyebrow { color: var(--color-gold-light); margin-bottom: 34px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); }
.hero h1 {
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: clamp(42px, 7vw, 80px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	max-width: 900px;
	margin-bottom: 24px;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.hero p {
	font-size: 19px;
	color: var(--color-cream-deep);
	max-width: 560px;
	margin-inline: auto;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.hero__actions { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero__actions .btn { border-radius: 999px; padding: 18px 36px; }
/* The hero's primary CTA renders as a solid white pill (not the site-wide
   maroon .btn-primary) to match the reference design and read clearly
   against the photo; .btn-primary stays maroon everywhere else. */
.hero__actions .btn-primary { background: var(--color-white); color: var(--color-ink); }
.hero__actions .btn-primary:hover, .hero__actions .btn-primary:focus { background: var(--color-cream); color: var(--color-ink); }

/* ---------- Page banner (inner pages) ---------- */
/* Flat, image-free, centered banner — eyebrow, heading, subtext, optional
   "medically reviewed by" badge, up to two buttons. Editable per page via
   the "Page Header / Hero" meta box (see nexcified_bra_page_banner()). */
.page-banner {
	background: var(--color-cream);
	padding: 64px 0 56px;
	text-align: center;
}
.page-banner__inner {
	max-width: 760px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.page-banner__breadcrumbs { margin-bottom: 18px; }
.page-banner__breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--color-muted);
}
.page-banner__breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--color-border); }
.page-banner__breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.page-banner__breadcrumbs a:hover { color: var(--color-maroon); }
.page-banner__breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }
.page-banner .eyebrow { color: var(--color-maroon); }
.page-banner h1 {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(30px, 4.2vw, 46px);
	letter-spacing: -0.01em;
	margin-bottom: 14px;
}
.page-banner__subtext {
	color: var(--color-body);
	font-size: 17px;
	line-height: 1.6;
	max-width: 62ch;
	margin-bottom: 20px;
}
.page-banner__reviewer {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 10px 20px 10px 14px;
	margin-bottom: 24px;
	font-size: 13px;
	color: var(--color-body);
}
.page-banner__reviewer svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--color-muted); stroke-width: 1.6; }
.page-banner__reviewer strong { color: var(--color-ink); }
.page-banner__reviewer-meta { color: var(--color-muted); }
.page-banner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.page-banner .btn-primary { border-radius: 999px; }
.page-banner .btn-outline-dark { border-radius: 999px; }

/* ---------- Content layout ---------- */
.content-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
	gap: 60px;
	padding-block: 80px;
	align-items: start;
}
@media (max-width: 900px) {
	.content-layout { grid-template-columns: 1fr; gap: 36px; padding-block: 48px; }
}

.content-main { min-width: 0; font-size: 16px; color: var(--color-body); }
.content-main h1 { color: var(--color-maroon); }
.content-main h2 { font-size: 22px; }
.content-main h3, .content-main h4, .content-main h5, .content-main h6 { font-size: 17px; }
.content-main p { margin-bottom: 18px; }
.content-main ul { list-style: none; margin: 0 0 20px; padding: 0; }
.content-main ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.content-main ul li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-gold);
}
.content-main ol { padding-left: 22px; margin-bottom: 20px; }
.content-main a { color: var(--color-maroon); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.content-main img { border-radius: var(--radius-md); margin: 10px 0 24px; }

/* ---------- Sidebar / cards ---------- */
.content-aside { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 901px) {
	.content-aside {
		position: sticky;
		top: 152px;
		max-height: calc(100vh - 172px);
		overflow-y: auto;
	}
}
/* FAQ accordion (plain HTML5 <details>, no JS required). */
.nx-faq {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: 12px;
	padding: 16px 20px;
}
.nx-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--color-ink);
	list-style: none;
}
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::before { content: '+'; display: inline-block; width: 20px; color: var(--color-maroon); font-weight: 700; }
.nx-faq[open] summary::before { content: '\2212'; }
.nx-faq > div { margin-top: 12px; color: var(--color-body); }

/* Reusable N-up card grid, used in page content for technique/procedure/
   quick-link listings (see inc/default-content.php). */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 24px 0;
}
.cards-grid .card { padding: 24px; }
.cards-grid .card h3 { color: var(--color-maroon); font-size: 18px; margin-bottom: 8px; }
.cards-grid .card p { font-size: 14px; margin-bottom: 12px; }
.cards-grid .card a.card-link { font-weight: 700; font-size: 14px; }
@media (max-width: 900px) {
	.cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.cards-grid { grid-template-columns: 1fr; }
}

.card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 32px 28px;
	position: relative;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card h2 {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-family: var(--font-body);
	color: var(--color-maroon);
	margin-bottom: 16px;
}
.card .style1 {
	color: var(--color-gold);
	font-style: normal;
	font-size: 15px;
	margin-bottom: 10px;
	display: block;
}
.card .media { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.card .media-body { flex: 1; font-size: 14px; }
.card .media-right img { width: 90px; border-radius: var(--radius-sm); }
.card > a { font-weight: 700; font-size: 14px; }

/* ---------- Forms (theme + Contact Form 7) ---------- */
.form-contact { margin-top: 6px; }
.form-contact .form-group,
.wpcf7-form p { margin-bottom: 12px; }
.fname, .lname { width: 100%; }
.clear { clear: both; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], textarea, select,
.form-control {
	width: 100%;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink);
	background: var(--color-cream);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 11px 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea, .form-contact textarea.form-control { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(171, 138, 76, 0.2);
}
::placeholder { color: var(--color-muted); }

.required { color: var(--color-muted); font-style: italic; font-size: 13px; display: inline-block; margin-top: 6px; }

.form-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.nx-contact-form__notice {
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
}
.nx-contact-form__notice--success { background: #eef7ee; color: #1e5e28; border: 1px solid #bfe3c2; }
.nx-contact-form__notice--error { background: #fbeaea; color: #7a1f1f; border: 1px solid #f0c4c4; }

.wpcf7-submit, input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: var(--radius-md);
	border: none;
	background: var(--color-maroon);
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.wpcf7-submit:hover, input[type="submit"]:hover { background: var(--color-maroon-dark); }
.ajax-loader, .wpcf7-validation-errors, .wpcf7-not-valid-tip { display: none !important; }
.wpcf7-not-valid { border-color: var(--color-maroon) !important; }

/* ---------- Blog list (index/loop) ---------- */
.blog_item { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--color-border); }
.blog_item:last-child { border-bottom: 0; }
.blog_item img.alignleft { float: left; margin: 4px 18px 10px 0; border-radius: var(--radius-md); max-width: 160px; }
.blog_item h2 { font-size: 21px; margin-bottom: 6px; }
.postTime { display: block; font-size: 13px; color: var(--color-muted); margin-bottom: 10px; }
.center { text-align: center; }

/* ---------- Pre-footer CTA banner + footer, combined ---------- */
/* .site-footer-wrap paints ONE continuous dark-plum background behind both
   the CTA banner and the footer below it, so there's no seam between them
   regardless of how each child's own background resolves — this is the
   single source of truth for the color; Customize > Footer's color pickers
   feed --color-footer-bg, which this reads. */
.site-footer-wrap { background: var(--color-footer-bg); }
.footer-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 80px 0;
}
.footer-cta__heading {
	color: var(--color-white);
	font-family: var(--font-footer-display);
	font-weight: 500;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	max-width: 620px;
	margin-bottom: 0;
}
.footer-cta__side { flex: none; max-width: 380px; }
.footer-cta__side p { font-family: var(--font-footer-body); color: var(--color-footer-text); font-size: 15px; margin-bottom: 20px; }
.footer-cta__side .btn { border-radius: 2px; padding: 16px 26px; background: var(--color-footer-accent); border-color: var(--color-footer-accent); color: var(--color-white); }
.footer-cta__side .btn:hover { background: var(--color-footer-accent-dark); border-color: var(--color-footer-accent-dark); }
@media (max-width: 900px) {
	.footer-cta__inner { flex-direction: column; align-items: flex-start; padding: 56px 0; gap: 24px; }
	.footer-cta__side { max-width: none; }
}

/* ---------- Footer ---------- */
/* Exact match to the approved footer design: warm plum ground, Newsreader
   serif + Figtree sans, brand column + 4 topical link columns, bottom bar
   with the cross-sell/disclaimer line and copyright. Colors/fonts are the
   --color-footer-*/--font-footer-* tokens above (:root) — override those,
   or the Customize > Footer color settings that feed them, to retheme
   without touching this layout. */
.site-footer {
	color: var(--color-footer-text);
	font-family: var(--font-footer-body);
	padding-top: 72px;
	font-size: 14px;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
}
@media (max-width: 1100px) {
	.site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 700px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 480px) {
	.site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}
.site-footer h4 {
	color: var(--color-footer-muted);
	font-family: var(--font-footer-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.site-footer address { font-style: normal; margin-bottom: 16px; }
.site-footer .list-social a { background: rgba(255, 255, 255, 0.07); color: var(--color-footer-text); }
.site-footer .list-social a:hover { background: var(--color-footer-accent); color: var(--color-white); }

.site-footer__brand { grid-column: span 1; }
.site-footer__brand .logo img,
.site-footer__brand .custom-logo { max-height: 84px; margin-bottom: 20px; }
.site-footer__brand .logo--text {
	color: var(--color-white);
	font-family: var(--font-footer-display);
	font-size: 34px;
	font-weight: 500;
}
.site-footer__brand .list-social { margin-bottom: 22px; }
.site-footer__desc { font-size: 15px; line-height: 1.65; margin-bottom: 20px; max-width: 34ch; color: var(--color-footer-text); }

.footer-newsletter { margin-bottom: 22px; max-width: 360px; }
.footer-newsletter h4 { margin-bottom: 10px; }
.footer-newsletter__form { display: flex; gap: 8px; }
.footer-newsletter__form .form-control {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--color-footer-border);
	color: var(--color-white);
	border-radius: 2px;
	padding: 12px 16px;
	font-family: var(--font-footer-body);
}
.footer-newsletter__form .form-control::placeholder { color: var(--color-footer-muted); }
.footer-newsletter__form .btn {
	flex: none;
	border-radius: 2px;
	padding-inline: 20px;
	background: var(--color-footer-accent);
	border-color: var(--color-footer-accent);
}
.footer-newsletter__form .btn:hover { background: var(--color-footer-accent-dark); border-color: var(--color-footer-accent-dark); }

.footer-contact { margin-bottom: 8px; display: flex; flex-direction: column; gap: 10px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--color-footer-text); }
.footer-contact svg { width: 16px; height: 16px; fill: none; stroke: var(--color-footer-text); stroke-width: 1.6; flex: none; }
.footer-contact a { color: var(--color-footer-text); }
.footer-contact a:hover { color: var(--color-white); }

.footer-menu li { margin-bottom: 12px; }
.footer-menu a {
	color: var(--color-footer-text);
	font-size: 15px;
	display: inline-block;
	transition: color 0.15s ease;
}
.footer-menu a:hover { color: var(--color-white); }
.footer-menu ul.children { padding-left: 16px; margin-top: 10px; }

.site-footer__legal {
	grid-column: 1 / -1;
	margin-top: 8px;
	padding: 18px 20px;
	background: rgba(0, 0, 0, 0.14);
	border: 1px solid var(--color-footer-border);
	border-radius: var(--radius-sm);
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--color-footer-muted);
}
.site-footer__legal h4 { color: var(--color-footer-muted); margin-bottom: 8px; }
.site-footer__legal p:last-child { margin-bottom: 0; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-top: 28px;
	padding: 28px 0;
	border-top: 1px solid var(--color-footer-border);
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-footer-muted);
}
.site-footer__bottom .site-footer__crosssell { max-width: 760px; }
.site-footer__bottom .copy { flex: none; text-align: right; color: var(--color-footer-muted); }
.site-footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__bottom a:hover { color: var(--color-white); }
@media (max-width: 700px) {
	.site-footer__bottom { flex-direction: column; }
	.site-footer__bottom .copy { text-align: left; }
}

/* ---------- Misc legacy-template fallback (search/archive/etc.) ---------- */
#container { padding-block: 40px; }
#container .container { max-width: 820px; }
.page-title, .entry-title { color: var(--color-maroon); }
.embed-responsive { margin: 10px 0 30px; }