/*
Theme Name:   Forest at Duke Child
Theme URI:    https://forestduke.org/
Description:  Child theme of Hello Elementor for The Forest at Duke. All custom styles and functionality for this site live here, so the parent theme can be updated safely.
Author:       Cuberis
Author URI:   https://cuberis.com/
Template:     hello-elementor
Version:      1.0.0
Text Domain:  forest-at-duke-child
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Tags:         elementor
*/

/* =============================================================================
   Forest at Duke — custom styles
   -----------------------------------------------------------------------------
   Design tokens (brand colors, type scale) are managed in Elementor's Global
   Settings wherever possible. Use this file only for what Elementor cannot do.

   Font sizes in rem, never px.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   BUTTON GREEN — a token that exists only because of contrast.

   Brand Green #38B449 is 2.69:1 against white. Production puts white lettering
   on it anyway, on every button on the site. That fails AA (4.5:1) and is below
   even the 3:1 large-text allowance, so no font-size change can rescue it.

   Eric asked for the white lettering back on 2026-08-11 (it is what live does
   and what the design intends), and AA is the agreed standard, so the fill
   moves instead: --fad-button-green is the darkest-looking green that still
   reads as the brand and carries white at 4.5:1 or better.

   THIS IS DELIBERATELY NOT --e-global-color-primary. Brand Green stays exactly
   #38B449 everywhere it is decoration — list bullets, the green top rule, table
   headers — because decoration has no contrast requirement and the brand colour
   should not drift. Only text-bearing buttons use this token.

   To revert to the exact brand green on buttons (accepting the AA failure),
   change the one value below; every button follows.
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   MINT GREEN — the same story, and the reason there are TWO values.

   Legacy $mint-green #259A67 is used three incompatible ways: as text on white
   (job titles, the portrait quote heading), as a panel under WHITE text (the
   portrait bar), and as a panel under DARK text (the video feature box). It
   measures 3.56:1 against BOTH white and near-black, so it fails as text on
   white at 16px, and fails under white text at 12px — but it comfortably passes
   under the dark #202020 body text at 4.58:1.

   Darkening it fixes the first two and BREAKS the third. So:

     --fad-mint       #259A67  unchanged. Only as a panel under DARK text,
                               and as pure decoration.
     --fad-mint-dark  #208657  4.56:1 both ways. Mint TEXT on white, and any
                               mint panel that carries WHITE text.

   The two never appear next to each other, and at this distance they read as
   the same green.
   -------------------------------------------------------------------------- */
:root {
	--fad-button-green: #1E862C;       /* white on this: 4.66:1 */
	--fad-button-green-hover: #17661F; /* white on this: 7.10:1 */
	--fad-mint: #259A67;               /* dark text on this: 4.58:1 */
	--fad-mint-dark: #208657;          /* 4.56:1 against white, either way */
	--fad-dark-green: #093423;         /* legacy $dark-green; white on it: 13.8:1 */
	--fad-dark-gray: #555555;          /* legacy $dark-gray; white on it: 7.46:1 */
}

/* =============================================================================
   1. CUBERIS STRUCTURAL UTILITIES
   -----------------------------------------------------------------------------
   Class names follow the standard Cuberis container architecture (outer
   full-width .mobile-margins -> inner boxed -> content). The VALUES below are
   Forest at Duke's own, taken from the legacy theme so components match the
   existing design exactly.
   ========================================================================== */

/* Side gutter on the outer full-width container.
   Legacy: .container had 15px left/right padding at every breakpoint. */
.mobile-margins {
	padding-left: 15px;
	padding-right: 15px;
}

/* Vertical rhythm between stacked components.
   Legacy: .component { margin-bottom: 2rem } and 4rem from 992px up,
   with .component:last-child { margin-bottom: 0 }. */
.space-l {
	margin-bottom: 2rem;
}

@media (min-width: 992px) {
	.space-l {
		margin-bottom: 4rem;
	}
}

.space-l:last-child {
	margin-bottom: 0;
}

/* The rest of the spacing scale, so an editor can open up or tighten the gap under any
   component from Advanced > CSS Classes without typing margins. Same idea as space-l:
   bottom margin only, half-size on phones, and nothing after the last component.
   space-none removes the gap entirely (two components meant to read as one). */
.space-none { margin-bottom: 0; }
.space-s { margin-bottom: 1rem; }
.space-m { margin-bottom: 1.5rem; }
.space-xl { margin-bottom: 3rem; }

@media (min-width: 992px) {
	.space-s { margin-bottom: 2rem; }
	.space-m { margin-bottom: 3rem; }
	.space-xl { margin-bottom: 6rem; }
}

.space-s:last-child,
.space-m:last-child,
.space-xl:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   1b. PARAGRAPH BASE
   -----------------------------------------------------------------------------
   The legacy theme ran two different settings: body inherited 16px/1.4286/#333
   (set in Elementor's global body typography), while paragraphs specifically
   were 18px/1.5/#202020. Elementor's Theme Style has no paragraph control, so
   the paragraph half lives here. Anything that is not a paragraph — list items,
   table cells, form text, accordion titles — correctly takes the smaller
   inherited size.

   Scoped to .cmp-text rather than applied to every p on the site. A bare `p`
   rule looks more faithful to the legacy stylesheet but is actively harmful
   here: Elementor sets a widget's colour and size on the widget wrapper and
   lets the paragraph inherit, so any declared `p` rule silently overrides every
   per-widget typography setting in the builder. It cost the CTA paragraph its
   white 24px text the first time round.
   ========================================================================== */

.cmp-text p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
}

/* =============================================================================
   2. COMPONENT CONTENT TYPOGRAPHY
   -----------------------------------------------------------------------------
   Applied via the .cmp-text class on Text Editor widgets. Elementor's global
   typography already supplies the families, sizes and weights; what lives here
   is the per-context colouring and the custom list markers that the legacy
   .wysiwyg block provided and Elementor has no equivalent for.
   ========================================================================== */

/* Line height 1.1 on every heading in author content. The legacy theme never
   set one, so its headings take Bootstrap 3's $headings-line-height: 1.1;
   Hello Elementor's reset says 1.2. On a 32px h2 that is 3.2px per line, which
   moved every wrapped heading on every converted page. */
.cmp-text h1,
.cmp-text h2,
.cmp-text h3,
.cmp-text h4,
.cmp-text h5,
.cmp-text h6 {
	line-height: 1.1;
}

.cmp-text h2 {
	color: var(--e-global-color-secondary); /* forest green #1E4F40 */
	margin-bottom: 1.5rem;
}

.cmp-text h3 {
	color: var(--e-global-color-fadheadinggr); /* #267A31 */
	font-weight: 600;
}

.cmp-text h4 {
	color: var(--e-global-color-faddarkgreen); /* #093423 */
	font-weight: 600;
}

.cmp-text h2:first-child,
.cmp-text h3:first-child,
.cmp-text h4:first-child {
	margin-top: 0;
}

.cmp-text p {
	margin-bottom: 1.25rem;
}

.cmp-text p a {
	text-decoration: underline;
}

/* Legacy list treatment: no native marker, green rounded square bullets for
   ul; bold counters for ol. Both hang in a 1.75rem indent. */
.cmp-text ul,
.cmp-text ol {
	font-size: 1.125rem;
	line-height: 1.5;
	margin-bottom: 1.25rem;
	padding-left: 1.75rem;
	list-style: none;
}

.cmp-text ul li,
.cmp-text ol li {
	position: relative;
}

.cmp-text ul li::before {
	content: '';
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--e-global-color-primary); /* brand green #38B449 */
	position: absolute;
	top: 0.5rem;
	left: -1.75rem;
}

.cmp-text ol {
	counter-reset: item;
}

.cmp-text ol li {
	margin-bottom: 0.5rem;
}

.cmp-text ol li::before {
	content: counter(item) '.';
	counter-increment: item;
	font-weight: 600;
	position: absolute;
	top: 0;
	left: -1.75rem;
}

/* =============================================================================
   2b. COMPONENT INTRO COLUMN (.cmp-intro)
   -----------------------------------------------------------------------------
   The legacy theme gave every narrow left-hand component column (.col-third) its
   own treatment: a plain dark-grey heading rather than the forest-green one used
   in body copy, and smaller, airier paragraphs. Shared by the accordion, media,
   gallery and people components, so it is named for the role, not the component.
   Measured on forestduke.org/assisted-living/.
   ========================================================================== */

/* The plain component heading: dark grey, light weight. Distinct from a heading
   inside body copy, which is forest green. Split out from .cmp-intro because the
   gallery wants this heading with NORMAL 18px paragraphs, while the accordion
   and media caption want it with the small 14px column copy. */
/* WEIGHT 500, NOT the 300 production declares. Production declares 300 but has
   been rendering it in the browser's fallback sans-serif ever since the Gotham
   licence lapsed, and a fallback has no 300 — it paints 400. Montserrat DOES
   have a 300, so honouring the declared value made the heading visibly lighter
   than the site Eric is comparing against. He called 500 from the side-by-side
   on 2026-08-11; that is the design decision, not the stylesheet's number. */
.cmp-heading h2 {
	color: #333;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: 10px;
}

.cmp-intro p {
	font-size: 0.875rem;
	line-height: 2;
	margin-bottom: 20px;
}

/* Legacy flourish: when the column opens with copy rather than a heading, that
   first paragraph carries a green rule above it. */
.cmp-intro p:first-child {
	padding-top: 20px;
	border-top: 3px solid var(--e-global-color-primary);
}

/* =============================================================================
   2c. ACCORDION (.cmp-accordion)
   -----------------------------------------------------------------------------
   Built on Elementor's Nested Accordion, which renders native <details>/<summary>
   — keyboard operable and correctly announced without any help from us. What
   Elementor has no control for is the legacy chrome: each panel is a grey box,
   and the toggle is a green button labelled "Expand" / "Collapse" pinned to the
   right of the title rather than an icon. Both are supplied here.
   Measured on forestduke.org/assisted-living/.
   ========================================================================== */

/* Elementor drives this widget from custom properties. Title size, the gap
   between panels and the gap from an open title to its content are set on the
   widget's own controls (see the CMP: Accordion template) because the widget
   writes those at a specificity a theme stylesheet cannot reach. What is left
   here is what has no control at all. */
.cmp-accordion .cmp-accordion-list {
	--n-accordion-padding: 0;               /* title row: the grey box supplies the padding */
	--n-accordion-border-width: 0;
	--n-accordion-icon-gap: 0;
	--n-accordion-title-normal-color: #333;
	--n-accordion-title-hover-color: #333;
	--n-accordion-title-active-color: #333;
}

/* Each panel is the legacy grey box. */
.cmp-accordion .elementor-widget-n-accordion .e-n-accordion-item {
	background-color: #EDEDED;
	border: 1px solid #D4D3D3;
	border-radius: 3px;
	padding: 24px;
}

/* The title row stays the height of its text; the taller toggle button overhangs
   it and is absorbed by the panel's 24px padding, exactly as the legacy layout
   does. Giving the row the button's height instead would make every panel 10px
   taller than production. */
.cmp-accordion .elementor-widget-n-accordion .e-n-accordion-item-title {
	position: relative;
	/* Reserve the button's width so a long title can never run underneath it. */
	padding-right: 100px;
}

.cmp-accordion .e-n-accordion-item-title-header {
	flex: 1 1 auto;
}

.cmp-accordion .e-n-accordion-item-title-text {
	width: 100%;
	max-width: 85%;
}

/* The Expand / Collapse button.
   White lettering, as production has it, on the darkened --fad-button-green.
   See the token definition at the top of this file for why the fill moved
   rather than the label. */
.cmp-accordion .e-n-accordion-item-title::after {
	content: 'Expand';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--fad-button-green);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4286;
	padding: 5px 30px;
	border-radius: 3px;
	white-space: nowrap;
}

.cmp-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
	content: 'Collapse';
}

/* No icon: the legacy affordance is a worded button (Expand/Collapse). Items added or duplicated in the editor
   get the default icon drawn back in (server-rendered ones do not), so hide it outright. */
.cmp-accordion .e-n-accordion-item-title-icon {
	display: none !important;
}

/* Visible keyboard focus on the whole title row (WCAG 2.4.7). The legacy markup
   had none — it used an <a> with no href, which was not focusable at all. */
.cmp-accordion .e-n-accordion-item-title:focus-visible {
	outline: 2px solid var(--e-global-color-secondary);
	outline-offset: 2px;
}

/* The revealed panel body: a hairline rule, then the content. Elementor's own
   rule draws a border on all four sides; only the top one belongs here. */
.cmp-accordion .elementor-widget-n-accordion .e-n-accordion-item > .e-con {
	border: none;
	border-top: 1px solid #D4D3D3;
	padding-top: 32px;
}

.cmp-accordion-body p {
	font-size: 1rem;
	line-height: 1.5;
}

.cmp-accordion-body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	/* Below the legacy small breakpoint the button drops under the title rather
	   than crowding it, which is what the old stylesheet did by only pinning the
	   button from 768px up. */
	.cmp-accordion .elementor-widget-n-accordion .e-n-accordion-item-title {
		display: block;
		padding-right: 0;
	}

	.cmp-accordion .e-n-accordion-item-title-text {
		max-width: 100%;
	}

	.cmp-accordion .e-n-accordion-item-title::after {
		position: static;
		transform: none;
		display: inline-block;
		margin-top: 16px;
	}
}

/* =============================================================================
   2d. CALL TO ACTION (.cmp-cta)
   -----------------------------------------------------------------------------
   The band itself — size, radius, photograph and the green wash over it — is set
   with Elementor's own background and background-overlay controls on the
   container. Only the heading's shrink-to-fit behaviour needs CSS.
   ========================================================================== */

/* Legacy uses display:table-caption on this heading so the box hugs the wrapped
   text instead of filling the column. Kept so measurements match exactly. */
.cmp-cta-heading h2 {
	display: table-caption;
}

.cmp-cta-text p {
	margin-bottom: 0;
}

/* BELOW 768 THE GRADIENT STOPS COVERING THE WORDS.
   The band's photograph is washed with a LEFT-TO-RIGHT gradient: solid to 42%,
   transparent by 84%. On a desktop panel the copy sits in the left 40% and is
   covered. Below 768 the copy goes full width and runs straight out into the
   photograph — measured on /assisted-living/ at 375: white heading 2.16:1,
   white copy 1.07:1 against a pale kitchen wall.

   Production has the same text over the same photograph with no wash at all, so
   this is not a regression; it is the desktop fix not reaching the phone. The
   overlay goes flat below 768. There is no room to keep any of the photograph:
   the copy fills 82% of the band's height at that width.

   Elementor paints a container's background overlay with ::before, not with a
   child element — a rule written for `.elementor-background-overlay` matches
   nothing here and looks like it worked. */
@media ( max-width: 767px ) {
	/* FOUR classes. Elementor writes the overlay as
	   `.elementor-NNNN .elementor-element.elementor-element-XXXX::before`, which
	   is three, and a media query adds no specificity at all — the first attempt
	   at this rule was two classes deep and changed nothing. */
	.cmp.cmp-cta.cmp-cta-expanded .cmp-cta-band::before {
		background-image: none;
		background-color: #1F8257; /* white on it is 4.78:1 */
	}
}

/* =============================================================================
   2f. GALLERY (.cmp-gallery)
   -----------------------------------------------------------------------------
   Grey box; heading, copy and a "View Gallery" button on the left; three photo
   tiles on the right at 28% / 44% / 28%. The tile strip deliberately bleeds 48px
   past the box so the photos run to its right edge — that -48px exactly cancels
   the box's right padding.

   Every image after the third is hidden, but stays in the lightbox: verified
   that Elementor collects display:none gallery items (a six-image probe with
   three hidden opened at "1 / 6"). That is what lets one component show three
   photos and offer twenty-seven.
   Measured on forestduke.org/our-campus/.
   ========================================================================== */

/* The two columns are set as percentages (39.91% + 57.02%) plus a 30px gap,
   which lands about 2px short of the content box — and because the tile strip
   is right-aligned by a negative margin, all of that shortfall showed up as a
   visible sliver of grey between the last photo and the border. Letting the
   tile column absorb the leftover puts the photos flush against the edge, which
   is what the design intends (production leaves 1px there for the same reason). */
.cmp-gallery .cmp-gallery-tiles {
	flex-grow: 1;
}

/* No bottom margin. Production has 10px there, but its tile strip is a
   float-only <ul> with zero measured height, so the margin never affects the
   box. This strip clears its floats, so keeping the 10px would make the grey
   box 465px instead of production's 455px. */
.cmp-gallery-grid .gallery {
	margin: 0 -48px 0 0;
	display: block;
}

/* Elementor sets .gallery-item to width:100% capped by a 33.33% max-width, at
   the same specificity as a two-class theme rule — so the tiles came out as
   equal thirds. Both properties have to be set, from three classes deep. */
.cmp-gallery-grid .elementor-image-gallery .gallery-item {
	float: left;
	width: 28%;
	max-width: 28%;
	margin: 0;
	padding: 0;
}

.cmp-gallery-grid .elementor-image-gallery .gallery-item:nth-child(2) {
	width: 44%;
	max-width: 44%;
	padding: 0 10px;
}

/* Only the first three tiles are on the page. The rest are still in the
   lightbox — do not replace this with anything that removes them from the DOM. */
.cmp-gallery-grid .elementor-image-gallery .gallery-item:nth-child(n+4) {
	display: none;
}

.cmp-gallery-grid .elementor-image-gallery .gallery-item img,
.cmp-gallery-grid .elementor-image-gallery .gallery-item a {
	display: block;
	width: 100%;
	height: 325px;
	object-fit: cover;
	border: none;
}

.cmp-gallery-grid .gallery-icon {
	margin: 0;
}

/* WP's gallery markup emits a caption slot per item; the legacy design has none
   (captions belong to the lightbox). */
.cmp-gallery-grid .gallery-caption {
	display: none;
}

.cmp-gallery-grid .gallery::after {
	content: '';
	display: table;
	clear: both;
}

/* PRODUCTION KEEPS THE THREE-ACROSS STRIP ON A PHONE. It does not stack. The
   columns go one above the other, so the strip sits under the heading rather
   than beside it, but the three tiles keep their 28 / 44 / 28 split and only
   lose height. Measured on /our-campus/ at 375: tiles 87.1, 136.8 and 87.1 wide
   inside a 311px strip, each 160 tall, in a grey box 345 wide with 32px padding.

   The stacking rules that used to be here made three 295-wide photographs 220
   tall and took the grey box from 448px to 1003px — a third of a phone screen
   became three quarters of one. */
@media (max-width: 767px) {
	/* -32px, not -48px: the bleed cancels the grey box's padding, and the box
	   pads 32px at this width rather than 48. */
	.cmp-gallery-grid .gallery {
		margin-right: -32px;
	}

	.cmp-gallery-grid .elementor-image-gallery .gallery-item img,
	.cmp-gallery-grid .elementor-image-gallery .gallery-item a {
		height: 160px;
	}
}

/* =============================================================================
   2e. MEDIA (.cmp-media)
   -----------------------------------------------------------------------------
   A wide image (or 16:9 video) with a narrow caption column beside it. Note the
   columns are the MIRROR of the Text/Image component — here the media is the
   two-thirds side. The caption column reuses .cmp-intro, which is the same
   legacy .col-third treatment, green top rule and all.
   Measured on forestduke.org/programs-activities/.
   ========================================================================== */

.cmp-media-image img {
	border-radius: 3px;
	width: 100%;
	height: auto;
}

/* =============================================================================
   3. IMAGE CAPTION
   -----------------------------------------------------------------------------
   Legacy .img-caption: solid forest-green band directly beneath the image.
   Elementor renders captions as figcaption.widget-image-caption.
   ========================================================================== */

/* AN EMPTY CAPTION IS NOT A CAPTION. Elementor renders the figcaption whether
   or not the attachment has one, so every photograph without a caption got a
   50px band of solid forest green under it — 25px of padding twice, and nothing
   in between. Production renders no element at all in that case. */
.cmp-image figcaption.widget-image-caption:empty {
	display: none;
}

.cmp-image figcaption.widget-image-caption {
	width: 100%;
	margin: -1px 0 0;
	padding: 25px;
	background-color: var(--e-global-color-secondary);
	/* !important: the component templates give each image widget its own caption colour
	   (global Text, dark grey), which beat this and put dark text on the green band. */
	color: #fff !important;
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 2;
	text-align: left;
	border: none;
}

/* Links inside the caption band.
   ACCESSIBILITY: the site link colour (#228B54) on the forest-green caption
   background (#1E4F40) measures 2.18:1 — far below the 4.5:1 minimum, and
   below even the 3:1 large-text threshold, so no font-size increase can
   rescue it. White takes it to 9.34:1.
   The underline is required too, not decorative: WCAG 1.4.1 (Use of Color,
   Level A) means a link must not be identified by colour alone, and against a
   white caption body a white link would otherwise be indistinguishable. */
.cmp-image figcaption.widget-image-caption a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cmp-image figcaption.widget-image-caption a:hover,
.cmp-image figcaption.widget-image-caption a:focus-visible {
	color: #fff;
	text-decoration-thickness: 2px;
}

/* Visible keyboard focus. Uses white on the dark caption band so the indicator
   itself stays visible (WCAG 2.4.7 Focus Visible). */
.cmp-image figcaption.widget-image-caption a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* =============================================================================
   4. GRAVITY FORMS (inside CMP: Form)
   -----------------------------------------------------------------------------
   ROOT CAUSE, found 2026-08-10: Gravity Forms' own stylesheet is switched OFF in
   this install (Forms > Settings > Output CSS = disabled) — and it is off on
   production too; the live pages load no Gravity stylesheet at all. Every bit of
   form appearance on forestduke.org comes from the old theme's compiled CSS. So
   when the theme went, the forms lost list-style resets, field widths, the
   address grid and the custom controls all at once, which is why they rendered
   as a bulleted list of narrow grey boxes.

   Do NOT "fix" this by re-enabling Gravity's CSS: that would import a whole
   design system that production has never used and fight this file forever. The
   legacy rules are ported here instead, scoped to .cmp-gform.

   Markup note: form 6 has no markupVersion, so Gravity renders LEGACY markup
   (ul.gform_fields > li.gfield) on both sides. These selectors assume that.
   Values measured on https://forestduke.org/contact-us/ at 1440px.
   ========================================================================== */

