/* ==========================================================================
   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;

	--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; }
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); }

.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; }
	.call-btn { 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) ---------- */
.page-banner {
	position: relative;
	background: linear-gradient(160deg, var(--color-maroon-dark), var(--color-charcoal));
	color: var(--color-white);
	padding: 108px 0 68px;
	text-align: center;
	overflow: hidden;
}
.page-banner--has-image {
	background-size: cover;
	background-position: center;
}
.page-banner--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Matches the homepage hero's overlay treatment — lighter than a flat
	   scrim so the photo still reads, with text-shadow (below) carrying
	   the legibility instead. */
	background: linear-gradient(180deg, rgba(10, 9, 6, 0.5) 0%, rgba(10, 9, 6, 0.18) 40%, rgba(10, 9, 6, 0.62) 100%);
}
.page-banner--has-image .container { position: relative; }
.page-banner .eyebrow { color: var(--color-gold-light); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); }
.page-banner h1 {
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 46px);
	letter-spacing: -0.01em;
	margin-bottom: 18px;
	text-shadow: 0 3px 18px rgba(0, 0, 0, 0.35);
}
.page-banner__actions { margin-top: 6px; }
.page-banner .btn-primary { 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 ---------- */
/* Full-width banner shown above the footer on every page (editable at
   Customize > Pre-Footer CTA Banner). */
.footer-cta { background: var(--color-black); }
.footer-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 80px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-cta__heading {
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	max-width: 620px;
	margin-bottom: 0;
}
.footer-cta__side { flex: none; max-width: 380px; }
.footer-cta__side p { color: rgba(250, 247, 240, 0.75); font-size: 15px; margin-bottom: 20px; }
.footer-cta__side .btn { border-radius: 999px; padding: 16px 30px; }
@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 ---------- */
.site-footer {
	background: var(--color-black);
	color: rgba(250, 247, 240, 0.72);
	padding-top: 64px;
	font-size: 14px;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 0.85fr 0.85fr 0.85fr;
	gap: 40px;
}
@media (max-width: 900px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 600px) {
	.site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer h4 {
	color: var(--color-gold-light);
	font-size: 13px;
	letter-spacing: 0.06em;
	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.06); }
.site-footer__legal {
	margin-top: 32px;
	padding: 28px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 12.5px;
	line-height: 1.7;
	color: rgba(250, 247, 240, 0.5);
}

.site-footer__brand .logo img,
.site-footer__brand .custom-logo { max-height: 60px; margin-bottom: 20px; }
.site-footer__brand .list-social { margin-bottom: 20px; }
.site-footer__desc { font-size: 14px; line-height: 1.7; margin-bottom: 20px; max-width: 34ch; }

.footer-newsletter { margin-bottom: 24px; max-width: 360px; }
.footer-newsletter__form { display: flex; gap: 0; }
.footer-newsletter__form .form-control {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--color-white);
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.footer-newsletter__form .form-control::placeholder { color: rgba(250, 247, 240, 0.45); }
.footer-newsletter__form .btn {
	flex: none;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding-inline: 20px;
}

.footer-contact { margin-bottom: 20px; }
.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 14px;
}
.footer-contact svg { width: 17px; height: 17px; fill: var(--color-white); flex: none; margin-top: 2px; }
.footer-contact a { color: inherit; }
.footer-contact a:hover { color: var(--color-gold-light); }

.footer-menu li { margin-bottom: 10px; }
.footer-menu a { color: var(--color-white); font-size: 14px; }
.footer-menu a:hover { color: var(--color-gold-light); }
.footer-menu ul.children { padding-left: 16px; margin-top: 10px; }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 20px 0;
	font-size: 13px;
	color: rgba(250, 247, 240, 0.55);
}
.site-footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.copy { color: var(--color-gold-light); }

/* ---------- 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; }