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

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

  body {
    @apply text-neutral-800 font-text text-base sm:w-[calc(100%_-_70px)];
  }

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

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

    a:not(.btn) {
      @apply text-primary underline underline-offset-4 hover:text-primary-50 transition duration-300;

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

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

      &.btn-effect {
        @apply text-light;
      }
    }

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

    table, td {
      @apply border border-dark;
    }
  }

  .btn-effect {
    @apply
      overflow-hidden
      relative
      block
      w-max
      px-8
      py-3
      font-text
      text-xs
      text-light
      font-bold
      uppercase
      border
      border-light
      before:-z-10
      before:absolute
      before:left-0
      before:top-0
      before:w-[145%]
      before:h-full
      before:bg-primary/60
      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-light/60;
    }
  }


  .btn { 
    @apply 
    uppercase
    [&_span]:flex
    [&_span]:items-center
    [&_span]:w-max
    [&_span]:px-8
    [&_span]:py-3
    [&_span]:text-light
    [&_span]:font-bold
    [&_span]:relative
    [&_span]:bg-neutral-800
    [&_span]:border
    [&_span]:border-neutral-800
    text-sm font-title
    no-underline
    relative
    before:content-['']
    before:size-full
    before:absolute
    before:bottom-1
    before:right-1
    before:bg-neutral-200
    before:transition-opacity
    before:duration-200
    hover:before:opacity-0 
    hover:[&_span]:border-neutral-200;
    &.inverse-color {
      @apply [&_span]:bg-primary [&_span]:border-primary hover:[&_span]:border-neutral-200;
    }
  }

  .btn-bg {
    @apply
      block
      w-max
      px-8
      py-3
      border
      border-light
      text-light
      bg-transparent
      text-sm
      font-title
      font-bold
      uppercase
      transition
      duration-300
      hover:bg-light hover:text-neutral-800;
  }

  .btn-rounded-more {
    @apply
      aspect-square
      flex
      items-center
      justify-center
      w-8
      text-light
      bg-primary-50
      rounded-full;
  }
  .btn-book-header {
    @apply fixed right-0 sm:top-0 sm:bottom-auto top-auto bottom-0 z-[99] 
    flex items-center justify-center sm:gap-7 gap-10
    h-[70px] w-full sm:w-[100vh] 
    transform sm:-rotate-90 sm:origin-top-right sm:translate-x-[-70px] sm:translate-y-0 
    bg-light border border-primary text-primary 
    text-[32px] tracking-[.3rem] uppercase font-bold 
    [&>span]:relative 
    [&>span]:flex 
    [&>span]:items-center 
    [&>span]:justify-center 
    [&>span]:gap-8 
    transition duration-300
     hover:bg-primary hover:text-light;
  }
  .btn-underline {
    @apply uppercase text-light font-bold text-sm font-title py-4 sm:py-0
    after:content-['']
    after:block
    after:bg-light
    after:mx-auto
    after:w-full
    after:h-px
    after:mt-1
    after:scale-50
    after:transition-transform
    after:duration-200
    after:ease-in-out
    hover:after:scale-100
  }

  h1,
  h2,
  .like-h1,
  .like-h2 {
    @apply
      font-title
      font-normal
      text-neutral-800
      mb-2;
  }

  h1,
  .like-h1 {
    @apply text-[35px] sm:text-h1;
  }

  h2,
  .like-h2 {
    @apply text-3xl sm:text-h2;
  }

  h1 + .subtitle, .like-h1 + .subtitle {
    @apply text-center;
  }

  .subtitle,
  h1 + h2, .like-h1 + .like-h2 {
    @apply font-title text-primary text-subtitle font-normal;
  }

  h3 {
    @apply tracking-wider text-h3 font-normal font-title;
  }

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

  .h2-light {
    h2 {
      @apply text-light;
    }
  }

  .h2-left {
    h2, h1 {
      @apply items-start;
    }
  }

  .h3-underline {
    h3 {
      @apply tracking-wider text-base font-bold mb-4;
    }
  }

  .swiper-button-prev {
    @apply text-light;
  }

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

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

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

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

  p.subtitle {
    @apply mb-7;
  }

  footer {
    @apply flex flex-col pt-7 space-y-7 border-t border-t-primary;
  }

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

  .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:block after:my-5
        after:bg-primary after:h-1 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 w-24 mx-auto;
    }
  }

  .loader-simple {
    @apply
      col-start-1
      sm:col-start-2
      block
      size-20
      m-2
      border-[6px]
      border-x-dark
      border-y-transparent
      rounded-full
      animate-spin
      after:block
      after:size-16;
  }

  .swiper-slide-thumb-active {
    @apply opacity-100 !filter-none;

    > div {
      @apply opacity-0;
    }
  }

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

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

html {
  body {
   /* main {
      padding-top: var(--height-navigation);
    }

    .h-header {
      height: 60vh;
    }
    @media all and (min-width:768px) {
      .h-header {
        height: calc(100vh - var(--height-navigation));
      }
    }*/
    &:not(.load-header) {
      main {
        padding-top: var(--height-navigation);
      }

      .h-header {
        height: calc(100vh - var(--height-navigation));
      }
    }

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

      .h-header {
        height: 100vh;
      }
    }
  }

  .wc-widget {
    @apply hidden md: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.DEFAULT');
  --guest-suite-simple-100: theme('colors.primary.50');
}

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    @apply size-[15px];
  }

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

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

  .scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-dark/30;
  }

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

  html body .swiper-pagination-bullet.bullet-line {
    @apply w-9 h-[3px] rounded-none;
  }
  html body .swiper-pagination-bullet.bullet-circle {
    @apply  size-2 bg-transparent border border-light [&.swiper-pagination-bullet-active]:bg-light opacity-95 hover:bg-light;
  }
}

@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;
  }
}

.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;
    }
  }
}

.light-bg {
  @apply bg-neutral-200;
  .btn {
    @apply before:bg-neutral-100 hover:[&_span]:border-neutral-100
  }
}
.dark-bg {
  @apply bg-neutral-800 [&_*]:text-neutral-200 !pt-14;

}

.has-clear-bg{
  @apply relative before:content-[""] before:h-40 before:bg-light before:w-full before:absolute before:top-0 before:left-0 before:z-0;
}

section.pt-0 {
  padding-top: 0;
}
.has-centered-picto {
  @apply bg-neutral-100 max-w-screen-lg mx-auto my-14 p-10
  [&_.picto_img]:size-28
  [&_.picto]:-top-16
  [&_.picto]:left-1/2
  [&_.picto]:-translate-x-1/2;
  ;

}
.less-margin {
  > .content-columns {
    @apply -mt-10;
  }
}

.slider-lg {
  .max-w-\[1120px\] {
    @apply max-w-screen-lg;
  }
}
.translate-line-mobile {
  .the-line {
    @apply sm:translate-y-0 -translate-y-12;
  }
}
.img-txt-img {
  @apply [&_.col-text_+_picture]:sm:col-span-2 
  [&_.col-text_+_picture]:lg:col-span-1 
  [&_.col-text_+_picture]:order-last
  [&_.col-text]:lg:pr-0
  [&_.col-text]:sm:pr-8;
}