/* ===================================================================
   Gynecology Specialists — site-wide chrome (header, nav, footer)
   Shared palette with the page-specific stylesheets.
   =================================================================== */

:root {
 --gyn-dark:  	     #000000;
 --gyn-purple-dark:  #4b055b;
 --gyn-purple:       #6d2360;
 --gyn-purple-btn:   #511F63;
 --gyn-purple-light: #f2e7ef;
 --gyn-navy:         #0E152A;
 --gyn-green:        #99cc66;
 --gyn-text:         #333333;
 --gyn-text-light:   #6b6b6b;
 --gyn-border:       #e6e6e6;

 /* Canonical H1–H6 scale — the single source of truth for heading
    sizes site-wide. Previously every component (hero, cards,
    testimonials, Our Practice's own stylesheet, etc.) set its own
    independent font-size per heading, so an H2 in one place had no
    size relationship to an H2 anywhere else, and choosing H1 vs H6 in
    [gyn_heading] didn't change the size at all. These six variables
    are what every heading in the theme now references — component
    CSS still controls color/spacing/family, but not size, so "H3
    looks the same everywhere" actually holds. All responsive
    (clamp()), maxing out at 75/50/40/22px (H1–H4) on desktop and
    scaling down toward a smaller mobile minimum, rather than fixed
    pixel values that would stay the same size regardless of screen
    width. */
 --gyn-h1-size: clamp(36px, 6vw, 75px);
 --gyn-h2-size: clamp(28px, 4.5vw, 50px);
 --gyn-h3-size: clamp(24px, 3.5vw, 40px);
 --gyn-h4-size: clamp(18px, 2vw, 22px);
 --gyn-h5-size: clamp(1.125rem, 2vw, 1.25rem);/* 18px–20px */
 --gyn-h6-size: clamp(1rem, 1.5vw, 1.125rem); /* 16px–18px */
}
h1 { font-size: var(--gyn-h1-size); }
h2 { font-size: var(--gyn-h2-size); }
h3 { font-size: var(--gyn-h3-size); }
h4 { font-size: var(--gyn-h4-size); }
h5 { font-size: var(--gyn-h5-size); }
h6 { font-size: var(--gyn-h6-size); }
* {
	box-sizing: border-box;
}
body {
	/* This theme had no global font-family at all — individual
	   components each set their own (many to 'Montserrat', some to a
	   serif for headings), but anything that didn't set one fell
	   through to the browser's own default serif (confirmed directly:
	   removing .gyn-provider-card__name's font-family landed it on
	   Times New Roman, not this site's actual sans-serif). Montserrat
	   here as the real site-wide default means any element that
	   doesn't specify its own font-family now inherits the correct
	   one instead of an arbitrary browser default. */
	font-family: 'Montserrat', sans-serif;
}
/* Shared button styles — used by the Contact Us card in the hero
   (main.css's .hp-hero-full* block, further down) on every page, not
   just where these were originally written for the Home page's
   BioTE/ThermiVa/Providers sections. Moved here from home-page.css so
   they're available everywhere. */
.hp-btn {
	display: inline-block;
	text-align: center;
	padding: 12px 20px;
	border-radius: 6px;
	font-weight: 500;
	text-decoration: none;
	font-size: .95rem;
	transition: opacity .2s ease;
}
.hp-btn:hover { opacity: .85; }
.hp-btn--primary { background: var(--gyn-purple-btn); color: #fff; }
.hp-btn--primary.hp-btn--accent { color: var(--gyn-green); }
.hp-btn--green { background: var(--gyn-green); color: var(--gyn-purple-dark); font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .3px; }
.content-wrap {
	max-width: 1350px;
	margin: 0 auto;
	padding: 60px 24px;
}
/* ---------------- Header: overlay on hero ----------------
   .site-header__main (logo + nav) floats on top of the hero photo —
   the transparent nav-bar background (below) then lets the hero image
   show through behind the logo/menu. Applies on ANY page whose hero
   actually renders (body.has-hero-banner, added by
   gyn_add_hero_body_class() in inc/page-banner.php — checks the same
   banner meta gyn_render_hero_markup() checks), not just the Home
   template — a page with no hero photo configured has nothing for the
   header to overlay, so it stays in normal flow there instead.

   Only .site-header__main overlaps the hero — .site-header__utility
   (the top bar: portal login, phone, social icons) stays in normal
   document flow above it, not overlapping at all, so the hero image
   itself starts right at the nav row, not behind the utility bar too.
   .site-header__main's `top: 100%` needs .site-header itself — not
   .site-header__utility — to be the positioned ancestor: a sibling's
   position:relative does NOT make it the containing block for
   another sibling's position:absolute, only an actual ancestor can be
   (confirmed this was wrong first — .site-header__main ended up
   positioned relative to the viewport instead, landing hundreds of
   pixels too low). With .site-header itself set to position:relative,
   its own height becomes just the utility bar's height (the only
   child left contributing to normal flow, since .site-header__main is
   now absolute/out of flow), so `top: 100%` correctly lands exactly
   at the utility bar's bottom edge. */
body.has-hero-banner .site-header {
	position: relative;
}
body.has-hero-banner .site-header__main {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 100;
}
/* ---------------- Header: utility bar ---------------- */
.site-header__utility {
	background: var(--gyn-purple-dark);
	color: #fff;
	font-size: 17px;
}
.site-header__utility-inner {
	max-width: 1350px;
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
}
.utility-login-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	font-size: 17px;
	font-weight: 500;
	border: 2px solid var(--gyn-green);
	border-radius: 0;
	padding: 6px 14px;
}
.utility-login-btn img {
	flex: none;
}
.utility-login-btn:hover {
	background: rgba(255,255,255,.08);
}
.utility-office {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	letter-spacing: .3px;
}
.utility-office__icon {
	flex: none;
}
.utility-office a {
	color: #fff;
	text-decoration: none;
	font-weight: 400;
	margin-left: 4px;
}
.utility-social {
	display: flex;
	align-items: center;
	gap: 8px;
}
.utility-social a {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* ---------------- Header: main nav ---------------- */
.site-header__main {
	background: transparent !important;
	position: relative;
}
.site-header__nav-shape {
	/* This shape is pure white at ~80% opacity — proven by a pixel-diff
	   test (zero difference) to be completely invisible when placed
	   behind the white nav bar, regardless of height/positioning. It's
	   only visible here, overlapping the non-white hero photo below. */
	display: block;
	width: 100%;
	height: auto;
	margin-top: -1px;
	margin-bottom: -8vw; /* image is 1920:171 (~8.9% aspect) — pulls the
		hero up so the wave visibly overlaps its top edge. vw (not %)
		because vertical percentage margins are relative to the
		container's WIDTH, not the image's own height. */
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.site-header__main-inner {
	max-width: 1350px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 50px;
}
.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
}
.site-branding .site-title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--gyn-purple-dark);
	text-decoration: none;
	line-height: 1.2;
}
.site-branding .site-tagline {
	display: none;
}
.site-branding img {
	max-height: 71px;
	width: auto;
}
.main-navigation {
	margin-left: auto;
}
.mobile-navigation {
	/* Hidden by default (desktop) — the 900px breakpoint below
	   switches this to display:block as the mobile dropdown panel;
	   .main-navigation is the reverse (visible by default, hidden at
	   that same breakpoint), so exactly one of the two shows at any
	   given width. */
	display: none;
}
.main-navigation ul {
	display: flex;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-navigation a, .main-navigation a:visited {
	position: relative;
	text-decoration: none;
	color: var(--gyn-text) !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0;
	padding-bottom: 0;
}
.main-navigation a::after {
	/* Underline, previously drawn with border-bottom sitting right at
	   the link's own padding-bottom edge. Moved to a pseudo-element
	   positioned 10px below instead, so padding-bottom can go to 0
	   (shrinking the link's own box/click-padding) while the
	   underline still sits the same visual 10px below the text as
	   before — nothing about its position depends on padding anymore. */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	height: 2px;
	background: transparent;
}
.main-navigation a:hover {
	color: var(--gyn-purple) !important;
}
.main-navigation li.current-menu-item > a::after, .main-navigation a.is-active::after {
	background: var(--gyn-green, #A8D150);
}
/* ---------------- Header: nav dropdowns ----------------
   wp_nav_menu() already outputs .menu-item-has-children on any
   parent <li> and .sub-menu on the nested <ul> whenever someone
   nests items under Appearance > Menus — but nothing here styled
   that submenu before, so it would have rendered as an unstyled,
   always-visible nested list stacked directly under the parent link.
   Desktop: absolutely positioned dropdown panel, revealed on hover
   *and* :focus-within (not hover alone) so keyboard users tabbing
   through links can reach it too, not just mouse users. */
.main-navigation li.menu-item-has-children {
	position: relative;
}
.main-navigation li.menu-item-has-children > a {
	padding-right: 18px; /* room for the chevron below without it crowding the link text */
}
.main-navigation li.menu-item-has-children > a::before {
	/* Chevron indicator — a parent item looks identical to a plain
	   link otherwise, giving no visual cue a dropdown exists at all. */
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.main-navigation li.menu-item-has-children:hover > a::before,
.main-navigation li.menu-item-has-children:focus-within > a::before {
	transform: translateY(-30%) rotate(-135deg); /* flips to point up while open, the same "expanded" convention as the mobile accordion elsewhere on the site */
}
.main-navigation .sub-menu {
	display: block; /* overrides .main-navigation ul's display:flex — without this, sub-menu items inherit the top-level nav's horizontal flex layout instead of stacking vertically as a proper dropdown */
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(0,0,0,.15);
	border-radius: 6px;
	list-style: none;
	margin: 14px 0 0; /* the 14px gap is invisible/unhoverable, which would normally break hover-intent between the link and its dropdown — the :hover rule below is on the <li> (which this gap is still inside of, positioned relative to it), not the link or panel alone, so the gap never actually breaks the hover chain */
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	z-index: 200;
}
.main-navigation li.menu-item-has-children:hover > .sub-menu,
.main-navigation li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.main-navigation .sub-menu a {
	display: block;
	padding: 10px 20px;
	font-size: 16px; /* a step down from the 18px top-level links, so the dropdown reads as a clear sub-level rather than a same-weight continuation */
	white-space: nowrap;
}
.main-navigation .sub-menu a::after,
.main-navigation .sub-menu li.menu-item-has-children > a::before {
	display: none; /* the underline-on-hover and chevron are both top-level-nav conventions; a dense dropdown list reads more cleanly as plain highlighted rows (background-color below) — this also holds if a sub-menu ever nests a further level, since it can't show a WordPress-default third-level flyout with no CSS built for it */
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu li.current-menu-item > a {
	background: var(--gyn-purple-light);
	color: var(--gyn-purple) !important;
}
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	margin-left: auto;
	width: 44px;
	height: 44px; /* touch-friendly tap target (44px minimum), not just the visual icon's own smaller size */
	padding: 0;
	position: relative;
	z-index: 101; /* stays above .main-navigation's own mobile panel, which sits at a lower z-index below */
}
.menu-toggle span {
	width: 24px;
	height: 2px;
	background: var(--gyn-purple-dark);
	transition: transform .25s ease, opacity .2s ease;
}
.menu-toggle.is-open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2) {
	opacity: 0;
}
.menu-toggle.is-open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}
/* ---------------- Map & contact ----------------
   Moved here from home-page.css: this section now lives in footer.php
   (shared across every template via get_footer()), not just the Home
   Page template — so its CSS has to be in main.css, which loads on
   every page, rather than home-page.css, which only loads when the
   Home Page template is active. */
.hp-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1350px; margin: 0 auto; padding: 70px 24px; }
.hp-contact h2 { color: var(--gyn-purple-dark); margin-bottom: 20px; text-transform: uppercase; }
.hp-contact__map { border-radius: 8px; overflow: hidden; margin-bottom: 35px; }
.hp-contact__cities { columns: 2; padding: 0 0 0 20px; margin-top: 10px; }
.hp-contact__cities li { margin-bottom: 6px; }
.hp-contact__cities a { color: var(--gyn-dark); text-decoration: underline; font-size: 18px;}
.hp-contact__image {margin-bottom: 35px;}
.hp-contact__image img { width: 100%; border-radius: 8px;}
.hp-contact__details { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; text-transform: uppercase; }
.hp-contact__details li { display: flex; align-items: flex-start; gap: 14px; }
.map-desc p{font-size:24px; line-height:normal;}
.map-desc a{color:#330066;}
.hp-contact__icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--gyn-purple-dark);
	margin-top: 2px;
}
.hp-contact__icon svg { width: 100%; height: 100%; }
@media (max-width: 900px) {
	.hp-contact { grid-template-columns: 1fr; }
	.hp-testimonials {
		/* Photo hidden on mobile, per direct request — the layout
		   collapses from its desktop 2-column grid (content left,
		   photo right) to a single column so the quote content takes
		   the full width once the photo column is removed, rather
		   than leaving an empty column-sized gap where it used to be. */
		grid-template-columns: 1fr;
	}
	.hp-testimonials__media {
		display: none;
	}
}

