/* ══════════════════════════════════════════════
   LINK ICONS — body content within `main`.
   Confirmed against talus.html and the article
   template: nav sits in <nav> before <main>, footer
   sits in <footer> after </main>, so plain `main`
   scoping already keeps those clear. Two things that DO
   live inside `main` and must stay excluded:
   - .cta-button (e.g. talus.html's register-interest link,
     an external URL that would otherwise get an icon
     shoved into its button layout)
   - .gallery-item-link (image-wrapping anchors in article
     galleries — an icon rendering over a thumbnail would
     look broken, even though today's galleries all use
     `#` fragment hrefs that wouldn't match anyway)

   Icons are rendered via ::after, not as a background image
   on the anchor itself. A background image on the anchor is
   positioned within the anchor's line-height box, and body
   paragraphs have a much taller line-height (28.8px at this
   site's 18px/1.6) than an 11px icon — background-position
   "100% 0" pins it to the top of that box, not to the text,
   so it floats above the letters and gets sliced by the line
   below. A ::after pseudo-element is a real inline box with
   its own width/height, so it aligns with vertical-align like
   any other inline content, and it can't render underneath
   the text since it occupies its own space rather than
   sitting behind it as a layer.

   Layered on purpose: the generic external-link rule and
   the named-site overrides (Reddit, YouTube, etc.) target
   the same elements, and the exclusion clauses attached to
   each rule don't naturally end up with matching specificity.
   Relying on selector specificity to sort that out is fragile
   and broke in testing (generic icon beat the Reddit icon
   despite Reddit's rule being more specific in intent).
   Cascade layers remove the guesswork: `overrides` always
   beats `base`, full stop, no specificity arithmetic needed,
   regardless of how the exclusion clauses evolve later.

   Only the icon-selection logic (content/display/size/
   background-image) lives inside the layers. Anything that
   also gets touched by an UNLAYERED rule elsewhere in
   bettersquash1.css — margin, color, text-decoration — is
   kept outside the layer, because unlayered styles always
   beat layered ones regardless of specificity. This bit us
   twice already: hover color/underline lost to the global
   `a`/`a:hover` rule, and margin-left lost to the reset's
   `*, *::before, *::after { margin: 0; }`. Same fix both
   times — pull the property out of the layer so ordinary
   specificity applies, where these selectors already win.
   ══════════════════════════════════════════════ */

@layer icon-base, icon-overrides;

@layer icon-base {

    /* Internal links */
    main a[href^="/"]:not(.cta-button):not(.gallery-item-link)::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        vertical-align: middle;
        background: url("/img/svg/internal-link.svg") no-repeat center / contain;
    }

    /* Any external link — generic fallback icon */
    main a[href^="http"]:not([href*="bettersquash.com"]):not(.cta-button):not(.gallery-item-link)::after {
        content: "";
        display: inline-block;
        width: 11px;
        height: 11px;
        vertical-align: middle;
        background: url("/img/svg/external-link.svg") no-repeat center / contain;
    }

}

/* Icon spacing — deliberately UNLAYERED (see note above: loses to the
   reset's `*::after { margin: 0; }` otherwise, no matter how specific
   the selector is). */
main a[href^="/"]:not(.cta-button):not(.gallery-item-link)::after,
main a[href^="http"]:not([href*="bettersquash.com"]):not(.cta-button):not(.gallery-item-link)::after {
    margin-left: 3px;
}

/* Shared hover state for both internal and external.
   Deliberately UNLAYERED — loses to the global `a { color }` /
   `a:hover { text-decoration }` rule otherwise, no matter how
   specific the selector is. Applied to the anchor, not ::after —
   the highlight should cover the text; the icon itself doesn't
   need to change. */
main a[href^="/"]:not(.cta-button):not(.gallery-item-link):hover,
main a[href^="http"]:not([href*="bettersquash.com"]):not(.cta-button):not(.gallery-item-link):hover {
    background-color: var(--yellow);
    color: var(--ink);
    text-decoration: underline solid 2px var(--ink);
}

@layer icon-overrides {

    /* Named-site overrides — just swap the icon image, everything
       else (size, spacing, alignment, hover) comes from icon-base. */
    main a[href*="youtube.com"]:not(.cta-button):not(.gallery-item-link)::after,
    main a[href*="youtu.be"]:not(.cta-button):not(.gallery-item-link)::after        { background-image: url("/img/svg/youtube-link.svg"); }

    main a[href*="wikipedia.org"]:not(.cta-button):not(.gallery-item-link)::after   { background-image: url("/img/svg/wikipedia-link.svg"); }

    main a[href*="reddit.com"]:not(.cta-button):not(.gallery-item-link)::after      { background-image: url("/img/svg/reddit-link.svg"); }

    main a[href*="instagram.com"]:not(.cta-button):not(.gallery-item-link)::after   { background-image: url("/img/svg/instagram-link.svg"); }

    main a[href*="flickr.com"]:not(.cta-button):not(.gallery-item-link)::after      { background-image: url("/img/svg/flickr-link.svg"); }

    main a[href*="duckduckgo.com"]:not(.cta-button):not(.gallery-item-link)::after  { background-image: url("/img/svg/duckduckgo-link.svg"); }

    /* Feed/gallery special cases — exact page targets, not domains */
    main a[href^="/bettersquash_feed.xml"]:not(.cta-button):not(.gallery-item-link)::after   { background-image: url("/img/svg/feed-link.svg"); }
    main a[href^="/articles.html#features"]:not(.cta-button):not(.gallery-item-link)::after  { background-image: url("/img/svg/gallery-link.svg"); }

}

/* Opt-out: for cases where you don't want any icon at all.
   Unlayered, so it beats both layers above regardless of order. */
main a.noiconlink::after {
    content: none;
}
main a.noiconlink:hover {
    background-color: var(--yellow);
    color: var(--ink);
    text-decoration: underline solid 2px var(--ink);
}

/* Manual annotation for context an icon can't convey
   (e.g. "highlights video" vs just "this goes to YouTube") */
main .link-hint {
    color: #666;
    font-size: 0.85em;
    font-style: italic;
}