/*
Theme Name: fpm-maple-brook-wellness
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Project components only: spacing, type and colour belong to native controls and the kit; ec-base.css owns the resets. */

/* ====================================================================
   page
   ==================================================================== */

html { scroll-behavior: smooth; }
html.ec-drawer-locked { overflow: visible; } /* ec-base.css:111 locks scroll for an open drawer; the design locks neither panel. */
[id] { scroll-margin-top: 96px; }
[id^="cat-"] { scroll-margin-top: 120px; }
body.maple-site { -webkit-font-smoothing: antialiased; }
.maple-site p { text-wrap: pretty; }
.maple-site .e-con > .elementor-widget { min-width: 0; }
.maple-site h2, .maple-balance .elementor-heading-title, .maple-zh h1, .maple-quote--center p { text-wrap: balance; }
.maple-pretty .elementor-heading-title { text-wrap: pretty; }
.maple-plain p { text-wrap: wrap; }
.maple-site span.elementor-heading-title { display: block; } /* An inline span takes a line box from the body's line-height. */
.maple-leaf, .maple-logo { display: flex; }
.maple-leaf img { display: block; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.maple-site *, .maple-site *::before, .maple-site *::after { transition: none !important; animation: none !important; }
}

/* ====================================================================
   components
   ==================================================================== */

/* Photo bands: two stacked gradients, no overlay control reaches that. */
.maple-photo-band { position: relative; }
.maple-photo-band > .e-con-inner, .maple-photo-band > .e-con { position: relative; z-index: 1; }
.maple-photo-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.maple-scrim-warm::after { background: linear-gradient(180deg, rgba(40,22,12,0.35) 0%, rgba(40,22,12,0) 22%, rgba(40,22,12,0) 70%, rgba(40,22,12,0.3) 100%), linear-gradient(90deg, rgba(40,22,12,0.66) 0%, rgba(40,22,12,0.42) 45%, rgba(40,22,12,0.05) 85%); }
.maple-scrim-contact::after { background: linear-gradient(180deg, rgba(40,22,12,0.4) 0%, rgba(40,22,12,0) 30%, rgba(40,22,12,0) 65%, rgba(40,22,12,0.35) 100%), linear-gradient(90deg, rgba(40,22,12,0.7) 0%, rgba(40,22,12,0.45) 50%, rgba(40,22,12,0.08) 90%); }
.maple-scrim-forest::after { background: linear-gradient(180deg, rgba(30,22,14,0.4) 0%, rgba(30,22,14,0) 30%, rgba(30,22,14,0) 65%, rgba(30,22,14,0.35) 100%), linear-gradient(90deg, rgba(30,22,14,0.72) 0%, rgba(30,22,14,0.45) 50%, rgba(30,22,14,0.12) 90%); }
.maple-scrim-cool::after { background: linear-gradient(180deg, rgba(26,32,25,0.4) 0%, rgba(26,32,25,0) 30%, rgba(26,32,25,0) 65%, rgba(26,32,25,0.4) 100%), linear-gradient(90deg, rgba(22,26,20,0.74) 0%, rgba(22,26,20,0.5) 50%, rgba(22,26,20,0.18) 90%); }
.maple-scrim-cta::after { background: linear-gradient(180deg, rgba(30,36,29,0) 35%, rgba(30,36,29,0.78) 100%); }
.maple-scrim-dusk::after { background: linear-gradient(180deg, rgba(30,26,20,0.1) 25%, rgba(30,26,20,0.8) 100%); }
.maple-scrim-flat::after { background: rgba(30,26,20,0.55); }
.maple-shadow h1, h1.maple-shadow, .maple-shadow .elementor-heading-title { text-shadow: 0 2px 24px rgba(20,16,12,0.35); }
.maple-shadow p { text-shadow: 0 1px 14px rgba(20,16,12,0.45); }

.maple-em-river em { color: var(--e-global-color-maple_river_deep); }
.maple-break, .maple-break .elementor-heading-title { overflow-wrap: anywhere; }