/* ---------------- Service card (VC element) ----------------
   Moved here from home-page.css: [service_card] (inc/vc-elements/
   service-card.php) is a reusable VC/WPBakery element usable on any
   page, not just the Home Page template — so its CSS has to be in
   main.css, which loads everywhere, rather than home-page.css, which
   is conditionally loaded only when that specific template is active.
   Uses the same --gyn-* variables as the rest of this file (the
   original used home-page.css's --hp-* names, scoped to
   .home-page-template, which wouldn't resolve outside that template). */
.hp-service-card {
	background: var(--service-card-bg-color, var(--gyn-purple-light));
	border-radius: 10px;
	overflow: hidden;
	text-align: left;
	box-shadow: 0 4px 20px rgba(0,0,0,.06);
	padding-bottom: 24px;
}
.hp-service-card--box-link {
	/* The card becomes an <a> tag when box_link is on — reset the
	   default link appearance (color/underline) it would otherwise
	   inherit, since every other property here targets a plain <div>
	   normally. */
	display: block;
	color: inherit;
	text-decoration: none;
	transition: box-shadow .2s ease;
}
.hp-service-card--box-link:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
/* Equal card-background height for [service_card]s in a WPBakery row.
   Deliberately scoped to a dedicated opt-in class, .gyn-equal-height —
   added via that row's "Extra Class Name" field — rather than VC's
   own vc_row-o-equal-height (added automatically by its "Equal
   height" row toggle). Two reasons: (1) that toggle may be used on
   rows that were never meant to get this specific card-stretching
   treatment, so tying it to VC's own class would apply this more
   broadly than intended; (2) VC ships its own default CSS for
   vc_row-o-equal-height, and relying on that class risked this
   fix's rules losing a specificity fight against VC's own — a
   dedicated class sidesteps that entirely rather than trying to out-
   specificity an unknown ruleset. The properties that actually matter
   for the fix (height, flex layout, margin-top: auto) are !important,
   so this can't lose to VC's own equal-height CSS regardless of load
   order or specificity, however VC's own rules happen to be written.

   The mismatch this fixes: VC's equal-height option stretches each
   *column* to match the tallest one in the row, but .hp-service-card
   itself only ever sized to its own content — with a shorter
   description, its card (and the pink background that comes with it)
   stayed shorter than a neighboring card with more text, even though
   the columns around them were already equal height. Making the card
   and its containing wrapper stretch to fill that column fixes it:
   the card's pink background now matches its tallest sibling, and
   margin-top: auto keeps the Learn More link pinned to the bottom
   regardless of how many lines the description wraps to, so the
   buttons stay aligned across cards too, not just the backgrounds.
   Confirmed by reproducing the actual mismatch first (a longer
   description made one card ~21px taller than its neighbors) before
   verifying this brings all three back to the exact same height. */
.gyn-equal-height .vc_column-inner,
.gyn-equal-height .wpb_wrapper {
	height: 100% !important;
}
.gyn-equal-height .hp-service-card {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}
.gyn-equal-height .hp-service-card__link {
	margin-top: auto !important;
}
/* Same fix, same technique, extended to [info_card] — a row of
   info_cards with descriptions of different lengths (e.g. the phone/
   fax/address/hours row on the Location page) has exactly the same
   mismatch service_card had: WPBakery's equal-height option stretches
   each *column*, but the card inside it only ever sized to its own
   content, so a card with a longer description stayed visually
   shorter than its neighbors despite the columns around them already
   matching. One class covers both elements — a row with cards of
   either kind (or a mix) only needs gyn-equal-height added once. */
.gyn-equal-height .gyn-info-card {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}
.gyn-equal-height .gyn-info-card__button {
	margin-top: auto !important;
	/* Without this, the button stretches to fill the card's full
	   width — flex items are blockified (an inline-block button's
	   computed display becomes block once it's a flex child) and the
	   container's default align-items:stretch then stretches it
	   across the cross axis, undoing the content-sized button fix
	   from earlier. align-self overrides stretch for this one child
	   without having to change align-items on the container itself
	   (which would also affect .gyn-info-card__top/__description,
	   whose full-width behavior is intentional either way). */
	align-self: flex-start !important;
}
.gyn-equal-height .gyn-info-card--center .gyn-info-card__button {
	align-self: center !important;
}
.hp-service-card__media {
	position: relative;
	line-height: 0;
	margin-bottom: 70px; /* icon overlaps 60px below this container now (120px icon / 2) — was 34px with the old 68px icon, so this needed to grow too or the title text collides with the icon */
	aspect-ratio: 2 / 1; /* matches the original design's photo proportions — fixed regardless of whatever image is uploaded, so the curve/icon positions below never shift based on a photo's own dimensions */
}
.hp-service-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-service-card__shape {
	/* The curved bottom edge on the photo — previously baked into the
	   specific pre-made image files this card used to be limited to.
	   Drawn here in CSS/SVG instead so it works with any uploaded
	   photo. Color is per-instance via --service-card-shape-color
	   (set inline by the shortcode), defaulting to the card's own
	   background so it blends in unless overridden. */
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30%;
	display: block;
}
.hp-service-card__shape path { fill: var(--service-card-bg-color, var(--gyn-purple-light)); }
.hp-service-card__icon {
	/* Base circle styling, shared by both contexts this can appear in
	   — overlapping a photo's curve (.hp-service-card__media > this)
	   or standalone in normal flow (inside .hp-service-card__icon-wrap,
	   when the card has no photo at all). Positioning lives on the
	   wrapper/selector, not here, so the same circle works either way.
	   No background here per request — the icon renders on whatever's
	   behind it (the photo/curve, or the card body). */
	width: 120px;
	height: 120px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hp-service-card__icon img { width: 120px; height: 120px; object-fit: contain; }
.hp-service-card__media > .hp-service-card__icon {
	/* Icon overlapping a photo's curve — matches based on being a
	   direct child of .hp-service-card__media, not a modifier class,
	   so this applies automatically whether the icon came from the
	   original hardcoded markup in template-home.php or the new
	   [service_card] shortcode — no template changes needed either
	   way. bottom: -60px is half the icon's 120px height, keeping it
	   centered on the curve exactly like the old -34px did for the
	   previous 68px size — the offset must always be exactly half the
	   icon's own height for it to straddle the curve correctly. */
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
.hp-service-card__icon-wrap {
	/* No-photo layout: icon centered in normal document flow at the
	   top of the card, instead of absolutely overlapping a photo that
	   doesn't exist in this variant. */
	display: flex;
	justify-content: center;
	padding-top: 40px;
	margin-bottom: 28px;
}
.hp-service-card h3 { color: var(--gyn-purple-dark); font-family: Georgia, 'Playfair Display', serif; font-weight: 400; text-align: center; margin: 0 20px 14px; }
.hp-service-card p { color: var(--gyn-text-light); font-size: .88rem; text-align: center; margin: 0 20px 14px; line-height: 1.5; }
.hp-service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gyn-purple-dark);
	font-weight: 700;
	font-size: .82rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin: 0 20px;
}
.hp-service-card__link::after { content: '\2192'; }
.hp-service-card__link:hover { text-decoration: underline; }

