/* ============================================================
   FINCRIMERADAR BRAND LAYER v1
   Loaded AFTER each page's inline styles. Re-themes the whole
   site by overriding the existing CSS custom properties, then
   layers typography and micro-interactions on top.
   No page markup or component logic is touched.
   ============================================================ */

/* ---------- 1. Token remap (recolours every component using var()) ---------- */
:root{
  /* Accent system: screening outcomes. Clear green, review amber, match red. */
  --teal:#12B981;
  --teal-h:#0FA36F;
  --teal-deep:#0B7A57;
  --teal-soft:#E3F8EF;
  --teal-mid:#F2FBF7;

  --accent:#12B981;
  --accent-h:#0FA36F;
  --accent-light:#F2FBF7;

  --navy:#0C1B2A;
  --navy-mid:#071912;
  --navy-light:#0E3226;
  --hero-bg-1:#071912;
  --hero-bg-2:#0E3226;
  --hero-accent-em:#5DCAA5;

  --danger:#E5484D;
  --warning:#E8A33D;
  --success:#12B981;

  --white:#FFFFFF;
  --off:#F4F6F3;
  --border:#E3E8E3;
  --border-mid:#CFD7D1;

  --text:#0C1B2A;
  --slate:#3D4E5C;
  --muted:#66757F;
  --light:#93A0A8;
  --faint:#E8ECE9;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;

  --brand-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. Typography system ---------- */
body{
  font-family:'DM Sans',system-ui,sans-serif !important;
  background:var(--off);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,
.hero h1,.page-title,.section-title{
  font-family:'Playfair Display',Georgia,serif !important;
  letter-spacing:-.012em;
}
code,pre,kbd,samp{
  font-family:'IBM Plex Mono',ui-monospace,monospace !important;
}
::selection{background:var(--teal);color:#fff}

/* ---------- 3. Interactive polish ---------- */
a{transition:color .25s var(--brand-ease)}

button,
[class*="btn"]{
  transition:transform .3s var(--brand-ease),box-shadow .3s var(--brand-ease),
             background .25s,color .25s,border-color .25s;
}
button:hover,
[class*="btn"]:hover{
  transform:translateY(-2px);
}
button:active,
[class*="btn"]:active{
  transform:translateY(0);
}
/* Glow on primary-intent buttons */
.cta-btn:hover,.tl-btn:hover,.sc-btn-primary:hover,.inline-cta-btn:hover{
  box-shadow:0 8px 26px rgba(18,185,129,.35),0 0 0 1px rgba(18,185,129,.25);
}

/* Card lift: any component whose class mentions card */
[class*="card"]{
  transition:transform .45s var(--brand-ease),box-shadow .45s var(--brand-ease),
             border-color .3s;
}
[class*="card"]:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(12,27,42,.04),0 18px 44px rgba(12,27,42,.10);
}

/* Keyboard focus, always visible */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 4. Scroll reveals (classes applied by brand.js) ---------- */
.brv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--brand-ease),transform .85s var(--brand-ease);
  transition-delay:var(--brv-delay,0s);
}
.brv.in{opacity:1;transform:none}

/* ---------- 5. Respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .brv{opacity:1;transform:none}
  button:hover,[class*="btn"]:hover,[class*="card"]:hover{transform:none}
}

/* ---------- 6. Rich footer normalisation ----------
   Every page still carries a legacy rule from the old simple footer:
   footer { padding:2rem; text-align:center; border-top:...; }
   The rich navy footer is laid out with inline styles, but
   text-align:center INHERITS into all its columns, which is what
   made the whole footer centre itself. Scoped to the rich footer
   only (matched by its inline navy background) so the four pages
   still using the simple centred footer are untouched. */
footer[style*="0f2044"]{
  text-align:left !important;
  padding:0 !important;
  border-top:none !important;
}
footer[style*="0f2044"] a{
  margin:0 !important;
}

/* ---------- 7. Mobile horizontal overflow fix ----------
   Root cause found on inspection: the outer footer grids already had
   working overrides, either from the page's own original responsive
   rules or from this file, so collapsing them changed almost nothing,
   340px was already close to full mobile width. The actual overflow
   comes from the newsletter row itself, an email input sitting next
   to a Subscribe button with no stacking fallback, which is what
   clips the button on narrower phones. Fixed directly, plus the four
   column nav row, which had no mobile handling anywhere at all. */
html, body{
  overflow-x:hidden;
  max-width:100%;
}
@media (max-width:760px){
  footer[style*="071912"] div[style*="grid-template-columns:1fr 340px"]{
    grid-template-columns:1fr !important;
  }
  footer[style*="071912"] div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  footer[style*="071912"] div[style*="display:flex;gap:8px;"]{
    flex-direction:column !important;
  }
  footer[style*="071912"] div[style*="display:flex;gap:8px;"] input,
  footer[style*="071912"] div[style*="display:flex;gap:8px;"] button{
    width:100% !important;
  }
}
@media (max-width:480px){
  footer[style*="071912"] div[style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr !important;
  }
}

/* ---------- 8. Mobile table overflow fix ----------
   The first attempt forced display:block directly on the table
   element with overflow-x:auto, which did not reliably create a
   scroll container on the actual device this was tested against.
   brand.js now physically wraps every comparison table in a real
   div at runtime, this rule only needs to size that wrapper and
   let long cell content sit on one line so the scroll is genuinely
   usable rather than the row heights ballooning instead.
   white-space:nowrap is scoped to the same max-width:760px mobile
   breakpoint used elsewhere in this file (section 7): tables whose
   cells are short enough to already fit on desktop (the .data-table
   instances this was first built for) render identically either
   way, but table.ref-table (the guides' "At a glance" reference
   table, longer sentence-style cells) forced nowrap unconditionally
   would overflow and force a horizontal scrollbar on desktop too,
   where the text previously just wrapped onto two lines and fit
   without needing to scroll at all, a real regression caught while
   fixing the ref-table mobile clipping bug. */
.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:760px){
  .table-scroll table{
    white-space:nowrap;
  }
}

/* ---------- 9. Screening tool CTA button text hardening ----------
   Reported as an empty green box on the About page with no visible
   label. Static review did not turn up a definitive single cause,
   the button already declares white text explicitly, so this is a
   defensive hardening rule rather than a confirmed root cause fix,
   forcing text colour, visibility and sizing so the label cannot be
   suppressed by any conflicting rule loaded elsewhere on the page. */
.th-btn, .tl-btn, .cta-btn{
  color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  font-size:13px !important;
  line-height:1.4 !important;
}

/* ---------- 10. Grid child overflow trap fix ----------
   The genuine reason the table still would not scroll. CSS Grid
   items default to min-width:auto, meaning a grid column refuses to
   shrink below its content's natural width. With a wide table inside
   it, that means the grid column itself grows past the viewport
   instead of the table's own internal scroll wrapper ever kicking in,
   and the sitewide overflow-x:hidden safety net then clips that
   overflow entirely rather than letting anything scroll at all.
   Forcing min-width:0 on the article layout's direct children lets
   them actually shrink to viewport width, which is what allows the
   inner table-scroll div to become the genuinely constrained,
   scrollable element instead. */
.article-layout > *{
  min-width:0;
}