/* Section tone system (2026-10-31)
   Every content section after a page's hero carries data-ss="w|b|p" (set by /section-tone.php) and gets one of three backgrounds:
     w  white           #ffffff
     b  dark burgundy   #470000
     p  light pink      #e31e2426
   Text colours and eyebrow pills follow the tone; the backgrounds are plain solid colours (no circles, waves, gradients or dot grids). /js/section-system.js adds the helper classes used below:
     .ss-h  heading sitting directly on the section      .ss-t  body text sitting directly on the section
     .ss-sh sub-heading (bold line under the title)       .ss-i  member of the section intro block (eyebrow, heading, lead text, CTA)
     .ss-eb eyebrow label (pill + icon)                   .ss-hl highlighted word inside a heading
   and the section attribute data-ss-img (section keeps its own photo background).
   Hero sections never carry data-ss, so nothing here can reach them. */

:root {
  --ss-white: #ffffff;
  --ss-burgundy: #470000;
  --ss-pink: #e31e2426;
  --ss-red: #ff0000;
  --ss-max: 1500px;
  --ss-gutter: 20px;
  --ss-ink: #470000;
}

/* ---- backgrounds: full width; the content boundary (1500px) is handled by each page's own container ---- */
html body section[data-ss="w"]:not(#_) { background-color: var(--ss-white) !important; --ss-h: #470000; --ss-t: var(--ss-ink); --ss-eb-fg: #ff0000; --ss-eb-ic: #470000; --ss-eb-bg: #ffffff; --ss-eb-bd: #ff0000; --ss-hl: #ff0000; --ss-line: rgba(71, 0, 0, .14); }
html body section[data-ss="b"]:not(#_) { background-color: var(--ss-burgundy) !important; --ss-h: #ffffff; --ss-t: rgba(255, 255, 255, .88); --ss-eb-fg: #ff0000; --ss-eb-ic: #470000; --ss-eb-bg: #ffffff; --ss-eb-bd: #ff0000; --ss-hl: #ff0000; --ss-line: rgba(255, 255, 255, .18); }
html body section[data-ss="p"]:not(#_) { background-color: var(--ss-pink) !important; --ss-h: #470000; --ss-t: var(--ss-ink); --ss-eb-fg: #ff0000; --ss-eb-ic: #470000; --ss-eb-bg: #ffffff; --ss-eb-bd: #ff0000; --ss-hl: #ff0000; --ss-line: rgba(71, 0, 0, .16); }

/* ---- solid backgrounds: any gradient / glow / dot grid painted on the section itself is dropped; a section with its own photo (data-ss-img) keeps it ---- */
html body section[data-ss]:not([data-ss-img]):not(#_) { background-image: none !important; }

/* ---- decoration-only layers the engine found on the section (orbs, rings, glows, dot grids, waves, empty pseudo-element shapes) are off ---- */
html body section[data-ss] [data-ss-nodeco]:not(#_) { display: none !important; }
html body section[data-ss][data-ss-np~="b"]:not(#_)::before,
html body section[data-ss] [data-ss-np~="b"]:not(#_)::before,
html body section[data-ss][data-ss-np~="a"]:not(#_)::after,
html body section[data-ss] [data-ss-np~="a"]:not(#_)::after { display: none !important; }

/* ---- text sitting directly on the section surface ---- */
html body section[data-ss] .ss-h:not(#_) { color: var(--ss-h) !important; -webkit-text-fill-color: currentColor !important; background-image: none !important; }
html body section[data-ss="w"] .ss-t:not(#_),
html body section[data-ss="p"] .ss-t:not(#_) { color: #470000 !important; -webkit-text-fill-color: currentColor; }
html body section[data-ss="b"] .ss-t:not(#_) { color: var(--ss-t) !important; -webkit-text-fill-color: currentColor; } /* burgundy tone: #470000 text would vanish on the #470000 surface, so it keeps its light text */
html body section[data-ss] .ss-sh:not(#_) { color: var(--ss-h) !important; -webkit-text-fill-color: currentColor; }
html body section[data-ss] .ss-hl:not(#_) { color: var(--ss-hl) !important; -webkit-text-fill-color: currentColor !important; background-image: none !important; }

/* ---- eyebrow labels: icon + short title in a pill ---- */
html body section[data-ss] .ss-eb:not(#_) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; box-sizing: border-box;
  margin: 0 0 16px; padding: 10px 20px; border: 1px solid var(--ss-eb-bd) !important; border-radius: 999px; background: var(--ss-eb-bg) !important; background-image: none !important;
  color: var(--ss-eb-fg) !important; -webkit-text-fill-color: currentColor; font-size: 12px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important;
  text-decoration: none; box-shadow: none !important; text-shadow: none !important; filter: none; backdrop-filter: none; text-align: left;
}
/* a pill is icon + text only: no lines, dashes or extensions before or after it */
html body section[data-ss] .ss-eb:not(#_)::before,
html body section[data-ss] .ss-eb:not(#_)::after { content: none !important; display: none !important; }
/* words inside the pill (e.g. a two-colour label) take the pill colour */
html body section[data-ss] .ss-eb:not(#_) :not(i):not(svg):not(svg *) { color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; font: inherit !important; letter-spacing: inherit !important; }
html body section[data-ss] .ss-eb:not(#_) i,
html body section[data-ss] .ss-eb:not(#_) svg { flex: 0 0 auto; color: var(--ss-eb-ic) !important; fill: currentColor; font-size: 16px; line-height: 1; margin: 0; }
html body section[data-ss] .ss-eb:not(#_) svg { width: 16px; height: 16px; }
html body section[data-ss] .ss-eb.ss-eb--c:not(#_) { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }

/* ---- eyebrow follows its heading on desktop (class set by the engine): centred heading -> centred pill, left heading -> pill on the left ---- */
html body section[data-ss] .ss-eb.ss-eb--l:not(#_) { display: flex; width: fit-content; margin-left: 0; margin-right: auto; }

/* ---- tablet + mobile (<= 991px): every section intro (pill, heading, lead paragraphs, section CTA) is centred, on every page ---- */
@media (max-width: 991px) {
  html body section[data-ss] .ss-i:not(#_) { text-align: center !important; }
  html body section[data-ss] .ss-i:not(#_) { align-self: center; } /* inside a flex column the intro centres itself instead of hugging the left */
  html body section[data-ss] .ss-iM:not(#_) { margin-left: auto !important; margin-right: auto !important; }
  html body section[data-ss] .ss-eb.ss-i:not(#_) { display: flex; width: fit-content; justify-content: center; margin-left: auto; margin-right: auto; }
  html body section[data-ss] .ss-iw.ss-i:not(#_) { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  html body section[data-ss] .ss-iw.ss-i > .ss-eb:not(#_) { margin: 0; }
  html body section[data-ss] .ss-ic:not(#_) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; }
}

/* ---- content container: centred, never wider than 1500px, 20px gutters on every device (backgrounds stay full width) ---- */
html body section[data-ss]:not(.final-card):not(#_) > .container {
  width: 100%; max-width: var(--ss-max); margin-left: auto; margin-right: auto;
  padding-left: var(--ss-gutter); padding-right: var(--ss-gutter); box-sizing: border-box;
}
@media (max-width: 575px) { :root { --ss-gutter: 16px; } }