@layer framework, defaults, components, utilities, overrides;

@import url("./bootstrap.min.css") layer(framework);

/**
 Variables
 */
:root {
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;

  --brown-0: #9d6432;
  --brown-1: #ef9f59;
  --brown-2: #9d603d;
  --brown-4: #c08b5c;

  --text-color: #333333;
  --text-hover-color: rgb(109, 108, 108);
  --gray-bg-color: #f2f2f2;
}

@font-face {
  font-family: Ubuntu;
  font-weight: 400;
  src: url("../assets/fonts/Ubuntu/Ubuntu-Regular.ttf");
}

@font-face {
  font-family: Ubuntu;
  font-weight: 500;
  src: url("../assets/fonts/Ubuntu/Ubuntu-Medium.ttf");
}

@layer defaults {
  *,
  *::before,
  &::after {
    font-family: Ubuntu, serif;
  }

  .bg-0 {
    background-color: var(--brown-0);
  }

  .bg-1 {
    background-color: var(--brown-1);
  }

  .bg-2 {
    background-color: var(--brown-2);
  }

  .bg-4 {
    background-color: var(--brown-4);
  }

  .phone {
    color: #fff;
    font-weight: 500;

    .phone__icon {
      background-image: url("../assets/img/phone-0.svg");
      width: 25px;
      height: 25px;
      background-size: cover;
      display: block;
    }
  }

  .socials {
    .social {
      width: 25px;
      height: 25px;
      background-size: cover;
      display: block;
    }

    .social--fb {
      background-image: url("../assets/img/fb.svg");
    }

    .social--booking {
      background-image: url("../assets/img/booking.svg");
    }

    .social--insta {
      background-image: url("../assets/img/insta.svg");
    }
  }

  .navigation {
    background-color: #fff;
    box-shadow: 0 2px 5px #0000004f;
    .navbar-nav {
      --bs-navbar-active-color: var(--text-color);
      --bs-navbar-color: var(--text-color);
    }

    .nav-item {
      :has(.nav-link.active) {
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background-color: var(--brown-1);
          height: 3px;
          border-radius: 2px;
        }
      }
    }

    .navbar-nav li {
      transform: translateY(0px);
      transition: all 0.2s ease;

      &:hover {
        transform: translateY(-5px);
        color: var(--text-hover-color);
      }
    }
  }

  .wp-block-site-logo img {
    width: min(250px, 45vw) !important;
    aspect-ratio: 3.54320987654;
  }

  .section {
    .mw-25 {
      max-width: 25%;
    }
  }

  .section-1 {
    padding: 0;
    overflow: hidden;
  }

  .text-brown-1 {
    color: var(--brown-1);
  }

  .text-brown-2 {
    color: var(--brown-4);
  }

  h2.wp-block-heading,
  .wp-block-post-title {
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 30px !important;

    &:not(.no-underline)::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: var(--brown-1);
    }
  }

  .wp-block-post-title {
    margin-top: 30px;
  }

  .contact-section {
    background: linear-gradient(
      to right,
      var(--gray-bg-color) 0%,
      var(--gray-bg-color) calc(100% - 40px),
      transparent calc(100% - 40px)
    );
  }
  @media screen and (min-width: 578px) {
    .contact-section {
      background: linear-gradient(
        to right,
        var(--gray-bg-color) 0%,
        var(--gray-bg-color) 65%,
        transparent 65%
      );
    }
  }

  .wpcf7-form {
    label,
    input,
    textarea {
      width: 100%;
    }
  }

  .wpcf7-submit {
    background-color: #ef9f59;
    opacity: 1;
    padding: 5px 10px;
    box-shadow: none;
    border: 3px solid RGBA(157, 100, 50, 1);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    color: #fff;
    &:hover {
      background-color: #c08b5c;
    }
  }

  .wp-block-epico-dynamic-year-block a,
  .wp-block-epico-dynamic-year-block a:visited {
    color: #fff;
    text-decoration: none;
  }
}
.wp-block-epico-dynamic-year-block .privacy-policy-link {
  display: none !important;
}

@layer utilities {
  .invert-img {
    filter: brightness(0) invert(1);
  }

  .transition-all {
    transition: all 0.2s ease;
  }
}