/*
 * Deist — supplemental component CSS.
 * Design tokens (colour, type, spacing) come from theme.json as CSS custom properties
 * (e.g. var(--wp--preset--color--primary)). Only put here what theme.json can't express.
 */

/* Fraunces — serif used only by the Breast & Lymph Care promo, to echo the
 * warm editorial feel of the standalone /breast-and-lymph-care/ mini-site. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap");

/* --- Skip link (accessibility) --- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 8px 0;
}
.skip-link:focus {
	left: 0;
}

/* --- Header --- */
/* Sticky must sit on the template-part wrapper: it's a direct child of
 * .wp-site-blocks (full page height), so the header has room to stick. Putting
 * sticky on .deist-header itself fails because its parent wrapper is only as
 * tall as the header. */
.wp-site-blocks > header.wp-block-template-part:has(.deist-header) {
	position: sticky;
	top: 0;
	z-index: 999;
}
.deist-header {
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 3px rgba(16, 42, 67, 0.08);
}

/* Close the root block-gap between the sticky header and the first page section so
 * the hero / page-title band sits flush under the nav (overrides the zero-specificity
 * `:where(.wp-site-blocks) > *` margin WordPress emits from styles.spacing.blockGap). */
.wp-site-blocks > main { margin-block-start: 0; }
/* Footer sits flush against the last content section (drops the root block-gap that
 * would otherwise show as a transparent/white strip above the dark footer). */
.wp-site-blocks > footer { margin-block-start: 0; }

/* --- Primary nav: clean hover states; mega-menu wired up in a later step --- */
.deist-header .wp-block-navigation a:where(:not(.wp-element-button)),
.deist-header .wp-block-navigation-submenu__toggle {
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}
.deist-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--primary);
}

/* --- Breast & Lymph Care promo -----------------------------------------
 * Mirrors the warm, editorial feel of the standalone /breast-and-lymph-care/
 * mini-site (cream bg, Fraunces serif, sage panel, branch-leaf watermark)
 * instead of the site's clinical blue. Palette tokens copied from that page. */
.deist-blc {
	--blc-dark:  #172E38;
	--blc-cream: #F2EDE6;
	--blc-sage:  #C3D7CF;
	--blc-muted: #5d6b70;
	--blc-text:  #3b4a50;
	background: var(--blc-cream);
	position: relative;
	overflow: hidden;
	padding-block: clamp(60px, 8vw, 104px) !important;
}
/* faint leaf branch watermark, top-right (reused from the mini-site) */
.deist-blc::before {
	content: "";
	position: absolute;
	top: 0; right: 0;
	width: 460px; height: 480px;
	max-width: 42%;
	background: url("/breast-and-lymph-care/assets/branch2.svg") top right / contain no-repeat;
	opacity: .85;
	pointer-events: none;
	z-index: 0;
}
.deist-blc__inner {
	position: relative;
	z-index: 1;
	gap: clamp(32px, 5vw, 72px) !important;
	align-items: center;
	margin-block: 0 !important;
}
.deist-blc__media {
	min-height: clamp(340px, 38vw, 460px);
	border-radius: 16px;
	background: var(--blc-sage) url("/breast-and-lymph-care/assets/medical-aid-coverage.webp") center bottom / contain no-repeat;
}
.deist-blc__eyebrow {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .78rem;
	font-weight: 700;
	color: var(--blc-muted);
	margin: 0 0 14px;
}
.deist-blc__title {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-optical-sizing: auto;
	font-size: clamp(30px, 3.8vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--blc-dark);
	margin: 0 0 20px;
}
.deist-blc__text {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--blc-text);
	max-width: 32em;
	margin: 0 0 32px;
}
.deist-blc__actions { gap: 16px; }
.deist-blc .wp-block-button__link {
	background: var(--blc-dark);
	color: #fff;
	border: 1.5px solid var(--blc-dark);
	border-radius: 6px;
	font-weight: 600;
	padding: 13px 26px;
}
.deist-blc .wp-block-button__link:hover { background: #0f2129; border-color: #0f2129; }
.deist-blc .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--blc-dark);
}
.deist-blc .is-style-outline .wp-block-button__link:hover {
	background: var(--blc-dark);
	color: #fff;
}
@media (max-width: 781px) {
	.deist-blc__media { min-height: 300px; background-size: auto 300px; }
	.deist-blc::before { width: 240px; height: 250px; opacity: .6; }
}

