/* ---------------------------------------------------------------------------
   Accessible colour tokens - blog (Bricks)
   2026-07-28. Measured with headless Chromium on computed styles: 90 failing
   nodes on /blog/ and /blog/linkedin-hacks/ alone, all WCAG 2.1 AA (1.4.3).

   Same treatment already applied to help.socialchamp.com, but that install runs
   Elementor and shares NO code with this one, so the fix has to be repeated
   here. Values are recomputed against the BLOG's own surfaces (it uses a warm
   white #fffdf9 and a lavender #f0eef9 that the help centre does not).

   Tokens (brand hue 25deg preserved, computed not eyeballed):
     --sc-action    #a84500  passes on EVERY light surface actually used on the
                             blog: #ffffff 5.97, #fffdf9 5.88, #fcfaf4 5.72,
                             #fafafa 5.72, #f0eef9 5.21, #e3dff5 4.59,
                             #fff0d3 5.31; white-on-it 5.97 for buttons.
                             (#b24900 passed on the four surfaces I first knew
                             about but only 3.98 on #e3dff5 - the surface set was
                             incomplete until the selectors were measured.)
     --sc-secondary #646464  5.92 on #ffffff, 5.82 #fffdf9, 5.67 #fcfaf4,
                             5.67 #fafafa, 5.16 #f0eef9, 4.55 #e3dff5,
                             5.26 #fff0d3. (#6d6d6d was 3.98 on #e3dff5.)
   Measured failures this replaces:
     #7c8697 on #fffdf9 = 3.62   #7c8697 on #f0eef9 = 3.20
     #ff6900 on #ffffff = 2.89   white on #ff6900   = 2.89
     #e96629 on #f0eef9 = 2.86   #9e9e9e on #ffffff = 2.68
     #e96629 on #5c6bc0 = 1.48  <- dark indigo, needs white (4.86)
--------------------------------------------------------------------------- */

:root{
  --sc-action:#a84500;
  --sc-secondary:#646464;
  --sc-focus:#8f3a00;
  --sc-focus-dark:#4A1E00;
}

/* Bricks writes PER-ELEMENT rules keyed on the element ID (#brxe-xxxxx), which
   is specificity 1,0,0 and beats any class selector. Theme classes such as
   .sc-nav-link-orange likewise beat a bare `a`. Measured: the first pass loaded
   correctly and still lost. !important on the colour property is the targeted
   way to win, exactly as on the Elementor install. */

/* meta, dates, captions, bylines. .brxe-code carries the post dates (#7c8697,
   3.62:1) - it is a separate Bricks element type, not a text-basic. */
.brxe-code,
.brxe-code *:not(a),
.comment-meta,
.comment-meta *:not(a),
.reply:not(:has(a)),
.comment-form label,
form label,
.brxe-text-basic,
.brxe-text-basic *:not(a),
.post-meta,
.post-meta *:not(a),
figcaption,
.wp-caption-text,
.brxe-post-meta,
.brxe-post-meta *:not(a){
  color:var(--sc-secondary) !important;
}

/* ...and give those links back their link identity. Measured before this
   exclusion: 9 links on a single post rendered in body-text grey with no
   underline - breadcrumbs, comment "Reply", and related-post titles were
   visually indistinguishable from surrounding text (WCAG 1.4.1 use of colour).
   The grey passed 1.4.3 contrast, which is why the ratio audit did not catch
   it; a link that is not identifiable as a link is a different failure. */
.brxe-text-basic a,
.post-meta a,
.brxe-post-meta a,
.comment-meta a,
.reply a,
a.comment-reply-link,
a.brxe-text-basic{
  color:var(--sc-action) !important;
}

/* .sc-header-orange-heading is a <p>, not a link, so the a{} rule never reached
   it: #ff6900 on #fcfaf4 measured 2.89:1. */
.sc-header-orange-heading,
p.sc-header-heading.sc-header-orange-heading{
  color:var(--sc-action) !important;
}

