/*
Theme Name: NewU Wellness 2026
Theme URI: https://www.newuwellness-swfl.com
Author: Douglas Karr / DK New Media
Author URI: https://dknewmedia.com
Description: Lightweight, native Gutenberg (Full Site Editing) block theme for NewU Wellness — replacing the Elementor + OceanWP stack with a fast, fully-editable foundation. Brand: Cormorant Garamond + Roboto on a mauve/teal palette. Styling is driven by theme.json.
Version: 0.9.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newu-26
*/

/* Block themes style via theme.json. Keep this file minimal; add only what
   presets cannot express. */

.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
}

.skip-link.screen-reader-text:focus {
	left: 8px;
	top: 8px;
	z-index: 100000;
	padding: 8px 16px;
	background: #fff;
}

/* ---------------------------------------------------------------------------
   Icon set — every decorative icon in the theme is an inline SVG (no emoji, no
   font glyphs), so they render identically on every platform.
     --ico-*    : shape-only SVGs used with -webkit-mask/mask; the visible color
                  comes from `background`/currentColor.
     --ico-*-w  : white line-glyphs used as a background-image inside a colored
                  circle marker.
--------------------------------------------------------------------------- */
:root {
	--ico-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6.62%2010.79c1.44%202.83%203.76%205.14%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201-9.39%200-17-7.61-17-17%200-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%27%2F%3E%3C%2Fsvg%3E");
	--ico-star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202l2.9%206.3%206.9.7-5.2%204.6%201.5%206.7L12%2017.3%206%2021l1.5-6.7L2.3%209.7l6.9-.7z%27%2F%3E%3C%2Fsvg%3E");
	--ico-tri: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%205v14l11-7z%27%2F%3E%3C%2Fsvg%3E");
	--ico-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E");
	--ico-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2013l4%204L19%207%27%2F%3E%3C%2Fsvg%3E");
	--ico-chevron-w: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E");
	--ico-check-w: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2013l4%204L19%207%27%2F%3E%3C%2Fsvg%3E");
	--ico-cross-w: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206L6%2018%27%2F%3E%3C%2Fsvg%3E");
	--ico-cart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2720%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2720%27%20r%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M2%203h3l2.2%2012.2a1.6%201.6%200%200%200%201.6%201.3h8.7a1.6%201.6%200%200%200%201.6-1.3L22%207H6%27%2F%3E%3C%2Fsvg%3E");
}

/* Reusable masked icon spans (empty <span>); color inherits from text unless set. */
.tel-icon,
.icon-star,
.icon-tri,
.icon-cart {
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-right: 0.3em;
	vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
.tel-icon  { --ico: var(--ico-phone); }
.icon-star { --ico: var(--ico-star); color: #f5b301; vertical-align: -0.12em; }
.icon-tri  { --ico: var(--ico-tri); width: 0.72em; margin-right: 0.4em; }
.icon-cart { --ico: var(--ico-cart); vertical-align: -0.18em; }

/* Full-bleed color bands butt flush against each other and against the
   header/footer — no white seams between sections (the page background
   otherwise shows through the inter-block gap). Each band carries its own
   padding, so flush matches the original site. */
.wp-site-blocks > *,
.wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Home hero text (eyebrow + headline) is brand mauve over the photo's light
   right side (overrides the global heading/text color in the Cover context). */
.home-hero .hero-text-right > p,
.home-hero .hero-text-right .wp-block-heading {
	color: var(--wp--preset--color--primary) !important;
}

/* Home hero: cap the overlay content to the 1200px page width and push the
   text to the right edge of that column, so the headline lines up with the
   header/content boundary instead of drifting to the viewport edge. (High
   specificity + !important to beat core's cover content-position rules.) */
.wp-block-cover.home-hero {
	justify-content: center !important;
}
.wp-block-cover.home-hero .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: 1200px !important;
	margin-inline: auto !important;
}
.wp-block-cover.home-hero .hero-text-right {
	max-width: 480px;
	margin-left: auto;
	margin-right: 0;
}

/* Mobile home hero: match prod — stack the photo on top with the eyebrow +
   headline (and buttons) on a solid white band below, instead of the desktop
   overlay. Converts the Cover to a stacked block layout via CSS: the background
   image and inner container are taken out of the absolute cover flow so they
   render one above the other. */
@media (max-width: 781px) {
	.wp-block-cover.home-hero {
		display: block;
		min-height: 0 !important;
		padding: 0 !important;
	}
	.home-hero .wp-block-cover__background { display: none !important; }
	.home-hero img.wp-block-cover__image-background {
		position: static !important;
		width: 100%;
		height: 320px;
		object-fit: cover;
		object-position: 50% 22%;
	}
	.home-hero .wp-block-cover__inner-container {
		position: static !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		box-sizing: border-box; /* keep width:100% + padding within the viewport */
		background: #fff;
		padding: 1.75rem 1.25rem 2rem;
	}
	.home-hero .hero-text-right {
		max-width: none;
		margin: 0 auto;
		text-align: center;
		background: none;
		padding: 0;
		border-radius: 0;
	}
}

/* Desktop submenu dropdowns: match the white menu bar (white background, dark
   items like the top-level links) instead of the dark styling the block markup
   bakes in for the mobile overlay. Scoped to >=782px so the mobile overlay
   (which stays dark) is untouched. */
@media (min-width: 782px) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: #fff !important;
		border: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
	.wp-block-navigation .wp-block-navigation__submenu-container,
	.wp-block-navigation .wp-block-navigation__submenu-container a,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--text) !important;
	}
	/* Submenu row hover: subtle brand tint. */
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--primary) !important;
	}
}

