/* Nadia MD: adapts the ported static styles (site.css) to block markup.
   Blocks wrap images in <figure>, use paragraphs/groups where the static
   site used spans and lists, and add their own default margins. */

/* From the static site's base rules (not ported wholesale) */
.tiles *,
.tiles *::before,
.tiles *::after,
.modal,
.modal * {
	box-sizing: border-box;
}

html {
	scroll-padding-top: calc(var(--header-h, 84px) + var(--gutter) * 3);
}

.wp-site-blocks img {
	max-width: 100%;
	height: auto;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Block-gap styles are switched off in theme.json (spacing.blockGap: null),
   so the ported component CSS controls all spacing. Grid/flex containers
   never take margins from their items. */
.tiles > *,
.tiles :is(.service-tiles, .tiers, .pillars, .stats, .grid, .contact, .split, .hero__inner, .service-hero,
	.tier-base, .philosophy, .doctor, .price-row) > * {
	margin-block: 0;
}

/* Restore component margins the flow-layout rules override */
.tiles .service-tile > .service-tile__media {
	margin: 12px 12px 0;
}

.tiles .card > .learn-more {
	margin-top: auto;
}

.tiles .service-tile__body > .text-link {
	margin-top: auto;
}

.tiles .tier > .wp-block-buttons {
	margin-top: auto;
}

.tiles :where(p) {
	margin-block: 0 1em;
}

.tiles :where(p:last-child) {
	margin-bottom: 0;
}

.tiles :where(h1, h2, h3) {
	margin-block: 0;
}

/* Images: the component class sits on the <figure>, the <img> fills it */
.tiles .wp-block-image {
	margin: 0;
}

.tiles .wp-block-image img {
	display: block;
}

.hero > .hero__bg,
.page-hero > .page-hero__bg,
.page-hero > .page-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero > .hero__bg img,
.page-hero > .page-hero__bg img,
.page-hero > .page-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero > .page-hero__bg {
	opacity: 0.35;
}

.page-hero--photo {
	container-type: inline-size;
}

.page-hero > .page-hero__photo img {
	/* Office photo: the top of the sign's ring sits ~6.55% of the tile's
	   width below the photo's top edge. Shifting the photo up by half that
	   (3.27cqw) halves the gap above the ring at every width. max(…, 100%)
	   never shifts past the photo's real overflow, so tall (phone) tiles
	   never show a blank strip. */
	object-position: 50% 16%;
	object-position: 50% max(-3.27cqw, 100%);
}

.hero__figure img {
	width: 100%;
	aspect-ratio: 1122 / 1402;
	object-fit: cover;
	object-position: top;
}

@media (max-width: 767px) {
	.hero__figure img {
		aspect-ratio: 1024 / 1180;
	}
}

.split__media img,
.doctor__portrait img,
.service-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.doctor__portrait img {
	object-position: 50% 20%;
}

.service-photo .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
}

/* Per-photo focal points (the static site set these inline) */
.focus-0 img { object-position: 50% 0; }
.focus-20 img { object-position: 50% 20%; }
.focus-30 img { object-position: 50% 30%; }
.focus-38 img { object-position: 50% 38%; }
.focus-50 img { object-position: 50% 50%; }

/* Short gold rule (separator block) */
.wp-block-separator.rule {
	width: 64px;
	max-width: 64px;
	height: 2px;
	margin: 1.5rem 0;
	border: 0;
	background: var(--color-primary-gold);
	opacity: 1;
}

.center .wp-block-separator.rule,
.hero__copy .wp-block-separator.rule,
.page-hero:not(.page-hero--photo) .wp-block-separator.rule,
.cta .wp-block-separator.rule {
	margin-inline: auto;
}

.tile--green .wp-block-separator.rule,
.tile--gold .wp-block-separator.rule {
	background: var(--color-white);
}

/* Button rows */
.hero__copy .wp-block-buttons,
.center .wp-block-buttons,
.cta .wp-block-buttons {
	justify-content: center;
}

.tiles .wp-block-buttons {
	gap: 14px;
}

.cta .wp-block-buttons {
	margin-top: 2rem;
}

.tile--green .tile__inner--narrow .wp-block-buttons {
	margin-top: 2rem;
}

/* "Text link" paragraphs (Explore / Learn More) with the gold arrow */
.text-link a,
.learn-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-black);
}

.text-link a::after,
.learn-more a::after {
	content: "";
	width: 1.5em;
	height: 0.7em;
	background-color: var(--color-primary-gold);
	-webkit-mask: var(--nmd-arrow) center / contain no-repeat;
	mask: var(--nmd-arrow) center / contain no-repeat;
	transition: transform 0.25s var(--ease);
}

