/* stylelint-disable selector-type-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

  body {
    @apply text-neutral-900 font-avenir text-[0.938rem] leading-6 bg-bone-200;
  }

  .text {
    @apply py-7;

    p {
      @apply mb-4;
    }

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

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

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

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

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

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

  .btn-effect {
    @apply block w-max uppercase text-neutral-100 font-avenir 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 w-max text-xs border font-bold border-primary-900 uppercase text-primary-900 flex items-center
      transition duration-300 px-[32px] py-[13px] hover:text-neutral-100 hover:bg-primary-900
      bg-transparent;

    &.inverse-color {
      @apply border-neutral-100 uppercase text-neutral-100;
    }
  }

  .btn-bg {
    @apply
    block
    w-max
    px-8
    py-3
    text-primary-900
    text-xs
    font-avenir
    font-bold
    bg-bone-200
    border
    border-bone-200
    uppercase
    transition
    duration-300
    hover:text-bone-200
    hover:bg-primary-900;

    &.primary {
      @apply
        text-bone-200
        bg-primary-900
        hover:text-primary-900
        hover:bg-bone-200
        focus:text-primary-900
        focus:bg-bone-200;
    }
  }

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


  h1, h2, h3, h4, h5, h6 {
    @apply mb-5;
  }

  h1,
  h2 {
    @apply
      text-neutral-900
      font-livory
      font-bold
      text-center
      text-[1.9rem]
      sm:text-5xl
      leading-none
      tracking-[0.1em];
  }

  h2 {
    @apply
      text-2xl
      leading-[30px];
  }

  h1 sup {
    @apply -top-[0.2em];
  }

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

  h1 + h2 {
    @apply font-livory text-primary-900 text-3xl;
  }

  .subtitle {
    @apply font-livory text-[1.25rem];
  }

  h3 {
    @apply tracking-wider text-base font-bold font-avenir;
  }

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

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

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

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

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

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

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

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

  p.subtitle {
    @apply mb-5;
  }

  footer {
    @apply flex flex-col py-7 space-y-4 text-bone-200 bg-thatch-green-900;

    & .text a {
      @apply text-current;
    }
  }

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

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: 80px;
  --guest_suite_simple_0: theme('colors.primary.900');
  --guest_suite_simple_100: theme('colors.primary.50');
}

@media (max-width: 768px) {
  :root {
    --height-navigation: 60px;
  }
}

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

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

.border-transparent {
  @apply w-max border border-cape-palliser-400 text-xs font-bold uppercase bg-transparent text-cape-palliser-600 flex items-center
    transition duration-700 px-[32px] py-[13px] hover:bg-[#f5ecde] relative overflow-hidden;

    .borderTop,
    .borderBottom,
    .borderLeft,
    .borderRight {
      @apply absolute bg-cape-palliser-400  ;
    }

    .borderTop,
    .borderBottom {
      @apply w-full h-[1px];
    }

    .borderLeft,
    .borderRight {
      @apply w-[1px] h-full;
    }

    .borderTop {
      @apply top-0 -left-full;
    }

    .borderBottom {
      @apply bottom-0 left-full;
    }

    .borderLeft {
      @apply top-full left-0;
    }

    .borderRight {
      @apply top-full right-0;
    }

  &.inverse-color {
    @apply border-neutral-100 uppercase text-neutral-100;
  }
}

.border-dark {
  @apply w-max border border-cape-palliser-400 text-xs font-bold uppercase bg-[#E0D4BF] text-cape-palliser-600 flex items-center
    transition duration-700 px-[32px] py-[13px] hover:bg-[#f5ecde] relative overflow-hidden;

    .borderTop,
    .borderBottom,
    .borderLeft,
    .borderRight {
      @apply absolute bg-cape-palliser-400  ;
    }

    .borderTop,
    .borderBottom {
      @apply w-full h-[1px];
    }

    .borderLeft,
    .borderRight {
      @apply w-[1px] h-full;
    }

    .borderTop {
      @apply top-0 -left-full;
    }

    .borderBottom {
      @apply bottom-0 left-full;
    }

    .borderLeft {
      @apply top-full left-0;
    }

    .borderRight {
      @apply top-full right-0;
    }

  &.inverse-color {
    @apply border-neutral-100 uppercase text-neutral-100;
  }
}

.border-dark,
.border-green,
.border-light,
.border-transparent,
.btn, {
  @apply font-livory min-w-max;
}

.border-green {
  @apply w-max border border-thatch-green-950 text-xs font-bold uppercase bg-[#E0D4BF] text-thatch-green-900 flex items-center
    transition duration-700 px-[32px] py-[13px] hover:bg-[#E0D4BF] relative overflow-hidden;

    .borderTop,
    .borderBottom,
    .borderLeft,
    .borderRight {
      @apply absolute bg-thatch-green-950 ;
    }

    .borderTop,
    .borderBottom {
      @apply w-full h-[1px];
    }

    .borderLeft,
    .borderRight {
      @apply w-[1px] h-full;
    }

    .borderTop {
      @apply top-0 -left-full;
    }

    .borderBottom {
      @apply bottom-0 left-full;
    }

    .borderLeft {
      @apply top-full left-0;
    }

    .borderRight {
      @apply top-full right-0;
    }

  &.inverse-color {
    @apply border-neutral-100 uppercase text-neutral-100;
  }
}

.border-light {
  @apply
    w-max
    text-xs
    border
    font-bold
    uppercase
    bg-thatch-green-900
    text-cape-palliser-100
    flex
    items-center
    transition
    duration-700
    px-8
    py-[13px]
    hover:bg-thatch-green-900
    relative
    overflow-hidden;

    .borderTop,
    .borderBottom,
    .borderLeft,
    .borderRight {
      @apply absolute bg-cape-palliser-100;
    }

    &.btn-menu {
      @apply bg-menu;
    }

    .borderTop,
    .borderBottom {
      @apply w-full h-[1px];
    }

    .borderLeft,
    .borderRight {
      @apply w-[1px] h-full;
    }

    .borderTop {
      @apply top-0 -left-full;
    }

    .borderBottom {
      @apply bottom-0 left-full;
    }

    .borderLeft {
      @apply top-full left-0;
    }

    .borderRight {
      @apply top-full right-0;
    }

  &.inverse-color {
    @apply border-neutral-100 uppercase text-neutral-100;
  }
}