/* LINKS.
   The :not([style*="background"]) exclusion is load-bearing, not tidiness. A
   bare `a{color:...!important}` overrides ONLY the foreground of a link that
   paints its own background, and leaves that background alone. Two real cases
   in this theme:
     * the [cta] shortcode - wellows_cta_shortcode(), functions.php:409-427 -
       emits inline background-color:#0554F2 with color:#ffffff. Forcing the
       action token gave #a84500 on #0554F2 = 1.01:1. It was 5.90:1 before.
       That shortcode is usable in any post.
     * #cta-start, page-saving-calculator.php:320 - inline background-color
       plus color, same failure mode.
   Inline colours are non-important, so they always lose to this rule; skipping
   links that carry their own background is what keeps the pair coordinated.

   Note this is an EXCLUSION on an attribute, not a recolour keyed on one - the
   [style*="#263238"] matchers removed further down were the latter, which is
   why those were unsafe and this is not: worst case here is that a link keeps
   the colour it already had. */
a:not([style*="background"]){ color:var(--sc-action) !important; }
a:not([style*="background"]):hover,
a:not([style*="background"]):active{ color:var(--sc-focus) !important; }

/* DARK SHELLS. Both variants set light link colours on a dark background, and
   the rule above would have overridden them to the light-surface token:
     .sc-footer--dark  #d8d8d8 on #464646 = 6.62:1  ->  #a84500 = 1.58:1
     .sc-header--dark  #ffffff on the dark shell    ->  same collapse
   Restored at the theme's own specificity, with !important to beat the rule
   above. Values copied from footer-style.css:622 and header-style.css:1201. */
