/*
Theme Name:   BM Child
Theme URI:    https://brentonmiebach.com/
Description:  GeneratePress child theme for brentonmiebach.com. Carries the Florida
              advertising-compliance footer (61J2-10.025 / 61J2-10.026) and the
              typography rules that keep it compliant. Presentation only — all
              entity and schema output lives in the BM Entity plugin, so switching
              themes later cannot silently strip the structured data.
Author:       Southwest Florida Lifestyle Living
Template:     generatepress
Version:      1.1.0
License:      GNU General Public License v2 or later
Text Domain:  bm-child
*/

/* ==========================================================================
   DESIGN SYSTEM — SWFLL (Southwest Florida Lifestyle Living)
   --------------------------------------------------------------------------
   Source of truth: SWFLL_PaletteSheet_Team_8.5x11_v01_2026-08-01 (Brand
   Identity & Design Standards v1.0). Brand hexes below are transcribed from
   that sheet and MUST NOT be altered. Anything named *-ink, *-deep, *-tint or
   "slate" is a derived, hue-locked accessibility variant — added only because
   the brand hex fails a WCAG AA pairing it is being asked to serve. Derived
   values never replace a brand value in its sanctioned role.

   BRAND TOKENS          HEX       SANCTIONED ROLE (per sheet)        SHARE
   --swfll-navy          #0B1D33   structure, headlines, dark panels  15-30%
   --swfll-teal          #0E6E78   water cues, links, subheads        10-20%*
   --swfll-aqua          #17B5C0   bands/fills — STRUCTURAL, never text
   --swfll-coral         #FF6B4D   hairlines, key numerals, emphasis  2-7%
   --swfll-sand          #D4B48C   borders/dividers — never text      3-10%
   --swfll-shell         #F7F4EE   primary field                      45-65%
   --swfll-mist          #DDEFF1   panels, table header rows          5-20%
   --swfll-charcoal      #222222   body copy on light fields
   * teal + aqua share a combined 10-20% of any layout.

   DERIVED (accessibility) — measured, not eyeballed
   --swfll-coral-ink     #B24630   5.02:1 on shell. Coral hue at V=0.70.
                                   Sunset Coral itself is 2.56:1 on shell and
                                   fails even AA-large (3:1), so coral-toned
                                   TEXT on light fields uses this instead. Pure
                                   coral stays for hairlines, fills and for
                                   text on navy (6.03:1).
   --swfll-teal-deep     #0B5A63   7.20:1 on shell — link/button hover.
   --swfll-slate         #46586B   6.67:1 on shell — muted text, form borders
                                   (Warm Sand is 1.79:1 and cannot bound a
                                   control that needs 3:1 non-text contrast).
   --swfll-mist-tint     #EFF7F8   table zebra stripe; charcoal reads 14.64:1.
   --swfll-on-dark-mute  #AFC1C7   9.11:1 on navy — footer disclaimer.

   HARD RULES CARRIED FORWARD FROM THE SHEET
   1. White on Sunset Coral is 2.81:1 and FAILS. Coral buttons take Midnight
      Navy type (6.03:1). Never white.
   2. Clearwater Aqua and Warm Sand are structural only. No text, ever.
   3. Coral is never small text on a light field. Use --swfll-coral-ink.

   TYPE — EB Garamond (display serif) + Lato (body), both per the sheet, loaded
   as ONE Google Fonts request in functions.php with display=swap. System
   fallbacks are declared so an unavailable font never blocks first paint.
   ========================================================================== */

:root {
	/* Brand — transcribed from the palette sheet. Do not edit. */
	--swfll-navy: #0B1D33;
	--swfll-teal: #0E6E78;
	--swfll-aqua: #17B5C0;
	--swfll-coral: #FF6B4D;
	--swfll-sand: #D4B48C;
	--swfll-shell: #F7F4EE;
	--swfll-mist: #DDEFF1;
	--swfll-charcoal: #222222;
	--swfll-white: #FFFFFF;

	/* Derived — accessibility only. See header. */
	--swfll-coral-ink: #B24630;
	--swfll-teal-deep: #0B5A63;
	--swfll-slate: #46586B;
	--swfll-mist-tint: #EFF7F8;
	--swfll-on-dark-mute: #AFC1C7;

	/* Semantic */
	--swfll-bg: var(--swfll-shell);
	--swfll-surface: var(--swfll-white);
	--swfll-panel: var(--swfll-mist);
	--swfll-ink: var(--swfll-charcoal);
	--swfll-ink-heading: var(--swfll-navy);
	--swfll-ink-muted: var(--swfll-slate);
	--swfll-link: var(--swfll-teal);
	--swfll-link-hover: var(--swfll-teal-deep);
	--swfll-accent: var(--swfll-coral);
	--swfll-rule: var(--swfll-sand);
	--swfll-rule-soft: rgba(11, 29, 51, 0.12);
	--swfll-rule-strong: var(--swfll-slate);
	--swfll-on-dark: var(--swfll-shell);
	--swfll-focus: var(--swfll-teal);
	--swfll-focus-dark: var(--swfll-aqua);

	/* Type */
	--swfll-font-display: "EB Garamond", Iowan Old Style, Palatino, Georgia, "Times New Roman", serif;
	--swfll-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--swfll-fs-xs: 0.8125rem;
	--swfll-fs-sm: 0.9375rem;
	--swfll-fs-base: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
	--swfll-fs-lede: clamp(1.1875rem, 1.11rem + 0.38vw, 1.375rem);
	--swfll-fs-h4: clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
	--swfll-fs-h3: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
	--swfll-fs-h2: clamp(1.625rem, 1.42rem + 1.02vw, 2.25rem);
	--swfll-fs-h1: clamp(2.125rem, 1.68rem + 2.22vw, 3.25rem);
	--swfll-lh-body: 1.7;
	--swfll-lh-tight: 1.2;
	--swfll-measure: 74ch;

	/* Space / shape */
	--swfll-s1: 0.25rem;
	--swfll-s2: 0.5rem;
	--swfll-s3: 0.75rem;
	--swfll-s4: 1rem;
	--swfll-s5: 1.5rem;
	--swfll-s6: 2rem;
	--swfll-s7: 3rem;
	--swfll-radius: 4px;
	--swfll-radius-lg: 8px;
	--swfll-shadow: 0 1px 2px rgba(11, 29, 51, 0.06), 0 8px 24px rgba(11, 29, 51, 0.07);

	/* Layout — also resolves the var() the compliance footer already reads. */
	--swfll-container: 1120px;
	--gp-container-width: var(--swfll-container);
}

/* --- BASE -------------------------------------------------------------- */

