/* CSS Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

div[class*="wp-block-"] figcaption {
    color: var(--wp--preset--color--text-50);
    font-size: var(--wp--preset--font-size--x-small);
    margin-bottom: 0;
    margin-top: 20px;
}

img,
figure {
    max-width: 100%;
    height: auto;
}

/* Sections
   ========================================================================== */

:where(.wp-site-blocks)>footer,
:where(.wp-site-blocks)>main {
    margin-block-start: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Text
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
}

:where(h5, h6, blockquote, caption, figcaption, p) {
    text-wrap: pretty;
}

/* Mobile / Desktop Hide
   ========================================================================== */

@media screen and (max-width: 599px) {
    .symcooblocs-mobile-hide {
        display: none !important;
    }
}

@media screen and (max-width: 781px) {
    .symcooblocs-tablet-hide {
        display: none !important;
    }
}

@media screen and (min-width: 600px) {
    .symcooblocs-desktop-hide {
        display: none !important;
    }
}

/* Link underline animation
   ========================================================================== */

/* Normal links, line disappears on hover */

a {
    text-decoration: none;
}

:where(p:not(.wp-block-site-title))>:where(a, em>a, strong>a) {
    background: linear-gradient(0deg, currentColor, currentColor) no-repeat right bottom / 100% var(--bg-h);
    transition: background-size 300ms, color 300ms;
    --bg-h: 0.07em;

    &:where(:hover, :focus-visible) {
        background-size: 0 var(--bg-h);
        background-position-x: right;
    }
}

/* Clean links, line appears on hover */

.wp-block-post-title :where(a) {
	display: inline;
}

:where(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    footer p)>:where(a, em>a, strong>a),
:where(.wp-block-categories-list,
    .wp-block-footnotes,
    .wp-block-query-pagination,
    .wp-block-post-author,
    .wp-block-post-author-name,
    .wp-block-post-date,
    .wp-block-post-navigation-link,
    .wp-block-post-terms,
    .wp-block-post-title,
    .yoast-breadcrumbs) a,
ul.wp-block-navigation:not(.wp-block-navigation-submenu):not(.smbt-header-menu) .wp-block-navigation-item__content,
.wp-block-read-more,
.wp-block-tag-cloud a.tag-cloud-link {
    background: linear-gradient(0deg, currentColor, currentColor) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 300ms, color 300ms;
    --bg-h: 0.07em;

    &:where(:hover, :focus-visible) {
        background-size: 100% var(--bg-h);
        background-position-x: left;
    }
}

ul.wp-block-navigation:not(.wp-block-navigation-submenu):not(.smbt-header-menu) .current-menu-item>.wp-block-navigation-item__content {
    background-size: 100% var(--bg-h);
    background-position-x: left;
}