/* Beyond Affairs — styles_custom.css
   All visual CSS. Responsive overrides go in styles_responsive.css.
   Footer CSS goes in styles_footer.css.

   WORKING ASSUMPTION TOKENS — confirm with Anne before locking:
   - Colors: desaturated navy primary; current BA blue as accent (see CLAUDE.md §15)
   - Fonts: Cormorant Garamond (heading) + Montserrat (body) — matching annebercht.com
*/


/* ============================================================
   Scroll offset — compensate for sticky header on anchor nav
   (Articles page anchor links rely on this)
   ============================================================ */

html {
	scroll-padding-top: 96px; /* header height 80px + 16px breathing room */
}


/* ============================================================
   CSS Custom Properties — WORKING ASSUMPTIONS
   Replace all with confirmed tokens before launch
   ============================================================ */

:root {
	/* Primary — desaturated warmer navy */
	--color-primary:      #3E5C76;
	--color-primary-mid:  #4A6D8C;
	--color-primary-dark: #2D4459;

	/* Accent — muted mid-blue; confirmed for btn-primary */
	--color-accent:       #4C6FAF;
	--color-accent-dark:  #3A5A9A;

	/* CTA — terracotta; warm complement to navy for in-content action buttons */
	--color-cta:          #B5623A;
	--color-cta-dark:     #9A4F2D;

	/* Roadmap header button — mauve; kept distinct from in-content CTAs */
	--color-roadmap:      #bb6a95;
	--color-roadmap-dark: #a45a81;

	/* Backgrounds */
	--color-bg:           #FAFAF8;   /* warm near-white */
	--color-bg-alt:       #F2F0EC;   /* alternating section bg */
	--color-bg-dark:      #EDEDE8;   /* borders, subtle dividers */

	/* Text */
	--color-text:         #1C1C1E;
	--color-text-light:   #5C5C5E;
	--color-text-inv:     #FFFFFF;

	/* Typography */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body:    'Montserrat', Helvetica, Arial, Lucida, sans-serif;

	/* Spacing */
	--section-pad-v:  80px;
	--section-pad-sm: 48px;

	/* Header */
	--header-height: 80px;
}


/* ============================================================
   Base / Reset
   ============================================================ */

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

body {
	margin: 0;
	padding: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
}

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

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent-dark);
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.2;
	color: var(--color-primary-dark);
	margin-top: 0;
}

p {
	margin-top: 0;
}

.pad {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}


/* ============================================================
   Buttons
   ============================================================ */

.btn-primary,
.btn-ghost,
.btn-ghost-light,
.btn-roadmap {
	display: inline-block;
	padding: 12px 28px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

.btn-primary {
	background-color: var(--color-accent);
	color: #fff;
	border: 2px solid var(--color-accent);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.btn-primary:hover {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: #fff;
	text-decoration: none;
}

.btn-ghost {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.btn-ghost:hover {
	background-color: var(--color-primary);
	color: #fff;
	text-decoration: none;
}

.btn-ghost-light {
	background-color: transparent;
	color: #fff;
	border: 2px solid rgba(255,255,255,0.7);
}

.btn-ghost-light:hover {
	background-color: rgba(255,255,255,0.15);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

.btn-primary-inv {
	background-color: #fff;
	color: var(--color-primary-dark);
	border: 2px solid #fff;
}

.btn-primary-inv:hover {
	background-color: rgba(255,255,255,0.88);
	border-color: rgba(255,255,255,0.88);
	color: var(--color-primary-dark);
	text-decoration: none;
}

.btn-roadmap {
	background-color: var(--color-roadmap);
	color: #fff;
	border: 2px solid var(--color-roadmap);
}

.btn-roadmap:hover {
	background-color: var(--color-roadmap-dark);
	border-color: var(--color-roadmap-dark);
	color: #fff;
	text-decoration: none;
}


/* ============================================================
   Site Header
   ============================================================ */

.site-header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	background-color: #fff;
	z-index: 1000;
	display: flex;
	align-items: center;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.scrolled {
	box-shadow: 0 2px 16px rgba(0,0,0,0.08);
	border-bottom-color: var(--color-bg-dark);
}

.site-header .pad {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Logo */
#hdrLogo img {
	height: 52px;
	width: auto;
}

/* Right side: nav + CTAs + hamburger */
.hdrRight {
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Primary nav — fallback (no MMM) */
#navBar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2em;
}

#navBar ul li a {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

#navBar ul li a:hover {
	color: var(--color-accent);
	text-decoration: none;
}


/* ============================================================
   Max Mega Menu — desktop overrides
   MMM wraps the nav in #mega-menu-wrap-primary. These rules
   re-integrate it with the header flex row and match the
   original nav link typography.
   ============================================================ */

/* Make the wrap a flex participant so it sits centered in .hdrRight */
#mega-menu-wrap-primary {
	display: flex !important;
	align-items: center;
}

/* Hide MMM's toggle button and close button at desktop */
#mega-menu-wrap-primary .mega-menu-toggle,
#mega-menu-wrap-primary .mega-close {
	display: none !important;
}

/* Match original nav link typography — desktop only.
   On mobile the MMM flyout sets its own colour (white); scoping
   this to min-width: 1031px prevents the !important here from
   overriding the MMM theme-editor setting on mobile. */
@media (min-width: 1031px) {
	#mega-menu-primary > li > a.mega-menu-link {
		font-family: var(--font-body) !important;
		font-size: 0.875rem !important;
		font-weight: 600 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		color: var(--color-primary-dark) !important;
		text-decoration: none !important;
		transition: color 0.2s ease !important;
	}

	#mega-menu-primary > li > a.mega-menu-link:hover {
		color: var(--color-accent) !important;
		text-decoration: none !important;
	}
}

