/* ==========================================================================
   CIRCL — theme-level CSS
   Only what cannot live in Elementor global classes belongs here:
   keyframes, descendant selectors, and markup rendered outside an Elementor
   document (the PHP header and drawer, which never get the .elementor
   ancestor that global classes are scoped under).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Mirrors the Elementor kit variables so the PHP header can use the same
   values. Keep in sync with the global variables on the kit.
   -------------------------------------------------------------------------- */
:root {
	/*
	 * Only the two tokens the Elementor kit cannot hold correctly.
	 *
	 * Every other --circl-*, --ink-*, --space-*, --radius-* and --text-*
	 * token is defined by the kit at :root and applies site-wide, including
	 * to this theme's own header and drawer markup. They were duplicated
	 * here, and because this stylesheet loads AFTER the kit's, the stale
	 * copies silently won: editing a colour in Elementor would have had no
	 * effect. Removed for that reason. Do not re-add them.
	 */

	/* A global font variable stores the family name only, so the kit's
	 * --font-core has no fallbacks. Restated here with a real stack. */
	--font-core: "Zalando Sans SemiExpanded", system-ui, "Helvetica Neue", Arial, sans-serif;

	/* Not expressible as a kit variable (no easing-curve type). */
	--ease-drawer: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
/* Pin the root to 16px. The old Higeia theme shipped a 62.5% root, which made
   every rem-based token resolve at 10px and silently shrank the whole type
   scale. Kit tokens are px now, but this keeps any rem in third-party CSS
   behaving as the design assumes. */
html {
	font-size: 100%;
}

body {
	font-family: var(--font-core);
	letter-spacing: -0.03em;
	color: var(--circl-black);
	background: var(--circl-white);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

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

.skip-link.screen-reader-text:focus {
	left: 8px;
	top: 8px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--circl-black);
	color: #fff;
	border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   3. Buttons (PHP-side twin of the Elementor .btn global classes)
   -------------------------------------------------------------------------- */
.circl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-core);
	font-weight: 600;
	letter-spacing: -0.03em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms cubic-bezier(.2, .6, .2, 1),
		color 160ms cubic-bezier(.2, .6, .2, 1),
		border-color 160ms cubic-bezier(.2, .6, .2, 1);
}

.circl-btn--sm { height: 36px; padding: 0 18px; font-size: .875rem; }
.circl-btn--md { height: 44px; padding: 0 24px; font-size: .875rem; }
.circl-btn--lg { height: 52px; padding: 0 30px; font-size: 1rem; }
.circl-btn--block { width: 100%; }

.circl-btn--lemon { background: var(--circl-lemon); color: var(--circl-black); }
.circl-btn--lemon:hover { filter: brightness(.96); color: var(--circl-black); }

