/* Custom SVG underline for links
https://codepen.io/iam_aspencer/pen/qvNPBv
https://codepen.io/theoguinet/pen/YzPrmwV

Convert svg to base64 for universal compatibility: https://base64.guru/converter/encode/text
Normal svg:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1213 58"><path d="M 18.493418,0 0,57.111116 h 661.63517 l 8.34943,-25.387797 h 359.2276 l 5.9446,-15.861667 H 1213 V 0 H 1029.2139 661.63685 Z" fill="#fab617"></path></svg>
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjEzIDU4Ij48cGF0aCBkPSJNIDE4LjQ5MzQxOCwwIDAsNTcuMTExMTE2IGggNjYxLjYzNTE3IGwgOC4zNDk0MywtMjUuMzg3Nzk3IGggMzU5LjIyNzYgbCA1Ljk0NDYsLTE1Ljg2MTY2NyBIIDEyMTMgViAwIEggMTAyOS4yMTM5IDY2MS42MzY4NSBaIiBmaWxsPSIjZmFiNjE3Ij48L3BhdGg+PC9zdmc+");

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxMjEzIDU4Ij48cGF0aCBkPSJNIDE4LjQ5MzQxOCwwIDAsNTcuMTExMTE2IGggNjYxLjYzNTE3IGwgOC4zNDk0MywtMjUuMzg3Nzk3IGggMzU5LjIyNzYgbCA1Ljk0NDYsLTE1Ljg2MTY2NyBIIDEyMTMgViAwIEggMTAyOS4yMTM5IDY2MS42MzY4NSBaIiBmaWxsPSIjZmFiNjE3Ij48L3BhdGg+PC9zdmc+

Also here is the not selector so that images and the main site title don't get the underline
*/
/* Custom shaped underline
.wp-site-blocks :not(.wp-block-site-title) a:not(.bcpm-image-link, a:has(img)) {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: calc(100% - 0.2em);
        left: -0.3em;
        right: -0.5em;
        height: calc(min(6px, 0.25em));
        z-index: -1;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxMjEzIDU4Ij48cGF0aCBkPSJNIDE4LjQ5MzQxOCwwIDAsNTcuMTExMTE2IGggNjYxLjYzNTE3IGwgOC4zNDk0MywtMjUuMzg3Nzk3IGggMzU5LjIyNzYgbCA1Ljk0NDYsLTE1Ljg2MTY2NyBIIDEyMTMgViAwIEggMTAyOS4yMTM5IDY2MS42MzY4NSBaIiBmaWxsPSIjZmFiNjE3Ij48L3BhdGg+PC9zdmc+");
        background-repeat: no-repeat;
        background-size: 0% 100%;
        transition: all 600ms cubic-bezier(0.33, 1, 0.68, 1);
    }

    &:hover::after {
        background-size: 100% 100%;
    }
}
*/

/* Permanent and larger underline on site title */
/*
header .wp-block-group .wp-block-site-title > a {
    &::after {
        top: calc(100% - 0.15em);
        right: -2.5em;
        background-size: 100% 100%;
    }

    &:hover::after {
        right: -4em;
    }
}
*/

/* Drop shadow */
.wp-site-blocks :not(.wp-block-site-title) a:not(.bcsb-image-link, a:has(img)) {
    &:hover {
        text-shadow: 0.07em 0.07em 0.2em rgba(0, 0, 0, 0.5);
        transition: text-shadow 200ms ease;
    }
}

header .wp-block-group .wp-block-site-title > a {
    &:hover {
        text-shadow: 0.07em 0.07em 0.2em rgba(255, 255, 255, 0.5);
        transition: text-shadow 200ms ease;
    }
}

.social-media-button {
    &:hover {
        transform: scale(1.1);
        filter: drop-shadow(0.07em 0.07em 0.2em rgba(0, 0, 0, 0.5));
        transition: 200ms ease;
    }
}

.bcsb-image-link {
    &:hover {
        transform: scale(1.007);
        filter: drop-shadow(0.14em 0.14em 0.4em rgba(0, 0, 0, 0.5));
        transition: 300ms ease;
    }
}

.bcsb-image-link-featured {
    &:hover {
        transform: scale(1.01);
        filter: drop-shadow(0.18em 0.18em 0.5em rgba(0, 0, 0, 0.5));
        transition: 300ms ease;
    }
}

/* Make wordpress cover blocks farther back in z-index so that the text decoration isn't covered */
.wp-block-cover__image-background {
    z-index: -10;
}
.wp-block-cover__background {
    z-index: -9;
}