/* ---------------- Testimonials slider (VC element) ----------------
   Moved here from home-page.css for the same reason as the service
   card above: [testimonials_slider] needs to work on any page, not
   just the Home Page template. Extended with slide-switching (only
   one .hp-testimonials__slide / .hp-testimonials__media-slide has
   .is-active at a time — toggled by assets/js/testimonials-slider.js)
   and clickable dot buttons, on top of the single-testimonial layout
   this originally was. */
.hp-testimonials { display: grid; grid-template-columns: 1fr 1fr; background: var(--gyn-purple-dark); color: #fff; }
.hp-testimonials--no-image {
	/* Show featured image = off — content expands to fill the space
	   the photo column would have used, instead of leaving an empty
	   second column. */
	grid-template-columns: 1fr;
}
.hp-testimonials__content {
	padding-top: 80px;
	padding-bottom: 80px;
	padding-right: 60px;
	/* Left edge matches .hp-section's standard content edge (max-width:
	   1350px, centered, 24px inner padding) — this section is
	   full-bleed (no max-width wrapper of its own), so without this its
	   text sat at a fixed 60px from the viewport edge regardless of
	   screen width, drifting out of alignment with the contained
	   sections above/below it on anything wider than ~1400px. Needs
	   100vw specifically, not 100% — this element sits inside a
	   50%-width grid column (.hp-testimonials' two-column grid), so a
	   percentage here would resolve against that half-width column, not
	   the full viewport, and calculate the wrong offset entirely. No
	   separate max-width here (there was one, briefly) — it fought with
	   this padding, since border-box sizing counts padding against
	   max-width, so a wide-viewport padding-left of 200px+ combined
	   with max-width:560px squeezed the actual text down to an
	   unreadable ~266px. The padding alone already keeps the column a
	   sensible ~590px wide on typical screens, without a second
	   constraint working against the first. */
	padding-left: max(24px, calc((100vw - 1350px) / 2 + 24px));
	align-self: center;
}
.hp-testimonials__content h2 { font-weight: 500; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.hp-quote-mark { display: block; width: 80px; height: auto; margin: 0 0 40px; }
.hp-testimonials__slides { position: relative; margin-bottom: 24px; }
.hp-testimonials__slide {
	display: none;
	margin: 0;
	font-size: 28px; /* was 1.3rem (~20.8px) */
	line-height: 1.6;
	opacity: 0;
	transition: opacity .25s ease;
}
.hp-testimonials__slide.is-active { display: block; }
.hp-testimonials__slide.is-visible { opacity: 1; }
.hp-testimonials__slide p { margin: 0 0 14px; }
.hp-testimonials__dots { display: flex; gap: 8px; }
.hp-testimonials__dots span,
.hp-testimonials__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.4);
	cursor: pointer;
	transition: background .25s ease;
}
.hp-testimonials__dots span:first-child { background: var(--gyn-green); }
.hp-testimonials__dot.is-active { background: var(--gyn-green); }
.hp-testimonials__media { position: relative; }
.hp-testimonials__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-testimonials__media > .hp-testimonials__media-slide {
	/* Specificity note: this must beat the .hp-testimonials__media > img
	   rule above (kept for the old hardcoded single-photo markup) —
	   confirmed via a real bug where all slides ended up display:block
	   simultaneously because that compat rule's class+element
	   specificity was quietly overriding this one's display:none. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none; /* inactive slides sit fully stacked underneath — keep them out of the way of clicks/focus even while technically visible during the crossfade */
}
.hp-testimonials__media > .hp-testimonials__media-slide.is-active {
	opacity: 1;
	position: relative; /* the active slide establishes the media column's height via normal flow, matching how the old single-photo img did — the inactive ones stay position:absolute underneath it */
	pointer-events: auto;
}

/* ---------------- Full-bleed hero (Home + generic page banner) ----------------
   Moved here from home-page.css: originally built for the Home page's
   hero only, this is now reused as-is by the generic page banner
   (inc/page-banner.php, gyn_render_page_banner()) for every other
   page too — same full-bleed photo, same absolutely-positioned
   heading/description, same Contact Us card — so it has
   to live in main.css, which every page loads, not home-page.css,
   which only loads for the Home template specifically.
   --hp-purple-dark / --hp-purple / --hp-purple-btn (home-page.css's
   own scoped variables) became --gyn-purple-dark / --gyn-purple /
   --gyn-purple-btn (already global in this file's :root) in the move. */
.hp-hero-full {
	position: relative;
	width: 100%;
	min-height: 500px; /* reasonable default with no banner image set — just enough for the Contact Us card, not the huge photo-sized aspect-ratio below */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.hp-hero-full--has-image {
	aspect-ratio: 1920 / 927; /* scales proportionally with viewport width */
	max-height: 927px; /* caps at the design's native height on very wide screens instead of growing past it */
}
.hp-hero-full__heading {
	position: absolute;
	left: 14.58%;
	top: 30.08%;
	width: 32%; /* was 36.67% — narrowed to match the value repeated across every non-Home page's custom CSS */
	text-align: left; /* was center — every non-Home page overrode this to left */
}
/* Targets h1/h2/p generically rather than a specific class — the
   content here now comes from one free-form wp_editor() field (see
   inc/page-banner.php) where the person picks Heading/Subheading/
   Paragraph via the format dropdown, not fixed template slots, so
   the CSS needs to style whichever tags they actually used rather
   than expecting one specific one. margin-bottom on each with the
   last child's cleared keeps spacing consistent regardless of which
   combination of tags ends up in the content, or how many of them. */
.hp-hero-full__heading h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height: 1.15;
	color: var(--gyn-purple-dark);
	margin: 0 0 14px;
	border-bottom: 2px solid #99cc66;
	text-transform: uppercase;
}
.hp-hero-full__sub-heading {
	/* Doesn't match any element in this theme's actual markup yet —
	   the hero's <h2> is styled generically via
	   .hp-hero-full__heading h2 below, not this class. Included here
	   per direct request to consolidate it into main.css regardless;
	   it'll take effect once something in the markup actually carries
	   this class. */
	color: #000000 !important;
	line-height: 35px !important;
	font-weight: 500 !important;
}
.hp-hero-full__heading h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	line-height: 1.3;
	color: var(--gyn-purple);
	margin: 0 0 10px;
}
.hp-hero-full__heading h3,
.hp-hero-full__heading h4,
.hp-hero-full__heading h5,
.hp-hero-full__heading h6 {
	/* The Paragraph dropdown offers the full Heading 1–6 range (this
	   is the standard, uncustomized classic editor), not just h1/h2 —
	   these keep h3–h6 presentable if chosen, stepping down from h2's
	   treatment, rather than falling back to the browser's unstyled
	   default (bold serif-ish black text) within the purple/photo
	   hero area. Font-size now comes from the global H3–H6 scale
	   (removed from here), so h3/h4/h5/h6 are no longer identical to
	   each other — each renders at its own distinct size. */
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	line-height: 1.3;
	color: var(--gyn-purple);
	margin: 0 0 8px;
}
.hp-hero-full__heading p {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #000;
	line-height: 1.6;
	margin: 0; /* was 0 0 60px — updated to the value requested directly here, removing the need for the !important override that used to live in style.css for this same property */
}
.hp-hero-full__heading > *:last-child { margin-bottom: 0; }
.hp-hero-full__contact-card {
	position: absolute;
	/* Aligns the card's right edge with the same 1350px content wrapper
	   used by the sections below (Services Provided, etc.), instead of
	   a percentage of the full-bleed hero — so it lines up with the
	   page's actual content edge at any viewport width. A 24px floor
	   is included (reinstated as part of making the hero responsive) —
	   without it, calc((100% - 1350px) / 2) goes negative below
	   ~1350px and pushes the card off the right edge of the viewport;
	   confirmed this actually happened at 1024px width before adding
	   the floor back. */
	right: max(24px, calc((100% - 1350px) / 2));
	top: 57%;
	bottom: 0; /* touches the bottom of the hero photo */
	width: 20.81%;
	min-width: 160px;
	max-width: 345px;
	background: rgba(255, 255, 255, 0.88);
	border-radius: 0;
	box-shadow: 0 15px 40px rgba(0,0,0,.25);
	padding: 0 30px 0 30px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hp-hero-full__contact-card-title {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 -30px 0;
	padding: 14px 16px;
	background: #CABECC;
	color: var(--gyn-purple-dark);
	font-size: clamp(.75rem, 1vw, 1rem);
	text-transform: uppercase;
	letter-spacing: .3px;
	border-radius: 0;
}
.hp-hero-full__contact-card-toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--gyn-purple-dark);
	font-size: 1.1rem;
	line-height: 1;
	opacity: .7;
}
.hp-hero-full__contact-card-toggle:hover { opacity: 1; }
.hp-hero-full__contact-card-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}
/* Collapsed state: keeps the bottom:0 anchor (still touching the hero's
   bottom edge, same as expanded) and frees `top` instead — so the card
   shrinks to just its header bar from the TOP down, ending up sitting
   near the bottom of the hero rather than floating wherever `top: 50%`
   put it. The body — intro text + scrollable link list — is hidden.
   Toggled by contact-card-toggle.js, which also swaps the button's
   glyph between "—" and "+" and updates aria-expanded. */
