/* ---------------------------------------------------------------------------
   theme-white.css — the light shell, for pages that have not gone black yet.

   ⚠️ WHAT THIS IS, HONESTLY. This is NOT a copy of Simvoly's Template7
   stylesheet. The white pages get their entire look today from four minified
   files on static.web-repository.com, which stop serving when the Simvoly
   account ends, and which are 16,486 characters of platform CSS before any of
   riddimBank's own rules. Reproducing that is Phase 5 work, page by page, and
   doing it now would be guessing.

   What this file DOES do: give a white page a clean, readable light shell —
   the same black header as every other page, sane typography, a light footer —
   so a page can be ported into this layout and be correct, not pretty, until
   its own CSS arrives with it in Phase 3.
   --------------------------------------------------------------------------- */

:root {
  --rb-ink: #222222;
  --rb-ink-soft: #555555;
  --rb-rule: #e2e2e2;
  --rb-green: #00A651;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--rb-ink);
  background: #ffffff;
  line-height: 1.6;
}

main { max-width: 1100px; margin: 0 auto; padding: 48px 24px; }

h1, h2, h3, h4 { line-height: 1.25; margin-bottom: 16px; }
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
p { margin-bottom: 16px; }
a { color: var(--rb-green); }

/* The footer markup is shared with the black theme, so it is restyled here
   rather than duplicated. */
/* ---------------------------------------------------------------------------
   SLIM FOOTER — 17 September 2026, Joe's call after seeing three densities.

   The four-column footer measured 268px, a THIRD of an 800px browser window.
   This one is ~108px on black. Brand name at the left, every link in one row at
   the right, copyright underneath.

   WHAT IT GIVES UP, knowingly: the column headings and the blurb. The headings
   are NOT display:none — they are visually hidden, so screen readers and
   crawlers still get "Quick Links / Support / Connect" as group labels while
   sighted visitors see one clean row. Deleting them from the markup would have
   thrown that away for nothing.

   The links come from site.footer.<theme> in site/_data/site.json, so the row
   is whatever that file says. Black carries 9, white 12; the row wraps rather
   than overflowing.

   On phones the row wraps to centred lines and every link keeps a 44px tap
   target — same rule the previous footer had, and it still matters more here
   because the links now sit side by side rather than stacked.
   --------------------------------------------------------------------------- */
