/* Accent text uses the RID-ENERGY brand blue; lighter blue highlights support readability on dark backgrounds. */

:root {
  /* Solid, for text small enough that a gradient would muddy it. */
  --accent-text: #0066FF;
  --accent-text-dark: #0066FF;

  /* Blue-only highlights: no violet tint. */
  --accent-sweep: linear-gradient(100deg, #0066FF, #1A7CFF);
  --accent-sweep-dark: linear-gradient(100deg, #1A7CFF, #66AAFF);
}

/* ── small and inline accents ───────────────────────────────────────────
   Solid colour. A gradient across a 13px label is illegible mush, and most of
   the 191 .text-primary usages on this site are small. */
.text-primary,
.text-primary-hover:hover { color: var(--accent-text) !important; }

/* On a dark ground the same blue is too close to the background. */
.bg-secondary .text-primary,
.bg-dark .text-primary,
footer .text-primary,
.hero .text-primary { color: var(--accent-text-dark) !important; }

/* ── display accents ────────────────────────────────────────────────────
   The gradient is spent here and only here: headline type is large enough to
   carry it, and one treatment in one place reads as deliberate where the same
   effect on every label would read as noise.

   @supports guards it — background-clip:text with transparent colour means an
   unsupporting browser would render the words invisible rather than merely
   unstyled. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 .text-primary,
  h2 .text-primary,
  h3 .text-primary,
  .display-1 .text-primary,
  .display-2 .text-primary,
  .display-3 .text-primary,
  .display-4 .text-primary,
  .display-5 .text-primary,
  .display-6 .text-primary,
  .partners__head h2 .text-primary {
    background: var(--accent-sweep);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    /* Without this a descender or an italic edge gets clipped by the box. */
    padding-inline: 0.02em;
    margin-inline: -0.02em;
  }

  .bg-secondary h1 .text-primary,
  .bg-secondary h2 .text-primary,
  .bg-dark h1 .text-primary,
  .bg-dark h2 .text-primary,
  .hero h1 .text-primary,
  .hero h2 .text-primary,
  footer h2 .text-primary {
    background: var(--accent-sweep-dark);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
  }
}

/* Selection should not invert into unreadable transparent-on-blue. */
.text-primary::selection { -webkit-text-fill-color: #fff; color: #fff !important; background: var(--accent-text); }

/* Links that use the accent keep it on hover rather than reverting to the
   theme's default blue, which would otherwise flicker between two blues. */
a:hover .text-primary,
a:focus .text-primary { filter: brightness(1.12); }

/* Windows high-contrast mode strips background images, which would leave
   gradient text invisible. Opt out of the effect entirely there. */
@media (forced-colors: active) {
  h1 .text-primary, h2 .text-primary, h3 .text-primary,
  [class*="display-"] .text-primary {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: LinkText !important;
  }
}

/* Electrical effect colors share the site's blue accent. Pale blue is used
   only for the brightest edges and sparks. */
:root {
  --storm-base:   #0055D6;
  --storm-accent: #CCE4FF;
}

.storm-canvas {
  position: absolute;
  pointer-events: none;   /* the storm reacts to the pointer, never swallows it */
  z-index: 0;
  /* Deliberately NOT `screen`. Additive blending was right while the canvas
     only threw glow around live DOM text, but the shader draws the words now,
     and screen can only lighten: every letter would pick up whatever the photo
     is doing behind it, drifting off --accent-text-dark toward white over the
     bright parts of the banner. Normal compositing keeps the ink exact, and
     the bolts still read as bolts because the ground under them is dark. */
  contain: layout style paint;
}

/* The live text must stay above its own storm — it is the readable layer. */
.hero .hero-copy > *:not(.storm-canvas),
.bg-secondary .section-title-01 > *:not(.storm-canvas) { position: relative; z-index: 1; }

/* Storms only exist where there is something to light up. */
@media (prefers-reduced-motion: reduce) {
  .storm-canvas { display: none; }
}

/* ── the mark is now drawn by the shader ────────────────────────────────
 * js/lightning.js adds .storm-lit to a span only AFTER it has rendered a frame
 * of that span's words in its place. The text stays in the DOM — selectable,
 * announced, indexed — and is merely painted away.
 *
 * The tripled class is deliberate, not a typo. `.hero h1 .text-primary` above
 * is (0,3,0), so a single class cannot clear its `background` no matter how
 * many !important flags it carries. Three ties the specificity and this rule
 * comes later, so it wins. Inline styles from JS would also work, and would be
 * harder to find when someone wonders where the text went.
 */
.storm-lit.storm-lit.storm-lit {
  background: none !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* ── footer links ───────────────────────────────────────────────────────
 * styles.css:3169 paints every <a> inside .bg-secondary #00BBFF !important.
 * The footer carries that class, so all twenty of its links came out a cyan
 * that appears nowhere else on the site — measured 9.55:1 on the black
 * ground against the accent's 4.34:1, which is exactly why it read as
 * "lighter". The !important also beat .text-white, so the address, the two
 * phone numbers and the email — which are meant to be plain white text that
 * happens to be clickable — were tinted as well.
 *
 * Two rules, because the footer holds two kinds of link and they were being
 * given one colour:
 */

/* 1. Things that are text first and links second: white, like the copy
      around them. Anything else makes an address look like navigation. */
footer.bg-secondary a.text-white,
footer.bg-secondary a.text-white:hover,
footer.bg-secondary a.text-white:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* 2. Actual navigation: the site accent, exactly as everywhere else. The
      theme already defines the hover as white (styles.css:3149), so the
      affordance survives. */
footer.bg-secondary a,
footer.bg-secondary .links-wrap li a,
footer.bg-secondary .footer-meta a {
  color: var(--accent-text-dark) !important;
}
footer.bg-secondary .links-wrap li a:hover,
footer.bg-secondary .footer-meta a:hover {
  color: #fff !important;
}

/* The logo is a link too, and it wraps an image — a colour on it is noise. */
footer.bg-secondary .footer-logo a { color: inherit !important; }