/**
 * SWFL Insider — shared design system.
 *
 * ONE token source: the Elementor Kit publishes --e-global-* custom properties.
 * This file consumes them and never hard-codes a hex or a font stack, so a Kit
 * change propagates to the PHP-rendered community guides for free.
 *
 * Fallbacks mirror the approved Claude Design r3 bundle so the templates stay
 * correct if the Kit CSS is momentarily unavailable.
 */

:root {
	--swfl-navy:        var(--e-global-color-primary,   #14263F);
	--swfl-teal:        var(--e-global-color-secondary, #15697A);
	--swfl-ink:         var(--e-global-color-text,      #41546A);
	--swfl-muted:       var(--e-global-color-accent,    #65788C);
	--swfl-line:        #E2E8EA;
	--swfl-line-soft:   #EAEFF1;
	--swfl-panel:       #FBF7F0;
	--swfl-panel-edge:  #E8DCC8;
	--swfl-surface:     #FBF7F0;
	--swfl-brass:       #8A6A3F;
	--swfl-white:       #FFFFFF;

	--swfl-font-display: var(--e-global-typography-primary-font-family, 'Newsreader'), Georgia, serif;
	--swfl-font-body:    var(--e-global-typography-text-font-family, 'IBM Plex Sans'), system-ui, sans-serif;
	--swfl-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

	--swfl-radius:      8px;
	--swfl-radius-sm:   3px;
	--swfl-max:         1200px;
	--swfl-gap:         clamp(16px, 2vw, 28px);
}

/* ---------- shell ---------- */

.swfl-guide {
	font-family: var(--swfl-font-body);
	color: var(--swfl-ink);
	line-height: 1.65;
}
.swfl-wrap {
	max-width: var(--swfl-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
}
:where(.swfl-guide) h1,
:where(.swfl-guide) h2,
:where(.swfl-guide) h3 {
	font-family: var(--swfl-font-display);
	color: var(--swfl-navy);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
}
:where(.swfl-guide) h1 { font-size: clamp(32px, 3.8vw, 52px); margin: 0 0 12px; }
:where(.swfl-guide) h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 48px 0 16px; }
:where(.swfl-guide) h3 { font-size: clamp(18px, 1.6vw, 22px); margin: 24px 0 8px; }
:where(.swfl-guide) a { color: var(--swfl-teal); }

/* ---------- eyebrow + dateline (small print, never a headline) ---------- */

.swfl-eyebrow {
	font: 500 10px/1 var(--swfl-font-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--swfl-teal);
}
.swfl-dateline {
	font: 400 11px/1.5 var(--swfl-font-mono);
	color: var(--swfl-muted);
}
.swfl-source {
	font: 400 10.5px/1.4 var(--swfl-font-mono);
	color: var(--swfl-muted);
	display: block;
	margin-top: 3px;
}
.swfl-fineprint {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--swfl-muted);
	font-style: italic;
}

/* ---------- hero ---------- */

.swfl-hero { padding-block: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 36px); }
.swfl-hero__meta { font-size: 16px; color: var(--swfl-ink); margin: 0 0 18px; }
.swfl-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.swfl-badge {
	display: inline-flex; align-items: center; gap: 9px;
	border: 1px solid var(--swfl-line);
	border-radius: var(--swfl-radius);
	padding: 8px 13px; background: var(--swfl-white);
}
.swfl-badge__key {
	display: inline-grid; place-items: center;
	min-width: 26px; height: 26px; padding: 0 6px;
	background: var(--swfl-navy); color: var(--swfl-white);
	border-radius: var(--swfl-radius-sm);
	font: 500 13px/1 var(--swfl-font-body);
}
.swfl-badge__label {
	font: 500 10px/1.25 var(--swfl-font-mono);
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--swfl-muted);
}

/* ---------- at-a-glance band (the signature element) ---------- */

.swfl-glance {
	background: var(--swfl-navy);
	background-image: linear-gradient(120deg, #1A3355 0%, #14263F 60%, #0E1C33 100%);
	color: var(--swfl-white);
	margin-block: clamp(20px, 3vw, 36px);
}
.swfl-glance__head {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: baseline;
	padding: 18px 0 14px;
}
.swfl-glance__head .swfl-eyebrow { color: #6FD3E0; }
.swfl-glance__title {
	font-family: var(--swfl-font-display);
	font-size: clamp(22px, 2.3vw, 31px);
	font-weight: 500; color: var(--swfl-white); margin: 0; line-height: 1.15;
}
/* F4: navy-safe link colour must beat the global teal link rule. */
.swfl-glance a { color: #6FD3E0; }
/* F6: navy-safe dateline. */
.swfl-glance .swfl-dateline { color: #B7C6D4; }
.swfl-glance__head a { display: inline-block; padding: 8px 0; }
.swfl-glance__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: 0;
	border-top: 1px solid rgba(255,255,255,.14);
	margin-bottom: 22px;
}
/* Hairlines come from cell borders, so empty tracks are invisible. */
.swfl-cell {
	background: transparent;
	padding: 16px 18px 18px;
	border-right: 1px solid rgba(255,255,255,.14);
	border-bottom: 1px solid rgba(255,255,255,.14);
}
.swfl-cell__label {
	font: 500 10px/1.2 var(--swfl-font-mono);
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--swfl-muted);
	display: block; margin-bottom: 8px;
}
.swfl-cell__value {
	font-family: var(--swfl-font-display);
	font-size: clamp(19px, 1.9vw, 26px);
	color: var(--swfl-navy); line-height: 1.15;
}
/* Inside the navy band only. */
.swfl-glance .swfl-cell__value,
.swfl-glance .swfl-cell__value--sm { color: var(--swfl-white); }
.swfl-glance .swfl-cell__label { color: #93A7BC; }
.swfl-cell__value--sm { font-size: 16px; }
.swfl-cell__note { font-size: 12.5px; color: #B7C6D4; margin-top: 5px; }
.swfl-cell__unavailable { font-style: italic; color: #B7C6D4; font-family: var(--swfl-font-body); font-size: 15px; }
.swfl-cell a { color: #6FD3E0; }

/* ---------- cards / rows ---------- */

.swfl-card {
	background: var(--swfl-white);
	border: 1px solid var(--swfl-line);
	border-radius: var(--swfl-radius);
	padding: 17px 18px;
}
.swfl-rows { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.swfl-row {
	display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: start;
	border: 1px solid var(--swfl-line); border-radius: var(--swfl-radius);
	padding: 14px 16px; background: var(--swfl-white);
}
.swfl-row__label { font-weight: 500; color: var(--swfl-navy); }
.swfl-row__value { font-family: var(--swfl-font-display); font-size: 20px; color: var(--swfl-navy); }

/* ---------- sponsor grid ---------- */

.swfl-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 16px; align-items: start; padding: 0; margin: 18px 0 0; list-style: none; }
.swfl-slot {
	border: 1px solid var(--swfl-line);
	border-radius: var(--swfl-radius);
	padding: 15px 17px; background: var(--swfl-white);
}
.swfl-slot--filled {
	border-color: var(--swfl-panel-edge);
	border-left: 3px solid var(--swfl-teal);
	background: linear-gradient(180deg, var(--swfl-panel) 0%, var(--swfl-white) 62px);
	box-shadow: 0 2px 10px rgba(20,38,63,.06);
}
.swfl-slot__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.swfl-slot__cat { font: 500 10px/1 var(--swfl-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--swfl-muted); }

/* The paid-disclosure chip: high contrast, never colour-only, never removable. */
.swfl-chip {
	display: inline-flex; align-items: center; gap: 6px;
	font: 500 10px/1 var(--swfl-font-mono);
	letter-spacing: 0.1em; text-transform: uppercase;
	border-radius: var(--swfl-radius-sm); padding: 6px 9px;
}
.swfl-chip--sponsored { background: var(--swfl-navy); color: var(--swfl-white); }
.swfl-chip--sponsored::before { content: "\25C6"; color: var(--swfl-brass); font-size: 9px; }
.swfl-chip--open { background: var(--swfl-panel); color: var(--swfl-teal); border: 1px solid var(--swfl-panel-edge); }
.swfl-chip--held { background: var(--swfl-line-soft); color: var(--swfl-muted); }

.swfl-slot__name { font-family: var(--swfl-font-display); font-size: 21px; color: var(--swfl-navy); margin: 8px 0 4px; }
.swfl-slot__verify { font-size: 13px; color: var(--swfl-ink); display: flex; gap: 8px; align-items: baseline; }
.swfl-slot__verify::before {
	content: ""; width: 13px; height: 13px; flex: 0 0 auto;
	background: var(--swfl-teal); border-radius: 2px; display: inline-block;
}
.swfl-slot__cta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }

.swfl-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font: 500 14px/1 var(--swfl-font-body);
	min-height: 44px;
	padding: 12px 18px; border-radius: var(--swfl-radius);
	border: 1px solid transparent; text-decoration: none; cursor: pointer;
}
.swfl-btn--primary { background: var(--swfl-brass); color: var(--swfl-white); }
.swfl-btn--primary:hover { background: #7B5F38; color: var(--swfl-white); }
.swfl-btn--ghost { background: var(--swfl-white); color: var(--swfl-teal); border-color: var(--swfl-line); }
.swfl-btn--block { width: 100%; }

/* ---------- disclosure band ---------- */

.swfl-disclosure {
	background: var(--swfl-panel);
	border: 1px solid var(--swfl-panel-edge);
	border-radius: var(--swfl-radius);
	padding: 14px 16px; font-size: 13.5px; color: #2C3E52;
}

/* ---------- nearby / two-up ---------- */

.swfl-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }

/* ---------- focus + motion ---------- */

.swfl-guide :focus-visible { outline: 2px solid var(--swfl-teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.swfl-guide * { transition: none !important; animation: none !important; }
}

/* ---------- pending / unverified (bundle's dashed-mono treatment) ---------- */

.swfl-pending {
	display: block;
	border: 1px dashed var(--swfl-line-soft);
	border-color: #C6D2D6;
	background: var(--swfl-surface);
	border-radius: var(--swfl-radius-sm);
	padding: 10px 12px;
	font: 400 11.5px/1.6 var(--swfl-font-mono);
	color: #5A7C86;
}
.swfl-pending--inline { display: inline-block; padding: 5px 9px; }

@media (max-width: 600px) {
	.swfl-row { grid-template-columns: 1fr; gap: 4px; }
	.swfl-row__label { font-size: 13px; color: var(--swfl-muted); }
}

/* ---------------------------------------------------------------------------
 * Base element rules above use :where() (zero specificity) so every component
 * class wins naturally. The earlier guard block is retired — it was a second
 * specificity layer that leaked white onto white cards (R3).
 * ------------------------------------------------------------------------ */

/* W2: .swfl-pending was 4.37:1 at 11.5px — darken to clear 4.5:1. */
.swfl-pending { color: #4A6B75; }

/* W3: an anchor carrying BOTH .swfl-dateline and the link role must still read
   as a link — .swfl-glance .swfl-dateline (0,2,0) was beating .swfl-glance a. */
.swfl-guide .swfl-glance a.swfl-dateline { color: #6FD3E0; }

/* W4: Nearby has 5 items — a 3-col grid divides cleanly instead of 4+orphan. */
.swfl-nearby { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 900px) { .swfl-nearby { grid-template-columns: repeat(3, 1fr); } }

/* W5: keep the verify label and its licence number on one visual line. */
.swfl-slot__verify { flex-wrap: wrap; align-items: center; }
.swfl-slot__verify .swfl-source { margin-top: 0; margin-left: 4px; display: inline; }

/* W3 (new pages): 5 cards in a 4-col grid orphaned the 5th — 3 columns divide cleanly. */
@media (min-width: 900px) {
	.swfl-slots--cards { grid-template-columns: repeat(3, 1fr); }
}
/* W2 (new pages): keep the footer disclosure in-system instead of an inline style. */
.swfl-fineprint--band { margin: 32px 0 40px; }

/* ---------------------------------------------------------------------------
 * Site-wide card-image helper (homepage/hub-index shortcode cards, which do
 * not load guide-bundle.css). LiteSpeed's WebP replacement wraps imgs in a
 * <picture> carrying the class and can drop inline styles, so cover/position
 * must come from a stylesheet and also reach the img INSIDE the wrapper.
 * ------------------------------------------------------------------------ */
/* The render pipeline moves the class onto a wrapping <picture>; on WP PAGES
 * the theme's content-image height:auto rule then outranks a single-class
 * selector (Aug 3, city pages) — the type+class forms win the cascade on
 * every wrap shape without !important. */
.swfl-cardimg,
.swfl-cardimg img,
img.swfl-cardimg,
picture.swfl-cardimg,
picture.swfl-cardimg > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.swfl-cardimg--left,
.swfl-cardimg--left img,
picture.swfl-cardimg--left > img {
	object-position: left center;
}

/* r6 homepage hero rotator (Aug 2, 2026): the render pipeline strips inline
 * styles from <img> tags in the hero HTML widget (femrenew-class gotcha), so
 * slide-image geometry lives here, keyed on the slide-div class. The --left
 * variant left-anchors ultra-wide sources (Fort Myers Shores) so signage
 * stays in frame. */
.swfl-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.swfl-hero-slide--left img {
	object-position: left center;
}

/* The correction form's Elementor column gutter adds 5px beyond each side of
 * the viewport at phone widths. Keep the fix page-scoped so other Elementor
 * forms retain their configured gutters. */
@media (max-width: 767px) {
	.page-id-56 .elementor-form-fields-wrapper {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}