.sc-footer--v2.sc-footer--dark .sc-footer__menu a,
.sc-footer--v2.sc-footer--dark .sc-footer__menu a:visited{ color:#d8d8d8 !important; }
.sc-footer--v2.sc-footer--dark .sc-footer__menu a:hover,
.sc-footer--v2.sc-footer--dark .sc-footer__menu a:focus-visible{ color:#ffffff !important; }
.sc-footer--v2.sc-footer--dark .sc-footer-social-links a{ color:#ffffff !important; }

@media (min-width: 1025px){
  .sc-header--dark .sc-nav-wrap > .sc-nav-item > .sc-nav-link,
  .sc-header--dark .sc-nav-head,
  .sc-header--dark .sc-nav-wrap > .sc-nav-item > .sc-nav-link:hover,
  .sc-header--dark .sc-nav-wrap > .sc-nav-item:hover > .sc-nav-head{
    color:#ffffff !important;
  }
}

/* WCAG 1.4.1 - inside prose, colour alone is not enough to mark a link */
.brxe-post-content :is(p,li,td,th,blockquote,dd,dt) a,
.entry-content :is(p,li,td,th,blockquote,dd,dt) a{
  text-decoration:underline;
  text-underline-offset:2px;
}

/* The nav uses .sc-nav-link-orange for BOTH an orange-text link and an
   orange-filled button, so both directions of the 2.89:1 failure live here. */
a.sc-nav-link-orange{ color:var(--sc-action) !important; }
a.sc-nav-link-orange.sc-nav-link--fill,
a.sc-nav-link-orange[class*="cta"]{
  background-color:var(--sc-action) !important;
  color:#ffffff !important;
}

/* The skip-link sits on #000000, where the light-surface action token is only
   3.85:1. It must be near-white there. (Introduced by the first pass; caught by
   re-measuring rather than assuming the change was safe.) */
.skip-link,
a.skip-link,
.skip-link:focus{
  color:#ffffff !important;
  background:#000000 !important;
}

/* The newsletter Subscribe button is painted by
   `.sc-footer--v2 .sc-newsletter-row button` (0,2,1) - more specific than the
   .brxe-button rule below, so it kept #ff6900 (white label = 2.89:1).
   Matched at equal specificity here; this sheet is enqueued after
   footer-style.css, so it wins on order. */
.sc-newsletter-row button,
.sc-footer--v2 .sc-newsletter-row button{
  background-color:var(--sc-action) !important;
  border-color:var(--sc-action) !important;
  color:#ffffff !important;
}

/* CTA buttons: white label on #ff6900 measured 2.89:1. The live class is
   .sc-nav-link-bg-orange - .sc-nav-link--cta was a guess and matched nothing. */
/* Every anchor-based selector here is qualified with `a` on purpose. Adding
   :not([style*="background"]) to the link rule above raised it from (0,0,1) to
   (0,1,1), which out-specified a bare .brxe-button (0,1,0) - button labels took
   the action colour ON the action background, 1:1. The a-qualified forms tie at
   (0,1,1) and sit later in the file, so they win. Do not drop the `a`. */
.sc-nav-link-bg-orange,
a.sc-nav-link-bg-orange,
a.sc-nav-link.sc-nav-link-bg-orange,
.sc-nav-link--cta,
a.sc-nav-link--cta,
.brxe-button,
a.brxe-button,
.bricks-button,
a.bricks-button,
button[type=submit],
input[type=submit]{
  background-color:var(--sc-action) !important;
  border-color:var(--sc-action) !important;
  color:#ffffff !important;
}
.sc-nav-link--cta:hover,
a.sc-nav-link--cta:hover,
a.sc-nav-link-bg-orange:hover,
.brxe-button:hover,
a.brxe-button:hover,
.bricks-button:hover,
a.bricks-button:hover,
button[type=submit]:hover,
input[type=submit]:hover{
  background-color:var(--sc-focus) !important;
  border-color:var(--sc-focus) !important;
  color:#ffffff !important;
}

/* DARK PANELS. The action token is a LIGHT-surface colour: it measures 2.2:1 on
   the slate #263238 and 1.23:1 on the indigo #5c6bc0. Those panels need white
   (13.16:1 and 4.86:1). The real panels are matched by CLASS at the end of this
   file; a [style*="#263238"] attribute matcher was tried here and removed - it
   matched nothing on any audited page (both panels colour themselves from a
   stylesheet, not an inline style) AND it was unsafe: [style*="#263238"] also
   matches style="color:#263238" or a border of that colour, which would have
   forced white text onto a light background. .sc-on-dark stays as the manual
   opt-in hook for any future dark section. */
.sc-on-dark a, .sc-on-dark{
  color:#ffffff !important;
}

/* The author byline used to need an #brxe-sijqir override here. FIXED AT SOURCE
   2026-07-28 instead: the colour lived in three places on the Single Blog Post
   Template (340708) - an inline <span style="color:#E96629"> in the element's
   text, and a _cssCustom `#brxe-sijqir span a {...!important}` block. Both now
   use #A84500.

   The "Reviewed by" element (devfgm) carried the same colour as an INLINE
   !important, which no stylesheet can override at all - it was failing at
   2.86:1 on every post that has a reviewer and could only ever be fixed here.
   Its _cssCustom had also been copy-pasted and still targeted #brxe-sijqir, so
   it styled the wrong element; that now points at #brxe-devfgm.

   Nothing in this file targets a Bricks element id any more, which is what made
   the previous approach fragile: a rebuilt element gets a new id and the rule
   silently stops matching. */
.brxe-post-content a{ color:var(--sc-action) !important; }

/* required-field asterisks were #9e9e9e (2.68:1) */
.required,
span.required{ color:var(--sc-secondary) !important; }

/* Visible focus. Two tones >=9:1 apart (W3C C40) so one always reaches 3:1
   regardless of what sits behind it: #4A1E00 vs #ffffff = 14.22:1. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--sc-focus-dark);
  outline-offset:2px;
  box-shadow:0 0 0 2px #ffffff;
}

@media (forced-colors: active){
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible{
    outline:3px solid Highlight;
    box-shadow:none;
  }
}

/* ---------------------------------------------------------------------------
   DARK PANELS - re-added. An earlier edit dropped this block: the string
   replace that inserted it was anchored on comment text that a previous edit
   had already rewritten, so it silently matched nothing and the rule never
   shipped. The links stayed at 1.23:1 through three deploys while I assumed
   the rule was live. Verified present by grep this time.

   Both panels take their background from a CSS class, not an inline style:
     .sub-menu       #263238  - nav dropdown        action token = 2.20:1
     .content-upgrade #5c6bc0 - in-article upsell   action token = 1.23:1
   White gives 13.16:1 and 4.86:1.

   .content-upgrade sits inside .brxe-post-content, whose link rule above is
   also (0,1,1) - so this is scoped one level deeper to win on specificity
   rather than on source order.
--------------------------------------------------------------------------- */
.sub-menu a:not(.btn-cu),
.sub-menu a:not(.btn-cu):hover,
.content-upgrade a:not(.btn-cu),
.content-upgrade a:not(.btn-cu):hover,
.brxe-post-content .content-upgrade a:not(.btn-cu),
.brxe-post-content .content-upgrade a:not(.btn-cu):hover{
  color:#ffffff !important;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* The panel's own CTA (.btn-cu) sits on a pale yellow #fff176, NOT on the
   indigo - the blanket white rule above turned it white-on-yellow at 1.16:1,
   a regression this pass introduced and then caught. The action token reads
   5.15:1 there and keeps the brand hue. */
.content-upgrade a.btn-cu,
.content-upgrade a.btn-cu:hover,
.brxe-post-content .content-upgrade a.btn-cu,
.brxe-post-content .content-upgrade a.btn-cu:hover{
  color:var(--sc-action) !important;
  text-decoration:none;
}

/* ---------------------------------------------------------------------------
   PRINT. Must be the LAST block in this file, and every selector here has to
   out-specify the screen rule it is undoing.

   Verified with Chromium print emulation BEFORE this block was rewritten:
     .content-upgrade a:not(.btn-cu)  -> #ffffff  (1.0:1 on white paper)
     .sub-menu a                      -> #ffffff  (1.0:1)
     .sc-newsletter-row button        -> #ffffff label
     .sc-nav-link-bg-orange           -> #ffffff label
   Browsers drop backgrounds when "background graphics" is off, so white text
   that was correct on screen prints as white-on-white. A bare `a{}` reset does
   not fix it: the screen rules are (0,2,1)-(0,3,1) with !important, so the
   print reset must match or exceed them.
--------------------------------------------------------------------------- */
@media print{
  /* a-qualified for the same reason as the screen rule: the screen selectors are
     (0,1,1) since they carry `a`, so a bare .brxe-button (0,1,0) here would lose
     and the label would print white on a dropped background. */
  .sc-nav-link-bg-orange,
  a.sc-nav-link-bg-orange,
  a.sc-nav-link.sc-nav-link-bg-orange,
  .sc-newsletter-row button,
  .sc-footer--v2 .sc-newsletter-row button,
  .sc-nav-link--cta,
  a.sc-nav-link--cta,
  .brxe-button,
  a.brxe-button,
  .bricks-button,
  a.bricks-button,
  button[type=submit],
  input[type=submit]{
    background:transparent !important;
    color:#000000 !important;
    border:1px solid #000000 !important;
  }

  /* the dark panels: white-on-dark on screen, black-on-paper in print */
  .sub-menu a:not(.btn-cu),
  .sub-menu a:not(.btn-cu):hover,
  .content-upgrade a:not(.btn-cu),
  .content-upgrade a:not(.btn-cu):hover,
  .brxe-post-content .content-upgrade a:not(.btn-cu),
  .brxe-post-content .content-upgrade a:not(.btn-cu):hover,
  .content-upgrade a.btn-cu,
  .brxe-post-content .content-upgrade a.btn-cu,
  .sc-on-dark, .sc-on-dark a,
  .skip-link, a.skip-link{
    color:#000000 !important;
    background:transparent !important;
    text-decoration:underline !important;
  }

  .sc-footer--v2.sc-footer--dark .sc-footer__menu a,
  .sc-footer--v2.sc-footer--dark .sc-footer__menu a:visited,
  .sc-footer--v2.sc-footer--dark .sc-footer-social-links a,
  .sc-header--dark .sc-nav-wrap > .sc-nav-item > .sc-nav-link,
  .sc-header--dark .sc-nav-head{ color:#000000 !important; }

  /* Must mirror the screen selector's specificity. The screen rule is
     a:not([style*="background"]) (0,1,1); a bare `a` here is (0,0,1) and loses
     even inside @media print, so EVERY ordinary link printed in the action
     colour rather than black. Found by measuring print emulation after the
     byline was scoped to @media screen and still came out #a84500 - the byline
     was the symptom, this was the cause. */
  a,
  a:not([style*="background"]),
  a:not([style*="background"]):hover,
  a:not([style*="background"]):active{
    color:#000000 !important;
    text-decoration:underline !important;
  }
}