/* ==========================================================================
   Fight To FIRE — Design System v1.0
   Bron: "Fight To FIRE — Design System v1.0 (machine-readable spec)", Claude
   Design canvas, gedeeld door Vincent op 2026-09-04.

   Dit bestand is de letterlijke drop-in CSS uit die spec (sectie 8-9 van het
   .md-document), met alleen de wrapper-selector aangepast waar nodig voor
   Total/WPBakery (:is(.entry-content, .single-blog-article, .single-page-content) is de WP-standaard en ook wat Total gebruikt).

   Fonts: geladen via functions.php (Google Fonts preconnect + stylesheet),
   niet via @import hier, om een extra blocking request te vermijden.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Ink */
  --ftf-ink:        #262523;  /* body headings, primary text */
  --ftf-ink-60:     #4A4844;  /* body copy, secondary */
  --ftf-ink-40:     #7A776F;  /* meta, captions, disabled */
  /* Surfaces */
  --ftf-paper:      #FCFBF8;  /* page background */
  --ftf-surface:    #F4F1EA;  /* cards, callouts */
  --ftf-rule:       #E2DDD4;  /* all hairlines & borders */
  /* Accents */
  --ftf-green:      #4E9E2F;  /* primary accent, fills, gains */
  --ftf-green-ink:  #2F6B20;  /* green text on light (AA safe) */
  --ftf-green-tint: #F1F6EC;  /* green callout background */
  --ftf-ember:      #C0521C;  /* secondary: links, eyebrows, CTA */
  --ftf-ember-tint: #F6E6DA;  /* link underline, selection */
  --ftf-partner:    #FDFAF0;  /* affiliate / partner block bg */
  --ftf-loss:       #8E2F22;  /* negative numbers only */
  /* Geometry */
  --ftf-measure:    680px;    /* article text column */
  --ftf-page:       1240px;   /* max site width */
  --ftf-radius:     2px;      /* the ONLY radius in the system */
  /* Type */
  --ftf-sans:  Archivo, Helvetica, Arial, sans-serif;
  --ftf-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ftf-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Spacing — derived from the body line box (19px x 1.68 = 32px baseline) */
  --ftf-s1:  8px;
  --ftf-s2: 16px;
  --ftf-s3: 24px;
  --ftf-s4: 32px;   /* = one baseline */
  --ftf-s6: 48px;
  --ftf-s8: 64px;
  --ftf-s12: 96px;
}

/* --- 2. Base --------------------------------------------------------------- */
body {
  background: var(--ftf-paper);
  color: var(--ftf-ink);
  font-family: var(--ftf-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ftf-ember-tint); }

/* --- 3. Long-form article typography ------------------------------------- */
:is(.entry-content, .single-blog-article, .single-page-content) {
  font-family: var(--ftf-serif);
  font-size: 19px;
  line-height: 1.68;          /* 32px baseline */
  color: var(--ftf-ink-60);
  max-width: var(--ftf-measure);
}

/* Single-direction margins: every block pushes DOWN only. */
:is(.entry-content, .single-blog-article, .single-page-content) > * { margin-top: 0; margin-bottom: var(--ftf-s4); }
:is(.entry-content, .single-blog-article, .single-page-content) > *:last-child { margin-bottom: 0; }

:is(.entry-content, .single-blog-article, .single-page-content) p { text-wrap: pretty; }

/* THE 3:1 HEADING RULE — 3x space above, 1x below. */
:is(.entry-content, .single-blog-article, .single-page-content) h2 {
  font-family: var(--ftf-sans);
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ftf-ink);
  margin-top: 96px;   /* 3 baselines */
  margin-bottom: 32px;/* 1 baseline  */
}
:is(.entry-content, .single-blog-article, .single-page-content) h3 {
  font-family: var(--ftf-sans);
  font-size: clamp(20px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ftf-ink);
  margin-top: 64px;   /* 2 baselines */
  margin-bottom: 16px;
}
:is(.entry-content, .single-blog-article, .single-page-content) h4 {
  font-family: var(--ftf-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ftf-ink-40);
  margin-top: 48px;
  margin-bottom: 12px;
}
/* A heading immediately after a heading never gets the big gap. */
:is(.entry-content, .single-blog-article, .single-page-content) h2 + h3,
:is(.entry-content, .single-blog-article, .single-page-content) h3 + h4 { margin-top: var(--ftf-s3); }

/* Post title (H1) */
.entry-title, :is(.entry-content, .single-blog-article, .single-page-content) h1 {
  font-family: var(--ftf-sans);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ftf-ink);
  margin: 0 0 var(--ftf-s3);
}

/* Lead paragraph — add class .ftf-lead to the first paragraph */
.ftf-lead {
  font-family: var(--ftf-serif);
  font-size: 22px;
  line-height: 1.55;
  color: var(--ftf-ink-60);
}

/* Meta / eyebrow line */
.ftf-meta {
  font-family: var(--ftf-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ftf-ink-40);
}