/* Mobile navigation overlay — left-aligned dark accordion matching the
   original site (full-width rows, dividers, current-page highlight, indented
   collapsible submenus). */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
}
/* Force all overlay text/links/toggles white (the global heading/text color
   otherwise wins over the block's overlayTextColor). */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open button,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding: 0;
	margin-top: 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
	gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Parent rows: a full-width, left-aligned label with the chevron overlaid on
   the right edge (matches prod). Absolute-positioning the toggle keeps the
   label a clean full-width row and avoids the chevron dropping to its own line
   or the label centering. The submenu still flows normally below when open. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	position: relative;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: 3.1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	width: 100%;
	padding: 0.9rem 1.25rem;
	justify-content: space-between;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open :is(.current-menu-item, .current_page_item) > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 2.5rem;
	font-size: 0.95em;
	opacity: 0.92;
}
/* Collapsible submenus in the mobile overlay (matches prod's tap-to-expand
   accordion). WP core forces submenu containers open in the overlay; collapse
   them by default and reveal only when the adjacent chevron toggle is expanded
   (the toggle button sits immediately before its <ul>, and its aria-expanded
   is driven by the nav block's Interactivity API on tap). Desktop is untouched
   — this is scoped to the open mobile overlay only, so hover dropdowns and the
   linked parent items keep working there. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
	display: block !important;
}
/* Give the chevron a real tap target and rotate it when open. WP core hides
   the toggle in the overlay when submenus open on hover; force it visible so
   it drives the collapse above. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: flex !important;
	align-items: center;
	padding: 0.9rem 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	transition: transform 0.15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Hero: push the overlay text into the right panel (matches the original banner). */
.hero-text {
	margin-left: auto;
	max-width: 600px;
}

/* Force hero headline + eyebrow to brand mauve (Cover block sets a contrast color otherwise). */
.hero-text h1,
.hero-text p { color: var(--wp--preset--color--primary) !important; }

/* Green (brand) buttons: always white text + a trailing arrow icon. */
.wp-block-button__link.has-secondary-background-color,
.wp-block-button__link.has-ada-green-background-color { color: #fff !important; }
.wp-block-button__link.has-secondary-background-color::after,
.wp-block-button__link.has-ada-green-background-color::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.45em;
	vertical-align: -0.02em;
	background: currentColor;
	-webkit-mask: var(--ico-chevron) center / contain no-repeat;
	mask: var(--ico-chevron) center / contain no-repeat;
}