/* Hide mobile-only CTA items from the desktop nav bar */
#mega-menu-primary > li.mobile-nav-cta {
	display: none !important;
}

/* Header CTAs */
.hdrCTAs {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.hdrCTAs .btn-ghost,
.hdrCTAs .btn-primary,
.hdrCTAs .btn-roadmap {
	padding: 8px 20px;
	font-size: 0.8rem;
}

/* Hamburger is rendered and controlled by Max Mega Menu plugin. */


/* ============================================================
   Max Mega Menu — mobile CTA items
   Applied to nav items with classes mobile-nav-cta--roadmap
   and mobile-nav-cta--text (added via WP Admin → Menus).
   Only styled inside the MMM mobile panel.
   ============================================================ */

.mega-menu-wrap .mobile-nav-cta--roadmap > a,
.mega-menu-wrap .mobile-nav-cta--text > a {
	margin: 4px 16px;
	border-radius: 4px;
	text-align: center;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	display: block;
}

.mega-menu-wrap .mobile-nav-cta--roadmap > a {
	background-color: var(--color-roadmap);
	color: #fff !important;
	border: 2px solid var(--color-roadmap);
}

.mega-menu-wrap .mobile-nav-cta--roadmap > a:hover {
	background-color: var(--color-roadmap-dark);
	border-color: var(--color-roadmap-dark);
}

.mega-menu-wrap .mobile-nav-cta--text > a {
	background-color: var(--color-accent);
	color: #fff !important;
	border: 2px solid var(--color-accent);
}

.mega-menu-wrap .mobile-nav-cta--text > a:hover {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
}


/* ============================================================
   Hero — Home Page
   ============================================================ */

#hero {
	width: 100%;
	height: 72vh;
	min-height: 520px;
	background-image: url('assets/images/homeHero.jpg');
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	position: relative;
}

/* Left-side shade for text legibility; right side stays clear so subjects are always visible */
#hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(20, 30, 40, 0.74) 0%,
		rgba(20, 30, 40, 0.58) 32%,
		rgba(20, 30, 40, 0.18) 58%,
		rgba(20, 30, 40, 0.00) 72%
	);
	pointer-events: none;
}

.heroInner {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 0 6%;
}

.heroText {
	max-width: 560px;
}

.heroEyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.8);
	margin-bottom: 16px;
	text-shadow: 0 1px 6px rgba(10, 18, 26, 0.5);
}

.heroHeading {
	font-family: var(--font-heading);
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 600;
	line-height: 1.1;
	color: #fff;
	margin-bottom: 20px;
	text-shadow: 0 2px 12px rgba(10, 18, 26, 0.55);
}