/* --- Footer --- */
.deist-footer {
	background: var(--wp--preset--color--blue-900);
	color: var(--wp--preset--color--blue-200);
}
.deist-footer :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}
.deist-footer a {
	color: var(--wp--preset--color--blue-200);
}
.deist-footer a:hover {
	color: var(--wp--preset--color--accent);
}
/* Footer emblem: all-white logo sits directly on the dark footer */
.deist-footer-logo {
	display: inline-block;
	margin: 0;
}
.deist-footer-logo img { display: block; height: auto; }
/* keep the tagline tucked close under the logo (overrides the column block-gap) */
.deist-footer-logo + p { margin-block-start: 0.85rem; }

/* --- Home hero: team of patients standing across the bottom of a blue band ---
 * The image is a transparent ensemble photo (everyone fitted with a different
 * prosthetic). It is shown in full — never cropped — so no one's feet are cut,
 * and bottom-aligned so the group "stands" on the base of the hero. A soft
 * drop-shadow grounds the figures against the gradient. */
.deist-hero { overflow: hidden; }
.deist-hero__intro { position: relative; z-index: 1; }

/* Hero call-to-action buttons — icon + label */
.deist-hero .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}
.deist-hero .deist-btn-icon {
	width: 1.7em;
	height: 1.7em;
	flex: 0 0 auto;
	/* nudge to sit optically centred on the cap height of the label */
	margin-top: -0.06em;
}
/* "Book a Consultation" — white pill with brand-blue label */
.deist-hero__btn--book .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--primary);
}
.deist-hero__btn--book .wp-block-button__link:hover,
.deist-hero__btn--book .wp-block-button__link:focus {
	background: var(--wp--preset--color--blue-50);
	color: var(--wp--preset--color--blue-700);
}
/* "Visit Breast & Lymph Care" — awareness-ribbon pink pill */
.deist-hero__btn--blc .wp-block-button__link {
	background: #f6c3da;
	color: #7a2450;
}
.deist-hero__btn--blc .wp-block-button__link:hover,
.deist-hero__btn--blc .wp-block-button__link:focus {
	background: #efb0cd;
	color: #7a2450;
}

.deist-hero__people {
	/* keep the full image visible, centred, sitting flush on the hero floor */
	margin-bottom: 0;
}
.deist-hero__people img {
	display: block;
	width: 100%;
	max-width: 1100px;
	height: auto;
	margin-inline: auto;
	/* ground the standing figures with a soft shadow under their feet */
	filter: drop-shadow(0 14px 14px rgba(0, 18, 36, 0.45));
}

/* On narrow screens nine figures get small; let the row stay legible by
 * allowing it to run a little wider than the text column. */
@media (max-width: 781px) {
	.deist-hero__people img { max-width: 640px; }
}

/* --- Cards (patient stories, service tiles) --- */
.deist-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--neutral-300);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* "What we offer" cards: make each fill its (stretched) column so all three are equal
 * height, and pin the "Explore →" link to the bottom for a tidy baseline. */
.wp-block-columns .wp-block-column:has(> .deist-card) {
	display: flex;
}
.wp-block-columns .wp-block-column > .deist-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.wp-block-columns .wp-block-column > .deist-card > p:last-child {
	margin-top: auto;
	padding-top: 0.5rem;
}
.deist-card:hover {
	box-shadow: 0 8px 24px rgba(16, 42, 67, 0.1);
	transform: translateY(-2px);
}

