/* stylelint-disable selector-type-no-unknown */
@import "rgpd.css";

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

@layer base {
  strong {
    @apply font-bold;
  }
}

@layer components {
  html {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    @apply text-primary-900 bg-neutral-100 font-roboto text-[20px] leading-6 font-normal;
  }

  body._has-widget-header-banner {
    main {
      @apply mt-14;
    }

    #main-menu.h-full {
      @apply h-[calc(100%_-_3.5rem)] bottom-0 top-auto;
    }
  }

  .text {
    p {
      @apply mb-4;
    }

    p:last-child {
      @apply mb-0;
    }

    a {
      @apply text-primary-900 underline underline-offset-4 hover:text-primary-50 transition duration-300;

      &.btn,
      &.btn-effect {
        @apply no-underline;
      }

      &.btn {
        @apply hover:text-neutral-50;
      }

      &.btn-effect {
        @apply text-neutral-50;
      }
    }

    ul {
      @apply list-disc list-inside;
    }
  }

  .btn-effect {
    @apply block w-max uppercase text-neutral-100 font-roboto text-xs font-bold px-[32px] py-[13px] border
      border-neutral-100 relative overflow-hidden before:content-[""] before:absolute before:top-0
      before:left-0 before:w-[145%] before:h-full before:bg-primary-900/[60%] before:-z-10 before:skew-x-[-39deg]
      before:translate-x-[-65%] before:duration-[600ms] before:ease-in-out hover:before:translate-x-[-10%];

    &.inverse-color {
      @apply text-primary-50 before:bg-neutral-100/[60];
    }
  }

  .btn {
    @apply
      relative
      inline-block
      w-max
      px-8
      pt-3.5
      pb-3
      font-bold
      uppercase
      text-primary-900
      bg-btn
      bg-full
      transition-colors
      duration-300
      hover:text-neutral-100
      before:opacity-0
      before:absolute
      before:inset-0
      before:bg-btn-hover
      before:bg-full
      before:transition-opacity
      before:duration-300
      hover:before:opacity-100
      [&_span]:relative
      [&_span]:z-10;

    &.inverse-color {
      @apply
        text-neutral-50
        bg-btn-inverse
        hover:text-neutral-900
        before:bg-btn-inverse-hover;
    }
  }

  .btn-bg {
    @apply bg-neutral-100 text-primary-900 uppercase block w-max  px-[32px] py-[13px] text-xs
      font-bold font-roboto transition duration-300 hover:bg-neutral-100/50;
  }

  .btn-rounded-more {
    @apply w-8 aspect-square bg-primary-900  text-neutral-50 rounded-full flex items-center justify-center;
  }

  .btn-book {
    @apply
      z-50
      fixed
      sm:relative
      inline-block
      justify-self-end
      w-full
      sm:w-auto
      left-0
      bottom-0
      px-8
      pt-3.5
      pb-3
      text-[20px]
      text-center
      font-bold
      uppercase
      text-neutral-50
      sm:bg-btn-inverse
      bg-primary-900
      bg-full
      transition-colors
      duration-300
      hover:text-neutral-900
      before:opacity-0
      before:absolute
      before:inset-0
      before:bg-btn-inverse-hover
      before:bg-full
      before:transition-opacity
      before:duration-300
      hover:before:opacity-100
      [&_span]:relative
      [&_span]:z-10;
  }

  h1,
  h2, .like-h1, .like-h2 {
    @apply
      relative
      flex
      flex-col
      justify-center
      items-center
      font-marcellus
      text-neutral-900
      after:w-9/12
      after:h-[1px]
      after:mx-auto
      after:my-4
      after:bg-neutral-900;
  }

  h1, .like-h1 {
    @apply after:max-w-[150px] text-[40px] leading-tight;
  }
  h2, .like-h2 {
    @apply text-[35px] leading-tight;
  }
  h1 + .subtitle, .like-h1 + .subtitle {
    @apply text-center ;
  }

  .subtitle {
    @apply font-roboto text-primary-900 text-3xl font-bold;
  }

  h3 {
    @apply tracking-wider text-[25px] font-bold font-roboto leading-none;
  }

  .h2-simple {
    h2 {
      @apply after:content-none;
    }
  }

  .h2-neutral-100 {
    h2 {
      @apply text-neutral-100;
    }
  }

  .h2-left {
    h2 {
      @apply items-start after:mx-0;
    }
  }

  .h3-underline {
    h3 {
      @apply
        mb-0
        text-base
        font-bold
        tracking-wider
        after:block
        after:w-1/4
        after:h-[4px]
        after:my-5
        after:bg-primary-900;
    }
  }

  .swiper-button-prev {
    @apply text-neutral-100;
  }

  .main-menu {
    ul li {
      svg {
        @apply h-[31px] w-[31px];
      }
    }
  }

  .quote {
    svg {
      @apply h-auto w-[60px];
    }
  }

  section {
    @apply py-14 space-y-7;
  }

  body section h2 + .subtitle,
  body section h1 + .subtitle {
    @apply mt-0 !important;
  }

  p.subtitle {
    @apply mb-7;
  }

  footer {
    @apply flex flex-col my-7 space-y-7;

    & .text img {
      @apply inline-block;
    }
  }

  .lazy-container {
    @apply m-0 !important;
  }

  .quote-container {
    @apply flex flex-col justify-center items-center space-y-7;
  }

  div > svg {
    @apply w-full h-auto;
  }

  html body .mosaic {
    .columns {
      @apply mt-10;

      h2 {
        @apply items-start;
      }
    }
  }

  .container-medium-columns {
    h3 {
      @apply mb-0 tracking-wider text-2xl font-bold after:content-[""] after:block after:my-5
        after:bg-primary-900 after:h-[4px] after:w-1/4 uppercase;
    }

    @apply max-w-screen-lg mx-auto;

    .columns-2 {
      .grid {
        @apply items-center grid-rows-[max-content_max-content] sm:grid-rows-1 sm:grid-cols-[33%_1fr];

        > div {
          @apply p-8;
        }
      }
    }

    svg {
      @apply fill-primary-900 w-24 mx-auto;
    }
  }

  .loader-simple {
    @apply block w-[80px] h-[80px] col-start-1 sm:col-start-2
      after:block after:content-[""] after:w-[64px] after:h-[64px] m-[8px] rounded-full
      border-[6px] border-x-neutral-800 border-y-transparent animate-spin;
  }

  .swiper-slide-thumb-active {
    > div {
      @apply opacity-0;
    }

    @apply opacity-100 filter-none !important;
  }

  .form-error {
    @apply text-red-500 hidden;
  }

  .ajax-form-error + .form-error {
    @apply block;
  }

  #widget-contact-form .toolbar .text-xs {
    @apply text-[20px];
  }
}