/* Numbers — always tabular so columns align */
.ftf-data, :is(.entry-content, .single-blog-article, .single-page-content) table td, :is(.entry-content, .single-blog-article, .single-page-content) table th {
  font-family: var(--ftf-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ftf-gain { color: var(--ftf-green-ink); }
.ftf-loss { color: var(--ftf-loss); }

/* --- 4. Links --------------------------------------------------------------- */
/* Underline via text-decoration, not border-bottom: border-bottom on an
   inline element is drawn once per wrapped line, and with tight line-heights
   (headings, small type) that line can visually cross into the text above or
   below it. text-decoration-line is drawn per line by the browser itself and
   never overlaps adjacent lines, so this is the only safe way to underline a
   link whose text might wrap. */
a {
  color: var(--ftf-ember);
  text-decoration-line: none;
}
a:hover { color: var(--ftf-ink); }
/* !important: Total injects "#content article a:not(.vcex-module)..." (an ID
   selector) which otherwise beats this class-based rule and forces its own
   green link colour, the same root cause as the button fix in section 10. */
:is(.entry-content, .single-blog-article, .single-page-content) a {
  color: var(--ftf-ember) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--ftf-ember-tint) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-color .15s;
}
:is(.entry-content, .single-blog-article, .single-page-content) a:hover {
  text-decoration-color: var(--ftf-ember) !important;
}

/* Footer: base link color is ember, but the generic a:hover rule above turns
   text ink-coloured, which is nearly invisible on the footer's dark
   background. Give footer links a light hover colour instead. */
#footer a:hover { color: var(--ftf-paper) !important; }

/* --- 5. Lists --------------------------------------------------------------- */
:is(.entry-content, .single-blog-article, .single-page-content) ul, :is(.entry-content, .single-blog-article, .single-page-content) ol { padding-left: 1.3em; }
:is(.entry-content, .single-blog-article, .single-page-content) li { margin-bottom: var(--ftf-s2); }
:is(.entry-content, .single-blog-article, .single-page-content) li::marker { color: var(--ftf-green); }

/* --- 6. Blockquote & pull quote ---------------------------------------------- */
:is(.entry-content, .single-blog-article, .single-page-content) blockquote {
  border-left: 3px solid var(--ftf-green);
  padding: 0 0 0 var(--ftf-s3);
  margin-left: 0;
  font-size: 21px;
  line-height: 1.55;
  color: var(--ftf-ink);
  font-style: normal;
}

/* --- 7. Components ------------------------------------------------------------ */

/* Key-takeaway box — put at the top of every explainer */
.ftf-takeaway {
  background: var(--ftf-green-tint);
  border: 1px solid var(--ftf-rule);
  border-top: 3px solid var(--ftf-green);
  border-radius: var(--ftf-radius);
  padding: 24px 26px;
  font-family: var(--ftf-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ftf-ink);
}
.ftf-takeaway > .ftf-label {
  font-family: var(--ftf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ftf-green-ink);
  margin-bottom: 12px;
  display: block;
}

/* Partner / affiliate block — labelled, contained, never editorial */
.ftf-partner {
  background: var(--ftf-partner);
  border: 1px solid var(--ftf-rule);
  border-radius: var(--ftf-radius);
  padding: 22px 24px;
  font-family: var(--ftf-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ftf-ink-60);
}
.ftf-partner > .ftf-label {
  font-family: var(--ftf-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A5B12;
  margin-bottom: 10px;
  display: block;
}

/* Correction / update note */
.ftf-correction {
  border-left: 3px solid var(--ftf-ember);
  background: var(--ftf-surface);
  padding: 18px 20px;
  font-family: var(--ftf-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ftf-ink-60);
}

/* Buttons */
.ftf-btn {
  display: inline-block;
  background: var(--ftf-ember);
  color: var(--ftf-paper);
  font-family: var(--ftf-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--ftf-radius);
  border: 1px solid transparent;
  text-decoration: none;
}
/* Hover = inverted, not darkened: ember fill becomes ember outline on paper,
   so the label stays high-contrast instead of white-on-dark-charcoal. */
.ftf-btn:hover { background: var(--ftf-paper); color: var(--ftf-ember); border-color: var(--ftf-ember); }
.ftf-btn--ghost {
  background: transparent;
  color: var(--ftf-ink);
  border: 1px solid var(--ftf-ink);
  padding: 13px 23px;
}
.ftf-btn--ghost:hover { background: var(--ftf-ink); color: var(--ftf-paper); }

/* Card grid — hairline grid, no shadows anywhere in this system */
.ftf-grid {
  display: grid;
  gap: 1px;
  background: var(--ftf-rule);
  border: 1px solid var(--ftf-rule);
}
.ftf-grid > * { background: var(--ftf-paper); padding: 20px 22px; }

/* Table */
:is(.entry-content, .single-blog-article, .single-page-content) table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ftf-sans);
  font-size: 15px;
}
:is(.entry-content, .single-blog-article, .single-page-content) table th {
  text-align: left;
  font-family: var(--ftf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ftf-ink-40);
  font-weight: 500;
  border-bottom: 1px solid var(--ftf-rule);
  padding: 10px 12px;
}
:is(.entry-content, .single-blog-article, .single-page-content) table td {
  border-bottom: 1px solid var(--ftf-rule);
  padding: 12px;
  color: var(--ftf-ink-60);
}

/* Figure & caption */
:is(.entry-content, .single-blog-article, .single-page-content) figure { margin-left: 0; margin-right: 0; }
:is(.entry-content, .single-blog-article, .single-page-content) figcaption {
  font-family: var(--ftf-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ftf-ink-40);
  margin-top: 10px;
}