/* Top bar (purple): links and the phone glyph render white. */
.site-topbar a { color: #fff !important; }

/* Top-bar phone + address links: underline only the text, never the icon/pin. */
.site-topbar .topbar-phone,
.site-topbar .topbar-address { text-decoration: none; }
.site-topbar .topbar-phone .tel-num,
.site-topbar .topbar-address .addr-num { text-decoration: underline; }

/* Top-bar address: a white map-marker icon that matches the phone glyph and the
   social SVGs (instead of the colored map-pin emoji). Drawn via SVG mask so it takes
   the bar's white text color. */
.site-topbar .topbar-address::before {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	margin-right: 0.4em;
	vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: var(--pin) center / contain no-repeat;
	mask: var(--pin) center / contain no-repeat;
	--pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205z%27%2F%3E%3C%2Fsvg%3E");
}

/* Mobile top bar: match prod — stack and center the address, phone, and social
   row (desktop is a space-between flex row; on mobile prod centers each line). */
@media (max-width: 781px) {
	.site-topbar .wp-block-group {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 0.4rem;
	}
	.site-topbar .topbar-address { width: 100%; }
}

@media (max-width: 781px) {
	.hero-text {
		margin-left: 0;
		max-width: none;
	}
}

/* Service card icon. */
.service-card-icon img {
	width: 40px;
	height: 40px;
}
.service-card-icon { flex-shrink: 0; margin: 0; }

/* Services-grid cards: bordered white boxes with a circle-chevron title icon,
   button pinned to the card bottom (matches prod's 2-up service cards). */
.svc-card {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.svc-card > * { margin-block: 0; }
.svc-card .wp-block-buttons { margin-top: auto; }
.svc-card .svc-card-title {
	position: relative;
	padding-left: 1.9rem;
	line-height: 1.25;
}
.svc-card .svc-card-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.35em;
	height: 1.35em;
	font-size: 0.62em;
	background: var(--wp--preset--color--primary) var(--ico-chevron-w) center / 52% no-repeat;
	border-radius: 50%;
}
/* Grid gap fallback for older browsers rendering the grid layout. */
.svc-grid { gap: 1.1rem; }

/* Full-width teal "Didn't see what you're searching for?" search band. */
.search-band :is(h1, h2, h3, h4) { color: #fff !important; }
.search-band .wp-block-search__inside-wrapper {
	max-width: 620px;
	margin-inline: auto;
	background: #fff;
	border-radius: 4px;
}
.search-band .wp-block-search__input {
	border: none;
	background: transparent;
	padding: 0.75rem 1rem;
}
.search-band .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--secondary);
}

/* Dosage table: two bordered cells with a divider (matches prod's boxed table). */
.dosage-box {
	border: 1px solid #d9d4de;
	border-radius: 4px;
	overflow: hidden;
}
.dosage-box .wp-block-column {
	padding: 0.85rem 1.2rem;
	margin: 0;
}
.dosage-box .wp-block-column + .wp-block-column {
	border-left: 1px solid #d9d4de;
}
.dosage-box p { margin: 0; }
@media (max-width: 781px) {
	.dosage-box .wp-block-column + .wp-block-column {
		border-left: none;
		border-top: 1px solid #d9d4de;
	}
}

/* Service-page hero: keep the title within the purple gradient zone (left). */
.service-hero .wp-block-cover__inner-container {
	max-width: 600px;
	margin-left: 0;
	margin-right: auto;
}

/* Hero title + subtitle sit over a dark/purple gradient — force white (the
   theme's global heading color, and the .has-text-color clobber, otherwise win
   over the Cover's default white). Includes p for the italic location subtitle. */
.service-hero :is(h1, h2, h3, .wp-block-heading, p) {
	color: #fff !important;
}

/* Mobile hero: a horizontal mauve→clear gradient leaves the title over a busy
   photo on narrow screens (poor contrast). Prod instead stacks the photo on top
   and the title on a solid mauve band below. Re-anchor the gradient vertically
   (photo top, solid mauve bottom) and drop the title to the bottom, centered. */
@media (max-width: 781px) {
	.service-hero.wp-block-cover {
		min-height: 380px !important;
		align-items: flex-end !important;
		justify-content: center !important;
	}
	.service-hero .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(132, 116, 161, 0) 0%, rgba(132, 116, 161, 0) 44%, rgb(132, 116, 161) 54%, rgb(132, 116, 161) 100%) !important;
	}
	.service-hero .wp-block-cover__inner-container {
		max-width: none !important;
		margin: 0 auto !important;
		text-align: center;
		padding-bottom: 0.5rem;
	}
	/* Show the subject near the top of the photo band rather than cropped centre. */
	.service-hero img.wp-block-cover__image-background {
		object-position: 50% 22% !important;
	}
}

/* Services hero: the source photo has the model on the LEFT with empty space
   on the right; prod shows her on the right behind a left-anchored mauve fade.
   Mirror the background so the model sits on the right, revealed by the gradient. */
