/* Vista Clinic — Gutenberg landing-page tokens.
 * TODO: replace placeholder values with real tokens extracted from the live
 * compiled Elementor CSS (fonts, brand colors, button radius, section padding)
 * so block pages visually match Elementor pages. Placeholders are conservative.
 */
.vc-block-page {
	max-width: 1140px; /* match Elementor default content width — verify on live */
	margin: 0 auto;
	padding: 0 20px;
}
.vc-block-page .alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
/* CTA button variants */
.vc-cta-whatsapp .wp-block-button__link { background-color: #25d366; color: #fff; }
.vc-cta-call .wp-block-button__link     { background-color: #2b6cb0; color: #fff; }
.vc-cta-book .wp-block-button__link     { background-color: #1a202c; color: #fff; }
.vc-block-page .wp-block-button__link   { border-radius: 4px; }
/* FAQ details */
.vc-block-page .wp-block-details { border-bottom: 1px solid #e2e8f0; padding: 0.75em 0; }
.vc-block-page .wp-block-details summary { cursor: pointer; font-weight: 600; }

/* ==========================================================================
 * Contact page (post 10). Namespaced .vc-contact / .vc-map so nothing here can
 * reach the PRP landing page, which shares this sheet.
 * ========================================================================== */

.vc-block-page .vc-contact {
	padding-block: clamp(32px, 5vw, 64px);
}

.vc-block-page .vc-contact__intro {
	max-width: 62ch;
	font-size: 18px;
}

/* Three CTA columns. Core's .wp-block-columns already collapses to one column
   at 781px, which is the same intent as the footer's 820px breakpoint — no
   extra media query needed, just the gap and the column padding. */
.vc-block-page .vc-contact__cols {
	gap: clamp(20px, 3vw, 40px);
	margin-block: clamp(24px, 4vw, 44px);
}

.vc-block-page .vc-contact__cols .wp-block-column > p:first-child {
	margin-top: 0;
}

/* BUTTON SYSTEM — same geometry as the footer's (radius 0, 15px, 52px tall,
 * 13px/28px padding), but the Solid fill for LIGHT backgrounds: #4A7874 with
 * cream ink (~5.6:1). No brand green anywhere, exactly as in the footer —
 * see the note in vc-footer.css.
 */
.vc-block-page .vc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 13px 28px;
	border: 1px solid transparent;
	border-radius: 0;
	background: #4A7874;
	color: #F2F1EE !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transition: background-color 0.18s ease;
}

.vc-block-page .vc-btn:hover,
.vc-block-page .vc-btn:focus-visible {
	background: #3C625F;
	color: #F2F1EE !important;
	text-decoration: none;
}

/* OUTLINE variant — the second and last of the two house button styles. Same
 * geometry as Solid (radius 0, 15px, 52px, 13px/28px padding) so a Solid and an
 * Outline sitting side by side line up exactly; only the fill differs. The
 * border re-uses the Solid's own #4A7874 rather than introducing a third
 * colour, and hover fills to Solid so the pair never reads as two systems.
 * There is NO third variant. If a page seems to need one, it needs less.
 */
.vc-block-page .vc-btn--ghost {
	background: transparent;
	border-color: #4A7874;
	color: #3C625F !important;
}

.vc-block-page .vc-btn--ghost:hover,
.vc-block-page .vc-btn--ghost:focus-visible {
	background: #4A7874;
	color: #F2F1EE !important;
}

/* Full-width inside a CTA column so the three read as one row of equal blocks. */
.vc-block-page .vc-contact__cols .vc-btn {
	width: 100%;
}

/* Buttons that sit inline in a paragraph (the About / Prices CTA rows) need a
   real gap — inline-flex collapses the whitespace between them to nothing at
   some font settings. flex on the paragraph is the reliable fix, and wrap keeps
   the pair from overflowing at 402px. */
.vc-block-page .vc-about__cta,
.vc-block-page .vc-about__foot-cta,
.vc-block-page .vc-prices__cta,
.vc-block-page .vc-prices__foot-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* (.vc-contact__details is gone — the Contact page's clinic-details list was
   removed on 2026-07-26 once the sitewide footer started carrying address,
   hours, WhatsApp and email on every page.) */

/* ------------------------------------------------------------------- map -- */

/* Placeholder shell. It carries the frame's own look so the swap on click does
   not shift the page: same background, same border, and a min-height that
   matches the loaded iframe's height. */
.vc-block-page .vc-map {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 360px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid #d8dcd6;
	background: #EEF1EE;
}

/* ⚠️ The note, button and link are NOT children of .vc-map — WordPress puts a
 * .wp-block-group__inner-container between them. Any `>` selector or any rule
 * that assumes direct children (flex gap on .vc-map alone) silently does
 * nothing. This has broken three times on this project; the layout is therefore
 * declared on the wrapper by CLASS, and .vc-map only paints the box. */
.vc-block-page .vc-map .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.vc-block-page .vc-map__note {
	margin: 0;
	max-width: 52ch;
	color: #4a4f45;
}

.vc-block-page .vc-map__link {
	margin: 0;
}

/* The Load map control is a real <button>, and the parent theme skins every
 * button with its own dark slate fill — measured rgb(66,81,99) — which beats
 * `.vc-block-page .vc-btn` (0,2,0). Element+class (0,2,1) plus !important pins
 * it back to the one Solid fill so it is not a third button style on the page;
 * the Customizer's Additional CSS prints after this sheet, hence !important
 * rather than a specificity bump alone.
 */
.vc-block-page button.vc-btn {
	background-color: #4A7874 !important;
	cursor: pointer;
	font-family: inherit; /* <button> does not inherit the page face by default */
}

.vc-block-page button.vc-btn:hover,
.vc-block-page button.vc-btn:focus-visible {
	background-color: #3C625F !important;
}

/* Once loaded the iframe IS the box, so the shell drops its own chrome. */
.vc-block-page .vc-map__frame {
	width: 100%;
	height: 360px;
	border: 0;
	display: block;
}

/* ==========================================================================
 * About (post 8631), Prices (post 36) and Privacy Policy (post 17081).
 * All three converted from Elementor to Gutenberg on 2026-07-26. Namespaced
 * .vc-about / .vc-prices / .vc-legal so nothing here reaches the Contact or PRP
 * pages, which share this sheet.
 * ========================================================================== */

.vc-block-page .vc-about,
.vc-block-page .vc-prices,
.vc-block-page .vc-legal {
	padding-block: clamp(32px, 5vw, 64px);
}

/* Measure. Long-form body copy past ~70 characters a line is measurably harder
   to track back to the next line, and these are three of the wordiest pages on
   the site. Headings and the CTA rows are deliberately NOT clamped. */
.vc-block-page .vc-about > .wp-block-group__inner-container > p,
.vc-block-page .vc-legal > .wp-block-group__inner-container > p,
.vc-block-page .vc-legal > .wp-block-group__inner-container > ul {
	max-width: 70ch;
}

/* --------------------------------------------------------------- about -- */

/* Three equal pillars on desktop; core collapses them at 781px on its own. */
.vc-block-page .vc-about__pillars {
	gap: clamp(20px, 3vw, 40px);
	margin-block: clamp(24px, 4vw, 44px);
}

.vc-block-page .vc-about__pillars h2 {
	margin-top: 0;
	font-size: 20px;
	text-transform: uppercase;
}

/* The wordmark is 1220x328 native. Unconstrained it dwarfs the copy around it
   and, at 1200-1500px, this is the exact shape of the bug that broke the header
   logo (see CLAUDE.md) — so it is capped here rather than left to inherit. */
.vc-block-page .vc-about__mark img {
	max-width: min(100%, 360px);
	height: auto;
}

.vc-block-page .vc-about__specialists-intro {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 500;
}

/* -------------------------------------------------------------- prices -- */

.vc-block-page .vc-prices h2 {
	margin-top: clamp(28px, 4vw, 44px);
	font-size: 20px;
	text-transform: uppercase;
}

/* Price rows are scan targets, not prose: no bullet, one row per line, a rule
   between rows so the eye can travel from the treatment to the figure. The
   figure is <strong>, which is why no extra class is needed to weight it. */
.vc-block-page .vc-prices__list {
	max-width: 62ch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-block-page .vc-prices__list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 10px 0;
	border-bottom: 1px solid #e2e2de;
	line-height: 1.5;
}

.vc-block-page .vc-prices__list li:last-child {
	border-bottom: 0;
}

/* At 402px a long treatment name plus its price cannot share a line; wrapping
   the price under the name (rather than squeezing both) keeps the row readable
   and is why justify-content is paired with flex-wrap above. */
.vc-block-page .vc-prices__list li strong {
	white-space: nowrap;
}

.vc-block-page .vc-prices__note {
	max-width: 62ch;
	margin-top: clamp(24px, 4vw, 36px);
}

/* --------------------------------------------------------------- legal -- */

.vc-block-page .vc-legal h2 {
	margin-top: clamp(28px, 4vw, 40px);
	font-size: 20px;
}

.vc-block-page .vc-legal__updated {
	margin-top: clamp(28px, 4vw, 40px);
	font-size: 14px;
	color: #4a4f45;
}

/* ==========================================================================
 * HEADING SCALE for the four converted block pages.
 *
 * The parent theme sets h1 to a FLAT 60px/84px with no breakpoint — measured
 * identical at 402px and 1440px. "Contact us" survives that because it is two
 * words; the Prices h1 rendered 672px tall on a 402px-wide phone (eight lines,
 * two full screens before any content), and Privacy Policy 252px. The old
 * Elementor builds hid this by never using an h1 in the content and hand-tuning
 * a per-widget mobile font size — which is exactly the per-page tuning this
 * conversion is meant to delete.
 *
 * So the scale is declared once here, fluid, and the pages stop caring.
 * SCOPED to the four wrappers this worker owns. The PRP landing page (18410)
 * shares .vc-block-page and still has the flat-60px h1 — same latent bug, left
 * alone deliberately rather than changed without a look at that page.
 * ========================================================================== */

.vc-block-page .vc-contact > .wp-block-group__inner-container > h1,
.vc-block-page .vc-about > .wp-block-group__inner-container > h1,
.vc-block-page .vc-prices > .wp-block-group__inner-container > h1,
.vc-block-page .vc-legal > .wp-block-group__inner-container > h1 {
	font-size: clamp(28px, 5.2vw, 46px);
	line-height: 1.15;
	margin-bottom: clamp(16px, 3vw, 28px);
}

/* Section headings (Contact's "Find us", About's "Meet our specialists") sit a
   clear step below the h1. The 20px uppercase group labels declared earlier —
   the About pillars and every Prices group — are a different, smaller role and
   deliberately keep their own size; these two rules do not fight because those
   selectors are more specific. */
.vc-block-page .vc-contact > .wp-block-group__inner-container > h2,
.vc-block-page .vc-about > .wp-block-group__inner-container > h2,
.vc-block-page .vc-legal > .wp-block-group__inner-container > h2 {
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.25;
}

/* The parent theme resets list-style to none site-wide (it uses <ul> for menus
 * and icon rows). On the Privacy Policy that turned six enumerated items into
 * six unindented loose lines with nothing marking them as a set — measured on
 * the live page at 402px. The bullets come back here, scoped to the legal page
 * only, so nothing else that relies on the reset is disturbed. The Prices lists
 * keep the reset deliberately: those rows carry their own rules and are
 * name/figure pairs, not bulleted prose.
 */
.vc-block-page .vc-legal ul.wp-block-list {
	list-style: disc;
	padding-left: 1.4em;
}

.vc-block-page .vc-legal ul.wp-block-list li {
	margin-bottom: 0.35em;
}