/* Full-bleed media inside a constrained column */
.ftf-bleed {
  width: min(1100px, 92vw);
  max-width: none;
  margin-left: calc(50% - min(550px, 46vw));
}

/* --- 8. Mobile ------------------------------------------------------------- */
@media (max-width: 640px) {
  :is(.entry-content, .single-blog-article, .single-page-content) { font-size: 18px; line-height: 1.65; }
  :is(.entry-content, .single-blog-article, .single-page-content) h2 { margin-top: 64px; margin-bottom: 24px; }
  :is(.entry-content, .single-blog-article, .single-page-content) h3 { margin-top: 48px; }
  .ftf-btn, .ftf-btn--ghost { display: block; text-align: center; }
}

/* --- 9. Home page (ship order step 6) --------------------------------------- */
/* Hero */
.ftf-hero { padding: 56px 0 48px; max-width: var(--ftf-page); }
.ftf-hero > .ftf-meta { display: block; margin-bottom: 16px; }
.ftf-hero h1 {
  font-family: var(--ftf-sans);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ftf-ink);
  margin: 0 0 20px;
  max-width: 18ch;
}
.ftf-hero .ftf-lead { max-width: 52ch; margin-bottom: 32px; }
.ftf-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Live portfolio strip */
.ftf-portfolio-strip { margin: 16px 0 64px; max-width: var(--ftf-page); }
.ftf-portfolio-strip > .ftf-meta { display: block; margin-bottom: 16px; }
.ftf-portfolio-strip .ftf-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; }
.ftf-portfolio-strip .ftf-grid > div { display: flex; flex-direction: column; gap: 6px; }
.ftf-portfolio-strip .ftf-grid .ftf-label {
  font-family: var(--ftf-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ftf-ink-40);
}
.ftf-portfolio-strip .ftf-grid .ftf-data { font-size: 22px; font-weight: 500; color: var(--ftf-ink); }
@media (min-width: 700px) { .ftf-portfolio-strip .ftf-grid { grid-template-columns: repeat(4, 1fr); } }

/* Three paths */
.ftf-paths { margin: 0 0 64px; max-width: var(--ftf-page); }
.ftf-paths > h2 { margin: 0 0 8px; }
.ftf-paths > .ftf-paths-sub { font-family: var(--ftf-serif); color: var(--ftf-ink-60); margin: 0 0 32px; }
.ftf-paths-grid { display: block; }
.ftf-path { margin-bottom: 32px; }
.ftf-path:last-child { margin-bottom: 0; }
.ftf-path > h3 { font-family: var(--ftf-sans); font-weight: 600; font-size: 18px; color: var(--ftf-ink); margin: 0 0 12px; }
.ftf-path ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ftf-rule); }
.ftf-path li { border-bottom: 1px solid var(--ftf-rule); }
.ftf-path li:last-child { border-bottom: 0; }
.ftf-path a {
  display: block !important; padding: 14px 18px; font-family: var(--ftf-sans);
  font-size: 15px; font-weight: 500; color: var(--ftf-ink);
  text-decoration: none; border-bottom: 0 !important;
}
.ftf-path a:hover { background: var(--ftf-surface); color: var(--ftf-ember); }
.ftf-path .ftf-path-num { font-family: var(--ftf-mono); color: var(--ftf-green-ink); margin-right: 10px; }
@media (min-width: 900px) {
  .ftf-paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .ftf-path { margin-bottom: 0; }
}

/* --- 10. Specificity fixes ---------------------------------------------------
   Total's own theme CSS injects a very high-specificity rule
   (#content article a:not(.vcex-module):not([class*="vcex"])...) that beats
   any class-based override, including :is(.entry-content, .single-blog-article, .single-page-content) .ftf-btn. It also only
   targets #content article a — so .ftf-btn / .ftf-path a anywhere outside a
   real <article> (e.g. this home page's vc_column_text, which never gets an
   :is(.entry-content, .single-blog-article, .single-page-content) ancestor either) still needs its own colours reasserted.
   !important is used deliberately here to guarantee these always win,
   regardless of where in the DOM they render. */
.ftf-btn,
.ftf-btn:hover,
.ftf-btn--ghost,
.ftf-btn--ghost:hover,
.ftf-path a,
.ftf-path a:hover {
  text-decoration: none !important;
}
.ftf-path a,
.ftf-path a:hover {
  border-bottom: 0 !important;
}
.ftf-btn { color: var(--ftf-paper) !important; }
.ftf-btn:hover { color: var(--ftf-ember) !important; }
.ftf-btn--ghost { color: var(--ftf-ink) !important; }
.ftf-btn--ghost:hover { color: var(--ftf-paper) !important; }
.ftf-path a { color: var(--ftf-ink) !important; }
.ftf-path a:hover { color: var(--ftf-ember) !important; }

/* --- 11. Header & topbar (per Claude Design canvas mockup, 2026-09-04) ------- */
/* Total's own markup is reused as-is (topbar with social-left/lang-right,
   #site-header with logo + nav) — only restyled, nothing rebuilt, so the
   Polylang language switcher and the social links keep working. */

/* Topbar: dark strip, tagline added via ::before so nothing in wp-admin
   needs to change to get the "BELGIAN FIRE, PUBLICLY SINCE 2018" line. */