/* --- Gold accent rule used under section headings --- */
.deist-accent-rule::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent);
	margin-top: 0.75rem;
}

/* --- Patient stories: filter bar --- */
.deist-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
}
.deist-filter {
	display: inline-block;
	padding: 0.4rem 1rem;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--neutral-300);
	background: #fff;
	color: var(--wp--preset--color--neutral-700);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.deist-filter:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.deist-filter.is-active { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }

/* --- Stories grid + cards --- */
.deist-stories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
}
.deist-story-card { display: flex; flex-direction: column; }
.deist-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--neutral-100); }
.deist-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.deist-card__placeholder { display: block; width: 100%; height: 100%; background: url("/wp-content/uploads/branding/deist-logo-white.png") center / 55% no-repeat, linear-gradient(135deg, var(--wp--preset--color--blue-400), var(--wp--preset--color--blue-700)); }
.deist-card__badge {
	position: absolute; top: 0.75rem; left: 0.75rem;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--blue-900);
	font-family: var(--wp--preset--font-family--heading); font-size: 0.75rem; font-weight: 600;
	padding: 0.2rem 0.6rem; border-radius: 9999px;
}
.deist-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.deist-card__terms { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wp--preset--color--neutral-500); }
.deist-card__terms a { color: inherit; text-decoration: none; }
.deist-card__title { margin: 0; font-size: 1.25rem; }
.deist-card__title a { color: var(--wp--preset--color--blue-900); text-decoration: none; }
.deist-card__title a:hover { color: var(--wp--preset--color--primary); }
.deist-card__excerpt { margin: 0; color: var(--wp--preset--color--neutral-700); font-size: 0.95rem; }
.deist-card__more { margin-top: auto; font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: var(--wp--preset--color--primary); text-decoration: none; }

/* --- Pagination --- */
.deist-pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 3rem; }
.deist-page { min-width: 2.5rem; text-align: center; padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--wp--preset--color--neutral-300); text-decoration: none; color: var(--wp--preset--color--neutral-700); }
.deist-page.is-active, .deist-page:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }

/* --- Single success story: image-left / text-right layout --- */
.deist-story-cols { gap: clamp(1.5rem, 4vw, 3rem); }
/* Show the hero in full — no cropping (portrait photos cut off faces otherwise) */
.deist-story-cols .wp-post-image,
.deist-story-cols .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}
.deist-story-cols .wp-block-post-featured-image { position: sticky; top: 6rem; }
.deist-story-cols > .wp-block-column:last-child { display: flex; flex-direction: column; justify-content: center; }
.deist-story-cols .wp-block-post-content > :first-child { margin-top: 0; }

/* Previous / next story navigation */
.deist-story-nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--70, 3rem);
	padding-top: var(--wp--preset--spacing--50, 1.5rem);
	border-top: 1px solid var(--wp--preset--color--neutral-300, #cdd5dd);
}
.deist-story-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	max-width: 48%;
	text-decoration: none;
	color: var(--wp--preset--color--blue-900, #003355);
}
.deist-story-nav__next { text-align: right; margin-left: auto; align-items: flex-end; }
.deist-story-nav__dir {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary, #005089);
}
.deist-story-nav__title {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.3;
}
.deist-story-nav__link:hover .deist-story-nav__title { color: var(--wp--preset--color--primary, #005089); }
.deist-story-nav__link.is-empty { pointer-events: none; }

/* --- Single story media --- */
.deist-video { margin: 1.5rem 0; }
.deist-video video, .deist-video iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; display: block; }

/* Success-story video: wide 16:9 frame with a dark backdrop (portrait clips sit centred),
 * and generous separation from the image/text block above it. */
.deist-story-video { margin-top: var(--wp--preset--spacing--90, 6rem); margin-bottom: var(--wp--preset--spacing--70, 3rem); max-width: 860px !important; margin-inline: auto; }
.deist-story-video .wp-video { width: 100% !important; max-width: 100%; margin-inline: auto; }
.deist-story-video .wp-video + .wp-video { margin-top: 2rem; }
.deist-story-video .mejs-container,
.deist-story-video .wp-video-shortcode,
.deist-story-video video,
.deist-story-video iframe {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	background: #0b0f14;
	border-radius: 16px;
	object-fit: contain;
	display: block;
}
.deist-testimonial-img { margin: 0 0 1.5rem; }
.deist-testimonial-img img { width: 100%; border-radius: 12px; display: block; }

/* --- Service tiles (homepage) --- */
.deist-service-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; }