.text-link a:hover::after,
.learn-more a:hover::after {
	transform: translateX(4px);
}

.card .learn-more {
	margin-top: auto;
	padding-top: 1.4rem;
}

/* Services landing: the whole tile is clickable via its title link */
.service-tile {
	position: relative;
}

.service-tile .card__title a {
	color: inherit;
	text-decoration: none;
}

.service-tile .card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.service-tile__body .text-link {
	margin-top: auto;
	padding-top: 0.4rem;
}

/* Price rows: name ····· price */
.prices {
	margin-top: 1.2rem;
}

.price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(187, 155, 100, 0.35);
}

.price-row:last-child {
	border-bottom: 0;
}

.tiles .price-row > p {
	margin: 0;
}

.price-row__name {
	display: flex;
	flex: 1;
	align-items: baseline;
	gap: 10px;
}

.price-row__name::after {
	content: "";
	flex: 1;
	min-width: 16px;
	border-bottom: 1px dotted var(--color-primary-gold);
	transform: translateY(-4px);
}

.price-row__price {
	max-width: 60%;
	font-weight: 600;
	text-align: right;
}

/* Info "i" after a price: links to #modal-<key>, so theme.js opens that
   product's modal. Gold logo ring + cursive i; the link text stays for
   screen readers but is pushed out of view. */
.price-row__price a[href^="#modal-"] {
	position: relative;
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	margin-left: 0.4em;
	vertical-align: -0.35em;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 200%;
	border-radius: 50%;
	transition: background-color 0.2s var(--nmd-ease);
}

.price-row__price a[href^="#modal-"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-primary-gold);
	-webkit-mask: url("../images/info-i.svg") center / contain no-repeat;
	mask: url("../images/info-i.svg") center / contain no-repeat;
}

/* Cards are gold-light, so the hover fills the ring white */
.price-row__price a[href^="#modal-"]:hover {
	background-color: var(--color-white);
}

.price-row__price a[href^="#modal-"]:focus-visible {
	outline: 2px solid var(--color-primary-gold);
	outline-offset: 3px;
}

/* Fact rows (dose, onset, duration) inside a modal reuse the price rows */
.modal .price-row > p {
	margin: 0;
}

.modal .price-row__name {
	white-space: nowrap;
}

.price-group + .price-group {
	margin-top: 1.4rem;
}

.price-group__label + .prices {
	margin-top: 0.4rem;
}

/* Lists */
.tiles .wp-block-list.ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Memberships: "/ month" after each price */
.tier__price::after {
	content: " / month";
	font-size: 0.4em;
	letter-spacing: 0.04em;
}

.tier > .wp-block-buttons {
	margin-top: auto;
}

.tier--featured .tier__savings {
	color: var(--color-white);
}

/* Appointments + About grids built from groups */
.pillars,
.stats {
	padding: 0;
	list-style: none;
}

.stat__num,
.stat__label {
	margin: 0;
}

.doctor__portrait {
	margin: 0;
}

/* Contact details (paragraph pairs instead of a <dl>) */
.contact__list {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.tiles .contact__list > .wp-block-group > p {
	margin: 0;
}

.contact__label {
	margin-bottom: 0.2rem !important;
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.contact__value {
	font-size: 1.15rem;
}

.contact__value a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* FAQ: details blocks */
.faq .wp-block-details {
	margin: 0;
}

.faq .wp-block-details > p {
	max-width: 70ch;
	padding-bottom: 1.4rem;
}

/* "Learn More" modals: groups the script moves into a <dialog> */
.js .tiles > .nmd-modal {
	display: none;
}

/* The dialog is a fixed frame that clips to its rounded corners; long
   content scrolls inside the group instead, so the scrollbar never cuts
   the corners. */
.modal {
	overflow: hidden;
}

.modal[open] {
	display: flex;
	flex-direction: column;
}

.modal .nmd-modal {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(28px, 5vw, 56px);
}

/* Above the scrolling group, which comes after it */
.modal .modal__close {
	z-index: 1;
}

/* Slim gold scrollbar. Chromium (Chrome, Brave, Edge) and Safari use the
   ::-webkit-scrollbar parts, inset from the rounded corners. Firefox has no
   such parts and gets the standard properties instead (in Chromium they
   would switch the parts off, hence the @supports). */
.modal .nmd-modal::-webkit-scrollbar {
	width: 14px;
}

.modal .nmd-modal::-webkit-scrollbar-track {
	margin-block: var(--radius);
	background: transparent;
}

.modal .nmd-modal::-webkit-scrollbar-thumb {
	border: 4px solid transparent;
	border-radius: 999px;
	background: rgba(187, 155, 100, 0.55) padding-box;
}

.modal .nmd-modal::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-primary-gold);
}

