@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; }

@layer base {
    @font-face {
        font-family: "DANCING JUNGLE";
        src: url("/resources/fonts/Dancingjungle.woff") format("woff"),
            url("/resources/fonts/Dancingjungle.ttf") format("truetype");
        font-display: swap;
    }

    @font-face{
        font-family: montserrat;
        font-style: normal;
        font-weight: 400;
        src: url("/resources/fonts/Montserrat.woff2") format('woff2'),
            url("/resources/fonts/Montserrat.woff") format('woff');
        font-display: swap;
    }

    @font-face{
        font-family: montserrat;
        font-style: normal;
        font-weight: 600;
        src: url("/resources/fonts/Montserrat-SemiBold.woff2") format('woff2');
        font-display: swap;
    }

    @font-face{
        font-family: poleno;
        font-style: normal;
        font-weight: 400;
        src: url("/resources/fonts/Poleno_Medium.woff2") format('woff2');
        font-display: swap;
    }

    @font-face{
        font-family: poleno;
        font-style: normal;
        font-weight: 600;
        src: url("/resources/fonts/Poleno_SemiBold.woff2") format('woff2');
        font-display: swap;
    }
}

[x-cloak] { display: none !important; }

img {
    @apply select-none pointer-events-none;
}

.calendar .day:nth-of-type(7n + 1) {
    border-left: none;
}

.navigation {
    background-image: url('/resources/img/nav-bg.svg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;

    transform: scaleY(103%) scaleX(101%);
}

.jungle-wave {
    background-image: url('/resources/img/jungle-wave.svg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;

    transform: scaleY(101%) scaleX(101%);
}

.bg-gemuese-hochseilgarten {
    background-image: url('/resources/img/gemuese_hochseilgarten.svg');
    background-size: contain;
    background-position: left top;
    background-repeat: no-repeat;
}

@media (min-width: 1280px) {
    .bg-elefant {
        background-size: 80%;
        background-position: left top;
    }
}

.bg-elefant {
    background-image: url('/resources/img/elefant_halb.svg');
    background-size: 40%;
    background-position: 118% 80%;
    background-repeat: no-repeat;
}

@media (min-width: 1280px) {
    .bg-elefant {
        background-image: none;
    }
}

.accent-wave {
    background-image: url('/resources/img/accent-wave.svg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;

    transform: scaleY(101%);
}

.bottom-wave {
    background-image: url('/resources/img/bottom-wave.svg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;

    transform: rotate(180deg) scaleY(101%) scaleX(102%);
}

.fi-fo-radio span,
.fi-fo-field-wrp-label span,
.fi-fieldset legend{
    @apply text-white !important;
}

.fi-input-wrp {
    @apply rounded-full bg-transparent !important;
}

.fi-fo-field-wrp-label span,
.fi-fo-field-wrp-label span sup{
    @apply text-okdk-darkgreen font-semibold uppercase !important;
}

.fi-input-wrp-input .fi-input,
.fi-input-wrp-input textarea,
.fi-fo-field-wrp input,
.fi-input-wrp-input .fi-select-input {
    @apply !bg-okdk-green font-semibold rounded-full h-12 text-white z-20 relative;
}

.fi-checkbox-input, .fi-radio-input {
    @apply h-6 max-h-6 w-6 font-semibold;
}

.fi-fo-field-wrp label span {
    @apply !text-okdk-darkgreen !uppercase !font-semibold;
}

@media (min-width: 320px) {
    .giraffencontent::after {
        content: '';

        background-image: url('/resources/img/giraffe.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left bottom;

        @apply w-56 h-56 sm:w-72 sm:h-72 absolute left-64 sm:left-80 -bottom-24 sm:-bottom-12 md:hidden z-10;
    }
}

/* Filament Modal z-index fix */
.fi-modal-close-overlay {
    z-index: 100 !important;
}

.fi-modal-close-overlay + div.fixed.inset-0 {
    z-index: 101 !important;
}