/*
 * Text links site-wide: on hover the text fills orange from left to right while an orange underline
 * grows underneath, the same effect as the table of contents on Datenschutz and Cookies (0.4s).
 * Each link keeps its own resting colour; the fill slides from that colour (currentColor) to orange.
 * Left out: buttons (.action, *button*, *btn*), links around an image or icon, Luma's icon-font links,
 * and the header (the main menu has its own underline effect).
 * text-decoration is !important on hover because several CMS snippets add their own hover underline
 * with more specific selectors (footer, markets), which would show up as a second line.
 */
body a:not(.action, .modes-mode, [class*="button"], [class*="btn"], :has(img, svg, picture, video), .page-header *, .nav-sections *) {
    width: fit-content; /* block-level links: keep the underline to the text, not the whole column */
    padding-bottom: 2px;
    background-image: linear-gradient(#f26a21, #f26a21);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    transition: background-size 0.4s ease-out, background-position 0.4s ease-out, color 0.4s ease-out;
}

body a:not(.action, .modes-mode, [class*="button"], [class*="btn"], :has(img, svg, picture, video), .page-header *, .nav-sections *):is(:hover, :focus-visible) {
    background-size: 100% 2px;
    color: #f26a21;
    text-decoration: none !important;
}

/* The text fill, where the browser can clip a background to text */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    body a:not(.action, .modes-mode, [class*="button"], [class*="btn"], :has(img, svg, picture, video), .page-header *, .nav-sections *) {
        background-image: linear-gradient(90deg, #f26a21 50%, currentColor 50%), linear-gradient(#f26a21, #f26a21);
        background-position: 100% 0, 0 100%;
        background-size: 200% 100%, 0 2px;
        -webkit-background-clip: text, padding-box;
        background-clip: text, padding-box;
        -webkit-text-fill-color: transparent;
    }

    body a:not(.action, .modes-mode, [class*="button"], [class*="btn"], :has(img, svg, picture, video), .page-header *, .nav-sections *):is(:hover, :focus-visible) {
        background-position: 0 0, 0 100%;
        background-size: 200% 100%, 100% 2px;
    }
}

/* Cookie banner: the library resets its links (all: unset) and has its own 1px underline; match the rest */
#cc-main .cc__link,
#cc-main a {
    padding-bottom: 2px;
    background-image: linear-gradient(90deg, #f26a21 50%, currentColor 50%), linear-gradient(#f26a21, #f26a21);
    background-position: 100% 0, 0 100%;
    background-repeat: no-repeat;
    background-size: 200% 100%, 0 2px;
    -webkit-background-clip: text, padding-box;
    background-clip: text, padding-box;
    -webkit-text-fill-color: transparent;
    transition: background-size 0.4s ease-out, background-position 0.4s ease-out, color 0.4s ease-out;
}

#cc-main .cc__link:is(:hover, :focus-visible),
#cc-main a:is(:hover, :focus-visible) {
    background-position: 0 0, 0 100%;
    background-size: 200% 100%, 100% 2px;
    color: #f26a21;
}

@media (prefers-reduced-motion: reduce) {
    body a,
    #cc-main a {
        transition: none !important;
    }
}