/* Buttons: timing and the lift live here; Elementor's single hover duration would apply to every property. */
.elementor .maple-btn .elementor-button { display: inline-block; text-align: left; transition: background 300ms ease-out, transform 300ms ease-out, box-shadow 300ms ease-out; }
.elementor .maple-btn .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(47,43,39,0.22); }
.elementor .maple-btn .elementor-button:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(47,43,39,0.18); }
.elementor .maple-btn--blur .elementor-button { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.maple-photo-band .maple-btn--primary .elementor-button { box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.maple-photo-band .maple-btn--primary .elementor-button:hover { box-shadow: 0 14px 30px rgba(47,43,39,0.3); }
.maple-btn--block, .elementor .maple-btn--block .elementor-button { width: 100%; text-align: center; }
.elementor .maple-btn .elementor-button-content-wrapper { justify-content: flex-start; }
.elementor .maple-btn--block .elementor-button-content-wrapper { justify-content: center; }

/* Focus ring per surface: ec-base's currentColor ring vanishes on a filled button. */
.elementor .maple-btn--primary .elementor-button:focus-visible { outline-color: var(--e-global-color-maple_ink); }
.elementor .maple-photo-band .maple-btn--primary .elementor-button:focus-visible, .elementor .maple-header:not(.is-scrolled):not(:has(.maple-panel--mega.is-open)) .maple-header__book .elementor-button:focus-visible, .elementor .maple-btn--light .elementor-button:focus-visible { outline-color: var(--e-global-color-maple_white); }

/* Links inside copy: the design underlines these at 700. */
.maple-inline-link a { color: var(--e-global-color-maple_river_deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.maple-inline-link a:hover, .maple-text-link a:hover { color: var(--e-global-color-maple_maple_deep); }
.maple-text-link a { color: var(--e-global-color-maple_river_deep); text-decoration: underline; text-underline-offset: 4px; }
.maple-footer__crisis strong { color: var(--e-global-color-maple_white); }

/* Link cards */
.maple-link-card { transition: transform 300ms ease-out, box-shadow 300ms ease-out, border-color 300ms; }
.maple-link-card:hover, .maple-link-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(47,43,39,0.10); border-color: var(--e-global-color-maple_sand); }
.maple-arrow { position: relative; }
.maple-arrow::after { content: ""; position: absolute; right: 26px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--e-global-color-maple_maple_deep); border-right: 2px solid var(--e-global-color-maple_maple_deep); transform: rotate(45deg); }
.maple-arrow .elementor-widget { padding-right: 25px; }

.maple-dot { transform: translateY(-2px); }

/* Arch portrait: the img carries the ratio and focus; the wrapper anchors the name card and centres in its grid cell. */
.maple-portrait { position: relative; justify-self: center; }
.maple-arch img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--e-global-color-maple_cream); }
.maple-focus-28 img { object-position: center 28%; }
.maple-focus-32 img { object-position: center 32%; }
.maple-name-card { box-shadow: 0 14px 36px rgba(47,43,39,0.10); }

/* Accordion icon: a ring round Elementor's plus and minus. */
.maple-faq .e-n-accordion-item-title { cursor: pointer; }
.maple-faq .e-n-accordion-item-title-icon { flex: none; width: 40px; height: 40px; border: 1.5px solid var(--e-global-color-maple_sand); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 300ms; }
.maple-faq .e-n-accordion-item-title-text { font-weight: 400; line-height: 1.3; } /* The widget's typography group drops the step's weight and line-height. */
.maple-faq .e-n-accordion-item-title-header { padding-inline-end: 20px; } /* The design's 20px between question and ring. */
.maple-nav-faq .maple-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon { background: var(--e-global-color-maple_sky); }

/* FAQ layout: flex-basis has no control. */
.elementor .maple-faq-aside { flex: 1 1 260px; max-width: 340px; }
@media (min-width: 965px) { .elementor .maple-faq-aside { position: sticky; top: 124px; } } /* Below this the aside can stack above the answers (945, plus up to a 17px classic scrollbar); sticky would lay it over them. */
.elementor .maple-faq-body { flex: 3 1 560px; min-width: 0; }
.maple-topic a { color: inherit; transition: color 200ms; }
.maple-topic a:hover { color: var(--e-global-color-maple_maple_deep); }

/* Footer columns: flex-basis has no control. */
.elementor .maple-footer__brand { flex: 1 1 200px; }
.elementor .maple-footer__explore { flex: 0.8 1 150px; }
.elementor .maple-footer__contact { flex: 1.5 1 320px; }
.elementor .maple-footer__credentials { flex: 1.1 1 240px; }
.maple-footer__link a:hover { text-decoration: underline; text-underline-offset: 4px; }
.maple-footer__email a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ====================================================================
   header: runtime states, set by maple-header.js and ec-base.js
   ==================================================================== */

.maple-header {
	--maple-header-ink: var(--e-global-color-maple_white);
	--maple-header-h: 128px;
	--maple-logo-h: 76px;
	--maple-burger-ring: rgba(255,255,255,0.5);
	background: rgba(255,252,247,0);
	border-bottom: 1px solid rgba(255,255,255,0.18);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: background 350ms ease-out, border-color 350ms ease-out, box-shadow 350ms ease-out;
}
.maple-header.is-scrolled, .maple-header:has(.maple-panel--mega.is-open), .maple-header:has(.maple-panel--mobile.is-open) {
	--maple-header-ink: var(--e-global-color-maple_ink);
	background: rgba(255,252,247,0.97);
	border-bottom-color: var(--e-global-color-maple_line);
}
.maple-header.is-scrolled, .maple-header:has(.maple-panel--mobile.is-open) { --maple-header-h: 96px; --maple-logo-h: 54px; }
.maple-header.is-scrolled:not(:has(.maple-panel--mega.is-open)) { box-shadow: 0 8px 28px rgba(47,43,39,0.07); }