.heroSub {
	font-family: var(--font-body);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.6;
	color: rgba(255,255,255,0.88);
	margin-bottom: 36px;
	max-width: 440px;
	text-shadow: 0 1px 6px rgba(10, 18, 26, 0.5);
}

.heroBtns {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}


/* ============================================================
   Page Banner (inner pages — title strip below header)
   ============================================================ */

.page-banner {
	padding: 56px 0 44px;
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-bg-dark);
}

.page-banner-title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	color: var(--color-primary-dark);
	margin: 0;
}


/* ============================================================
   Entry Content (inner pages)
   ============================================================ */

.entry-content {
	padding: 48px 0 72px;
}

.entry-content p {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--color-text);
	margin-bottom: 1.25em;
}

.entry-content h2 {
	font-size: 1.9rem;
	margin-top: 2em;
	margin-bottom: 0.6em;
}

.entry-content h3 {
	font-size: 1.35rem;
	margin-top: 1.6em;
	margin-bottom: 0.4em;
}

.entry-content a {
	color: var(--color-accent);
	text-decoration: underline;
}

/* Gutenberg block buttons — in-content CTAs use terracotta */
.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
	background-color: var(--color-cta) !important;
	color: #fff !important;
	border: 2px solid var(--color-cta) !important;
	border-radius: 4px !important;
	font-family: var(--font-body) !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	padding: 12px 28px !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover {
	background-color: var(--color-cta-dark) !important;
	border-color: var(--color-cta-dark) !important;
	color: #fff !important;
	text-decoration: none !important;
}


/* ============================================================
   What We Offer — page grid
   ============================================================ */

.wwo-intro {
	padding: 48px 0 8px;
}

.wwo-intro p {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--color-text);
	max-width: 780px;
}

.wwo-grid-section {
	padding: 48px 0 72px;
}

.wwo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.wwo-card {
	background: #fff;
	border: 1px solid var(--color-bg-dark);
	border-radius: 8px;
	padding: 32px 36px 28px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.wwo-card__eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 10px;
}

.wwo-card__title {
	font-family: var(--font-heading);
	font-size: 1.55rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	margin: 0 0 12px;
}

.wwo-card__desc {
	font-size: 0.93rem;
	line-height: 1.72;
	color: var(--color-text-light);
	margin: 0 0 24px;
	flex: 1;
}

.wwo-card__btn {
	align-self: flex-start;
	display: inline-block;
	background-color: var(--color-cta);
	color: #fff;
	border: 2px solid var(--color-cta);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 20px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wwo-card__btn:hover {
	background-color: var(--color-cta-dark);
	border-color: var(--color-cta-dark);
	color: #fff;
	text-decoration: none;
}

/* entry-content a wins on specificity — restore white text when button is a link */
a.wwo-card__btn,
a.wwo-card__btn:hover {
	color: #fff;
}


/* ============================================================
   Utility — Screen reader only
   ============================================================ */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}


/* ============================================================
   Optional component stubs — uncomment and adapt as needed
   ============================================================ */

/* ============================================================
   Testimonials Section — two-column layout (slider + video)
   ============================================================ */

#testimonials {
	padding: var(--section-pad-v) 0 48px;
	background-color: #F5ECF2;
	border-bottom: 4px solid var(--color-cta);
}

.testimonialsLayout {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 48px;
	align-items: start;
}

/* Grid children must have min-width: 0 or they expand to content width,
   causing Swiper to measure a huge container and set slides to ~33M px */
.testimonialsSlider,
.testimonialsVideo {
	min-width: 0;
}

/* YouTube embed — responsive 16:9 container */
.testimonialsVideo {
	display: flex;
	align-items: stretch;
}

.videoPlaceholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.videoPlaceholder iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}


/* ============================================================
   Testimonial Slider — TSS plugin overrides
   Scoped to #testimonials so we don't affect other shortcode
   instances elsewhere on the site.
   ============================================================ */

/* Strip plugin container chrome; give Swiper a measurable, bounded width */
#testimonials .rt-container-fluid,
#testimonials .tss-wrapper {
	padding: 0 !important;
	background: transparent !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

#testimonials .rt-row {
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

#testimonials .carousel-wrapper,
#testimonials .tss-carousel {
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

