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

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply overflow-x-hidden;
  }
}

@layer components {
  .bi-btn-lg {
    @apply px-4 md:px-6 py-2 md:py-[10px] rounded-[24px] relative;
  }

  .bi-btn-sm {
    @apply px-[14px] py-2 rounded-[19px];
  }

  .bi-btn-green {
    @apply bg-biPrimaryGreen;
  }

  .bi-btn-purple {
    @apply bg-biPrimaryPurple;
  }

  .bi-btn-icon-wrapper {
    @apply relative w-[20px] overflow-hidden;
  }

  .bi-btn-icon {
    @apply absolute size-4 md:size-5 top-[50%] translate-y-[-50%] transition-all ease-in duration-300 flex justify-center items-center;
  }

  .bi-btn-icon-left {
    @apply left-[-20px] group-hover:left-[3px];
  }

  .bi-btn-icon-right {
    @apply left-[3px] group-hover:left-[30px];
  }

  .bi-btn-btn-icon > img {
    @apply size-[13px];
  }

  .bi-btn-text-cormorant {
    @apply font-CormorantGaramond font-medium text-base md:text-lg lg:text-xl/[22px] text-biOffBgGreen capitalize;
  }

  .bi-btn-text-manrope {
    @apply font-Manrope font-medium text-sm md:text-base/[22px] text-biOffBgGreen capitalize;
  }

  .bi-btn-sm-text {
    @apply text-biOffBgGreen font-normal font-Manrope text-[14px];
  }

  .bi-navbar .bi-nav_list .bi-link.bi-active {
    @apply border-b border-white;
  }

  .bi-form-group {
    @apply flex flex-col gap-3;
  }

  .bi-form-control-wrap {
    @apply w-full;
  }

  .bi-form-control {
    @apply w-full rounded-[14px] border border-[#E5E5E5] bg-[#F6F6F6] py-3 px-4 font-Manrope text-sm/[19px] text-biPrimaryText;
  }
}

.bi-search_box .bi-placeholder {
  @apply placeholder:font-Manrope font-normal text-xs/[100%];
}

@media (max-width: 1023px) {
  .bi-mobile-menu {
    @apply absolute top-[68px] left-0 right-0 flex-col bg-[#0E1F0C] gap-0 items-stretch py-4 translate-y-[-400px] transition-all duration-100 ease-in z-40 max-h-[calc(100vh-68px)] overflow-y-auto;
  }

  .bi-mobile-menu.bi-active {
    @apply translate-y-0;
  }

  .bi-navbar .bi-nav_list .bi-link {
    @apply block w-full px-6 py-3 text-sm;
  }
}

@media (min-width: 1024px) {
  .bi-mobile-menu {
    @apply static flex-row translate-y-0 bg-transparent max-h-none overflow-visible py-0;
  }

  .bi-navbar .bi-nav_list .bi-link {
    @apply inline-block w-auto whitespace-nowrap;
  }
}

.bi-hamburger .bi-hamburger-line {
  @apply bg-white transition-all duration-200 ease-in;
}

.bi-hamburger.bi-active .bi-line-1 {
  @apply absolute rotate-45;
}

.bi-hamburger.bi-active .bi-line-3 {
  @apply absolute -rotate-45;
}

.bi-hamburger.bi-active .bi-line-2 {
  @apply hidden;
}

/* slider */
.bi-slider .slick-slide > div {
  @apply mr-16;
}

.bi-slider .slick-list {
  @apply -mr-16;
}

.bi-testimonials .slick-list {
  @apply -mr-6 lg:-mr-8;
}

.bi-testimonials .slick-slide > div {
  @apply mr-6 lg:mr-8;
}

/* image-box */

.bi-images-box .bi-image-box {
  @apply lg:flex-1 transition-all ease-in duration-300 cursor-pointer max-sm:w-full max-lg:w-[calc(50%-12px)] h-[500px] sm:h-[550px] md:h-[600px] lg:h-[740px];
}

.bi-images-box .bi-image-box.bi-active {
  @apply lg:flex-[3];
}

.bi-images-box .bi-image-heading {
  @apply text-2xl transition-all duration-700;
}

.bi-images-box .bi-image-box .bi-image-text {
  @apply text-base font-normal transition-all duration-1000;
}

.bi-images-box .bi-image-box.bi-active .bi-image-text {
  @apply lg:text-xl;
}

.bi-images-box .bi-image-box.bi-active .bi-image-heading {
  @apply lg:text-5xl/[50px];
}

.auto-play .slick-slide {
  @apply mr-8 w-[300px];
}

.auto-play .slick-list {
  @apply -mr-8;
}

.auto-play .slick-slide > div {
  @apply h-[350px] flex items-end;
}

/* table  */
.bi-table .bi-thead .bi-th {
  @apply font-Manrope font-bold text-base sm:text-lg/[33px] md:text-xl/[33px] lg:text-2xl/[33px] text-white py-2 md:py-4 lg:py-[18.5px] capitalize;
}

.bi-table .bi-tbody tr .bi-td {
  @apply font-Manrope font-medium bg-biOffBgGreen text-sm/[150%] md:text-base/[150%] lg:text-lg/[150%] tracking-[-2%] text-center text-biPrimaryText py-2 lg:py-[11.5px] capitalize;
}

.bi-table .bi-tbody > :nth-child(odd) .bi-td {
  @apply bg-[#f8f4ff];
}

.bi-table .bi-tbody tr > :first-child {
  @apply text-left pl-6;
}

/* ACCORDIAN */
.bi-accordian .bi-item {
  @apply border-b;
}

.bi-accordian .bi-item:not(.bi-active) .bi-content {
  @apply h-0 overflow-hidden transition-all ease-in duration-200;
}

.bi-accordian .bi-item.bi-active .bi-content {
  @apply py-2 rounded-lg transition-all ease-in duration-200;
}

.bi-accordian .bi-item.bi-active .bi-header .bi-acc-right-icon {
  @apply rotate-45 transition-transform duration-200 ease-in;
}

.bi-cat_item.bi-active .bi-cat_name {
  @apply text-biPrimaryGreen;
}

.bi-pro_details_card .bi-product_images_slider .slick-slide {
  @apply w-[100vw] large:w-[446px] mx-auto;
}

.bi-pro_details_card .bi-thumb_slider .slick-slide > div {
  @apply mr-2;
}

.bi-pro_details_card .bi-thumb_slider .slick-list {
  @apply -mr-2;
}

.bi-thumb_slider .slick-track {
  @apply mx-auto;
}

.slick-prev,
.slick-next {
  z-index: 5;
}

.slick-prev {
  @apply !left-8;
}

.slick-next {
  @apply !right-8;
}

.bi-preview_slider .slick-slide > div {
  @apply w-[100vw] sm:w-[90vw] h-[100vh] m-auto;
}

.bi-also_like .bi-cat_card_slider .slick-slide {
  @apply mr-4;
}

.bi-also_like .bi-cat_card_slider .slick-list {
  @apply -mr-4;
}

/* ADD BORDER TO CLICKED LINK */
.bi-text_content .bi-nav .bi-link.bi-active {
  @apply border-b border-biDarkGreen text-biDarkGreen;
}

/* ADD COLOR TO CLICKED SIZE */
.bi-product_details .bi-size_wrapper .bi-size.bi-active {
  @apply bg-biPrimaryGreen text-white;
}

.bi-product_details .bi-content_card_wrapper .bi-content_card.bi-active {
  @apply border border-biPrimaryGreen;
}

.bi-stories_slider .slick-slide {
  @apply mr-4 md:mr-6 lg:mr-8;
}

.bi-stories_slider .slick-list {
  @apply -mr-4 md:-mr-6 lg:-mr-8;
}

.bi-partners .bi-card_list.bi-auto_slider .slick-slide {
  @apply pr-4 sm:pr-8 md:pr-12 lg:pr-16;
}

.bi-partners .bi-card_list.bi-auto_slider .slick-list {
  @apply -mr-4 sm:-mr-8 md:-mr-12 lg:-mr-16;
}

.bi-link_spy.bi-active {
  @apply text-biDarkPurple;
}

.bi-faq .bi-accordian_item .bi-accordian {
  @apply h-0 transition-all duration-500;
}

.bi-faq .bi-accordian_item.bi-active .bi-accordian {
  @apply mt-[18px] h-auto;
}

.bi-faq .bi-accordian_item.bi-active .bi-icon_wrapper {
  @apply rotate-180 transition-all duration-300;
}

/* Homepage responsive */
/* .bi-hero__bg {
    @apply min-h-[520px] sm:min-h-[550px] md:min-h-[600px] lg:min-h-[650px];
} */

@media (max-width: 767px) {
  .bi-hero__content {
    @apply py-10;
  }

  .bi-hero__actions {
    @apply flex-col items-stretch;
  }

  .bi-hero__actions .bi-btn-lg {
    @apply w-fit text-center;
  }

  .bi-hero__actions .bi-btn-lg a {
    @apply justify-center w-full;
  }

  .bi-hero__actions .bi-hero__secondary {
    @apply self-center;
  }

  .bi-contact-card-wrap {
    @apply static;
  }

  .bi-contact-form-panel {
    @apply px-4 py-8 sm:px-6 sm:py-10;
  }

  .bi-contact-form-panel h1 {
    @apply text-xl;
  }

  .bi-contact-form-panel label {
    @apply text-sm;
  }

  .bi-contact-extra {
    @apply hidden;
  }

  .bi-footer-trees {
    @apply hidden;
  }

  .bi-footer-copyright {
    @apply flex-col text-center gap-3 px-4;
  }

  .bi-footer-copyright p:last-child {
    @apply text-xs leading-relaxed;
  }

  /* .bi-service-cta,
    .bi-final-cta {
        @apply w-full;
    } */

  .bi-service-cta a,
  .bi-final-cta a {
    @apply justify-center w-full;
  }
}

@media (max-width: 374px) {
  .bi-hero__location {
    @apply text-[10px] tracking-normal;
  }

  .bi-how_it_works_wrapper .bi-SN {
    @apply text-[56px]/[56px];
  }
}

/* Why Bloom Ivy — expanding industry cards */
@media (min-width: 1024px) {
  .bi-industries-cards {
    @apply items-stretch;
  }

  .bi-industry-card {
    @apply flex-[1] min-w-0 cursor-pointer transition-[flex] duration-500 ease-in-out;
  }

  .bi-industry-card.is-active,
  .bi-industry-card:hover,
  .bi-industry-card:focus-visible {
    @apply flex-[2.75] outline-none;
  }

  .bi-industries-cards:hover .bi-industry-card:not(:hover):not(:focus-visible) {
    flex: 0.85 1 0;
  }

  .bi-industry-card__media img {
    @apply brightness-[0.92] saturate-[1.05];
  }

  .bi-industry-card.is-active .bi-industry-card__media img,
  .bi-industry-card:hover .bi-industry-card__media img,
  .bi-industry-card:focus-visible .bi-industry-card__media img {
    @apply scale-110 brightness-100;
  }

  .bi-industry-card.is-active .bi-industry-card__overlay,
  .bi-industry-card:hover .bi-industry-card__overlay,
  .bi-industry-card:focus-visible .bi-industry-card__overlay {
    @apply from-[#032D00] via-[#032D0073] to-[#032D001A];
  }

  .bi-industry-card:not(.is-active):not(:hover):not(:focus-visible)
    .bi-industry-card__text {
    @apply line-clamp-2;
  }

  .bi-industry-card.is-active .bi-industry-card__text,
  .bi-industry-card:hover .bi-industry-card__text,
  .bi-industry-card:focus-visible .bi-industry-card__text {
    @apply line-clamp-none;
  }

  .bi-industries-cards:hover
    .bi-industry-card:not(:hover):not(:focus-visible)
    .bi-industry-card__text {
    @apply line-clamp-2;
  }

  .bi-industry-card.is-active .bi-industry-card__title,
  .bi-industry-card:hover .bi-industry-card__title,
  .bi-industry-card:focus-visible .bi-industry-card__title {
    @apply text-xl xl:text-2xl;
  }
}

.bi-form-group .bi-form-control-wrap .bi-form-control::placeholder {
  @apply font-Manrope font-normal text-sm/[19px] text-[#42424280];
}

.bi-form-control {
  @apply w-full rounded-lg border bg-biOffBg py-3 px-3 font-Manrope text-sm/[19px] text-biPrimaryText outline-none;
}

.bi-my_account .bi-navLink.bi-active {
  @apply bg-biOffBgGreen font-medium border-r-[6px] border-biPrimaryGreen;
}

.bi-stories_slider .slick-track {
  display: flex !important;
}

.bi-stories_slider .slick-slide {
  height: inherit !important;
}

.bi-stories_slider .slick-slide > div {
  @apply h-full;
}