/* ===== Sitewide unification ==============================================
   Adam, 2026-09-23: no grey body text, and boxes must not react on hover.
   Applies to every page on alcohq.com. Loaded last from inc/head.php, so
   removing that one link reverts all of it.

   1. TEXT COLOUR
   Body copy was rendering in two greys - #5f6469 on ledes and card paragraphs,
   and #41474d on some section copy. Both are now --alco-ink, the same value the
   headings use, so a paragraph and the heading above it are the same colour.
   Only text is touched; the greys are left alone wherever they are doing
   structural work such as borders, rules and icons.

   The .eyebrow keeps its orange. It is a label rather than body text, and it is
   the one piece of colour the page layout relies on to separate sections.

   2. HOVER
   .card carried a hover that lifted the border and shadow. These are not
   clickable surfaces - the link inside them is - so the response advertised an
   interaction that does not exist. Resting and hover are declared together in
   one rule, which makes them identical by construction rather than by copying a
   value correctly; declaring only :hover is how an earlier attempt at this left
   the shadow still jumping, just without the animation. */

body .lede,
body .card p,
body main .section p,
body .muted,
body p.muted {
  color: var(--alco-ink, #1a1a1a);
}

/* Keep the label colours the site uses deliberately. */
body .eyebrow,
body .eyebrow a {
  color: var(--alco-orange-600, #ff8c2b);
}

body main .card,
body main .card:hover,
body main .card:focus-within,
body.page-home .card,
body.page-home .card:hover,
body.page-about .card,
body.page-about .card:hover,
body.page-home .grid > :hover,
body.page-about .grid > :hover {
  transition: none;
  transform: none;
  border-color: #dcdfe3;
  box-shadow: 0 4px 16px rgba(24, 30, 38, .035);
}

/* The same lift existed on these. Same reasoning, same treatment. */
body .people > a:hover,
body .logos > a:hover,
body .jobcard:hover,
body .grid > a:hover {
  transform: none;
  box-shadow: 0 4px 16px rgba(24, 30, 38, .035);
}

/* BODY TEXT
   The first pass caught ledes and card copy but left the site's default body
   colour at #333 and some section copy at #41474d - still grey next to a
   #1a1a1a heading. These bring ordinary running text onto the same ink.

   Excluded on purpose, because their colour carries meaning rather than being
   a shade of body text: .eyebrow (section label), .btn (buttons state their own
   colours), .pillstate and .badge (status), and anything inside the footer,
   masthead or cookie bar, which have their own colour systems and were not
   part of what Adam asked to change. */
body {
  color: var(--alco-ink, #1a1a1a);
}
body main p,
body main li,
body main dd,
body main dt,
body main time,
body main summary,
body main blockquote,
body main figcaption,
body main td,
body main th {
  color: var(--alco-ink, #1a1a1a);
}
body main .eyebrow,
body main .btn,
body main .pillstate,
body main .badge,
body main .badge * {
  color: revert;
}
body main .eyebrow {
  color: var(--alco-orange-600, #ff8c2b);
}
/* The last three, found by walking every text node on a page rather than by
   eye. The CTA paragraph matters most - that block is on all 165 pages, so it
   was the most-repeated grey on the site. */
body .hq-cta-copy p,
body .page-cta p,
body .hq-closing-cta p,
body .article-author-role,
body .article-publication span,
body .postmeta,
body .postmeta span {
  color: var(--alco-ink, #1a1a1a);
}
/* ID-LEVEL SPECIFICITY
   hq-spacing.css sets the CTA copy colour through "body #main .section
   .hq-cta-copy > p". That carries an id, so no class-only selector can beat it
   however many classes are stacked - which is why the CTA paragraph, the single
   most repeated piece of text on the site, survived four passes. These match
   the same shape and win on load order.

   Same reason for the testimonial blockquote and the small meta spans. */
body #main .section.hq-closing-cta .hq-cta-copy > p,
body #main .section:is(.page-cta, .service-core-cta, .industry-next) p,
body #main .hq-cta-copy > p {
  color: var(--alco-ink, #1a1a1a);
}

body #main blockquote,
body #main .quote,
body #main .quote p,
body #main .review p,
body #main .persontile span,
body #main .logonote,
body #main .postby,
body #main .postmeta {
  color: var(--alco-ink, #1a1a1a);
}
/* The last six on the home page: the caption under each of the three service
   figures, and the attribution line under each testimonial ("Owner, Easy Reader
   News"). Both are plain spans with no class, so they needed naming by their
   parent. */
body #main figcaption,
body #main figcaption span,
body #main .who,
body #main .who span {
  color: var(--alco-ink, #1a1a1a);
}
/* ===== CATCH-ALL =========================================================
   A full audit of sixteen page families found grey still surviving on
   /services/*, /pricing, /partners, /about, /case-studies/* and article
   bylines. Each was a different page-specific rule - .service-core-lede,
   .pricing-lede, .pricing-hint, .pricing-optional, .logoname, plain <li> and
   <span> inside page-class scopes - and several carry higher specificity than
   any general selector can reach without matching them one by one.

   Chasing them individually was the wrong shape: the next page added would
   bring its own, and this would need auditing again. So body text is declared
   once here with !important, with the elements whose colour carries meaning
   excluded rather than restored afterwards.

   !important is deliberate and confined to this file. It is the only way to
   beat page-scoped rules across a stylesheet set this layered, and deleting
   the one <link> in head.php still removes all of it cleanly. */
body main :is(p, li, dd, dt, td, th, em, strong, blockquote, figcaption, summary, time, span, div.l):not(.eyebrow):not(.btn):not(.badge):not(.pillstate):not(.eyebrow *):not(.btn *):not(.badge *):not(.pillstate *):not(.arrow):not(.logomark *),
body #main :is(p, li, dd, dt, td, th, em, strong, blockquote, figcaption, summary, time, span):not(.eyebrow):not(.btn):not(.badge):not(.pillstate):not(.eyebrow *):not(.btn *):not(.badge *):not(.pillstate *):not(.arrow),
body .lede,
body .hq-cta-copy p,
body .hq-cta-copy > p {
  color: var(--alco-ink, #1a1a1a) !important;
}

/* Put the deliberate colours back. These are labels and states, not body
   text: the eyebrow is what separates sections, and a status pill that is not
   its own colour is not a status pill. */
body .eyebrow,
body .eyebrow a,
body .eyebrow * {
  color: var(--alco-orange-600, #ff8c2b) !important;
}
/* FAQ answers on /why-alco are bare divs with no class, so the element list
   above did not reach them. Named by their container instead. */
body .faq div,
body .faq p,
body details div,
body details p {
  color: var(--alco-ink, #1a1a1a) !important;
}