/* site-fixes.css — repairs the verify gates demanded, and nothing else.
 *
 * Kept in one external file, linked last in <head> by tools/postprocess.mjs,
 * rather than edited into the theme's inline <style> blocks or into
 * assets/wp-content/uploads/elementor/css/*.css: both are regenerated by every
 * scrape, so an edit there would be silently lost.
 *
 * ⚠ BEING LINKED LAST IS NOT ENOUGH, and this cost an hour to notice because
 * nothing reports it — the override simply does nothing and the gate keeps
 * printing the same number. Elementor generates per-page rules shaped like
 *
 *     .elementor-198 .elementor-element.elementor-element-4a34a54c .elementor-icon-list-text
 *
 * which is specificity (0,4,0). A sensible-looking override such as
 * `.elementor-element-4a34a54c .elementor-icon-list-text` is only (0,2,0), and
 * source order never breaks a specificity tie. So every rule here deliberately
 * carries an extra class or two to outrank the generated one.
 *
 * `.elementor-198` is the *page id*, and it differs per page (198 = home,
 * 181 = /about-us/). Never hardcode it: use the plain `.elementor` wrapper
 * class, which is on every Elementor root, so a rule survives a page being
 * recreated with a new id.
 *
 * THE BAR: every rule below names the gate finding it fixes. A rule that cannot
 * cite a failing check is a redesign, and redesigns are out of scope for this
 * migration — see CLAUDE.md.
 *
 * Each fix is also the *smallest* change that clears the check, and is scoped to
 * the element that failed. In particular the brand cyan is NOT redefined
 * globally: at #05dfd7 on black it measures 12.54:1, so everywhere the site
 * uses it on a dark background it is already well past AA and is left alone.
 * Only its two uses as text on white fail, and only those are changed.
 *
 * Run `npm run gate` after touching this file.
 */

/* ── contrast.mjs: #05dfd7 on #ffffff = 1.67:1, needs 4.5:1 ──────────────────
 *
 * Two places put the brand cyan on white as body-size text:
 *
 *   1. the sponsorship benefits list on the homepage ("Competion advertisement",
 *      "Branded content in social media") at 18px;
 *   2. the "Read more" button in its hover/focus state, which inverts to a white
 *      background with cyan text.
 *
 * #038480 is the minimum darkening of the same hue and saturation that reaches
 * AA (4.55:1). Keeping hue and saturation fixed means it still reads as the
 * brand colour rather than as a different one.
 *
 * A note for whoever revisits this: the honest fix for an accent this light is
 * to stop using it as text and put dark text on a cyan fill instead. That is a
 * design change, so it was not made here.
 */
/* (0,5,0) — beats Elementor's (0,4,0) generated rule for this widget. */
.elementor .elementor-element.elementor-element-4a34a54c .elementor-icon-list-item .elementor-icon-list-text {
  color: #038480;
}

.elementor .elementor-element.elementor-element-2621f0f .elementor-button:hover,
.elementor .elementor-element.elementor-element-2621f0f .elementor-button:focus {
  color: #038480;
}

.elementor .elementor-element.elementor-element-2621f0f .elementor-button:hover svg,
.elementor .elementor-element.elementor-element-2621f0f .elementor-button:focus svg {
  fill: #038480;
}

/* ── contrast.mjs: #686868 on #000000 = 3.77:1, needs 4.5:1 ──────────────────
 *
 * The "Our story" eyebrow label on /about-us/ — 15px, weight 300, uppercase,
 * grey on black. Small light-weight uppercase text is the worst case for
 * legibility, and this is the one place the theme uses this grey on black.
 *
 * #757575 is the minimum lightening that reaches AA (4.56:1). It stays a
 * neutral grey; nothing else on the site uses this token.
 */
/* (0,4,0) — beats the generated `.elementor-181 .elementor-element.elementor-element-549e9b8b`. */
.elementor .elementor-element.elementor-element-549e9b8b.elementor-widget {
  color: #757575;
}

/* ── heading demotion on /dogs/ (postprocess.mjs rule 7) ─────────────────────
 *
 * /dogs/ shipped 39 <h1> elements — the page title plus one per dog — against a
 * single <h2>. tools/postprocess.mjs demotes the 38 dog names to <h2> so the
 * page has one top-level heading and a real outline.
 *
 * Elementor sizes headings by widget class rather than by tag, so the demotion
 * is visually inert; the pixel diff against the live original confirms it at
 * 0.000% on /dogs/ at both 1366 and 390. This rule exists so it STAYS inert:
 * hello-elementor ships a bare `h2 { font-size: 2rem }` that would otherwise be
 * free to apply to any dog-name heading whose per-widget rule is ever dropped.
 */
.elementor-widget-heading h2.elementor-heading-title.elementor-size-default {
  font-size: inherit;
}
