@layer theme, utilities, plugins;

/* 
Wordpress breakpoints: Mobile - (0-599) / Tablet (600-767) / Desktop (768-99999)
*/

:root :where(.wp-element-button:visited, .wp-block-button__link:visited) {
  color: var(--wp--preset--color--base);
}

html {
  scroll-padding-top: 200px;
  /* offset for anchor links */
  scroll-behavior: smooth;
  /* smooth scrolling for anchor links */
}

body.logged-in .nav-container {
  top: 26px !important;
}

.coast {

  /* is this controlled in theme.json? */
  .wp-site-blocks {
    padding-top: 0;
    padding-bottom: 0;
  }

  header {
    .nav-container {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
    }

    .header-menu {
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35);
    }

    &.header-is-scrolled .nav-container {
      background: rgba(255, 255, 255, 0.8);
      /* background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%
        ); */
      backdrop-filter: blur(5px);
    }

    @media screen and (max-width: 1255px) {
      .coast-main-nav {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: 8px;

        .wp-block-kadence-advancedbtn {
          width: 93%;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
      }

      .kt-btn-inner-text {
        /* font-size: 15px; */
      }

      .kb-button {
        /* padding: 8px !important; */
      }
    }

    /* category slider */
    .wp-block-cb-carousel {
      /* display: flex; */
    }

    .wp-block-cb-slide {
      display: inline-block;
    }

    .slick-dots {
      @media screen and (min-width: 768px) {
        display: none !important;
      }
    }

    .slick-dots li {
      margin: 0 !important;
    }

    .slick-dotted.slick-slider {
      /* margin-bottom: 0 !important; */
    }

    .slick-slide .kt-inside-inner-col {
      justify-content: flex-end !important;
    }
  }

  /* Category Menu */
  .scroll-wrapper {
    padding: 0 20px;
    display: flex;
    justify-content: center;
  }

  .scroll-container {
    margin-top: 130px;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    gap: 10px;
    background-color: white;
    cursor: grab;
    border-bottom: 1px solid #f2f1f1;

    @media screen and (max-width: 1283px) {
      margin-top: 70px;
    }
  }

  .scroll-container::-webkit-scrollbar {
    height: 10px;
    max-width: 100px;
    /* display: none; */
  }

  .scroll-container::-webkit-scrollbar-thumb {
    background: #43b64a;
    border-radius: 10px;
  }

  .scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  .scroll-item {
    min-width: 200px;
    height: 150px;
    background-color: white;
    color: #07380c;
    text-align: center;
    line-height: 60px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    @media screen and (max-width: 1283px) {
      transform: scale(0.8);
      min-width: 140px;
    }
  }

  .scroll-item.sub-cat img {
    transform: translateY(20px);
  }

  .scroll-item a {
    text-decoration: none;
    color: #07380c;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      max-height: 110px;
    }

    &:hover {
      color: #43b64a;
    }

    &:hover img {
      opacity: 0.5;
    }
  }

  /* PRODUCT PAGE */
  &.archive.tax-product_cat {

    .wp-block-kadence-query-filter-checkbox,
    .kadence-filter-wrap,
    .kb-query-label {
      width: 100%;
    }

    legend.kb-query-label {
      font-weight: 500;
    }

    .filter-toggle-clickable {
      cursor: pointer;
      user-select: none;
      position: relative;
      padding-right: 20px;
    }

    .filter-toggle-clickable:hover {
      opacity: 0.8;
    }

    .filter-toggle-clickable:focus {
      outline: 2px solid #0073aa;
      outline-offset: 2px;
    }

    .filter-toggle-clickable::after {
      content: "\25BE";
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      transition: transform 0.2s ease;
      font-size: 1rem;
      color: #f2f1f1;
    }

    .filter-toggle-clickable.expanded::after {
      transform: translateY(-50%) rotate(180deg);
    }

    .filter-options-collapsible {
      transition: all 0.3s ease;
    }

    .wc-block-product-categories-list {
      font-size: 1rem;

      a {
        text-decoration: none;
      }

      .wc-block-product-categories-list-item-count {
        opacity: 0.5;
        font-size: 0.8rem;
      }
    }

    .kadence-filter-wrap {
      width: 100px;

      border-radius: 30px;
    }

    .kadence-filter-wrap .kb-sort {
      padding: 0 !important;
      height: 50px;
      text-align: center;
    }

    .kt-blocks-modal-link {
      border-radius: 30px;
      width: 100px;
      height: 50px;
      border-radius: 30px;
    }

    .wc-block-product-categories__dropdown select {
      width: 125px;
      height: 50px;
      margin-right: 0;
      background-color: #f2f1f1;
      color: #07380c;
      border: none;
      padding: 0px;
      text-align: center;
      border-radius: 30px;
      font-size: 1rem;
      -webkit-appearance: none;
      /* Chrome, Safari, Edge */
      -moz-appearance: none;
      /* Firefox */
      appearance: none;
    }

    .wc-block-product-categories {
      margin-bottom: 0;
    }

    .wp-block-woocommerce-product-categories.is-dropdown .wc-block-product-categories__button {
      display: none !important;
    }

    .woocommerce .woocommerce-breadcrumb {
      margin-bottom: 0;
    }
  }

  /* MOBILE MENU */

  /* Outer Container - Contains the Hamburger button */
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--base) !important;

    /* Top Level */
    ul {
      gap: 8px !important;
      padding-right: 10px !important;

      >li {
        padding-right: 10px !important;
      }

      >li.has-child {
        border-right: 1px solid var(--wp--preset--color--secondary) !important;
      }

      >li>a {
        color: var(--wp--preset--color--contrast) !important;
        text-align: right;
      }
    }

    /* Second Level */
    ul ul {
      padding-top: 0 !important;
      margin-top: 12px !important;
      margin-bottom: 24px !important;

      >li>a {
        color: var(--wp--preset--color--secondary) !important;
      }
    }
  }

  /* Woowoocommerce-breadcrumb */
  .woocommerce-breadcrumb {
    .delimiter {
      opacity: 0.7;
      font-size: 0.8rem;
      padding: 0 5px;
    }

    a {
      opacity: 0.7;
      text-decoration: none;
    }

    .home-icon {
      margin-right: 5px;
      width: 20px;
      height: 20px;
      background-img: url("assets/img/home.png");
    }
  }

  /* Homepage */
  /* Testimonial */
  .splide__list {
    display: flex;
    align-items: center;
  }

  .kb-splide .splide__arrow--prev {
    border-radius: 30px !important;
  }

  /* Instagram - sbi */
  #sbi_images {
    padding: 0 !important;
  }

  /* Navigation Mobile Custom Breakpoint 
     * - change max-width to desired point hamburger appears 
     */
  /* @media screen and (max-width: 1282px) {
        .wp-block-navigation__responsive-container-open {
            display: block !important;
        }
        .wp-block-navigation__responsive-container:not(
                .is-menu-open.has-modal-open
            ) {
            display: none !important;
        }
    } */
  .header-menu {
    padding: 10px;
    background-color: var(--wp--preset--color--primary);
    border-radius: 50px;
  }

  .fixed-mobile-menu {
    padding: 6px 10px;
    background-color: var(--wp--preset--color--primary);
    border-radius: 50px;
    justify-content: space-around !important;
  }

  /* Blog */
  .entry-content p {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  /* featured product section */
  .products {
    .product {
      display: flex;
    }

    .product a {
      padding: 35px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: white !important;
      border-radius: 20px;

      a:hover>h2 {
        color: #43b64a !important;
      }

      span {
        color: #43b64a !important;
        margin-top: auto;
      }

      .woocommerce-loop-product__title {
        line-clamp: 2;
        -webkit-line-clamp: 2;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        max-height: 38px;
      }
    }

    .add_to_cart_button,
    .product_type_variable,
    .wp-element-button {
      display: none !important;
    }
  }

  /* WooCommerce */
  /* Shop - Product Catalogue */
  .wc-block-product {
    background-color: var(--wp--preset--color--base);
    border-radius: 20px;
    overflow: hidden;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .wp-block-woocommerce-product-price {
      margin-top: auto;
    }
  }

  @media screen and (max-width: 767px) {
    .wc-block-product-template__responsive.wc-block-product-template {
      grid-template-columns: 1fr 1fr;
      grid-gap: 0.5em;
    }

    .wc-block-product {
      padding: 10px;
    }
  }

  .wc-block-product h3 a,
  wc-block-grid__product-title {
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-height: 50px;
  }

  .wc-block-product-categories__button {
    border-radius: 30px;
    border: none;
    width: 28px;
  }

  .page-numbers {
    padding: 1rem 0.3rem;
    display: inline-block;
  }

  .page-numbers.current {
    color: var(--wp--preset--color--primary);
  }

  .wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item__name::after {
    display: none !important;
  }

  /* Single Product */
  .woocommerce.product {
    .single_add_to_cart_button {
      border-radius: 40px;
    }

    .input-text.qty.text {
      border-radius: 40px;
      border: none;
      background-color: var(--wp--preset--color--secondary);
    }
  }

  .pswp__bg {
    background-color: rgba(0, 0, 0, 0.737);
  }

  .original-price {
    /* opacity: 0.4; */
    margin-top: 10px;

    .label {
      font-size: 1rem;
      text-decoration: none;
    }

    .price {
      text-decoration: line-through;
    }
  }

  /* Water Pump Selector */
  .selection-tool {
    .slick-track {
      display: flex;
      align-items: center;
    }

    .go-to-slide {
      background-color: var(--wp--preset--color--primary);
      color: var(--wp--preset--color--base);
      padding: 1rem;
      border-radius: 40px;
      border: none;
      margin-top: 20px !important;

      &.bts {
        background-color: var(--wp--preset--color--contrast);
        margin-top: 0 !important;
      }

      &:hover {
        background-color: var(--wp--preset--color--tertiary);
        color: var(--wp--preset--color--contrast);
        cursor: pointer;
      }
    }

    .products {
      li.product {
        margin-bottom: 0 !important;
      }

      .product a {
        padding: 10px;
      }
    }

    .kt-product-carousel-wrap,
    .woocommerce .product {
      margin-bottom: 0;
    }

    .kt-inside-inner-col {
      min-height: auto;
    }

    .kt-row-column-wrap {
      padding: 20px 0 !important;
      min-height: 0 !important;
    }

    .woocommerce-loop-product__title {
      font-size: 1.2rem;
      max-height: 37px;
      overflow: hidden;
    }

    .woocommerce ul.products li.product a.button {
      display: none;
    }

    img {
      max-height: 90px;
    }
  }

  #podium-website-widget iframe#podium-bubble {
    bottom: 23px !important;
    right: -23px !important;
    transform: scale(0.85);
  }

  #podium-prompt {
    display: none;
  }

  .woocommerce ul.products li.product a img {
    object-fit: contain;
  }

  .notification-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }

  &.trade-customer .notification-bar {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--base);
  }

  .footer-links .kt-inside-inner-col {
    &:hover a {
      opacity: .5;
    }

    a:hover {
      opacity: 1;
    }

    a {
      text-decoration: none;
    }
  }
}