.services-hero-flip img.wp-block-cover__image-background {
	transform: scaleX(-1);
}

/* Product-shot heroes (bottle / device / product-range centered on a solid
   background) are product photos, not scenes. Contain them on the right so the
   product shows at natural size (matches prod) instead of cover-zooming and
   cropping the centered subject. The mauve gradient still fills the left. */
.service-hero-product img.wp-block-cover__image-background {
	object-fit: contain !important;
	object-position: right center !important;
}

/* Team member portraits: circular, fixed size. */
.team-photo img {
	width: 280px;
	height: 280px;
	max-width: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Green check-list (service-page benefits). */
.check-list {
	list-style: none;
	padding-left: 0;
}

.check-list li {
	position: relative;
	padding-left: 1.7em;
	margin-bottom: 0.6em;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.95em;
	height: 0.95em;
	background: var(--wp--preset--color--secondary);
	-webkit-mask: var(--ico-check) center / contain no-repeat;
	mask: var(--ico-check) center / contain no-repeat;
}

/* Dark service sidebar: links and headings. */
.service-sidebar a { color: #fff; text-decoration: none; }
.service-sidebar a:hover { text-decoration: underline; }
.service-sidebar ul { list-style: none; padding-left: 0; }
.service-sidebar ul li { margin-bottom: 0.4em; }

/* Sidebar service lists get a green circle-chevron marker before each link
   (matches prod's fa-chevron-circle-right bullets). Scoped to .wp-block-list
   so the social-links row is untouched. */
.service-sidebar .wp-block-list { list-style: none; padding-left: 0; }
.service-sidebar .wp-block-list li {
	position: relative;
	padding-left: 1.7em;
	margin-bottom: 0.55em;
}
.service-sidebar .wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.2em;
	height: 1.2em;
	font-size: 0.68em;
	background: var(--wp--preset--color--secondary) var(--ico-chevron-w) center / 52% no-repeat;
	border-radius: 50%;
}
.service-sidebar :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--accent) !important; }