.footer { background: #f6f6f6; border-top: 1px solid var(--rb-rule); padding: 16px 24px; }
.footer-container { max-width: 1100px; margin: 0 auto; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 10px; }
.footer-column { flex: 0 0 auto; }
.footer-column:first-child { margin-right: auto; }
.footer-column:first-child p { display: none; }
.footer-column h4 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.footer-column:first-child h4 { position: static; width: auto; height: auto; margin: 0; clip: auto;
  clip-path: none; overflow: visible; white-space: normal; font-size: 1rem; color: var(--rb-ink); }
.footer-links { display: flex; flex-direction: row; gap: 18px; }
.footer-link { color: var(--rb-ink-soft); text-decoration: none; font-size: 0.875rem; white-space: nowrap; }
.footer-link:hover { color: var(--rb-green); }
.footer-bottom { padding-top: 10px; border-top: 1px solid var(--rb-rule); text-align: center; }
/* .footer-bottom-sep / -link rules removed 17 Sept 2026: License
   Agreement moved into the link row, so the bottom bar is the copyright alone. */
.footer-bottom p { color: var(--rb-ink-soft); font-size: 0.8125rem; }

/* ---------------------------------------------------------------------------
   The 404 page, ported from the live Simvoly one on 17 September 2026.

   CORRECTED the same day. The first port used Open Sans, because that is what
   the <h2> wrapper declares. It is not what you see: an inner <span> overrides
   it with POIRET ONE, and that thin geometric face is the whole character of
   the page. Measured on the live element that actually holds the words:

     heading   'Poiret One', 42px, weight 700, colour #3e3e3e, centred
     button    live is 135px wide, padding 12px 24px, radius 60px, Arial 16px

   The button here is the site's own .cta-primary rather than Simvoly's flat
   rectangle, but it is held to roughly the live footprint instead of the big
   hero size — and, crucially, it is stopped from going full width on narrow
   screens, which the shared rule would otherwise do.
   --------------------------------------------------------------------------- */
.rb-404 { text-align: center; max-width: 1100px; margin: 0 auto; padding: 40px 24px 64px; }

.rb-404 h1 {
  font-family: 'Poiret One', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 42px;
  /* 400, NOT the 700 the live page computes. Poiret One ships one weight, so
     700 makes the browser fake a bold and the thin geometric face — the whole
     point of it — turns into a smear. Same trap as Archivo Black. */
  font-weight: 400;
  line-height: 1.3;
  color: #3e3e3e;
  margin: 0 0 4px;
}

.rb-404-cta { margin: 32px 0 40px; }

/* Hold the primary button to the live page's footprint, and override the
   shared width:100% mobile rule — a full-width button on a 404 reads as an
   error banner rather than a way out. */
.rb-404 .cta-primary {
  width: auto !important;
  font-size: 1rem;
  padding: 14px 34px;
  box-shadow: 0 6px 16px rgba(0, 166, 81, 0.35);
}
.rb-404 .cta-primary:hover { box-shadow: 0 10px 24px rgba(0, 166, 81, 0.5); }

/* Live constrains the score to the content column, not the full window. */
.rb-404-art { display: block; width: 100%; max-width: 1050px; height: auto; margin: 0 auto; }

@media (max-width: 768px) {
  .rb-404 h1 { font-size: 28px; }
}

/* ---------------------------------------------------------------------------
   FONT SMOOTHING — added 17 September 2026 after measuring both pages.

   The live site computes -webkit-font-smoothing: antialiased; the port computed
   'auto'. On macOS 'auto' means SUBPIXEL antialiasing, which renders light text
   on a dark background noticeably heavier and with colour fringing on the glyph
   edges. That fringing is what reads as "blurry", and the extra weight is what
   reads as "bolder". Same font, same size, same weight — different rasteriser.

   Simvoly's platform stylesheet sets this, which is why the live page looks
   cleaner. Do not remove these two lines: they are the difference.
   --------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* The live page also sets this. It turns on the font's proper kerning and
     ligatures, which tightens letter pairs instead of leaving them on the
     browser's rough default spacing. Second of the two properties that
     differed between live and this port; nothing else did. */
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   NEVER LET THE BROWSER FAKE A BOLD. Added 17 September 2026.

   Archivo Black ships one weight. Poiret One ships one weight. Ask either for
   bold and the browser cannot load a heavier file, so it SYNTHESISES one by
   inflating every stroke outward. The strokes grow into the counters — the
   enclosed white spaces — and the gap inside an 'S' or an 'e' closes up. That
   is what "blurry" looked like on /main-page: not the rasteriser, a fake bold.

   Headings default to bold, so this was happening everywhere by default. Each
   rule now pins font-weight: 400, and this belt-and-braces line means that even
   if someone later adds a <strong> or a bold utility class inside one of these
   elements, the browser refuses to fake it rather than smearing the glyphs.

   Deliberately NOT global: body text is Helvetica Neue, which HAS a real bold,
   and <strong> there should keep working normally.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4,
.section-title, .step-title, .style-name, .final-cta h2,
.footer-column h4, .cta-primary, .rb-404 h1 {
  font-synthesis: none;
}

/* ---------------------------------------------------------------------------
   PHONE TAP TARGETS — measured 17 September 2026 on a 375px viewport.
   Footer links were rendering 24px tall. They are fine with a mouse and awkward
   with a thumb, so they get real height on small screens only. Desktop spacing
   is unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* The row becomes centred wrapped lines. Tap targets stay 44px — this matters
     MORE in the slim footer than it did in the stacked one, because the links
     now sit shoulder to shoulder and a miss hits the neighbour. */
  .footer-grid { flex-direction: column; align-items: center; gap: 4px; }
  .footer-column:first-child { margin-right: 0; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 0 18px; }
  .footer-link { display: inline-flex; align-items: center; min-height: 44px; }
}