#top-bar-wrap {
  background: var(--ftf-ink) !important;
  border-bottom: 0 !important;
}
#top-bar-social::before {
  content: "BELGIAN FIRE, PUBLICLY SINCE 2018";
  font-family: var(--ftf-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ftf-rule);
  margin-right: 18px;
  display: inline-block;
  vertical-align: middle;
}
#top-bar-wrap .wpex-social-btn-minimal { color: var(--ftf-rule) !important; }
#top-bar-wrap .wpex-social-btn-minimal:hover { color: var(--ftf-paper) !important; }
#top-bar-wrap select.pll-switcher-select {
  background: transparent;
  border: 0;
  color: var(--ftf-paper);
  font-family: var(--ftf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 4px;
}
#top-bar-wrap select.pll-switcher-select option { color: var(--ftf-ink); }

/* Main header: bold wordmark, sans nav, green underline on the active item. */
#site-header { background: var(--ftf-paper) !important; }
#site-logo-span {
  font-family: var(--ftf-sans) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  color: var(--ftf-ink) !important;
}
#site-navigation .main-navigation-ul > li > a {
  font-family: var(--ftf-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ftf-ink) !important;
}
#site-navigation .main-navigation-ul > li.current-menu-item > a,
#site-navigation .main-navigation-ul > li.current_page_item > a {
  border-bottom: 2px solid var(--ftf-green) !important;
  padding-bottom: 3px !important;
}

/* Newsletter button in the header-aside slot: markup is injected by a small
   inline script in functions.php (Total leaves this slot empty by default),
   this just styles the result. Hidden on mobile so it never fights the
   hamburger toggle. */
#header-aside { display: flex !important; align-items: center; }
.ftf-nav-newsletter-btn {
  display: inline-block;
  background: var(--ftf-green) !important;
  color: var(--ftf-paper) !important;
  font-family: var(--ftf-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--ftf-radius);
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.ftf-nav-newsletter-btn:hover { background: var(--ftf-ink) !important; color: var(--ftf-paper) !important; }
@media (max-width: 782px) {
  #header-aside { display: none !important; }
}


/* --- 12. Newsletter CTA & Browse-by-topic (per Claude Design canvas mockup, 2026-09-04) --- */

/* Newsletter CTA band — dark, sits right after the Three Paths section.
   Links to the real MailerLite widget already embedded in the footer
   (#mlb2-41428284), no fake inline form. */
.ftf-newsletter-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ftf-s4);
  flex-wrap: wrap;
  background: var(--ftf-ink);
  border-radius: var(--ftf-radius);
  padding: var(--ftf-s6) var(--ftf-s6);
  margin: 0 0 64px;
  max-width: var(--ftf-page);
}
.ftf-newsletter-cta__eyebrow {
  color: var(--ftf-rule) !important;
  display: block;
  margin-bottom: 10px;
}
.ftf-newsletter-cta h3 {
  font-family: var(--ftf-sans);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ftf-paper);
  margin: 0 0 10px;
}
.ftf-newsletter-cta p {
  font-family: var(--ftf-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ftf-rule);
  max-width: 46ch;
  margin: 0;
}
.ftf-newsletter-cta .ftf-btn {
  flex: none;
  white-space: nowrap;
  background: var(--ftf-green) !important;
}
.ftf-newsletter-cta .ftf-btn:hover {
  background: var(--ftf-paper) !important;
  color: var(--ftf-green-ink) !important;
  border-color: var(--ftf-green) !important;
}
@media (max-width: 640px) {
  .ftf-newsletter-cta { padding: var(--ftf-s4); }
  .ftf-newsletter-cta .ftf-btn { width: 100%; text-align: center; }
}

