/*
 * Colour contrast remediation (WCAG 1.4.3 Contrast Minimum, 4.5:1 for body text).
 *
 * ONLY the grey override lives here now. The brand sage and gold were moved to a
 * value substitution in the compiled web/css/styles.css, because overriding them
 * from this file was structurally impossible, not merely difficult:
 *
 *   - 43 rules in styles.css set the sage colour, and they are long bespoke
 *     descendant chains (#header ... .nav-desktop, .page-footer ...
 *     div:has(.footer-nav-block), .catalog-category-view #category-view-container
 *     ...), not the .text-gallery utility this file was aiming at. The failing
 *     elements are bare span/svg/a matched by those chains and never carry the
 *     utility class at all.
 *   - 26 of those 43 rules contain an ID selector. An ID is specificity (1,x,y);
 *     `html .text-gallery` is (0,2,1) and loses to it ALWAYS, whatever the source
 *     order. Only !important or matching the ID could have won, and both are
 *     worse than fixing the value at source.
 *
 * styles.css is a tracked, committed artifact and this pipeline runs no Tailwind
 * build (repo copy and served bytes were identical), so editing the value there
 * is the supported route and it corrects all 43 rules at once.
 *
 * The grey below IS a plain utility class with no competing high-specificity
 * rule, so a normal override is the right tool and it verifiably worked: its 16
 * rows went to zero on the first attempt.
 */

/* Grey secondary text: #959595 -> #767676 (3.00 -> 4.54 on white). */
html .text-\[\#959595\] {
    color: #767676;
}

/*
 * Target size for the category-description link list (WCAG 2.5.8).
 *
 * a.gold-link renders 23px tall, one short of the 24px minimum, and axe measures
 * only 15.4px of safe clickable space around it. 2.5.8's Inline exception does
 * NOT rescue these: the exception covers a target sitting in a sentence, and the
 * rendered markup is a LIST of links separated by &nbsp;&nbsp;&nbsp; in its own
 * paragraph, not prose containing a link. Checked the served HTML rather than
 * assuming.
 *
 * inline-block so the box actually grows: on an inline element the measured
 * height comes from the font's content area, so line-height alone would not move
 * it. The labels are short link texts already separated by hard spaces, so
 * inline-block does not change how the list wraps.
 */
html a.gold-link {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}