/* ====================================================================
 * Mobile nav overlay (hamburger shown below 600px — WP "mobile" overlay).
 * Submenus collapse into accordions so the menu stays short; the brand CTA
 * moves inside the overlay. `_OL` shorthand below = the open overlay scope.
 * ==================================================================== */

/* CTA swap: standalone header button on desktop, in-overlay pill on mobile */
@media (min-width: 600px) {
	.deist-nav-cta { display: none !important; }
}
@media (max-width: 599.98px) {
	.deist-header .deist-header-cta { display: none; }
}

/* --- Overlay shell + slim top bar with a clear close control --- */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background: var(--wp--preset--color--white);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding: 4.75rem 1.25rem 2rem;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0.85rem;
	right: 1.1rem;
	width: 2.6rem;
	height: 2.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: var(--wp--preset--color--blue-50);
	color: var(--wp--preset--color--primary);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* --- Item list: full-width rows with dividers, all left-aligned --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	align-items: stretch !important;
	justify-content: flex-start !important;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	justify-content: flex-start !important;
	text-align: left;
}
/* Each top-level row: simple block, relative so the chevron can pin right */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	display: block;
	position: relative;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--neutral-100);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
	border-top: 0;
}
/* Top-level link / submenu toggle: big left-aligned tap target, heading style.
 * (Force block + left because the submenu toggle is a <button>, which centres text.) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	padding: 0.9rem 2.75rem 0.9rem 0.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--wp--preset--color--blue-900);
	text-align: left !important;
	text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
}

/* --- Submenu chevron: re-show it (WP hides it in the overlay) and pin it to the
 *     right edge of the first row only. --- */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0.1rem;
	width: 2.75rem;
	height: 3.4rem;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--primary);
	pointer-events: none;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-icon svg {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/* --- Submenus: collapse by default, expand on toggle (override WP's
 *     overlay rule that force-shows every submenu). --- */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	height: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	opacity: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	height: auto !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: var(--wp--preset--color--neutral-50) !important;
	border-radius: 12px;
	margin: 0 0 0.85rem !important;
	padding: 0.35rem 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	border-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block !important;
	width: 100%;
	padding: 0.55rem 1rem 0.55rem 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--neutral-700);
	text-align: left !important;
}

