/*
 * Loaded AFTER site.css and after Elementor's per-page stylesheet.
 *
 * Elementor emits per-element rules like
 *   .elementor-129 .elementor-element.elementor-element-61db706 { --display: flex }
 * at specificity (0,3,0), which outranks the original layout rules such as
 * .hero-actions { display: flex } at (0,1,0) - so every container became a flex
 * COLUMN and side-by-side layouts stacked.
 *
 * Matching that (0,3,0) here and resetting only the CUSTOM PROPERTY is the whole
 * fix: .e-con resolves `display: var(--display)` to block, while any original
 * rule that sets `display` directly still wins normally on the cascade.
 */
.elementor-page .e-con.k-native,
.elementor .e-con.k-native {
	--display: block;
	--width: auto;
	--content-width: 100%;
	/* --flex-direction is deliberately NOT set here: the `e-flex` class is
	   removed in PHP instead, so originals like .tab-panels{flex-direction:column}
	   apply without Elementor's (0,2,0) rule outranking them. */
}

/* Same reasoning for the inner wrapper Elementor adds to boxed containers. */
.elementor-page .e-con.k-native > .e-con-inner,
.elementor .e-con.k-native > .e-con-inner {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

/*
 * Elementor writes Global-Fonts rules onto its widget WRAPPERS, e.g.
 *   .elementor-widget-text-editor { font-family: ...; line-height: ... }
 * The original design styles the inner elements instead (.eyebrow, p, h1), so
 * for any property the original does not restate - line-height above all - the
 * kit value leaked through and made every text block taller. That accumulated
 * into the hero and pushed its buttons under the overlapping feature strip.
 *
 * Global Colors/Fonts stay available to the client in Site Settings; they just
 * no longer override the imported design on these generated pages.
 */
.elementor-page .elementor-widget-text-editor,
.elementor-page .elementor-widget-heading,
.elementor-page .elementor-widget-button {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/*
 * Make Elementor's widget wrappers boxless inside generated containers.
 *
 * The original CSS assumes its own DOM: .stats3 is a 3-column grid whose
 * children are the three stat blocks, with a decorative <svg> taken out of flow
 * by position:absolute. Wrapping each widget in .elementor-widget >
 * .elementor-widget-container inserts two extra boxes, so that decorative SVG
 * became a real grid item and pushed "120+" onto its own row.
 *
 * display:contents removes those wrapper boxes from layout entirely, so the
 * real elements become the direct grid/flex children the original CSS expects.
 */
.e-con.k-native > .elementor-widget,
.e-con.k-native > .elementor-widget > .elementor-widget-container {
	display: contents;
}

/* Requested: more breathing room between the testimonials and the contact block. */
.contact-section { margin-top: 56px; }
@media (max-width: 860px) { .contact-section { margin-top: 36px; } }

/*
 * Elementor's frontend.min.css resets
 *   .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }
 * at specificity (0,4,1), which outranks the source's own
 *   .journey-photo { margin-top: 36px }
 * and pushed the doctor's photo flush against the paragraph above it.
 * `journey-photo` is the only <figure> class in the whole source, so restating
 * it once at higher specificity is enough.
 */
.elementor .e-con.k-native .elementor-widget .journey-photo {
	margin-top: 36px;
}

/*
 * Section dividers. The source already separates most sections with
 * `border-top: 1px solid var(--line)` (an inline style), but applied it
 * inconsistently. Extend the same treatment to every consecutive content
 * section so the rhythm is uniform.
 *
 * Skipped where it would read badly: the dark .surgeon-section supplies its own
 * edge, so neither it nor the section following it needs a rule.
 */
.elementor > section.pad + section.pad:not(.surgeon-section) {
	border-top: 1px solid var(--line);
}

.elementor > section.surgeon-section + section.pad {
	border-top: 0;
}

/*
 * Inside the Elementor editor, show scroll-reveal content.
 *
 * The design hides ~38 elements per page with `.reveal{opacity:0}` and only
 * reveals them when an IntersectionObserver in site.js adds `.is-visible`.
 * Elementor re-renders the canvas after that script has run, so freshly drawn
 * widgets are never observed: they stay fully editable but completely invisible,
 * which is exactly what "I can edit elements but I can't see them" describes.
 *
 * Scoped to `.elementor-editor-active`, a class Elementor puts on the preview
 * <body>, so the animation still plays normally for real visitors.
 */
.elementor-editor-active .reveal,
.elementor-editor-active .reveal-group > *,
.elementor-editor-active .reveal-group > .elementor-widget > *,
.elementor-editor-active .reveal-group > .elementor-widget > .elementor-widget-container > * {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Same for the contact block, which uses its own is-visible gate. */
.elementor-editor-active .contact-section,
.elementor-editor-active .contact-section.is-visible {
	opacity: 1;
}

/*
 * Elementor needs real boxes to draw selection handles on. display:contents is
 * what makes the imported layout work on the front end, but in the editor it
 * leaves widgets with no hit area, so keep the wrappers boxed while editing.
 */
.elementor-editor-active .e-con.k-native > .elementor-widget,
.elementor-editor-active .e-con.k-native > .elementor-widget > .elementor-widget-container {
	display: block;
}

/*
 * Language switcher button states.
 *
 * The source only ever styled :hover (border + a very pale teal-50 fill) and
 * left :focus, :focus-visible, :active and the open state undefined — so those
 * fell through to whatever the browser or a plugin supplied. In practice that
 * meant a washed-out button on hover and Elementor's brand crimson (#92003B)
 * with a blue UA focus ring once clicked.
 *
 * All four states are now defined explicitly with the site's own teal palette,
 * at .lang-switcher .lang-current (0,2,0) so nothing outranks them.
 */
.lang-switcher .lang-current {
	background: var(--paper);
	color: var(--ink-700);
	border: 1px solid var(--line);
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.lang-switcher .lang-current:hover {
	background: var(--teal-50);
	border-color: var(--teal-600);
	color: var(--teal-800);          /* was left at ink-700, which washed out */
}

/* Keyboard focus gets a visible teal ring instead of the browser's blue one. */
.lang-switcher .lang-current:focus,
.lang-switcher .lang-current:focus-visible {
	background: var(--teal-50);
	border-color: var(--teal-600);
	color: var(--teal-800);
	outline: 2px solid var(--teal-600);
	outline-offset: 2px;
	box-shadow: none;
}

/* Mouse focus should not leave a persistent ring after the click. */
.lang-switcher .lang-current:focus:not(:focus-visible) {
	outline: none;
}

.lang-switcher .lang-current:active {
	background: var(--teal-100);
	border-color: var(--teal-700);
	color: var(--teal-900);
}

/* Dropdown open: a clear, filled state rather than an inherited default. */
.lang-switcher.open .lang-current {
	background: var(--teal-100);
	border-color: var(--teal-600);
	color: var(--teal-900);
}

.lang-switcher .lang-current .lang-label,
.lang-switcher .lang-current .chev {
	color: inherit;
}

/*
 * Hello Elementor's reset.css declares
 *   a:active, a:hover { color: #336 }
 * at specificity (0,1,1), which outranks .btn-primary { color: #fff } at (0,1,0).
 * The solid buttons never declare a hover colour of their own - the original
 * hover rules only change background and transform - so the cascade fell through
 * to the reset and every solid button's label turned dark blue (#333366) the
 * moment the pointer touched it. .btn-outline escaped it only by accident: its
 * .btn-outline:hover { color: #fff } happens to sit at (0,2,0).
 *
 * Restate each variant's intended colour above that specificity. Doubling the
 * class keeps this element-agnostic, so it holds whether the button renders as
 * an <a> or as a CF7 <button>.
 */
.btn.btn-primary:hover,
.btn.btn-primary:active {
	color: #fff;
}

/* Transparent until hovered, then a filled teal pill - white either way. */
.btn.btn-outline:hover,
.btn.btn-outline:active {
	color: #fff;
}

/* White/pale-teal pill: the label must STAY teal, never go white or dark blue. */
.btn.btn-light:hover,
.btn.btn-light:active {
	color: var(--teal-800, #0e6b7a);
}

/*
 * Same reset.css rule, two more casualties found by sweeping every anchor on the
 * page rather than just the buttons:
 *
 * .topbar a had no colour rule of ANY kind - the phone and email links simply
 * inherit .topbar's #cfe6e8. On hover they dropped to #333366 against the
 * --teal-950 bar, i.e. dark blue on near-black, which is effectively invisible.
 * Brightening to white on hover is both the fix and the affordance the links
 * were missing.
 */
.topbar a:hover,
.topbar a:active {
	color: #fff;
}

/* White pill, dark teal label; its own :hover only sets transform. */
.float-call-opt:hover,
.float-call-opt:active {
	color: var(--teal-950, #0e1f2b);
}