.coast .gform_wrapper {
  input {
    border-radius: 30px !important;
    border: none !important;
    background-color: var(--wp--preset--color--secondary) !important;
  }

  input[type="submit"] {
    background-color: var(--wp--preset--color--primary) !important;
  }
}

/* TEXT */

/* Clip text lines with css, add .clp-txt + .c(no of lines 2,3,5 or 10)  */

.clip-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clip2 {
  -webkit-line-clamp: 2;
}

.clip3 {
  -webkit-line-clamp: 3;
}

.clip5 {
  -webkit-line-clamp: 5;
}

.clip10 {
  -webkit-line-clamp: 10;
}

.no-underline,
.no-underline *,
.no-underline *:hover {
  text-decoration-line: none;
}

/* HOVE EFFECTS */

.hover-slide-left {
  transition: all 200ms ease-in-out;
  &:hover {
    transform: translateX(-5px);
    transition: all 200ms ease-in-out;
  }
}

.hover-slide-right {
  transition: all 200ms ease-in-out;
  &:hover {
    transform: translateX(5px);
    transition: all 200ms ease-in-out;
  }
}

.hover-underline:hover {
  h1,
  h2,
  h3,
  p {
    text-decoration: underline;
  }
}

/* Animate in */

.coast-hidden {
  opacity: 0;
  transition: all 1s;
}

.coast-hidden:nth-child(2) {
  transition-delay: 200ms;
}

.coast-hidden:nth-child(3) {
  transition-delay: 400ms;
}

.coast-hidden:nth-child(4) {
  transition-delay: 600ms;
}

@media-preferes-reduced-motion {
  transition: none;
}

.coast-visible {
  opacity: 1;
}

.rounded {
  border-radius: 20px;
}

.list-style-none,
.list-style-none ul {
  list-style: none;
  padding-left: 0;
}

.max-w-200 {
  width: 200;
}

/* @import "./plugin-gravity.css"; */