/* Each slide card — force column layout, override plugin's horizontal flex */
#testimonials .single-item-wrapper {
	display: flex !important;
	flex-direction: column !important;
	background: #fff;
	border-radius: 10px;
	padding: 40px 36px 32px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

/* Reset plugin's horizontal flex sizing; prevent floats */
#testimonials .item-content-wrapper.tss-right,
#testimonials .tss-meta-info.tss-left {
	flex: none !important;
	float: none !important;
	width: auto !important;
	text-align: left !important;
}

/* Quote block — appears first, grows to fill card height */
#testimonials .item-content-wrapper {
	order: 1;
	flex-grow: 1 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Hide plugin's fontello icon and speech-bubble arrow */
#testimonials .item-content-wrapper::before,
#testimonials .item-content-wrapper::after {
	display: none !important;
}

/* Quote text */
#testimonials .item-content,
#testimonials .item-content p {
	font-family: var(--font-heading) !important;
	font-size: 1.2rem !important;
	font-style: italic !important;
	font-weight: 400 !important;
	line-height: 1.78 !important;
	color: var(--color-text) !important;
	margin-bottom: 0 !important;
}

/* Decorative opening quote mark */
#testimonials .item-content::before {
	content: '\201C';
	font-family: var(--font-heading);
	font-size: 4.5rem;
	line-height: 0.45;
	color: var(--color-accent);
	display: block;
	margin-bottom: 20px;
	opacity: 0.3;
}

/* Author block — below quote */
#testimonials .tss-meta-info {
	order: 2;
	flex: none !important;
	margin-top: 28px;
	padding: 18px 0 0 !important;
	border-top: 1px solid var(--color-bg-dark);
	background: transparent !important;
}

/* Author name */
#testimonials .author-name,
#testimonials .author-name a {
	font-family: var(--font-body) !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: var(--color-primary) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin: 0 !important;
	display: block;
}

/* Author location / bio */
#testimonials .author-bio {
	font-family: var(--font-body) !important;
	font-size: 0.78rem !important;
	font-weight: 400 !important;
	color: var(--color-text-light) !important;
	margin: 4px 0 0 !important;
}

/* Swiper pagination dots */
#testimonials .swiper-pagination {
	position: static !important;
	margin-top: 24px;
	text-align: left;
}

#testimonials .swiper-pagination-bullet {
	background: var(--color-bg-dark) !important;
	opacity: 1 !important;
	width: 8px !important;
	height: 8px !important;
}

#testimonials .swiper-pagination-bullet-active {
	background: var(--color-accent) !important;
}


/* ============================================================
   Shared Section Utilities
   ============================================================ */

.sectionEyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 12px;
}

.sectionHeader {
	text-align: center;
	margin-bottom: 56px;
}

.sectionHeader h2 {
	font-size: clamp(1.9rem, 3.5vw, 2.8rem);
	color: var(--color-primary-dark);
	margin-bottom: 16px;
}

.sectionHeader p {
	font-size: 1.05rem;
	color: var(--color-text-light);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.65;
}


/* ============================================================
   Meet Anne & Brian
   ============================================================ */

#meetAnneBrian {
	padding: var(--section-pad-v) 0;
	background-color: var(--color-bg);
}

.mabInner {
	display: grid;
	grid-template-columns: 55% 1fr;
	gap: 72px;
	align-items: center;
}

.mabHeading {
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	color: var(--color-primary-dark);
	margin-bottom: 20px;
}

.mabText p {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--color-text);
	margin-bottom: 1.1em;
}

.mabText .btn-ghost {
	margin-top: 8px;
}

.mabPhotos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.mabPhotoCard {
	display: flex;
	flex-direction: column;
}

.mabPhotoCardOffset {
	margin-top: 52px;
}

.mabPhotoWrap {
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4px;
}

.mabPhotoWrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 10px;
}

.mabName {
	display: block;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	margin-top: 10px;
}


/* ============================================================
   Qualifications / Stats Strip
   ============================================================ */

#qualifications {
	padding: 64px 0;
	background-color: var(--color-primary-dark);
}

.statsRow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	text-align: center;
}

.statItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 8px;
}

.statItem + .statItem {
	border-left: 1px solid rgba(255,255,255,0.12);
}