/* --- In-overlay "Book a Consultation" pill --- */
.wp-block-navigation__responsive-container.is-menu-open .deist-nav-cta {
	border-top: 0 !important;
	margin-top: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .deist-nav-cta > .wp-block-navigation-item__content {
	display: block !important;
	text-align: center !important;
	padding: 0.95rem 1.5rem !important;
	background: var(--wp--preset--color--primary);
	border-radius: 9999px;
	box-shadow: 0 6px 18px rgba(0, 80, 137, 0.22);
}
.wp-block-navigation__responsive-container.is-menu-open .deist-nav-cta > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .deist-nav-cta .wp-block-navigation-item__label {
	color: #fff !important;
}

/* --- Responsive content images ---
 * Migrated content uses raw <figure class="wp-block-image"> HTML (not parsed image
 * blocks), so WP's on-demand image-block stylesheet (which caps width) never loads.
 * Enforce responsive images theme-side so wide images can't overflow the container. */
.wp-block-post-content img,
.entry-content img,
.wp-block-image img,
.deist-video iframe { max-width: 100%; height: auto; }
.wp-block-post-content figure,
.entry-content figure.wp-block-image { max-width: 100%; }
/* Center standalone content images for a tidier reading column */
.entry-content figure.wp-block-image { text-align: center; }
.entry-content figure.wp-block-image img { display: inline-block; }
/* Soften content images to match the featured-image / card aesthetic */
.wp-block-post-content figure.wp-block-image img,
.entry-content figure.wp-block-image img,
.wp-block-post-content .wp-block-media-text__media img { border-radius: 12px; }

/* Small / low-res source images inside a media-text block: don't upscale them to
   fill the 44% column (which blows them up blurry and far too tall). Render at
   natural size, centred in the column, with a sane height cap. */
.wp-block-post-content .deist-mt-contain .wp-block-media-text__media {
	display: flex;
	align-items: center;
	justify-content: center;
}
.wp-block-post-content .deist-mt-contain .wp-block-media-text__media img {
	width: auto;
	max-width: 100%;
	max-height: 420px;
	height: auto;
}

/* Lead paragraph (intro on long-form pages) */
.wp-block-post-content p.deist-lead {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--wp--preset--color--neutral-700, #3a444d);
}

/* Inline video (e.g. "Staying by your side" on Getting Started) */
.wp-block-post-content .deist-video-wrap { margin-block: var(--wp--preset--spacing--50, 1.5rem); }
.wp-block-post-content .deist-video-wrap .wp-video,
.wp-block-post-content .deist-video-wrap video {
	width: 100% !important;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Signature line (e.g. Jaco's letter close) */
.deist-signature {
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--wp--preset--color--blue-900, #003355);
}

/* --- In-content CTA buttons ---
 * Migrated content carries Divi's legacy button markup — either a bare anchor with
 * the old class (`.red-bg-button`) or our converter's `.deist-cta` wrapper. Neither
 * inherits the block button styles, so promote them to the brand pill button here. */
.wp-block-post-content p:has(> .red-bg-button),
.wp-block-post-content .deist-cta { text-align: center; margin-block: var(--wp--preset--spacing--60, 2rem); }
.wp-block-post-content a.red-bg-button,
.wp-block-post-content .deist-cta a {
	display: inline-block;
	background-color: var(--wp--preset--color--primary, #005089);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	text-decoration: none;
	padding: 0.85rem 2rem;
	border-radius: 9999px;
	box-shadow: 0 6px 18px rgba(0, 80, 137, 0.22);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-post-content a.red-bg-button:hover,
.wp-block-post-content a.red-bg-button:focus,
.wp-block-post-content .deist-cta a:hover,
.wp-block-post-content .deist-cta a:focus {
	background-color: var(--wp--preset--color--blue-700, #004574);
	color: var(--wp--preset--color--white, #fff);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 80, 137, 0.28);
}

/* --- Inline "Get In Touch" anchor: promote to a brand pill button ---
 * On the Getting Started page the intro carries a bare <a class="get-in-touch-anchor">
 * jump link. Style it as a primary call-to-action with a small arrow affordance. */
.wp-block-post-content p:has(> .get-in-touch-anchor) { margin-block: var(--wp--preset--spacing--50, 1.5rem); }
.wp-block-post-content a.get-in-touch-anchor {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--wp--preset--color--accent, #d9a521);
	color: var(--wp--preset--color--blue-900, #003355);
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	text-decoration: none;
	padding: 0.85rem 2rem;
	border-radius: 9999px;
	box-shadow: 0 6px 18px rgba(217, 165, 33, 0.3);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-post-content a.get-in-touch-anchor::after {
	content: "\2192"; /* → */
	font-size: 1.15em;
	line-height: 1;
	transition: transform 0.15s ease;
}
.wp-block-post-content a.get-in-touch-anchor:hover,
.wp-block-post-content a.get-in-touch-anchor:focus {
	background-color: var(--wp--preset--color--gold-200, #f6e7bf);
	color: var(--wp--preset--color--blue-900, #003355);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(217, 165, 33, 0.38);
}
.wp-block-post-content a.get-in-touch-anchor:hover::after { transform: translateX(3px); }

/* --- Section-heading rhythm ---
 * Long content pages (Getting Started, The First Year) are a stack of <h2> sections.
 * Give the headings a touch of brand styling and breathing room so the page reads as
 * distinct sections rather than one undifferentiated wall of text. */
.wp-block-post-content > h2:not(.deist-contact__heading) {
	position: relative;
	margin-top: var(--wp--preset--spacing--70, 3rem);
	padding-bottom: 0.5rem;
	color: var(--wp--preset--color--blue-900, #003355);
}
.wp-block-post-content > h2:not(.deist-contact__heading)::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent, #d9a521);
	margin-top: 0.6rem;
}

/* --- Accordion (native <details>, no JS) ---
 * Replaces the legacy Divi "faq-accordions" toggle list (Some things to consider). */
.deist-accordion {
	margin-block: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--70, 3rem);
	border: 1px solid var(--wp--preset--color--neutral-300, #cdd5dd);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}
.deist-accordion__item { border-top: 1px solid var(--wp--preset--color--neutral-300, #cdd5dd); }
.deist-accordion__item:first-child { border-top: 0; }
.deist-accordion__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.5rem;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--wp--preset--color--blue-900, #003355);
	background: var(--wp--preset--color--neutral-50, #f7f9fb);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.deist-accordion__summary::-webkit-details-marker { display: none; }
.deist-accordion__summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 400;
	color: var(--wp--preset--color--primary, #005089);
	transition: transform 0.2s ease;
}
.deist-accordion__item[open] > .deist-accordion__summary { background: var(--wp--preset--color--blue-50, #eef5fb); color: var(--wp--preset--color--primary, #005089); }
.deist-accordion__item[open] > .deist-accordion__summary::after { transform: rotate(45deg); }
.deist-accordion__summary:hover { background: var(--wp--preset--color--blue-50, #eef5fb); }
.deist-accordion__summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary, #005089); outline-offset: -2px; }
.deist-accordion__content { padding: 0.5rem 1.5rem 1.5rem; }
.deist-accordion__content > :first-child { margin-top: 0.75rem; }
.deist-accordion__content p:last-child { margin-bottom: 0; }
.deist-accordion__content ul { margin-left: 1.1rem; }
.deist-accordion__content li { margin-block: 0.3rem; }
.deist-donot-img { display: block; max-width: 320px; height: auto; margin: 1.25rem auto 0; border-radius: 12px; }

/* --- "Get In Touch" contact section ---
 * Two-column card: Gravity Form alongside the branch contact details. */
.deist-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	margin-top: var(--wp--preset--spacing--80, 4rem);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--wp--preset--color--neutral-50, #f7f9fb);
	border: 1px solid var(--wp--preset--color--neutral-300, #cdd5dd);
	border-radius: 20px;
	scroll-margin-top: 6rem;
}
@media (max-width: 781px) {
	.deist-contact { grid-template-columns: 1fr; }
}
.deist-contact__heading { margin-top: 0; color: var(--wp--preset--color--blue-900, #003355); }
.deist-contact__lead { color: var(--wp--preset--color--neutral-700, #3a444d); margin-bottom: 1.5rem; }
.deist-contact__details {
	background: var(--wp--preset--color--primary, #005089);
	color: #fff;
	border-radius: 16px;
	padding: 1.75rem;
}
.deist-contact__eyebrow {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--accent, #d9a521);
}
.deist-contact__branch { margin: 0 0 1rem; color: #fff; }
.deist-contact__details p { margin-block: 0.75rem; }
.deist-contact__details a { color: var(--wp--preset--color--blue-200, #cfe0ee); text-decoration: none; }
.deist-contact__details a:hover { color: var(--wp--preset--color--accent, #d9a521); }
.deist-contact__phone a { font-size: 1.25rem; font-weight: 700; color: #fff; }
.deist-contact__address a { color: #fff; line-height: 1.6; }