@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

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

@layer components {
  main ul:not(.no-list-arrow) {
    @apply list-none pl-0;
  }

  main ul:not(.no-list-arrow)>li {
    @apply relative pl-8;
  }

  main ul:not(.no-list-arrow)>li::before {
    content: "\f101";
    position: absolute;
    left: 0;
    top: 0.05em;
    font-family: FontAwesome;
    color: #a17133;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 400;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  @media (min-width: 1024px) {
    [data-help-stack] [data-help-stack-cards] {
      position: relative;
    }

    [data-help-stack] .help-stack-card {
      will-change: transform;
    }
  }

  .services-carousel-card {
    @apply flex shrink-0 snap-start snap-always flex-col justify-between bg-slate-800 p-8 text-white transition-colors duration-300 ease-out;
    min-height: 380px;
    flex-basis: min(22rem, calc(100vw - 3.5rem));
    max-width: min(22rem, calc(100vw - 3.5rem));
  }

  .services-carousel-card:hover,
  .services-carousel-card:focus-within {
    @apply bg-slate-200 text-slate-900;
  }

  .services-carousel-card-title,
  .services-carousel-card-link {
    @apply transition-colors duration-300 ease-out;
  }

  .services-carousel-card-link {
    @apply border-yahesa-brand text-yahesa-brand;
  }

  .services-carousel-card-body {
    @apply mt-auto max-w-[24ch] translate-y-3 text-sm leading-snug text-slate-900 opacity-0 transition-all duration-300 ease-out;
  }

  .services-carousel-card:hover .services-carousel-card-body,
  .services-carousel-card:focus-within .services-carousel-card-body {
    @apply translate-y-0 opacity-100;
  }

  @media (min-width: 640px) {
    .services-carousel-card {
      min-height: 420px;
    }
  }

  @media (min-width: 1024px) {
    .services-carousel-card {
      min-height: min(52vh, 520px);
      flex-basis: calc((100% - 3rem) / 3.5);
      max-width: none;
    }
  }

  .why-carousel-card {
    @apply flex shrink-0 snap-start snap-always flex-col overflow-hidden rounded-sm border border-slate-900 bg-[#F8F9FA];
    flex-basis: min(18.5rem, calc(100vw - 4.5rem));
    max-width: min(20rem, calc(100vw - 4.5rem));
  }

  @media (min-width: 1024px) {
    .why-carousel-card {
      @apply h-full min-h-0;
      height: 34rem;
      min-height: 34rem;
      flex-basis: calc((100% - 2rem) / 2.3);
      max-width: 24rem;
    }
  }

  .testimonial-card {
    @apply flex shrink-0 snap-start snap-always flex-col border-l-4 border-yahesa-brand bg-[#F9F9F9] shadow-none;
    flex-basis: min(22rem, calc(100vw - 4rem));
    max-width: min(28rem, calc(100vw - 4rem));
  }

  @media (min-width: 1024px) {
    .testimonial-card {
      @apply min-h-0;
      height: 28rem;
      min-height: 28rem;
      flex-basis: calc((100% - 2rem) / 2.18);
      max-width: none;
    }
  }
}

@layer base {
  html {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none !important;
  }

  #about article {
    position: relative !important;
    top: auto !important;
    min-height: unset !important;
    box-shadow: none !important;
  }

  .team-card-panel {
    transition: none !important;
  }
}

.icon-width {
  width: 8rem;
  height: 3rem;
}

.team-card-image-fallback {
  background: linear-gradient(135deg, #d7dce2 0%, #f3f0eb 45%, #c2a381 100%);
}

@media (min-width: 1024px) {
  #why-yahesa .why-yahesa-inner {
    align-items: center;
  }

  #why-yahesa aside {
    height: 34rem;
    min-height: 34rem;
  }

  #why-yahesa .why-carousel-viewport,
  #why-yahesa .why-carousel {
    height: 34rem;
    min-height: 34rem;
  }

  #why-yahesa .why-carousel {
    align-items: stretch;
    padding-bottom: 0;
  }

  #why-yahesa .why-carousel-card {
    height: 34rem;
    min-height: 34rem;
  }

  #why-yahesa .why-yahesa-controls {
    margin-top: auto;
  }
}

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

ul>li {
  position: relative;
  padding-left: 32px;
}

ul>li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0em;
  bottom: 0.4em;
  padding-bottom: 2px;

  width: 24px;
  height: 24px;

  background-image: url('/build/assets/images/chevrons-right.svg');
  background-size: contain;
  background-repeat: no-repeat;
}