.hp-hero-full__contact-card.is-collapsed { top: auto; }
.hp-hero-full__contact-card.is-collapsed .hp-hero-full__contact-card-body { display: none; }
.hp-hero-full__contact-card-body > p { flex: none; text-align: center; margin: 10px 0 4px; font-size: 18px; color: var(--gyn-purple-dark); font-weight: 700; }
.hp-hero-full__contact-card-links {
	/* Sized (via the card's own top/bottom) to fit ~7 links at the
	   design's reference width. Once content needs more room than
	   that — an 8th link, or a narrower viewport — this scrolls
	   internally instead of pushing the card past the hero photo. */
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--gyn-purple-btn) transparent;
}
.hp-hero-full__contact-card-links::-webkit-scrollbar { width: 6px; }
.hp-hero-full__contact-card-links::-webkit-scrollbar-track { background: transparent; }
.hp-hero-full__contact-card-links::-webkit-scrollbar-thumb { background: var(--gyn-purple-btn); border-radius: 3px; }
.hp-hero-full__contact-card .hp-btn { flex: none; font-size: 18px; padding: clamp(4px, 1vw, 9px) 10px; }
.hp-hero__shadow {
	display: block;
	width: 100%;
	height: 25px; /* matches hp-hero-shadow.png's native 1910x25 */
	margin-top: -1px;
	background-image: url('../images/hp-hero-shadow.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* ---------------- Standalone heading / subheading (VC elements) ----------------
   [gyn_heading] / [gyn_subheading] (inc/vc-elements/heading.php,
   subheading.php) — styling is tied to these classes, not to which
   HTML tag is used, so an editor's choice of H1–H6/div for document
   structure never changes the visual size/weight. Normal document
   flow (unlike .hp-hero-full__heading, which is absolutely positioned
   for the hero specifically) — these are meant to work as ordinary
   content blocks anywhere on a page. */
.gyn-heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gyn-purple-dark);
	margin: 0 0 .5em;
}
div.gyn-heading {
	/* The "Div (no heading semantics)" tag option isn't covered by
	   the global h1-h6 rules (a <div> has no inherent heading size),
	   so it needs its own explicit fallback here — sized to match H2,
	   a reasonable default for a heading-styled element that isn't
	   semantically any specific level. */
	font-size: var(--gyn-h2-size);
}
.gyn-heading--center { text-align: center; }
.gyn-heading--right { text-align: right; }
.gyn-heading__link {
	color: inherit;
	text-decoration: none;
}
.gyn-heading__link:hover {
	text-decoration: underline;
}
.gyn-subheading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 2vw, 1.4rem);
	line-height: 1.4;
	color: var(--gyn-purple);
	margin: 0 0 .5em;
}
.gyn-subheading--center { text-align: center; }
.gyn-subheading--right { text-align: right; }

/* ---------------- Info card (VC element) ----------------
   [info_card] (inc/vc-elements/info-card.php) — one flexible
   structure covering four different reference designs (Call Us,
   Ready to Schedule, Map/Location card, Rating) via CSS custom
   properties set inline per-instance (--info-card-heading-color etc.)
   and two layout variants. */