/* The lists Gravity builds are structural, never bulleted. */
.cmp-gform .gform_fields,
.cmp-gform .gfield_checkbox,
.cmp-gform .gfield_radio {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cmp-gform .gfield {
	margin-bottom: 1rem;
}

.cmp-gform .gfield_label {
	font-size: 1.125rem;
	font-weight: 500;
	color: #333;
	margin-bottom: 5px;
}

/* The required asterisk is left in the label's own colour, as production has it.
   WCAG 1.4.1 is satisfied by the character itself plus the "fields marked with
   an asterisk (*) are required" sentence in the intro column — colour is not
   carrying the meaning, so there is nothing to fix. */
.cmp-gform .gfield_required {
	color: inherit;
}

/* Text inputs. Production has no border — the field is defined by an inset
   shadow — and fills its column. */
.cmp-gform .gform_wrapper input[type='text'],
.cmp-gform .gform_wrapper input[type='email'],
.cmp-gform .gform_wrapper input[type='tel'],
.cmp-gform .gform_wrapper input[type='url'],
.cmp-gform .gform_wrapper input[type='number'],
.cmp-gform .gform_wrapper input[type='search'],
.cmp-gform .gform_wrapper select,
.cmp-gform .gform_wrapper textarea {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 6px 12px;
	font-size: 1rem;
	line-height: 1.4286;
	color: #202020;
	background-color: #fff;
	background-image: none;
	border: none;
	border-radius: 4px;
	box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.cmp-gform .gform_wrapper textarea {
	min-height: 240px;
}

/* Visible focus on every control (WCAG 2.4.7). The legacy theme relied on the
   browser default, which the inset shadow makes hard to see. */
.cmp-gform .gform_wrapper input:focus-visible,
.cmp-gform .gform_wrapper select:focus-visible,
.cmp-gform .gform_wrapper textarea:focus-visible {
	outline: 2px solid var(--e-global-color-secondary);
	outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   Select boxes: a bordered shell with a custom arrow painted over the native
   control, which is clipped by overflow.
   ------------------------------------------------------------------------- */

.cmp-gform .ginput_container_select,
.cmp-gform .address_country,
.cmp-gform .address_state {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 5px 5px 0;
	border: 1px solid #DBDBDB;
	border-radius: 6px;
}

.cmp-gform .ginput_container_select select,
.cmp-gform .address_country select,
.cmp-gform .address_state select {
	height: 40px;
	padding: 0 40px 0 12px;
	box-shadow: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.cmp-gform .ginput_container_select::after,
.cmp-gform .address_country::after,
.cmp-gform .address_state::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	display: block;
	pointer-events: none;
	background-image: url('images/down-arrow.svg');
	background-size: cover;
}

/* Inside the address block these two sit flush and keep the field shadow. */
.cmp-gform .address_country,
.cmp-gform .address_state {
	margin-right: 0;
	border: 1px solid transparent;
}

.cmp-gform .address_country select,
.cmp-gform .address_state select {
	box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}

.cmp-gform .address_state {
	padding: 0;
}

/* -------------------------------------------------------------------------
   Address block: street full width, then city / state / ZIP three across,
   then country. Sub-labels sit BELOW their field (Gravity's
   form_sublabel_below), which is why they must not be floated with it.
   ------------------------------------------------------------------------- */

.cmp-gform .ginput_complex::after {
	content: '';
	display: table;
	clear: both;
}

.cmp-gform .ginput_complex span {
	display: block;
	margin-bottom: 0.5rem;
}

.cmp-gform .ginput_complex span label {
	font-size: 0.875rem;
	font-weight: 400;
	margin-top: 5px;
	color: #333;
}

.cmp-gform .ginput_complex span.address_country {
	display: inline-block;
}

@media (min-width: 768px) {
	.cmp-gform .ginput_complex .address_city,
	.cmp-gform .ginput_complex .address_state,
	.cmp-gform .ginput_complex .address_zip {
		width: calc(33.333% + 5px);
		float: left;
		padding: 0 8px;
	}

	.cmp-gform .ginput_complex .address_city {
		margin-left: -8px;
	}

	.cmp-gform .ginput_complex .address_zip {
		margin-right: -8px;
	}
}

/* -------------------------------------------------------------------------
   Checkboxes and radios. The native control is made transparent and a 20px
   icon is drawn on the label, which is how production looks.
   ------------------------------------------------------------------------- */

.cmp-gform .gfield_checkbox,
.cmp-gform .gfield_radio {
	margin-top: 8px;
	margin-bottom: 25px;
}

.cmp-gform .gfield_checkbox li,
.cmp-gform .gfield_radio li,
.cmp-gform .gfield_checkbox .gchoice,
.cmp-gform .gfield_radio .gchoice {
	position: relative;
}

/* Both controls are made transparent, but only the CHECKBOX is taken out of
   flow. The radio stays in the line, and the space it occupies is what pushes
   its label clear of the icon — production relies on exactly that. Pulling the
   radio out of flow too (the obvious symmetry) drops every radio label back on
   top of its own icon. */
.cmp-gform .gfield_checkbox input[type='checkbox'] {
	position: absolute;
	left: 0;
	top: 3px;
	opacity: 0;
}

.cmp-gform .gfield_radio input[type='radio'] {
	opacity: 0;
}

/* Choice labels are a different size and weight from field labels, and
   PowerPack has no control for them — its field-label typography reaches every
   <label> in the form. Hence the deliberately long selectors: PowerPack writes
   `.elementor-NNNN .elementor-element.elementor-element-XXXX .pp-gravity-form
   .gfield_checkbox li label` after this file loads — five classes and two
   elements — so anything shorter ties at best and loses on order. The chain
   below is the real DOM path, not padding: ul.gform_fields > li.gfield >
   ul.gfield_checkbox > li > label. */
.cmp-gform .pp-gravity-form .gform_wrapper .gform_fields .gfield .gfield_checkbox li label,
.cmp-gform .pp-gravity-form .gform_wrapper .gform_fields .gfield .gfield_radio li label {
	cursor: pointer;
	padding-left: 15px;
	margin-bottom: 5px;
	font-size: 1rem;
	line-height: 1.4286;
}

/* Checkbox labels are regular weight; radio labels carry the bold that the
   legacy stylesheet leaves on <label>. Reproduced rather than normalised — it
   is what production shows. */
.cmp-gform .pp-gravity-form .gform_wrapper .gform_fields .gfield .gfield_checkbox li label {
	font-weight: 400;
	margin-left: 20px;
}

.cmp-gform .pp-gravity-form .gform_wrapper .gform_fields .gfield .gfield_radio li label {
	font-weight: 700;
}

.cmp-gform .gfield_checkbox input[type='checkbox'] + label::before,
.cmp-gform .gfield_radio input[type='radio'] + label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: 20px 20px;
}

.cmp-gform .gfield_checkbox input[type='checkbox'] + label::before {
	background-image: url('images/form-checkbox-unchecked.svg');
}

.cmp-gform .gfield_checkbox input[type='checkbox']:checked + label::before {
	background-image: url('images/form-checkbox-checked.svg');
}

.cmp-gform .gfield_radio input[type='radio'] + label::before {
	background-image: url('images/form-radio-unchecked.svg');
	border-radius: 50%;
}

.cmp-gform .gfield_radio input[type='radio']:checked + label::before {
	background-image: url('images/form-radio-checked.svg');
}

/* ACCESSIBILITY: a transparent input still takes focus, but its focus ring is
   invisible — so on production every checkbox and radio is unreachable-looking
   to a keyboard user (WCAG 2.4.7). The ring is drawn on the icon instead. */
.cmp-gform .gfield_checkbox input[type='checkbox']:focus-visible + label::before,
.cmp-gform .gfield_radio input[type='radio']:focus-visible + label::before {
	outline: 2px solid var(--e-global-color-secondary);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Footer and submit button
   ------------------------------------------------------------------------- */

.cmp-gform .gform_footer {
	margin-top: 2rem;
	text-align: center;
}

/* White lettering, as production has it, on the darkened --fad-button-green.
   See the token definition at the top of this file. PowerPack also writes the
   submit colours as per-element inline CSS, so build/fix-form-widget.php sets
   the same two values through the widget's own controls — change both or the
   builder's copy wins. */
.cmp-gform .gform_wrapper .gform_footer input[type='submit'],
.cmp-gform .gform_wrapper .gform_footer button,
.cmp-gform .gform_wrapper .gform_page_footer input[type='submit'] {
	display: inline-block;
	width: auto;
	background-color: var(--fad-button-green);
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: 5px 30px;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4286;
	box-shadow: none;
	cursor: pointer;
	/* WCAG 2.5.8 Target Size (Minimum, AA, new in 2.2) — at least 24x24px. */
	min-height: 39px;
	min-width: 44px;
}

.cmp-gform .gform_wrapper .gform_footer input[type='submit']:hover,
.cmp-gform .gform_wrapper .gform_footer button:hover {
	background-color: var(--e-global-color-fadheadinggr); /* #267A31 */
	color: #fff;
}

.cmp-gform .gform_wrapper .gform_footer input[type='submit']:focus-visible,
.cmp-gform .gform_wrapper .gform_footer button:focus-visible {
	outline: 3px solid var(--e-global-color-secondary);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Validation
   ------------------------------------------------------------------------- */

/* Production uses plain `red` at 0.85rem, which on the grey panel is 3.7:1 and
   fails AA. #A02020 is 6.59:1 on the same panel and reads as the same red. */
.cmp-gform .validation_message,
.cmp-gform .gfield_validation_message,
.cmp-gform .gfield_error .validation_message {
	color: #A02020;
	font-size: 0.875rem;
}

.cmp-gform .gfield_error input,
.cmp-gform .gfield_error select,
.cmp-gform .gfield_error textarea {
	border: 1px solid #A02020;
}

.cmp-gform .validation_error {
	color: #A02020;
	font-weight: 500;
	margin-bottom: 1rem;
}

/* =============================================================================
   2g. PEOPLE GROUP (.cmp-people)
   -----------------------------------------------------------------------------
   A centred uppercase heading over a two-column grid of people. Each person is
   a 180px square headshot FLOATED LEFT with the name, job title and optional
   detail line wrapping beside it, then a "View Bio" button that expands the bio
   full width below — the bio clears the float, the text above it does not.

   The float is not decorative: it is what lets a long job title wrap under the
   headshot rather than beside it. A flex or grid layout would change the
   wrapping and so the block heights.

   Measured on forestduke.org/leadership/ at 1440px (11 people, 6 rows).
   ========================================================================== */

/* THREE classes deep on purpose. The Heading widget wraps its text in
   .elementor-heading-title and Elementor styles that at .elementor-widget-heading
   .elementor-heading-title — two classes. A one-class rule loses, and the
   heading silently keeps the global green h2 treatment. Same reason the person
   name rule below is written this way. */
.cmp-people .cmp-people-heading h2,
.cmp-people .cmp-people-heading .elementor-heading-title {
	color: #333;
	font-size: 2rem;
	/* 500, not the 300 production declares — see the note on .cmp-heading. */
	font-weight: 500;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 30px;
}

/* Two columns with a 30px gutter, wrapping to one below the small breakpoint.
   Done here rather than with an Elementor width control because the calc() is
   what keeps the columns from overflowing between 768px and 1140px — a plain
   percentage only adds up at exactly 1140. */
.cmp-people-grid > .e-con,
.cmp-people-grid > .e-child {
	flex: 0 0 calc(50% - 15px);
	max-width: calc(50% - 15px);
}

@media (max-width: 767px) {
	.cmp-people-grid > .e-con,
	.cmp-people-grid > .e-child {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* BLOCK, not flex. Elementor containers are flex by default, and FLOATS DO NOT
   APPLY TO FLEX ITEMS — the headshot silently centred itself above the name
   instead of sitting beside it. The legacy layout is float-based and needs a
   block formatting context. */
.cmp-person {
	display: block;
}

/* Each person block clears its own headshot float so the next row starts clean;
   without this a short block would let the following person slide up beside a
   tall headshot. */
.cmp-person::after {
	content: '';
	display: table;
	clear: both;
}

/* margin-block-end, not just the margin shorthand. Elementor zeroes widget
   spacing with the LOGICAL property (.e-con > .elementor-widget { margin-block-end })
   which always wins over a physical margin-bottom in the shorthand no matter how
   many classes are stacked in front of it. The 16px is the gap between the
   headshot and any text that wraps beneath it. */
.cmp-people .cmp-person .cmp-person-photo {
	float: left;
	margin: 0 24px 16px 0;
	margin-block-end: 16px;
}

.cmp-person-photo img {
	display: block;
	width: 180px;
	height: 180px;
	object-fit: cover;
}

.cmp-person .cmp-person-name h3,
.cmp-person .cmp-person-name .elementor-heading-title {
	color: #333;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.1;
	margin: 0;
}

/* Job title: mint, and bold. At 16px/700 it is NOT large text by WCAG's rule
   (that needs 18.66px at 700), so it must clear 4.5:1 — which the legacy mint
   does not. Hence --fad-mint-dark. */
.cmp-person-title p {
	color: var(--fad-mint-dark);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4286;
	margin: 0;
}

/* The optional third line, legacy <small>: 0.85rem is the browser's 85% of the
   16px base, which is what production actually renders. */
.cmp-person-details p {
	color: #333;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4286;
	margin: 0;
}

/* ---- View Bio -------------------------------------------------------------
   Elementor's Nested Accordion, one item per person, styled down to the legacy
   button. Native details/summary, so the disclosure state is exposed to
   assistive technology with no script of ours.
   -------------------------------------------------------------------------- */

/* BLOCK, and NOT cleared. On production the View Bio button sits BESIDE the
   headshot and only the bio panel drops below it — they are siblings there,
   whereas <details> nests them.

   Left as Elementor's flex, the whole accordion becomes a formatting context
   that dodges the float, so the OPEN BIO inherited the button's narrow shifted
   column: 351px wide starting beside the headshot instead of 555 across. Making
   the wrapper a plain block lets the summary dodge the float on its own (it is
   still a flex box) while the panel below, which carries clear: both, drops to
   full width exactly as production does. */
.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion {
	display: block;
	clear: none;
}

/* Every rule below is prefixed with .elementor-widget-n-accordion. Elementor
   writes the accordion's padding, border and title colour as per-element CSS at
   that specificity; without the prefix the button keeps Elementor's 10px
   padding, 1px grey border and near-black label — which on the grey fill is
   2.16:1, unreadable. */
/* display:block matters here. Elementor makes the <details> itself a flex
   container, which is a formatting context, so the whole item dodged the
   headshot float and the open bio was trapped in a 351px column beside it
   instead of running the full 555. As a block it lets the summary dodge on its
   own and the panel clear underneath. */
.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item {
	display: block;
	background: none;
	border: none;
	padding: 0;
}

.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item-title {
	display: inline-flex;
	align-items: center;
	background-color: var(--fad-dark-gray);
	border: none;
	border-radius: 3px;
	padding: 5px 30px;
	margin: 16px 0;
	/* The summary is a flex item of the accordion wrapper, so inline-flex alone
	   still stretches it to the full column. */
	width: fit-content;
	cursor: pointer;
	transition: background-color 0.4s ease-in-out;
}

/* The label lives in its own div, which carries Elementor's colour and size. */
.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item-title-text,
.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item-title-header {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4286;
	margin: 0;
}

/* Legacy hovers to Brand Green, which is 2.69:1 under white lettering. The
   button green defined at the top of this file is the same decision. */
.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item-title:hover {
	background-color: var(--fad-button-green);
}

.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item-title-icon {
	display: none !important;
}

/* Open state swaps the label to "Collapse", as production does. The real text
   stays in the DOM for the default state — only the open state is replaced, so
   a screen reader always has a genuine label plus the details element's own
   expanded/collapsed state. */
.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text {
	font-size: 0;
}

.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text::after {
	content: 'Collapse';
	font-size: 1.25rem;
}

.cmp-person-bio.elementor-widget-n-accordion .e-n-accordion-item > .e-con {
	padding: 0;
	/* Elementor draws a 1px outline around accordion content; the legacy bio has
	   none. */
	border: none;
	clear: both;
}

.cmp-person-bio .e-con p {
	color: #202020;
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0 0 20px;
}

.cmp-person-bio .e-con p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.cmp-person-photo {
		float: none;
		margin: 0 0 16px;
	}
}

/* =============================================================================
   2h. VIDEO GROUP (.cmp-video-group)
   -----------------------------------------------------------------------------
   The same two-column person grid as above, with three differences: the second
   line is plain dark grey rather than mint, the third line is a pull quote, and
   the "View Bio" button is replaced by a full-width dark-green bar that opens a
   video. Shares .cmp-person and its children.

   Measured on forestduke.org/testimonials/ at 1440px.
   ========================================================================== */

.cmp-video-group .cmp-person-title p {
	color: #333;
}

/* Cleared here even though production does not clear it. Production gets away
   with it because its quotes happen to be long enough to push the bar past the
   headshot; with a short quote the dark strip cuts straight across the photo.
   The converter will feed this component quotes of every length, so it clears. */
.cmp-video-group .cmp-video-bar {
	clear: both;
}

/* display:block and NOT cleared, deliberately. Production lets this bar overlap
   the bottom of the headshot float: the dark strip runs the full column width
   while its label is pushed right by the float, so the bar tucks under the
   photo. An Elementor container is flex, which would make it dodge the float
   entirely and sit in a narrow column beside the photo. */
.cmp-video-bar {
	display: block;
	background-color: var(--fad-dark-green);
	padding: 10px 36px;
	clear: none;
}

/* Three classes. The Button widget inherits the kit's global "Buttons" preset
   (1.25rem/500 on the link green) at .elementor-widget-button .elementor-button;
   a two-class rule loses and the label comes out oversized on a green pill
   instead of plain white text on the dark bar. */
.cmp-video-bar .elementor-widget-button .elementor-button,
.cmp-video-bar .elementor-button-wrapper a {
	color: #fff;
	background: none;
	background-color: transparent;
	border: none;
	padding: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4286;
	text-decoration: none;
	fill: #fff;
}

.cmp-video-bar .elementor-widget-button .elementor-button:hover,
.cmp-video-bar .elementor-button-wrapper a:hover {
	color: #fff;
	background: none;
	background-color: transparent;
	text-decoration: underline;
}

/* =============================================================================
   2i. VIDEO FEATURE (.cmp-video-feature)
   -----------------------------------------------------------------------------
   A wide photograph panel with a mint content box sitting over its left side
   and a dark-green "Play Video" bar closing the box. The photo is a container
   background, not an image widget, because it has to bleed to the panel's
   rounded corners underneath the box.

   The mint box is 462px wide at every desktop width — a fixed measure in the
   legacy design, not a percentage — and the paragraph carries 129px of right
   padding so the copy stops well short of the box edge.

   Measured on forestduke.org/our-campus/ at 1440px.
   ========================================================================== */

.cmp-video-feature .cmp-video-panel {
	/* Fallback under the photograph, and what shows while it loads. */
	background-color: #EEEEEE;
	border-radius: 3px;
	overflow: hidden;
	/* 15px wider than the content column on each side. Production's markup puts
	   this panel directly inside a Bootstrap .row and inherits its -15px
	   margins, so the photo runs slightly wider than every other component. It
	   is visible in a side-by-side, so it is reproduced rather than tidied. */
	margin-left: -15px;
	margin-right: -15px;
	width: calc(100% + 30px);
	max-width: none;
}

.cmp-video-feature .cmp-play-row {
	display: flex;
	align-items: center;
	width: auto;
	position: relative;
}

/* The play icon is its own Image widget with no link, so clicking it did
   nothing (Eric 2026-09-25). Stretch the "Play Video" link over the whole row
   so the icon opens the same video lightbox. Not in the editor, where the
   overlay would stop the icon being selected. */
body:not(.elementor-editor-active) .cmp-video-feature .cmp-play-link,
body:not(.elementor-editor-active) .cmp-video-feature .cmp-play-link > * {
	position: static;
}

body:not(.elementor-editor-active) .cmp-video-feature .cmp-play-icon {
	pointer-events: none;
}

body:not(.elementor-editor-active) .cmp-video-feature .cmp-play-link a::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* ---- below 768 -------------------------------------------------------------
   A DIFFERENT LAYOUT, not a narrower one. Production stops floating the mint box
   over the photograph and stacks them: the photo becomes a 320px band across the
   top of the panel and the box sits under it, edge to edge. Measured on
   /our-campus/ and /fitness/ at 375:

     panel   375 x 653 at x0, padding 320px 0 0, full bleed
     box     375 wide, no padding of its own
     title   padding 25px 0 0 36px, 32px / 600, margin-bottom 10
     copy    padding 19px 0 19px 36px, 20px / 30, margin-bottom 20
     bar     375 wide, padding 10px 36px

   Keeping the desktop overlay here left the copy sitting on the photograph in a
   345-wide box with the picture showing around it.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.cmp-video-feature .cmp-video-panel {
		padding: 320px 0 0;
	}

	/* Full bleed, the same way the basic call to action does it. Scoped to the
	   page shell, which is the only place that clips the 100vw overhang; on the
	   component test pages there is nothing to absorb it. */
	.fad-page-content .cmp-video-feature .cmp-video-panel {
		margin-left: calc( 50% - 50vw );
		margin-right: calc( 50% - 50vw );
		width: 100vw;
		max-width: none;
		border-radius: 0;
	}

	.cmp-video-feature .cmp-video-box {
		border-radius: 0;
	}
}

.cmp-video-feature .cmp-video-box {
	background-color: var(--fad-mint);
	border-radius: 3px;
	overflow: hidden;
}

.cmp-video-feature .cmp-video-box h2 {
	color: #fff;
	font-size: 3rem;
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 10px;
	padding: 25px 0 0 36px;
}

/* When the component has no headline, production STILL emits the h2 — empty,
   but carrying its 25px top padding and 10px bottom margin. That 35px is the gap
   between the top of the mint box and the first line of copy, and without it the
   copy sits flush against the box edge. Reproduced here rather than by shipping
   an empty heading, which would be announced as a heading with no text. */
.cmp-video-feature .cmp-video-copy > p:first-child {
	padding-top: 35px;
}

/* Dark body text on the mint panel is 4.58:1 — this is the one place the
   UNdarkened mint is correct, and the reason two mint tokens exist. */
.cmp-video-feature .cmp-video-copy p {
	color: #202020;
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0 0 20px;
	padding: 0 129px 0 36px;
}

.cmp-video-feature .cmp-video-bar .elementor-widget-button .elementor-button,
.cmp-video-feature .cmp-video-bar .elementor-button-wrapper a {
	font-size: 1.25rem;
}

/* The play glyph is decoration; the link text carries the meaning. */
.cmp-play-icon img {
	width: 40px;
	height: 40px;
	margin-left: 10px;
	vertical-align: middle;
}

@media (max-width: 767px) {
	.cmp-video-feature .cmp-video-box h2 {
		font-size: 2rem;
		padding: 25px 0 0 36px;
	}

	.cmp-video-feature .cmp-video-copy p {
		padding: 19px 0 19px 36px;
	}

	/* 35px for the empty heading production still emits, plus the paragraph's
	   own 19px. See the note on the desktop rule. */
	.cmp-video-feature .cmp-video-copy > p:first-child {
		padding-top: 54px;
	}

	.cmp-video-feature .cmp-video-box h2 + p,
	.cmp-video-feature .cmp-video-copy h2 ~ p:first-of-type {
		padding-top: 19px;
	}

	.cmp-video-bar {
		padding: 10px 36px;
	}
}

/* =============================================================================
   2j. PORTRAIT (.cmp-portrait)
   -----------------------------------------------------------------------------
   A 400px resident photograph beside a large pull quote, with a full-bleed mint
   bar running behind the bottom of the photo carrying the name and "resident
   since" line in white.

   Two things here are deliberate and fragile:
     - the photo overhangs the bar by 60px (negative bottom margin), so nothing
       in this component may clip its overflow;
     - the bar is full-viewport-width while everything else sits inside the 1140
       content column, so it is an absolutely positioned strip, not a container
       background.

   The bar uses --fad-mint-dark: it carries white text at 12px, which needs
   4.5:1, and the legacy mint gives 3.56:1.

   Measured on forestduke.org/assisted-living/ at 1440px.
   ========================================================================== */

/* The width override goes on .e-con-inner, NOT on the boxed container.
   .e-con-boxed is always full viewport width and .e-con-inner is what carries
   the max-width — negative margins on the wrapper just widened an already
   full-width box and left the content where it was.

   1170, not the site's usual 1140: production's portrait sits in a 1200-wide
   container with 15px padding. position:relative belongs here too, so the
   absolutely positioned attribution measures from the content edge. */
.cmp-portrait .cmp-portrait-inner {
	position: relative;
}

.cmp-portrait .cmp-portrait-inner > .e-con-inner {
	position: relative;
	max-width: 1170px;
}

/* flex-basis pinned, because as a flex item the 400px image widget was
   being shrunk to fit; and margin-block-end, because Elementor zeroes
   widget spacing with the logical property and the -60px overhang was
   silently dropped. */
/* THREE classes. Elementor's own widget-spacing reset is a two-class rule, so a
   two-class override only ties it and loses on source order — which is exactly
   how the -60px overhang went missing the first time. */
.cmp-portrait .cmp-portrait-row .cmp-portrait-photo {
	flex: 0 0 400px;
	width: 400px;
	max-width: 400px;
	margin-bottom: -60px;
	margin-block-end: -60px;
	position: relative;
	z-index: 5;
}

.cmp-portrait .cmp-portrait-photo img {
	display: block;
	width: 400px;
	height: 400px;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 0.125rem 1rem 0 rgba(32, 32, 32, 0.2);
}

.cmp-portrait .cmp-portrait-content {
	position: relative;
	z-index: 5;
}

.cmp-portrait .cmp-portrait-quote h2 {
	color: var(--fad-mint-dark);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 10px;
}

.cmp-portrait .cmp-portrait-quote blockquote {
	border: none;
	margin: 0 0 50px;
	padding: 0;
	max-width: 100%;
	width: 100%;
	font-size: 1.75rem;
	line-height: 1.43;
	color: #333;
	quotes: "\201C" "\201D" "\2018" "\2019";
}

.cmp-portrait .cmp-portrait-quote blockquote p {
	font-size: 1.75rem;
	line-height: 1.43;
	display: inline;
	margin: 0;
}

.cmp-portrait .cmp-portrait-quote blockquote::before {
	content: open-quote;
	margin-right: -8px;
}

.cmp-portrait .cmp-portrait-quote blockquote::after {
	content: close-quote;
	margin-left: -8px;
}

/* The mint strip. 200vw wide and pulled left by 100vw so it runs off both edges
   of the viewport regardless of where the content column sits. */
.cmp-portrait .cmp-portrait-bar {
	position: absolute;
	left: -100vw;
	width: 200vw;
	max-width: none;
	height: 100px;
	bottom: -60px;
	background-color: var(--fad-mint-dark);
	z-index: 1;
}

/* Aligned with the QUOTE, not with the photo: 400px of photograph plus
   the content column's 60px inset. On production the attribution is a
   child of the content column and inherits that offset; here it is a
   sibling of the row, so the offset is stated. */
.cmp-portrait .cmp-portrait-attr {
	position: absolute;
	bottom: -48px;
	left: 460px;
	width: calc(100% - 460px);
	color: #fff;
	font-size: 0.75rem;
	z-index: 5;
}

.cmp-portrait .cmp-portrait-attr h2 {
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 5px;
}

.cmp-portrait .cmp-portrait-since p {
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4286;
	text-transform: uppercase;
	margin: 0;
}

.cmp-portrait .cmp-portrait-video .elementor-widget-button .elementor-button,
.cmp-portrait .cmp-portrait-video .elementor-button-wrapper a {
	color: #fff;
	background: none;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 500;
	text-decoration: none;
}

.cmp-portrait .cmp-portrait-video .elementor-widget-button .elementor-button:hover,
.cmp-portrait .cmp-portrait-video .elementor-button-wrapper a:hover {
	color: #fff;
	background: none;
	text-decoration: underline;
}

/* ---- below 992 -------------------------------------------------------------
   THE PORTRAIT SWITCHES AT 992, NOT AT 768. Every other component keys off
   Bootstrap's `.col-sm-*`, which is 768, and this one is the exception: its
   layout rules are all `@media (min-width: $screen-md)` and $screen-md is 992.
   Verified on production at 768, which still shows the stacked version.

   THE MOBILE STACK IS A DIFFERENT ORDER, not a narrower version of the desktop
   one. Measured on forestduke.org/assisted-living/ at 375:

     quote     y 2632.6  h 339.8      the heading and the pull quote first
     photo     y 3022.4  345 x 345    square, full width, 50px below the quote
     bar       y 3336.1  h 215        full bleed, starting 31px INSIDE the photo
     name      y 3387.4  h  83.7      51px down the bar
     component ends 3551.1

   At 768 the same stack, with the photograph and the attribution capped at
   450px and centred: bar 768 x 215 at x0, attribution 450 wide at x159.

   The rules this replaces assumed the photo came first and the bar sat under
   the attribution. With a real portrait on a real page the result was the photo
   on top, the quote below it, and the mint bar lying across the last two lines
   of the quote — dark text on mint at 2.77:1.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	/* Quote first, photo second. The row's children are [photo, content]. */
	.cmp-portrait .cmp-portrait-row {
		flex-direction: column-reverse;
	}

	/* Three classes: the desktop rule that pins the photo to 400px is three
	   classes deep, so a two-class override ties it and loses on source order. */
	.cmp-portrait .cmp-portrait-row .cmp-portrait-photo {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		margin-bottom: 0;
		margin-block-end: 0;
		/* The 50px production leaves between the quote and the photograph. The
		   blockquote's own bottom margin does not survive the flex row, and in
		   column-reverse a physical top margin on the photo is still the gap
		   ABOVE it on screen. */
		margin-top: 50px;
	}

	.cmp-portrait .cmp-portrait-photo img {
		width: 100%;
		height: auto;
		max-width: 450px;
		margin: 0 auto;
	}

	/* NO font-size override. Production keeps the pull quote at 28px all the way
	   down to 375 — measured, 28px / 40.04. The 1.25rem that used to be here also
	   swallowed the opening quotation mark: the mark is drawn by `::before` with
	   `margin-right: -8px`, which at 20px is nearly the whole glyph. */

	/* The room the bar needs below the photograph: 215 tall, less the 31px it
	   spends overlapping the photo. */
	.cmp-portrait .cmp-portrait-inner > .e-con-inner {
		padding-bottom: 184px;
	}

	.cmp-portrait .cmp-portrait-bar {
		height: 215px;
		bottom: 0;
	}

	/* Capped at 450 and centred, which is what production does below 992. */
	.cmp-portrait .cmp-portrait-attr {
		bottom: 80px;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 450px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* =============================================================================
   2k. CTA GRID (.cmp-cta-grid)
   -----------------------------------------------------------------------------
   A tall photo panel with a heading and button on the left, and a stacked
   column of text-over-photo cards on the right.

   NOTE — this component appears on NO published page. Its only instance is the
   private /sample-page/ component showcase. It is built so the page converter
   has a target if the type ever appears, and it has no live page to be measured
   against; the geometry comes from the legacy stylesheet rather than from a
   rendered page.
   ========================================================================== */

.cmp-cta-grid .cmp-cta-grid-heading h2 {
	color: #fff;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 20px;
	/* Legacy uses display:table-caption so the heading box hugs its wrapped
	   text instead of filling the column — same trick as the CTA band. */
	display: table-caption;
}

/* Each card is half the right-hand column and stretches to the panel's height,
   so the two cards and the main photo all finish level. */
.cmp-cta-grid .cmp-cta-grid-card {
	width: 50%;
	align-self: stretch;
}

.cmp-cta-grid .cmp-cta-grid-cards {
	align-items: stretch;
}

/* The photo half of a card takes whatever height the text does not. */
.cmp-cta-grid .cmp-cta-grid-photo {
	flex: 1 1 auto;
	min-height: 120px;
}

.cmp-cta-grid .cmp-cta-grid-item {
	background-color: #EDEDED;
	flex: 0 0 auto;
}

.cmp-cta-grid .cmp-cta-grid-item-dark {
	background-color: var(--fad-dark-green);
}

.cmp-cta-grid .cmp-cta-grid-copy p {
	color: #333;
	font-size: 1rem;
	line-height: 1.56;
	margin: 0 0 16px;
}

.cmp-cta-grid .cmp-cta-grid-item-dark .cmp-cta-grid-copy p {
	color: #fff;
}

/* A borderless text link with a chevron, not a filled button.

   CONTRAST: the legacy link is Brand Green #38B449, which is 2.30:1 on the
   #EDEDED card — badly failing. The site link green clears it at 5.13:1 and
   reads as the same green. On the DARK card the brand green is 5.11:1 and is
   kept exactly as production has it. */
/* COMPOUND, not descendant: .cmp-cta-grid-link is itself the button widget, so
   `.cmp-cta-grid-link .elementor-widget-button` matches nothing and the link
   keeps the kit's filled-pill treatment. */
.cmp-cta-grid .cmp-cta-grid-link.elementor-widget-button .elementor-button {
	background: none;
	background-color: transparent;
	border: none;
	padding: 0;
	color: var(--e-global-color-fadlinkgreen, #1C7145);
	font-size: 1.25rem;
	font-weight: 500;
	text-decoration: none;
}

.cmp-cta-grid .cmp-cta-grid-item-dark .cmp-cta-grid-link.elementor-widget-button .elementor-button {
	color: var(--e-global-color-primary);
}

.cmp-cta-grid .cmp-cta-grid-link .elementor-button-text::after {
	content: '\203A';
	font-size: 2rem;
	position: relative;
	top: 2px;
	margin-left: 5px;
	transition: margin-left 0.2s ease-in;
}

.cmp-cta-grid .cmp-cta-grid-link .elementor-button:hover .elementor-button-text::after {
	margin-left: 7px;
}

@media (max-width: 767px) {
	.cmp-cta-grid .cmp-cta-grid-card {
		width: 100%;
	}
}

/* =============================================================================
   3. SITE HEADER (.fad-header)
   -----------------------------------------------------------------------------
   Two rows on a forest-green field, with the logo sitting in the MIDDLE of the
   primary menu rather than at one end.

   Measured on forestduke.org/assisted-living/ at 1440px:
     header      1440 x 134.28, background #1E4F40
     container   1170 (max-width) with 15px side padding -> content 1140 at 150
     utility row ul 1160 wide, flex, space-between, 13.6px/400 white,
                 items padded 7.5px 10px
     primary row ul flex, margin 0 -30px, items 24px/500 white,
                 li margin 5px 23.78
     logo        174 x 90.86, margin-top 25
     dropdowns   275 wide, #173D31, padding 15px 0, links padded 7px 15px

   THE LOGO IS A MENU ITEM'S WORTH OF SPACE, not a separate column. Both menus
   carry an empty "nav-spacer" item in the middle whose only job is to reserve
   the gap the logo sits in. Reproducing that keeps the menus editable exactly
   as they are today — splitting them into a left menu and a right menu would
   look identical and quietly change how the site is maintained.
   ========================================================================== */

/* THE STACKING ORDER, which is load-bearing and was worked out the hard way:
   header 10, utility row 25, primary row 24, logo ribbon 20, submenu panels 30.
   The two menu rows are siblings and the primary row is second in the DOM, so
   at the default z-index it painted OVER the utility row's open dropdowns.
   z-index does nothing on a statically positioned element, so each row needs
   `position: relative` as well — setting the index alone looks like a fix and
   changes nothing.

   The rows sit ABOVE the ribbon, which is a change from the first version.
   Each row's z-index makes a stacking context, so a submenu's own 30 only
   competes inside its row: with the rows at 3 and 2 every open panel passed
   UNDER the white ribbon whatever its z-index said. At 1440 that was cosmetic
   and was accepted; at 992 the Careers panel is 9px further right and the last
   letter of "Human Resources FAQ" disappeared into the ribbon. Nothing in
   either row overlaps the ribbon when the menus are closed, so raising them
   changes nothing else. */
.fad-header {
	background-color: var(--e-global-color-secondary); /* forest green #1E4F40 */
	position: relative;
	z-index: 10;
}

.fad-header .fad-header-inner {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}

/* ---- the reserved logo gap ------------------------------------------------ */

.fad-header .menu-spacer,
.fad-header .nav-spacer {
	/* 30% of the row, which is production's rule and NOT the 348px it happens to
	   come to at 1440. A fixed 348 fits at 1440 and overflows below about 1250,
	   which pushed the last two primary items off the right edge on every laptop
	   narrower than that. */
	flex: 0 0 30%;
	min-width: 0;
	pointer-events: none;
}

.fad-header .menu-spacer > a,
.fad-header .nav-spacer > a {
	display: none;
}

/* THE WHITE RIBBON BEHIND THE LOGO. Nothing in the computed styles says
   "white" — it is logo-ribbon.svg as the background of a 210x185 box with a
   transparent background-COLOUR, which is why a probe that reads colours misses
   it entirely and only a screenshot finds it. The box is taller than the 134px
   header on purpose: the ribbon's lower curve overhangs the green band. */
.fad-header .fad-header-logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: 210px;
	max-width: none;
	height: 185px;
	background-image: url('images/logo-ribbon.svg');
	background-position: 50% 100%;
	background-repeat: no-repeat;
	/* Above the primary nav row (z 24), whose top rule otherwise crosses the logo. */
	z-index: 30;
}

.fad-header .fad-header-logo img {
	display: block;
	width: 174px;
	height: auto;
	margin-top: 25px;
}

/* ---- utility row ---------------------------------------------------------- */

.fad-header .fad-utility {
	position: relative;
	z-index: 25;
}

.fad-header .fad-utility .elementor-nav-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* NOWRAP, like the primary row. Production overflows its utility row rather
	   than wrapping it; allowed to wrap, "Request more info" drops onto a
	   second line at 992 and the header grows 40px. */
	flex-wrap: nowrap;
	/* Explicit width, because the list is a flex item and would otherwise
	   shrink to fit its own text — leaving space-between nothing to distribute
	   and the 30% spacer 30% of nothing. Production's row runs 10px past the
	   content column on each side. */
	width: calc(100% + 20px);
	margin-left: -10px;
}

/* Nothing in either row may be squeezed narrower than its own words. A flex
   item's default minimum is its content, but `overflow` or a percentage basis
   can defeat that, and a clipped nav label is worse than an overflowing row. */
.fad-header .fad-utility .elementor-nav-menu > li,
.fad-header .fad-primary .elementor-nav-menu > li {
	flex-shrink: 0;
}

.fad-header .fad-utility .elementor-nav-menu > li > a.elementor-item {
	color: #fff;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4286;
	padding: 10px 5px;
	text-transform: none;
	letter-spacing: normal;
}

.fad-header .fad-utility .elementor-nav-menu > li > a.elementor-item:hover,
.fad-header .fad-utility .elementor-nav-menu > li > a.elementor-item:focus-visible {
	color: var(--e-global-color-primary);
}

/* "Request more info" is a filled button in the menu, not a link. White on
   #297D37 is 5.14:1, so this one needed no colour change. */
.fad-header .fad-utility .nav-button > a.elementor-item {
	background-color: #297D37;
	border-radius: 3px;
	margin-right: 10px;
}

.fad-header .fad-utility .nav-button > a.elementor-item:hover {
	background-color: var(--fad-button-green);
	color: #fff;
}

/* ---- primary row ---------------------------------------------------------- */

/* The hairline under the utility row. Production puts it on the primary nav as
   a top border, not on the utility row as a bottom one. */
.fad-header .fad-primary {
	position: relative;
	z-index: 24;
	border-top: 1px solid rgba(56, 180, 73, 0.6);
}

.fad-header .fad-primary .elementor-nav-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	/* Same reason as the utility row above. Production's primary row runs 30px
	   past the content column on each side. */
	width: calc(100% + 60px);
	margin: 0 -30px;
}

/* AUTO, not the 23.78px it measures at 1440. Auto margins on a flex row split
   the leftover space between the items, which is exactly what production does —
   at 1440 the eight of them come to 23.78 each and at 1024 to 23.16, and a
   fixed value cannot do both. The spacer keeps its own margin at zero. */
.fad-header .fad-primary .elementor-nav-menu > li {
	margin: 5px auto;
}

.fad-header .fad-primary .elementor-nav-menu > li.nav-spacer,
.fad-header .fad-primary .elementor-nav-menu > li.menu-spacer {
	margin: 0;
}

/* 1.25rem up to 1250 and 1.5rem above it, which is production's step. Holding
   24px all the way down is what made the row too wide to fit below 1250. */
.fad-header .fad-primary .elementor-nav-menu > li > a.elementor-item {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4286;
	padding: 6px 5px;
	text-transform: none;
	letter-spacing: normal;
}

/* Between 992 and 1199 the header gets 30px gutters instead of 15.

   Both nav rows deliberately run past the content column — 30px each side on
   the primary row, 10px on the utility row — so their end items line up with
   the column edge once the link padding is taken off. With a 15px gutter that
   overhang reaches 15px past the VIEWPORT and puts a horizontal scrollbar on
   every page between 992 and 1199. Production never hits it because its
   container is stepped at 970 there and ours is fluid. */
@media (min-width: 992px) and (max-width: 1199.98px) {

	.fad-header .fad-header-inner {
		padding-left: 30px;
		padding-right: 30px;
	}

	/* And the utility row is one size down. The logo gap is whatever the two
	   groups of items leave in the middle, and Montserrat sets about 10% wider
	   than the face production falls back to — enough that "Contact" ran 19px
	   under the logo ribbon at 992. Production is tight here too; it just does
	   not quite touch. */
	.fad-header .fad-utility .elementor-nav-menu > li > a.elementor-item {
		font-size: 0.8rem;
	}

	/* 84 wide, and the placeholder drops to 0.8rem with the rest of the row —
	   at 84 and 0.85rem it clipped to "Sear", which reads as a broken field
	   rather than a narrow one, and 92 puts "Contact" back under the ribbon. */
	.fad-header .fad-utility .fad-header-search input[type='search'] {
		font-size: 0.8rem;
	}

	/* AND THE SPACER GETS WIDER, 36% instead of 30%.
	   This is the real fix for "Contact" sitting under the white logo ribbon at
	   992. The gap the logo sits in is whatever the two groups of utility items
	   leave between them, and the right-hand group is about 90px wider than the
	   left — so at 30% the gap runs 295 to 577 while the logo runs 391 to 601,
	   and the gap is 96px LEFT of where it needs to be. Shaving items narrower
	   moves it a few pixels at a time and never actually centres it; widening
	   the spacer moves its right edge past the logo, which is the thing that
	   was wrong. Production is 30% at every width and clears the ribbon by a
	   single pixel at 1024 — it is the same problem, one typeface away. */
	.fad-header .menu-spacer,
	.fad-header .nav-spacer {
		flex-basis: 36%;
	}
}

/* Production's two desktop steps. Between 992 and 1199 everything is a size
   down; the header only reaches its full 1440 proportions at 1200 and, for the
   primary row's type, 1250. */
@media (min-width: 1200px) {

	.fad-header .fad-primary .elementor-nav-menu > li > a.elementor-item {
		padding: 6px 10px;
	}

	.fad-header .fad-utility .elementor-nav-menu > li > a.elementor-item {
		padding: 7.5px 10px;
	}
}

@media (min-width: 1250px) {

	.fad-header .fad-primary .elementor-nav-menu > li > a.elementor-item {
		font-size: 1.5rem;
	}
}

.fad-header .fad-primary .elementor-nav-menu > li > a.elementor-item:hover,
.fad-header .fad-primary .elementor-nav-menu > li > a.elementor-item:focus-visible {
	color: var(--e-global-color-primary);
}

/* Top-level items that only open a dropdown have no page behind them (their
   link is #), so they should not show the hand cursor. Add the class
   unclickable to the menu item in Appearance > Menus. Cuberis standard. */
.unclickable > a,
.unclickable > a:hover {
	cursor: default;
}

/* ---- dropdown panels ------------------------------------------------------
   EVERY rule here is scoped `> ul > li >` or to .sub-menu on purpose. Writing
   nav colour rules as a bare descendant selector also matches the submenu
   links, which is how the Miami Book Fair rebuild ended up with white links on
   a white panel through several runs that reported no problems.
   -------------------------------------------------------------------------- */

.fad-header .elementor-nav-menu .sub-menu {
	background-color: #173D31;
	/* Wider than production's 275 (Eric 2026-09-25): grow to fit the longest
	   entry so no sub-link wraps, including at the larger text sizes. SmartMenus
	   writes inline width/min-width/max-width when a panel opens (min 10em),
	   which silently beat the old 275px and caused the wrapping, hence !important. */
	width: max-content !important;
	min-width: 320px !important;
	max-width: calc(100vw - 30px) !important;
	padding: 15px 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	z-index: 30;
}

.fad-header .elementor-nav-menu .sub-menu li a.elementor-sub-item {
	color: #fff;
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.4286;
	padding: 7px 15px;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
}

.fad-header .elementor-nav-menu .sub-menu li a.elementor-sub-item:hover,
.fad-header .elementor-nav-menu .sub-menu li a.elementor-sub-item:focus-visible {
	background-color: var(--fad-button-green);
	color: #fff;
}

/* The current page's entry. Production highlights it with Brand Green, which
   carries white at 2.69:1 — the same failure as the buttons, and fixed the same
   way. */
.fad-header .elementor-nav-menu .sub-menu li.current-menu-item > a.elementor-sub-item,
.fad-header .elementor-nav-menu .sub-menu li.current_page_item > a.elementor-sub-item {
	background-color: var(--fad-button-green);
	color: #fff;
}

/* ---- the search box -------------------------------------------------------- */

.fad-header .fad-header-search form {
	position: relative;
}

.fad-header .fad-header-search input[type='search'] {
	width: 100px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--e-global-color-primary);
	border-radius: 0;
	color: #fff;
	font-size: 0.85rem;
	padding: 6px 30px 6px 8px;
}

.fad-header .fad-header-search input[type='search']::placeholder {
	/* Placeholder text is text. On the forest green a mid-grey would fail; this
	   is white at 70%, which composites to 5.6:1. */
	color: rgba(255, 255, 255, 0.7);
}

.fad-header .fad-header-search input[type='search']:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}

.fad-header .fad-header-search button,
.fad-header .fad-header-search input[type='submit'] {
	position: absolute;
	right: 0;
	top: 0;
	width: 34px;
	height: 34px;
	background: none;
	border: none;
	color: #fff;
	padding: 1px 6px;
	cursor: pointer;
}

/* The magnifier SVG has no fill of its own, so it defaulted to black on the
   dark green bar. Follow the button colour (white) instead. */
.fad-header .fad-header-search button svg {
	fill: currentColor;
}

/* ---- text-size control ----------------------------------------------------
   Three A's at increasing sizes inside one button, cycling normal -> larger ->
   largest. See js/text-resizer.js for why this moves the ROOT font size rather
   than restyling a handful of tags the way production does.
   -------------------------------------------------------------------------- */

.fad-text-resizer {
	display: flex;
	align-items: center;
	padding: 6px 15px;
}

.fad-text-resizer-label {
	/* Visible only on mobile, exactly as production does it. */
	display: none;
	color: #fff;
	margin-right: 10px;
	font-size: 0.85rem;
}

/* TWO classes deep. The Elementor kit styles a bare `button` at 0,1,1, so the
   single-class version loses and the control renders at the kit's Button preset
   — 20px type with 5/30 padding, 120px wide instead of 54, which is exactly
   what it did. */
.fad-text-resizer .fad-text-resizer-button {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	background: none;
	border: none;
	padding: 0;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.fad-text-resizer .fad-text-resizer-button:hover span,
.fad-text-resizer .fad-text-resizer-button:focus-visible span {
	color: var(--e-global-color-primary);
}

.fad-text-resizer .fad-text-resizer-button:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 3px;
}

.fad-size-s { font-size: 0.625rem; }
.fad-size-m { font-size: 0.75rem; }
.fad-size-l { font-size: 1rem; }

/* The two larger steps. Deliberately modest: several components reproduce fixed
   pixel heights measured off the live site, and a big jump would overflow them.
   Because every type size on this project is in rem, moving the root moves all
   of them at once — which the legacy per-tag version could never do. */
html.fad-text-medium { font-size: 106.25%; }
html.fad-text-large  { font-size: 112.5%; }

/* Below the breakpoint the two desktop rows are switched off entirely and the
   mobile bar and panel take over — see style.css section 11, which owns every
   rule for that layout INCLUDING the logo. Only the two rules that are still
   about the desktop markup remain here. */
@media (max-width: 991.98px) {

	.fad-header .menu-spacer,
	.fad-header .nav-spacer {
		display: none;
	}
}

/* =============================================================================
   4. SITE FOOTER
   -----------------------------------------------------------------------------
   Three bands: a photo call-to-action strip, the main forest-green footer, and
   a colophon carrying the accreditation badges.

   Measured on forestduke.org/assisted-living/ at 1440px:
     footer-cta  1440 x 284, padding 84px 0, cover photo under a LEFT-TO-RIGHT
                 mint wash: linear-gradient(90deg,#259A67 0,#259A67 40%,transparent)
                 copy 32px/48 #093423, max-width 500, white inline link
     footer      background #1E4F40, padding-bottom 40, container 925 CENTRED
                 (not the site's usual 1170 — measured, and it disagrees with
                 the theme's own SCSS, which says 815; the compiled stylesheet
                 production actually loads is the authority)
     brand       logo 174 wide, ribbon graphic behind it at 50% -60px
     heading     40px/700 uppercase, margin-top 60
     colophon    1px #38B449 rule, padding-top 20, badges capped at 260 wide
   ========================================================================== */

.fad-footer-cta {
	position: relative;
	padding: 84px 0;
	overflow: hidden;
}

/* The mint wash. Solid across the left 40%, then fading out — so the copy sits
   on solid colour and the photograph stays visible on the right. */
.fad-footer-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Solid behind the copy block, then OUT QUICKLY, so the photograph reads as
	   a photograph instead of being washed for the full width. Eric's call on
	   the 8/31 review pass: strongest over the type, clear fast after it.
	   Production runs solid to 40% and fades across the remaining 60%; the
	   earlier rebuild ran solid to 52% and was heavier still.

	   A percentage stop cannot express "just past the copy" — the copy block's
	   right edge is 46% of 1440 but 67% of 768. These stops reproduce the boxed
	   container's own centring maths instead (inner is min(100%, 1140px)
	   centred, copy is 560 wide), so the solid part ends exactly at the copy's
	   right edge at every width and the wash is gone 120px later.

	   The 3.38:1 of dark green on mint is unchanged — the type still sits on
	   100% solid colour. Only the area beyond the type gets lighter. */
	background: linear-gradient(
		90deg,
		var(--fad-mint) 0,
		var(--fad-mint) calc((100% - min(100%, 1140px)) / 2 + 560px),
		rgba(37, 154, 103, 0) calc((100% - min(100%, 1140px)) / 2 + 680px)
	);
	z-index: 1;
	pointer-events: none;
}

