/* ==========================================================================
   Marathon Trends — interaction accent
   --------------------------------------------------------------------------
   Green on hover for everything clickable, and a permanently green
   "Let's Connect" tab.

   One mechanism, not a restyle. base.css and site.css already express every
   interactive state in terms of the gold accent tokens — var(--gold),
   var(--gold2), rgba(var(--gold-rgb),…) and color-mix(… var(--gold) …).
   Custom properties inherit, and a var() inside a *rule* resolves against the
   element that rule matched. So re-pointing those four tokens on a hovered
   element turns that element's existing hover treatment green: its border, its
   fill, its underline, its glow, its focus ring. No component is rewritten and
   base.css is not touched, which is what its header asks for.

   Undoing this is deleting one <link> in components/layout.js.

   The derived tokens below (--line, --shadow-gold, --gradient-gold …) need
   re-declaring by hand. They are written at :root as rgba(var(--gold-rgb),…),
   and a custom property containing var() is substituted where it is declared —
   so descendants inherit a finished colour string that no longer remembers it
   came from --gold-rgb. Re-pointing --gold-rgb alone would leave them gold.
   ========================================================================== */

/* The accent: emerald, one pair for all four themes.

   Two stops, because the tokens they stand in for do two different jobs.
   --acc replaces --gold, which fills buttons and draws borders, underlines and
   glows. --acc2 replaces --gold2, which is almost always text on a dark
   surface. So --acc is the deeper jewel tone and --acc2 the brighter one, the
   same relationship gold and gold2 had.

   Both were stepped one shade darker on request, to #059669 / #10B981.

   That puts --acc where dark text on a filled button is 4.8:1 rather than the
   7:1 the lighter pair had. It still clears the 4.5:1 AA floor for small text,
   which is the bar that matters here — the button label is 10px, so it counts
   as small no matter that it is bold. Worth knowing if the shade is taken any
   further down: white does not rescue it. #059669 sits near the luminance
   middle, so a white label would be 3.8:1, worse than the dark one. The
   crossover is around #047857, below which the labels would have to flip to
   light and several base.css rules would need overriding to do it.

   --acc2 is text on a dark surface and stays well clear at 7.1:1.

   Buttons were briefly given an emerald resting fill and then reverted, so
   they are gold again until hovered, like every other control. Kept from that
   exercise, in case it is revisited: the resting fill has to clear 4.5:1
   against its own label AND 3:1 against the page behind it, and those pull in
   opposite directions down the ramp. Measured against --bg #071A16 and --text
   #F3EFE6, #047857 is the only step that clears both — one shade lighter and
   the light label fails, one darker and the button sinks into the page.

   All four themes share these. The greens in base.css differ per theme, but
   this accent is the brand's, not the theme's — and monochrome gets it too,
   which is the one place it is a visible departure, since nothing else there
   carries a hue. */
:root{
  --acc:#059669;--acc2:#10B981;
  --acc-rgb:5,150,105;--acc2-rgb:16,185,129;
}

/* --------------------------------------------------------------------------
   Hover — every clickable thing.

   Guarded by (hover:hover) so a touch device does not leave the accent stuck
   on the last thing tapped. Keyboard parity is handled separately below, and
   deliberately: a control reached by Tab should read the same as one reached
   by mouse.
   -------------------------------------------------------------------------- */
@media (hover:hover){
  a[href]:hover,
  button:not([disabled]):hover,
  summary:hover,
  label[for]:hover,
  .note-more label:hover,
  select:not([disabled]):hover,
  input[type="submit"]:not([disabled]):hover,
  input[type="button"]:not([disabled]):hover,
  input[type="reset"]:not([disabled]):hover,
  [role="button"]:not([aria-disabled="true"]):hover,
  [role="tab"]:hover,
  [role="link"]:hover,
  .btn:hover,
  /* clickable surfaces that are not semantic controls */
  .sector-list:hover,
  .note-grid .note:hover,
  .leader-live:hover,
  .hold-live:hover,
  tr[data-industry]:hover,
  .rp-row[data-rp-industry]:hover{
    --gold:var(--acc);
    --gold2:var(--acc2);
    --gold-rgb:var(--acc-rgb);
    --gold2-rgb:var(--acc2-rgb);

    --line:rgba(var(--acc-rgb),.20);
    --line-bright:rgba(var(--acc-rgb),.42);
    --shadow-gold:0 0 40px rgba(var(--acc-rgb),.18);
    --shadow-gold-lg:0 12px 48px rgba(var(--acc-rgb),.28);
    --gradient-gold:linear-gradient(135deg,var(--acc),var(--acc2),var(--acc));
  }
}

/* Keyboard focus reads the same as hover. */
a[href]:focus-visible,
button:not([disabled]):focus-visible,
summary:focus-visible,
select:not([disabled]):focus-visible,
input[type="submit"]:not([disabled]):focus-visible,
input[type="button"]:not([disabled]):focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
.btn:focus-visible{
  --gold:var(--acc);
  --gold2:var(--acc2);
  --gold-rgb:var(--acc-rgb);
  --gold2-rgb:var(--acc2-rgb);

  --line:rgba(var(--acc-rgb),.20);
  --line-bright:rgba(var(--acc-rgb),.42);
  --shadow-gold:0 0 40px rgba(var(--acc-rgb),.18);
  --shadow-gold-lg:0 12px 48px rgba(var(--acc-rgb),.28);
  --gradient-gold:linear-gradient(135deg,var(--acc),var(--acc2),var(--acc));
}

/* --------------------------------------------------------------------------
   Hovers that never touched the accent.

   Of the 258 hover rules across base.css and site.css, 141 are written in the
   gold tokens and so turn green above — every nav link, breadcrumb, pager,
   mega-menu title and footer link among them. Of the rest, most already use
   --green, or only lift their surface (--hover / --card / --alt), which is a
   deliberate response and is left alone.

   Listed below is what the audit left over: clickable things that showed no
   green at all. Simple links take the accent as their colour. The two data
   rows take the inset green edge that .rank-table already uses for exactly
   this job, so no new idiom is introduced.
   -------------------------------------------------------------------------- */
@media (hover:hover){
  .srail-link:hover,
  .login-pop a:hover,
  .think-col:hover h3,
  .rp-row[data-rp-industry]:hover .rp-nm,
  .rank-table tbody tr:hover .sector-tag{ color:var(--acc2) }

  .wis-step:hover,
  .ind-row:hover{ box-shadow:inset 2px 0 0 var(--acc) }

  /* .subnav a:hover is declared twice — once to --text, later to --gold2.
     Pinned here so sheet order does not get to decide the colour. */
  .subnav a:hover{ color:var(--acc2) }
}


/* --------------------------------------------------------------------------
   "Let's Connect" — green permanently.

   The tab is built entirely from the accent tokens in base.css: a four-stop
   gradient, a drop shadow, two expanding pulse rings and a focus outline. So
   it needs no rules of its own here either — only the tokens re-pointed, and
   all five surfaces follow. Its label stays var(--bg), which keeps dark text
   on the green.
   -------------------------------------------------------------------------- */
.connect{
  --gold:var(--acc);
  --gold2:var(--acc2);
  --gold-rgb:var(--acc-rgb);
  --gold2-rgb:var(--acc2-rgb);
}