@supports not selector(::-webkit-scrollbar) {
	.modal .nmd-modal {
		scrollbar-width: thin;
		scrollbar-color: rgba(187, 155, 100, 0.55) transparent;
	}
}

.modal .nmd-modal .wp-block-buttons {
	margin-top: 2rem;
}

/* Header "Book" link styled as the gold button */
.site-nav .nav-book .wp-block-navigation-item__content {
	margin-left: clamp(4px, 1vw, 14px);
	padding: 0.6em 1.3em;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-gold);
	background-image: none;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.25s var(--nmd-ease);
}

.site-nav .nav-book .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 0.6em;
	margin-left: 0.7em;
	background-color: currentColor;
	-webkit-mask: var(--nmd-arrow) center / contain no-repeat;
	mask: var(--nmd-arrow) center / contain no-repeat;
}

.site-nav .nav-book .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--primary-green);
	background-size: auto;
}

.site-nav .is-menu-open .nav-book {
	width: 100%;
	margin-top: 16px;
}

.site-nav .is-menu-open .nav-book .wp-block-navigation-item__content {
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 14px;
}

.site-nav .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* Header and footer logo (SVG image block) */
.site-header__logo,
.site-footer__logo {
	margin: 0;
	flex-shrink: 0;
}

.site-header__logo img {
	display: block;
	width: min(250px, calc(100vw - 140px));
	height: auto;
}

.site-footer__logo img {
	display: block;
	width: min(250px, 100%);
	height: auto;
}

@media (min-width: 1025px) and (max-width: 1199px) {
	.site-header__logo img {
		width: 190px;
	}
}

/* Spacing the static site set inline */
.tile__inner > .grid {
	margin-top: 2rem;
}

.tile__inner > .measure {
	margin-top: 1rem;
}

.card__title + .price-group,
.card__sub + .price-group,
.card > p + .price-group {
	margin-top: 1rem;
}

.card > .wp-block-list.ticks {
	margin-top: 1rem;
}

/* ---------- Header: match the static site ---------- */

.site-header {
	min-height: 84px;
	align-items: center;
}

/* Logo: no figure margin or inline-link line box pushing it off center */
.site-header .site-header__logo {
	display: flex;
	align-items: center;
	margin: 0 !important;
	line-height: 0;
}

.site-header .site-header__logo a {
	display: block;
	line-height: 0;
}

/* Services: the chevron sits in its own 28px button, like the static nav */
.site-nav .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	width: 28px;
	height: 40px;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.site-nav .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
	stroke-width: 1.6;
}

/* Gold underline stays on the current page (and on Services for its subpages) */
.site-nav .current-menu-item > .wp-block-navigation-item__content,
.site-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	background-size: 100% 1.5px;
}

.site-nav .wp-block-navigation__submenu-container [aria-current="page"] {
	background-color: var(--wp--preset--color--primary-gold-light);
	background-size: auto;
}

/* Same horizontal metrics as the static header */
.site-header {
	max-width: none;
	padding-inline: max(clamp(16px, 3vw, 48px), (100% - 1440px) / 2);
}

@media (min-width: 600px) {
	.site-nav .wp-block-navigation__container {
		gap: clamp(8px, 1.6vw, 28px);
	}

	.site-nav .nav-book .wp-block-navigation-item__content {
		margin-left: clamp(10px, 1.4vw, 22px);
	}
}

@media (min-width: 600px) and (max-width: 1199px) {
	.site-nav .wp-block-navigation__container {
		gap: 8px;
	}
}

/* Contact form: honeypot field (hidden from people, visible to bots) */
.nmd-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__status.is-sent {
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--color-primary-gold-light);
	color: var(--color-black);
}

.form__status.is-error {
	color: #8a1f11;
}

/* ---------- Phone/tablet menu: same as the static site ---------- */

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary-gold);
	cursor: pointer;
}

.nav-toggle svg {
	width: 30px;
	height: 30px;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
	display: block;
}

/* "All Services" at the foot of the Services dropdown */
.site-nav .subnav-all {
	margin-top: 4px;
	border-top: 1px solid var(--wp--preset--color--primary-gold-light);
}

.site-nav .subnav-all .wp-block-navigation-item__content {
	font-weight: 600;
}