.circl-btn--dark { background: var(--circl-black); color: #fff; }
.circl-btn--dark:hover { background: var(--circl-black-blue); color: #fff; }

.circl-btn--outline {
	background: transparent;
	color: var(--circl-black);
	border-color: var(--circl-black);
}

.circl-btn--outline:hover { background: var(--circl-black); color: #fff; }

/* --------------------------------------------------------------------------
   4. Shell, promo bar and header
   The header is absolutely positioned out of a zero-height anchor so it floats
   over the Elementor hero below it, matching the design where the header sits
   inside the hero section.
   -------------------------------------------------------------------------- */
/*
 * Export 6 (23 September 2026) runs the promo bar, hero and footer edge to edge,
 * so the shell no longer insets or caps its width. The header content still
 * tracks a centred 1352px column on wide screens through its own padding.
 */
.circl-shell {
	margin: 0;
	padding: 0;
}

.circl-promo {
	border-radius: 0;
	background: var(--circl-light-blue);
	color: var(--circl-black);
	padding: 11px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.circl-header-anchor {
	position: relative;
	height: 0;
	z-index: 40;
}

/*
 * Brand | nav | actions. The side padding keeps the 44px edge at 1440 and
 * below, then holds the content to a centred 1352px column on wider screens,
 * exactly as the export does.
 */
.circl-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 48px;
	padding: 26px max(44px, calc(50vw - 676px));
	color: #fff;
}

.circl-header__brand {
	justify-self: start;
	display: block;
}

.circl-header__brand img {
	height: 30px;
	width: auto;
	display: block;
}

.circl-nav {
	display: flex;
	align-items: center;
	gap: 36px;
	justify-self: start;
}

.circl-header__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 28px;
}

.circl-nav__link,
.circl-header__login {
	color: #fff;
	opacity: .78;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
	border-bottom: 1px solid transparent;
	transition: opacity 160ms ease;
}

.circl-nav__link:hover,
.circl-header__login:hover { opacity: 1; color: #fff; }

.circl-nav__link[aria-current="page"] { opacity: 1; }

/*
 * Light variant, used on pages that open on white (Practitioners, Waitlist).
 * On those the design puts the header in normal flow above the content rather
 * than floating it over a dark hero, so the zero-height anchor is released and
 * the header stops being absolutely positioned.
 */
/*
 * On light pages there is no dark hero for the header to sit on, so the anchor
 * reserves the header's own height instead of collapsing to zero. The header
 * keeps the same absolute positioning, padding and height it has everywhere
 * else — only the colours change — so it does not jump between pages.
 *
 * 96px at desktop: the 44px header button + 2 x 26px padding (export 6).
 * 80px at mobile: the 44px burger tap target + 2 x 18px padding.
 */
body.circl-header-light .circl-header-anchor { height: 96px; }

/*
 * The light header sits 4px further out than the dark one: 40px at 1440 and a
 * centred 1360px column above that, lining up with the page box on white pages.
 * Desktop only, so the tablet and mobile padding below still apply.
 */
@media (min-width: 1025px) {
	body.circl-header-light .circl-header { padding-inline: max(40px, calc(50vw - 680px)); }
}

.circl-header[data-circl-theme="light"] { color: var(--circl-black); }
.circl-header[data-circl-theme="light"] .circl-nav__link,
.circl-header[data-circl-theme="light"] .circl-header__login { color: var(--circl-black); }

/*
 * Burger — hidden on desktop.
 *
 * The export sets margin-right:-10px here, which pulls the bars 10px closer to
 * the edge than the logo on the other side and reads as lopsided. Dropped, so
 * the bars line up with the header padding; the 44px tap target is unchanged.
 */
.circl-burger {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	align-content: center;
	justify-items: end;
	gap: 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.circl-burger span {
	display: block;
	width: 24px;
	height: 2.5px;
	background: #fff;
}

.circl-header[data-circl-theme="light"] .circl-burger span { background: var(--circl-black); }

/*
 * Sticky header (circl.js, initStickyHeader).
 *
 * At rest the header behaves as above. Once it has scrolled fully out of view
 * it becomes .is-stuck: fixed to the top, compact, and on a solid background
 * matching its theme. While stuck it hides (.is-hidden) as the visitor scrolls
 * down and slides back in as they scroll up. Back at the top it hands over to
 * the resting header at the same position, so nothing jumps.
 *
 * .is-instant suppresses the transitions for the one frame in which the header
 * switches to fixed, so it does not visibly slide out from the top.
 */
.circl-header {
	transition:
		padding 240ms var(--ease-drawer),
		background-color 240ms ease,
		box-shadow 240ms ease,
		transform 280ms var(--ease-drawer);
}

.circl-header__brand img { transition: height 240ms var(--ease-drawer); }

.circl-header.is-instant,
.circl-header.is-instant .circl-header__brand img { transition: none; }

.circl-header.is-stuck {
	position: fixed;
	top: var(--circl-admin-bar, 0px);
	padding-block: 16px;
	background-color: var(--circl-black-blue, #0b131e);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.circl-header.is-stuck .circl-header__brand img { height: 24px; }

.circl-header[data-circl-theme="light"].is-stuck {
	background-color: #fff;
	box-shadow: 0 1px 0 rgba(8, 20, 23, .08), 0 8px 24px rgba(8, 20, 23, .06);
}

.circl-header.is-stuck.is-hidden {
	transform: translateY(calc(-100% - var(--circl-admin-bar, 0px)));
}

/* The WordPress admin bar (logged-in editors only) is fixed at 32px, 46px on
   small screens, and stops being fixed at 600px and below. */
body.admin-bar { --circl-admin-bar: 32px; }

@media (max-width: 782px) {
	body.admin-bar { --circl-admin-bar: 46px; }
}

@media (max-width: 600px) {
	body.admin-bar { --circl-admin-bar: 0px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.circl-header.is-stuck { padding-block: 14px; }
}

/* Mobile: the bar gets shorter but the logo keeps its size. */
@media (max-width: 767px) {
	.circl-header.is-stuck { padding-block: 12px; }

	.circl-header.is-stuck .circl-header__brand img { height: 22px; }
}

/*
 * Hello Elementor's reset.css styles every bare button on hover and focus:
 *   button:focus, button:hover { background-color: #c36; color: #fff }
 * A single class loses to that on specificity, so the burger and the drawer's
 * close button flash pink. It is most obvious after the drawer closes, because
 * focus is deliberately returned to the burger. Two-class selectors win, and
 * the keyboard ring is kept on :focus-visible so accessibility is unaffected.
 */
.circl-burger:hover,
.circl-burger:focus,
.circl-drawer__close:hover,
.circl-drawer__close:focus {
	background-color: transparent;
	color: inherit;
}

.circl-burger:focus-visible,
.circl-drawer__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Mobile drawer
   Deviations from the export, both deliberate:
   - the export wraps the drawer in a fixed 390px "stage" because the mobile
     design is a fixed-width preview frame; here it spans the viewport.
   - the panel is min(320px, 100% - 40px) so it does not fill the screen edge
     to edge on a 320px phone.
   -------------------------------------------------------------------------- */
.circl-drawer-host {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	visibility: hidden;
}

.circl-drawer-host.is-open {
	pointer-events: auto;
	visibility: visible;
}

.circl-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(8, 20, 23, .5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms var(--ease-drawer);
}

.circl-drawer-host.is-open .circl-drawer__scrim {
	opacity: 1;
	pointer-events: auto;
}

.circl-drawer {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(320px, calc(100% - 40px));
	transform: translateX(110%);
	z-index: 2;
	box-sizing: border-box;
	background: #fff;
	color: var(--circl-black);
	border-radius: var(--radius-xl) 0 0 var(--radius-xl);
	padding: 8px 24px 28px;
	border-left: 1px solid var(--border-hairline);
	display: flex;
	flex-direction: column;
	box-shadow: -18px 0 48px rgba(8, 20, 23, .18);
	transition: transform 280ms var(--ease-drawer);
	overflow-y: auto;
}

.circl-drawer-host.is-open .circl-drawer { transform: translateX(0); }

.circl-drawer__head {
	display: flex;
	align-items: center;
	padding: 18px 4px 8px;
}

.circl-drawer__brand { display: block; line-height: 0; }

.circl-drawer__head img { height: 20px; width: auto; display: block; }

.circl-drawer__close {
	margin-left: auto;
	margin-right: -10px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--circl-black);
	font-family: inherit;
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
}

.circl-drawer__nav {
	display: grid;
	gap: 0;
	padding-top: 12px;
}

.circl-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	color: var(--circl-black);
	text-decoration: none;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.03em;
	border-top: 1px solid rgba(8, 20, 23, .1);
}

.circl-drawer__link:first-child { border-top: 0; }

.circl-drawer__arrow { font-size: 20px; color: var(--ink-300); }

.circl-drawer__foot {
	display: grid;
	gap: 10px;
	margin-top: auto;
	padding-bottom: 8px;
}

body.circl-drawer-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Responsive
   Mapped onto Elementor's kit breakpoints so the builder and the theme agree.
   Mobile is <= 767px, matching the kit's --mobile.
   -------------------------------------------------------------------------- */
/*
 * Tablet. The export has no tablet header; the three-column row needs about
 * 954px, so between 768 and 1024 it falls back to a tighter flex row (88px
 * tall). That row still wraps below about 850px, so under 900px the burger and
 * drawer take over instead of a two-row header.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.circl-header {
		display: flex;
		flex-wrap: wrap;
		gap: 14px 28px;
		padding: 22px 32px;
	}

	.circl-nav { gap: 24px; flex-wrap: wrap; }

	.circl-header__actions { margin-left: auto; gap: 20px; }

	body.circl-header-light .circl-header-anchor { height: 88px; }
}

@media (min-width: 768px) and (max-width: 899px) {
	.circl-header { flex-wrap: nowrap; }

	.circl-nav,
	.circl-header__actions { display: none; }

	.circl-burger { display: grid; }
}

@media (max-width: 767px) {
	.circl-promo { padding: 10px 16px; font-size: 12px; }

	.circl-header { display: flex; padding: 18px 20px; gap: 0; }

	.circl-header__brand img { height: 22px; }

	body.circl-header-light .circl-header-anchor { height: 80px; }

	.circl-nav,
	.circl-header__actions { display: none; }

	.circl-burger { display: grid; }
}

@media (min-width: 900px) {
	.circl-drawer-host { display: none; }
}

/*
 * Price footnote marker, e.g. "$199<sup>*</sup>". The export sets the asterisk
 * at .55em, weight 600, on a tight line box so it does not open up the line.
 * A superscript inside an atomic paragraph cannot carry its own element style.
 */
.elementor sup {
	font-size: .55em;
	font-weight: 600;
	line-height: 1;
	vertical-align: super;
}

/* --------------------------------------------------------------------------
   6b. Icons
   Elementor inlines uploaded SVGs and rewrites fill="none" to
   fill="currentColor". The icon set is Lucide, which is stroke-only, so that
   rewrite fills every open path and turns a tick into a solid wedge. Force the
   fill back off and let stroke do the work.
   -------------------------------------------------------------------------- */
.elementor .e-svg-base svg {
	fill: none;
	stroke: currentColor;
	display: flex;
}

/*
 * Accordion indicator. The design uses a "+" that turns into a "×" on open,
 * with a 160ms transition. Elementor only rotates its own default SVG, not a
 * replaced child, so the rotation is driven from the open state here.
 *
 * It targets the glyph itself rather than its wrapper: Elementor resets any
 * transform on .e-accordion-item-icon-base, so a rule there is discarded even
 * with !important.
 */

.elementor .e-accordion-item-header-base, .elementor .e-accordion-item-content-base {
	padding: 0px;
}

.elementor .e-accordion-item-content-base {
	padding-top: 10px;
}

.elementor .e-accordion-item-icon-base p {
	transition: transform 160ms ease;
}

.elementor details[open] > summary .e-accordion-item-icon-base p {
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   7. Marquee
   Pure CSS, as per the design. Duplicated track, translated -50%.
   -------------------------------------------------------------------------- */
@keyframes circl-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.circl-marquee {
	position: relative;
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.circl-marquee-track {
	display: flex;
	width: max-content;
	animation: circl-marquee 34s linear infinite;
}

.circl-marquee:hover .circl-marquee-track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   8. Scroll rails
   The design's "carousels" are native horizontal scrollers with arrow buttons
   that animate scrollLeft. No library needed.
   -------------------------------------------------------------------------- */
/*
 * Layout for the rails lives in the `circl-rail` global class. Only the
 * scrollbar hiding stays here: ::-webkit-scrollbar is a pseudo-element and
 * -ms-overflow-style is a vendor property, neither of which a global class
 * can carry.
 */
.circl-rail { -ms-overflow-style: none; }

.circl-rail::-webkit-scrollbar { display: none; }



/* --------------------------------------------------------------------------
   9. Article body (blog post template)

   The post body is raw WordPress content, so none of Elementor's atomic
   element defaults reach it. These rules give it the same typographic
   rhythm as the rest of the site. Descendant selectors cannot live in a
   global class, so they belong here.
   -------------------------------------------------------------------------- */
/*
 * Flow spacing.
 *
 * The post body is rendered by Elementor's theme-post-content widget, so the
 * blocks are grandchildren of .circl-prose, not children. Both levels are
 * matched so the rhythm holds whether content is nested in the widget or
 * written directly into the container.
 */
.elementor .circl-prose > * + *,
.elementor .circl-prose .elementor-widget-theme-post-content > * + *,
.elementor .circl-prose .elementor-widget-container > * + * { margin-block-start: 1.3em; }

.elementor .circl-prose p,
.elementor .circl-prose li {
	font-size: 17px;
	line-height: 1.7;
	letter-spacing: -.01em;
	color: var(--ink-700);
}

.elementor .circl-prose h2,
.elementor .circl-prose h3,
.elementor .circl-prose h4 {
	font-family: var(--font-core);
	font-weight: 500;
	color: var(--circl-black);
	letter-spacing: -.03em;
	line-height: 1.12;
	margin-block-start: 1.9em;
	margin-block-end: 0;
}

.elementor .circl-prose h2 { font-size: clamp(26px, 2.6vw, 34px); }
.elementor .circl-prose h3 { font-size: 22px; }
.elementor .circl-prose h4 { font-size: 18px; font-weight: 600; }

.elementor .circl-prose h2 + *,
.elementor .circl-prose h3 + *,
.elementor .circl-prose h4 + * { margin-block-start: .7em; }

.elementor .circl-prose a {
	color: var(--circl-black);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ink-200);
	transition: text-decoration-color 160ms;
}

.elementor .circl-prose a:hover { text-decoration-color: var(--circl-black); }

.elementor .circl-prose strong { font-weight: 600; }

.elementor .circl-prose ul,
.elementor .circl-prose ol {
	padding-inline-start: 22px;
	margin-block: 0;
}

.elementor .circl-prose li + li { margin-block-start: .5em; }

.elementor .circl-prose li::marker { color: var(--ink-300); }

.elementor .circl-prose blockquote {
	margin-inline: 0;
	padding: 28px 30px;
	border-radius: var(--radius-lg);
	background: var(--circl-light-blue);
	font-size: 20px;
	line-height: 1.45;
	letter-spacing: -.02em;
	color: var(--circl-black);
}

.elementor .circl-prose blockquote p { font-size: inherit; line-height: inherit; color: inherit; }

.elementor .circl-prose blockquote cite {
	display: block;
	margin-block-start: 14px;
	font-size: 13px;
	font-style: normal;
	color: var(--ink-400);
}

.elementor .circl-prose img,
.elementor .circl-prose video,
.elementor .circl-prose iframe {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.elementor .circl-prose figure { margin: 0; }

.elementor .circl-prose figcaption {
	margin-block-start: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-400);
}

.elementor .circl-prose hr {
	border: 0;
	border-top: 1px solid var(--border-hairline);
	margin-block: 44px;
}

.elementor .circl-prose > :first-child,
.elementor .circl-prose .elementor-widget-theme-post-content > :first-child,
.elementor .circl-prose .elementor-widget-container > :first-child { margin-block-start: 0; }

@media (max-width: 767px) {
	.elementor .circl-prose p,
	.elementor .circl-prose li { font-size: 16px; }

	.elementor .circl-prose blockquote { padding: 22px 22px; font-size: 18px; }
}

/* --------------------------------------------------------------------------
   10. Loop pagination (archive and search templates)
   -------------------------------------------------------------------------- */
.elementor .e-loop-pagination,
.elementor .elementor-pagination {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-block-start: 56px;
}

.elementor .e-loop-pagination a,
.elementor .e-loop-pagination span,
.elementor .elementor-pagination a,
.elementor .elementor-pagination span {
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-default);
	font-family: var(--font-core);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--circl-black);
	text-decoration: none;
	transition: background-color 160ms, border-color 160ms;
}

.elementor .e-loop-pagination a:hover,
.elementor .elementor-pagination a:hover { background: var(--circl-light-grey); }

.elementor .e-loop-pagination .current,
.elementor .elementor-pagination .current {
	background: var(--circl-black);
	border-color: var(--circl-black);
	color: var(--circl-white);
}

/* --------------------------------------------------------------------------
   11. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}

	.circl-rail { scroll-behavior: auto; }
}