/* Browse by topic — real WordPress categories + real post counts. */
.ftf-topics { margin: 0 0 64px; max-width: var(--ftf-page); }
.ftf-topics > h2 { margin: 0 0 24px; }
.ftf-topics-grid { grid-template-columns: repeat(2, 1fr); }
.ftf-topics-grid > div { padding: 0; }
.ftf-topics-grid a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ftf-s2);
  padding: 18px 20px;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.ftf-topics-name {
  font-family: var(--ftf-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--ftf-ink) !important;
}
.ftf-topics-grid a .ftf-meta { color: var(--ftf-ink-40); }
.ftf-topics-grid a:hover { background: var(--ftf-surface); }
.ftf-topics-grid a:hover .ftf-topics-name { color: var(--ftf-ember) !important; }
@media (min-width: 700px) {
  .ftf-topics-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- 13. Link-fixes 2026-09-04b: root cause + hover overlap + footer contrast --
   Feedback from Vincent: hover underline overlapped when link text wrapped
   to a second line (both small text and headings/titles), and footer link
   hover text was invisible (black on near-black background).

   Root cause found while fixing this: .entry-content, which section 3/4/10
   were all built on, does not exist ANYWHERE on the live site. Real posts
   render inside .single-blog-article, real pages inside .single-page-content
   -- same "dead ancestor selector" bug as the button/link fix in section 10,
   just one level up. Sections 3 and 4 above now target
   :is(.entry-content, .single-blog-article, .single-page-content) so the
   serif body copy, the 3:1 heading rule, and link colours actually apply on
   real single posts/pages, which they never did before today. The underline
   itself also switched from a border-bottom+padding-bottom trick (which
   draws once per wrapped line and can visually cross into the line above/
   below on tight line-heights) to text-decoration-line, which browsers
   render correctly per wrapped line with no overlap, ever. Also added: a
   !important on the base rule's color/text-decoration, since Total's own ID-
   selector rule (see section 10 comment) was still beating the plain (non-
   !important) version and forcing its own green underlined links. */

/* --- 14. Hero CTA button fix 2026-09-04c — SUPERSEDED, see §20 ------------
   Originally: ".ftf-hero-cta > a.ftf-btn { color: paper !important }" to
   beat section 4's link-color rule inside .single-page-content. Removed
   2026-09-04 (later round) because its specificity (0,2,1) also beat §20's
   generic ".ftf-btn--ghost" fix for the SAME hero, forcing paper (invisible)
   text onto the "Start with the basics" ghost button too — since ghost
   carries the plain .ftf-btn class as well, this selector matched it. §20's
   "a.ftf-btn"/"a.ftf-btn--ghost" rules already produce the identical correct
   result for the plain hero button on their own (paper on ember), so this
   section is fully redundant now and actively wrong for the ghost variant.
   Kept only as a comment for history — do not re-add a bare ".ftf-hero-cta
   > a.ftf-btn" color rule, it will re-break the ghost button again. */

/* --- 15. Three-paths hover-overlap fix 2026-09-04d -----------------------
   Vincent again saw an overlap/ragged look on hover in the Three Paths list
   (e.g. "Spectacular Growth Over Time With Compounding Interest" wrapping
   to 3 lines). Not padding, and not the same underline bug as section 13:
   Total's own inline customizer CSS ("#content article a:not(.vcex-module)
   ...") sets display:inline on this link with higher specificity than the
   plain (non-!important) .ftf-path a { display: block } from section 9,
   confirmed live via getComputedStyle (display came back "inline"). With
   the link forced inline, its :hover background/padding get drawn as
   separate boxes per wrapped line instead of one full-width block, which is
   exactly the ragged, overlapping look Vincent flagged. Section 9's rule
   now carries !important directly on display: block, which is enough on
   its own to beat Total's rule regardless of specificity (an !important
   declaration always wins over a non-!important one). */

/* --- 16. Header layout switch to single row 2026-09-04e -------------------
   Vincent asked what to change in Total to bring the header closer to the
   system-style mockup (one clean row: logo left, nav + newsletter right,
   instead of logo on its own row with the nav stacked below). Changed in
   Total's Theme Panel (Customizer > Header > General > Style) from
   "2. Bottom Menu" to "9. Flex: Right Menu" (internal class header-nine).
   This is a Total settings change, not something CSS alone could fix — it
   swaps the header's actual markup/layout mode.

   Side effect discovered live: header-nine renders NO #header-aside slot at
   all (older/legacy Total header styles do), so the Newsletter-button
   injection script in functions.php silently stopped placing the button.
   Fixed there by falling back to appending the button as the last child of
   #site-header-flex when #header-aside is absent — it then sits as a third
   flex item after the logo and nav, flush right, same visual result as
   before. The rules below style that new placement path and its mobile
   hide; the old #header-aside rules above stay as-is in case the header
   style is ever switched back to a variant that still has that slot.

   Height fix: Total's own Height field for this Flex style defaults to
   120px, but the header-nine markup only applies that fixed height to the
   OUTER #site-header container — the inner #site-header-flex row (logo +
   nav + our button) was still sizing to its content (96px), leaving a bare
   24px strip of empty paper-coloured space under the row. Confirmed live
   via getBoundingClientRect on both elements. Fixing the height on
   #site-header-flex alone (first attempt) left the mismatch the other way
   round; the fix has to apply to #site-header itself, the element Total's
   own fixed-height logic targets, with the inner wrappers stretched to
   100% so they fill it instead of shrinking to content. */
#site-header {
  height: 96px !important;
}
#site-header-inner,
#site-header-flex {
  height: 100% !important;
}
#site-header-flex > .ftf-nav-newsletter-btn {
  margin-left: var(--ftf-s3);
  flex: none;
}
@media (max-width: 782px) {
  .ftf-nav-newsletter-btn {
    display: none !important;
  }
}
/* --- 17. Header, megadropdown & mobile nav (v1.1 §8c/§10) -----------------
   New in the v1.1 bundle Vincent shared 2026-09-04 — this component didn't
   exist in v1.0. Rewritten twice since: first to add the hover dead-zone,
   caret and notch after Vincent flagged the panel didn't linger long enough
   to reach a submenu; rewritten again 2026-09-04 (this round) after Vincent
   said it still wasn't clear enough that the panel belongs to its parent
   item — "een enkele grijze lijn is niet super duidelijk" — and pointed at
   an updated reference design. Ownership is now stated three ways instead
   of one: the open nav item becomes a *tab* (it takes the panel's own tint
   and an ember top edge, so item and panel read as one continuous tinted
   block against the paper header, not just a hairline connecting two
   separate-looking things), plus the existing caret and notch. Ported
   directly from the canonical reference bundle (device folder "linck-it",
   wordpress-child-theme/css/ftf-design-system.css §10), not reconstructed.

   Fixed again 2026-09-04 (later still): Vincent screenshotted a visible
   paper-coloured gap between the bottom of the tinted tab and the top of the
   mega panel, with only the notch triangle floating in it. First attempt
   diagnosed this as a sibling (the Newsletter button) being taller than the
   nav item and switched the header bar to align-items:stretch — that made
   the trigger fill the row's CONTENT-box height, but the real cause was one
   level up: the header bar's own 20px top/bottom padding sat between the
   trigger's box and the bar's true outer edge (where .ftf-mega is actually
   positioned, against .ftf-header), and nothing had ever filled that
   padding strip — confirmed live via getBoundingClientRect: the trigger's
   own box ended exactly at the header bar's padding edge, 20px short of
   .ftf-mega's top on every measurement. Fixed by keeping the stretch (still
   correct — it removes any dependency on sibling heights) and additionally
   having the trigger overrun the bar's padding on top of that, by exactly
   --ftf-header-pad-v (a var shared with the padding itself, not a second
   guessed number): negative margin pulls it back over the padding, and
   height: calc(100% + 2 * var) grows it to fill that reclaimed space, so
   its tinted background now reaches the bar's true outer edge flush with
   the panel below — see .ftf-header__bar and .ftf-nav > li > a below.

   Desktop: hover/focus-within opens the panel. Touch: the panel is never
   used (hover does not exist) — the accordion below takes over under 900px. */

