/**
 These are kept in separate file and imported in the root layout
 so they don't conflict with user site styles.
 */
body {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
}

.font-body {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
}


.flax-proposal .font-serif, .flax-survey .font-serif, .landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4, .landing-page h5, .landing-page h6 {
    font-family: "Familjen Grotesk", sans-serif;
    font-optical-sizing: auto;
}


/* Swiper */

.flax-swiper-navigation {
    --swiper-navigation-size: 36px;
    --swiper-navigation-top-offset: 40%;
    --swiper-navigation-sides-offset: 1px;
    --swiper-navigation-color: rgb(56, 22, 0) !important;

    --swiper-pagination-color: hsl(var(--primary));
    --swiper-pagination-bottom: 0px;
    --swiper-pagination-bullet-size: 12px;
}

body {
    --swiper-theme-color: hsl(var(--primary));
}

li p {
    display: inline
}


.wave-bottom {
    --height: 100px;
    mask: radial-gradient(60% var(--height) at bottom,#0000 calc(100% - 2px),#000);

    @media (max-width: 700px) {
        --height: 60px;
    }
}