.statNum {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 3rem;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}

.statLabel {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
}


/* ============================================================
   Offerings Cards
   ============================================================ */

#offerings {
	padding: var(--section-pad-v) 0;
	background-color: var(--color-bg-alt);
}

.offeringsGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.offeringCard {
	background: #fff;
	border: 1px solid var(--color-bg-dark);
	border-radius: 6px;
	padding: 32px 28px 28px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.offeringCard:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.09);
	transform: translateY(-2px);
}

.offeringTitle {
	font-size: 1.35rem;
	color: var(--color-primary-dark);
	margin-bottom: 12px;
}

.offeringDesc {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--color-text-light);
	margin-bottom: 20px;
	flex-grow: 1;
}

.offeringLink {
	align-self: flex-start;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
}

.offeringLink::after {
	content: ' \2192';
}

.offeringLink:hover {
	color: var(--color-accent-dark);
	text-decoration: none;
}


/* ============================================================
   Featured Articles
   ============================================================ */

#articlesFeatured {
	padding: var(--section-pad-v) 0;
	background-color: var(--color-bg);
}

.articlesGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.articleCard {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
}

.articleCardThumbLink {
	display: block;
}

.articleCardThumb {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.articleCardThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.articleCard:hover .articleCardThumb img {
	transform: scale(1.04);
}

.articleCardThumbPlaceholder {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--color-bg-alt);
}

.articleCardBody {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.articleCardCat {
	display: block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 8px;
}

.articleCardTitle {
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--color-primary-dark);
	margin-bottom: 10px;
}

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

.articleCardTitle a:hover {
	color: var(--color-accent);
}

.articleCardExcerpt {
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--color-text-light);
	margin-bottom: 16px;
	flex-grow: 1;
}

.articleCardLink {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
	align-self: flex-start;
}

.articleCardLink:hover {
	color: var(--color-accent-dark);
	text-decoration: none;
}

.articlesViewAll {
	text-align: center;
	margin-top: 48px;
}


/* ============================================================
   Upcoming Events
   ============================================================ */

#eventsUpcoming {
	padding: var(--section-pad-v) 0;
	background-color: var(--color-bg-alt);
}

.eventsGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.eventCard {
	background: #fff;
	border: 1px solid var(--color-bg-dark);
	border-radius: 6px;
	overflow: hidden;
}

.eventCardThumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-alt);
}

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

.eventCardBody {
	padding: 20px 20px 24px;
}

.eventDate {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 6px;
}

.eventTitle {
	font-size: 1.2rem;
	color: var(--color-primary-dark);
	margin-bottom: 6px;
	line-height: 1.3;
}

.eventLocation {
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin-bottom: 18px;
}


/* ============================================================
   Final CTA
   ============================================================ */

#ctaFinal {
	padding: 100px 0;
	background-color: var(--color-primary-dark);
	text-align: center;
}

.ctaFinalInner {
	max-width: 680px;
	margin: 0 auto;
}

.ctaFinalEyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	margin-bottom: 20px;
}

.ctaFinalHeading {
	font-family: var(--font-heading);
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 400;
	font-style: italic;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 20px;
}

.ctaFinalSub {
	font-size: 1.05rem;
	line-height: 1.72;
	color: rgba(255,255,255,0.72);
	margin-bottom: 40px;
}

.ctaFinalBtns {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}


/* ============================================================
   Inner-page Hero Banner — About, Anne's Story, Brian's Story
   Background-image is set via inline style in each page template
   (get_template_directory_uri() — same pattern as article heroes).
   ============================================================ */

.inner-hero {
	position: relative;
	width: 100%;
	height: 380px;
	background-color: var(--color-primary-dark);
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

/* Gradient overlay — bottom-heavy so title reads cleanly against any image */
.inner-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(15, 22, 32, 0.88) 0%,
		rgba(15, 22, 32, 0.56) 35%,
		rgba(15, 22, 32, 0.20) 62%,
		rgba(15, 22, 32, 0.04) 100%
	);
}

/* About: couple is center-right; shift crop slightly left to show both faces */
.inner-hero--about {
	background-position: 55% center;
}

/* Anne: couple center-right, Anne facing camera; same crop treatment */
.inner-hero--anne {
	background-position: 58% center;
}