.ftf-utility {
  background: var(--ftf-ink);
  color: #C9C5BC;
  font-family: var(--ftf-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 9px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ftf-utility a { color: #C9C5BC; text-decoration: none; }
.ftf-utility a:hover { color: var(--ftf-paper); }
.ftf-header { border-bottom: 1px solid var(--ftf-rule); background: var(--ftf-paper); position: relative; }
.ftf-header__bar {
  /* Single source of truth for the bar's own vertical padding, so the nav
     trigger below can cancel out EXACTLY this value via negative margin
     instead of a second, independently-guessed number. */
  --ftf-header-pad-v: 20px;
  max-width: var(--ftf-page);
  margin: 0 auto;
  padding: var(--ftf-header-pad-v) 24px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
}
.ftf-logo { display: flex; align-items: center; font-family: var(--ftf-sans); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--ftf-ink); text-decoration: none; }

.ftf-nav { display: flex; align-items: stretch; gap: 26px; font-family: var(--ftf-sans); font-size: 15px; font-weight: 500; margin: 0; padding: 0; }
/* Static, not relative: the panel positions against .ftf-header (above) so it
   can run the full page width, edge to edge, not just the width of one item. */
.ftf-nav > li { list-style: none; position: static; }
/* The trigger fills the full height of the header bar's content box via flex
   stretch, THEN overruns the bar's own top/bottom padding by exactly
   --ftf-header-pad-v (negative margin + matching extra height) so its tinted
   background reaches the bar's true outer edge, flush with .ftf-mega below
   it — no bare paper strip, no magic number duplicated from the bar's own
   padding. Horizontal padding stays as the tab's own left/right breathing
   room (unaffected — only vertical space is being reclaimed here). */
.ftf-nav > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(100% + 2 * var(--ftf-header-pad-v));
  margin: calc(-1 * var(--ftf-header-pad-v)) 0;
  box-sizing: border-box;
  gap: 6px;
  padding: 0 12px;
  color: var(--ftf-ink);
  text-decoration: none;
  border-top: 2px solid transparent;
  background: transparent;
}
.ftf-nav > li.current-menu-item > a { color: var(--ftf-ember); }
/* Open parent = a tab. It takes the panel's own tint and an ember top edge,
   so the item and the panel underneath it read as ONE continuous tinted
   block against the paper header — this is the fix for "not clear it's a
   megamenu of the main item": a hairline alone wasn't saying it loudly
   enough, so the trigger and the panel now visually fuse into one shape. */
.ftf-nav > li:hover > a,
.ftf-nav > li:focus-within > a {
  color: var(--ftf-ember);
  background: var(--ftf-surface);
  border-top-color: var(--ftf-ember);
}

/* Caret: tells you this item opens a panel before you ever hover it. Rotates
   open on hover/focus so it doubles as an open/closed indicator. */
.ftf-nav > li.menu-item-has-children > a::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
  opacity: .55;
}
.ftf-nav > li.menu-item-has-children:hover > a::after,
.ftf-nav > li.menu-item-has-children:focus-within > a::after {
  transform: translateY(1px) rotate(-135deg);
  opacity: 1;
}

/* Notch: a tinted wedge punched through the panel's top hairline, centred
   under the item it belongs to — matches the tab's own --ftf-surface tint so
   the fill visually flows from the trigger, through the notch, into the
   panel with no seam. */
.ftf-nav > li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px; height: 14px;
  background: var(--ftf-surface);
  border-left: 1px solid var(--ftf-rule);
  border-top: 1px solid var(--ftf-rule);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 41;
}
.ftf-nav > li.menu-item-has-children:hover > a::before,
.ftf-nav > li.menu-item-has-children:focus-within > a::before { opacity: 1; }

/* The panel. Hairlines only — no shadow anywhere in this system. Tinted
   --ftf-surface (matching the open tab) rather than plain paper, so the
   trigger and the panel read as one shape; the feature column below flips
   back to paper so it still stands out as a card within that tinted panel.
   Positioned against .ftf-header, so it spans the full page edge to edge
   (its own .ftf-mega__inner below stays centred at the 1240px content
   width). */