.fad-footer-cta > * {
	position: relative;
	z-index: 2;
}

.fad-footer-cta .fad-footer-cta-copy p {
	/* 560, not production's 500. Montserrat sets about 12% wider than the face
	   production is actually falling back to, so at 500 the first line broke
	   after "click" and the whole band grew 28px. Widening restores the
	   intended two-line break and the band's measured 284 height. */
	max-width: 560px;
	font-size: 2rem;
	line-height: 1.5;
	color: var(--e-global-color-faddarkgreen); /* #093423 */
	margin: 0 0 20px;
}

/* NOT zeroed on the last paragraph. Production keeps the 20px there even when
   the copy is a single block, and that margin is 20 of the band's measured 284
   height — dropping it made the strip 264. */

.fad-footer-cta .fad-footer-cta-copy a {
	color: #fff;
	text-decoration: underline;
}

.fad-footer-cta .fad-footer-cta-copy a:hover {
	color: var(--e-global-color-faddarkgreen);
}

.fad-footer {
	background-color: var(--e-global-color-secondary); /* #1E4F40 */
	color: #fff;
	padding-bottom: 40px;
}

.fad-footer .fad-footer-inner {
	max-width: 925px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* The ribbon graphic sits BEHIND the logo, pulled up so only its lower curve
   shows. Copied out of the old theme into the child theme so it survives that
   theme's removal. */
.fad-footer .fad-footer-brand {
	background-image: url('images/logo-ribbon.svg');
	background-position: 50% -60px;
	background-repeat: no-repeat;
	padding-bottom: 16px;
	text-align: center;
}

.fad-footer .fad-footer-brand img {
	width: 174px;
	height: auto;
	margin: 15px auto 0;
}

.fad-footer .fad-footer-heading p,
.fad-footer .fad-footer-heading h2 {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.4286;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	margin: 60px 0 0;
}

.fad-footer .fad-footer-sub p {
	font-size: 1rem;
	line-height: 1.4286;
	text-align: center;
	color: #fff;
	margin: 0;
}

/* Brand Green on the forest-green footer is 3.47:1 and fails at this size.
   Bright Green — already in the palette — is 4.54:1 and reads as the same
   family. Used for every green link on the dark field. */
.fad-footer a {
	color: #7AC921;
}

.fad-footer a:hover,
.fad-footer a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.fad-footer .fad-footer-nav .elementor-nav-menu {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* Same shrink-to-fit trap as the header rows: without an explicit width
	   space-between has nothing to distribute, and the six links bunched to the
	   left across 847 instead of spanning the full 925. */
	width: calc(100% + 30px);
	margin: 0 -15px 10px;
}

.fad-footer .fad-footer-nav .elementor-nav-menu > li > a.elementor-item {
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4286;
	padding: 10px 15px;
	text-transform: none;
}

/* Production hovers these to dark green, which on the forest-green field is
   1.47:1 — darker than the background it sits on. Bright green instead. */
.fad-footer .fad-footer-nav .elementor-nav-menu > li > a.elementor-item:hover,
.fad-footer .fad-footer-nav .elementor-nav-menu > li > a.elementor-item:focus-visible {
	color: #7AC921;
}

.fad-footer .fad-footer-colophon {
	border-top: 1px solid var(--e-global-color-primary);
	padding-top: 20px;
}

.fad-footer .fad-footer-colophon img {
	max-width: 260px;
	height: auto;
	vertical-align: middle;
}

/* The two standalone seals carry their own right margin on production; the
   third file is a single strip containing the remaining three marks. */
.fad-footer .fad-footer-badges img {
	margin-right: 25px;
}

.fad-footer .fad-footer-badges img:last-child {
	margin-right: 0;
}

.fad-footer .fad-footer-copyright p {
	font-size: 0.85rem;
	line-height: 1.4286;
	color: #fff;
	margin: 0;
	padding-top: 10px;
	text-align: right;
}

@media (max-width: 767px) {
	.fad-footer-cta {
		padding: 64px 0 20px;
	}

	/* Full-width wash, in the DARKER mint, with white copy.

	   At 20px the type is no longer "large", so it needs 4.5:1 rather than 3:1
	   and neither production's option reaches it: dark green on the mint is
	   3.38, white on the mint is 3.56. White on --fad-mint-dark is 4.56. The
	   desktop treatment is unaffected, where 32px type does qualify. */
	.fad-footer-cta::after {
		background: var(--fad-mint-dark);
	}

	/* The boxed container's inner collapses to min(100%, 767px) with no gutter
	   below 768, so the copy sat flush against the screen edge with nothing
	   between the type and the bezel. Production pads it ~20 and keeps it
	   flush left; Eric called CENTRED on the 8/31 review pass, so this is a
	   deliberate divergence, not a parity miss. */
	.fad-footer-cta .fad-footer-cta-copy {
		padding-left: 20px;
		padding-right: 20px;
	}

	.fad-footer-cta .fad-footer-cta-copy p {
		font-size: 1.25rem;
		color: #fff;
		/* The 560 desktop measure would otherwise pin the block left of centre
		   on a 375 screen once the padding is in. */
		max-width: none;
		text-align: center;
	}

	.fad-footer-cta .fad-footer-cta-copy a {
		color: #fff;
	}

	.fad-footer .fad-footer-copyright p {
		text-align: center;
	}
}


/* The footer menu STACKS below 992, exactly as production's does: a plain list,
   one full-width link per row, 10px 15px of padding each. It was hidden behind
   Elementor's own unlabelled hamburger — all six links unreachable on a phone,
   on every page, and the control had no name.

   AFTER the base footer rules on purpose: a media query adds no specificity, so
   a copy of this placed earlier in the file simply loses to the flex row above. */
@media (max-width: 991.98px) {

	.fad-footer .fad-footer-nav .elementor-nav-menu {
		display: block;
		width: 100%;
		margin: 0 0 10px;
	}

	.fad-footer .fad-footer-nav .elementor-nav-menu > li {
		display: block;
		width: 100%;
	}

	.fad-footer .fad-footer-nav .elementor-nav-menu > li > a.elementor-item {
		display: block;
		width: 100%;
		text-align: left;
	}
}

/* =============================================================================
   5. EVENT SINGLE
   -----------------------------------------------------------------------------
   Layout is the legacy theme's single-event template: a narrow centred column,
   centred title, centred green schedule line, featured image with the house
   radius and shadow, then a registration footer.

   The values that ARE the theme's are exact:
     .container--narrow-xs   max-width 715px
     $date-green             #107249
     $border-radius--general 3px
     $box-shadow--general    0 .125rem 1rem 0 rgba(32,32,32,.2)
     $light-gray             #ededed

   The title and body copy deliberately follow the SITE's type scale rather than
   the 42px/700 #141827 the live page shows — that comes from The Events
   Calendar's own stylesheet, so it disappears with the plugin and matches no
   other page on the site. Agreed with Eric before building.
   ========================================================================== */

/* The site's own vertical rhythm: the legacy theme wrapped all page content in
   `.content { padding: $content-tb-padding 0 }` — 6rem desktop, 2.5rem mobile.
   Without it the event title ran up underneath the header and the last block
   sat flush against the footer band.

   NOTE for the wider rebuild: this padding is the SITE-WIDE content rule and is
   currently missing from every rebuilt page, not just events. Applied here
   scoped to the event template rather than globally, because switching it on
   for all pages at once would shift every component test page and is worth
   doing deliberately. */
.fad-event-single {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

/* 992px, NOT 768px. The legacy `.content` padding is `0 0 2.5rem` and switches
   to `6rem 0` at $grid-float-breakpoint, which is 992px on this site — not the
   768px $screen-sm that most of this stylesheet keys off. Written as 768 the
   event page took its full desktop rhythm a whole breakpoint early. Corrected
   while building the events listing, which reads the same value. */
@media ( min-width: 992px ) {
	.fad-event-single {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

.fad-event-single > .e-con-inner {
	max-width: 715px;
	padding-left: 15px;
	padding-right: 15px;
}

/* THREE classes deep on purpose. Elementor colours EVERY heading widget from
   `.elementor-widget-heading .elementor-heading-title { color: var(--e-global-
   color-primary) }` — two classes — which outranks the kit's own
   `.elementor-kit-9177 h1` (one class plus an element). Left alone, both the
   event title and the "Register for this Event" heading came out brand green on
   a page where nothing had asked for brand green.

   Written once for the whole component rather than per heading, so a heading
   added here later inherits the right colour instead of quietly picking up
   brand green again. */
.fad-event-single .elementor-widget-heading .elementor-heading-title,
.fad-event-registration .elementor-widget-heading .elementor-heading-title {
	color: #1E4F40;
}

/* The schedule line is the one deliberate exception; its own rule below carries
   the green and comes later in this file. */

/* SPACING NEEDS THREE CLASSES, not two.
   Elementor zeroes every widget's bottom spacing with
   `.e-con > .elementor-widget { margin-block-end: 0 }` — two classes. A rule
   written as `.fad-event-single .fad-event-title` is also two classes, so it
   TIES and loses on source order, and every gap on this page measured exactly
   0px while the stylesheet looked correct. Adding `.elementor-widget` to the
   compound selector takes it to three and the values apply. */
.fad-event-single .fad-event-title.elementor-widget {
	margin-block-end: 0.75rem;
}

/* Elementor styles the heading text at .elementor-widget-heading
   .elementor-heading-title — two classes — so a one-class theme rule ties and
   loses on source order. Scoped from the container to stay ahead of it. */
.fad-event-single .fad-event-schedule.elementor-widget-heading .elementor-heading-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #107249;
}

.fad-event-single .fad-event-schedule.elementor-widget {
	margin-block-end: 2rem;
}

.fad-event-single .fad-event-image img {
	border-radius: 3px;
	box-shadow: 0 0.125rem 1rem 0 rgba( 32, 32, 32, 0.2 );
}

.fad-event-single .fad-event-image.elementor-widget {
	margin-block-end: 1.75rem;
}

/* Scoped to the component, never a bare p{} — Elementor sets colour and size on
   the widget WRAPPER and lets the paragraph inherit, so a global p rule
   silently overrides every per-widget typography setting on the site. */
.fad-event-single .fad-event-content p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
	margin-bottom: 1.25rem;
}

.fad-event-single .fad-event-content p:last-child {
	margin-bottom: 0;
}

/* --- detail lines: Location, Cost, Organizer (2026-09-29) -----------------
   One widget per line so each can hide on its own. DCE removes a hidden widget
   from the page entirely, so the space below the block is set on whatever
   comes after the LAST line, not on the lines themselves. */
.fad-event-single .fad-event-meta p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
	margin: 0;
}

.fad-event-single .fad-event-meta.elementor-widget {
	margin-block-end: 0;
}

.fad-event-single .fad-event-meta + .elementor-element:not(.fad-event-meta) {
	margin-top: 1.75rem;
}

/* --- more dates: the other upcoming dates of a repeating event -----------
   [cub_mec_more_dates] from the Cuberis MEC Repeating Events plugin (2026-09-29).
   Empty for a one-off event: the empty widget is hidden and the gap above the
   photo passes to the next element, as it would with no widget here at all. */
.fad-event-single .fad-event-more-dates:not(:has(.cub-mec-more-dates)) {
	display: none;
}

.fad-event-single .fad-event-more-dates + .elementor-element {
	margin-top: 1.75rem;
}

.fad-event-single .cub-mec-more-dates {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
}

.fad-event-single .cub-mec-more-dates ul {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
}

.fad-event-single .cub-mec-more-dates li {
	margin: 0 0 0.15rem;
}

/* --- status notice: cancelled / postponed / rescheduled / moved online ----
   From MEC's Event Status setting (2026-09-29). Empty for a normal event, and
   the empty widget is hidden so the page keeps its spacing. */
.fad-event-single .fad-event-status-wrap:not(:has(.fad-event-status)) {
	display: none;
}

.fad-event-single .fad-event-status-wrap.elementor-widget {
	margin-block-end: 1.75rem;
}

.fad-event-status {
	border-left: 4px solid var( --e-global-color-secondary ); /* forest green #1E4F40 */
	background: #f4f4f4;
	padding: 0.875rem 1.25rem;
	text-align: left;
}

.fad-event-status p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
	margin: 0;
}

