/* ============================================================================
 * Page sections — core (loaded only on Flexible Page).
 *
 * Tokens follow specs/heating-cooling/design-system.md. Everything is scoped
 * to .fb so nothing leaks into the rest of the site, and selectors are
 * specific enough to beat the legacy main.css element rules
 * (a:hover/a:focus colour, :focus-visible amber outline, h1–h6 colour).
 *
 * Buttons deliberately avoid the class names "inline-flex" and "rounded-",
 * so the theme's global !important hover (tailwind.src.css) does not apply:
 * each variant has its own accessible hover.
 *
 * Spacing: 8px grid (4px half steps). Components never use raw lengths for
 * margins, paddings or gaps: they use the --fb-space-* scale or the semantic
 * tokens below, which step up at the theme breakpoints (640 / 1024 / 1280 /
 * 1630) instead of fluid clamp() values.
 *
 *   1. Brand tokens        6. Rich text (.fb-rt)
 *   2. Spacing tokens      7. Buttons
 *   3. Section themes      8. Focus
 *   4. Rhythm / container  9. Grids
 *   5. Headings           10. Cards, icons, lists, media
 *                         11. Motion / forced colours
 * ==========================================================================*/

/* ---- 1. Brand tokens (Heating & Cooling) ---------------------------------*/
.fb {
	--fb-brand: #c72026;          /* surfaces, icons */
	--fb-action: #c72026;         /* button background (white text 5.73:1) */
	--fb-action-hover: #9f1a1e;   /* 7.95:1 */
	--fb-brand-text: #c72026;     /* eyebrows, links on white/#fafafa (5.73 / 5.49:1) */
	--fb-brand-surface: #c72026;  /* "brand" section background (white text 5.73:1) */
	--fb-brand-tint: rgba(199, 32, 38, .1);
	--fb-navy: #0a1634;
	--fb-navy-hover: #223463;
	--fb-ink: #1a1a1a;
	--fb-muted: #4a5565;
	--fb-subtle: #6b7280;
	--fb-line: #d1d5dc;
	--fb-field: #767f90;
	--fb-grey-50: #fafafa;
	--fb-grey-100: #f3f4f6;
	--fb-star: #ffc000;
	--fb-font-display: "Gasoek One", Inter, system-ui, sans-serif;
	--fb-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--fb-radius-btn: 6px;
	--fb-radius-card: 16px;
	--fb-radius-media: 20px;
	--fb-shadow-card: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .05);
	--fb-shadow-card-hover: 0 0 0 1px rgba(0, 0, 0, .05), 0 12px 28px rgba(15, 23, 42, .12);
	--fb-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--fb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--fb-check-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c72026' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---- 2. Spacing tokens (8px grid) ------------------------------------------
 * Scale: 4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 64 · 96 · 120
 * Semantic tokens (base → 640 → 1024 → 1280 → 1630):
 *   gutter        24 → 40 → 64 → — → 136   container side padding
 *   section-y     64 → 96 → 120             section top/bottom
 *   section-y-sm  40 → 48 → 64              "compact" sections
 *   head-gap      16 → — → 24               eyebrow / title / intro
 *   head-space    32 → — → 48               header → section content
 *   gap           16 → 24 → 32              card grids
 *   gap-cols      32 → 40 → 48              text columns, steps
 *   gap-split     40 → 48 → 64 → 96 → 128   two-column layouts
 *   card-pad      24 → 32 → 40              card padding
 *   actions       24 → — → 32               text → buttons                */
.fb {
	--fb-space-1: 4px;
	--fb-space-2: 8px;
	--fb-space-3: 12px;
	--fb-space-4: 16px;
	--fb-space-5: 24px;
	--fb-space-6: 32px;
	--fb-space-7: 40px;
	--fb-space-8: 48px;
	--fb-space-9: 64px;
	--fb-space-10: 96px;
	--fb-space-11: 120px;
	--fb-gutter: 24px;
	--fb-section-y: 64px;
	--fb-section-y-sm: 40px;
	--fb-head-gap: 16px;
	--fb-head-space: 32px;
	--fb-gap: 16px;
	--fb-gap-cols: 32px;
	--fb-gap-split: 40px;
	--fb-card-pad: 24px;
	--fb-actions: 24px;
}
@media (min-width: 640px) {
	.fb {
		--fb-gutter: 40px;
		--fb-section-y: 96px;
		--fb-section-y-sm: 48px;
		--fb-gap: 24px;
		--fb-gap-cols: 40px;
		--fb-gap-split: 48px;
		--fb-card-pad: 32px;
	}
}
@media (min-width: 1024px) {
	.fb {
		--fb-gutter: 64px;
		--fb-section-y: 120px;
		--fb-section-y-sm: 64px;
		--fb-head-gap: 24px;
		--fb-head-space: 48px;
		--fb-gap: 32px;
		--fb-gap-cols: 48px;
		--fb-gap-split: 64px;
		--fb-card-pad: 40px;
		--fb-actions: 32px;
	}
}
@media (min-width: 1280px) { .fb { --fb-gap-split: 96px; } }
@media (min-width: 1630px) { .fb { --fb-gutter: 136px; --fb-gap-split: 128px; } }

