/* ==========================================================================
   nx-nav-contrast.css — CTA contrast fix (X48)
   --------------------------------------------------------------------------
   ADDITIVE LAYER. Load LAST, after nx-system.css.

   THE BUG
   -------
   The "Run Free Check" CTA renders muted grey-blue text on the bright cyan
   gradient. Measured contrast: 1.11:1. WCAG AA requires 4.5:1 for normal text.
   It is not "hard to see" — it is essentially invisible.

   ROOT CAUSE — a specificity collision, not a colour choice
   --------------------------------------------------------
   The button styles DO specify correct dark text:

     quantum-defense-os.css:171   .btn{ background:var(--grad-primary); color:#04141b }
     style.css:68                 .btn{ background:linear-gradient(...);  color:#04222c }

   But the nav sets a colour on every anchor:

     style.css:34                 .nav a{ color:var(--muted) }

   Specificity:
     .nav a   = (0,1,1) = 11    class + element
     .btn     = (0,1,0) = 10    class only

   `.nav a` wins on every markup of the form <a class="btn nav-cta">, so the
   CTA loses its intended dark text and inherits --muted (#B6C4D3). Against the
   gradient that is a near-identical luminance, hence 1.11:1.

   This affects ONLY buttons rendered as anchors inside .nav. The same .btn on
   a <button> element, or anywhere outside the nav, has always been correct —
   which is why it looks fine everywhere else on the site.

   MEASURED (WCAG 2.1 relative luminance, worst point of the gradient)
   -------------------------------------------------------------------
     gradient:  #22E0FF -> #278CFF

     text            vs #22E0FF   vs #278CFF   worst     verdict
     --muted         1.11:1       1.88:1       1.11:1    FAIL      <- current
     #ffffff         1.59:1       3.34:1       1.59:1    FAIL      <- do NOT "fix" with white
     var(--ink)      1.49:1       3.13:1       1.49:1    FAIL
     #04141b        11.75:1       5.60:1       5.60:1    PASS AA   <- applied below

   Note the second row. The instinct on a bright button is to make the text
   white; on this gradient that is barely better than the bug. Dark text is the
   only thing that passes, which is what the original .btn rules already knew.

   FIX
   ---
   Raise specificity on the CTA alone, to (0,2,1) = 21, so it beats `.nav a`
   without touching any other nav link or any other button on the site.
   ========================================================================== */

/* --- The fix -------------------------------------------------------------- */

.nav a.btn,
.nav a.nav-cta,
.topbar a.btn{
  color:#04141b;                 /* 5.60:1 worst case — passes AA */
  font-weight:700;               /* dark-on-bright benefits from extra weight */
}

/* Hover and focus must not regress to the inherited nav colour. `.nav a:hover`
   (style.css:35, style.css:195) sets --ink, which measures 1.49:1. */
.nav a.btn:hover,
.nav a.nav-cta:hover,
.nav a.btn:focus,
.nav a.nav-cta:focus,
.nav a.btn:active,
.nav a.nav-cta:active,
.topbar a.btn:hover{
  color:#04141b;
  background-image:var(--grad-primary, linear-gradient(135deg,#22E0FF 0%,#278CFF 100%));
}

/* `.nav a:hover` also sets a translucent white background (style.css:195),
   which would wash out the gradient underneath. Suppress it for the CTA only. */
.nav a.btn:hover,
.nav a.nav-cta:hover{
  background-color:transparent;
}

/* --- Focus visibility ----------------------------------------------------- */
/* A cyan focus ring on a cyan button is not a focus ring. Use a light outline
   with a dark offset ring so it reads against both the button and the nav. */

.nav a.btn:focus-visible,
.nav a.nav-cta:focus-visible{
  outline:3px solid #ffffff;
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(4,20,27,.85);
}

/* --- Ghost / secondary nav buttons --------------------------------------- */
/* "Sign in" is .ghost — transparent on the dark nav, so it needs the OPPOSITE
   treatment: a light foreground. --muted at #B6C4D3 on the dark nav panel is
   around 8:1 and already passes, but the border was faint enough to read as
   disabled next to the solid CTA. */

.nav a.ghost{
  color:var(--ink, #F3F8FC);
  border-color:rgba(150,210,245,.55);
}
.nav a.ghost:hover,
.nav a.ghost:focus-visible{
  color:var(--ink, #F3F8FC);
  border-color:rgba(150,210,245,.9);
  background-color:rgba(34,224,255,.10);
}

/* --- Forced colours / high contrast -------------------------------------- */

@media (forced-colors:active){
  .nav a.btn,
  .nav a.nav-cta{
    color:ButtonText;
    background:ButtonFace;
    border:1px solid ButtonText;
    forced-color-adjust:none;
  }
  .nav a.btn:focus-visible,
  .nav a.nav-cta:focus-visible{
    outline:3px solid Highlight;
    box-shadow:none;
  }
}

/* ==========================================================================
   PREVENTING THE RECURRENCE
   --------------------------------------------------------------------------
   The underlying problem is that `.nav a{color:...}` is a blanket rule that
   captures button-shaped anchors it was never meant to style. The durable fix
   is to scope it so it only targets plain nav links:

     style.css:34
       BEFORE  .nav a          { color:var(--muted) }
       AFTER   .nav a:not(.btn):not(.ghost) { color:var(--muted) }

     style.css:35 and style.css:195, same treatment for :hover.

   That is a one-line edit in three places and makes this stylesheet
   unnecessary. It is the better fix, but it touches a base stylesheet used by
   every page, so it is offered as a follow-up rather than bundled here.

   Ship this layer first. Apply the :not() scoping at the next convenient
   base-CSS change, then delete this file.
   ========================================================================== */