html {
    scroll-behavior: smooth;
    transition: all 0.3s ease-in-out;
    font-synthesis:none;
}

:focus { /*Override of native user-agent styles for focus*/
    outline: none;
}

/*Styles for native basic inputs*/
input, textarea {
    background-color: var(--wp--preset--color--sunglow-50);
    border: solid 1px var(--wp--preset--color--taupe-400);

    &:hover {
        background-color: var(--wp--preset--color--sunglow-100);
    }

    &:focus {
        box-shadow: var(--wp--preset--shadow--focus-ring);
    }
}

input[type=text], input[type=search] {
    border-radius: var(--wp--custom--border-radius--default);
}

textarea {
    border-radius: 24px;
}

label {
    padding-inline-start: var(--wp--preset--spacing--2);
    padding-block-end: var(--wp--preset--spacing--fluid-1-2);
}

/*Hero pattern */
@media (min-width: 1024px) {
    .asma-hero {
    min-height: 82vh!important;
    } 
}

/*Perfect circles*/
.em-circle-small {
    width: var(--wp--custom--width--circle-small)!important;
    height: var(--wp--custom--width--circle-small)!important;
}

.em-circle-medium {
    width: var(--wp--custom--width--circle-medium)!important;
    height: var(--wp--custom--width--circle-medium)!important;
}

/*Backgrounds and graphics*/
@media all and (min-width: 1024px) { /*Only from landscape tablet width*/
     .asma-has-celestial {
        background-image: url('../images/astres-rdm.webp');
        background-size: 156px;
        background-repeat: no-repeat;

        &.asma-has-celestial-right {
            background-position: top var(--wp--preset--spacing--fluid-8-12) right var(--wp--preset--spacing--fluid-4-8);
        }

        &.asma-has-celestial-left {
            background-position: top var(--wp--preset--spacing--fluid-8-12) left var(--wp--preset--spacing--fluid-4-8);
        }
    }

    .asma-has-little-rainbow-center {
        background-image: url('../images/rainbow-taupe-600.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 64px;
    }

    .asma-has-double-rainbow {
        background-position: center;
        background-size:100%;
        background-repeat: no-repeat;

        &.asma-has-double-rainbow-rose {
            background-image: url('../images/double-rainbow-rose-100.svg');
        }
    }

    .asma-has-sun {
        background-size: 456px;
        background-repeat: no-repeat;

        &.asma-has-sun-top-left {
            background-position: top 0 left -184px;
        }

        &.asma-has-sun-top-right {
            background-position: top 0 right -184px;
        }

        &.asma-has-sun-bottom-left {
            background-position: bottom 0 left -184px;
        }

        &.asma-has-sun-bottom-right {
            background-position: bottom 0 right -184px;
        }

        &.asma-has-sun-green {
            background-image: url('../images/sun-green-100.svg');
        }

        &.asma-has-sun-rose {
            background-image: url('../images/sun-rose-100.svg');
        }

        &.asma-has-sun-sunglow {
            background-image: url('../images/sun-sunglow-100.svg');
        }

        &.asma-has-sun-blue {
            background-image: url('../images/sun-blue-100.svg');
        }

        &.asma-has-sun-taupe {
            background-image: url('../images/sun-taupe-100.svg');
        }      
    }
    
    .asma-has-rainbow {
        background-size: 700px;
        background-repeat: no-repeat;

        &.asma-has-rainbow-left {
            background-position: top 0 left 0;
        }

        &.asma-has-rainbow-green {
            background-image: url('../images/rainbow-flipped-green-100.svg');
        }

        &.asma-has-rainbow-blue {
            background-image: url('../images/rainbow-flipped-blue-100.svg');
        }
    }
}

.asma-has-small-sun-top {
    box-sizing: border-box;
    position: relative;

    &::before {
        content: url('../images/sun-sunglow-500.svg');
        display: block;
        position: absolute;
        top: -22px;
        left: 45%;
        right: 45%;
        height: 44px;
        width: 44px;
    }
}

@media (min-width: 768px) {

    .asma-has-small-sun-top::before {
        height: 56px;
        width: 56px;
        top: -28px;
    }
}

.asma-footer-logo img {
    @media all and (min-width: 48rem) {
        width: 200px!important;
    }
}

/* Animations when user has no reduced-motion preference */

@media (prefers-reduced-motion: no-preference) {
    /* Page transitions */
    .wp-site-blocks {
        -webkit-animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }
    
    .reveal {
      position: relative;
      opacity: 0;
    }
    .reveal.active {
      opacity: 1;
    }
    .active.fade-in-right {
      -webkit-animation: fade-in-right 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) alternate both;
	  animation: fade-in-right 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) alternate both;
    }
    
    .active.fade-in-bottom {
        -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000) alternate both;
	    animation: fade-in-bottom 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000) alternate both;
    }
    
    .active.fade-in-left {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
    
}


@-webkit-keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
         opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
      
@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/*Utilities*/
@media all and (max-width: 48rem) { /* Some columns need to be reordered on mobile */
    .em-is-reverse-mobile {
        flex-direction: column-reverse;
    }
}

@media all and (max-width: 767px) {
    .em-is-hidden-mobile {
        display: none!important;
    }
}

@media all and (max-width: 1023px) {
    .em-is-hidden-tablet {
        display: none!important;
    }
}

@media all and (min-width: 1024px) {
    .em-is-hidden-desktop {
        display: none!important;
    }
}

.em-has-overflow-hidden {
    overflow: hidden!important;
}

.em-has-no-text-decoration, .em-has-no-text-decoration>* {
    text-decoration: none!important;
}