.fad-event-status p + p {
	margin-top: 0.5rem;
}

.fad-event-status--cancelled {
	border-left-color: #a4262c;
}

.fad-event-status--postponed {
	border-left-color: #8a5a00;
}

/* --- registration footer ------------------------------------------------- */

/* Now an inner container inside the column, so it inherits the 715 width and
   needs no width of its own. */
.fad-event-registration {
	border-top: 1px solid #ededed;
	padding-top: 2.5rem;
	margin-top: 2rem;
	width: 100%;
}

.fad-event-registration .fad-event-registration-title.elementor-widget {
	margin-block-end: 1rem;
}

.fad-event-registration .fad-event-registration-text p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
	margin-bottom: 1.25rem;
}

.fad-event-registration .fad-event-registration-button.elementor-widget {
	margin-block-end: 0;
}

/* The button widget is a flex item in a column container, so without this it
   stretches the full 715 rather than sitting at its own width. */
.fad-event-registration .fad-event-registration-button .elementor-widget-container {
	display: flex;
}

/* =============================================================================
   6. EVENTS LISTING
   -----------------------------------------------------------------------------
   Every value here comes from the legacy theme's `_events-list.scss` and the
   variables it reads. That stylesheet has never been on screen: it is written
   against `tribe-events/list.php`, which The Events Calendar stopped calling
   when it moved to Views V2, so what the live site actually shows on /events/
   is TEC's stock grey list. Eric's decision was that the listing gets the
   SITE's design, so the design being rebuilt here is the one the theme intended
   rather than the one the plugin shipped.

   The exact values, for anyone checking this against the SCSS:
     .eventListItem            border-bottom 1px $light-gray, pb + mb 2.25rem
     .eventListItem__date-card 1px $gray on $light-gray, radius 3px, 10/18 pad,
                               uppercase, month 1.125rem/400, day 2rem/800 in
                               $date-green
     .eventListItem__content   padding-left 20px, 40px from $screen-sm
     h2 a                      line-height 1.2, $dark-green
     venue                     1.125rem $dark-green, margin-bottom 10px
     schedule                  1.125rem/400; the link 500, block then inline
     .eventPageHeader__inner   max 550, white + radius + shadow + 1.875rem pad
                               from $screen-sm, h1 600
     .eventPageHeader          overlap-page-header, margin-bottom 4rem

   ONE DEAD RULE NOT REPRODUCED: the SCSS sets the card's padding to 1rem at
   $screen-md and 1.875rem at $screen-sm, in that source order. Both apply above
   992px and the later one wins, so the 1rem never takes effect anywhere. The
   effective behaviour — 1.875rem from 768px up — is what is written below.
   ========================================================================== */

/* --- the banner -----------------------------------------------------------
   The photograph is NOT set here. It arrives as --fad-events-banner-image, an
   inline custom property the child theme prints from the ACF "events header
   image" option, so the banner can be changed from Options without opening the
   builder. Sizes and treatment stay in this file.

   Heights are the legacy .page-header's, which is the band this card was
   designed to sit on. */
.fad-events-banner {
	background-image: var( --fad-events-banner-image );
	background-color: #ddd;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 5.5rem;
}

@media ( min-width: 768px ) {
	.fad-events-banner {
		min-height: 10.5rem;
	}
}

@media ( min-width: 992px ) {
	.fad-events-banner {
		min-height: 200px;
	}
}

/* --- the title card -------------------------------------------------------
   Legacy structure is .container > .row > .col-50 > .eventPageHeader__inner:
   a card up to 550px wide in the left half of a 1170 container. The half-width
   column is not reproduced as a column — at 550px max the card never fills half
   of 1170 anyway, so the max-width alone produces the same result with one less
   level of nesting. */
.fad-events-header {
	margin-bottom: 4rem;
}

/* The 1170 goes on the INNER element, not this one. Elementor drives a
   container's own max-width from its `--width` property, and a max-width
   written here is a one-class rule tying with Elementor's and losing on source
   order — the header ran the full window width and the card sat hard against
   the left edge. Same treatment the event single uses. */
.fad-events-header > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
}

/* THE OVERLAP, and the arithmetic behind it.

   `overlap-page-header` is a NEGATIVE MARGIN THAT CANCELS A PADDING. In the
   legacy theme the card sits inside `.content`, whose top padding is 0 below
   992px and 6rem from 992px up, and the mixin then pulls back 6rem at 768px and
   6rem + 50px at 992px. What a visitor actually sees is the sum:

     < 768px    padding 0    pull 0            card sits under the banner
     768-991    padding 0    pull -6rem        card lifted 96px onto the banner
     >= 992     padding 6rem pull -(6rem+50)   card lifted 50px onto the banner

   The Elementor archive has no `.content` wrapper, so the SUMS are written here
   directly rather than the mixin's numbers. Using the mixin's -146px at desktop
   would lift the card three times too far and bury it inside the photograph —
   which is exactly what the first attempt did, and it looked deliberate.

   Note the breakpoint: the legacy padding switches at $grid-float-breakpoint,
   which is 992px on this site, NOT the 768px $screen-sm used elsewhere. */
@media ( min-width: 768px ) {
	.fad-events-header {
		margin-top: -6rem;
	}
}

@media ( min-width: 992px ) {
	.fad-events-header {
		margin-top: -50px;
	}
}

.fad-events-header-card {
	max-width: 550px;
	width: 100%;
}

@media ( min-width: 768px ) {
	.fad-events-header-card {
		background-color: #fff;
		border-radius: 3px;
		box-shadow: 0 0.125rem 1rem 0 rgba( 32, 32, 32, 0.2 );
		padding: 1.875rem;
	}
}

/* Three classes deep, same reason as the event single: Elementor colours every
   heading from `.elementor-widget-heading .elementor-heading-title`, which
   outranks the kit's own `h1` rule, and the title comes out brand green on a
   page where nothing asked for brand green. */
.fad-events-header-card .fad-events-title.elementor-widget-heading .elementor-heading-title {
	font-weight: 600;
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	margin-top: 1.5rem;
}

@media ( min-width: 768px ) {
	.fad-events-header-card .fad-events-title.elementor-widget-heading .elementor-heading-title {
		margin-top: 0;
	}
}

/* --- the list -------------------------------------------------------------
   .container--narrow is 1070px. The bottom padding is the site's content
   rhythm (2.5rem / 6rem), applied here rather than globally for the same reason
   it was applied to the event single: switching it on for every page at once
   would move every rebuilt page and is worth doing deliberately. */
.fad-events-list > .e-con-inner {
	max-width: 1070px;
	padding-left: 15px;
	padding-right: 15px;
}

.fad-events-list {
	padding-bottom: 2.5rem;
}

/* 992px, not 768px — the legacy `.content` padding switches at
   $grid-float-breakpoint. */
@media ( min-width: 992px ) {
	.fad-events-list {
		padding-bottom: 6rem;
	}
}

/* Elementor's Loop Grid lays its items out as a CSS grid with a 20px gap by
   default. The rows here carry their own 2.25rem separation and a rule, so the
   grid gap has to go or every row gains an unexplained extra 20px that no
   value in the legacy stylesheet accounts for. */
.fad-events-loop .elementor-loop-container {
	gap: 0;
}

/* --- one row --------------------------------------------------------------
   Legacy floats the date tile left and gives the content `overflow: hidden` to
   form the second column. Rebuilt as flex, which is the same two-column result
   without the float's side effects — notably, a float does not make the rule
   below it clear a tall tile, and several events have two-line titles. */
.fad-event-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	border-bottom: 1px solid var( --e-global-color-fadlightgray ); /* #EDEDED */
	padding-bottom: 2.25rem;
	margin-bottom: 2.25rem;
}

/* --- the date tile --------------------------------------------------------
   The widget must not stretch. Elementor gives a widget inside a container
   `--width: 100%`, so without this the tile takes the full row and the title
   drops underneath it — which reads as "the layout is broken" rather than as a
   width setting, because nothing in the CSS below it looks wrong. */
.fad-event-card .fad-event-card-date.elementor-widget {
	width: auto;
	flex: 0 0 auto;
	margin-block-end: 0;
}

.fad-event-card-date .evd-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --e-global-color-fadgray ); /* #DBDBDB */
	background-color: var( --e-global-color-fadlightgray ); /* #EDEDED */
	border-radius: 3px;
	padding: 10px 18px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
}

.fad-event-card-date .evd-date strong {
	display: block;
	font-weight: 400;
}

@media ( min-width: 768px ) {
	.fad-event-card-date .evd-date {
		font-size: 1.125rem;
	}
}

/* The day number. $date-green #107249 on #EDEDED measures 5.28:1 — comfortably
   past AA for text of any size, which matters because at 2rem/800 this is the
   single loudest element on the page and the one a visitor scans by. */
.fad-event-card-date .evd-date span {
	display: block;
	font-size: 2rem;
	font-weight: 800;
	color: var( --e-global-color-faddategreen ); /* #107249 */
}

/* --- the row's content ----------------------------------------------------
   min-width: 0 is not cosmetic. A flex item's default minimum size is its
   content, so a long unbroken event title would push the row wider than the
   container instead of wrapping, and the page would scroll sideways on a
   phone. */
.fad-event-card-body {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 20px;
}

@media ( min-width: 768px ) {
	.fad-event-card-body {
		padding-left: 40px;
	}
}

/* Title. The colour goes on the ANCHOR, not the heading: Elementor renders a
   linked heading as h2 > a, and a colour on the h2 is overridden by the theme's
   own link colour on the anchor inside it. */
.fad-event-card .fad-event-card-title.elementor-widget-heading .elementor-heading-title,
.fad-event-card .fad-event-card-title.elementor-widget-heading .elementor-heading-title a {
	line-height: 1.2;
	color: var( --e-global-color-faddarkgreen ); /* #093423 */
	padding: 0;
}

.fad-event-card .fad-event-card-title.elementor-widget-heading .elementor-heading-title a:hover,
.fad-event-card .fad-event-card-title.elementor-widget-heading .elementor-heading-title a:focus {
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
}

/* THREE classes, not two. Elementor zeroes every widget's bottom spacing with
   `.e-con > .elementor-widget { margin-block-end: 0 }` — two classes — so
   `.fad-event-card .fad-event-card-title` ties and loses on source order, and
   every gap in the row measures 0px while this file looks correct. */
.fad-event-card .fad-event-card-title.elementor-widget {
	margin-block-end: 0.5rem;
}

/* Venue. Scoped to the component and never written as a bare `p` rule —
   Elementor sets colour and size on the widget wrapper and lets the paragraph
   inherit, so a global p rule silently overrides every per-widget typography
   setting on the site. */
.fad-event-card-venue,
.fad-event-card-venue p {
	font-size: 1.125rem;
	color: var( --e-global-color-faddarkgreen ); /* #093423 */
	margin-bottom: 0;
}

.fad-event-card .fad-event-card-venue.elementor-widget {
	margin-block-end: 10px;
}

/* Schedule line plus the "Read More" link, one widget. */
.fad-event-card-schedule,
.fad-event-card-schedule p {
	font-size: 1.125rem;
	font-weight: 400;
	margin-bottom: 0;
}

.fad-event-card .fad-event-card-schedule.elementor-widget {
	margin-block-end: 0;
}

/* The link sits on its own line on a phone and runs on after the schedule from
   768px up — which is why the two are one widget rather than two: a widget is a
   flex item in a container and always takes a line of its own. */
.fad-event-card-schedule .fad-event-readmore {
	display: block;
	font-weight: 500;
	color: var( --e-global-color-accent ); /* link green #1C7145 */
}

@media ( min-width: 768px ) {
	.fad-event-card-schedule .fad-event-readmore {
		display: inline;
		margin-left: 0.25rem;
	}
}

.fad-event-card-schedule .fad-event-readmore:hover,
.fad-event-card-schedule .fad-event-readmore:focus {
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	text-decoration: underline;
}

/* --- the empty state ------------------------------------------------------
   The text sits in `__text` inside the wrapper, not in the wrapper itself. */
.fad-events-loop .e-loop-nothing-found-message__text {
	font-size: 1.125rem;
	color: #202020;
	margin: 0;
}

/* --- pagination ----------------------------------------------------------- */
.fad-events-loop .elementor-pagination {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
}

.fad-events-loop .elementor-pagination .page-numbers {
	color: var( --e-global-color-accent ); /* link green #1C7145 */
	font-size: 1.125rem;
	font-weight: 500;
	text-decoration: none;
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
}

.fad-events-loop .elementor-pagination .page-numbers:hover,
.fad-events-loop .elementor-pagination .page-numbers:focus {
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	background-color: var( --e-global-color-fadlightgray ); /* #EDEDED */
}

/* The current page is marked by more than colour. A colour-only "you are here"
   fails WCAG 1.4.1 and is invisible to anyone who cannot separate two greens,
   so the current page also carries a rule under it and is announced by
   Elementor's own aria-current. */
.fad-events-loop .elementor-pagination .page-numbers.current {
	color: var( --e-global-color-faddarkgreen ); /* #093423 */
	font-weight: 700;
	border-bottom: 2px solid var( --e-global-color-faddategreen ); /* #107249 */
	border-radius: 0;
}

/* --- the view switch ------------------------------------------------------ */
.fad-events-nav {
	margin-top: 1.5rem;
}

.fad-events-nav .fad-events-nav-link {
	font-size: 1.125rem;
	font-weight: 500;
	color: var( --e-global-color-accent ); /* link green #1C7145 */
}

.fad-events-nav .fad-events-nav-link:hover,
.fad-events-nav .fad-events-nav-link:focus {
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	text-decoration: underline;
}

/* --- Featured tag (MEC label Featured), 2026-09-29 ------------------------
   The shortcode prints the tag or nothing; the empty widget is hidden so a
   card without the label keeps its spacing. */
.fad-event-card .fad-event-card-tag.elementor-widget {
	margin-block-end: 0.375rem;
}

.fad-event-card .fad-event-card-tag:not(:has(.fad-event-tag)) {
	display: none;
}

.fad-event-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	background: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* --- Subscribe to calendar, 2026-09-29 --------------------------------------
   The live site has The Events Calendar's subscribe menu under the list. Same
   choices, fed by MEC's iCal feed. A details element, so it opens by keyboard
   with no script. */
.fad-events-subscribe {
	position: relative;
	display: inline-block;
	margin-top: 1.5rem;
}

.fad-events-subscribe summary {
	cursor: pointer;
	list-style: none;
	font-size: 1.125rem;
	font-weight: 500;
	color: var( --e-global-color-accent ); /* link green #1C7145 */
}

.fad-events-subscribe summary::-webkit-details-marker {
	display: none;
}

.fad-events-subscribe summary::after {
	content: " \25BE";
}

.fad-events-subscribe[open] summary::after {
	content: " \25B4";
}

.fad-events-subscribe summary:hover {
	color: var( --e-global-color-secondary );
	text-decoration: underline;
}

.fad-events-subscribe ul {
	position: absolute;
	z-index: 10;
	left: 0;
	top: 100%;
	min-width: 14rem;
	margin: 0.5rem 0 0;
	padding: 0.5rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 3px;
	box-shadow: 0 0.125rem 1rem 0 rgba( 32, 32, 32, 0.15 );
}

.fad-events-subscribe li a {
	display: block;
	padding: 0.4rem 1rem;
	font-size: 1rem;
	color: #202020;
}

.fad-events-subscribe li a:hover,
.fad-events-subscribe li a:focus {
	background: #f4f4f4;
	color: var( --e-global-color-secondary );
}

/* --- photo and summary, matching the live list (2026-09-29) --------------
   Live (The Events Calendar list view): photo 360px wide on the right,
   uncropped, and about 30 words of the description. Both are printed or empty;
   empty widgets are hidden. */
.fad-event-card .fad-event-card-image.elementor-widget {
	flex: 0 0 360px;
	width: 360px;
	margin: 0 0 0 1.5rem;
}

.fad-event-card .fad-event-card-image:not(:has(img)) {
	display: none;
}

.fad-event-card-image img {
	display: block;
	width: 100%;
	height: auto;
}

.fad-event-card .fad-event-card-excerpt.elementor-widget {
	margin-block-end: 0;
}

.fad-event-card .fad-event-card-excerpt:not(:has(p)) {
	display: none;
}

.fad-event-card-excerpt p {
	font-size: 1rem;
	line-height: 1.5;
	color: #202020;
	margin: 0.75rem 0 0;
}

@media ( max-width: 991px ) {
	.fad-event-card .fad-event-card-image.elementor-widget {
		flex-basis: 240px;
		width: 240px;
	}
}

/* Phone: the photo goes on top, full width, as the live list does. */
@media ( max-width: 767px ) {
	.fad-event-card {
		flex-wrap: wrap;
	}

	/* Basis 0 so the text keeps its place beside the date tile once the row wraps. */
	.fad-event-card .fad-event-card-body {
		flex: 1 1 0;
	}

	.fad-event-card .fad-event-card-image.elementor-widget {
		order: -1;
		flex: 0 0 100%;
		width: 100%;
		margin: 0 0 1rem;
	}
}

/* Status tags share the Featured tag's shape; colour says which. */
.fad-event-tag + .fad-event-tag {
	margin-left: 0.375rem;
}

.fad-event-tag--cancelled {
	background: #a4262c;
}

.fad-event-tag--postponed {
	background: #8a5a00;
}

/* Keyboard focus is visible on every interactive thing on this page. The site's
   focus treatment elsewhere is a 2px forest-green outline; reused here rather
   than invented, so the events page does not behave differently from the rest
   of the site for a keyboard user. */