.ftf-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  background: var(--ftf-surface);
  border-top: 1px solid var(--ftf-rule);
  border-bottom: 1px solid var(--ftf-rule);
  padding: 32px 24px 28px;
  /* visibility, not display: display cannot be transition-delayed, and the
     delay is the whole point. Closing waits .3s so a diagonal pointer path
     from the trigger down into the panel's second column never drops it. */
  visibility: hidden;
  opacity: 0;
  transition: opacity .14s ease, visibility 0s linear .3s;
}
.ftf-nav > li:hover .ftf-mega,
.ftf-nav > li:focus-within .ftf-mega {
  visibility: visible;
  opacity: 1;
  /* Small open delay kills flicker when sweeping sideways past other items. */
  transition: opacity .14s ease .07s, visibility 0s linear .07s;
}
.ftf-mega__inner {
  max-width: var(--ftf-page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
}
.ftf-mega__label {
  font-family: var(--ftf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ftf-ink-40);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ftf-rule);
  margin-bottom: 14px;
}
.ftf-mega__list { display: flex; flex-direction: column; gap: 11px; font-size: 15px; margin: 0; padding: 0; }
.ftf-mega__list a { color: var(--ftf-ink); text-decoration: none; }
.ftf-mega__list a:hover { color: var(--ftf-ember); }
/* Max four links per column. If a column needs a fifth, it wants its own page. */
.ftf-mega__list li:nth-child(n+5) { display: none; }

/* Fourth column: the newest update, with its number attached. Flipped back
   to paper (the panel around it is now tinted --ftf-surface) so it still
   reads as a distinct card rather than blending into the panel. */
.ftf-mega__feature {
  background: var(--ftf-paper);
  border: 1px solid var(--ftf-rule);
  border-top: 3px solid var(--ftf-green);
  padding: 20px 22px;
}
.ftf-mega__feature .ftf-mega__label { color: var(--ftf-green-ink); border: 0; padding: 0; margin-bottom: 12px; }

/* --- Mobile: the megadropdown converts, it does not shrink --------------- */
.ftf-burger, .ftf-drawer { display: none; }

.ftf-burger {
  border: 0;
  background: transparent;
  padding: 0;
}

@media (max-width: 900px) {
  .ftf-nav, .ftf-mega { display: none !important; }
  .ftf-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: 44px;         /* never below 44px */
    background: var(--ftf-ink);
    border: 0;
    border-radius: var(--ftf-radius);
    cursor: pointer;
  }
  .ftf-burger span { width: 18px; height: 2px; background: var(--ftf-paper); }

  .ftf-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--ftf-paper);
    overflow-y: auto;
  }
  .ftf-drawer[data-open="true"] { display: block; }
  .ftf-drawer__bar {
    background: var(--ftf-ink);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ftf-drawer__bar .ftf-logo { color: var(--ftf-paper); font-size: 17px; }
  .ftf-drawer__close {
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid #5A554D;
    border-radius: var(--ftf-radius);
    color: var(--ftf-paper);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
  }
  .ftf-drawer__body { padding: 8px 16px 24px; }

  /* One section open at a time — <details name="ftf-nav"> does this natively. */
  .ftf-drawer details > summary,
  .ftf-drawer .ftf-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    border-bottom: 1px solid var(--ftf-rule);
    font-family: var(--ftf-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--ftf-ink);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }
  .ftf-drawer details > summary::-webkit-details-marker { display: none; }
  .ftf-drawer details > summary::after {
    content: "+";
    font-family: var(--ftf-mono);
    font-size: 17px;
    color: var(--ftf-ink-40);
  }
  .ftf-drawer details[open] > summary { color: var(--ftf-ember); font-weight: 700; border-bottom: 0; }
  .ftf-drawer details[open] > summary::after { content: "\2212"; color: var(--ftf-ember); }
  .ftf-drawer details > div {
    border-left: 2px solid var(--ftf-ember);
    padding: 4px 0 4px 14px;
    margin-bottom: 8px;
  }
  .ftf-drawer details + details > summary,
  .ftf-drawer details + .ftf-drawer__link { border-top: 1px solid var(--ftf-rule); }
  .ftf-drawer details a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 16px;
    color: var(--ftf-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ftf-rule);
  }
  .ftf-drawer details a:last-child { border-bottom: 0; color: var(--ftf-ember); font-weight: 600; }
  .ftf-drawer .ftf-btn { margin-top: 18px; width: 100%; }
  .ftf-drawer__lang {
    display: flex; gap: 16px; justify-content: center; margin-top: 16px;
    font-family: var(--ftf-mono); font-size: 12px; letter-spacing: 0.06em;
  }
  .ftf-drawer__lang a { color: var(--ftf-ink-40); text-decoration: none; }
  body[data-nav-open="true"] { overflow: hidden; }
}

/* --- 19. Mobile header-bar overflow fix -----------------------------------
   At narrow widths (<480px) "Fight to FIRE" + SEARCH + Newsletter + burger
   don't fit on one line and the logo wraps to 3 lines. Shrink the logo,
   tighten gaps, and hide the SEARCH text label (search stays reachable via
   the new "Search" link at the top of the mobile drawer body, added in
   functions.php) rather than letting the row wrap. */
@media (max-width: 480px) {
  .ftf-logo { font-size: 18px; white-space: nowrap; }
  .ftf-header__bar { gap: 10px; padding: 16px; }
  .ftf-header__bar > div { gap: 8px; }
  .ftf-header__bar a.ftf-meta { display: none; }
  .ftf-btn--sm { padding: 8px 12px; font-size: 13px; }
}