@media (max-width: 1024px) {
	.site-header {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.site-header .nav-toggle {
		display: inline-flex;
		order: 2;
	}

	/* Hidden until opened; then a full-width stacked list under the bar */
	.site-header nav.site-nav {
		display: none;
		order: 3;
		flex-basis: 100%;
		width: 100%;
		max-height: calc(100vh - 84px - var(--gutter) * 3);
		overflow-y: auto;
		padding-bottom: 20px;
	}

	.site-header-part.is-open nav.site-nav {
		display: block;
	}

	.site-nav .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0 !important;
		border-top: 1px solid var(--wp--preset--color--primary-gold-light);
	}

	.site-nav .wp-block-navigation__container > .wp-block-navigation-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--primary-gold-light);
	}

	.site-nav .wp-block-navigation__container > .wp-block-navigation-item:not(.nav-book) > .wp-block-navigation-item__content {
		flex: 1;
		padding: 14px 0;
		font-size: 1.15rem;
		background-image: none;
	}

	.site-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
	.site-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary-green);
		font-weight: 600;
	}

	/* Services chevron: 48px tap target at the right edge */
	/* 48px tap target; icon flush with the right edge like the static menu,
	   without a negative margin that would overflow the menu */
	.site-nav .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
		width: 48px;
		height: 48px;
		margin-right: 0;
		justify-content: flex-end;
		padding-right: 6px;
	}

	.site-nav .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon svg {
		transition: transform 0.25s var(--nmd-ease);
	}

	.site-nav .wp-block-navigation-submenu > [aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* Submenu: inline, indented, shown only when the chevron is open */
	.site-nav .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		position: static !important;
		display: none;
		flex-basis: 100%;
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		padding: 0 0 12px 12px;
		border: 0 !important;
		box-shadow: none;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none;
	}

	.site-nav .wp-block-navigation-submenu > [aria-expanded="true"] + .wp-block-navigation__submenu-container {
		display: block;
	}

	.site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 10px 14px;
		font-size: 1rem;
	}

	/* Book: full-width gold button under the links */
	.site-nav .wp-block-navigation__container > .nav-book {
		padding-top: 18px;
		border-bottom: 0;
	}

	.site-nav .nav-book .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 40px;
		margin: 0 !important;
		padding: 0 1.3em !important;
	}

	/* Same 10px gap under the logo bar as the static header */
	/* nav only: WordPress repeats the site-nav class on the inner <ul> */
	.site-header nav.site-nav {
		padding-top: 10px;
		padding-bottom: 10px;
		/* The menu scrolls vertically only, never sideways */
		overflow-x: hidden;
	}

	/* Width includes padding, so the indented submenu fits the menu exactly */
	.site-header nav.site-nav,
	.site-header nav.site-nav * {
		box-sizing: border-box;
	}
}

/* "All Services" isn't highlighted as the current page (static parity) */
.site-nav .wp-block-navigation__submenu-container .subnav-all [aria-current="page"] {
	background-color: transparent;
}

/* Plain page heroes (Services, Memberships, Appointments, Contact): shorter,
   so the first section below shows at the top of the page. The About photo
   hero keeps its own height. */
.page-hero:not(.page-hero--photo) .tile__inner {
	padding-block: clamp(32px, 3.2vw, 60px);
}

/* Services hero is title-only: 10% shorter than padding + title would give.
   (0.9 × padding) − (5% of the 1.15-line-height title), so the whole tile scales by 0.9. */
.page-hero--services:not(.page-hero--photo) .tile__inner {
	padding-block: calc(0.9 * clamp(32px, 3.2vw, 60px) - 0.0575 * clamp(2rem, 1.2rem + 3.4vw, 4.25rem));
}

/* Six services: two even rows of three on desktop (site.css lays five out 3 + 2) */
@media (min-width: 1100px) {
	.service-tiles:has(> .service-tile:nth-child(6)) > .service-tile {
		grid-column: span 2;
	}

	.service-tiles:has(> .service-tile:nth-child(6)) > .service-tile .service-tile__media {
		--media-h: 75%; /* 4:3 */
	}
}

/* Service tile titles shrink with the tile (not the window), so names like
   "Aesthetic Injectables" (~13.3em wide in Cinzel) stay on one line when
   three tiles share a row. Phones keep the normal size. */
@media (min-width: 700px) {
	.service-tile__body {
		container-type: inline-size;
	}

	.service-tile .card__title {
		font-size: min(clamp(1.2rem, 1rem + 0.6vw, 1.6rem), 7.3cqi);
	}
}