/* ---- 3. Section themes ----------------------------------------------------
 * Components only read --t-* tokens, so every section works on every theme. */
.fb {
	--t-bg: #fff;
	--t-fg: var(--fb-ink);
	--t-heading: var(--fb-navy);
	--t-muted: var(--fb-muted);
	--t-eyebrow: var(--fb-brand-text);
	--t-link: var(--fb-brand-text);
	--t-link-hover: var(--fb-action-hover);
	--t-marker: var(--fb-brand);
	--t-accent: var(--fb-brand);          /* quote bars, rules, step numbers */
	--t-surface: var(--fb-grey-50);       /* code, blockquote, table stripes */
	--t-surface-strong: var(--fb-navy);   /* table head, pre */
	--t-surface-strong-fg: #fff;
	--t-card-bg: #fff;
	--t-card-shadow: var(--fb-shadow-card);
	--t-card-border: transparent;
	--t-icon-bg: var(--fb-grey-100);
	--t-icon-fg: var(--fb-brand);
	--t-rule: rgba(0, 0, 0, .1);
	--t-focus: var(--fb-navy);
	--t-check-bg: var(--fb-brand);
	--t-check-fg: #fff;
	--t-check: var(--fb-check);
	--t-btn1-bg: var(--fb-action);
	--t-btn1-fg: #fff;
	--t-btn1-hover: var(--fb-action-hover);
	--t-btn2-bg: #000;
	--t-btn2-fg: #fff;
	--t-btn2-border: #000;
	--t-btn2-hover-bg: var(--fb-navy);
	--t-btn2-hover-fg: #fff;
	--t-btn3-fg: var(--fb-navy);
	--t-btn3-border: rgba(10, 22, 52, .35);
	position: relative;
	isolation: isolate;
	background: var(--t-bg);
	color: var(--t-fg);
	font-family: var(--fb-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.fb-theme-muted {
	--t-bg: var(--fb-grey-50);
	--t-surface: #fff;
	background-color: var(--fb-grey-50);
	background-image: linear-gradient(rgba(209, 213, 220, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(209, 213, 220, .35) 1px, transparent 1px);
	background-size: 32px 32px;
}
.fb-theme-dark,
.fb-theme-brand {
	--t-fg: rgba(255, 255, 255, .86);
	--t-heading: #fff;
	--t-muted: rgba(255, 255, 255, .78);
	--t-eyebrow: #fff;
	--t-link: #fff;
	--t-link-hover: #fff;
	--t-marker: #fff;
	--t-surface: rgba(255, 255, 255, .08);
	--t-surface-strong: rgba(255, 255, 255, .14);
	--t-card-bg: rgba(255, 255, 255, .05);
	--t-card-shadow: none;
	--t-card-border: rgba(255, 255, 255, .45);
	--t-icon-bg: var(--fb-brand);
	--t-icon-fg: #fff;
	--t-rule: rgba(255, 255, 255, .24);
	--t-focus: #fff;
	--t-btn2-bg: transparent;
	--t-btn2-fg: #fff;
	--t-btn2-border: #fff;
	--t-btn2-hover-bg: #fff;
	--t-btn2-hover-fg: var(--fb-navy);
	--t-btn3-fg: #fff;
	--t-btn3-border: rgba(255, 255, 255, .7);
}
.fb-theme-dark { --t-bg: var(--fb-navy); }
.fb-theme-brand {
	--t-bg: var(--fb-brand-surface);
	--t-fg: #fff;
	--t-muted: rgba(255, 255, 255, .95); /* .78 would be 3.97:1 on the brand colour */
	--t-accent: #fff;
	--t-icon-bg: #fff;
	--t-icon-fg: var(--fb-brand-surface);
	--t-card-bg: rgba(255, 255, 255, .08);
	--t-check-bg: #fff;
	--t-check-fg: var(--fb-brand-surface);
	--t-check: var(--fb-check-brand);
	--t-btn1-bg: #fff;
	--t-btn1-fg: var(--fb-navy);
	--t-btn1-hover: #e8ecf5;
}

/* ---- 4. Rhythm and container ---------------------------------------------*/
.fb-space-default { padding-block: var(--fb-section-y); }
.fb-space-compact { padding-block: var(--fb-section-y-sm); }
.fb-space-flush { padding-block: 0 var(--fb-section-y); }
.fb-space-compact.fb-space-flush { padding-top: 0; }

.fb-container {
	width: 100%;
	max-width: 1911px;
	margin-inline: auto;
	padding-inline: var(--fb-gutter);
}

.fb-narrow { max-width: 864px; margin-inline: auto; }
.fb-wide { max-width: 1200px; margin-inline: auto; }
.fb-measure { max-width: 760px; margin-inline: auto; }
.fb-measure--wide { max-width: 1104px; margin-inline: auto; }
.fb-bleed { width: 100%; }
.fb-center { text-align: center; }
.fb-foot { display: flex; justify-content: center; margin: var(--fb-head-space) 0 0; }

/* ---- 5. Headings ---------------------------------------------------------
 * The header always keeps its space to the content below it; containers that
 * lay the header out beside content (split, CTA, contact) reset it there. */
.fb-head { display: grid; gap: var(--fb-head-gap); max-width: 60rem; margin: 0 0 var(--fb-head-space); }
.fb-head--center { margin-inline: auto; text-align: center; justify-items: center; }

.fb .fb-eyebrow {
	margin: 0;
	font: 500 clamp(.875rem, .829rem + .19vw, 1rem)/1.25 var(--fb-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--t-eyebrow);
}
.fb .fb-h2,
.fb .fb-display {
	margin: 0;
	font-family: var(--fb-font-display);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--t-heading);
	text-wrap: balance;
	overflow-wrap: break-word;
}
.fb .fb-h2 { font-size: clamp(2rem, 1.698rem + 1.238vw, 2.8125rem); line-height: 1.03; letter-spacing: -.01em; }
.fb .fb-display { font-size: clamp(1.75rem, .96rem + 3.24vw, 4.0625rem); line-height: 1.03; letter-spacing: -.03em; }
.fb .fb-h3 {
	margin: 0;
	font: 700 clamp(1.25rem, 1.157rem + .381vw, 1.5rem)/1.25 var(--fb-font-body);
	color: var(--t-heading);
}
.fb-caption { margin-top: var(--fb-space-3); font-size: .875rem; line-height: 1.45; color: var(--t-muted); text-align: center; }

/* Google rating badge (above a section heading) — same as the theme's badge */
.fb .fb-rating,
.fb .fb-rating:visited,
.fb .fb-rating:hover,
.fb .fb-rating:focus {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fb-space-2) var(--fb-space-3);
	margin: 0;
	color: var(--t-fg);
	font: 400 clamp(1rem, .9rem + .4vw, 1.25rem)/1.2 var(--fb-font-body);
	letter-spacing: -.02em;
	text-decoration: none;
}
.fb a.fb-rating { transition: opacity .2s ease; }
.fb a.fb-rating:hover { opacity: .8; }
.fb a.fb-rating:hover .fb-rating__text { text-decoration: underline; text-underline-offset: 3px; }
.fb-rating__g { display: block; flex: none; width: 24px; height: 24px; }
.fb-rating__stars { color: var(--fb-star); }
@media (min-width: 1024px) { .fb-rating__g { width: 28px; height: 28px; } }

/* ---- 6. Rich text (.fb-rt) — every WYSIWYG field ---------------------------
 * Full coverage of what TinyMCE / the block editor / oEmbed can output.
 * Colours come from the section theme, so it reads on white, grey, navy and
 * brand backgrounds. Modifiers: --lead (intro), --small (cards), --muted,
 * --center, --quote / --quote-sm (testimonials), --article (long form). */
.fb-rt {
	--rt-flow: var(--fb-space-5);
	color: var(--t-fg);
	font-size: clamp(1rem, .954rem + .19vw, 1.125rem);
	line-height: 1.7;
	overflow-wrap: break-word;
	text-wrap: pretty;
}
.fb-rt > * { margin-block: 0; }
.fb-rt > * + * { margin-top: var(--rt-flow); }
.fb-rt::after { content: ""; display: table; clear: both; }

/* Headings (h1 is reserved for the hero; an h1 typed in the editor looks like h2) */
.fb-rt :where(h1, h2, h3, h4, h5, h6) { color: var(--t-heading); text-wrap: balance; scroll-margin-top: 8rem; }
.fb-rt :where(h1, h2) { font: 400 clamp(1.625rem, 1.44rem + .76vw, 2.125rem)/1.1 var(--fb-font-display); text-transform: uppercase; letter-spacing: -.01em; }
.fb-rt h3 { font: 700 clamp(1.1875rem, 1.1rem + .38vw, 1.4375rem)/1.3 var(--fb-font-body); }
.fb-rt h4 { font: 700 clamp(1.0625rem, 1.03rem + .15vw, 1.1875rem)/1.35 var(--fb-font-body); }
.fb-rt :where(h5, h6) { font: 700 .875rem/1.4 var(--fb-font-body); letter-spacing: .06em; text-transform: uppercase; }
.fb-rt h6 { color: var(--t-muted); }
.fb-rt > :where(h1, h2, h3, h4, h5, h6):not(:first-child) { margin-top: var(--fb-space-7); }
.fb-rt > :where(h1, h2, h3, h4, h5, h6) + * { margin-top: var(--fb-space-3); }

/* Inline */
.fb-rt :where(strong, b) { font-weight: 700; color: var(--t-heading); }
.fb-rt :where(em, i, cite, dfn, var) { font-style: italic; }
.fb-rt u { text-decoration: underline; text-underline-offset: 3px; }
.fb-rt :where(s, del, strike) { text-decoration: line-through; opacity: .75; }
.fb-rt ins { text-decoration: underline; text-decoration-color: var(--t-accent); text-underline-offset: 3px; }
.fb-rt small { font-size: .85em; }
.fb-rt mark { background: #fde68a; color: var(--fb-navy); padding: 0 var(--fb-space-1); border-radius: 3px; }
.fb-rt abbr[title] { text-decoration: underline dotted; cursor: help; }
.fb-rt q { quotes: "\201C" "\201D" "\2018" "\2019"; }
.fb-rt :where(sub, sup) { font-size: .72em; line-height: 0; position: relative; vertical-align: baseline; }
.fb-rt sup { top: -.5em; }
.fb-rt sub { bottom: -.25em; }
.fb-rt :where(code, kbd, samp) { font-family: var(--fb-font-mono); font-size: .88em; }
.fb-rt :not(pre) > code { padding: 2px var(--fb-space-1); border-radius: 4px; background: var(--t-surface); color: var(--t-heading); box-shadow: inset 0 0 0 1px var(--t-rule); }
.fb-rt kbd { padding: 2px var(--fb-space-2); border: 1px solid var(--t-rule); border-bottom-width: 2px; border-radius: 4px; background: var(--t-surface); }

/* Links (beat main.css a:hover/a:focus) */
.fb .fb-rt a,
.fb .fb-rt a:visited { color: var(--t-link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fb .fb-rt a:hover,
.fb .fb-rt a:focus { color: var(--t-link-hover); text-decoration-thickness: 2px; }

/* Lists */
.fb-rt :where(ul, ol) { padding-left: var(--fb-space-5); }
.fb-rt ul { list-style: disc; }
.fb-rt ul ul { list-style: circle; }
.fb-rt ol { list-style: decimal; }
.fb-rt ol ol { list-style: lower-alpha; }
.fb-rt ol ol ol { list-style: lower-roman; }
.fb-rt ol[type="a"] { list-style: lower-alpha; }
.fb-rt ol[type="A"] { list-style: upper-alpha; }
.fb-rt ol[type="i"] { list-style: lower-roman; }
.fb-rt ol[type="I"] { list-style: upper-roman; }
.fb-rt li { padding-left: var(--fb-space-1); }
.fb-rt li + li,
.fb-rt li > :where(ul, ol) { margin-top: var(--fb-space-2); }
.fb-rt li > p { margin: 0; }
.fb-rt li::marker { color: var(--t-marker); font-weight: 700; }
.fb-rt dl { display: grid; gap: var(--fb-space-1) 0; }
.fb-rt dt { font-weight: 700; color: var(--t-heading); }
.fb-rt dd { margin: 0 0 var(--fb-space-2); padding-left: var(--fb-space-4); border-left: 2px solid var(--t-rule); }

/* Quotes */
.fb-rt :where(blockquote, .wp-block-quote) {
	margin-inline: 0;
	padding: var(--fb-space-4) var(--fb-space-5);
	border-left: 4px solid var(--t-accent);
	border-radius: 0 12px 12px 0;
	background: var(--t-surface);
	color: var(--t-heading);
	font-style: italic;
}
.fb-rt blockquote > * { margin: 0; }
.fb-rt blockquote > * + * { margin-top: var(--fb-space-3); }
.fb-rt :where(blockquote cite, blockquote footer, .wp-block-quote cite, .wp-block-pullquote cite) {
	display: block;
	font-size: .875em;
	font-style: normal;
	font-weight: 600;
	color: var(--t-muted);
}
.fb-rt .wp-block-pullquote { margin-inline: 0; padding: var(--fb-space-5) 0; border-block: 3px solid var(--t-accent); text-align: center; }
.fb-rt .wp-block-pullquote blockquote { border: 0; background: none; padding: 0; font: 400 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.3 var(--fb-font-display); text-transform: uppercase; font-style: normal; }

/* Code blocks */
.fb-rt pre {
	padding: var(--fb-space-4) var(--fb-space-5);
	border-radius: 12px;
	background: var(--fb-navy);
	color: #e8ecf5;
	font: .875em/1.6 var(--fb-font-mono);
	overflow-x: auto;
	white-space: pre;
	tab-size: 4;
}
.fb-theme-dark .fb-rt pre { background: rgba(0, 0, 0, .35); }
.fb-rt pre code { background: none; box-shadow: none; padding: 0; color: inherit; font-size: inherit; }

/* Rules */
.fb-rt :where(hr, .wp-block-separator) { height: 0; border: 0; border-top: 1px solid var(--t-rule); margin-block: var(--fb-space-7); }
.fb-rt .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 96px; margin-inline: auto; border-top: 3px solid var(--t-accent); }
.fb-rt .wp-block-separator.is-style-dots { border: 0; text-align: center; }
.fb-rt .wp-block-separator.is-style-dots::before { content: "\00b7 \00b7 \00b7"; letter-spacing: 1em; color: var(--t-muted); font-size: 1.5em; }

/* Images, figures, alignments (classic + block editor) */
.fb-rt :where(img, video, svg) { max-width: 100%; height: auto; }
.fb-rt img { border-radius: 12px; }
.fb-rt :where(figure, .wp-caption) { margin-inline: 0; max-width: 100%; }
.fb-rt :where(figcaption, .wp-caption-text, .wp-element-caption, .gallery-caption) { margin-top: var(--fb-space-2); font-size: .875rem; line-height: 1.45; color: var(--t-muted); text-align: center; }
.fb-rt :where(.alignleft, .wp-block-image .alignleft) { float: left; margin: var(--fb-space-1) var(--fb-space-5) var(--fb-space-4) 0; max-width: 50%; }
.fb-rt :where(.alignright, .wp-block-image .alignright) { float: right; margin: var(--fb-space-1) 0 var(--fb-space-4) var(--fb-space-5); max-width: 50%; }
.fb-rt :where(.aligncenter, .wp-block-image .aligncenter) { display: block; margin-inline: auto; text-align: center; }
.fb-rt :where(.alignwide, .alignfull) { width: 100%; max-width: none; }
@media (max-width: 639.98px) {
	.fb-rt :where(.alignleft, .alignright, .wp-block-image .alignleft, .wp-block-image .alignright) { float: none; margin: 0 auto; max-width: 100%; }
}
.fb-rt :where(.has-text-align-left, [style*="text-align: left"]) { text-align: left; }
.fb-rt :where(.has-text-align-center, [style*="text-align: center"]) { text-align: center; }
.fb-rt :where(.has-text-align-right, [style*="text-align: right"]) { text-align: right; }

/* Galleries: [gallery] shortcode and the block */
.fb-rt :where(.gallery, .wp-block-gallery) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fb-space-4); padding: 0; list-style: none; }
@media (min-width: 640px) {
	.fb-rt .gallery-columns-3, .fb-rt .wp-block-gallery.columns-3, .fb-rt .wp-block-gallery.columns-default { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fb-rt .gallery-columns-4, .fb-rt .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fb-rt .gallery-columns-1, .fb-rt .wp-block-gallery.columns-1 { grid-template-columns: minmax(0, 1fr); }
.fb-rt :where(.gallery-item, .wp-block-gallery .wp-block-image) { margin: 0; width: auto !important; }
.fb-rt :where(.gallery-item, .wp-block-gallery .wp-block-image) img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fb-rt .gallery br { display: none; }

/* Embeds: iframes from oEmbed / pasted code stay responsive */
.fb-rt :where(iframe, embed, object) { display: block; width: 100%; max-width: 100%; border: 0; border-radius: 12px; }
.fb-rt iframe:not([height]),
.fb-rt :where(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"]) { height: auto; aspect-ratio: 16 / 9; }
.fb-rt .wp-block-embed { margin-inline: 0; }
.fb-rt .wp-block-embed__wrapper { position: relative; }
.fb-rt video { display: block; width: 100%; border-radius: 12px; background: #000; }
.fb-rt audio { display: block; width: 100%; }

/* Tables (scroll on small screens instead of breaking the layout) */
.fb-rt :where(.wp-block-table, .table-wrap, .fb-table) { margin-inline: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fb-rt table { width: 100%; border-collapse: collapse; font-size: .9375em; line-height: 1.5; font-variant-numeric: tabular-nums; }
.fb-rt > table { display: block; overflow-x: auto; }
.fb-rt caption { caption-side: top; padding: 0 0 var(--fb-space-2); font-weight: 700; color: var(--t-heading); text-align: left; }
.fb-rt :where(th, td) { padding: var(--fb-space-3) var(--fb-space-4); border-bottom: 1px solid var(--t-rule); text-align: left; vertical-align: top; }
.fb-rt th { font-weight: 700; color: var(--t-heading); }
.fb-rt thead th { background: var(--t-surface-strong); color: var(--t-surface-strong-fg); border-bottom: 0; }
.fb-theme-dark .fb-rt thead th,
.fb-theme-brand .fb-rt thead th { color: #fff; }
.fb-rt thead th:first-child { border-top-left-radius: 8px; }
.fb-rt thead th:last-child { border-top-right-radius: 8px; }
.fb-rt tbody tr:nth-child(even) :where(td, th) { background: var(--t-surface); }
.fb-rt tfoot :where(td, th) { font-weight: 700; border-top: 2px solid var(--t-rule); border-bottom: 0; }

/* Details, buttons, columns from the block editor */
.fb-rt details { border: 1px solid var(--t-rule); border-radius: 12px; padding: var(--fb-space-3) var(--fb-space-4); background: var(--t-surface); }
.fb-rt summary { cursor: pointer; font-weight: 700; color: var(--t-heading); }
.fb-rt details[open] summary { margin-bottom: var(--fb-space-2); }
.fb-rt .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--fb-space-4); }
.fb .fb-rt .wp-block-button__link,
.fb .fb-rt .wp-block-button__link:visited {
	display: inline-flex; align-items: center; min-height: 48px; padding: var(--fb-space-3) var(--fb-space-5);
	border-radius: var(--fb-radius-btn); background: var(--t-btn1-bg); color: var(--t-btn1-fg);
	font-weight: 600; text-decoration: none;
}
.fb .fb-rt .wp-block-button__link:hover { background: var(--t-btn1-hover); color: var(--t-btn1-fg); }
.fb .fb-rt .is-style-outline .wp-block-button__link { background: transparent; color: var(--t-btn3-fg); box-shadow: inset 0 0 0 1px var(--t-btn3-border); }
.fb-rt .wp-block-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fb-space-5); }
@media (min-width: 782px) { .fb-rt .wp-block-columns { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.fb-rt .wp-block-column > * + * { margin-top: var(--fb-space-4); }

/* Modifiers */
.fb-rt--lead { max-width: 68ch; font-size: clamp(1rem, .907rem + .381vw, 1.25rem); font-weight: 500; line-height: 1.5; letter-spacing: -.022em; color: var(--t-muted); }
.fb-head--center .fb-rt--lead,
.fb-rt--center { margin-inline: auto; text-align: center; }
.fb-rt--center :where(ul, ol) { display: inline-block; text-align: left; }
.fb-rt--small { --rt-flow: var(--fb-space-4); font-size: clamp(.9375rem, .9rem + .15vw, 1.0625rem); line-height: 1.6; }
.fb-rt--small :where(h1, h2) { font-size: 1.25rem; }
.fb-rt--small h3 { font-size: 1.0625rem; }
.fb-rt--muted { color: var(--t-muted); }
.fb-rt--quote { font: 500 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.5 var(--fb-font-body); color: var(--t-heading); }
.fb-rt--quote-sm { font-style: italic; font-size: clamp(1rem, .93rem + .3vw, 1.1875rem); line-height: 1.55; }
.fb-rt--article { line-height: 1.75; }
.fb-rt--article > :where(h1, h2):not(:first-child) { margin-top: var(--fb-space-8); }

/* ---- 7. Buttons ----------------------------------------------------------*/
.fb-btn-group { display: flex; flex-direction: column; gap: var(--fb-space-4); margin-top: var(--fb-actions); }
.fb-center .fb-btn-group,
.fb-btn-group--center,
.fb-foot .fb-btn-group { align-items: center; }
@media (min-width: 640px) {
	.fb-btn-group { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.fb-center .fb-btn-group,
	.fb-btn-group--center,
	.fb-foot .fb-btn-group,
	.fb-intro--center .fb-btn-group { justify-content: center; }
}
.fb-foot .fb-btn-group { margin-top: 0; }

.fb .fb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fb-space-2);
	min-height: 52px;
	padding: var(--fb-space-3) var(--fb-space-5);
	border: 1px solid transparent;
	border-radius: var(--fb-radius-btn);
	font: 600 clamp(1.0625rem, 1.02rem + .19vw, 1.25rem)/1.25rem var(--fb-font-body);
	letter-spacing: -.013em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .3s var(--fb-ease-spring), box-shadow .2s ease;
}
@media (max-width: 639.98px) { .fb-btn-group .fb-btn { width: 100%; white-space: normal; text-align: center; } }
@media (min-width: 1024px) { .fb .fb-btn { min-height: 60px; } }
.fb .fb-btn:hover { transform: translateY(-2px); }
.fb .fb-btn:active { transform: translateY(0); }
.fb-btn__icon { flex: none; }

.fb .fb-btn--primary,
.fb .fb-btn--primary:visited,
.fb .fb-btn--primary:focus { background: var(--t-btn1-bg); color: var(--t-btn1-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.fb .fb-btn--primary:hover { background: var(--t-btn1-hover); color: var(--t-btn1-fg); }

.fb .fb-btn--secondary,
.fb .fb-btn--secondary:visited,
.fb .fb-btn--secondary:focus { background: var(--t-btn2-bg); color: var(--t-btn2-fg); border-color: var(--t-btn2-border); }
.fb .fb-btn--secondary:hover { background: var(--t-btn2-hover-bg); color: var(--t-btn2-hover-fg); border-color: var(--t-btn2-hover-bg); }

.fb .fb-btn--outline,
.fb .fb-btn--outline:visited,
.fb .fb-btn--outline:focus { background: transparent; color: var(--t-btn3-fg); border-color: var(--t-btn3-border); }
.fb .fb-btn--outline:hover { background: var(--t-btn3-fg); color: var(--t-bg); border-color: var(--t-btn3-fg); }

/* Text link with arrow (column links) */
.fb .fb-btn--link,
.fb .fb-btn--link:visited,
.fb .fb-btn--link:focus { min-height: 44px; padding: 0; border: 0; background: none; color: var(--t-link); font-size: 1rem; text-decoration: none; }
.fb .fb-btn--link::after { content: "\2192"; transition: transform .2s ease; }
.fb .fb-btn--link:hover { transform: none; color: var(--t-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.fb .fb-btn--link:hover::after { transform: translateX(4px); }

/* ---- 8. Focus (replaces the legacy amber outline inside sections) --------*/
.fb :focus { outline: none; }
.fb :focus-visible,
.fb .fb-card--link:focus-within {
	outline: 3px solid var(--t-focus);
	outline-offset: 3px;
}
.fb .fb-card--link :focus-visible { outline: none; }
.fb .fb-card--link .fb-rt a:focus-visible { outline: 3px solid var(--t-focus); }

/* ---- 9. Grids ------------------------------------------------------------*/
.fb-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) { .fb-grid--2, .fb-grid--3, .fb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.fb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fb-grid.fb-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.fb-grid--center .fb-card { align-items: center; text-align: center; }
.fb-grid--center .fb-rt :where(ul, ol) { display: inline-block; text-align: left; }

/* ---- 10. Cards, icons, lists, media --------------------------------------*/
.fb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--fb-space-4);
	padding: var(--fb-card-pad);
	background: var(--t-card-bg);
	border: 1px solid var(--t-card-border);
	border-radius: var(--fb-radius-card);
	box-shadow: var(--t-card-shadow);
	color: var(--t-fg);
}
.fb-card > .fb-rt { width: 100%; }
.fb-card--plain { padding: 0; background: none; border: 0; box-shadow: none; }
.fb-card__text { margin: 0; color: var(--t-muted); font-size: clamp(.9375rem, .88rem + .24vw, 1.125rem); line-height: 1.55; }
.fb-card__more { display: inline-flex; align-items: center; gap: var(--fb-space-2); margin-top: auto; padding-top: var(--fb-space-1); font-weight: 600; color: var(--t-link); }
.fb-card__more::after { content: "\2192"; transition: transform .2s ease; }
.fb .fb-card__link,
.fb .fb-card__link:visited,
.fb .fb-card__link:hover,
.fb .fb-card__link:focus { color: inherit; text-decoration: none; }
.fb-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Links inside the card text stay clickable above the stretched link */
.fb-card--link .fb-rt a { position: relative; z-index: 1; }
.fb-card--link { transition: transform .25s ease, box-shadow .25s ease; }
.fb-card--link:hover { transform: translateY(-4px); box-shadow: var(--fb-shadow-card-hover); }
.fb-card--plain.fb-card--link:hover { box-shadow: none; }
.fb-theme-dark .fb-card--link:hover,
.fb-theme-brand .fb-card--link:hover { box-shadow: none; border-color: #fff; }
.fb-card--link:hover .fb-card__link { text-decoration: underline; text-underline-offset: 3px; }
.fb-card--link:hover .fb-card__more::after { transform: translateX(4px); }

.fb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--t-icon-bg);
	color: var(--t-icon-fg);
}
.fb-icon--lg { width: 72px; height: 72px; }
@media (min-width: 1024px) { .fb-icon--lg { width: 88px; height: 88px; } }
.fb-icon--soft { background: var(--fb-grey-100); color: var(--fb-brand); }
.fb-theme-dark .fb-icon--soft,
.fb-theme-brand .fb-icon--soft { background: var(--t-icon-bg); color: var(--t-icon-fg); }
.fb-icon--brand { background: var(--fb-brand); color: #fff; }
.fb-theme-brand .fb-icon--brand { background: #fff; color: var(--fb-brand-surface); }
.fb-icon__img,
.fb-icon__svg { width: 50%; height: 50%; object-fit: contain; }

.fb-checklist { display: grid; gap: var(--fb-space-3); margin: var(--fb-space-5) 0 0; padding: 0; list-style: none; }
.fb-checklist li { display: flex; gap: var(--fb-space-3); align-items: flex-start; font-weight: 500; color: var(--t-fg); }
.fb-checklist li::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--t-check-bg) var(--t-check) center / 60% no-repeat;
}
.fb-checklist--inline { display: flex; flex-wrap: wrap; gap: var(--fb-space-3) var(--fb-space-5); }
.fb-checklist--compact { gap: var(--fb-space-2); margin-top: 0; font-size: .9375rem; }
.fb-checklist--compact li::before { width: 20px; height: 20px; }

/* Stars: the Tailwind reset makes <svg> block, so the row must be flex */
.fb-stars { display: inline-flex; align-items: center; color: var(--fb-star); }
.fb-stars__row { display: inline-flex; align-items: center; gap: var(--fb-space-1); }
.fb-stars svg { display: block; flex: none; }

/* <blockquote> used as a component wrapper (reviews, testimonial): drop the
 * theme's global blockquote style (main.css: orange bar, padding, margin). */
.fb .fb-review__quote,
.fb .fb-quote__text { margin: 0; padding: 0; border: 0; background: none; }

.fb-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--fb-radius-media); background: #000; }
.fb-embed iframe,
.fb-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- 11. Motion preferences and forced colours ---------------------------*/
@media (prefers-reduced-motion: reduce) {
	.fb *,
	.fb *::before,
	.fb *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.fb .fb-btn:hover,
	.fb-card--link:hover { transform: none; }
}

@media (forced-colors: active) {
	.fb .fb-btn,
	.fb-card,
	.fb-chip,
	.fb-faq__item { border: 1px solid CanvasText; }
	.fb-checklist li::before { forced-color-adjust: none; }
}