* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body, html, figure {
    margin: 0;
}

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

:root {
  --ui-font-plus-jakarta: "Plus Jakarta Sans", sans-serif;
  --ui-font-space-grotesk: "Space Grotesk", sans-serif;

  --ui-text-xs: 0.8125rem;
  --ui-text-sm: 1rem;
  --ui-text-md: 1.25rem;
  --ui-text-lg: 1.5625rem;
  --ui-text-xl: 1.9375rem;
  --ui-text-2xl: 2.4375rem;

  --ui-display-sm: clamp(2.2rem, 1.8rem + 1.5vw, 3.0625rem);
  --ui-display-md: clamp(2.6rem, 2rem + 2vw, 3.8125rem);
  --ui-display-lg: clamp(3rem, 2.2rem + 3vw, 4.75rem);

  --ui-space-2xs: 0.25rem;
  --ui-space-xs: 0.5rem;
  --ui-space-sm: 1rem;
  --ui-space-md: 1.5rem;
  --ui-space-lg: 2rem;
  --ui-space-xl: 3rem;
  --ui-space-2xl: 4rem;
  --ui-space-3xl: 6rem;

  --ui-container-width: 85rem;
  --ui-content-width: 55rem;

}

/* Typography */

a {
    color: var(--wp--preset--color--dark);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 4px;
    }
}

p {
    a {
        text-decoration: underline;
    }
}

/* Block, Block Patterns etc. */


/* Header & Footer settings */
.section-header, .site-footer {
    h2 {
        &:after {
            content: ' /'
        }
    }
}

/* Buttons */
.wp-block-button {

    .wp-block-button__link {
        display: inline-flex;
        gap: 0.5rem;
        text-decoration: none;

        &::after {
            content: '';
            background-image: url(assets/icons/mdi_arrow-right-2.svg);
            width: 24px;
            height: 24px;
            display: inline-flex;
            background-size: contain;
            background-repeat: no-repeat;
            transition: all 0.3s;
        }

        &:hover {
            &::after {
                transform: rotate(-45deg);
            }
        }

    }

}

/* Navigation */
.current-menu-item {
    a {
        text-decoration: underline;
        text-decoration-thickness: 6px;
        text-decoration-color: var(--wp--preset--color--accent-pink);
    }
}

.big-link {
    position: relative;
    &::after {
        position: absolute;
        content: '';
        width: 100%;
        display: block;
        height: 6px;
        background-color: var(--wp--preset--color--accent-pink);
    }
    a {
        text-decoration: none;
    }
}

/* Social */

.wp-social-link {
    border-radius: 0;
    &.wp-social-link-instagram {
        color: var(--wp--preset--color--dark);
        background-color: var(--wp--preset--color--accent-pink);
    }
    &.wp-social-link-linkedin {
        color: var(--wp--preset--color--dark);
        background-color: var(--wp--preset--color--accent-soft);
    }
    &.wp-social-link-dribbble {
        color: var(--wp--preset--color--dark);
        background-color: var(--wp--preset--color--accent-yellow);
    }
    &.wp-social-link-facebook {
        background-color: var(--wp--preset--color--accent-blue);
    }
}

/* Gallery */

.section-gallery {
    .wp-block-image {
        img {
            width: 100%;
        }
    }
}