.gyn-info-card {
	border-radius: 10px;
	padding: 24px;
}
.gyn-info-card--no-bg { padding: 0; }
.gyn-info-card--center { text-align: center; }
.gyn-info-card__top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px; /* was 10px — matches the 20px gap now used consistently between .top/.description/.button */
}
.gyn-info-card--stacked .gyn-info-card__top {
	flex-direction: column;
	text-align: center;
}
.gyn-info-card--center .gyn-info-card__top { justify-content: center; }
.gyn-info-card__heading-group {
	/* Groups heading + subheading into one stacked column beside the
	   icon — e.g. "CALL US" and the phone number both sit to the
	   icon's right, not just the heading with the phone number
	   spanning full-width on its own row below. Reported directly
	   from the rendered card not matching this — the icon needs to
	   sit beside *both* lines as a pair, not just the first one. */
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0; /* lets long heading/phone-number text wrap instead of overflowing the card, same reason flex children generally need this */
}
.gyn-info-card--stacked .gyn-info-card__heading-group { align-items: center; }
.gyn-info-card__icon {
	flex: none;
	width: var(--info-card-icon-size, 150px); /* was a fixed 150px — now configurable per instance, still defaulting to 150px */
	height: var(--info-card-icon-size, 150px);
	border-radius: 50%;
	background: var(--info-card-icon-bg, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.gyn-info-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.gyn-info-card__heading {
	font-weight: var(--info-card-heading-weight, 400);
	font-size: 25px; /* was 1.3rem (~20.8px) — repeated across every page using [info_card] */
	line-height: 1.25;
	color: var(--info-card-heading-color, var(--gyn-purple-dark));
	text-transform: var(--info-card-heading-transform, none);
	margin: 0;
}
.gyn-info-card__heading-link {
	color: inherit;
	text-decoration: none;
}
.gyn-info-card__heading-link:hover {
	text-decoration: underline;
}
.gyn-info-card__subheading {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 1.6rem;
	color: var(--info-card-subheading-color, var(--gyn-green));
	margin: 0;
}
.gyn-info-card__subheading a {
	/* Covers both the Subheading link field's <a> and any link typed
	   directly into Subheading itself — resets the browser's default
	   blue/underline so it matches the subheading's own color instead,
	   since a nested <a> doesn't inherit a parent's text color
	   automatically. */
	color: inherit;
	text-decoration: none;
}
.gyn-info-card__subheading a:hover {
	text-decoration: underline;
}
.gyn-info-card__description {
	font-size: 18px; /* was 1rem (16px) */
	line-height: 1.5;
	color: var(--info-card-description-color, #000000); /* fallback was var(--gyn-text) (gray) — changed to black to match the repeated override, but kept as a var() fallback rather than a hardcoded color, so the description_color shortcode attribute still works per-instance */
	text-align: justify; /* repeated across every page */
	margin: 0 0 20px 0;
}
.gyn-info-card--inline:not(.gyn-info-card--center) .gyn-info-card__description {
	/* Aligns with the heading's own left edge — icon size (now
	   configurable via --info-card-icon-size, defaulting to 150px) +
	   the .gyn-info-card__top gap (14px), the same offset the heading
	   already sits at next to the icon. Uses calc() with the same
	   variable the icon itself uses, rather than a hardcoded pixel
	   value, so this stays correct whatever icon size is actually set
	   instead of only matching the old fixed 150px default. Without
	   this, the description (a direct child of the card, not nested
	   inside .gyn-info-card__top alongside the icon/heading) started
	   flush at the card's own left padding instead, under the icon
	   rather than under the heading — confirmed from a live
	   screenshot showing the two starting at different x-positions.
	   Excludes --center specifically: with align="center", the
	   description is already correctly centered by
	   .gyn-info-card--center's own text-align:center — adding this
	   offset there would shove already-centered text off-center
	   instead of aligning anything. */
	margin-left: calc(var(--info-card-icon-size, 150px) + 14px);
}
.gyn-info-card--description-full .gyn-info-card__description {
	/* Opt-out of the indent above — a second reference card ("Ready
	   to take the next step?") turned out to want the description
	   spanning the card's full width instead, starting at the icon's
	   own left edge rather than the heading's. Measured both
	   references directly rather than assuming one behavior fits
	   every inline card: the indented version and this full-width
	   version are genuinely different, intentional designs, not one
	   being a bug and the other correct. !important is required, not
	   decorative — confirmed by testing without it first: the rule
	   above has higher specificity (its :not() pseudo-class counts as
	   a class-level selector, giving it three total against this
	   rule's two), so margin-left stayed 70px instead of resetting to
	   0 until !important was added. */
	margin-left: 0 !important;
}
.gyn-info-card__description p { margin: 0 0 .75em; }
.gyn-info-card__description p:last-child { margin-bottom: 0; }
.gyn-info-card__divider {
	border: none;
	border-top: 2px solid var(--info-card-divider-color, #fff);
	margin: 20px 0;
}
.gyn-info-card__button {
	display: inline-block;
	text-align: center;
	padding: 5px 20px; /* was 14px 20px — repeated across every page using [info_card] */
	border-radius: 6px;
	background: var(--info-card-button-color, var(--gyn-green));
	color: var(--info-card-button-text-color, var(--gyn-purple-dark));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	text-decoration: none;
	margin-top: 0; /* was 16px — the 20px gap now comes from the preceding element's own bottom margin (.top or .description), so this doesn't need to add its own on top */
	transition: opacity .2s ease;
}
.gyn-info-card__button:hover { opacity: .85; }

/* ---------------- Map section (VC element) ----------------
   [map_section] (inc/vc-elements/map-section.php) — a full-width map
   iframe with a location card overlaid on top of it, left or right
   side. Distinct from [info_card] (which is the card alone, meant to
   sit inline in a page's normal flow) since this specific combination
   — card floating directly on a map — needed its own absolutely-
   positioned container. */
.gyn-map-section {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.gyn-map-section__iframe {
	display: block;
	width: 100%;
	height: 100%;
}
.gyn-map-section__card {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 380px;
	max-width: calc(100% - 48px);
	background: var(--gyn-purple-dark);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 15px 40px rgba(0,0,0,.3);
	padding: 30px;
}
.gyn-map-section__card--left { left: 14.58%; } /* was 24px — repeated across every page using [map_section] */
.gyn-map-section__card--right { right: 24px; }
.gyn-map-section__card-top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.gyn-map-section__card-icon {
	flex: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gyn-map-section__card-icon img { width: 100%; height: 100%; object-fit: contain; }
.gyn-map-section__card-heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.25;
	color: var(--gyn-green);
	text-transform: uppercase;
	margin: 0;
}
.gyn-map-section__card-address {
	font-size: 1.1rem;
	line-height: 1.5;
	color: #fff;
}
.gyn-map-section__card-divider {
	border: none;
	border-top: 2px solid #fff;
	margin: 24px 0;
}
.gyn-map-section__card-button {
	display: block;
	text-align: center;
	padding: 5px 20px; /* was 16px 20px */
	border-radius: 6px;
	background: var(--gyn-green);
	color: var(--gyn-purple-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	text-decoration: none;
	transition: opacity .2s ease;
}
.gyn-map-section__card-button:hover { opacity: .85; }
@media (max-width: 700px) {
	.gyn-map-section { height: auto !important; overflow: visible; }
	.gyn-map-section__iframe { height: 300px; }
	.gyn-map-section__card { position: static; transform: none; width: auto; max-width: none; margin: 16px; border-radius: 8px; }
}

/* ---------------- Logo heading (VC element) ----------------
   [gyn_logo_heading] (inc/vc-elements/logo-heading.php) — text +
   logo image on one line, e.g. "About bioTE". Same visual pattern as
   the Home page's hardcoded .hp-split__content h2 (About BioTE/About
   ThermiVa), rebuilt with its own global classes so it works as a
   reusable element on any page, not just there. */
.gyn-logo-heading {
	display: flex;
	align-items: center;
	gap: 20px; /* was 14px — repeated across every page using [gyn_logo_heading] */
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--gyn-logo-heading-color, var(--gyn-purple-dark));
	margin: 0;
}
.gyn-logo-heading__link {
	/* When Link URL is set, the heading's only direct child becomes
	   this <a> (wrapping the text+image) instead of the text/image
	   directly — needs its own flex layout to keep them laid out
	   side-by-side the same way, and a reset so it doesn't pick up
	   the browser's default link color/underline instead of the
	   heading's own color. */
	display: flex;
	align-items: baseline;
	gap: 20px;
	color: inherit;
	text-decoration: none;
}
.gyn-logo-heading--center { justify-content: center; }
.gyn-logo-heading--right { justify-content: flex-end; }
.gyn-logo-heading__logo { width: auto; display: block; }

/* ---------------- Provider card (VC element) ----------------
   [provider_card] (inc/vc-elements/provider-card.php) — oval photo
   (a rectangle with border-radius:50%, which resolves to a true
   ellipse matching the box's own aspect ratio) with a green border, a
   curved semi-transparent purple overlay across the bottom third
   with social icons on top of it, then name + credentials below. */
.gyn-provider-card {
	text-align: center;
	max-width: 340px;
	margin: 0 auto;
}
.gyn-provider-card__photo-frame {
	position: relative;
	/* Exact proportions from the supplied reference's fixed pixel
	   values (width:250px, height:380px, border-radius:125px, all
	   uniform — not the asymmetric 48%/36% shape from measuring a
	   separate reference image earlier). 125px is exactly 50% of the
	   250px width and 32.9% of the 380px height, converted here to
	   percentages so it stays correct at any size instead of only
	   matching at exactly 250x380. */
	aspect-ratio: 250 / 380;
	border-radius: 50% / 32.9%;
	border: 6px solid var(--provider-card-border-color, var(--gyn-green));
	overflow: hidden;
	background: #eee;
}
@media (min-width: 901px) {
	.gyn-provider-card__photo-frame {
		/* Explicit desktop height, per direct request — aspect-ratio
		   above still applies, so it derives the matching width from
		   this height (roughly 266px, preserving the same stadium
		   shape proportions) rather than the two conflicting. Scoped
		   to desktop only (901px+, right where the theme's existing
		   900px tablet cutoff ends) so it doesn't affect the separate
		   mobile max-width:220px rule elsewhere in this file. */
		height: 405px;
	}
}
.gyn-provider-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s cubic-bezier(.25,1,.5,1);
}
.gyn-provider-card__photo-link {
	/* Wraps the <img> only when Photo link URL is set — fills the
	   frame the same way the bare <img> does when there's no link, so
	   the existing hover-zoom transform (below, still targeting
	   .gyn-provider-card__photo directly through this wrapper) and
	   layout are unaffected either way. */
	display: block;
	width: 100%;
	height: 100%;
}
.gyn-provider-card__photo-frame:hover .gyn-provider-card__photo {
	/* Subtle zoom on hover — adapted from a supplied reference
	   implementation; not present before. */
	transform: scale(1.05);
}
.gyn-provider-card__overlay-shape {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transform: translateY(100%); /* Hides shape below container — exact mechanism from the supplied reference, not the opacity+small-slide used before. */
	transition: transform .4s cubic-bezier(.25,1,.5,1);
}
.gyn-provider-card__social {
	position: absolute;
	left: 0;
	bottom: 30px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .4s cubic-bezier(.25,1,.5,1), transform .4s cubic-bezier(.25,1,.5,1);
	pointer-events: none;
}
.gyn-provider-card__photo-frame:hover .gyn-provider-card__overlay-shape,
.gyn-provider-card__photo-frame:focus-within .gyn-provider-card__overlay-shape {
	/* Slides the whole purple shape up from below the frame on hover —
	   transform only, matching the supplied reference's .overlay-svg
	   exactly (it never toggles opacity or pointer-events; it's purely
	   decorative, so pointer-events stays permanently none on the base
	   rule above rather than being toggled here). */
	transform: translateY(0);
}
.gyn-provider-card__photo-frame:hover .gyn-provider-card__social,
.gyn-provider-card__photo-frame:focus-within .gyn-provider-card__social {
	/* Social icons still need pointer-events toggled, unlike the
	   decorative overlay shape above — these are real links (email/
	   Facebook), and :focus-within alongside :hover keeps them
	   reachable by keyboard, not just mouse hover, matching the
	   accessibility fix from before. */
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.gyn-provider-card__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--provider-card-border-color, var(--gyn-green));
	color: var(--provider-card-border-color, var(--gyn-green)); /* was !important — that beat even this component's own :hover rule below (which has no !important), so the color stayed stuck on hover instead of switching to purple, making the icon invisible against its own green hover background. The :where(.entry-content) fix elsewhere handles the original conflict this was trying to guard against, without needing !important at all. */
	text-decoration: none; /* .entry-content a sets underline on every link — this is an icon-only circular button, never meant to show one. Now protected by :where(.entry-content) (see default-wp.css) rather than !important here. */
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.gyn-provider-card__social-icon:hover {
	/* Filled state + slight scale on hover — adapted from a supplied
	   reference implementation, which fills the icon circle with its
	   own border color, inverts the glyph to the card's overlay
	   color, and scales up slightly on hover, rather than leaving the
	   icon static once the card itself is already hovered. */
	background-color: var(--provider-card-border-color, var(--gyn-green));
	color: var(--provider-card-overlay-color, var(--gyn-purple-dark));
	transform: scale(1.1);
}
.gyn-provider-card__social-icon svg { width: 20px; height: 20px; }
.gyn-provider-card__name {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--provider-card-name-color, var(--gyn-purple-dark));
	margin: 20px 0 8px;
}
.gyn-provider-card__name-link {
	/* When Link URL is set, the h3's content is this <a> instead of
	   plain text — reset so it inherits the heading's own color
	   rather than the browser's default blue/underline. */
	color: inherit;
	text-decoration: none;
}
.gyn-provider-card__name-link:hover {
	text-decoration: underline;
}
.gyn-provider-card__credentials {
	font-size: .85rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--gyn-text);
	line-height: 1.5;
}

/* ---------------- Photo topic card (VC element) ----------------
   [photo_topic_card] (inc/vc-elements/photo-topic-card.php) — a
   simpler sibling of [service_card]: a straight-edged rectangular
   photo (no curve, no icon badge) with a centered heading,
   description, and button below it. */
.gyn-photo-topic-card {
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.gyn-photo-topic-card__media { line-height: 0; }
.gyn-photo-topic-card__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gyn-photo-topic-card__body { padding: 24px; }
.gyn-photo-topic-card__heading {
	font-size: 25px; /* was 1.4rem — repeated across every page using [photo_topic_card] */
	font-weight: var(--photo-topic-card-heading-weight, 400);
	line-height: 1.3;
	color: var(--photo-topic-card-heading-color, var(--gyn-purple-dark));
	text-transform: var(--photo-topic-card-heading-transform, none);
	margin: 0 0 12px;
}
.gyn-photo-topic-card__description {
	font-size: 18px; /* was .95rem */
	line-height: 1.6;
	color: var(--photo-topic-card-description-color, #000000); /* fallback was var(--gyn-text) — updated to match the repeated override, kept as var() fallback so description_color still works per-instance */
	text-align: justify; /* repeated across every page */
	margin: 0 0 20px;
}
.gyn-photo-topic-card__button {
	display: inline-block;
	padding: 5px 20px; /* was 12px 24px — repeated across every page using [photo_topic_card] */
	border-radius: 6px;
	background: var(--photo-topic-card-button-color, var(--gyn-green));
	color: var(--photo-topic-card-button-text-color, var(--gyn-purple-dark));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	text-decoration: none;
	transition: opacity .2s ease;
}
.gyn-photo-topic-card__button:hover { opacity: .85; }

/* ---------------- Feature row (VC element) ----------------
   [feature_row] (inc/vc-elements/feature-row.php) — a genuine
   two-column layout: a large fixed-size icon circle on the left,
   heading + description stacked in a column to its right. Colors are
   set inline per-instance via plain style="" (not CSS custom
   properties like [info_card]/[service_card] use) since every color
   here is a solid, one-off value with no fallback-to-theme-default
   needed — simpler than the custom-property indirection those other
   two elements use for the same purpose. */
.gyn-feature-row {
	display: flex;
	align-items: center;
	gap: 24px;
}
.gyn-feature-row__icon {
	flex: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gyn-feature-row__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.gyn-feature-row__text { flex: 1; min-width: 0; }
.gyn-feature-row__heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1.2;
	margin: 0 0 8px;
}
.gyn-feature-row__description {
	font-size: 1.05rem;
	line-height: 1.5;
	margin: 0;
}
@media (max-width: 500px) {
	.gyn-feature-row { flex-direction: column; text-align: center; }
}

/* ---------------- Care band (VC elements) ----------------
   [care_band] + [care_band_item] (inc/vc-elements/care-band.php) —
   an intro block (circle icon + heading) on the left, then a row of
   icon+label items with vertical dividers between them. A genuinely
   different design from the hardcoded .op-band section already on
   Our Practice (dark purple background, centered vertical icons) —
   this reference has a light background, horizontal layout, and
   outline-style item icons, so this is fresh CSS rather than reusing
   .op-band's. */
.gyn-care-band {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
	padding: 40px;
	border-radius: 10px;
}
.gyn-care-band__intro {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
}
.gyn-care-band__intro-icon {
	flex: none;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gyn-care-band__intro-icon img { width: 65%; height: 65%; object-fit: contain; }
.gyn-care-band__heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.25;
	margin: 0;
}
.gyn-care-band__items {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 0;
}
.gyn-care-band__item {
	flex: 1;
	min-width: 130px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 0 20px;
	position: relative;
}
.gyn-care-band__item + .gyn-care-band__item::before {
	/* The vertical divider — drawn on every item except the first,
	   sitting at its own left edge (matching the gap between items in
	   the reference, roughly one per item boundary rather than one
	   fixed set of separators independent of item count). */
	content: '';
	position: absolute;
	left: 0;
	top: 10%;
	bottom: 10%;
	width: 1px;
	background: rgba(0,0,0,.15);
}
.gyn-care-band__item-icon { display: block; }
.gyn-care-band__item-icon img { width: 60px; height: 60px; object-fit: contain; }
.gyn-care-band__item-text {
	font-size: .95rem;
	line-height: 1.4;
	margin: 0;
}
@media (max-width: 900px) {
	.gyn-care-band { flex-direction: column; align-items: flex-start; }
	.gyn-care-band__items { width: 100%; }
	.gyn-care-band__item { flex: 1 1 40%; }
}
@media (max-width: 560px) {
	.gyn-care-band__item { flex: 1 1 100%; }
	.gyn-care-band__item + .gyn-care-band__item::before { display: none; }
}

/* ---------------- Standalone button (VC element) ----------------
   [gyn_button] (inc/vc-elements/button.php) — a freestanding
   call-to-action button, distinct from the buttons built into
   [info_card]/[photo_topic_card]/[map_section], which are each tied
   to that element's own content rather than usable on their own. */
.gyn-button-wrap { display: flex; }
.gyn-button-wrap--center { justify-content: center; }
.gyn-button-wrap--right { justify-content: flex-end; }
.gyn-button {
	display: inline-block;
	padding: 20px 40px;
	border-radius: 10px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .5px;
	text-decoration: none;
	text-align: center;
	transition: opacity .2s ease;
}
.gyn-button:hover { opacity: .85; }
.gyn-button--large { padding: 26px 52px; font-size: 1.3rem; }

/* ---------------- Spacer (VC element) ----------------
   [gyn_spacer] (inc/vc-elements/spacer.php) — plain vertical spacing
   with independent desktop/tablet/mobile heights. The PHP only emits
   --gyn-spacer-height-tablet/-mobile custom properties when a value
   was actually set for that breakpoint, so the var() fallback chain
   here is what makes "leave blank to keep the larger breakpoint's
   height" work: an unset tablet height falls through to the desktop
   value, and an unset mobile height falls through to tablet, then
   desktop, rather than needing every instance to fill in every
   field. */
.gyn-spacer {
	display: block;
	width: 100%;
	height: var(--gyn-spacer-height, 40px);
}
@media (max-width: 900px) {
	.gyn-spacer {
		height: var(--gyn-spacer-height-tablet, var(--gyn-spacer-height, 40px));
	}
}
@media (max-width: 500px) {
	.gyn-spacer {
		height: var(--gyn-spacer-height-mobile, var(--gyn-spacer-height-tablet, var(--gyn-spacer-height, 40px)));
	}
}

/* ---------------- Service list ----------------
   A checklist-style list with a solid purple circle + white checkmark
   bullet, repeated identically across Our Practice, Our Service, and
   biote-hrt's custom CSS. Formalized here as a real theme component
   (given a class, not left as a copy-pasted block on every page) so
   future pages can reuse it without re-pasting the same ~25 lines. */
.service-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	color: #1a1a1a;
	display: inline-block;
}
.service-list.two-col ul {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
}
.service-list li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}
.service-list li:last-child { margin-bottom: 0; }
.service-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc((1.4em - 22px) / 2); /* top-aligned with first line of text */
	width: 22px;
	height: 22px;
	background-color: #4B055B;
	border-radius: 50%;
}
.service-list li::after {
	content: '';
	position: absolute;
	left: 7px;
	top: calc((1.4em - 22px) / 2 + 3px);
	transform: rotate(45deg);
	width: 5px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
}

/* ---------------- Utility classes ----------------
   General-purpose text/sizing helpers, repeated identically across
   several pages' custom CSS rather than tied to any one element —
   formalized here the same way as .service-list above. */
.font-25 { font-size: 25px; font-weight: 300; line-height: normal; }
.medium { font-weight: 500; }
.medium-18 { font-size: 18px; font-weight: 500; }
.medium-18 p, .medium-18 li { color: #000000; font-weight: 500; font-size: 18px; }
.min-height-410 { min-height: 410px; }
.regular-25 .gyn-button { font-size: 20px; padding: 5px 40px; font-weight: 600; }

/* ---------------- Testimonial Carousel (VC element) ----------------
   [testimonial_carousel] (inc/vc-elements/testimonial-carousel.php) —
   a second, different testimonials display from the existing
   .hp-testimonials (one quote + photo shown at a time): multiple
   quote cards visible simultaneously, each with a quote icon and a
   star rating. JS (testimonial-carousel.js) handles the sliding and
   dot generation; this covers the static card/arrow/dot appearance. */
.gyn-testimonial-carousel {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1350px;
	margin: 0 auto;
	padding: 0 20px;
}
.gyn-testimonial-carousel__arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--gyn-green);
	color: #fff;
	cursor: pointer;
	transition: opacity .2s ease, transform .15s ease;
}
.gyn-testimonial-carousel__arrow svg { width: 20px; height: 20px; }
.gyn-testimonial-carousel__arrow:hover {
	transform: scale(1.08);
}
.gyn-testimonial-carousel__arrow:disabled {
	opacity: .35;
	cursor: default;
	transform: none;
}
.gyn-testimonial-carousel__viewport {
	flex: 1;
	overflow: hidden;
}
.gyn-testimonial-carousel__track {
	display: flex;
	gap: 28px;
	transition: transform .4s ease;
}
.gyn-testimonial-carousel__card {
	flex: none;
	width: calc((100% - 56px) / 3); /* 3 cards per view minus the two 28px gaps between them, so all three plus gaps fit exactly within the viewport width — recalculated by the JS per data-per-view when that's set to 2 or 1 instead */
	background: var(--gyn-purple-light);
	border: 1px solid var(--gyn-border);
	border-radius: 12px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
}
.gyn-testimonial-carousel__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px;
}
.gyn-testimonial-carousel__quote-icon img {
	width: 42px;
	height: auto;
	display: block;
}
.gyn-testimonial-carousel__stars {
	color: var(--gyn-green);
	font-size: 1.3rem;
	letter-spacing: 2px;
	line-height: 1;
}
.gyn-testimonial-carousel__quote {
	color: var(--gyn-text);
	font-size: 1rem;
	line-height: 1.6;
}
.gyn-testimonial-carousel__quote p {
	margin: 0 0 1.2em;
}
.gyn-testimonial-carousel__quote p:last-child {
	margin-bottom: 0;
}
.gyn-testimonial-carousel__dots {
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}
.gyn-testimonial-carousel {
	position: relative;
	margin-bottom: 40px; /* makes room for the absolutely positioned dots below the card row */
}
.gyn-testimonial-carousel__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: none;
	background: var(--gyn-green);
	opacity: .4;
	cursor: pointer;
	padding: 0;
	transition: opacity .2s ease, transform .2s ease;
}
.gyn-testimonial-carousel__dot.is-active {
	opacity: 1;
	transform: scale(1.15);
}
@media (max-width: 900px) {
	.gyn-testimonial-carousel__card {
		width: calc((100% - 28px) / 2); /* 2 per view */
	}
}
@media (max-width: 560px) {
	.gyn-testimonial-carousel {
		gap: 6px;
		padding: 0 6px;
	}
	.gyn-testimonial-carousel__card {
		width: 100%; /* 1 per view */
		padding: 22px 18px;
	}
	.gyn-testimonial-carousel__arrow {
		width: 30px;
		height: 30px;
	}
	.gyn-testimonial-carousel__arrow svg {
		width: 16px;
		height: 16px;
	}
}