body {
	background-color: var(--swfll-bg);
	color: var(--swfll-ink);
	font-family: var(--swfll-font-body);
	font-size: var(--swfll-fs-base);
	line-height: var(--swfll-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.grid-container, .site-content .container { max-width: var(--swfll-container); }
.inside-article, .site-main > .page-header, .one-container .site-content { background-color: var(--swfll-surface); }
.separate-containers .inside-article { padding: var(--swfll-s5) var(--swfll-s4); border-radius: var(--swfll-radius-lg); }

/* ==========================================================================
   TYPOGRAPHY SCALE
   Editorial measure is capped so long-form community pages stay readable at
   1120px. Tables, figures and callouts are exempt.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--swfll-font-display);
	color: var(--swfll-ink-heading);
	line-height: var(--swfll-lh-tight);
	font-weight: 600;
	text-wrap: balance;
}
h1 { font-size: var(--swfll-fs-h1); letter-spacing: -0.015em; margin: 0 0 var(--swfll-s5); }
h2 { font-size: var(--swfll-fs-h2); margin: var(--swfll-s7) 0 var(--swfll-s4); }
h3 { font-size: var(--swfll-fs-h3); margin: var(--swfll-s6) 0 var(--swfll-s3); }
h4 { font-size: var(--swfll-fs-h4); font-family: var(--swfll-font-body); font-weight: 700; margin: var(--swfll-s5) 0 var(--swfll-s2); }
.entry-content > h2 { padding-top: var(--swfll-s4); border-top: 1px solid var(--swfll-rule); }
.entry-content > h2:first-child { border-top: 0; padding-top: 0; }
p, ul, ol { margin: 0 0 var(--swfll-s5); }
li { margin-bottom: var(--swfll-s2); }
strong, b { font-weight: 700; color: var(--swfll-ink-heading); }
.entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h2, .entry-content > h3, .entry-content > h4 { max-width: var(--swfll-measure); }
.lede, .entry-content > p.lede, .entry-content > p:first-of-type { font-size: var(--swfll-fs-lede); color: var(--swfll-ink-heading); line-height: 1.55; }
.muted, .stamp, small { color: var(--swfll-ink-muted); font-size: var(--swfll-fs-sm); }

/* ==========================================================================
   LINKS
   Teal is 5.43:1 on Shell White. The underline stays — in a trust-driven
   advertising context links must be identifiable without relying on colour.
   ========================================================================== */

a {
	color: var(--swfll-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: rgba(14, 110, 120, 0.45);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover, a:focus { color: var(--swfll-link-hover); text-decoration-color: currentColor; }

/* ==========================================================================
   BUTTONS
   Primary = Deep Ocean Teal / white (5.97:1). Secondary = Sunset Coral with
   MIDNIGHT NAVY type (6.03:1) — never white, per the sheet's correction.
   ========================================================================== */

.bm-btn,
.wp-block-button__link,
.button,
button,
input[type="submit"] {
	display: inline-block;
	font-family: var(--swfll-font-body);
	font-size: var(--swfll-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 0.9em 1.6em;
	border: 2px solid transparent;
	border-radius: var(--swfll-radius);
	background-color: var(--swfll-teal);
	color: var(--swfll-white);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bm-btn:hover, .wp-block-button__link:hover, .button:hover, button:hover, input[type="submit"]:hover { background-color: var(--swfll-teal-deep); color: var(--swfll-white); }
.bm-btn--secondary { background-color: var(--swfll-coral); color: var(--swfll-navy); }
.bm-btn--secondary:hover { background-color: #E85F42; color: var(--swfll-navy); }
.bm-btn--ghost { background-color: transparent; color: var(--swfll-navy); border-color: var(--swfll-navy); }
.bm-btn--ghost:hover { background-color: var(--swfll-navy); color: var(--swfll-shell); }

/* ==========================================================================
   HEADER / NAVIGATION
   Deep tone for nav. Shell White on Midnight Navy is 16.97:1.
   ========================================================================== */

.site-header {
	background-color: var(--swfll-surface);
	border-bottom: 1px solid var(--swfll-rule);
}
.site-header .main-title a { color: var(--swfll-navy); text-decoration: none; font-family: var(--swfll-font-display); }
.site-header .site-description { color: var(--swfll-ink-muted); font-size: var(--swfll-fs-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.main-navigation, .main-navigation .main-nav ul ul { background-color: var(--swfll-navy); }

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--swfll-on-dark);
	font-family: var(--swfll-font-body);
	font-size: var(--swfll-fs-sm);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
}
.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item > a { background-color: var(--swfll-teal-deep); color: var(--swfll-white); }
.main-navigation .main-nav ul li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--swfll-coral); }

/* --- BREADCRUMBS ------------------------------------------------------- */

.bm-breadcrumbs,
#breadcrumbs,
.breadcrumbs,
nav[aria-label="Breadcrumb"] {
	font-size: var(--swfll-fs-sm);
	color: var(--swfll-ink-muted);
	margin: 0 0 var(--swfll-s5);
	padding: 0 0 var(--swfll-s3);
	border-bottom: 1px solid var(--swfll-rule);
}
.bm-breadcrumbs a, #breadcrumbs a, .breadcrumbs a, nav[aria-label="Breadcrumb"] a { text-decoration: none; }
.bm-breadcrumbs a:hover, #breadcrumbs a:hover, .breadcrumbs a:hover, nav[aria-label="Breadcrumb"] a:hover { text-decoration: underline; }
.bm-breadcrumbs [aria-current="page"] { color: var(--swfll-ink); font-weight: 700; }

/* ==========================================================================
   TABLES — first-class citizens. Fee tables and clearance tables are why this
   site gets cited, so they get a branded header row (Water Mist + Midnight
   Navy, 14.29:1), zebra striping, and a horizontal scroll shell on mobile
   instead of a squeezed, unreadable grid.
   ========================================================================== */

.wp-block-table,
.scroll,
.bm-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 var(--swfll-s6);
}

table,
.wp-block-table table {
	width: 100%;
	max-width: none;
	border-collapse: collapse;
	font-size: var(--swfll-fs-sm);
	line-height: 1.5;
	background-color: var(--swfll-surface);
	border: 1px solid var(--swfll-rule);
}

table caption,
.wp-block-table figcaption {
	caption-side: top;
	text-align: left;
	font-size: var(--swfll-fs-sm);
	color: var(--swfll-ink-muted);
	padding: 0 0 var(--swfll-s2);
}
th, td { padding: var(--swfll-s3) var(--swfll-s4); text-align: left; border-bottom: 1px solid var(--swfll-rule-soft); vertical-align: top; }

thead th,
table th[scope="col"] {
	background-color: var(--swfll-mist);
	color: var(--swfll-navy);
	font-family: var(--swfll-font-body);
	font-weight: 700;
	font-size: var(--swfll-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--swfll-teal);
	white-space: nowrap;
}
tbody th[scope="row"] { font-weight: 700; color: var(--swfll-navy); }
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background-color: var(--swfll-mist-tint); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.lo, .bm-table__flag { color: var(--swfll-coral-ink); font-weight: 700; }
.sys { font-weight: 700; color: var(--swfll-navy); }

/* ==========================================================================
   FAQ — no JavaScript. Two supported patterns: a semantic details/summary
   accordion, and plain question headings inside a .bm-faq section (which is
   what the seeded pages emit). Both read as the same component.
   ========================================================================== */

.bm-faq,
.faq {
	background-color: var(--swfll-surface);
	border: 1px solid var(--swfll-rule);
	border-left: 4px solid var(--swfll-teal);
	border-radius: var(--swfll-radius);
	padding: var(--swfll-s5);
	margin: 0 0 var(--swfll-s5);
}

.bm-faq > h2, .bm-faq > h3,
.faq > h2, .faq > h3 {
	margin: 0 0 var(--swfll-s3);
	font-size: var(--swfll-fs-h3);
	border-top: 0;
	padding-top: 0;
	max-width: var(--swfll-measure);
}
.bm-faq > p:last-child, .faq > p:last-child { margin-bottom: 0; }
details.bm-faq-item { border-bottom: 1px solid var(--swfll-rule); padding: var(--swfll-s4) 0; }
details.bm-faq-item:last-of-type { border-bottom: 0; }

details.bm-faq-item > summary {
	font-family: var(--swfll-font-display);
	font-size: var(--swfll-fs-h3);
	font-weight: 600;
	color: var(--swfll-navy);
	cursor: pointer;
	list-style: none;
	display: flex;
	gap: var(--swfll-s3);
	align-items: baseline;
	line-height: var(--swfll-lh-tight);
}
details.bm-faq-item > summary::-webkit-details-marker { display: none; }
details.bm-faq-item > summary::before { content: "+"; color: var(--swfll-coral-ink); font-family: var(--swfll-font-body); font-weight: 700; flex: 0 0 auto; }
details.bm-faq-item[open] > summary::before { content: "\2212"; }
details.bm-faq-item > summary:hover { color: var(--swfll-teal-deep); }
details.bm-faq-item > *:not(summary) { margin-top: var(--swfll-s3); }
details.bm-faq-item > p:last-child { margin-bottom: 0; }

/* ==========================================================================
   QUOTES, FACT CALLOUTS, CTA
   Coral appears here only as a hairline or on a dark field — never as small
   text on a light one.
   ========================================================================== */

blockquote,
.wp-block-quote {
	margin: 0 0 var(--swfll-s6);
	padding: var(--swfll-s2) 0 var(--swfll-s2) var(--swfll-s5);
	border-left: 3px solid var(--swfll-sand);
	font-family: var(--swfll-font-display);
	font-size: var(--swfll-fs-lede);
	line-height: 1.5;
	color: var(--swfll-ink-heading);
	max-width: var(--swfll-measure);
}

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: var(--swfll-s3);
	font-family: var(--swfll-font-body);
	font-size: var(--swfll-fs-sm);
	font-style: normal;
	font-weight: 700;
	color: var(--swfll-ink-muted);
}

.bm-callout,
.bm-fact,
.key,
.method {
	background-color: var(--swfll-panel);
	border-left: 4px solid var(--swfll-accent);
	border-radius: 0 var(--swfll-radius) var(--swfll-radius) 0;
	padding: var(--swfll-s4) var(--swfll-s5);
	margin: 0 0 var(--swfll-s6);
	max-width: var(--swfll-measure);
}
.bm-callout > :last-child, .bm-fact > :last-child, .key > :last-child, .method > :last-child { margin-bottom: 0; }

/* Large bold numerals only — 24px+ is the one place the sheet lets a display
   colour go big, and this uses navy, which is unambiguous at any size. */
.bm-fact__value {
	display: block;
	font-family: var(--swfll-font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	color: var(--swfll-navy);
}

.bm-cta {
	background-color: var(--swfll-navy);
	color: var(--swfll-on-dark);
	border-radius: var(--swfll-radius-lg);
	padding: var(--swfll-s6) var(--swfll-s5);
	margin: var(--swfll-s7) 0;
	box-shadow: var(--swfll-shadow);
}
.bm-cta h2, .bm-cta h3 { color: var(--swfll-white); margin-top: 0; border-top: 0; padding-top: 0; }
.bm-cta p { color: var(--swfll-on-dark); }
.bm-cta strong { color: var(--swfll-coral); }
.bm-cta > :last-child { margin-bottom: 0; }
.bm-cta a { color: var(--swfll-mist); text-decoration-color: rgba(221, 239, 241, 0.6); }
.bm-cta a:hover { color: var(--swfll-white); }
.bm-cta .bm-btn { color: var(--swfll-navy); background-color: var(--swfll-coral); text-decoration: none; }

/* ==========================================================================
   FORMS
   Control borders use --swfll-slate (6.67:1). Warm Sand is 1.79:1 and cannot
   carry a control boundary, which must meet the 3:1 non-text requirement.
   ========================================================================== */

label {
	display: block;
	font-weight: 700;
	font-size: var(--swfll-fs-sm);
	color: var(--swfll-navy);
	margin-bottom: var(--swfll-s1);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.7em 0.85em;
	font-family: inherit;
	font-size: var(--swfll-fs-base);
	color: var(--swfll-ink);
	background-color: var(--swfll-white);
	border: 1px solid var(--swfll-rule-strong);
	border-radius: var(--swfll-radius);
}
input::placeholder, textarea::placeholder { color: var(--swfll-ink-muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--swfll-teal); }

/* ==========================================================================
   STAT LINES
   --------------------------------------------------------------------------
   Rendered by the [bm_stat] shortcode:
     <span class="bm-stat"><strong class="bm-stat__value">…</strong>
     <span class="bm-stat__label">…</span>
     <span class="bm-stat__asof">(as of …)</span></span>
   The "as of" stamp is not decoration — it is what stops a number becoming a
   false claim six months from now, and it is what an answer engine cites when
   it dates the figure. So it is coloured with --swfll-slate (6.67:1) rather
   than faded with opacity, which would have dropped it below AA.
   ========================================================================== */
.bm-stat { white-space: nowrap; }
.bm-stat__value { font-family: var(--swfll-font-display); font-size: 1.3em; font-weight: 700; color: var(--swfll-navy); }
.bm-stat__label { color: inherit; }
.bm-stat__asof { font-size: 0.85em; color: var(--swfll-ink-muted); white-space: nowrap; }

/* ==========================================================================
NAP ========================================================================== */ .bm-nap { display: inline-block; }

/* --- SITE FOOTER ------------------------------------------------------- */

.site-footer, .site-info { background-color: var(--swfll-navy); color: var(--swfll-on-dark); }
.site-footer a, .site-info a { color: var(--swfll-mist); }
.site-footer a:hover, .site-info a:hover { color: var(--swfll-white); }
.site-info .copyright { margin: 0; font-size: var(--swfll-fs-sm); }

/* ==========================================================================
   COMPLIANCE FOOTER
   --------------------------------------------------------------------------
   Fla. Admin. Code 61J2-10.026: "the team or group name shall not be in larger
   print than the name of the registered brokerage."

   This is a rule about rendered print size, so it is enforced here in CSS and
   not left to whoever edits the footer next. .bm-legal__team is deliberately
   capped at 1em relative to its parent and the brokerage is never smaller.
   Do not add a font-size to .bm-legal__team. If a future design needs the team
   name larger, the brokerage name has to grow with it.

   61J2-10.025(3): for internet advertising the brokerage name must sit
   adjacent to the point-of-contact information, so .bm-legal__identity stays
   immediately above .bm-legal__contact. Do not float, grid or reorder them
   apart — that is a compliance change, not a layout change.
   ========================================================================== */

.bm-legal {
	font-size: 14px;
	line-height: 1.6;
	background-color: var(--swfll-navy);
	color: var(--swfll-on-dark);
	border-top: 1px solid var(--swfll-coral);
}

/*
 * The inner wrapper aligns the legal block with GeneratePress's content
 * container instead of running edge-to-edge. Matching the theme's own
 * container width keeps the brokerage line visually tied to the site content
 * rather than reading as a detached browser-chrome strip.
 */
.bm-legal__inner {
	max-width: var(--gp-container-width, 1120px);
	margin: 0 auto;
	padding: var(--swfll-s6) 20px;
}
.bm-legal__identity { margin: 0 0 8px; }

/* Locked to parity with the brokerage name. See note above. */
.bm-legal__team, .bm-legal__brokerage { font-size: 1em; font-weight: 600; }
.bm-legal__agent { font-weight: 700; }
.bm-legal__contact { margin: 0 0 12px; }
.bm-legal__contact a { text-decoration: underline; color: var(--swfll-mist); }
.bm-legal__contact a:hover { color: var(--swfll-white); }

/* 9.11:1 on Midnight Navy. Deliberately a colour, not an opacity fade — the
   previous 0.85 opacity would have pushed this disclaimer under AA. */
.bm-legal__disclaimer { margin: 0; font-size: 13px; color: var(--swfll-on-dark-mute); max-width: 90ch; }
.bm-legal__marks { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.bm-legal__marks img { height: 28px; width: auto; }

/* ==========================================================================
   SKIP LINK / FOCUS VISIBILITY
   Keyboard focus must be visible; GeneratePress's default is faint on light
   backgrounds. Deep Ocean Teal is 5.43:1 on Shell White; on dark panels the
   ring switches to Clearwater Aqua (6.79:1 on navy) — a structural use, which
   is exactly what the palette sheet permits Aqua to do.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--swfll-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
.main-navigation a:focus-visible, .bm-legal a:focus-visible, .bm-cta a:focus-visible, .site-footer a:focus-visible { outline-color: var(--swfll-focus-dark); }

/* --- RESPONSIVE / MOTION / PRINT --------------------------------------- */

@media (max-width: 768px) {
	.bm-legal { font-size: 13px; }
	.separate-containers .inside-article { padding: var(--swfll-s4) var(--swfll-s3); }
	.bm-faq, .faq, .bm-cta { padding: var(--swfll-s4); }
	th, td { padding: var(--swfll-s2) var(--swfll-s3); }
	.entry-content > h2 { margin-top: var(--swfll-s6); }
}

@media (min-width: 769px) {
	.separate-containers .inside-article { padding: var(--swfll-s7) var(--swfll-s6); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
	.main-navigation, .site-footer, .bm-cta { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.bm-legal { background: #fff; color: #000; border-top: 1px solid #000; }
	.bm-legal__contact a, .bm-legal__disclaimer { color: #000; }
	a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   FOUNDATION BUILD ADDITIONS — 2026-09-25
   Header CTA row, hero, navy service cards, community cards, and the custom
   4-column footer to match the live site's structure in brand colors.
   ========================================================================== */

/* --- Header phone + Contact button --------------------------------------- */
.main-navigation .inside-navigation { display: flex; align-items: center; flex-wrap: wrap; }
.bm-header-cta {
	display: flex;
	align-items: center;
	gap: var(--swfll-s4);
	padding: 0 var(--swfll-s4);
	margin-left: auto;
	order: 99;
}
.bm-header-cta__phone {
	color: var(--swfll-on-dark);
	font-weight: 700;
	text-decoration: none;
	font-size: var(--swfll-fs-sm);
	white-space: nowrap;
}
.bm-header-cta__phone:hover { color: var(--swfll-white); }
.bm-header-cta__btn {
	background-color: var(--swfll-navy);
	color: var(--swfll-white);
	padding: 0.6em 1.2em;
	white-space: nowrap;
}
.bm-header-cta__btn:hover { background-color: var(--swfll-teal-deep); }

/* --- Hero (cover block) --------------------------------------------------- */
.wp-block-cover {
	background-color: var(--swfll-navy);
}
.wp-block-cover h2, .wp-block-cover h1 {
	color: var(--swfll-white) !important;
	font-family: var(--swfll-font-display);
	max-width: 20ch;
}
.wp-block-cover p { max-width: 60ch; font-size: var(--swfll-fs-lede); }

/* --- Three-across navy service cards -------------------------------------- */
.bm-navy-card {
	background-color: var(--swfll-navy);
	color: var(--swfll-white);
	border-radius: var(--swfll-radius-lg);
	padding: var(--swfll-s6) var(--swfll-s5);
}
.bm-navy-card h3 {
	color: var(--swfll-white);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-family: var(--swfll-font-body);
	font-weight: 700;
	font-size: var(--swfll-fs-h4);
}
.bm-navy-card p { color: var(--swfll-mist); margin-bottom: 0; }

/* --- Stat strip ------------------------------------------------------------ */
.bm-stat-strip {
	text-align: center;
	background-color: var(--swfll-shell);
	border-top: 1px solid var(--swfll-rule);
	border-bottom: 1px solid var(--swfll-rule);
	padding: var(--swfll-s6) 0;
}
.bm-stat-strip p { margin-bottom: var(--swfll-s1); }

/* --- Community / area cards ------------------------------------------------ */
.bm-area-card {
	position: relative;
	border-radius: var(--swfll-radius-lg);
	overflow: hidden;
}
.bm-area-card img { width: 100%; height: auto; display: block; }
.bm-area-card__label {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--swfll-s4);
	background: linear-gradient(to top, rgba(11,29,51,0.85), rgba(11,29,51,0));
	color: var(--swfll-white);
	font-family: var(--swfll-font-display);
	font-size: var(--swfll-fs-h4);
}

/* ==========================================================================
   CUSTOM FOOTER — 4 columns: about/social, explore areas, buy & sell, contact.
   Sits above the compliance .bm-legal bar, both on navy.
   ========================================================================== */
.bm-footer {
	background-color: var(--swfll-navy);
	color: var(--swfll-on-dark);
}
.bm-footer__inner {
	max-width: var(--gp-container-width, 1120px);
	margin: 0 auto;
	padding: var(--swfll-s7) 20px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--swfll-s6);
}
.bm-footer h4 {
	color: var(--swfll-white);
	font-family: var(--swfll-font-body);
	font-size: var(--swfll-fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--swfll-s3);
}
.bm-footer__marks { display: flex; align-items: flex-end; gap: var(--swfll-s4); flex-wrap: wrap; margin-bottom: var(--swfll-s3); }
/* Rule: the team mark is never rendered larger than the eXp mark. Team mark
   height is capped below the eXp mark's fixed height so eXp always reads as
   the larger, brokerage-of-record logo. */
.bm-footer__mark { max-height: 36px; width: auto; max-width: 140px; }
.bm-footer__exp { height: 42px; width: auto; }
.bm-footer__blurb { color: var(--swfll-on-dark); font-size: var(--swfll-fs-sm); max-width: 32ch; }
.bm-footer__social { display: flex; flex-wrap: wrap; gap: var(--swfll-s3); margin-top: var(--swfll-s3); }
.bm-footer__social a {
	color: var(--swfll-mist);
	font-size: var(--swfll-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
}
.bm-footer__social a:hover { color: var(--swfll-white); text-decoration: underline; }
.bm-footer__menu { list-style: none; margin: 0; padding: 0; }
.bm-footer__menu li { margin: 0 0 var(--swfll-s2); }
.bm-footer__menu a { color: var(--swfll-mist); text-decoration: none; font-size: var(--swfll-fs-sm); }
.bm-footer__menu a:hover { color: var(--swfll-white); text-decoration: underline; }
.bm-footer__contact a { color: var(--swfll-mist); }
.bm-footer__contact a:hover { color: var(--swfll-white); }

@media (max-width: 768px) {
	.bm-footer__inner { grid-template-columns: 1fr; gap: var(--swfll-s5); }
	.bm-header-cta { display: none; }
}

/* ==========================================================================
   HOMEPAGE BUILD 2026-09-25
   ========================================================================== */
.bm-hero { min-height: 80vh; }
.bm-hero .wp-block-cover__video-background { object-fit: cover; }
@media (max-width: 768px) {
	.bm-hero { min-height: 60vh; }
}
.bm-who-we-are { align-items: center; margin: var(--swfll-s7) 0; }
.bm-headshot img {
	border-radius: var(--swfll-radius-lg);
	width: 100%;
	height: auto;
	display: block;
	box-shadow: var(--swfll-shadow);
}
.bm-community-links {
	text-align: center;
	color: var(--swfll-ink-muted);
}
.bm-community-links a { color: var(--swfll-navy); text-decoration: none; }
.bm-community-links a:hover { text-decoration: underline; }
.bm-area-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bm-area-card:hover { transform: translateY(-4px); box-shadow: var(--swfll-shadow); }
.bm-stat-strip .bm-stat__value { font-size: 1.3em; }
@media (max-width: 768px) {
	.bm-who-we-are { flex-direction: column; }
	.bm-who-we-are .wp-block-column { flex-basis: 100% !important; }
}

/* Homepage: the featured image is used for OG/schema/thumbnail only.
   The full-bleed video cover block is the real hero, so GeneratePress's
   automatic page-header featured-image banner is suppressed here. */
body.page-id-1151 .featured-image.page-header-image, body:has(.bm-hero) .featured-image.page-header-image { display: none; }

/* Stat strip: bm_stat shortcode text must be allowed to wrap inside a
   narrow column, or the nowrap rule from the original inline usage
   causes it to overflow into the next column. */
.bm-stat-strip .bm-stat { white-space: normal; display: inline-block; }
.bm-stat-strip .wp-block-column { padding: 0 var(--swfll-s3); }

/* ==========================================================================
   QC FIX PASS 2026-09-25
   ========================================================================== */

/* Fix 2: mobile horizontal overflow. The logo already carries the brand,
   so the text site title is hidden at all sizes, and the branding
   container is forced to wrap instead of forcing a fixed wide row. */
.main-title { display: none; }
@media (max-width: 768px) {
	.site-branding-container { width: 100%; max-width: 100%; flex-wrap: wrap; }
	.site-branding, .main-title { max-width: 100%; }
	/* Keep the Contact button, drop the phone number text so the header
	   CTA row does not force horizontal scroll. */
	.bm-header-cta { display: flex !important; flex-wrap: wrap; }
	.main-navigation .bm-header-cta__phone { display: none !important; }
}

/* Fix 3: hero video downloads twice on mobile with no payoff (the
   overlay is what most phone visitors see anyway). Hide the video and
   show the poster frame as a plain background image instead. */
@media (max-width: 768px) {
	.bm-hero .wp-block-cover__video-background { display: none !important; }
	.bm-hero {
		background-image: url('https://wordpress-1655484-6589210.cloudwaysapps.com/wp-content/uploads/2026/09/cape-coral-01.jpg');
		background-size: cover;
		background-position: center;
	}
}

/* Fix 4: "Start here" cards get their own class so the label sits as
   static navy text below the copy, not an absolutely positioned bar
   overlapping the paragraph. The Explore Areas photo cards keep the
   original absolute white label (.bm-area-card__label) untouched. */
.bm-start-card {
	border-radius: var(--swfll-radius-lg);
	overflow: hidden;
	background-color: var(--swfll-shell);
}
.bm-start-card img { width: 100%; height: auto; display: block; }
.bm-start-card p { padding: 0 var(--swfll-s3); }
.bm-start-card__label {
	position: static;
	background: none;
	color: var(--swfll-navy);
	font-family: var(--swfll-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0 var(--swfll-s3) var(--swfll-s3);
	margin-top: var(--swfll-s2);
}
.bm-start-card__label a { color: var(--swfll-navy); text-decoration: none; }
.bm-start-card__label a:hover { text-decoration: underline; }

/* Fix 5: Explore Areas card labels were rendering in the link color
   (teal) instead of white against the photo. Force white, with the
   existing bottom scrim gradient (.bm-area-card__label) carrying the
   contrast on any photo. */
.bm-area-card__label a {
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}

/* ==========================================================================
   HEADER REBUILD 2026-09-25 — match live site treatment, in brand palette.
   Overlay header on the hero (home), solid on interior pages, one row for
   logo + nav + phone/CTA, sticky-solid on scroll.
   ========================================================================== */

/* Base: header is out of document flow and pinned to the viewport, both so
   it floats transparently over the hero video at the top of the homepage
   and so it stays visible (truly sticky, not just "absolute and then
   scrolled out of view") as the page scrolls, matching the "on scroll"
   solid-navy behavior below. z-index keeps it above the cover block, and
   dropdown panels sit above that again. */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: transparent;
	border-bottom: none;
	z-index: 500;
	transition: background-color 0.2s ease, height 0.2s ease;
}
.site-header::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 160px;
	background: linear-gradient(to bottom, rgba(11,29,51,0.85), rgba(11,29,51,0));
	pointer-events: none;
	z-index: -1;
}
.site-header .main-title a { color: var(--swfll-white); }

/* Interior (non-home) pages: no hero behind the header, so it needs to sit
   in normal flow with a solid fill, and the page content needs the
   equivalent top padding since the header no longer pushes it down on its
   own once it is position:absolute elsewhere in this file. */
body:not(.home) .site-header {
	background-color: var(--swfll-navy);
}
body:not(.home) .site-header::before { display: none; }
body:not(.home) #content.site-content { padding-top: 90px; }
@media (max-width: 768px) {
	body:not(.home) #content.site-content { padding-top: 60px; }
}

/* --- Logo sizing --------------------------------------------------------- */
.site-branding-container .site-logo img,
.site-branding-container .header-image {
	max-height: 86px;
	width: auto;
	height: auto;
	transition: max-height 0.2s ease;
}
@media (max-width: 768px) {
	.site-branding-container .site-logo img,
	.site-branding-container .header-image {
		max-height: 58px;
	}
}
body.bm-header-scrolled .site-branding-container .site-logo img,
body.bm-header-scrolled .site-branding-container .header-image {
	max-height: 66px;
}

/* --- Desktop: one row, logo left, nav + phone + CTA right ---------------- */
@media (min-width: 769px) {
	.site-header {
		height: 90px;
		display: flex;
		align-items: center;
		padding-inline: max(24px, calc((100% - var(--swfll-container)) / 2));
	}
	.site-header.has-inline-mobile-toggle { display: flex; }
	.site-header .inside-header {
		padding: 0;
		margin: 0;
		max-width: none;
		flex: 0 0 auto;
	}
	.site-header #mobile-menu-control-wrapper { display: none; }
	.site-header #site-navigation {
		flex: 1 1 auto;
		max-width: none;
		margin: 0;
		padding: 0;
		background: transparent;
	}
	.site-header #site-navigation .inside-navigation {
		max-width: none;
		margin: 0;
		padding: 0;
		height: 90px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
	}
	.site-header #site-navigation .menu-toggle { display: none; }
	.site-header .main-nav > ul.menu {
		display: flex;
		align-items: center;
		gap: var(--swfll-s2);
	}
	.site-header .main-nav > ul.menu > li > a {
		font-size: 15px;
		letter-spacing: 0.06em;
		color: var(--swfll-white);
	}

	/* Sticky/scrolled state: solid navy, shorter, smaller logo. */
	body.bm-header-scrolled .site-header {
		height: 70px;
		background-color: var(--swfll-navy);
	}
	body.bm-header-scrolled .site-header::before { opacity: 0; }
	body.bm-header-scrolled .site-header #site-navigation .inside-navigation,
	body.bm-header-scrolled .site-header {
		height: 70px;
	}
}

/* --- Mobile: shorter bar, logo + hamburger inline, no phone text --------- */
@media (max-width: 768px) {
	.site-header { height: 60px; }
	.site-header .inside-header {
		height: 60px;
		display: flex;
		align-items: center;
	}
	.site-header .bm-header-cta { display: none !important; }
}

/* --- Nav dropdowns: solid navy, white links, hover teal text ------------- */
.main-navigation .main-nav ul ul li a {
	color: var(--swfll-white);
	background-color: var(--swfll-navy);
}
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li.current-menu-item > a {
	background-color: var(--swfll-navy);
	color: var(--swfll-teal);
	box-shadow: none;
}

/* --- Header phone + Contact Me pill --------------------------------------
 * Overrides the solid-navy button from the earlier foundation build: on
 * a transparent/scrimmed header a solid navy pill disappears against the
 * scrim, so this is an outline pill instead, matching the live site.
 */
.bm-header-cta__phone {
	color: var(--swfll-white);
	font-weight: 400;
}
.bm-header-cta__btn {
	background-color: transparent;
	border: 1px solid var(--swfll-shell);
	color: var(--swfll-white);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.125em;
	padding: 0.55em 1.4em;
	border-radius: 999px;
}
.bm-header-cta__btn:hover {
	background-color: var(--swfll-shell);
	color: var(--swfll-navy);
}

/* ==========================================================================
   HERO REBUILD 2026-09-25 — content inside the container, brand-navy
   overlay with a bottom gradient, and the stat strip moved into the hero.
   ========================================================================== */

/* Navy overlay instead of the Gutenberg default "black" color option. */
.bm-hero .wp-block-cover__background.has-black-background-color {
	background-color: var(--swfll-navy) !important;
}

/* Content sits inside the theme's own container width, not flush to the
   viewport edge. */
.bm-hero .wp-block-cover__inner-container {
	position: relative;
	max-width: var(--swfll-container);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
	z-index: 2;
}
/* Mobile hero content sits close to the header's own text-size-driven
   height (60px is a floor, not the logo/hamburger's actual box), so the
   heading needs its own clearance or it renders under the absolutely
   positioned header. */
@media (max-width: 768px) {
	.bm-hero .wp-block-cover__inner-container { padding-top: 84px; }
}
/* Bottom gradient so the buttons read regardless of what is playing behind
   them in the video at that moment. Sits behind the text/buttons (z-index
   -1 within the inner-container's own stacking context) but above the
   video, because the inner-container itself already paints above the
   video and overlay span by DOM order. */
.bm-hero .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	left: -24px; right: -24px; bottom: -40px;
	height: 280px;
	background: linear-gradient(to bottom, rgba(11,29,51,0), rgba(11,29,51,0.85));
	pointer-events: none;
	z-index: -1;
}

/* Buttons: solid Shell White primary, outline Shell White secondaries, no
   gray translucent default WP button fill. */
.bm-hero .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--swfll-s4); }
.bm-hero .bm-btn,
.bm-hero .wp-block-button__link {
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.1em;
	padding: 14px 22px;
}
/* GeneratePress ships "a.wp-block-button__link:not(.has-background)" with
   its own gray default fill (rgb(85,85,94)). That selector's :not()
   argument counts toward specificity, putting it ahead of a plain
   two-class override, so the hero button rules below add the
   wp-block-button__link class to outrank it rather than reaching for
   !important. */
.bm-hero .wp-block-button__link.bm-btn--hero-primary {
	background-color: var(--swfll-shell);
	color: var(--swfll-navy);
	border-color: var(--swfll-shell);
}
.bm-hero .wp-block-button__link.bm-btn--hero-primary:hover {
	background-color: var(--swfll-white);
	color: var(--swfll-navy);
}
.bm-hero .wp-block-button.bm-btn--secondary {
	/* The wp:button block's OWN wrapping div also carries the
	   "bm-btn--secondary" class (that is where the global coral fill
	   for .bm-btn--secondary actually lands), so it needs the same
	   override as the anchor inside it or the coral box shows through
	   behind a transparent link. */
	background-color: transparent;
}
.bm-hero .wp-block-button__link.bm-btn--secondary {
	background-color: transparent;
	border: 2px solid var(--swfll-shell);
	color: var(--swfll-white);
}
.bm-hero .wp-block-button__link.bm-btn--secondary:hover {
	background-color: rgba(247, 244, 238, 0.15);
	color: var(--swfll-white);
}

/* Stat strip, moved inside the hero: a rounded outlined box, transparent
   fill, anchored bottom-left on desktop, stacked below the buttons (core
   WP columns block already stacks under 782px) on mobile. */
.bm-hero-stats.wp-block-columns {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: var(--swfll-s5);
	border: 1px solid var(--swfll-sand);
	border-radius: var(--swfll-radius-lg);
	background: transparent;
	padding: var(--swfll-s4) var(--swfll-s5);
	margin: var(--swfll-s6) 24px 0;
	max-width: calc(100% - 48px);
}
.bm-hero-stats.wp-block-columns .wp-block-column {
	flex: 1 1 170px;
	min-width: 150px;
}
.bm-hero-stats .bm-stat { white-space: normal; }
.bm-hero-stats .bm-stat__value,
.bm-hero-stats .bm-fact__value {
	font-family: var(--swfll-font-display);
	color: var(--swfll-white);
}
.bm-hero-stats p,
.bm-hero-stats .bm-stat__label {
	color: var(--swfll-shell);
	font-family: var(--swfll-font-body);
	text-transform: uppercase;
	font-size: var(--swfll-fs-xs);
	letter-spacing: 0.04em;
}
.bm-hero-stats .bm-stat__asof { color: var(--swfll-on-dark-mute); text-transform: none; }
@media (min-width: 769px) {
	.bm-hero-stats.wp-block-columns {
		position: absolute;
		left: 24px;
		bottom: 32px;
		margin: 0;
	}
}
@media (max-width: 768px) {
	.bm-hero-stats.wp-block-columns { margin: var(--swfll-s5) 16px 0; }
}

/* Now that the stat strip lives inside the hero, the standalone proof
   strip lower on the page is retired; nothing currently targets
   .bm-stat-strip on this page, this rule is kept only in case old markup
   resurfaces from a stale cache during rollout. */
.bm-stat-strip { display: none; }

/* ==========================================================================
   QC FIX PASS 2 — 2026-09-25
   Mobile hero layout, stat tile consistency, section containment, header
   fit at 1280.
   ========================================================================== */

/* --- Fix 1: mobile hero was squeezed into a narrow column ----------------
 * .bm-hero (a .wp-block-cover) is display:flex by default with NO
 * flex-direction set, so its two children — the inner-container and the
 * hero-stats columns block — sat side by side in a row at every width.
 * Desktop takes hero-stats out of flow with position:absolute so this
 * never showed there, but mobile never got that treatment, so the two
 * children shared the row and both got squeezed. Stacking them with
 * flex-direction:column at mobile fixes the root cause; the rest of this
 * block is the full-width / stacked treatment the QC note asked for.
 */
@media (max-width: 768px) {
	.bm-hero.wp-block-cover {
		flex-direction: column;
		align-items: stretch;
	}
	.bm-hero .wp-block-cover__inner-container {
		width: 100%;
		max-width: 100%;
		flex: 0 0 auto;
	}
	.bm-hero h1 {
		font-size: 36px;
	}
	.bm-hero .wp-block-buttons {
		flex-direction: column;
	}
	.bm-hero .wp-block-buttons .wp-block-button {
		width: 100%;
	}
	.bm-hero .wp-block-button__link {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	.bm-hero-stats.wp-block-columns {
		position: static;
		flex-direction: column;
		width: auto;
		max-width: none;
		margin: var(--swfll-s5) 24px 0;
	}
	.bm-hero-stats.wp-block-columns .wp-block-column {
		flex-basis: 100%;
		width: 100%;
		min-width: 0;
		border-left: none;
		border-top: 1px solid var(--swfll-sand);
		padding: var(--swfll-s3) 0;
	}
	.bm-hero-stats.wp-block-columns .wp-block-column:first-child {
		border-top: none;
		padding-top: 0;
	}

	/* Hamburger: no navy square. #mobile-menu-control-wrapper carries the
	   plain "main-navigation" class too, so it was picking up the site
	   nav's solid navy fill; the button itself gets a proper 44px tap
	   target with a transparent background and a white icon. */
	#mobile-menu-control-wrapper.main-navigation {
		background: transparent !important;
	}
	.site-header .menu-toggle {
		background: transparent !important;
		color: var(--swfll-white);
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.site-header .menu-toggle svg { fill: currentColor; width: 22px; height: 22px; }
}

/* --- Fix 2: the four hero stat tiles were inconsistent --------------------
 * Two used the [bm_stat] shortcode (a single inline span with the value,
 * label and as-of date all on one line); two used hand-written paragraphs
 * with a big numeral over a label. Both stat-tile columns now use
 * [bm_stat] (content edit, not shown here), and this restyles that one
 * shortcode's inline span into the same stacked layout for all four,
 * without touching the shortcode's PHP output — it is shared site-wide and
 * carries the compliance "as of" date, so it is safer to restyle in CSS
 * scoped to this box than to change what it prints everywhere.
 */
.bm-hero-stats .bm-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.bm-hero-stats .bm-stat__value {
	font-family: var(--swfll-font-display);
	font-size: 36px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--swfll-white);
}
.bm-hero-stats .bm-stat__label {
	font-family: var(--swfll-font-body);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--swfll-shell);
}
.bm-hero-stats .bm-stat__asof {
	font-size: 11px;
	opacity: 0.7;
	color: var(--swfll-shell);
	text-transform: none;
	letter-spacing: normal;
}
@media (min-width: 769px) {
	.bm-hero-stats.wp-block-columns {
		gap: 0;
	}
	.bm-hero-stats.wp-block-columns .wp-block-column {
		flex: 1 1 0;
		min-width: 0;
		border-left: 1px solid var(--swfll-sand);
		padding: 0 var(--swfll-s4);
	}
	.bm-hero-stats.wp-block-columns .wp-block-column:first-child {
		border-left: none;
		padding-left: 0;
	}
	.bm-hero-stats.wp-block-columns .wp-block-column:last-child {
		padding-right: 0;
	}
}

/* --- Fix 3: sections below the hero were flush against the viewport ------
 * The homepage runs on GeneratePress's "full width content" template (so
 * the hero video can go edge to edge), which also strips the theme's own
 * inside-article padding for the whole page, not just the hero. Every
 * direct child of .entry-content other than the full-bleed hero and the
 * IDX widget's own root div gets the theme's container width and gutters
 * back, plus consistent vertical rhythm between sections.
 */
.entry-content > * + * {
	margin-top: 64px;
}
body.page-id-1151 .entry-content > h2 {
	border-top: none;
	padding-top: 0;
}
.entry-content > *:not(.alignfull):not(.sidx-container) {
	max-width: var(--swfll-container) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}
@media (max-width: 768px) {
	.entry-content > * + * {
		margin-top: 40px;
	}
}

/* --- Extra: hero buttons overlapped the bottom-anchored stat box at
 * 1280x800 (a shorter viewport than the 1440x900 this hero was tuned
 * against). The cover's content is vertically centered as a whole block,
 * so reserving bottom space in the inner-container's own padding shifts
 * that centered content up and off the absolutely-positioned stat box
 * without changing the hero's min-height or the stat box's own anchor.
 * Measured before this fix: buttons bottom 490px vs stats top 443px, a
 * 47px overlap at 1280x800.
 */
@media (min-width: 769px) {
	.bm-hero .wp-block-cover__inner-container {
		padding-bottom: 200px;
	}
}

/* --- Fix 4: header clipped at 1440, needs to fit at 1280 without wrap ----
 * The header was centering its content to the theme's 1120px article
 * container (padding-inline: max(24px, calc((100% - 1120px)/2))), which at
 * 1440 alone burns 320px of the row on side padding before the nav gets
 * any space. The header is a chrome element, not an article, so it only
 * needs the same 24px gutter as the rest of the site, not the same
 * centered content width — that frees roughly 270px back to the nav.
 */
@media (min-width: 769px) {
	.site-header {
		padding-inline: 24px;
	}
	/* .inside-header actually wraps the WHOLE header row in this markup
	   (branding, the mobile toggle nav, and #site-navigation are all
	   inside it, confirmed by tracing the raw HTML), not a sibling of
	   #site-navigation as the first pass assumed. It is the correct
	   element to be the row's flex container, sized to the header's own
	   available width; the actual overflow came from its flex-item
	   descendants defaulting to min-width:auto, which floors their
	   shrinkability at their own content size and lets the row overflow
	   past 1232px (1280 minus the 24px gutters) instead of shrinking. */
	.site-header .inside-header {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.site-header #site-navigation,
	.site-header #site-navigation .inside-navigation,
	.site-header .main-nav,
	.site-header .main-nav > ul.menu,
	.site-header .main-nav > ul.menu > li {
		min-width: 0;
	}
	/* GP's own nav ul carries flex-wrap:wrap at a specificity this rule's
	   plain class selector does not clear, which is what actually made
	   "Contact Me" drop to a second row at 1280 (confirmed by reading
	   getComputedStyle(ul).flexWrap === "wrap" and the row's own summed
	   child width, ~890px with gaps, exceeding the ~831px it was given).
	   Forcing nowrap here and trimming gaps/padding below closes that
	   ~60px gap instead of letting the row grow to fit. */
	.site-header .main-nav > ul.menu {
		gap: 12px;
		flex-wrap: nowrap !important;
	}
	.site-header .main-nav > ul.menu > li {
		flex-shrink: 0;
	}
	.site-header .main-nav > ul.menu > li > a {
		font-size: 14px;
		padding-left: 8px;
		padding-right: 8px;
	}
	.site-header #site-navigation .inside-navigation {
		gap: var(--swfll-s2);
		flex-wrap: nowrap;
	}
	.bm-header-cta { gap: 10px; margin-left: var(--swfll-s3); flex-shrink: 0; }
	.bm-header-cta__btn { padding: 0.55em 1.1em; white-space: nowrap; }
	.bm-header-cta__phone { white-space: nowrap; }
}

/* ==========================================================================
   INTERIOR PAGES BUILD 2026-09-25
   Full-bleed image heroes for Buyers, Sellers, Relocation, About, Contact,
   Success Stories, and Waterfront & Gulf-Access Homes, plus the navy
   three-card trio used on Buyers/Sellers/About.
   ========================================================================== */

.bm-hero--interior { min-height: 55vh; }
@media (max-width: 768px) {
	.bm-hero--interior { min-height: 40vh; }
}
.bm-hero--navy-only .wp-block-cover__background { opacity: 1 !important; }

.bm-hero--interior img.wp-block-cover__image-background {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.wp-block-columns:has(.bm-navy-card) { align-items: stretch; }
.bm-navy-card { display: flex; flex-direction: column; }
.bm-navy-card h3::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--swfll-teal);
	margin-right: 10px;
	vertical-align: middle;
}

.bm-team-card { text-align: center; padding: var(--swfll-s4) var(--swfll-s3); }
.bm-team-card h4 { margin-bottom: var(--swfll-s1); }
.bm-team-card p { color: var(--swfll-ink-muted); margin-bottom: 0; font-size: var(--swfll-fs-sm); }

.bm-contact-columns { align-items: start; gap: var(--swfll-s6); }
.bm-contact-details { background-color: var(--swfll-shell); border-radius: var(--swfll-radius-lg); padding: var(--swfll-s5); }
.bm-contact-details h2, .bm-contact-details h3 { margin-top: 0; }
@media (max-width: 768px) {
	.bm-contact-columns { gap: var(--swfll-s5); }
}

.bm-review cite a { color: var(--swfll-teal-deep); text-decoration: underline; }

/* QC fix: inline [bm_stat] tiles used in interior-page body copy (not
   the hero) still had white-space:nowrap and overflowed narrow phones
   when the label text was long. */
@media (max-width: 600px) {
	.bm-stat { white-space: normal; }
}

/* QC fix 2026-09-26: consent checkbox label inside the navy CTA band
   inherited the theme's default dark text color, invisible on navy.
   Contact page's form sits on a white card, so it is left alone. */
.bm-cta .ff-el-form-check-label,
.bm-cta .ff-el-form-check-label span {
	color: #fff;
}
.bm-cta .ff-el-form-check-label a {
	color: #fff;
	text-decoration: underline;
}

/* ===== Blog / posts build 2026-09-26 ===== */
.bm-post-hero{background-color:#0B1D33;background-size:cover;background-position:center;color:#fff;padding:90px 24px 60px;text-align:center;}
.bm-post-hero__inner{max-width:900px;margin:0 auto;}
.bm-post-hero__title{color:#fff;font-size:clamp(28px,4vw,44px);margin-bottom:.5rem;}
.bm-post-hero__meta{color:#E5DCC9;font-size:14px;letter-spacing:.05em;text-transform:uppercase;}
.bm-post-hero--noimg{background-color:#0B1D33;}
.bm-cta{background:#0B1D33;color:#fff;padding:40px 24px;text-align:center;border-radius:8px;margin-top:48px;}
.bm-cta h3{color:#fff;margin-bottom:.5rem;}
.bm-cta p{color:#E5DCC9;margin-bottom:1.25rem;}

.bm-page-hero{background:#0B1D33;color:#fff;padding:70px 24px 40px;text-align:center;}
.bm-page-hero__inner h1{color:#fff;margin-bottom:.5rem;}
.bm-page-hero__inner p{color:#E5DCC9;}

/* Blog index card grid */
.blog #primary,.archive #primary,.home:not(.page) #primary{max-width:1200px;margin:0 auto;}
.blog #primary .site-main,.home:not(.page) #primary .site-main{display:flex;flex-wrap:wrap;gap:28px;justify-content:flex-start;}
.blog #primary article,.home:not(.page) #primary article{flex:1 1 300px;max-width:calc(33.333% - 19px);background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);display:flex;flex-direction:column;}
.blog #primary article img,.home:not(.page) #primary article img{width:100%;height:200px;object-fit:cover;}
.blog #primary article .entry-header,.home:not(.page) #primary article .entry-header{padding:16px 18px 0;}
.blog #primary article .entry-content,.home:not(.page) #primary article .entry-content,.blog #primary article .entry-summary,.home:not(.page) #primary article .entry-summary{padding:0 18px 18px;}
.blog #primary article .entry-meta,.home:not(.page) #primary article .entry-meta{padding:0 18px;color:#6b7280;font-size:13px;}
@media (max-width:900px){.blog #primary article,.home:not(.page) #primary article{max-width:calc(50% - 14px);}}
@media (max-width:600px){.blog #primary article,.home:not(.page) #primary article{max-width:100%;}}

.bm-sitemap ul{list-style:none;margin:0 0 24px;padding-left:0;}
.bm-sitemap ul ul{padding-left:20px;margin-top:4px;}
.bm-sitemap h2{margin-top:28px;}

.bm-page-hero--full{flex:1 1 100%;width:100%;order:-1;}

/* ==========================================================================
   QC FIX PASS 3 — 2026-09-26
   Properties/IDX map 3px mobile overflow.
   ========================================================================== */

/* Leaflet's internal ".leaflet-proxy" helper div (used for zoom animation)
 * is transformed far off-canvas during its animation and is not meant to be
 * visible, but its unclipped width was still counted into the document's
 * own scrollWidth, adding 3px of horizontal scroll on mobile. Clipping it at
 * the map's own wrapper contains it without touching the rest of the page.
 */
.sidx-map-container {
	overflow-x: hidden;
}

.sidx-container {
	overflow-x: hidden;
}

/* ---------------------------------------------------------------------
 * Agent pages (/agents/ and /agents/<slug>/) — 2026-09-26
 * ------------------------------------------------------------------- */
.bm-agent-hero .wp-block-cover__inner-container { width: 100%; }
.bm-agent-hero__columns { align-items: center; }
.bm-agent-hero .bm-headshot img {
	border-radius: var(--swfll-radius-lg);
	box-shadow: var(--swfll-shadow);
	width: 100%;
	height: auto;
	display: block;
}
@media (max-width: 768px) {
	.bm-agent-hero { min-height: auto; }
	.bm-agent-hero .wp-block-cover__inner-container { padding-top: var(--swfll-s4); padding-bottom: var(--swfll-s4); }
	.bm-agent-hero__columns.wp-block-columns { flex-direction: column-reverse; }
	.bm-agent-hero__columns .wp-block-column { flex-basis: 100% !important; }
	.bm-agent-hero .bm-headshot { max-width: 220px; margin: 0 auto var(--swfll-s3); }
}

/* Our Team page: photo team cards (distinct from the plain-text bm-team-card
   already used on the About page; same base class, image adds naturally) */
.bm-team-card .bm-headshot img { max-width: 180px; margin: 0 auto var(--swfll-s2); }
.bm-team-card { display: flex; flex-direction: column; align-items: center; }