/* Dark footer: force readable white text over theme.json heading/link colors. */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a { color: #fff; }
.site-footer :is(h1, h2, h3, h4, h5, h6) { color: #fff !important; }
.site-footer a:hover { text-decoration: underline; }

/* ---- Mobile: center headings, button groups, and footer column content. ---- */
@media (max-width: 781px) {
	main .wp-block-heading,
	main .wp-block-post-title,
	.site-footer .wp-block-heading {
		text-align: center;
	}
	.wp-block-buttons {
		justify-content: center;
	}
	.site-footer .wp-block-column {
		text-align: center;
	}
	.site-footer .wp-block-column .wp-block-social-links {
		justify-content: center;
	}
	/* Headings that pair with a left-aligned icon keep their left alignment. */
	main .svc-card .svc-card-title,
	main .benefit-row__body .wp-block-heading {
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
   Formidable Forms — brand styling (teal submit, clean inputs).
--------------------------------------------------------------------------- */
.frm_forms .frm_form_field input[type="text"],
.frm_forms .frm_form_field input[type="email"],
.frm_forms .frm_form_field input[type="tel"],
.frm_forms .frm_form_field input[type="number"],
.frm_forms .frm_form_field input[type="url"],
.frm_forms .frm_form_field textarea {
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	padding: 0.7em 0.9em;
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
}

.frm_forms .frm_form_field input:focus,
.frm_forms .frm_form_field textarea:focus {
	border-color: var(--wp--preset--color--secondary);
	outline: none;
	box-shadow: 0 0 0 2px rgba(8, 153, 125, 0.15);
}

.frm_forms .frm_primary_label,
.frm_forms .frm_form_field > label {
	font-weight: 500;
	color: var(--wp--preset--color--text);
}

.frm_forms .frm_button_submit,
.frm_forms button[type="submit"],
.frm_forms input[type="submit"] {
	background-color: var(--wp--preset--color--secondary) !important;
	color: #fff !important;
	border: none;
	border-radius: 4px;
	padding: 0.8em 2.2em;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.frm_forms .frm_button_submit:hover,
.frm_forms button[type="submit"]:hover,
.frm_forms input[type="submit"]:hover {
	background-color: var(--wp--preset--color--ada-green) !important;
}

/* ---- FAQ accordions (wp:details) — match prod's bordered accordion list ---- */
/* Prod: each item bordered top+bottom 1px #d5d8dc, dark bold title (15px 20px),
   divider between title and answer when open. Used only on the 3 FAQ pages
   (Xeomin / Belotero / Morpheus8), so global scoping is safe. */
.wp-block-details {
	border-top: 1px solid #d5d8dc;
	margin-block: 0;
}
.wp-block-details:last-of-type {
	border-bottom: 1px solid #d5d8dc;
}
.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 15px 46px 15px 20px;
	margin: 0;
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--wp--preset--color--text);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::marker { content: ""; }
.wp-block-details > summary::after {
	content: ""; /* chevron */
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	width: 0.72em;
	height: 0.72em;
	background: var(--wp--preset--color--primary);
	-webkit-mask: var(--ico-chevron) center / contain no-repeat;
	mask: var(--ico-chevron) center / contain no-repeat;
	transition: transform 0.2s ease;
}
.wp-block-details[open] > summary {
	border-bottom: 1px solid #d5d8dc;
}
.wp-block-details[open] > summary::after {
	transform: translateY(-50%) rotate(-90deg);
}
.wp-block-details > summary ~ * {
	margin-block: 0;
	padding-inline: 20px;
}
.wp-block-details > summary + * {
	padding-top: 15px;
}
.wp-block-details > summary ~ *:last-child {
	padding-bottom: 15px;
}
.wp-block-details > summary ~ * + * {
	padding-top: 0.8em;
}

/* ---- Single post (article) layout — match prod (title dark, meta, featured image, 2-col + sidebar, related) ---- */
.single-post-main .wp-block-post-title {
	color: #333 !important;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.5rem;
}
.single-post-main .post-meta {
	gap: 0.35rem 0.85rem;
	align-items: center;
	margin-bottom: 0.5rem;
	color: #8a8a8a;
	font-size: 0.85rem;
}
.single-post-main .post-meta a { color: #8a8a8a; text-decoration: none; }
.single-post-main .post-meta a:hover { color: var(--wp--preset--color--primary); }
.single-post-main .post-meta .wp-block-post-date,
.single-post-main .post-meta .wp-block-post-terms,
.single-post-main .post-meta .wp-block-post-author { margin: 0; }
/* thin dividers between meta items */
.single-post-main .post-meta > *:not(:first-child)::before {
	content: "·";
	margin-right: 0.85rem;
	color: #c9c9c9;
}
.single-post-main .wp-block-post-featured-image { margin: 1rem 0 1.5rem; }
.single-post-main .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}
/* Related posts row */
.single-post-main .related-posts { border-top: 1px solid #e6e2ea; padding-top: 1.5rem; }
.single-post-main .related-posts > h2 { font-size: 1.5rem; margin-bottom: 1.1rem; }
.single-post-main .related-posts .wp-block-post-template {
	gap: 1.1rem;
	grid-template-columns: repeat(3, 1fr);
}
.single-post-main .related-posts .wp-block-post-featured-image img {
	border-radius: 4px;
	object-fit: cover;
	aspect-ratio: 3 / 2;
	margin: 0;
}
.single-post-main .related-posts .wp-block-post-title {
	font-size: 0.95rem !important;
	font-weight: 600;
	line-height: 1.3;
	margin: 0.5rem 0 0;
}
.single-post-main .related-posts .wp-block-post-title a { color: #333; text-decoration: none; }
.single-post-main .related-posts .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

@media (max-width: 781px) {
	.single-post-main .wp-block-columns { gap: 2.5rem; }
	.single-post-main .wp-block-post-title { font-size: 28px; }
	.single-post-main .related-posts .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Blog article decorative icons (match prod's Elementor icon-lists + icon-boxes).
   On prod every in-content list carries a marker icon and the palette is MAUVE
   (primary) — distinct from the TEAL sidebar chrome above. Numbered lists (<ol>)
   are left untouched. Scoped to .wp-block-post-content so the related-posts row,
   meta, and sidebar are never affected.
     - default <ul>            -> mauve circle + white chevron  (generic lists)
     - .icon-list-check        -> mauve circle + white check    (benefit / "pros")
     - .icon-list-x            -> mauve circle + white cross     ("cons")
--------------------------------------------------------------------------- */
.single-post-main .wp-block-post-content ul:not(.icon-list-check):not(.icon-list-x),
.single-post-main .wp-block-post-content ul.icon-list-check,
.single-post-main .wp-block-post-content ul.icon-list-x {
	list-style: none;
	padding-left: 0;
}
.single-post-main .wp-block-post-content ul:not(.icon-list-check):not(.icon-list-x) > li,
.single-post-main .wp-block-post-content ul.icon-list-check > li,
.single-post-main .wp-block-post-content ul.icon-list-x > li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.55em;
}
.single-post-main .wp-block-post-content ul:not(.icon-list-check):not(.icon-list-x) > li::before,
.single-post-main .wp-block-post-content ul.icon-list-check > li::before,
.single-post-main .wp-block-post-content ul.icon-list-x > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.3em;
	height: 1.3em;
	font-size: 0.74em;
	background-color: var(--wp--preset--color--primary);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 52%;
	border-radius: 50%;
}
.single-post-main .wp-block-post-content ul:not(.icon-list-check):not(.icon-list-x) > li::before {
	background-image: var(--ico-chevron-w); /* chevron */
	background-size: 44%;
	font-size: 0.62em;
	top: 0.2em;
}
.single-post-main .wp-block-post-content ul.icon-list-check > li::before { background-image: var(--ico-check-w); } /* check */
.single-post-main .wp-block-post-content ul.icon-list-x > li::before { background-image: var(--ico-cross-w); }     /* cross */

/* Benefit icon badge — thin mauve outline circle with a mauve icon (matches
   prod's Elementor icon-box icons). Icon is an outline SVG masked with the
   current (mauve) color, so it stays crisp at any size and inherits the color. */
.benefit-icon {
	width: 58px;
	height: 58px;
	flex: 0 0 auto;
	border: 1px solid #cbb6dd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary);
}
.benefit-icon::before {
	content: "";
	width: 28px;
	height: 28px;
	background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}
.benefit-icon--check{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2013l4%204L19%207%27%2F%3E%3C%2Fsvg%3E");}
.benefit-icon--arrow{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2019V5%27%2F%3E%3Cpath%20d%3D%27M6%2011l6-6%206%206%27%2F%3E%3C%2Fsvg%3E");}
.benefit-icon--heart{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2020.3l-1.45-1.32C5.4%2014.36%202%2011.28%202%207.5%202%204.42%204.42%202%207.5%202c1.74%200%203.41.81%204.5%202.09C13.09%202.81%2014.76%202%2016.5%202%2019.58%202%2022%204.42%2022%207.5c0%203.78-3.4%206.86-8.55%2011.54L12%2020.3z%27%2F%3E%3C%2Fsvg%3E");}
.benefit-icon--weight{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M8%2015a4%204%200%200%201%208%200%27%2F%3E%3Cpath%20d%3D%27M12%2015l3-4%27%2F%3E%3C%2Fsvg%3E");}
.benefit-icon--calendar{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%2010h18%27%2F%3E%3Cpath%20d%3D%27M8%203v4%27%2F%3E%3Cpath%20d%3D%27M16%203v4%27%2F%3E%3C%2Fsvg%3E");}

/* Benefit cards — 2-up grid of bordered, centered cards (prod: hand-rejuvenation
   "Benefits" icon-boxes). The icon badge centers above a mauve title + gray copy. */
.single-post-main .benefit-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin: 1.5rem 0 1.75rem;
}
.single-post-main .benefit-card {
	border: 1px solid #e6e2ea;
	border-radius: 6px;
	padding: 2rem 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}
.single-post-main .benefit-card .benefit-icon { margin-bottom: 0.5rem; }
.single-post-main .benefit-card .wp-block-heading {
	color: var(--wp--preset--color--primary) !important;
	font-size: 1.15rem;
	margin: 0;
}
.single-post-main .benefit-card p {
	color: #6b6b6b;
	font-size: 0.95rem;
	margin: 0;
}

/* Benefit rows — icon on the left, title + copy on the right, stacked vertically
   (prod: tirzepatide "Benefits" icon-boxes with distinct per-benefit icons). */
.single-post-main .benefit-row {
	display: flex;
	align-items: flex-start;
	gap: 1.35rem;
	margin: 0 0 1.6rem;
}
.single-post-main .benefit-row__body { flex: 1; }
.single-post-main .benefit-row__body .wp-block-heading {
	color: var(--wp--preset--color--primary) !important;
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
}
.single-post-main .benefit-row__body p { margin: 0; }

@media (max-width: 781px) {
	.single-post-main .benefit-cards { grid-template-columns: 1fr; }
}