html {
  scroll-behavior: smooth;
  letter-spacing: 0.02em;

  body {
    &:not(.load-header) {
      main {
        padding-top: var(--height-navigation);
      }
    }

    &.load-header {
      main {
        padding-top: 0;
      }
    }
  }

  .wc-widget {
    display: none;

    @media (min-width: 768px) {
      display: block;
    }
  }
}

:root {
  --swiper-navigation-color: #f2eee8;
  --swiper-pagination-color: #f2eee8;
  --swiper-navigation-size: 65px;
  --hover-content-after-width: 0;
  --height-navigation: 90px;
  --guest_suite_simple_0: theme('colors.primary.900');
  --guest_suite_simple_100: theme('colors.primary.50');
}

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 15px;
    height: 15px;
  }

  .scrollbar::-webkit-scrollbar-track {
    @apply bg-neutral-100 rounded-[100vh];
  }

  .scrollbar::-webkit-scrollbar-thumb {
    @apply bg-neutral-800/[60%] rounded-[100vh] border-solid border-2 border-neutral-100;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-800/[30%];
  }

  .h-screen-without-nav {
    height: calc(100vh - var(--height-navigation));
  }
}

@keyframes loader-simple {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media all and (max-width: 768px) {
  html body .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
  }
  html body .hide-illustration-on-mobile{
    #illustration-185993, #illustration-185999{
      display: none;
    }
  }
}

.parallax .swiper-slide-active {
  z-index: 100;
  background: #f2eee8;
}

nav.pois {
  &::-webkit-scrollbar { display: none; }
}

.circle {
  stroke: url("#gradientStyle");
  stroke-width: 4px;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.container-medium-columns {
  .css-columns-2 {
    > div {
      @apply p-8;
    }
  }
}

#booking-calendar.opened {
  @apply h-full opacity-100;
}


.fbw-calendar--month-table-container {
  @apply !overflow-visible lg:!overflow-hidden;
}