/* --- 18. Hide Total's native header/topbar/mobile-toggle -----------------
   The custom header above (rendered via wp_body_open, functions.php) fully
   replaces these. Left in the DOM rather than removed from the template, so
   nothing that depends on them (Polylang, WPBakery edit links, admin bar
   anchors) breaks — only visually hidden. */
#top-bar-wrap,
#site-header-sticky-wrapper,
#wpex-mobile-menu-fixed-top,
.mobile-toggle-nav {
  display: none !important;
}

/* --- 20. Button base + hover, consolidated fix -----------------------------
   Vincent: buttons and their hover state still weren't right. Root cause:
   every earlier button rule in this file used a bare class selector like
   .ftf-btn { ... } (specificity 0,1,0), which loses to this SAME file's own
   :is(.entry-content, .single-blog-article, .single-page-content) a rule
   (specificity 0,1,1, both !important) whenever a button renders inside
   real post/page content — the exact bug class already documented above for
   Total's injected CSS, this time self-inflicted, between two of our own
   rules. That's why "Read the latest portfolio update" and "See the full
   breakdown" were underlined, and why the ghost button ("Start with the
   basics") was invisible: §14 blanket-set every .ftf-hero-cta > a.ftf-btn to
   paper text, including the ghost variant, so it became paper-on-paper.

   Fix: every selector below is written as "a.ftf-btn..." (element + class),
   which ties the :is(...) a rule's specificity (0,1,1) instead of losing to
   it — and because this section is the LAST one in the file, the tie
   resolves in our favour by source order. One generic rule set per variant
   replaces the old per-context patches (§12's newsletter-only background,
   §14's hero-only color), so every button/context — header, hero, ghost,
   newsletter CTA, mobile drawer — now gets consistent base AND hover
   styling regardless of which content wrapper it renders inside.

   Primary hover corrected 2026-09-04 (later round) per Vincent: the fill
   button's hover is --ftf-ink background with --ftf-paper text (was
   incorrectly ember-outline-on-paper before). Ghost was already right
   (transparent/ink rest, ink-fill/paper-text hover) and is unchanged. */
a.ftf-btn {
  background: var(--ftf-ember) !important;
  color: var(--ftf-paper) !important;
  text-decoration: none !important;
  border-color: transparent !important;
}
a.ftf-btn:hover {
  background: var(--ftf-ink) !important;
  color: var(--ftf-paper) !important;
  border-color: var(--ftf-ink) !important;
}
a.ftf-btn--ghost {
  background: transparent !important;
  color: var(--ftf-ink) !important;
  border-color: var(--ftf-ink) !important;
}
a.ftf-btn--ghost:hover {
  background: var(--ftf-ink) !important;
  color: var(--ftf-paper) !important;
}
.ftf-newsletter-cta a.ftf-btn {
  background: var(--ftf-green) !important;
  color: var(--ftf-paper) !important;
}
.ftf-newsletter-cta a.ftf-btn:hover {
  background: var(--ftf-paper) !important;
  color: var(--ftf-green-ink) !important;
  border-color: var(--ftf-green) !important;
}

/* --- 21. Megadropdown positioning fix — SUPERSEDED, see §17 ----------------
   Originally: moved the mega panel's positioning anchor from the individual
   <li> up to .ftf-header__bar, giving it the header-bar's 1240px content
   width instead of one nav item's width. Correct as far as it went, but not
   what the authoritative spec (ftf-design-system.css, wordpress-child-theme
   bundle) actually specifies: there the anchor is .ftf-header itself, so the
   panel runs the FULL page width edge to edge (only .ftf-mega__inner stays
   centred at 1240px) — a more deliberate full-bleed megamenu look, not just
   "wide enough to not look cramped". Superseded 2026-09-04 (later round) when
   §17 was rewritten wholesale to match the spec exactly, including this
   positioning, the hover dead-zone fix, the caret, and the panel notch. Kept
   only as a comment for history — .ftf-header__bar no longer carries
   position:relative; .ftf-header does (see §17). */

/* --- 22. Browse-by-topic hover shape fix ------------------------------------
   Vincent: "browse by topic still has a weird hover effect." Root cause:
   Total injects "#content article a:not(...) { display: inline !important }"
   sitewide (an inline <style>, no stylesheet href — it doesn't even show up
   next to our own files when grepping for it). That selector carries an ID
   (#content), so it outranks our plain-class ".ftf-topics-grid a { display:
   flex !important }" from §12 regardless of source order. With the link
   forced back to display:inline, it no longer fills its grid cell — it
   shrinks to its text width and its line box drifts outside the cell's own
   box — so the :hover background (§12) paints a small, misplaced rectangle
   instead of neatly filling the row, which is the "weird hover effect."

   Fix: repeat ".ftf-topics-grid" four times in the selector below. Each
   repetition of the same class is a legal, separate class match for CSS
   specificity purposes, so this selector's specificity is (1 id, 4 classes,
   1 element) — enough to beat Total's (1 id, 3 classes, 3 elements), since
   the class column is compared before the element column and decides the
   match here. No ID of our own exists to hook onto for this component, so
   "#content" (real, present in the page for every normal post/page/archive
   view) is reused purely to match tier-for-tier against Total's rule. */
#content .ftf-topics-grid.ftf-topics-grid.ftf-topics-grid.ftf-topics-grid a {
  display: flex !important;
}