/* ---------------- Directions Form (VC element) ----------------
   [gyn_directions_form] (inc/vc-elements/directions-form.php) — the
   visitor types their own address, JS (directions-form.js) opens
   Google Maps with directions routed from there to the practice. */
.gyn-directions-form {
	max-width: 420px;
	font-family: 'Montserrat', sans-serif;
}
.gyn-directions-form__label {
	display: block;
	margin-bottom: 10px;
	color: var(--gyn-text, #333333);
	font-size: 15px;
}
.gyn-directions-form__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.gyn-directions-form__input {
	flex: 1;
	min-width: 160px;
	padding: 12px 14px;
	border: 1px solid var(--gyn-border, #e6e6e6);
	border-radius: 6px;
	font-size: 15px;
	font-family: inherit;
}
.gyn-directions-form__input:focus {
	outline: none;
	border-color: var(--gyn-green);
}
.gyn-directions-form__button {
	padding: 12px 20px;
	background: var(--gyn-purple-btn);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .2s ease;
}
.gyn-directions-form__button:hover {
	opacity: .85;
}

/* ---------------- Footer ---------------- */
.site-footer {
	background: var(--gyn-purple-light);
}
.site-footer__columns {
	max-width: 1350px;
	margin: 0 auto;
	padding: 90px 24px 150px 24px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
}
.footer-col h4 {
	color: var(--gyn-purple-dark);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0 0 14px;
}
.footer-col ul {
	margin: 0;
	padding: 0 0 0 20px;
}
.footer-col li {
	margin-bottom: 8px;
	font-size: 18px;
	line-height: 1;
}
.footer-col a {
	color: var(--gyn-dark);
	text-decoration: none;
}
.footer-col a:hover {
	color: var(--gyn-purple);
}
.footer-col p {
	font-size: 18px;
	line-height: normal;
	color: var(--gyn-dark);
	margin: 0 0 10px;
}
.footer-col p strong {
	display: block;
}
.footer-col p span {
	display: block;
}
.site-footer__wave {
	position: relative;
	line-height: 0;
	margin-bottom: -1px; /* avoid a 1px seam between the wave and the bottom bar */
}
.site-footer__wave svg {
	display: block;
	width: 100%;
	height: 60px;
}
.site-footer__wave-fill {
	fill: var(--gyn-purple-dark);
}
.site-footer__wave-line {
	stroke: var(--gyn-purple);
	stroke-width: 8;
	opacity: .55;
}
.site-footer__bottom {
	background: var(--gyn-purple-dark);
	color: #fff;
	padding: 100px 0;
}
.site-footer__bottom-inner {
	max-width: 1350px;
	margin: 0 auto;
	padding: 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	flex-wrap: wrap;
	align-items: start;
	gap: 24px;
 font-size: .8rem;
}
.footer-brand .site-title {
	color: #fff;
	font-weight: 700;
}
.footer-brand__logo {
	max-height: 100px;
	width: auto;
	margin-bottom: 50px;
}
.footer-legal {
	margin: 0;
	padding: 0 0 0 15px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}
.footer-legal li {
	padding: 10px 0;
}
.footer-legal a {
	color: rgba(255,255,255,.85);
	text-decoration: none;
}
.footer-legal a:hover {
	text-decoration: underline;
}
.footer-badge-1,
.footer-badge-2 {
	/* Was .footer-badges (plural) here, which never matched the
	   actual markup — footer.php uses two separate .footer-badge-1/
	   .footer-badge-2 divs, not one .footer-badges wrapper around
	   both. That mismatch meant these images had no size constraint
	   at all, just the browser's native image dimensions squeezed
	   into whatever a 4-column grid cell allowed — confirmed as the
	   source of stray, illegibly tiny elements reported in the
	   footer's top-right on mobile. */
	display: flex;
	align-items: center;
}
.footer-badge-1 img,
.footer-badge-2 img {
	max-height: 110px;
	width: auto;
}
.footer-rating {
	display: flex;
	align-items: center;
	gap: 15px;
}
.footer-rating .stars {
	color: #f2c94c;
	letter-spacing: 2px;
}
.site-footer__follow-us {
	font-size: 18px;
	font-weight: 600;
	padding: 20px 0;
	line-height: normal;
}
.site-footer__foot-social {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
body.has-hero-banner .site-header__main {
	/* Desktop deliberately floats the logo/nav bar over the hero
	   photo (position:absolute, see the rule this overrides above) —
	   works there because there's enough vertical space for the
	   heading to sit well below the overlapping header. On mobile the
	   hero is much shorter and the heading flows in normal document
	   flow near its very top (see .hp-hero-full__heading's own mobile
	   override elsewhere in this file), so the still-overlapping
	   header and the heading end up fighting for the same space —
	   reported directly as the heading text visually colliding with
	   the logo. Returning the header to normal flow stacks everything
	   cleanly instead: utility bar, then logo/nav, then the hero photo
	   with its heading, each in its own space. */
	position: static;
}
.main-navigation {
	/* Was the mobile dropdown panel's own styling — now hidden
	   entirely below 900px, since .mobile-navigation (below) is the
	   dedicated mobile element instead. Desktop's horizontal nav
	   styling (outside any media query, earlier in this file) is
	   unaffected — this only hides it at this specific breakpoint. */
	display: none;
}
.mobile-navigation {
	/* Hidden by default (collapsed to zero height rather than
	   display:none), so the .is-open transition below can animate a
	   smooth slide-down instead of an abrupt show/hide — display:none
	   can't be transitioned. Positioned as a full-width panel
	   dropping down from the header, not squeezed into the header bar
	   itself alongside the logo/toggle. */
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 8px 16px rgba(0,0,0,.12);
	transition: max-height .3s ease;
	z-index: 100;
	margin-left: 0; /* overrides the desktop-only margin-left:auto, which has no meaning once this is a full-width dropdown, not an inline nav pushed to the header's right edge */
}
.mobile-navigation.is-open {
	max-height: 80vh; /* generous enough for a long menu, capped so a very long list still scrolls within the viewport instead of running off-screen */
	overflow-y: auto;
}
.mobile-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 8px 0;
	list-style: none;
	margin: 0;
}
.mobile-navigation li {
	border-bottom: 1px solid var(--gyn-border);
}
.mobile-navigation li:last-child {
	border-bottom: none;
}
.mobile-navigation a, .mobile-navigation a:visited {
	display: block;
	padding: 16px 24px; /* generous touch target, not the same tight desktop link padding */
	color: var(--gyn-text);
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	font-weight: 500;
	text-transform: uppercase;
}
.mobile-navigation li.current-menu-item > a, .mobile-navigation a.is-active {
	color: var(--gyn-purple) !important;
	background: var(--gyn-purple-light);
	border-left: 3px solid var(--gyn-green, #A8D150);
	padding-left: 21px; /* 24px - 3px border, so the text doesn't visually shift right when the active state adds the border */
}
.mobile-navigation li.menu-item-has-children {
	position: relative;
}
.mobile-navigation li.menu-item-has-children > a {
	padding-right: 44px; /* room for the toggle button without crowding the link text */
}
.mobile-navigation .submenu-toggle {
	/* A separate, real <button> (inserted by header-menu-toggle.js)
	   rather than making the parent <a> itself toggle the submenu —
	   keeps two distinct, clear tap targets: the link text still
	   navigates to that page, this button (positioned over the same
	   spot the old purely-decorative chevron occupied) expands/
	   collapses its children instead. */
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
	height: 100%; /* matches the parent <a>'s own full-row height, so the tap target isn't a tiny corner */
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: inherit;
}
.mobile-navigation .submenu-toggle::before {
	content: '';
	position: absolute;
	right: 24px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.mobile-navigation .submenu-toggle[aria-expanded="true"]::before {
	/* Points up while expanded — same open/closed convention as
	   desktop's hover-revealed dropdown chevron. */
	transform: translateY(-30%) rotate(-135deg);
}
.mobile-navigation .sub-menu {
	/* Overrides the desktop dropdown entirely — position:static lets
	   it flow inline right after its parent link instead of the
	   desktop's absolutely positioned floating panel (which has
	   nothing to position against consistently here, and hover has no
	   equivalent on a touch device anyway).
	   Collapsed by default (max-height transition, not display:none,
	   so it can animate) — was always visible inline; reported
	   directly as wanted collapsible instead, toggled by the button
	   above rather than a second always-expanded layer nested inside
	   the already-collapsible top-level menu. */
	display: block;
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	max-height: 0;
	overflow: hidden;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	background: var(--gyn-purple-light);
	list-style: none;
	transition: max-height .3s ease;
}
.mobile-navigation .sub-menu.is-open {
	max-height: 60vh; /* generous enough for a long sub-list, capped so it can't push the rest of the menu off-screen on a short device */
	overflow-y: auto;
}
.mobile-navigation .sub-menu a {
	padding: 14px 24px 14px 40px; /* extra left indent distinguishes sub-items from their top-level parent without needing a second visual treatment */
	font-size: 16px;
	text-transform: none;
}
.menu-toggle {
	display: flex;
}
.site-header__main {
	position: relative; /* positions .mobile-navigation's dropdown (position:absolute) relative to the header bar, not the page */
}
.site-footer__columns {
	grid-template-columns: repeat(2, 1fr);
}
.hp-hero-full,
.hp-hero-full--has-image { aspect-ratio: auto; max-height: none; min-height: 420px; }
.hp-hero-full__heading { position: static; width: auto; padding: 24px 20px 0; text-align: center; }
.hp-hero-full__mobile-image {
	/* Hidden at this breakpoint — the 767px block below is where this
	   actually shows; 768–899px (a narrow gap between that and this
	   900px breakpoint) keeps the original background-image overlay
	   instead, same as it's always worked. */
	display: none;
}
.hp-hero-full__contact-card {
	/* Repositioned to the bottom-right of the hero photo, matching
	   the marked target area directly — was static document flow
	   (stacked below the heading, matching the earlier v15.7
	   right-shifted-but-still-inline treatment). Right edge stays
	   fixed for both collapsed and expanded states below — width is
	   what differs between them, so expanding naturally grows the
	   card leftward from this same anchored corner rather than
	   needing a separate left/right position for each state. */
	position: absolute;
	bottom: 20px;
	right: 12px;
	left: auto;
	margin: 0;
	border-radius: 8px;
}
.hp-hero-full__contact-card.is-collapsed {
	/* Corner badge — sized to the title bar's own content instead of
	   the expanded card's wider proportions, so the collapsed state
	   reads as a small tab tucked in the corner, not a wide empty bar. */
	width: auto;
	min-width: 150px;
}
.hp-hero-full__contact-card:not(.is-collapsed) {
	/* Expanded — wider than the collapsed badge, extending toward the
	   top-left from the same fixed right edge/bottom corner, per
	   direct request. */
	width: 80%;
	max-width: 320px;
}
.hp-hero-full__contact-card-title { border-radius: 8px 8px 0 0; }
.hp-hero-full__contact-card-body {
	/* Reported directly with a screenshot: the card is bottom-
	   anchored (see position:absolute above) and grows upward when
	   expanded, which on a short mobile viewport reached all the way
	   up into the heading text. Capping the body's own height with
	   internal scrolling keeps the whole card within a safe vertical
	   budget regardless of how much link/text content it holds,
	   rather than letting it grow as tall as its content demands.
	   Reduced from an earlier, less conservative 45vh after the
	   overlap was still reported at that value. */
	max-height: 32vh;
	overflow-y: auto;
}
}
@media (max-width: 767px) {
	/* Real <img>-based image-first mobile layout — a genuinely
	   different structure from the background-image overlay used at
	   every wider breakpoint, not a CSS trick reordering the same
	   elements. Reported directly: wanted an actual <img> shown first,
	   with the banner text as a separate block below it, rather than
	   text pushed down within a background-image section (an earlier
	   attempt at "image first" kept both in the same section via
	   margin-push, which still wasn't what was being asked for).
	   inc/page-banner.php outputs .hp-hero-full__mobile-image (the
	   same photo used for wider screens' background) as a real,
	   separate element right before .hp-hero-full__heading — normal
	   document flow does the "image first, text below" ordering here,
	   no positioning tricks needed. */
	.hp-hero-full,
	.hp-hero-full--has-image {
		/* The background-image div still exists in the DOM at this
		   width (inc/page-banner.php doesn't conditionally omit it —
		   it's the same section used at every breakpoint), but is
		   hidden here in favor of the real <img> above being the only
		   visible image; auto height lets the section size itself
		   from its actual content (image + text + card) instead of a
		   fixed aspect-ratio/min-height sized for a background image
		   that no longer shows. */
		background-image: none !important;
		aspect-ratio: auto;
		max-height: none;
		min-height: 0;
	}
	.hp-hero-full__mobile-image {
		display: block;
		width: 100%;
		height: auto;
	}
	.hp-hero-full__heading {
		/* No margin-push needed (unlike an earlier attempt) — the
		   image above is a real, separate element in normal document
		   flow now, so the heading simply follows it in source order
		   without needing to be artificially shoved down within a
		   shared background. */
		position: static;
		width: auto;
		text-align: center;
		padding: 24px 20px 20px;
		background: #fff;
	}
	.hp-hero-full__contact-card {
		/* Floating/sticky bar pinned to the viewport bottom, per direct
		   request — stays visible while scrolling, not just sitting in
		   the page's normal flow the way the rest of the hero content
		   does. z-index raised well above the theme's own highest
		   existing value — found .site-footer__bottom sitting at
		   99999 (a different, desktop-only breakpoint, so it can't
		   directly conflict with this mobile-only bar, but confirms
		   this theme already reaches for very high z-index values
		   elsewhere) after this bar was reported going behind the
		   footer on the home page. Still kept below
		   .mobile-navigation's dropdown (100/101) in practice — this
		   bar sits at the very bottom of the screen, that dropdown
		   from the top, so the two don't actually occupy the same
		   space even though this number is numerically higher. */
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto;
		width: 100%;
		max-width: none;
		min-width: 0;
		margin: 0;
		border-radius: 8px 8px 0 0; /* only the top corners — this now sits flush against the bottom edge of the viewport, where rounding would look odd */
		box-shadow: 0 -4px 16px rgba(0,0,0,.12); /* shadow above rather than the card's default all-around shadow, since a bottom-pinned bar visually reads as "coming up from the edge" */
		z-index: 999999;
	}
	.hp-hero-full__contact-card.is-collapsed,
	.hp-hero-full__contact-card:not(.is-collapsed) {
		/* Explicit override for both states, matching (not just
		   relying on the base rule above) — the desktop/900px rules
		   for .is-collapsed (width: auto; min-width: 150px) and
		   :not(.is-collapsed) (width: 80%; max-width: 320px) both have
		   higher specificity than a plain .hp-hero-full__contact-card
		   selector, so they'd otherwise win over the base rule's
		   width: 100% the moment either state class is present —
		   confirmed as the actual cause of the expanded state staying
		   narrow instead of full width. */
		width: 100%;
		max-width: none;
		min-width: 0;
	}
	.hp-hero-full__contact-card:not(.is-collapsed) {
		/* Reported directly: on a short viewport, the uncapped card
		   (from the previous turn's "let it open all" change) could
		   grow taller than the screen itself — since it's anchored at
		   bottom:0, a too-tall card pushes its own top edge (and
		   title bar) above the visible viewport instead of scrolling,
		   which looked like the bar "jumping to the top"/disappearing.
		   Verified directly: on a 350px-tall viewport, the card's
		   measured top position went to -41px (genuinely off-screen)
		   with the full 7-link content and no cap at all.
		   Capping the whole card (not just the body) at the viewport's
		   own height still honors "let it open all" for any screen
		   tall enough to fit the content — the cap only engages, via
		   the body's own overflow-y:auto below, on a screen actually
		   too short for that, rather than reintroducing the earlier
		   fixed 32vh limit that constrained every screen equally
		   regardless of how much room was actually available. */
		max-height: 100vh;
	}
	.hp-hero-full__contact-card-body {
		max-height: calc(100vh - 55px); /* leaves room for the title bar's own ~55px within the card's 100vh cap above, so the body's internal scroll (if it ever engages) doesn't also push the title bar itself off-screen */
		overflow-y: auto;
	}
	.hp-hero-full__contact-card-links {
		overflow-y: visible;
	}
	body {
		/* The fixed bar's collapsed title bar (~55px tall) always sits
		   over whatever is at the bottom of the page otherwise —
		   without this, it would permanently cover the last ~55px of
		   the footer. 70px leaves a small safety margin beyond the
		   title bar's own measured height. */
		padding-bottom: 70px;
	}
}
 @media (max-width: 500px) {
:root {
	/* Overrides the desktop/tablet clamp()-based --gyn-h1-size/
	   --gyn-h2-size with fixed mobile values. Redefining the root
	   variables here (rather than overriding h1/h2 font-size
	   directly) keeps every H1 and H2 site-wide deriving from the
	   same single source, so they stay uniform with each other at
	   this size too, not just individually resized. */
	--gyn-h1-size: 42px;
	--gyn-h2-size: 32px;
}
.site-header__utility-inner {
	flex-wrap: wrap;
	justify-content: center; /* was inheriting flex-end from the desktop rule — with wrapped rows of different widths, that left an empty gap on the left of shorter rows instead of centering them */
	gap: 10px;
}
.utility-link--muted {
	margin-left: 0;
}
.site-footer__columns {
	grid-template-columns: 1fr;
}
.site-footer__bottom-inner {
	/* Was still repeat(4, 1fr), never overridden for mobile — on a
	   narrow screen this squeezed all four items (brand, menu,
	   badge-1, badge-2) into four very narrow columns side by side
	   instead of stacking, which is what produced the stray tiny
	   badge images reported in the top-right of the footer. */
	grid-template-columns: 1fr;
}
.footer-badge-1,
.footer-badge-2 {
	margin-top: 24px;
}
.gyn-provider-card__photo-frame {
	max-width: 220px; /* was capped only by the card's own 340px max-width — noticeably large on a narrow phone screen */
	margin: 0 auto;
}
}
 @media (min-width: 1200px) {
.site-header__main::before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	background: url(../images/nav-shape.png) no-repeat bottom center !important;
	height: 170px;
	width: 100%;
	z-index: 1;
	background-size: 100% 100% !important;
}
.site-header__main-inner {
	position: relative;
	z-index: 99999;
	width: 100%;
}
.site-footer__wave {
	display: none;
}
.site-footer__bottom {
	position: relative;
	z-index: 99999;
	width: 100%;
}
.site-footer__bottom-inner::before {
	position: absolute;
	left: 0;
	top: -110px;
	content: "";
	background: url(../images/footer-bg.png) no-repeat bottom center !important;
	height: 114px;
	width: 100%;
	z-index: 1;
	background-size: 100% 100% !important;
}
}