/* Page templates without Elementor (members directory first). BEM, wttc- prefix, tokens only.
   Header: the same as everywhere; on these white pages its ink is navy until the page scrolls (class wttc-header-light, see header.css). */

.wttc-page { background: var(--wttc-white); color: #151B34; font-family: var(--wttc-font-sans); }
.wttc-page a:not(.wttc-button) { color: inherit; } /* not the buttons: their own colours (components.css) must win */

/* ---------- Hero: white, clean, editorial. Two columns: breadcrumbs, title, subtitle and button on the left, the picture on the right
   (phones: picture first). The header is the same as everywhere (body class wttc-header-light: navy ink over the white until the page scrolls). ---------- */
.wttc-hero { padding: calc(var(--wttc-header-full) + 40px) 0 72px; }
.wttc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.wttc-hero__grid.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
.wttc-hero__title { margin: 0; color: var(--wttc-navy); font: 400 clamp(44px, 5.4vw, 76px)/1.03 var(--wttc-font-serif); letter-spacing: -.8px; text-wrap: balance; }
.wttc-hero__lead { margin: 22px 0 0; max-width: 44ch; color: rgba(21, 27, 52, .82); font-size: 19px; line-height: 1.55; }
.wttc-hero__button { margin-top: 36px; }
.wttc-hero__button svg { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.wttc-hero__button:hover svg, .wttc-hero__button:focus-visible svg { transform: translateY(3px); }
.wttc-hero__media { margin: 0; }
.wttc-hero__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 16px; }
.wttc-hero__caption { margin-top: 10px; color: rgba(21, 27, 52, .68); font-size: 12px; }
.wttc-directory { scroll-margin-top: calc(var(--wttc-header-offset, 80px) + 8px); }

/* ---------- Introduction: statement on the left, paragraphs on the right ---------- */
.wttc-intro { padding: 24px 0 72px; background: var(--wttc-cream); }
.wttc-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; padding-top: 48px; }
.wttc-intro__statement { margin: 0; color: var(--wttc-navy); font: 400 clamp(24px, 2.6vw, 34px)/1.25 var(--wttc-font-serif); text-wrap: pretty; }
.wttc-intro__text { font-size: 16px; line-height: 1.75; color: #151B34; }
.wttc-intro__text > * { margin-block: 0 1.1rem; }
.wttc-intro__text a { color: var(--wttc-navy); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Directory (Core shortcode) ---------- */
.wttc-directory { padding: 56px 0 72px; background: #f1f2f7; }   /* the filters and the members sit on a light grey band, apart from the white of the text and the picture */



@media (max-width: 960px) {
	.wttc-hero { padding-bottom: 48px; }
	.wttc-hero__grid.has-image { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.wttc-hero__media { order: -1; }
	.wttc-hero__image { border-radius: 12px; }
	.wttc-media__image { aspect-ratio: 4 / 3; border-radius: 12px; }
	.wttc-intro__grid { grid-template-columns: minmax(0, 1fr); }
	.wttc-directory { padding: 40px 0 56px; }
}

/* ---------- Members directory: the filters stay under the header once they reach it ----------
   Look and layout are Core's, untouched. members.js wraps the Core form in .wttc-md-filterbar (the sticky / pinned element, its height fixed
   to the form's natural one so the content below never moves) and toggles is-stuck on the form. While stuck: the labels fold away to save
   space and a grey plate (the colour of this band) lets the members scroll underneath. Back at the top, everything is as it was.
   The plate = background + a box-shadow clipped to the bar plus 8px above and below: it never changes the layout. */
.wttc-md-filterbar { display: flow-root; position: sticky; top: calc(max(var(--wttc-logo-size-sm), 40px) + var(--wttc-space-2) * 2 + var(--wp-admin--admin-bar--height, 0px) + 8px); z-index: 20; pointer-events: none; }
.wttc-md-filterbar > .wttc-md-filters { pointer-events: auto; clip-path: inset(-8px -100vmax); box-shadow: 0 0 0 100vmax transparent; background-color: transparent; transition: box-shadow .25s ease, background-color .25s ease; }
.wttc-md-filterbar > .wttc-md-filters.is-stuck { background-color: #f1f2f7; box-shadow: 0 0 0 100vmax #f1f2f7; }
.wttc-md-filterbar .wttc-md-filters .wttc-md-filters__label { max-height: 20px; overflow: hidden; transition: max-height .3s cubic-bezier(.22, 1, .36, 1), margin .3s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.wttc-md-filterbar .wttc-md-filters.is-stuck .wttc-md-filters__label { max-height: 0; margin-bottom: 0 !important; opacity: 0; transform: translateY(-4px); }
.wttc-md-filterbar .wttc-md-filters .wttc-md-filters__status { transition: min-height .25s ease; }
.wttc-md-filterbar .wttc-md-filters.is-stuck .wttc-md-filters__status:empty { min-height: 0; }
.wttc-md-filterbar.is-measuring, .wttc-md-filterbar.is-measuring * { transition: none !important; }
.wttc-md-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.wttc-md-filterbar > .wttc-md-filters, .wttc-md-filterbar .wttc-md-filters .wttc-md-filters__label, .wttc-md-filterbar .wttc-md-filters .wttc-md-filters__status { transition: none; }
}

/* ---------- Phones (<= 767px): one row, search + a Filters button; region and tier open in a bottom sheet (members.js) ---------- */
.wttc-md-filterbtn, .wttc-md-sheet { display: none; }
@media (max-width: 767px) {
	.wttc-directory .wttc-md-filters { grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; align-items: end; }
	.wttc-directory .wttc-md-filters .wttc-md-filters__field--search { grid-column: 1; }
	.wttc-directory .wttc-md-filters .wttc-md-filters__status { grid-column: 1 / -1; }
	/* Every state is set: Hello Elementor paints any button red (#c36) on :hover, :focus and :active, and a tapped button keeps :focus. */
	button.wttc-md-filterbtn { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid #D1CFC8; border-radius: 8px; background: var(--wttc-white); color: var(--wttc-navy); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
	button.wttc-md-filterbtn:hover, button.wttc-md-filterbtn:focus, button.wttc-md-filterbtn:active, button.wttc-md-filterbtn[aria-expanded="true"] { background: var(--wttc-white); color: var(--wttc-navy); border-color: var(--wttc-navy); }
	button.wttc-md-filterbtn:focus:not(:focus-visible):not(:hover):not(:active):not([aria-expanded="true"]) { border-color: #D1CFC8; }
	button.wttc-md-filterbtn.has-active:focus:not(:focus-visible):not(:hover):not(:active), button.wttc-md-filterbtn.has-active { border-color: var(--wttc-navy); }
	button.wttc-md-filterbtn:focus-visible { outline: 2px solid var(--wttc-navy); outline-offset: 2px; }
	.wttc-md-filterbtn__badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--wttc-navy); color: var(--wttc-white); font: 600 11px/18px var(--wttc-font-sans); text-align: center; }
	.wttc-md-filterbtn__badge[hidden] { display: none; }

	.wttc-md-sheet { display: block; position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
	.wttc-md-sheet[hidden] { display: none; }
	.wttc-md-sheet.is-open { visibility: visible; }
	.wttc-md-sheet__backdrop { position: absolute; inset: 0; background: rgba(21, 27, 52, .5); opacity: 0; transition: opacity .3s ease; }
	.wttc-md-sheet.is-open .wttc-md-sheet__backdrop { opacity: 1; }
	.wttc-md-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--wttc-white); box-shadow: 0 -10px 40px rgba(21, 27, 52, .25); transform: translateY(100%); transition: transform .35s cubic-bezier(.22, 1, .36, 1); outline: 0; }
	.wttc-md-sheet.is-open .wttc-md-sheet__panel { transform: none; }
	.wttc-md-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
	.wttc-md-sheet__title { color: var(--wttc-navy); font: 400 24px/1.2 var(--wttc-font-serif); }
	.wttc-md-sheet__close { display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -8px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wttc-navy); cursor: pointer; transition: background-color .2s ease; }
	button.wttc-md-sheet__close:hover, button.wttc-md-sheet__close:focus, button.wttc-md-sheet__close:active { background: rgba(21, 27, 52, .08); color: var(--wttc-navy); }
	button.wttc-md-sheet__close:focus:not(:focus-visible):not(:hover):not(:active) { background: transparent; }
	.wttc-md-sheet__search { position: relative; }
	.wttc-md-sheet .wttc-md-sheet__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 18px; }
	/* Actions row: [Clear filters] [Show results]. Clear folds in (width, fade, scale) when a filter is on and out when none is, and
	   Show results gives up / takes back that room as it goes (flex). Core toggles the hidden attribute: the hidden state is restyled here. */
	.wttc-md-sheet__actions { display: flex; align-items: stretch; }
	button.wttc-md-sheet__done { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 20px; border: 1px solid var(--wttc-navy); border-radius: var(--wttc-radius); background: var(--wttc-navy); color: var(--wttc-white); font: 500 14px/1.2 var(--wttc-font-sans); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
	button.wttc-md-sheet__done:hover, button.wttc-md-sheet__done:focus-visible, button.wttc-md-sheet__done:active { background: transparent; color: var(--wttc-navy); }
	button.wttc-md-sheet__done:focus:not(:focus-visible):not(:hover):not(:active) { background: var(--wttc-navy); color: var(--wttc-white); }
	.wttc-md-sheet .wttc-md-sheet__actions .wttc-md-filters__reset, .wttc-md-sheet .wttc-md-sheet__actions .wttc-md-filters__reset[hidden] {
		display: block !important; flex: 0 0 auto; box-sizing: border-box; height: 52px; max-width: 170px; margin: 0 10px 0 0; padding: 0 20px; overflow: hidden; white-space: nowrap;
		border: 1px solid var(--wttc-navy) !important; border-radius: var(--wttc-radius) !important; background: var(--wttc-white) !important; color: var(--wttc-navy) !important; font: 500 14px/1 var(--wttc-font-sans) !important; cursor: pointer;
		opacity: 1; transform: scale(1); transition: max-width .35s cubic-bezier(.22, 1, .36, 1), margin .35s cubic-bezier(.22, 1, .36, 1), padding .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1), background-color .2s ease, color .2s ease;
	}
	.wttc-md-sheet .wttc-md-sheet__actions .wttc-md-filters__reset[hidden] { max-width: 0; margin-right: 0; padding: 0; border-width: 0 !important; opacity: 0; transform: scale(.9); pointer-events: none; }
	.wttc-md-sheet .wttc-md-sheet__actions .wttc-md-filters__reset:hover, .wttc-md-sheet .wttc-md-sheet__actions .wttc-md-filters__reset:focus-visible, .wttc-md-sheet .wttc-md-sheet__actions .wttc-md-filters__reset:active { background: var(--wttc-navy) !important; color: var(--wttc-white) !important; }
	.wttc-md-sheet .wttc-md-sheet__actions .wttc-md-filters__reset:focus:not(:focus-visible):not(:hover):not(:active) { background: var(--wttc-white) !important; color: var(--wttc-navy) !important; }
	body.wttc-md-sheet-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.wttc-md-sheet__backdrop, .wttc-md-sheet__panel, .wttc-md-filterbtn, .wttc-md-sheet .wttc-md-sheet__actions .wttc-md-filters__reset { transition: none !important; }
}