.fad-event-card-title a:focus-visible,
.fad-event-readmore:focus-visible,
.fad-events-nav-link:focus-visible,
.fad-events-subscribe summary:focus-visible,
.fad-events-subscribe li a:focus-visible,
.fad-events-loop .elementor-pagination .page-numbers:focus-visible {
	outline: 2px solid var( --e-global-color-secondary );
	outline-offset: 2px;
}

/* =============================================================================
   7. PAGE HEADER AND PAGE SHELL
   -----------------------------------------------------------------------------
   The photographic band at the top of every page, the title on it, and the
   site's vertical rhythm around the content below.

   Values from the legacy theme's `_header.scss` and `_global.scss`:
     .page-header          cover/centre on #ddd, flex, align-items flex-end,
                           min-height 5.5rem / 10.5rem from 768 / 200px from 992
                           with 40px 0 20px padding at 992
     .page-title-container display none, block from 992; h1 2.5rem/bold/1.2,
                           margin-top 1.5rem, #fff with a
                           0 2px 4px rgba(0,0,0,.5) shadow from 992
     &.mobile              the mirror image: block, none from 992, $header-text
                           #373a3c and no shadow
     .content              padding 0 0 2.5rem, 6rem 0 from $grid-float-breakpoint

   NOTE THE BREAKPOINT. `$grid-float-breakpoint` is **992** and
   `$screen-sm` is 768. The title swaps at 992; the band's middle height changes
   at 768. Writing either as the other is the single easiest mistake to make in
   this stylesheet and it has already been made twice.
   ========================================================================== */

/* --- the band -------------------------------------------------------------
   The photograph is NOT set here. It arrives as --fad-page-header-image, an
   inline custom property the child theme prints per page: 36 pages carry their
   own header image and the other 55 fall back to the site default, and that
   fallback cannot be expressed as a dynamic tag on a background-image setting.

   #ddd underneath is the legacy fallback colour and matters more than it looks:
   the desktop title is WHITE and sits on this, so a page whose image fails to
   load still has to be readable. See the scrim rule below. */
.fad-page-header {
	/* `none` fallback is load-bearing. If a page somehow has no header image the
	   property is undefined, and an undefined var makes the whole declaration
	   invalid — including the scrim layer added at 992px below, which is the
	   thing keeping the title readable. */
	background-image: var( --fad-page-header-image, none );
	background-color: #ddd;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 5.5rem;
	margin: 0;

	/* BOTTOM-ALIGN THE TITLE — and it has to be done through Elementor's
	   variables, not with plain declarations.

	   Elementor sets every container's flex properties FROM CUSTOM PROPERTIES:
	   `justify-content: var(--justify-content)` and so on, at a specificity a
	   theme rule cannot beat. Writing `align-items: flex-end` here, which is
	   verbatim what the legacy `.page-header` does, computed to `normal` and did
	   nothing at all — no error, no warning, the title simply stayed where it
	   was.

	   The second trap is that an Elementor container is a flex COLUMN, not a
	   row. In a column the vertical axis is `justify-content`, so `align-items`
	   would have been the wrong property even if it had applied. Both mistakes
	   were made here in turn and both looked like a layout that had been
	   designed that way. */
	--display: flex;
	--flex-direction: column;
	--justify-content: flex-end;
}

@media ( min-width: 768px ) {
	.fad-page-header {
		min-height: 10.5rem;
	}
}

/* THE SCRIM, AND WHY THE PAGE LOOKS SLIGHTLY DIFFERENT FROM LIVE.
   -----------------------------------------------------------------------------
   The title is 40px bold WHITE sitting directly on an editor-chosen photograph.
   Measured from the real pixels on /wellness/ — a sunlit meadow — it came out at
   **1.18:1** against the 3.0 that large text needs. That is not a near miss; it
   is white on pale green. Live has the same problem today on every page, because
   this is the legacy design.

   Computed styles cannot see any of this: they report #ddd, the band's fallback
   colour, and call it a comfortable pass. Only a pixel walk finds it.

   A darker text colour is not the fix — the design is white-on-photograph and
   the whole band reads as an image caption. The fix is the one the CTA grid
   already uses: a scrim at full strength across the lower half, fading to
   nothing at the top, which keeps most of the photograph.

   0.55 alpha is chosen for the WORST case, not this photograph. Against a pure
   white sky it yields 4.72:1; at 0.4 the same sky gives 2.85 and fails. The
   editor can put any image here, so the number has to hold for any image.

   Full strength to 65% of the band's height, not 45%. The title is bottom-aligned
   with 20px beneath it, so a ONE-line title occupies roughly 10-34% up from the
   floor and a TWO-line title reaches 58% — and several page titles on this site
   wrap. Sized to the two-line case, because a scrim that only covers short
   titles fails exactly on the pages with the most to say. The first attempt
   stopped at 45% and measured 2.63:1: better than 1.18 and still a fail, with
   the worst pixel at the very top of the glyphs.

   Only from 992px up: below that the title is not on the photograph at all, and
   darkening the band there would be a change with nothing to buy. */
@media ( min-width: 992px ) {
	.fad-page-header {
		min-height: 200px;
		padding-top: 40px;
		padding-bottom: 20px;
		background-image:
			linear-gradient(
				to top,
				rgba( 0, 0, 0, 0.55 ) 0%,
				rgba( 0, 0, 0, 0.55 ) 65%,
				rgba( 0, 0, 0, 0 ) 100%
			),
			var( --fad-page-header-image, none );
	}
}

/* align-self, not just the parent's align-items. `.fad-page-header` is
   `align-items: flex-end` exactly as the legacy `.page-header` is, but in the
   legacy markup its child is a plain `.container` whose height is its content,
   so flex-end pushes it down. Elementor's `.e-con-inner` STRETCHES to fill the
   band instead, so flex-end had nothing to move and the title sat at the top of
   the photograph with 88px of empty space under it — a difference that looks
   like a design choice rather than a bug. */
.fad-page-header > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;

	/* The inner has flex-grow: 1 and so fills the band's whole 140px content
	   box; end-justifying the band alone therefore moves nothing. The inner has
	   to end-justify its own children too — through the variable, for the reason
	   above. */
	--justify-content: flex-end;
}

/* --- the desktop title, on the photograph ---------------------------------
   Hidden below 992px, where the small-screen copy below the band takes over. */
.fad-page-header .fad-page-title.elementor-widget {
	display: none;
	margin-block-end: 0;
}

@media ( min-width: 992px ) {
	.fad-page-header .fad-page-title.elementor-widget {
		display: block;
	}
}

/* Three classes deep on purpose — Elementor colours every heading from
   `.elementor-widget-heading .elementor-heading-title`, two classes, which beats
   the kit's own h1 rule. Left alone the title comes out brand green on a
   photograph. */
.fad-page-header .fad-page-title.elementor-widget-heading .elementor-heading-title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 1.5rem;
	margin-bottom: 0;
	color: #fff;
	text-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5 );
}

/* --- the small-screen title, below the band -------------------------------
   $header-text #373a3c on white, no shadow. */
.fad-page-title-small > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

@media ( min-width: 992px ) {
	.fad-page-title-small {
		display: none;
	}
}

.fad-page-title-small .fad-page-title-small-text.elementor-widget-heading .elementor-heading-title {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 1.5rem;
	margin-bottom: 0;
	color: #373a3c;
}

/* --- the site's vertical rhythm -------------------------------------------
   THIS RETIRES AN OPEN ITEM. The legacy `.content { padding: 0 0 2.5rem;
   6rem 0 from 992px }` wraps all page content, and every page rebuilt so far
   has been missing it — the event single and the events list each carry a
   scoped copy as a stopgap. This is the real one, on every page.

   Those two scoped copies stay: neither renders inside this container (an event
   is not a page), so they are not duplicates. */
.fad-page-content {
	padding-bottom: 2.5rem;
}

