/* The tool logos, one rule each, written by the build (src/pages/tools/logos.css.js) for every tool that has a public/tools/logos/<slug>.svg.
   Each is a standalone SVG in /tools/logos/<slug>.svg (a rounded badge in one of the site's bead colours with a white mark, the same in light and dark).
   This file sets --tl to that logo wherever a tool is named, then draws it before the name:
     - any link to a tool (body copy, related lists, footer, hub cards), except buttons;
     - the tool card at the top of a guide (its icon square);
     - the H1 of a tool page (h1[data-tool]).
   Keyed on the link's href, so generated lists get the logos without any markup of their own.
   Loaded by guides.css (every guide, tool and the About page) and linked from the homepage.
   Source: src/layouts/partials/tools-logos.css. Don't list tools here: add public/tools/logos/<slug>.svg and the build does the rest. */

a[href="/tools/website-traffic-checker"], .gt-tool:has(a[href="/tools/website-traffic-checker"]), h1[data-tool="website-traffic-checker"] { --tl: url(/tools/logos/website-traffic-checker.svg); }
a[href="/tools/robots-txt-checker"], .gt-tool:has(a[href="/tools/robots-txt-checker"]), h1[data-tool="robots-txt-checker"] { --tl: url(/tools/logos/robots-txt-checker.svg); }
a[href="/tools/ctr-calculator"], .gt-tool:has(a[href="/tools/ctr-calculator"]), h1[data-tool="ctr-calculator"] { --tl: url(/tools/logos/ctr-calculator.svg); }
a[href="/tools/cpm-calculator"], .gt-tool:has(a[href="/tools/cpm-calculator"]), h1[data-tool="cpm-calculator"] { --tl: url(/tools/logos/cpm-calculator.svg); }
a[href="/tools/roas-calculator"], .gt-tool:has(a[href="/tools/roas-calculator"]), h1[data-tool="roas-calculator"] { --tl: url(/tools/logos/roas-calculator.svg); }
a[href="/tools/engagement-rate-calculator"], .gt-tool:has(a[href="/tools/engagement-rate-calculator"]), h1[data-tool="engagement-rate-calculator"] { --tl: url(/tools/logos/engagement-rate-calculator.svg); }
a[href="/tools/bounce-rate-calculator"], .gt-tool:has(a[href="/tools/bounce-rate-calculator"]), h1[data-tool="bounce-rate-calculator"] { --tl: url(/tools/logos/bounce-rate-calculator.svg); }
a[href="/tools/conversion-rate-calculator"], .gt-tool:has(a[href="/tools/conversion-rate-calculator"]), h1[data-tool="conversion-rate-calculator"] { --tl: url(/tools/logos/conversion-rate-calculator.svg); }
a[href="/tools/customer-lifetime-value-calculator"], .gt-tool:has(a[href="/tools/customer-lifetime-value-calculator"]), h1[data-tool="customer-lifetime-value-calculator"] { --tl: url(/tools/logos/customer-lifetime-value-calculator.svg); }
a[href="/tools/utm-builder"], .gt-tool:has(a[href="/tools/utm-builder"]), h1[data-tool="utm-builder"] { --tl: url(/tools/logos/utm-builder.svg); }

/* in a line of text: a little badge before the name. A fixed box, so nothing moves when it loads; the underline stays under the words only */
a:is([href="/tools/website-traffic-checker"], [href="/tools/robots-txt-checker"], [href="/tools/ctr-calculator"], [href="/tools/cpm-calculator"], [href="/tools/roas-calculator"], [href="/tools/engagement-rate-calculator"], [href="/tools/bounce-rate-calculator"], [href="/tools/conversion-rate-calculator"], [href="/tools/customer-lifetime-value-calculator"], [href="/tools/utm-builder"]):not(.btn) {
  padding-left: 1.48em; background: var(--tl) no-repeat left center / 1.1em 1.1em; }

/* hub cards: the name is a 19px heading line, so the badge is larger. Tool links only: the guides hub uses .link-list too */
.link-list a.t:is([href="/tools/website-traffic-checker"], [href="/tools/robots-txt-checker"], [href="/tools/ctr-calculator"], [href="/tools/cpm-calculator"], [href="/tools/roas-calculator"], [href="/tools/engagement-rate-calculator"], [href="/tools/bounce-rate-calculator"], [href="/tools/conversion-rate-calculator"], [href="/tools/customer-lifetime-value-calculator"], [href="/tools/utm-builder"]) { padding-left: 1.95em; background-size: 1.45em 1.45em; }

/* the tool card at the top of a guide: the badge replaces the icon square */
.gt-tool .gt-icon { background: var(--tl) center / contain no-repeat; box-shadow: none; }
.gt-tool .gt-icon > * { display: none; }

/* a tool page's own H1 */
h1[data-tool]::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .26em; vertical-align: -.04em; border-radius: 22%;
  background: var(--tl) center / contain no-repeat; }