/* Brian: sitting left-of-center in soft outdoor light; center shows him clearly */
.inner-hero--brian {
	background-position: 38% center;
	/* Outdoor tones are uniformly lighter — heavier overlay needed */
}

.inner-hero--brian::after {
	background: linear-gradient(
		to top,
		rgba(15, 22, 32, 0.92) 0%,
		rgba(15, 22, 32, 0.65) 35%,
		rgba(15, 22, 32, 0.32) 62%,
		rgba(15, 22, 32, 0.08) 100%
	);
}

/* Private Intensives: couple + coach centered; default overlay sufficient */
.inner-hero--private-intensives {
	background-position: center center;
}

/* Coaching: bright natural-light image — heavier overlay needed */
.inner-hero--coaching {
	background-position: center center;
}

.inner-hero--coaching::after {
	background: linear-gradient(
		to top,
		rgba(15, 22, 32, 0.92) 0%,
		rgba(15, 22, 32, 0.68) 35%,
		rgba(15, 22, 32, 0.30) 62%,
		rgba(15, 22, 32, 0.06) 100%
	);
}

/* Retreats hub — couple positioned right of center */
.inner-hero--retreats {
	background-position: 25% center;
}

/* Individual retreat sub-pages — featured image or heroRetreats.jpg fallback */
.inner-hero--retreat {
	background-position: 25% center;
}

/* Take Your Life Back — very light sky/water image needs a heavy scrim + brighter eyebrow */
.inner-hero--tylb {
	background-position: center center;
}

.inner-hero--tylb .inner-hero__eyebrow,
.inner-hero--tylb .inner-hero__eyebrow a {
	color: rgba(255, 255, 255, 0.92);
}

.inner-hero--tylb::after {
	background: linear-gradient(
		to top,
		rgba(15, 22, 32, 0.94) 0%,
		rgba(15, 22, 32, 0.72) 35%,
		rgba(15, 22, 32, 0.40) 62%,
		rgba(15, 22, 32, 0.10) 100%
	);
}

/* Healing From Home: warm indoor scene */
.inner-hero--healing-from-home {
	background-position: center 40%;
}

/* Recovery Roadmap: warm natural-light image — heavier overlay for text legibility */
.inner-hero--recovery-roadmap {
	background-position: center 30%;
}

.inner-hero--recovery-roadmap::after {
	background: linear-gradient(
		to top,
		rgba(15, 22, 32, 0.90) 0%,
		rgba(15, 22, 32, 0.65) 35%,
		rgba(15, 22, 32, 0.28) 62%,
		rgba(15, 22, 32, 0.06) 100%
	);
}

.inner-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: 40px;
}

.inner-hero__eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.60);
	margin-bottom: 10px;
}

.inner-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(1.9rem, 3.8vw, 3.2rem);
	font-weight: 600;
	line-height: 1.12;
	color: #fff;
	margin: 0 0 14px;
	max-width: 700px;
}

.inner-hero__subtitle {
	font-family: var(--font-body);
	font-size: clamp(0.92rem, 1.4vw, 1.05rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: 560px;
}


/* ============================================================
   Our Marriage page — photo pair
   ============================================================ */

/* Float the wrapper (not the inner figure — WP's alignright is overridden below) */
.marriage-photo {
	float: right;
	clear: right;
	margin: 0.25rem 0 2rem 2.5rem;
	width: 340px;
	max-width: 42%;
}

/* Second photo floats left for visual alternation */
.entry-content .marriage-photo ~ .marriage-photo {
	float: left;
	clear: left;
	margin: 0.25rem 2.5rem 2rem 0;
	width: 260px;
}

/* Cancel WP's alignright float — the wrapper handles positioning */
.marriage-photo figure {
	float: none !important;
	margin: 0 !important;
}

/* Override the inline width="260px" WP block editor sets on <img> */
.marriage-photo img {
	width: 100% !important;
	height: auto !important;
	display: block;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(62, 92, 118, 0.16);
}

.marriage-photo .wp-element-caption {
	font-family: var(--font-heading);
	font-size: 0.88rem;
	font-style: italic;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
	text-align: center;
	margin-top: 0.65rem;
}