@media ( min-width: 992px ) {
	.fad-page-content {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

.fad-page-content > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

/* =============================================================================
   8. BLOG — LISTING AND SINGLE POST
   -----------------------------------------------------------------------------
   Values from the legacy theme's `_posts.scss`:
     .blogEntry          padding 0 0 2.5rem, border-bottom 1px $light-gray,
                         margin-bottom 1.5rem
     .blogEntry__image   img with the house shadow, margin-bottom 1.5rem;
                         from $screen-sm floats RIGHT, margin-left 3rem,
                         max-width 300px, no bottom margin
     .entry-title a      $forest-green #1E4F40, $mint-green #259A67 on hover
     .entry-meta         #267A31 at 1.25rem; links underlined
     .moreLink           500 weight, #32A141
     .singlePost__header centred, margin-bottom 3rem, padding-bottom 2rem,
                         border-bottom 1px $light-gray; title 600.
                         With a featured image: no bottom margin, no rule
     .singlePost__thumb  house shadow; margin-bottom 2.5rem, 4rem from 768
     .singlePost__footer border-top 1px $light-gray, padding-top 2.5rem,
                         margin-top 3rem, 8rem from 768
     .blogFilters        padding-top 4rem; filters inline-block min-width 275px
                         from 768

   ONE COLOUR CHANGED, for contrast. See the "Read More" rule below.
   ========================================================================== */

/* --- the listing ---------------------------------------------------------
   .fad-blog-list also carries .fad-page-content, so it inherits the site's
   vertical rhythm and its 1170 width from section 7 and needs neither here. */

/* Elementor's Loop Grid ships a 20px grid gap. The rows carry their own
   1.5rem separation and a rule, so the gap has to go or every row gains 20px
   that no legacy value accounts for. */
.fad-blog-loop .elementor-loop-container {
	gap: 0;
}

.fad-blog-entry {
	padding: 0 0 2.5rem 0;
	border-bottom: 1px solid var( --e-global-color-fadlightgray ); /* #EDEDED */
	margin-bottom: 1.5rem;

	/* flow-root, not block. The image inside is FLOATED (see below), and a
	   floated child does not stretch its parent — so with plain `block` the
	   entry's height was the text alone and a 500px photograph hung down
	   THROUGH the row's rule and over the next two posts. `flow-root` makes the
	   entry contain its own float without the clipping `overflow: hidden` would
	   bring. `clear` handles the row after it. */
	display: flow-root;
	clear: both;
}

/* --- the featured image, floated ------------------------------------------
   FLOAT, NOT FLEX, and the difference is not stylistic. The legacy design has
   the excerpt WRAP around the image; a flex row makes the text a rigid column
   beside it, so a short post leaves a tall empty gap next to a 300px image and
   a long one runs to a narrow ribbon. Only a float wraps.

   Which means the entry container must NOT be a flex container, hence the
   `display: block` above — an Elementor container is flex by default and a
   float inside a flex container is ignored outright. That failure is silent:
   the image simply sits above the text looking like a design decision. */
/* FIVE CLASSES, AND THE REASON IS WORTH KNOWING FOR THE REST OF THIS PROJECT.
   Elementor caps every widget's width with

       .elementor.elementor .e-con > .elementor-widget { max-width: 100% }

   — note `.elementor.elementor`, the same class written twice purely to inflate
   specificity to FOUR classes. A normal-looking three-class theme rule loses to
   it, and loses silently: the float applied, the margins applied, and the
   `max-width: 300px` sitting in the same block did not, so the listing rendered
   768px-wide photographs that looked like a deliberate full-bleed design.

   Anything in this stylesheet that needs to set a widget's WIDTH has to clear
   four classes. */
.elementor .fad-blog-entry .fad-blog-entry-image.elementor-widget.elementor-widget-image {
	margin-block-end: 1.5rem;
	width: auto;
	max-width: 100%;
}

.fad-blog-entry .fad-blog-entry-image img {
	border-radius: 3px;
	box-shadow: 0 0.125rem 1rem 0 rgba( 32, 32, 32, 0.2 );
	display: block;
	max-width: 100%;
	height: auto;
}

@media ( min-width: 768px ) {
	.elementor .fad-blog-entry .fad-blog-entry-image.elementor-widget.elementor-widget-image {
		float: right;
		margin-left: 3rem;
		margin-block-end: 0;
		width: 300px;
		max-width: 300px;
	}
}

/* --- title ---------------------------------------------------------------
   Colour goes on the ANCHOR: Elementor renders a linked heading as h2 > a and a
   colour on the h2 loses to the theme's link colour on the anchor inside it. */
.fad-blog-entry .fad-blog-entry-title.elementor-widget-heading .elementor-heading-title,
.fad-blog-entry .fad-blog-entry-title.elementor-widget-heading .elementor-heading-title a,
.fad-blog-entry--related .fad-blog-entry-title a {
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	line-height: 1.2;
}

.fad-blog-entry .fad-blog-entry-title.elementor-widget-heading .elementor-heading-title a:hover,
.fad-blog-entry .fad-blog-entry-title.elementor-widget-heading .elementor-heading-title a:focus,
.fad-blog-entry--related .fad-blog-entry-title a:hover,
.fad-blog-entry--related .fad-blog-entry-title a:focus {
	/* --fad-mint-dark, NOT --fad-mint. The project keeps two mints on purpose:
	   #259A67 is 3.56:1 on white and fails as TEXT, and is only ever a panel
	   under dark copy. Hover states are text on white, so they take the
	   darkened one. */
	color: var( --fad-mint-dark ); /* #208657, 4.56:1 on white */
}

/* THREE classes. Elementor zeroes every widget's bottom spacing with
   `.e-con > .elementor-widget`, two classes, so a two-class rule here ties and
   loses on source order and every gap in the card measures 0. */
.fad-blog-entry .fad-blog-entry-title.elementor-widget {
	margin-block-end: 0.25rem;
}

/* --- the meta line -------------------------------------------------------
   #267A31 at 1.25rem is the legacy value and it measures 5.40:1 on white, so it
   stays exactly as production has it. */
.fad-entry-meta {
	color: var( --e-global-color-fadheadinggr ); /* #267A31 */
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0;
}

.fad-entry-meta a {
	color: var( --e-global-color-fadheadinggr );
	text-decoration: underline;
}

.fad-entry-meta a:hover,
.fad-entry-meta a:focus {
	/* --fad-mint-dark, NOT --fad-mint. The project keeps two mints on purpose:
	   #259A67 is 3.56:1 on white and fails as TEXT, and is only ever a panel
	   under dark copy. Hover states are text on white, so they take the
	   darkened one. */
	color: var( --fad-mint-dark ); /* #208657, 4.56:1 on white */
}

.fad-blog-entry .fad-blog-entry-meta.elementor-widget {
	margin-block-end: 0.75rem;
}

/* --- excerpt -------------------------------------------------------------
   Scoped, never a bare `p` rule — Elementor sets colour and size on the widget
   wrapper and lets the paragraph inherit, so a global p rule silently overrides
   every per-widget typography setting on the site. */
.fad-blog-entry-excerpt,
.fad-blog-entry-excerpt p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
}

.fad-blog-entry-excerpt p:last-child {
	margin-bottom: 0;
}

.fad-blog-entry .fad-blog-entry-excerpt.elementor-widget {
	margin-block-end: 0.75rem;
}

/* --- "Read More ›" -------------------------------------------------------
   THE ONE COLOUR CHANGED FROM LIVE. The legacy `.moreLink` is #32A141
   — `darken($brand-green, 5%)` — which measures **3.32:1** on white against the
   4.5 that normal-weight body text needs. It is the primary call to action on
   every row of the listing, so it is the last thing that should be hard to read.

   The site's own Link Green #1C7145 clears it at 6.35:1 and reads as the same
   green. Exactly the substitution the CTA grid already makes for the same
   reason. */
.fad-more-link {
	font-weight: 500;
	font-size: 1.125rem;
	color: var( --e-global-color-accent ); /* link green #1C7145 */
	display: inline-block;
}

.fad-more-link:hover,
.fad-more-link:focus {
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	text-decoration: underline;
}

.fad-blog-entry .fad-blog-entry-more.elementor-widget {
	margin-block-end: 0;
}

/* --- pagination ---------------------------------------------------------- */
.fad-blog-loop .elementor-pagination {
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
}

.fad-blog-loop .elementor-pagination .page-numbers {
	color: var( --e-global-color-accent );
	font-size: 1.125rem;
	font-weight: 500;
	text-decoration: none;
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
}

.fad-blog-loop .elementor-pagination .page-numbers:hover,
.fad-blog-loop .elementor-pagination .page-numbers:focus {
	color: var( --e-global-color-secondary );
	background-color: var( --e-global-color-fadlightgray );
}

/* The current page is marked by weight and a rule, not by colour alone — a
   colour-only "you are here" fails WCAG 1.4.1. */
.fad-blog-loop .elementor-pagination .page-numbers.current {
	color: var( --e-global-color-faddarkgreen );
	font-weight: 700;
	border-bottom: 2px solid var( --e-global-color-faddategreen );
	border-radius: 0;
}

/* --- the filters ---------------------------------------------------------
   The Go button is a deliberate addition; see inc/blog.php and
   js/blog-filters.js for why the legacy navigate-on-change cannot stay. */
.fad-blog-filters {
	padding-top: 4rem;
	clear: both;
}

.fad-post-footer .fad-blog-filters {
	padding-top: 0;
}

.fad-blog-filters-title {
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.fad-blog-filter {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	max-width: 275px;
}

@media ( min-width: 768px ) {
	.fad-blog-filter {
		display: inline-flex;
		min-width: 275px;
		margin-right: 1rem;
	}
}

.fad-blog-filter-select {
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 12px;
	font-size: 1rem;
	color: #202020;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.fad-blog-filter-go {
	flex: 0 0 auto;
	padding: 7px 16px;
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	/* --fad-button-green, the token that exists precisely because Brand Green
	   carries white lettering at only 2.69:1. White on this measures 4.66:1. */
	background-color: var( --fad-button-green );
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
}

.fad-blog-filter-go:hover,
.fad-blog-filter-go:focus {
	background-color: var( --fad-button-green-hover ); /* #17661F, white on it 7.10:1 */
}

.fad-blog-filter-select:focus-visible,
.fad-blog-filter-go:focus-visible {
	outline: 2px solid var( --e-global-color-secondary );
	outline-offset: 2px;
}

/* =============================================================================
   THE SINGLE POST
   ========================================================================== */

/* The blank white header. Its whole job is to stop the title running up under
   the sticky header bar on a phone; it is removed entirely from 992px up, which
   is exactly what the legacy `.page-header--blank` does. */
.fad-page-header-blank {
	background-color: #fff;
	min-height: 5.5rem;
}

@media ( min-width: 992px ) {
	.fad-page-header-blank {
		display: none;
	}
}

/* .container--narrow-xs is 715px. */
.fad-post > .e-con-inner {
	max-width: 715px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

.fad-post {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

/* 992px, not 768px — the legacy `.content` padding switches at
   $grid-float-breakpoint. */
@media ( min-width: 992px ) {
	.fad-post {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

.fad-post .fad-post-title.elementor-widget-heading .elementor-heading-title {
	font-weight: 600;
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
}

.fad-post .fad-post-title.elementor-widget {
	margin-block-end: 0.75rem;
}

.fad-post .fad-post-meta {
	text-align: center;
}

.fad-post .fad-post-meta.elementor-widget {
	margin-block-end: 2.5rem;
}

/* The header's rule and its 3rem gap belong to a post with NO featured image.
   Where there is one the legacy header drops both, because the photograph is
   the separator. Reproduced with :has(), and the fallback is the safe way
   round: a browser without :has() shows the rule, which is the plain-post
   treatment, rather than losing the separation entirely. */
.fad-post .fad-post-meta.elementor-widget {
	padding-bottom: 2rem;
	border-bottom: 1px solid var( --e-global-color-fadlightgray ); /* #EDEDED */
	margin-block-end: 3rem;
}

.fad-post:has( .fad-post-image img ) .fad-post-meta.elementor-widget {
	padding-bottom: 0;
	border-bottom: none;
	margin-block-end: 2.5rem;
}

.fad-post .fad-post-image img {
	border-radius: 3px;
	box-shadow: 0 0.125rem 1rem 0 rgba( 32, 32, 32, 0.2 );
}

.fad-post .fad-post-image.elementor-widget {
	margin-block-end: 2.5rem;
	text-align: center;
}

@media ( min-width: 768px ) {
	.fad-post .fad-post-image.elementor-widget {
		margin-block-end: 4rem;
	}
}

.fad-post-content p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
	margin-bottom: 1.25rem;
}

.fad-post-content p:last-child {
	margin-bottom: 0;
}

.fad-post .fad-post-content.elementor-widget {
	margin-block-end: 0;
}

/* --- the footer ---------------------------------------------------------- */
.fad-post-footer > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
	flex-wrap: wrap;
	--flex-wrap: wrap;
	--align-items: flex-start;
}

.fad-post-footer {
	border-top: 1px solid var( --e-global-color-fadlightgray ); /* #EDEDED */
	padding-top: 2.5rem;
	margin-top: 3rem;
	padding-bottom: 2.5rem;
}

@media ( min-width: 768px ) {
	.fad-post-footer {
		margin-top: 8rem;
	}
}

/* 75/25, the legacy .col-75 / .col-25 split, and only from 768px — below that
   the related post and the filters stack, which is what the legacy grid does. */
.fad-post-footer-related {
	width: 100%;
}

.fad-post-footer-filters {
	width: 100%;
}

@media ( min-width: 768px ) {
	.fad-post-footer-related {
		width: 75%;
		padding-right: 15px;
	}

	.fad-post-footer-filters {
		width: 25%;
		padding-left: 15px;
	}
}

.fad-related-header {
	margin-bottom: 16px;
}

/* The related entry is markup from the child theme rather than Elementor
   widgets, so it needs the card rules restated rather than inherited. It has no
   bottom rule: it is the only one, and a rule under a single item reads as a
   list that lost its other rows. */
.fad-blog-entry--related {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.fad-blog-entry--related .fad-blog-entry-title {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0 0 0.25rem 0;
}

.fad-blog-entry--related .fad-entry-meta {
	margin-bottom: 10px;
}

.fad-blog-entry--related .fad-blog-entry-excerpt p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
	margin-bottom: 0.75rem;
}

.fad-blog-entry--related .fad-related-image {
	display: block;
	margin-bottom: 1.5rem;
}

.fad-blog-entry--related .fad-related-image img {
	border-radius: 3px;
	box-shadow: 0 0.125rem 1rem 0 rgba( 32, 32, 32, 0.2 );
	max-width: 300px;
	height: auto;
}

@media ( min-width: 768px ) {
	.fad-blog-entry--related .fad-related-image {
		float: right;
		margin-left: 3rem;
		margin-bottom: 0;
	}
}

.fad-blog-entry--related .fad-blog-entry-title a:focus-visible,
.fad-more-link:focus-visible,
.fad-blog-entry-title a:focus-visible {
	outline: 2px solid var( --e-global-color-secondary );
	outline-offset: 2px;
}

/* =============================================================================
   9. RESIDENCES PAGES
   -----------------------------------------------------------------------------
   Values from the legacy theme's `_residences-pg.scss`:
     .residences-pg--intro     7/12 column, white, 2rem padding, radius 3px,
                               overlap-page-header PLUS its own -50px; the box
                               shadow only appears from $screen-sm; h1 600
     .residences-pg--features  5/12 column, max-width 400, margin 25px auto 0,
                               top margin 0 from $grid-float-breakpoint;
                               list-style none, items 1rem / 1.25rem from 768,
                               weight 300, pb 20px, with a 12px $brand-green
                               square for a bullet
     .residences-table         width 100%, padding 40px 0, display table from 768
     .residences-table--row    centred; from 768 a table-row, left-aligned;
                               the last row's cells get a 2px bottom rule
     .residences-table--cell   vertical-align middle, 10px top/bottom; from 768
                               a table-cell with a 2px $light-gray top rule;
                               h2 1.875rem/500 $forest-green

   The legacy layout is a real CSS table from 768px up and a stack below it. It
   is rebuilt as a GRID rather than a table, which produces the same three
   columns and the same rules but keeps the cells able to wrap — several
   residences have three buttons and a two-line description, and a table cell
   will not let the buttons wrap onto their own line.
   ========================================================================== */

/* --- the band, without a title ------------------------------------------
   The residences band carries no text, so it needs no scrim. Switching it off
   here rather than never adding it: `.fad-page-header` is shared, and the scrim
   at 992px is what makes the title readable on every other page. */
.fad-page-header--plain {
	background-image: var( --fad-page-header-image, none );
}

@media ( min-width: 992px ) {
	.fad-page-header--plain {
		background-image: var( --fad-page-header-image, none );
	}
}

/* --- intro card and features -------------------------------------------- */
.fad-residences-intro-row > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
	--flex-wrap: wrap;
	--align-items: flex-start;
	flex-wrap: wrap;
}

.fad-residences-intro {
	width: 100%;
	background-color: #fff;
	padding: 2rem;
	border-radius: 3px;

	/* THE OVERLAP, and it is a different number from every other page.
	   `.residences-pg--intro` applies the `overlap-page-header` mixin AND adds
	   its own `margin-top: -50px` on top of it. The mixin's own pull is
	   cancelled by `.content`'s top padding (see section 7 for the arithmetic),
	   so what is left over on every viewport is that extra -50px. */
	margin-top: -50px;
}

@media ( min-width: 768px ) {
	.fad-residences-intro {
		box-shadow: 0 0.125rem 1rem 0 rgba( 32, 32, 32, 0.2 );
	}
}

@media ( min-width: 992px ) {
	.fad-residences-intro {
		width: 58.33333%; /* 7/12 */
	}
}

/* Three classes deep, same reason as everywhere else: Elementor colours every
   heading from `.elementor-widget-heading .elementor-heading-title`, which beats
   the kit's own h1 rule, and the title comes out brand green. */
.fad-residences-intro .fad-residences-title.elementor-widget-heading .elementor-heading-title {
	font-weight: 600;
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
}

.fad-residences-intro .fad-residences-title.elementor-widget {
	margin-block-end: 1rem;
}

.fad-residences-intro-text p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: #202020;
	margin-bottom: 1.25rem;
}

.fad-residences-intro-text p:last-child {
	margin-bottom: 0;
}

.fad-residences-features-col {
	width: 100%;
}

@media ( min-width: 992px ) {
	.fad-residences-features-col {
		width: 41.66667%; /* 5/12 */
		padding-left: 15px;
	}
}

.fad-residences-features {
	max-width: 400px;
	margin: 25px auto 0 auto;
}

/* THE 96px THE FEATURES COLUMN LOST. Legacy zeroes this margin at the float
   breakpoint too — but on production the whole row sits inside `.content`,
   which has `padding: 6rem 0` from 992 up, and only the intro card pulls itself
   back out of it (`overlap-page-header` = -(6rem + 50px), netting the -50px
   overlap). The rebuild folded that arithmetic into the intro's own -50px, so
   the intro landed correctly and the features column silently lost all 96px and
   started hard against the header photo. `$content-tb-padding` is 6rem, which is
   exactly the ~96px Eric measured off the live site. */
@media ( min-width: 992px ) {
	.fad-residences-features {
		margin-top: 6rem;
	}
}

.fad-residences-features ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The green square is a bullet drawn by hand. It stays a real <ul> underneath —
   the list is the only thing telling a reader-aid that these are three separate
   features and not one sentence, and `list-style: none` removes the marker but
   not the semantics. */
.fad-residences-features ul li {
	position: relative;
	padding-left: 28px;
	padding-bottom: 20px;
	font-weight: 300;
	font-size: 1rem;
	color: #202020;
}

@media ( min-width: 768px ) {
	.fad-residences-features ul li {
		font-size: 1.25rem;
	}
}

.fad-residences-features ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var( --e-global-color-primary ); /* brand green #38B449 */
}

/* --- the table ----------------------------------------------------------- */
.fad-residences-table-wrap > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

.fad-residences-table {
	width: 100%;
	padding: 40px 0;
}

.fad-residence-row {
	text-align: center;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var( --e-global-color-fadlightgray ); /* #EDEDED */
}

.fad-residence-row:last-child {
	margin-bottom: 0;
}

/* GRID, not a CSS table, and the reason matters. The legacy layout is
   `display: table` / `table-row` / `table-cell` from 768px up. A table cell will
   not let its contents wrap onto a new line, and several residences carry three
   buttons beside a two-line description — in a real table those buttons run off
   the side of the cell. A grid gives the same three columns and the same rules
   and lets the button column wrap. */
@media ( min-width: 768px ) {
	.fad-residence-row {
		display: grid;
		grid-template-columns: 14% 1fr 1fr;
		align-items: center;
		gap: 1rem;
		text-align: left;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 0;
		border-bottom: none;
		border-top: 2px solid var( --e-global-color-fadlightgray );
	}

	/* The legacy table closes itself off with a rule under the last row. */
	.fad-residence-row:last-child {
		border-bottom: 2px solid var( --e-global-color-fadlightgray );
	}
}

.fad-residence-cell {
	padding-top: 10px;
	padding-bottom: 10px;
}

.fad-residence-cell h2 {
	margin: 0;
	font-size: 1.875rem;
	font-weight: 500;
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	line-height: 1.2;
}

.fad-residence-description {
	display: block;
	font-size: 1.125rem;
	color: #202020;
}

.fad-residence-size {
	display: block;
	font-size: 1.125rem;
	color: #202020;
}

@media ( min-width: 768px ) {
	.fad-residence-cell--detail {
		display: flex;
		gap: 1.5rem;
		align-items: baseline;
		justify-content: space-between;
	}
}

/* --- the buttons ---------------------------------------------------------
   EVERY rule below is scoped to `.fad-residences-table` on purpose, giving it
   (0,2,0). The Elementor kit styles bare elements — `.elementor-kit-9177 button`
   at (0,1,1) — which beats a lone `.fad-residence-btn` at (0,1,0). Unscoped,
   the two <button> actions silently took the kit's 1.25rem/30px global button
   size instead of this file's, and measured 188 and 220 wide when they were
   written to be far smaller. That is what pushed "Virtual Tour" onto a second
   line, and it hid because <a> and <button> were losing to DIFFERENT kit rules,
   so they looked deliberately different rather than both wrong.
   --------------------------------------------------------------------------- */
.fad-residence-cell--actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

@media ( min-width: 768px ) {
	.fad-residence-cell--actions {
		flex-direction: row;
		/* Still allowed to wrap — a narrow laptop or a long residence name must
		   not push a button off the side. It simply no longer NEEDS to at 1440,
		   now that the buttons are the size this file always specified. */
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
	}
}

.fad-residences-table .fad-residence-btn {
	display: inline-block;
	/* Production's measured values, and they now actually apply — see the
	   specificity note above. */
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 10px 20px;
	border-radius: 4px;
	border: 1px solid transparent;
	text-align: center;
	cursor: pointer;
	max-width: 90%;
	width: 100%;

	/* --fad-button-green, not brand green. Brand Green carries white lettering
	   at 2.69:1; white on this measures 4.66:1. */
	color: #fff;
	background-color: var( --fad-button-green );
	text-decoration: none;
}

@media ( min-width: 768px ) {
	.fad-residences-table .fad-residence-btn {
		max-width: 100%;
		width: auto;
		white-space: nowrap;
	}
}

/* TRAP: the Elementor kit paints EVERY anchor. `.elementor-kit-9177 a` is
   (0,1,1) and beats `.fad-residence-btn` at (0,1,0), so the one button that is a
   real link — Virtual Tour / Take a Tour — came out link-green #1C7145 on the
   green button, 1.2:1 and effectively unreadable. "View Photos" and "View Floor
   Plan" are <button> elements, which the kit rule does not match, which is why
   only this one was wrong. Two classes puts it past the kit for good. */
.fad-residences-table a.fad-residence-btn,
.fad-residences-table a.fad-residence-btn:visited {
	color: #fff;
}

.fad-residences-table a.fad-residence-btn:hover,
.fad-residences-table a.fad-residence-btn:focus {
	color: #fff;
}

.fad-residences-table .fad-residence-btn:hover,
.fad-residences-table .fad-residence-btn:focus {
	color: #fff;
	background-color: var( --fad-button-green-hover ); /* #17661F, white on it 7.10:1 */
}

.fad-residences-table .fad-residence-btn:focus-visible {
	outline: 2px solid var( --e-global-color-secondary );
	outline-offset: 2px;
}

/* The disabled "View Floor Plan" the legacy page renders where a residence has
   no floor plan. It carries a real `disabled` attribute, so it is genuinely
   unreachable rather than merely grey — and the colours below are chosen to
   read as unavailable while still clearing 4.5:1, because "you cannot use this"
   is information and hiding it in low-contrast grey withholds it. */
.fad-residences-table .fad-residence-btn--disabled,
.fad-residences-table .fad-residence-btn--disabled:hover,
.fad-residences-table .fad-residence-btn--disabled:focus {
	background-color: var( --e-global-color-fadlightgray ); /* #EDEDED */
	color: #55595c;
	cursor: not-allowed;
}

/* =============================================================================
   THE LIGHTBOX OPENS HALF A SCREEN OFF
   -----------------------------------------------------------------------------
   Every gallery on this site — the gallery component's "View Gallery", the
   residence table's photo and floor-plan buttons, the home page's "Play Video" —
   opens Elementor's lightbox, and it opened with the whole slideshow displaced
   down and right by exactly half the viewport: the photograph spilling out of
   the bottom-right corner, the close button and the thumbnail strip off-screen.

   It is not our CSS. Elementor's dialog library positions itself with jQuery
   UI's `.position({ my: 'center', at: 'center' })`, and it runs that BEFORE the
   dialog's content has a measurable size. Centring a 0x0 box against a 1440x900
   window gives the centre POINT rather than a centred box, so the library
   writes `top: 450px; left: 720px` as an inline style and everything inherits
   the offset. Proof: dispatching a `resize` at the open lightbox makes it
   re-measure and rewrite the same inline style as `top: 0; left: 0`.

   The lightbox is always full-screen, so there is nothing for that computation
   to decide. `!important` is needed and is not laziness — the wrong values are
   an inline style, and nothing else beats one.

   (Pre-enqueuing `e-lightbox` so the stylesheet is parsed before the click was
   tried first, on the theory that the missing size came from late CSS. It does
   not help: the measurement is early regardless of when the CSS lands. Do not
   re-add it.) */
.elementor-lightbox .dialog-widget-content {
	top: 0 !important;
	left: 0 !important;
}

/* The lightbox slides. Visually hidden rather than display:none — a click
   dispatched at a display:none element does not reliably open Elementor's
   lightbox, and opening it is the only thing these exist for. */
.fad-residence-lightbox {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* =============================================================================
   10. HOME PAGE
   -----------------------------------------------------------------------------
   Measured on forestduke.org at 375 / 768 / 992 / 1440 on 2026-08-27. Every
   number below came off the live page, not off the theme's SCSS — the two
   disagree in several places because the hero was restyled after that SCSS was
   last compiled, and the live rules are what the site actually looks like.

   1440 reference:
     hero       full width x 565, #1E4F40 under the video
     overlay    centred, top 40% of the band, h1 64/400 Montserrat
     tiles      row 1150 wide (bleeds 5px each side of the 1140 column),
                pulled up 64px over the hero, four 288 columns, tile 278 with a
                155% padding-bottom aspect, title inset 20/20
     feature    panel 1140 x 538, padding 70/70/180, mint box 462
     portraits  section max 1500, cards 317.5 with a 70px peek either side,
                four across at 1200+, three from 768, one below
   ========================================================================== */

/* -----------------------------------------------------------------------------
   10a. THE PAGE SHELL
   Legacy: `.home .content { padding: 0 }`. The home page is the one page with
   no vertical rhythm above its first section, because the hero has to sit
   directly under the navigation.
   -------------------------------------------------------------------------- */
.fad-home .fad-page-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* The site's content column, same 1170/15 as every other page. Stated on the
   inner element because Elementor drives a container's own max-width from
   --width and a class rule on the container itself loses to it. */
.fad-home-content > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

/* -----------------------------------------------------------------------------
   10b. THE ANNOUNCEMENT BAR
   Off today (enable_banner = 0). Rendered above the navigation, which is where
   legacy puts it.

   CONTRAST: legacy fills the bar with Brand Green #38B449 and puts white text
   on it at 2.69:1. Same problem, same answer as every other text-bearing green
   on this site — the button token, which reads as the same green.
   -------------------------------------------------------------------------- */
.fad-home-banner {
	background-color: var( --fad-button-green );
	padding: 4rem 0;
}

.fad-home-banner-inner {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.fad-home-banner-text {
	flex: 1 1 auto;
	max-width: 75%;
}

.fad-home-banner-text p {
	color: #fff;
	margin-bottom: 0;
}

.fad-home-banner .fad-home-banner-btn {
	display: inline-block;
	background-color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
	color: #fff;
	padding: 10px;
	border-radius: 0;
	text-decoration: none;
	white-space: inherit;
}

.fad-home-banner .fad-home-banner-btn:hover,
.fad-home-banner .fad-home-banner-btn:focus {
	color: #fff;
	text-decoration: underline;
}

@media ( max-width: 767px ) {
	.fad-home-banner {
		padding: 2rem 0;
	}

	.fad-home-banner-text {
		max-width: 100%;
	}
}

/* -----------------------------------------------------------------------------
   10c. THE HERO
   -------------------------------------------------------------------------- */
.fad-hero {
	position: relative;
	overflow: hidden;
	background-color: var( --e-global-color-secondary ); /* #1E4F40, what shows
	   while an 81MB video downloads — legacy has no poster frame either */
}

.fad-hero > .e-con-inner {
	max-width: none;
	padding: 0;
	width: 100%;
}

@media ( min-width: 768px ) {
	.fad-hero {
		height: 565px;
	}
}

/* The video.

   Legacy lays it out at its natural 16:9 — 810px tall at 1440 — inside a 565px
   band whose overflow is hidden, so what you see is the TOP 565px of the frame.
   `object-fit: cover` with the position pinned to the top produces exactly that
   crop without relying on an element overflowing its parent. */
.fad-hero .fad-hero-videowrap {
	width: 100%;
	margin: 0;
}

@media ( min-width: 768px ) {
	.fad-hero .fad-hero-videowrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
	}

	/* Every wrapper between the widget and the video has to carry the height
	   through, or `height: 100%` on the video resolves against `auto` and the
	   video lays out at its natural 810px instead of being cropped to the
	   band. It still LOOKS right when that happens, because the band hides its
	   overflow — right up until a viewport where 16:9 is shorter than 565 and
	   a strip of bare green appears under it. */
	.fad-hero .fad-hero-videowrap .elementor-shortcode,
	.fad-hero .fad-hero-media {
		height: 100%;
	}
}

.fad-hero-media {
	position: relative;
	width: 100%;
	height: 100%;
}

.fad-hero-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

@media ( max-width: 767px ) {
	.fad-hero-video {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* THE SCRIM, and the reason it exists.

   The hero carries white 64px lettering and two white-outlined buttons directly
   over a moving photograph. Live has nothing behind them, and the video runs
   through bright sky and pale building fronts, so the headline is unreadable
   for part of every loop — and unlike a still, a reader cannot wait it out.

   A flat darken across the whole band rather than a gradient: the text sits in
   the middle of the frame, so there is no edge to fade from, and a flat wash
   keeps the photograph's own composition intact.

   0.33 is measured, not chosen. Every second of the 25-second loop was walked
   pixel by pixel under the headline, both buttons and the scroll link; the
   tightest frame is t=19, where the headline reads 4.53:1 against the 3.0 it
   needs, and t=4, where the 16px buttons read 5.22:1 against 4.5. At 0.25 a
   button drops to 4.33 and fails. Lower this and re-run
   pixel-contrast-batch.js across the loop before believing it still passes. */
.fad-hero-scrim {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background-color: rgba( 0, 0, 0, 0.33 );
	pointer-events: none;
}

/* The overlay.

   Absolutely centred on a fixed percentage of the band, which is what live
   does, and NOT centred on the flow — the buttons deliberately overhang the
   block's bottom edge (see below), so a flex centring would land the text
   about 20px high. */
.fad-hero-overlay {
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 100%;
	max-width: none;
	z-index: 2;
	padding: 15px 0;
	text-align: center;
}

.fad-hero-overlay > .e-con-inner {
	max-width: none;
	padding: 0;
	width: 100%;
	--align-items: center;
}

@media ( min-width: 601px ) {
	.fad-hero-overlay {
		top: 34%;
	}
}

@media ( min-width: 769px ) {
	.fad-hero-overlay {
		top: 40%;
	}
}

/* Montserrat 400, not the 600 the SCSS asks for: `.video-title h1` overrides
   the weight on live and the headline is light, not bold. The -30px bottom
   margin and the +38px on the buttons below are a matched pair — together they
   leave an 8px gap and push the pair 23px below the centred block. Reproduced
   rather than tidied into a single margin, because tidying moves the whole
   overlay up by 20px. */
.fad-hero-title.elementor-widget-heading .elementor-heading-title {
	color: #fff;
	font-size: 3rem;
	font-weight: 400;
	line-height: 1.1;
	text-transform: none;
	margin: 0 0 -30px;
}

.fad-hero-title.elementor-widget {
	width: 100%;
	margin-block-end: 0;
}

/* Three sizes, and the breakpoints are live's, not the site's usual ones: 28px
   to 600, 3rem from 601, 4rem from 768. */
@media ( max-width: 600px ) {
	.fad-hero-title.elementor-widget-heading .elementor-heading-title {
		font-size: 28px;
	}
}

@media ( min-width: 768px ) {
	.fad-hero-title.elementor-widget-heading .elementor-heading-title {
		font-size: 4rem;
	}
}

.fad-hero-actions {
	position: relative;
	top: 38px;
	width: 100%;
	column-gap: 20px;
	row-gap: 20px;
	--flex-direction: row;
	--justify-content: center;
	--align-items: center;
	--flex-wrap: wrap;
	--gap: 16px 16px;
}

.fad-hero-actions > .e-con-inner {
	max-width: none;
	padding: 0;
	--flex-direction: row;
	--justify-content: center;
	--align-items: center;
	--flex-wrap: wrap;
	--gap: 16px 16px;
}

/* Three classes deep for the same reason as every other button on this site:
   the kit's global Buttons preset owns `.elementor-widget-button
   .elementor-button` and a two-class rule loses to it. */
.fad-hero-actions .elementor-widget-button .elementor-button,
.fad-hero-actions .elementor-button-wrapper a {
	background: none;
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 0;
	color: #fff;
	padding: 10px 25px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4286;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.3s, border-color 0.3s;
}

/* Legacy hovers to Brand Green #38B449 and keeps the white lettering, at
   2.69:1. The button token is the same green to the eye and carries white at
   4.66:1; this is the site-wide rule, not a decision taken here. */
.fad-hero-actions .elementor-widget-button .elementor-button:hover,
.fad-hero-actions .elementor-widget-button .elementor-button:focus,
.fad-hero-actions .elementor-button-wrapper a:hover,
.fad-hero-actions .elementor-button-wrapper a:focus {
	background-color: var( --fad-button-green );
	border-color: var( --fad-button-green );
	color: #fff;
}

.fad-hero-actions .elementor-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* The play triangle. A 15px glyph inside a 27x16 box, aligned 2px low — the
   same measurements live uses, carried on the label rather than on a nested
   empty span. */
.fad-hero-actions .elementor-button-text::after {
	content: '';
	display: inline-block;
	width: 27px;
	height: 16px;
	position: relative;
	top: 2px;
	background: url( 'images/play-icon.png' ) 95% 50% / 15px no-repeat;
}

@media ( max-width: 600px ) {
	.fad-hero-actions .elementor-widget-button .elementor-button,
	.fad-hero-actions .elementor-button-wrapper a {
		font-size: 0.75rem;
		letter-spacing: 0.2em;
	}
}

/* The pause control. Nothing on live corresponds to it; see inc/home.php for
   why it is here. Bottom right of the band, out of the composition, and only
   revealed once the script that drives it has run. */
.fad-hero .fad-hero-videotoggle {
	position: absolute;
	right: 15px;
	/* The feature cards below rise 24px into the hero band, so 15px put the
	   button under them (Eric 2026-09-25). Clear them with room to spare. */
	bottom: 40px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: rgba( 9, 52, 35, 0.75 );
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 6px 9px;
	text-transform: uppercase;
}

.fad-hero .fad-hero-videotoggle[hidden] {
	display: none;
}

.fad-hero .fad-hero-videotoggle:hover,
.fad-hero .fad-hero-videotoggle:focus-visible {
	background-color: var( --fad-dark-green );
	border-color: #fff;
}

.fad-hero .fad-hero-videotoggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Two bars, becoming a triangle when the video is stopped. */
.fad-hero .fad-hero-videotoggle-icon {
	display: inline-block;
	width: 8px;
	height: 10px;
	border-left: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

/* This selector used to repeat .fad-hero inside itself, so it never matched and
   the icon stayed as pause bars after pausing. */
.fad-hero .fad-hero-videotoggle.is-paused .fad-hero-videotoggle-icon {
	width: 0;
	height: 0;
	border-left: 8px solid currentColor;
	border-right: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

@media ( max-width: 600px ) {
	.fad-hero .fad-hero-videotoggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}
}

/* -----------------------------------------------------------------------------
   10d. THE FEATURE TILES
   -------------------------------------------------------------------------- */
/* The WHOLE block is pulled up over the hero, not just the tile row.

   On live the row's own -64px margin collapses upward through every wrapper
   between it and the page, taking the "scroll to learn more" link with it and
   landing the link on the photograph. Nothing collapses here — an Elementor
   container is flex, and a flex item is a formatting context that a child's
   margin cannot escape — so the pull is stated on the block that has to move.
   Same result, and it no longer depends on four ancestors having no padding. */
.fad-features {
	margin-top: -1rem;
	margin-bottom: 3.125rem;
	position: relative;
	z-index: 10;
}

@media ( min-width: 768px ) {
	.fad-features {
		margin-top: -4rem;
	}
}

/* "scroll to learn more" — hidden below 768 on live, and it sits ON the hero
   photograph, which is why the hero's scrim has to reach the bottom of the
   band and not stop above the tiles. */
.fad-features .fad-features-more {
	display: none;
	height: 40px;
	padding: 5px;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.4;
	text-decoration: none;
}

.fad-features .fad-features-more:hover,
.fad-features .fad-features-more:focus {
	color: #fff;
	text-decoration: underline;
}

@media ( min-width: 768px ) {
	.fad-features .fad-features-more {
		display: block;
	}
}

/* -5px each side: the row bleeds 5px wider than the 1140 column so that the
   tiles' own 5px gutters put the outer tile edges flush with the column. */
.fad-features-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px;
}

@media ( min-width: 768px ) {
	.fad-features-row {
		flex-wrap: nowrap;
	}
}

.fad-feature {
	position: relative;
	width: 100%;
	padding: 0 5px;
	transition: transform 0.4s ease-in-out;
}

@media ( min-width: 768px ) {
	.fad-feature {
		width: 25%;
	}
}

.fad-feature:hover {
	transform: scale( 1.05 );
	z-index: 1;
}

.fad-features .fad-feature-link {
	display: block;
	position: relative;
	height: 240px;
	padding: 2rem 1rem 3.125rem;
	margin-bottom: 0.625rem;
	border-radius: 3px;
	background-image: var( --fad-feature-image, none );
	background-color: #ddd;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 15%;
	color: #fff;
	font-size: 2rem;
	line-height: 1.75rem;
	text-decoration: none;
	text-shadow: 2px 2px 5px #000;
}

/* From 768 the tile stops being a fixed 240 and becomes a 155% aspect box —
   `height` stays in the cascade on live and is simply outrun by the padding
   under border-box, which is stated here rather than relied on. */
@media ( min-width: 768px ) {
	.fad-features .fad-feature-link {
		height: auto;
		padding: 0 0 155%;
		margin: 0;
	}
}

/* THE TILE SCRIM, and why it has to be this strong.

   The four titles are white 32px lettering laid over editor-chosen
   photographs. Measured from real pixels, three of the four sit on very nearly
   pure white — a sunlit window, a white shed, a pale studio backdrop — and come
   out at 1.0:1. That is not "hard to read", it is invisible, and live is
   identical: it has a drop shadow and nothing else, and a drop shadow is not
   contrast.

   White on pure white needs the background pushed to about 40% black before it
   clears the 3:1 large-text bar; there is no gentler arithmetic. So the wash is
   full strength across the top of the tile, where every title sits, and gone by
   two thirds down, which leaves the subject of each photograph untouched. */
.fad-features .fad-feature-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 70%;
	border-radius: 3px 3px 0 0;
	/* The strong part is measured in PIXELS and the fade in per cent, on
	   purpose. The title sits in the same 20-92px band whatever the tile's
	   height, but the tile is 430px tall on a desktop and 240 on a phone — a
	   purely proportional gradient that clears 3:1 on the desktop drops to
	   2.5:1 on the phone, which is what the first version of this did. */
	background-image: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0.5 ) 0,
		rgba( 0, 0, 0, 0.46 ) 110px,
		rgba( 0, 0, 0, 0 ) 100%
	);
	pointer-events: none;
}

.fad-features .fad-feature-link:hover,
.fad-features .fad-feature-link:focus {
	color: #fff;
}

.fad-features .fad-feature-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.fad-feature-title {
	display: block;
}

@media ( min-width: 768px ) {
	/* Absolute against the COLUMN, not the tile — the column carries 5px of
	   padding, so a 20px inset here lands 15px inside the photograph, which is
	   what live measures. Left only, no right: the box shrinks to its text so
	   a long title stays on one line instead of re-wrapping. */
	.fad-feature-title {
		position: absolute;
		top: 1.25rem;
		left: 1.25rem;
	}
}

.fad-features .fad-feature-word {
	display: block;
	color: #fff;
	font-size: 2rem;
	line-height: 1.75rem;
}

.fad-features .fad-feature-bold {
	display: block;
	color: #fff;
	font-size: 2rem;
	font-weight: 600;
	line-height: 2rem;
	margin-top: 5px;
}

/* The bold line's top always sits 25px below the top of the light line, which
   on live comes out of a second absolute box rather than out of the flow. In
   flow the same offset is (25 - the light line's height), which is why this
   margin changes with the type size and goes negative at 1200. */
@media ( min-width: 768px ) {
	.fad-features .fad-feature-word,
	.fad-features .fad-feature-bold {
		font-size: 1.5rem;
		text-shadow: 2px 2px 8px rgba( 0, 0, 0, 0.6 );
	}

	.fad-features .fad-feature-word {
		line-height: 1;
	}

	.fad-features .fad-feature-bold {
		line-height: 2rem;
		margin-top: 1px;
	}
}

@media ( min-width: 1200px ) {
	.fad-features .fad-feature-word,
	.fad-features .fad-feature-bold {
		font-size: 2rem;
	}

	.fad-features .fad-feature-bold {
		line-height: 3rem;
		margin-top: -7px;
	}
}

/* -----------------------------------------------------------------------------
   10e. THE LARGE VIDEO FEATURE
   The same component as CMP: Video Feature on the content pages; only the four
   things the home page does differently are stated here.
   -------------------------------------------------------------------------- */
.fad-home-lg-feature {
	margin-bottom: 3.125rem;
}

/* 1. No 15px bleed. On a content page this panel sits in a Bootstrap row and
      inherits its negative margins; on the home page it is a plain section
      inside the container and measures the full 1140 and no more. */
.cmp-video-feature.fad-home-lg-feature .cmp-video-panel {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: none;
	background-image: var( --fad-lg-image, none );
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 80% 50%;
	padding: 20rem 0 0;
}

@media ( min-width: 768px ) {
	.cmp-video-feature.fad-home-lg-feature .cmp-video-panel {
		padding: 70px 70px 180px;
	}
}

/* 2. The box is full width and square-cornered below 768, where the content
      page's copy keeps its rounded 462. */
.fad-home-lg-feature .cmp-video-box {
	width: 100%;
	max-width: 100%;
	border-radius: 0;
}

@media ( min-width: 768px ) {
	.fad-home-lg-feature .cmp-video-box {
		max-width: 462px;
		border-radius: 3px;
	}
}

/* 3. The mobile insets stay at 36px here; the content page's copy tightens to
      24px, which was measured on that page and is not what the home page
      does. */
@media ( max-width: 767px ) {
	.fad-home-lg-feature .cmp-video-box h2 {
		padding-left: 36px;
	}

	.fad-home-lg-feature .cmp-video-copy p {
		padding: 19px 0 19px 36px;
	}

	.fad-home-lg-feature .cmp-video-bar {
		padding: 10px 36px;
	}
}

/* 4. The play link is a plain anchor rather than a Button widget, because the
      whole feature is rendered from the repeater in PHP. */
.fad-home-lg-feature .cmp-play-row {
	display: flex;
	align-items: center;
	position: relative;
}

/* The icon is a separate span outside the link, so clicking it did nothing
   (Eric 2026-09-25). Stretch the link over the row; the icon lets clicks
   through. Same treatment as the Video Feature component. */
.fad-home-lg-feature .cmp-play-link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.fad-home-lg-feature .cmp-play-icon {
	pointer-events: none;
}

.fad-home-lg-feature .cmp-play-link {
	color: #fff;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}

.fad-home-lg-feature .cmp-play-link:hover,
.fad-home-lg-feature .cmp-play-link:focus {
	color: #fff;
	text-decoration: underline;
}

.fad-home-lg-feature .cmp-play-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.fad-home-lg-feature .cmp-play-icon {
	display: inline-flex;
	align-items: center;
}

.fad-home-lg-feature .cmp-play-row:hover .cmp-play-icon img {
	margin-left: 15px;
}

/* -----------------------------------------------------------------------------
   10f. THE PORTRAITS CAROUSEL
   -----------------------------------------------------------------------------
   Owl Carousel, rebuilt as a native scroller. The card widths reproduce Owl's
   own arithmetic: (track - peek*2 - gaps) / cards, which is what a flex basis
   of calc((100% - gaps) / cards) computes to inside a track carrying the peek
   as padding. Verified against live at all four widths.
   -------------------------------------------------------------------------- */
.fad-portraits {
	position: relative;
	max-width: 1500px;
	margin: 0 auto 4.375rem;
}

.fad-portraits-head {
	max-width: 1170px;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

.fad-portraits-head h2 {
	color: #333;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 10px;
}

.fad-portraits-stage {
	position: relative;
}

.fad-portraits-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 26px;
	/* The scrollbar is hidden because the arrows, the swipe and the keyboard all
	   move this and a permanent bar under the cards is not in the design. It
	   remains a real scroll container, which is what makes the keyboard and
	   swipe work at all. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fad-portraits-viewport::-webkit-scrollbar {
	display: none;
}

.fad-portraits-viewport:focus-visible {
	outline: 2px solid var( --e-global-color-secondary );
	outline-offset: 2px;
}

.fad-portraits-track {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0 26px;
}

.fad-portrait-item {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

@media ( min-width: 768px ) {
	.fad-portraits-viewport {
		scroll-padding-left: 70px;
	}

	.fad-portraits-track {
		padding: 0 70px;
	}

	.fad-portrait-item {
		flex: 0 0 calc( ( 100% - 20px ) / 3 );
	}
}

@media ( min-width: 1200px ) {
	.fad-portrait-item {
		flex: 0 0 calc( ( 100% - 30px ) / 4 );
	}
}

.fad-portraits .fad-portrait-link {
	position: relative;
	display: block;
	height: 100%;
	text-decoration: none;
}

.fad-portraits .fad-portrait-link:hover,
.fad-portraits .fad-portrait-link:focus {
	text-decoration: none;
}

.fad-portraits .fad-portrait-link:focus-visible {
	outline: 3px solid var( --e-global-color-secondary );
	outline-offset: 3px;
}

.fad-portrait {
	position: relative;
	overflow: hidden;
	min-height: 220px;
	height: 100%;
	margin: 0;
	padding: 1rem;
	border-radius: 3px;
	background-color: #f0f0f0;
	background-image: var( --fad-portrait-image, none );
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	transition: background-position 0.4s ease-in-out;
}

@media ( min-width: 768px ) {
	.fad-portrait {
		height: 330px;
	}
}

/* THE RESTING WASH.

   Live has none: the name is white 32px lettering laid straight over the
   photograph with a 2px text shadow, and on the pale headshots it is close to
   invisible. A shadow is not contrast — it is not measurable and no checker
   counts it — so the name and the "since" line sit on a soft wash, the same
   treatment the page-header band already uses. The hover gradient lies on top
   of it, unchanged.

   IT IS DRAWN ON THE TEXT BLOCK, NOT AS A FIXED BAND ON THE CARD, and that is
   the whole trick. A band sized in pixels or per cent has to guess how far down
   the text reaches, and the text moves: "Ruth, Brian, & Amber Wilkins" is one
   line on a wide card and four on the 203px card at 768px, with a three-line
   "since" under it. Every fixed band cleared twelve portraits and failed that
   one. Anchored to the block, the wash is exactly as tall as whatever is in it.

   The negative margins pull it out to the card's edges, cancelling the figure's
   own 1rem padding, so it reads as part of the photograph rather than as a
   label stuck on top of it. */
.fad-portrait-caption > .fad-portrait-info {
	position: relative;
	margin: -1rem -1rem 0;
	padding: 1rem 1rem 36px;
	background-image: linear-gradient(
		to bottom,
		rgba( 9, 52, 35, 0.72 ) 0,
		rgba( 9, 52, 35, 0.66 ) calc( 100% - 36px ),
		rgba( 9, 52, 35, 0 ) 100%
	);
}

.fad-portrait-scrim {
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 50%;
	z-index: 2;
	opacity: 0;
	background-image: linear-gradient(
		to top,
		rgba( 9, 52, 35, 0 ) 0%,
		rgba( 9, 52, 35, 0.6 ) 20%,
		rgba( 9, 52, 35, 0.8 ) 100%
	);
	transition: opacity 0.4s ease-in-out, height 0.4s ease-in-out, top 0.4s ease-in-out;
}

/* font-style: normal is not decoration. Hello Elementor's reset italicises
   every figcaption on the site — a sensible default for a photo credit and
   wrong for a name, which is what this one is. Every portrait's name and "since"
   line came out in italics until this was stated. */
.fad-portrait-caption {
	position: relative;
	z-index: 3;
	height: 100%;
	display: block;
	font-style: normal;
}

.fad-portrait-info {
	display: block;
	opacity: 1;
	text-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5 );
	transition: opacity 0.4s ease-in-out;
}

.fad-portraits .fad-portrait-name {
	display: block;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 5px;
}

.fad-portraits .fad-portrait-since {
	display: block;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4286;
	text-transform: uppercase;
}

.fad-portrait-hover {
	position: absolute;
	top: -120px;
	left: 0;
	right: 0;
	display: block;
	opacity: 0;
	transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out;
}

.fad-portraits .fad-portrait-quote {
	display: block;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.5rem;
	margin-bottom: 5px;
	padding-right: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var( --fad-mint );
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

.fad-portrait-quote::before {
	content: '\201C';
}

.fad-portrait-quote::after {
	content: '\201D';
}

.fad-portraits .fad-portrait-more {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

.fad-portrait-more::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 12px;
	margin-left: 10px;
	background: url( 'images/link-caret.png' ) center center / cover no-repeat;
}

/* The hover state, from 992 up exactly as live gates it — below that there is
   no pointer to hover with and the quote would flash on a tap. */
@media ( min-width: 992px ) {
	.fad-portraits .fad-portrait-link:hover .fad-portrait,
	.fad-portraits .fad-portrait-link:focus-visible .fad-portrait {
		background-position: 50% 100%;
	}

	/* The direct child only. The hover panel repeats the same markup inside
	   itself, and a descendant selector would fade out the copy it is meant to
	   be fading in. */
	.fad-portraits .fad-portrait-link:hover .fad-portrait-caption > .fad-portrait-info,
	.fad-portraits .fad-portrait-link:focus-visible .fad-portrait-caption > .fad-portrait-info {
		opacity: 0;
	}

	.fad-portraits .fad-portrait-link:hover .fad-portrait-hover,
	.fad-portraits .fad-portrait-link:focus-visible .fad-portrait-hover {
		opacity: 1;
		top: 0;
	}

	.fad-portraits .fad-portrait-link:hover .fad-portrait-quote,
	.fad-portraits .fad-portrait-link:hover .fad-portrait-more,
	.fad-portraits .fad-portrait-link:focus-visible .fad-portrait-quote,
	.fad-portraits .fad-portrait-link:focus-visible .fad-portrait-more {
		opacity: 1;
	}

	.fad-portraits .fad-portrait-link:hover .fad-portrait-scrim,
	.fad-portraits .fad-portrait-link:focus-visible .fad-portrait-scrim {
		top: 0;
		height: 120%;
		opacity: 1;
	}
}

/* The arrows. 51x76 at 44% of the CARDS' height, which is where Owl put them;
   real buttons with names, where live has unlabelled divs.

   CONTRAST: live fills these with the mint at 50% opacity, so the white
   triangle can land on almost any colour depending on the photograph behind.
   Solid mint-dark carries the glyph at a measurable ratio and reads as the same
   chip. */
.fad-portraits .fad-portraits-nav {
	position: absolute;
	/* 44% of the cards' height, and NOT centred on it. Owl puts a zero-height
	   nav wrapper at 44% and hangs the buttons off its top edge, so the chip's
	   TOP is the 44% mark — measured at 1956 on live, which is 17px below the
	   card's centre, not on it. */
	top: 44%;
	z-index: 5;
	color: #fff;
	width: 51px;
	height: 76px;
	padding: 20px 10px;
	border: 0;
	background-color: var( --fad-mint-dark );
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.fad-portraits .fad-portraits-nav[hidden] {
	display: none;
}

.fad-portraits .fad-portraits-nav:hover,
.fad-portraits .fad-portraits-nav:focus-visible {
	background-color: var( --fad-dark-green );
}

.fad-portraits .fad-portraits-nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.fad-portraits .fad-portraits-prev {
	left: 0;
}

.fad-portraits .fad-portraits-next {
	right: 0;
}

.fad-portraits-arrow {
	display: block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px 16px;
}

.fad-portraits .fad-portraits-prev .fad-portraits-arrow {
	margin: 0 10px 0 5px;
	background-image: url( 'images/triangle-left.png' );
}

.fad-portraits .fad-portraits-next .fad-portraits-arrow {
	margin: 0 5px 0 10px;
	background-image: url( 'images/triangle-right.png' );
}

/* -----------------------------------------------------------------------------
   10g. REDUCED MOTION
   Everything on this page that moves on its own or on hover, stilled. The video
   is handled in js/home.js, which pauses it rather than hiding it.
   -------------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.fad-feature,
	.fad-portrait,
	.fad-portrait-scrim,
	.fad-portrait-info,
	.fad-portrait-hover,
	.fad-portrait-quote,
	.fad-portrait-more,
	.fad-portraits .fad-portraits-nav,
	.fad-home-lg-feature .cmp-play-icon img {
		transition: none;
	}

	.fad-feature:hover {
		transform: none;
	}

	.fad-portraits-viewport {
		scroll-behavior: auto;
	}
}

/* =============================================================================
   11. MOBILE HEADER (below 992px)
   -----------------------------------------------------------------------------
   The narrow-width header: one green bar with the logo and a Menu control, and
   one panel behind it holding BOTH menus, the phone number, the text-size
   control, the search box and the "Request more info" button.

   Until this section existed the header had no narrow layout at all. Elementor's
   Nav Menu widget brings its own hamburger per widget, so the two header menus
   produced two unlabelled toggles stacked on top of each other and a header
   315px tall at 768 and 338px at 375, on every page of the site. See
   inc/mobile-nav.php for why the panel is hand-built rather than configured.

   MEASURED on forestduke.org at 375px, closed and open. Confirmed at 768.
     bar          375 x 50.84, background #1E4F40
     logo box     absolute, 150 x 120 at the container's left edge, the
                  single-ribbon graphic behind it at centre bottom
     logo image   max 174 wide, width calc(100% - 32px) -> 118, margin 10px auto 0
     Menu control padding 13px 0, white 1rem label, three 22x2 #38B449 bars
                  4px apart that fold into an X
     panel        padding 0 15px, centred text
     primary      1.25rem, padding-top 60, 1px rgba(56,180,73,.6) rule on top,
                  margin 0 -15px
     primary item 500 weight, padding 10px 7px 2px, margin 5px auto,
                  1px rgba(56,180,73,.4) rule under each
     submenu      padding 15px 0, links 0.875rem/300 padded 7px 25px
     utility      80% wide, margin 30px auto 60px, items 1rem/400
     text sizer   padding 20px 5px 10px, 1px #38B449 rule on top, margin 30px auto 5px
     search       full width, 34 tall, #1E4F40 on a 1px #38B449 border
     button       full width, #297D37

   THE BREAKPOINT IS 992, NOT ONE OF ELEMENTOR'S. Production breaks there and the
   desktop header genuinely needs the room: at 991 the primary menu's seven
   24px items and the centred logo do not fit on one line. Every rule here is
   therefore hand-written rather than set through a widget's responsive controls.
   ========================================================================== */

/* The bar and the panel do not exist above the breakpoint, and the two desktop
   rows do not exist below it. Both halves are stated explicitly rather than
   relying on one to be the other's default, because the header template renders
   all of it on every page. */

.fad-header .fad-mobile-bar,
.fad-header .fad-mobile-nav {
	display: none;
}

@media (max-width: 991.98px) {

	/* ---- the bar --------------------------------------------------------- */

	.fad-header .fad-utility,
	.fad-header .fad-primary {
		display: none;
	}

	/* The sunburst behind the open panel. Production's stylesheet says
	   `background-size: 0px` in one rule and 100% in a later one, so it is easy
	   to read the first and conclude the graphic is switched off — it is not,
	   and it is plainly visible on a phone. Two files: the full mark up to 768
	   and a cropped version below it. */
	.fad-header {
		background-image: url('images/sunburst-green-mobile-cutoff.png');
		background-size: 100%;
		background-position: 50% 100%;
		background-repeat: no-repeat;
	}

	.fad-header .fad-mobile-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		min-height: 50.84px;
		padding: 0;
	}

	/* The logo keeps hanging out of the bar, as it does on production: the box
	   is 120 tall inside a 50.84 bar, so the ribbon graphic and the lower part
	   of the logo overlap whatever is beneath. */
	.fad-header .fad-header-logo {
		position: absolute;
		left: 15px;
		top: 0;
		transform: none;
		width: 100%;
		max-width: 150px;
		height: 120px;
		padding: 0;
		text-align: center;
		background-image: url('images/logo-ribbon-single.svg');
		background-position: 50% 100%;
		background-repeat: no-repeat;
		background-size: auto;
		z-index: 30;
	}

	.fad-header .fad-header-logo img {
		max-width: 174px;
		width: calc(100% - 32px);
		height: auto;
		margin: 10px auto 0;
	}

	/* Elementor gives every widget in a container `width: 100%`. Left alone the
	   control's hit area would span the whole bar, so a tap anywhere in the
	   empty middle would open the menu. */
	.fad-header .fad-mobile-bar > .elementor-element {
		width: auto;
		margin-left: auto;
	}

	/* ---- the Menu control ------------------------------------------------ */

	/* Two classes deep throughout. The Elementor kit styles bare `button` at
	   0,1,1, which beats any single-class rule — the same trap that gave the
	   home page's carousel arrows 20px type and 5px padding. */
	.fad-header .fad-mnav-trigger {
		display: block;
		margin: 0;
		padding: 13px 0;
		background: none;
		border: 1px solid transparent;
		border-radius: 4px;
		color: #fff;
		font-family: inherit;
		font-size: 1rem;
		line-height: 1.4286;
		text-align: right;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.fad-header .fad-mnav-trigger:hover,
	.fad-header .fad-mnav-trigger:focus {
		background: none;
	}

	.fad-header .fad-mnav-trigger:focus-visible {
		outline: 2px solid var(--e-global-color-primary);
		outline-offset: 2px;
	}

	.fad-header .fad-mnav-trigger .fad-mnav-trigger-text {
		display: inline-block;
		color: #fff;
		margin-right: 5px;
	}

	.fad-header .fad-mnav-trigger .fad-mnav-bars {
		display: inline-block;
		height: 12px;
		transition: height 0.2s ease-in;
	}

	.fad-header .fad-mnav-trigger .fad-mnav-bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 1px;
		/* 3.47:1 against the header green, which clears the 3:1 that a control's
		   own shape has to meet. */
		background-color: var(--e-global-color-primary);
		transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
	}

	.fad-header .fad-mnav-trigger .fad-mnav-bar + .fad-mnav-bar {
		margin-top: 4px;
	}

	/* Open: the middle bar goes, the outer two cross. The two transform origins
	   are production's, and they are deliberately off-centre — that is what puts
	   the X's crossing point where the middle bar was. */
	.fad-header .fad-mnav-trigger--open .fad-mnav-bars {
		height: 5px;
	}

	.fad-header .fad-mnav-trigger--open .fad-mnav-bar--mid {
		opacity: 0;
	}

	.fad-header .fad-mnav-trigger--open .fad-mnav-bar--top {
		transform: rotate(-45deg);
		transform-origin: 11px -1px;
	}

	.fad-header .fad-mnav-trigger--open .fad-mnav-bar--bot {
		transform: rotate(45deg);
		transform-origin: 27px -3px;
	}

	/* ---- the panel ------------------------------------------------------- */

	.fad-header .fad-mobile-nav:not([hidden]) {
		display: block;
	}

	.fad-header .fad-mobile-nav {
		position: relative;
		width: 100%;
		padding: 0 15px;
		text-align: center;
	}

	/* ---- primary menu ---------------------------------------------------- */

	.fad-header .fad-mnav-primary {
		font-size: 1.25rem;
		padding-top: 60px;
		border-top: 1px solid rgba(56, 180, 73, 0.6);
		margin: 0 -15px;
	}

	.fad-header .fad-mnav-contact {
		display: block;
		color: #fff;
		font-size: 0.85rem;
		font-weight: 300;
		line-height: 1.4286;
		margin: 10px 0 15px;
	}

	.fad-header .fad-mnav-contact .fad-mnav-contact-icon {
		display: inline;
		margin: -4px 5px 0;
		vertical-align: middle;
	}

	.fad-header .fad-mnav-contact a {
		color: #fff;
		text-decoration: underline;
	}

	.fad-header .fad-mnav-primary .fad-mnav {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* `margin: 5px auto` in a flex column is what makes each item shrink to its
	   own text width and centre — production's look, and it is the auto margins
	   doing it, not a width. */
	.fad-header .fad-mnav-primary > .fad-mnav > .fad-mnav-item {
		display: block;
		margin: 5px auto;
		padding: 0;
		border-bottom: 1px solid rgba(56, 180, 73, 0.4);
		text-align: center;
	}

	/* An open item gives its submenu the full width of the column. Production
	   ends up 12.75px narrower on each side at 375 through a shrink-to-fit that
	   does not survive being restated as a rule; the text is centred either way
	   and this gives a phone a wider row to hit. */
	.fad-header .fad-mnav-primary > .fad-mnav > .fad-mnav-item.fad-mnav-open {
		width: 100%;
	}

	/* ---- utility menu ---------------------------------------------------- */

	.fad-header .fad-mnav-utility {
		width: 80%;
		margin: 30px auto 60px;
		font-size: 1rem;
	}

	.fad-header .fad-mnav-utility .fad-mnav {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.fad-header .fad-mnav-utility > .fad-mnav > .fad-mnav-item {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* ---- items, in both menus -------------------------------------------- */

	.fad-header .fad-mnav-link {
		display: inline-block;
		margin: 0;
		padding: 10px 7px 2px;
		background: none;
		border: none;
		border-radius: 0;
		color: #fff;
		font-family: inherit;
		font-size: inherit;
		font-weight: 400;
		line-height: 1.4286;
		letter-spacing: normal;
		text-align: center;
		text-transform: none;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.fad-header .fad-mnav-primary .fad-mnav-link {
		font-weight: 500;
	}

	/* No colour change on hover. Brand green is 3.47:1 on the header green,
	   which a 20px link at weight 500 does not clear — it is under both of
	   WCAG's large-text thresholds. An underline says the same thing and costs
	   no contrast. */
	.fad-header .fad-mnav-link:hover,
	.fad-header .fad-mnav-link:focus-visible {
		background: none;
		color: #fff;
		text-decoration: underline;
	}

	.fad-header .fad-mnav-link:focus-visible,
	.fad-header .fad-mnav-subtoggle:focus-visible {
		outline: 2px solid var(--e-global-color-primary);
		outline-offset: 2px;
	}

	/* The page you are on, filled the way production fills it — but in the
	   project's button green rather than brand green, which carries white at
	   2.69:1. Same rule the desktop dropdown already uses. */
	.fad-header .fad-mnav-link[aria-current='page'] {
		background-color: var(--fad-button-green);
		color: #fff;
	}

	/* ---- submenus -------------------------------------------------------- */

	.fad-header .fad-mnav-caret {
		display: inline-block;
		width: 18px;
		height: 10px;
		margin: 0 0 0 7px;
		background: url('images/nav-down.png') no-repeat;
		vertical-align: middle;
		transition: transform 0.1s ease-in;
	}

	.fad-header .fad-mnav-utility .fad-mnav-caret {
		background-size: 16px;
	}

	.fad-header .fad-mnav-open .fad-mnav-caret {
		transform: rotate(-180deg);
		margin-top: -5px;
	}

	.fad-header .fad-mnav-subtoggle {
		display: inline-block;
		margin: 0;
		padding: 10px 7px 2px;
		background: none;
		border: none;
		color: #fff;
		line-height: 1.4286;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.fad-header .fad-mnav-sub {
		margin: 0;
		padding: 15px 0;
		width: 100%;
		list-style: none;
		text-align: center;
	}

	.fad-header .fad-mnav-sub .fad-mnav-link {
		display: block;
		padding: 7px 25px;
		font-size: 0.875rem;
		font-weight: 300;
	}

	/* ---- the three non-link items in the utility menu -------------------- */

	.fad-header .fad-mnav-extra {
		display: block;
		list-style: none;
	}

	.fad-header .fad-mnav-sizer .fad-text-resizer {
		display: block;
		padding: 20px 5px 10px;
		border-top: 1px solid var(--e-global-color-primary);
		margin: 30px auto 5px;
		text-align: center;
	}

	/* Production's stylesheet asks for this label at narrow widths and its markup
	   never had one, so the rule has never done anything. Here there is one: it
	   is three letter A's otherwise, which is not a label. */
	.fad-header .fad-mnav-sizer .fad-text-resizer-label {
		display: inline;
		color: #fff;
		margin-right: 10px;
		font-size: 1rem;
	}

	/* The form's <label> wraps the field and is inline-block, so a field at
	   width:100% is 100% of the LABEL, which is only as wide as its text. The
	   field came out 188 wide inside a 252 column until the label was a block. */
	.fad-header .fad-mnav-searchitem .fad-header-search label {
		display: block;
		width: 100%;
	}

	.fad-header .fad-mnav-searchitem .fad-header-search input[type='search'] {
		display: block;
		width: 100%;
		min-height: 0;
		height: 34px;
		padding: 8px 11px;
		background-color: var(--e-global-color-secondary);
		border: 1px solid var(--e-global-color-primary);
		border-radius: 4px;
		color: #fff;
		font-size: 0.85rem;
	}

	.fad-header .fad-mnav-searchitem .fad-header-search input[type='search']:focus {
		background-color: #173D31;
	}

	.fad-header .fad-mnav-searchitem .fad-header-search button {
		top: 50%;
		transform: translateY(-50%);
		height: 22px;
		width: 34px;
		border-left: 1px solid var(--e-global-color-primary);
		border-radius: 0;
	}

	/* Four classes deep, matching the `margin: 0` on every utility item above —
	   a two-class rule loses to it and the button ends up flush against the
	   search box. */
	.fad-header .fad-mnav-utility > .fad-mnav > .fad-mnav-buttonitem {
		margin-top: 15px;
	}

	.fad-header .fad-mnav-buttonitem .fad-mnav-link {
		display: block;
		width: 100%;
		background-color: #297D37;
		border-radius: 0;
	}

	.fad-header .fad-mnav-buttonitem .fad-mnav-link:hover,
	.fad-header .fad-mnav-buttonitem .fad-mnav-link:focus-visible {
		background-color: var(--fad-button-green);
		text-decoration: none;
	}
}

/* Nothing below the breakpoint survives above it. Stated with !important because
   the panel's own `display: block` is applied through :not([hidden]) and a
   panel left open at 375 must not reappear when the window is widened faster
   than the script can shut it. */
@media (min-width: 769px) and (max-width: 991.98px) {

	.fad-header {
		background-image: url('images/sunburst-green-mobile.png');
	}
}

@media (min-width: 992px) {

	.fad-header .fad-mobile-bar,
	.fad-header .fad-mobile-nav {
		display: none !important;
	}
}

/* The desktop utility row's hover colour, corrected.
   It was brand green, which is 3.47:1 on the header green — fine for the 24px
   primary row, which counts as large text and needs 3:1, and a failure on this
   row's 13.6px links, which need 4.5:1. White plus an underline is the same
   affordance at 9.34:1. */
.fad-header .fad-utility .elementor-nav-menu > li > a.elementor-item:hover,
.fad-header .fad-utility .elementor-nav-menu > li > a.elementor-item:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* =============================================================================
   12. SEARCH RESULTS AND PAGE NOT FOUND
   -----------------------------------------------------------------------------
   The two views that are not a page. Both sit on the white "blank header"
   spacer the single post already uses, then one centred column.

   MEASURED on forestduke.org/?s=garden and on a 404 at 1440px:
     title block   h1 36px/500, line-height 1.1, margin-bottom 10;
                   the block itself margin-bottom 2rem, 3rem from 768
     count line    1rem, under the title
     result        margin-bottom 25, capped at 75% of the column from 992
     result title  32px/300, line-height 1.1, margin-bottom 10, link #1E4F40
     excerpt       18px, line-height 1.5, #202020, margin-bottom 20
     notice        #8A6D3B on #FCF8E3, 1px #FAEBCC, padding 15, radius 4
     pagination    padding-top 1.25rem, current page marked

   The notice colours are Bootstrap's yellow warning box, which is what
   production shows and which measures 4.54:1 — a pass, so they are kept rather
   than restyled into the site palette.

   The search BUTTON is not kept: production's is brand green with white text at
   2.69:1. It uses the project's button green like every other button here.
   ========================================================================== */

.fad-search-page {
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}

/* The heading sat 40px under the header and read as jammed against it (Eric,
   8/31). Legacy search has no header band at all — it is a plain `.container`
   inside `.content`, and `.content` carries `padding: $content-tb-padding 0`
   (6rem) from the float breakpoint up, which is where production's air comes
   from. Same 6rem the residences features column needed, same source. Mobile
   keeps 2.5rem rather than legacy's 0: with no header band to separate them,
   zero puts the title hard against the nav. */
@media ( min-width: 992px ) {
	.fad-search-page {
		padding-top: 6rem;
	}
}

/* The same 1140 column the rest of the site uses. */
.fad-search-page > .e-con-inner {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

/* ---- the title block ------------------------------------------------------ */

.fad-search-page .fad-search-title.elementor-widget-heading .elementor-heading-title {
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 1.1;
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
}

.fad-search-page .fad-search-title.elementor-widget {
	margin-block-end: 0.625rem;
}

.fad-search-count {
	font-size: 1rem;
	color: var( --e-global-color-text );
	margin: 0 0 2rem;
}

@media ( min-width: 768px ) {
	.fad-search-count {
		margin-bottom: 3rem;
	}
}

/* No count line on the 404, so the gap has to come from the title block there. */
.fad-search-page .fad-404-body-wrap {
	margin-top: 2rem;
}

@media ( min-width: 768px ) {
	.fad-search-page .fad-404-body-wrap {
		margin-top: 3rem;
	}
}

/* ---- one result ----------------------------------------------------------- */

.fad-search-result {
	max-width: 100%;
	width: 100%;
	margin-bottom: 25px;
}

@media ( min-width: 992px ) {
	.fad-search-result {
		max-width: 75%;
	}
}

.fad-search-result-title {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 0.625rem;
}

/* Two classes deep. The kit styles bare `a` at 0,1,1 and would otherwise take
   every result title to brand green. */
.fad-search-result .fad-search-result-title a {
	color: var( --e-global-color-secondary ); /* 9.34:1 on white */
	text-decoration: none;
}

.fad-search-result .fad-search-result-title a:hover,
.fad-search-result .fad-search-result-title a:focus-visible {
	color: var( --e-global-color-faddarkgreen );
	text-decoration: underline;
}

.fad-search-result-excerpt p {
	font-size: 1.125rem;
	line-height: 1.5;
	color: var( --e-global-color-text );
	margin: 0 0 1.25rem;
}

.fad-search-result-excerpt p:last-child {
	margin-bottom: 0;
}

/* ---- the empty state ------------------------------------------------------ */

.fad-notice {
	background-color: #FCF8E3;
	border: 1px solid #FAEBCC;
	border-radius: 4px;
	color: #8A6D3B; /* 4.54:1 on the panel */
	padding: 15px;
	margin: 0 0 20px;
}

/* ---- the search box on the empty views ------------------------------------ */

.fad-search-box {
	max-width: 460px;
}

.fad-search-box .fad-search-box-label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.5rem;
	color: var( --e-global-color-text );
}

.fad-search-box .fad-search-box-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.fad-search-box .fad-search-box-field {
	flex: 1 1 12rem;
	min-width: 0;
	height: 40px;
	padding: 6px 12px;
	font-size: 1rem;
	color: var( --e-global-color-text );
	background-color: #fff;
	/* #767676 is the lightest grey that still reaches 3:1 on white, which is
	   what a form control's own outline has to meet. Production's #CCC is
	   1.6:1 — the field's edge is not reliably visible at all. */
	border: 1px solid #767676;
	border-radius: 4px;
}

.fad-search-box .fad-search-box-field:focus-visible {
	outline: 2px solid var( --fad-button-green );
	outline-offset: 2px;
}

.fad-search-box .fad-search-box-submit {
	flex: 0 0 auto;
	background-color: var( --fad-button-green ); /* white on it is 4.66:1 */
	border: none;
	border-radius: 3px;
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	padding: 8px 30px;
	cursor: pointer;
}

.fad-search-box .fad-search-box-submit:hover,
.fad-search-box .fad-search-box-submit:focus-visible {
	background-color: var( --fad-button-green-hover );
	color: #fff;
}

.fad-search-box .fad-search-box-submit:focus-visible {
	outline: 2px solid var( --e-global-color-faddarkgreen );
	outline-offset: 2px;
}

/* ---- pagination -----------------------------------------------------------
   Same treatment as the blog and events listings: the current page is marked by
   weight AND a rule, never by colour alone.
   -------------------------------------------------------------------------- */

.fad-search-pagination {
	padding-top: 1.25rem;
	clear: both;
}

.fad-search-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fad-search-pagination .page-numbers {
	color: var( --e-global-color-accent );
	font-size: 1.125rem;
	font-weight: 500;
	text-decoration: none;
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
}

.fad-search-pagination a.page-numbers:hover,
.fad-search-pagination a.page-numbers:focus-visible {
	color: var( --e-global-color-secondary );
	background-color: var( --e-global-color-fadlightgray );
}

.fad-search-pagination .page-numbers.current {
	color: var( --e-global-color-faddarkgreen );
	font-weight: 700;
	border-bottom: 2px solid var( --e-global-color-faddategreen );
	border-radius: 0;
}

.fad-search-pagination a.page-numbers:focus-visible {
	outline: 2px solid var( --fad-button-green );
	outline-offset: 2px;
}

/* =============================================================================
   2l. CALL TO ACTION, BASIC (.cmp-cta-basic)
   -----------------------------------------------------------------------------
   The other arm of the legacy CTA component. Where the expanded one is a boxed
   panel inside the content column, this one is a full-bleed band: the colour
   runs edge to edge and only the copy is held to the 1170 column.

   MEASURED on forestduke.org/careers-2/ at 1440:
     band       1440 x 113, padding 56px 0, background #259A67
     container  1170 at x135, padding 0 15px
     copy       1.5rem #093423; 2rem and 60% wide from 768px up
     heading    2.5rem / 700 / uppercase / white; 3rem from 768px
                display: table-caption, so the box hugs the wrapped text

   CONTRAST. #093423 on #259A67 is 3.86:1 and white on it is 3.56:1. Both clear
   the 3:1 that large text needs and neither is normal-size text here — the copy
   is 24px and the heading 40px. The one thing that does not survive on its own
   is a LINK inside the copy: white against the copy's dark green is a colour
   difference only, so links carry an underline. Legacy relies on colour alone.

   Every rule is written two classes deep. The Elementor kit styles bare `a` and
   `p` at 0,1,1 and a single-class rule loses to it.
   ========================================================================== */

.cmp-cta-basic .cmp-cta-basic-text p {
	color: #093423;
	font-size: 1.5rem;
	line-height: 1.31;
	margin-bottom: 1rem;
	width: 100%;
}

.cmp-cta-basic .cmp-cta-basic-text p:last-child {
	margin-bottom: 0;
}

.cmp-cta-basic .cmp-cta-basic-text h2 {
	color: #fff;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	/* Legacy uses table-caption so the heading box shrinks to the wrapped text
	   rather than filling the column. Same trick as the expanded CTA. */
	display: table-caption;
	margin: 0 0 10px;
}

/* Links: white, and underlined. See the contrast note above. */
.cmp-cta-basic .cmp-cta-basic-text a {
	color: #fff;
	text-decoration: underline;
}

.cmp-cta-basic .cmp-cta-basic-text a:hover,
.cmp-cta-basic .cmp-cta-basic-text a:focus-visible {
	color: #fff;
	text-decoration: none;
}

.cmp-cta-basic .cmp-cta-basic-text a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media ( min-width: 768px ) {
	.cmp-cta-basic .cmp-cta-basic-text p {
		font-size: 2rem;
		width: 60%;
	}

	.cmp-cta-basic .cmp-cta-basic-text h2 {
		font-size: 3rem;
	}
}

/* The button sits under the copy, left aligned, at its own width. Elementor
   gives every widget in a container 100% and its own rule is four classes deep,
   so this needs five to win. */
.cmp-cta-basic .cmp-cta-basic-inner .cmp-cta-basic-button.elementor-widget-button {
	width: auto;
	max-width: none;
	align-self: flex-start;
	margin-top: 1rem;
}

/* =============================================================================
   2m. BUTTON BELOW IMAGE (.cmp-image-button)
   -----------------------------------------------------------------------------
   The "Enable Button Below Image" option on the Text w/ Image component, used on
   five pages: a virtual tour, a video, an application form and two enquiry
   pages.

   Legacy markup is `<a href="#" target="_blank" class="btn btn-primary btn-block"
   style="width:auto" onclick="window.open(url,'popUpWindow','height=500,
   width=800,...')">`, inside a `<center>`, with a `<br>` above it.

   TWO DELIBERATE DIFFERENCES, both in the markup rather than the design:

   1. The link goes to the real destination instead of `#`. As written, the
      legacy button does nothing at all without scripting, and nothing useful for
      anyone who middle-clicks it or opens it in a new tab on purpose.
   2. No popup window. An 800x500 chromeless window is the wrong container for a
      Matterport tour and for a YouTube video, and most browsers now open it as a
      tab regardless. External destinations open in a new tab, which is what the
      legacy `target="_blank"` asks for; internal ones stay in the same tab,
      which is this site's convention everywhere else.

   The button itself is unchanged: same colour, same size, same position under
   the photograph, centred in its column.
   ========================================================================== */

/* Five classes. Elementor caps widget width with `.elementor.elementor .e-con >
   .elementor-widget { max-width: 100% }` — the class written twice on purpose —
   and a three-class rule loses to it silently. */
.cmp .cmp-image-button.elementor-widget-button {
	width: 100%;
	margin-top: 1rem;
	text-align: center;
}

.cmp .cmp-image-button.elementor-widget-button .elementor-button {
	background-color: var( --fad-button-green ); /* white on it is 4.66:1 */
	border: none;
	border-radius: 3px;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.4286;
	padding: 5px 30px;
}

.cmp .cmp-image-button.elementor-widget-button .elementor-button:hover,
.cmp .cmp-image-button.elementor-widget-button .elementor-button:focus-visible {
	background-color: var( --fad-button-green-hover );
	color: #fff;
}

.cmp .cmp-image-button.elementor-widget-button .elementor-button:focus-visible {
	outline: 2px solid var( --e-global-color-faddarkgreen );
	outline-offset: 2px;
}

/* On the full-width text component there is no image column to sit under, so
   the legacy `<center>` is the whole measure. */
.cmp .cmp-image-button-centred.elementor-widget-button {
	margin-top: 1.5rem;
}

/* =============================================================================
   2n. CONVERTED PAGE CONTENT — FITTING THE COMPONENTS TO THE PAGE SHELL
   -----------------------------------------------------------------------------
   The CMP components were built to sit in a FULL-WIDTH parent and supply their
   own 15px gutter (`mobile-margins`), because that is how the Phase 3 test pages
   were laid out. The Page theme template puts them somewhere else: inside
   `.fad-page-content`, a BOXED container whose inner is already 1140 wide with
   the gutter taken out.

   Left alone the gutter is charged twice. Measured on /our-campus/ at 1440:
   the text column came out 729.7 wide starting at x165, where production has it
   750 wide starting at x150 — every component on every converted page 15px
   narrower on each side, and every wrapped paragraph re-flowed because of it.

   Zeroing the component's own gutter inside this container is the whole fix. The
   inner boxed container then resolves to 1140 and each component's percentages
   land on production's numbers exactly:

       text column   65.79% of 1140 = 750     production 750 at x150
       image column  31.58% of 1140 = 360     production 360 at x930
       video panel   1140 + 30 bleed = 1170   production 1170 at x135

   The gutter is not lost: `.fad-page-content` supplies it once, which is where
   production's `.container` supplies it too.
   ========================================================================== */

.fad-page-content .cmp.mobile-margins {
	padding-left: 0;
	padding-right: 0;
}

/* =============================================================================
   FULL BLEED FOR THE BASIC CALL TO ACTION
   -----------------------------------------------------------------------------
   Production's basic CTA band is the one component that runs edge to edge: its
   markup sits OUTSIDE `.container`. Inside a boxed page shell the only way out
   is a viewport-width negative margin.

   `100vw` counts the scrollbar, so the band ends up ~15px wider than the space
   there is and Windows Chrome grows a horizontal scrollbar for it. `overflow-x:
   clip` on the page shell absorbs that. CLIP, not `hidden`: hidden makes the
   element a scroll container, which breaks `position: sticky` inside it and
   changes how anchors scroll. Clip does neither.
   ========================================================================== */

.fad-page-content {
	overflow-x: clip;
}

.fad-page-content .cmp-cta-basic {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: none;
}

/* The copy inside it stays in the content column. */
.fad-page-content .cmp-cta-basic > .e-con-inner,
.fad-page-content .cmp-cta-basic .cmp-cta-basic-inner {
	margin-left: auto;
	margin-right: auto;
}

/* =============================================================================
   2o. UTILITY CLASSES THE EDITORS TYPED INTO THE CONTENT
   -----------------------------------------------------------------------------
   The page copy is not plain prose. Over the years editors have written class
   names into the WYSIWYG that the legacy stylesheet styles and that no component
   template knows about, so they arrive in the rebuild as bare markup and the
   page quietly loses a feature.

   Found by pulling every `class="..."` out of the ACF payload and checking each
   one against the compiled legacy stylesheet:

     two-col-list   6 pages   a long list splits into two columns from 768 up
     aligncenter    4 pages   WordPress's own image alignment
     btn-primary    1 page    a Bootstrap button written by hand into the copy

   The rest (`epi-fontLg`, and the Mailchimp form's `mc-field-group`,
   `indicates-required`, `asterisk`) are not styled by the legacy stylesheet
   either, so they are left alone rather than invented.
   ========================================================================== */

/* Two-column lists. `/programs-activities/` has one with 73 items: as a single
   column it ran 1971px instead of 1026. */
@media ( min-width: 768px ) {
	.cmp-text .two-col-list {
		column-count: 2;
		column-gap: 60px;
	}
}

/* Lists broken across columns must not split an item down the middle. Legacy
   gets away without this because its items are short; stating it costs nothing
   and stops a two-line entry straddling the gutter. */
.cmp-text .two-col-list li {
	break-inside: avoid;
}

/* A HAND-WRITTEN RULE IN THE COPY.
   `/dining-at-the-forest/` and `/careers-2/` each carry
   `<hr style="border:none; height:3px; background-color:green;">` typed into
   the WYSIWYG. The inline style survives; the SPACING does not, because Hello
   Elementor zeroes hr margins and the following paragraph has no top margin.
   Measured against production at 1440: it clears 29px above and 27px below,
   and the rebuild had 29 above but 7 below — the copy ran straight into the
   rule. The 20px matches the paragraph rhythm the gap above already comes
   from, so both sides now sit at the same measured distance. */
.cmp-text hr {
	margin-top: 0;
	margin-bottom: 20px;
}

/* WordPress image alignment, straight from the legacy stylesheet. */
.cmp-text .aligncenter {
	display: block;
	margin: 10px auto;
	height: auto;
}

.cmp-text .alignleft,
.cmp-text .alignright {
	margin-bottom: 10px;
	height: auto;
}

.cmp-text .alignleft {
	float: left;
	margin-right: 10px;
}

.cmp-text .alignright {
	float: right;
	margin-left: 10px;
}

/* =============================================================================
   A BOOTSTRAP BUTTON WRITTEN INTO THE COPY
   -----------------------------------------------------------------------------
   `/keepgrowing/` has `<a class="btn btn-primary btn-block">APPLY NOW</a>` in
   the page text. Without Bootstrap it renders as an ordinary link: 113 x 22
   where production has a 177 x 38.6 green button.

   Production's fill is brand green #38B449, which carries white at 2.69:1 and
   fails AA at any size. Same substitution as every other button on this site:
   the project's button green, 4.66:1. The brand colour is untouched everywhere
   it is decoration.

   Written three classes deep. The kit styles bare `a` at 0,1,1 and would
   otherwise put the link colour back.
   ========================================================================== */

.cmp-text a.btn,
.cmp-text a.btn-primary {
	display: inline-block;
	background-color: var( --fad-button-green );
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4286;
	padding: 5px 30px;
	border: none;
	border-radius: 3px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

.cmp-text a.btn:hover,
.cmp-text a.btn:focus-visible,
.cmp-text a.btn-primary:hover,
.cmp-text a.btn-primary:focus-visible {
	background-color: var( --fad-button-green-hover );
	color: #fff;
	text-decoration: none;
}

.cmp-text a.btn:focus-visible,
.cmp-text a.btn-primary:focus-visible {
	outline: 2px solid var( --e-global-color-faddarkgreen );
	outline-offset: 2px;
}

/* `btn-block` is DELIBERATELY not implemented. Bootstrap's rule is
   `display: block; width: 100%`, and the one instance of it on this site
   renders inline-block at 177px on production, not 750 across the column, so
   something in the legacy cascade already beats it there. Adding the rule made
   the rebuild's button full width and wrong. */

/* =============================================================================
   A GRAVITY FORM EMBEDDED IN THE PAGE COPY
   -----------------------------------------------------------------------------
   Two pages, `/cna-jobs/` and `/keepgrowing/`, put a form shortcode inside the
   WYSIWYG rather than using the Form component. The legacy theme styles Gravity
   Forms site-wide; the child theme's form styling (section 4) is scoped to the
   `.cmp-gform` widget, so on those two pages the form arrived with the plugin's
   own defaults: a grey groove border round every field group, 1px outlined
   inputs and a pink outlined Submit.

   Values measured on forestduke.org/cna-jobs/ at 1440, and they are the same
   values the Form component uses, which is the point.

   ONE SUBSTITUTION: production's Submit is brand green #38B449 with white
   lettering at 2.69:1. Same button green as everywhere else on this site.
   ========================================================================== */

.cmp-text .gform_wrapper fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

/* Full width, because the hairline under the label is the whole point of it:
   at the plugin's own shrink-to-fit width the rule stops halfway across. */
.cmp-text .gform_wrapper .gfield_label {
	display: block;
	width: 100%;
	color: #333;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4286;
	border-bottom: 1px solid #e5e5e5;
	margin: 0 0 5px;
	padding-bottom: 2px;
}

.cmp-text .gform_wrapper .ginput_complex label,
.cmp-text .gform_wrapper .gform_fileupload_rules,
.cmp-text .gform_wrapper .gfield_description {
	color: #333;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4286;
	border: 0;
}

.cmp-text .gform_wrapper input[type='text'],
.cmp-text .gform_wrapper input[type='email'],
.cmp-text .gform_wrapper input[type='tel'],
.cmp-text .gform_wrapper input[type='url'],
.cmp-text .gform_wrapper input[type='number'],
.cmp-text .gform_wrapper select,
.cmp-text .gform_wrapper textarea {
	width: 100%;
	height: 40px;
	background-color: #fff;
	color: var( --e-global-color-text );
	font-family: Montserrat, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4286;
	padding: 6px 12px;
	border: none;
	border-radius: 4px;
	box-shadow: inset 0 1px 3px rgba( 0, 0, 0, 0.3 );
}

.cmp-text .gform_wrapper textarea {
	height: auto;
}

.cmp-text .gform_wrapper input:focus-visible,
.cmp-text .gform_wrapper select:focus-visible,
.cmp-text .gform_wrapper textarea:focus-visible {
	outline: 2px solid var( --fad-button-green );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Eric's 8/31 review pass on /cna-jobs/. Four changes, all his call.
   ------------------------------------------------------------------------- */

/* 1. FLUSH LEFT WITH THE COLUMN.
   The shortcode was typed inside a <blockquote> in the WYSIWYG, which carries
   the browser's default 40px side margins — so the form sat 40px inboard of
   the copy above and below it (form at x=580, copy at x=540 at 1440).
   Production hides that by painting the blockquote's left border as a grey
   rule; Eric would rather lose the rule than keep the indent. This is the only
   blockquote in the whole site's page copy, and it exists solely to hold the
   form, but the :has() states the intent — and if a browser drops the rule the
   page merely goes back to being indented. */
.cmp-text blockquote:has( .gform_wrapper ) {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
}

.cmp-text .gform_wrapper .gfield_required {
	color: #8A3232; /* 5.9:1 on white; the plugin's own red is 3.4:1 */
}

/* 2 and 3. "Name(Required)" had no space and sat at the label's own 18px, so it
   read as part of the field name. A space before it and two steps down in size
   and weight make it the aside it is. The outer span is the one that gets the
   space — Gravity nests a second .gfield_required inside it, so an unqualified
   rule would apply the gap twice. */
.cmp-text .gform_wrapper .gfield_label .gfield_required:not( .gfield_required_text ) {
	margin-left: 0.3em;
}

.cmp-text .gform_wrapper .gfield_required_text {
	font-size: 0.875rem;
	font-weight: 400;
}

/* 4. Submit drops below the form and centres, as production has it. Gravity's
   footer carries a `right_label` class but no alignment of its own, so the
   button was left-aligned and tight under the upload row. */
.cmp-text .gform_wrapper .gform_footer {
	display: block;
	width: 100%;
	margin-top: 30px;
	padding: 0;
	text-align: center;
}

.cmp-text .gform_wrapper .gform_footer input[type='submit'],
.cmp-text .gform_wrapper .gform_footer .gform_button {
	display: inline-block;
	float: none;
}

.cmp-text .gform_wrapper .gform_button,
.cmp-text .gform_wrapper input[type='submit'] {
	background-color: var( --fad-button-green ); /* white on it is 4.66:1 */
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4286;
	padding: 5px 30px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	width: auto;
}

.cmp-text .gform_wrapper .gform_button:hover,
.cmp-text .gform_wrapper input[type='submit']:hover {
	background-color: var( --fad-button-green-hover );
	color: #fff;
}

.cmp-text .gform_wrapper .gform_button:focus-visible,
.cmp-text .gform_wrapper input[type='submit']:focus-visible {
	outline: 2px solid var( --e-global-color-faddarkgreen );
	outline-offset: 2px;
}

/* =============================================================================
   2p. THE COMPONENTS PAGE
   -----------------------------------------------------------------------------
   `/components/` is the standing Cuberis pattern: every component the site has,
   shown live, as pairs of a label and the component itself. The component half
   is Elementor's Template widget pointed at the saved template by id, so the
   page renders the real thing — fix a component and this page follows. Nothing
   here should ever be a copy.

   The labels are styled from this file rather than from per-element Elementor
   settings on purpose: fifteen hand-set headings drift, one rule does not, and
   a component added later inherits the look for free.
   ========================================================================== */

.fad-components-intro {
	padding-top: 3rem;
	padding-bottom: 1rem;
}

.fad-components-label-wrap {
	padding-top: 60px;
	padding-bottom: 30px;
}

/* The first label sits under the intro, which already provides the air. */
.fad-components-intro + .fad-components-label-wrap {
	padding-top: 34px;
}

.fad-components-label.elementor-widget-heading .elementor-heading-title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var( --e-global-color-secondary ); /* forest green #1E4F40 */
}

/* An overline rather than an underline: it reads as a divider between the
   component above and the one this label introduces, which is what it is. */
.fad-components-label.elementor-widget {
	border-top: 2px solid var( --e-global-color-fadlightgray );
	padding-top: 18px;
}

.fad-components-item {
	padding-bottom: 10px;
}

/* Footer brochure button (Theme Options > Footer Settings > Brochure PDF). Same shape as the
   hero buttons; dark green on the mint so it reads at 9:1, Button Green on hover.
   Three classes deep: the kit's Buttons preset owns `.elementor-widget-button .elementor-button`. */
.fad-footer-cta .fad-footer-brochure .elementor-button {
	background: var(--e-global-color-faddarkgreen);
	border: 1px solid var(--e-global-color-faddarkgreen);
	border-radius: 0;
	color: #fff;
	padding: 12px 28px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4286;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.3s, border-color 0.3s;
}

.fad-footer-cta .fad-footer-brochure .elementor-button:hover,
.fad-footer-cta .fad-footer-brochure .elementor-button:focus {
	background-color: var(--fad-button-green);
	border-color: var(--fad-button-green);
	color: #fff;
}

.fad-footer-cta .fad-footer-brochure .elementor-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.fad-footer-cta .fad-footer-brochure {
		text-align: center;
		padding: 0 20px;
	}
	.fad-footer-cta .fad-footer-brochure {
		margin-bottom: 24px;
	}
	.fad-footer-cta .fad-footer-brochure .elementor-button {
		display: inline-block;
		width: auto;
		border-color: #fff;
		padding: 12px 20px;
		font-size: 0.875rem;
		letter-spacing: 0.12em;
	}
}