.maple-header__bar { height: var(--maple-header-h); min-height: 0; transition: height 350ms ease-out; }
.maple-logo a { display: block; line-height: 0; }
.maple-logo img { display: block; width: auto; height: var(--maple-logo-h); transition: height 350ms ease-out; }
.maple-logo--clear { display: none; }
.maple-header:not(.is-scrolled):not(:has(.maple-panel.is-open)) .maple-logo--solid { display: none; }
.maple-header:not(.is-scrolled):not(:has(.maple-panel.is-open)) .maple-logo--clear { display: block; }

.maple-nav__link .elementor-heading-title a, .maple-nav__services .elementor-button { color: var(--maple-header-ink); white-space: nowrap; transition: color 250ms; }
.maple-nav__link a, .maple-nav__services .elementor-button-text { text-decoration-color: var(--e-global-color-maple_amber); text-decoration-thickness: 1.5px; text-underline-offset: 9px; }
.maple-nav__link a:hover { text-decoration-line: underline; }
.maple-nav-home .maple-nav--home a, .maple-nav-about .maple-nav--about a, .maple-nav-approach .maple-nav--approach a, .maple-nav-faq .maple-nav--faq a, .maple-nav-contact .maple-nav--contact a, .maple-nav-zh .maple-nav--zh a { text-decoration-line: underline; }
.maple-nav-services .maple-nav--services .elementor-button-text, .maple-nav__services [aria-expanded="true"] .elementor-button-text { text-decoration-line: underline; }
.maple-nav__link, .maple-nav__services { display: flex; align-items: center; }
.maple-nav__link a, .maple-nav__services .elementor-button { display: flex; align-items: center; height: 44px; }

.maple-nav__services .elementor-button-content-wrapper { align-items: center; gap: 9px; }
.maple-nav__services .elementor-button-content-wrapper::after, .maple-mobile__services .elementor-button-content-wrapper::after { content: ""; flex: none; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transition: transform 300ms ease-out; }
.maple-nav__services .elementor-button-content-wrapper::after { width: 7px; height: 7px; transform: translateY(-2px) rotate(45deg); }
.maple-nav__services [aria-expanded="true"] .elementor-button-content-wrapper::after { transform: translateY(2px) rotate(225deg); }

/* Panels: hidden until ec-base.js opens them, so no-script leaves the links in the footer and the Services fallback anchor. */
.maple-panel { display: none; }
.maple-panel.is-open { display: flex; }
.maple-panel--mega, .maple-panel--mobile { position: absolute; top: 100%; left: 0; right: 0; width: auto; background: var(--e-global-color-maple_paper); border-bottom: 1px solid var(--e-global-color-maple_line); }
.maple-panel--mega { border-top: 1px solid var(--e-global-color-maple_line); box-shadow: 0 24px 48px rgba(47,43,39,0.10); animation: maple-mega-in 300ms ease-out both; }
.maple-panel--mobile { max-height: calc(100vh - 100px); overflow-y: auto; box-shadow: 0 18px 40px rgba(47,43,39,0.10); }
@keyframes maple-mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.maple-mega__link { padding: 7px 0; }
.maple-mega__link a { transition: color 200ms; }
.maple-mega__link a:hover { color: var(--e-global-color-maple_maple_deep); }

/* Burger: three bars from the button's own pseudo-elements and label. */
.elementor .maple-burger .elementor-button { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
.maple-header.is-scrolled, .maple-header:has(.maple-panel--mobile.is-open) { --maple-burger-ring: var(--e-global-color-maple_sand); }
.maple-header__book .elementor-button { white-space: nowrap; }
.maple-burger .elementor-button-text { position: absolute; width: 20px; height: 2px; left: 11px; top: 20px; background: currentColor; border-radius: 2px; font-size: 0; transition: opacity 200ms; }
.maple-burger .elementor-button::before, .maple-burger .elementor-button::after { content: ""; position: absolute; left: 11px; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 300ms ease-out, top 300ms ease-out; }
.maple-burger .elementor-button::before { top: 14px; }
.maple-burger .elementor-button::after { top: 26px; }
.maple-burger [aria-expanded="true"] .elementor-button-text { opacity: 0; }
.maple-burger [aria-expanded="true"]::before { top: 20px; transform: rotate(45deg); }
.maple-burger [aria-expanded="true"]::after { top: 20px; transform: rotate(-45deg); }

.maple-mobile__services .elementor-button { display: block; width: 100%; text-align: left; }
.maple-mobile__services .elementor-button-content-wrapper { justify-content: space-between; align-items: center; }
.maple-mobile__services .elementor-button-content-wrapper::after { width: 10px; height: 10px; margin-right: 6px; border-color: var(--e-global-color-maple_river_deep); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
.maple-mobile__services [aria-expanded="true"] .elementor-button-content-wrapper::after { transform: translateY(3px) rotate(225deg); }
.maple-mobile__book { margin-top: 24px; }
.elementor .maple-mobile__book .elementor-button { display: block; text-align: center; }

/* ====================================================================
   third-party DOM (no control reaches it)
   ==================================================================== */