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

.swiper-wrapper {
  box-sizing: border-box;
}
.btn-white-out {
  @apply my-2 bg-transparent text-white font-radikal uppercase border-2 border-white px-6 py-2 rounded hover:bg-blue-800 transition;
}
.btn-primary-out {
  @apply my-2 bg-transparent text-primary font-radikal uppercase border-2 border-primary px-6 py-2 rounded hover:bg-blue-50 transition;
}
.btn-bold {
  @apply my-2 bg-primary text-accent font-radikalbold text-xl uppercase border-2 border-primary px-8 py-3 rounded hover:text-white hover:border-white transition;
}
.btn-yellow {
  @apply my-2 bg-accent text-primary font-radikalbold uppercase px-6 py-2 rounded hover:bg-amber-300 transition z-10;
}
.btn-pink {
  @apply my-2 bg-whippink text-white font-radikalbold uppercase px-6 py-2 rounded hover:bg-pink-700 transition z-10;
}
.navbar-bg-solid {
  @apply bg-navbar-svg bg-cover bg-no-repeat bg-bottom transition-all duration-500;
}
/* Disabled or dimmed button styles */
.disabled {
  @apply opacity-35 pointer-events-none;
}
.parallax {
  @apply bg-fixed bg-cover bg-no-repeat bg-center;
}
.swiper-pagination {
  @apply relative text-left;
}
.swiper-pagination-bullet {
  @apply bg-white;
}
button {
  @apply transition duration-300 ease-in-out;
}
/* styles to match Dole Branding 4-14-25 */
.leading-pass-7xl {
  @apply leading-[4.369rem];
}
.leading-pass-6xl {
  @apply leading-[3.640rem];
}
.leading-pass-5xl {
  @apply leading-[2.913rem];
}
.leading-pass-4xl {
  @apply leading-[2.184rem];
}
.leading-pass-3xl {
  @apply leading-[1.825rem];
}
.leading-pass-2xl {
  @apply leading-[1.456rem];
}
.leading-pass-xl {
  @apply leading-[1.214rem];
}
.leading-7xl {
  @apply leading-[4.711rem];
}
.leading-6xl {
  @apply leading-[3.926rem];
}
.leading-5xl {
  @apply leading-[3.141rem];
}
.leading-4xl {
  @apply leading-[2.356rem];
}
.leading-3xl {
  @apply leading-[1.963rem];
}
.leading-2xl {
  @apply leading-[1.571rem];
}
.leading-xl {
  @apply leading-[1.309rem];
}

/* Styles related to pagination */
.pagy {
  @apply flex items-center -space-x-px h-10 text-base;
  a:not(.gap) {
    @apply flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300;
    &:hover {
      @apply bg-gray-100 text-gray-700;
    }
    &.current {
      @apply z-10 flex items-center justify-center px-3 h-8 leading-tight text-blue-600 border border-blue-300 bg-blue-50;
    }
    &:first-child {
      @apply ms-0 border-e-0 rounded-s-lg;
    }
    &:last-child {
      @apply rounded-e-lg;
    }
  }
  a.gap {
    @apply flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300;
    &:hover {
      @apply bg-gray-100 text-gray-700;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
  &.info {
    @apply dark:text-white;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
    @font-face {
        font-family: 'Radikal';
        src:url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1677276073/fonts/radikalregularfont.woff2') format('woff2'),
            url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1677276068/fonts/radikalregularfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }
      @font-face {
        font-family: 'Radikal Italic';
        src:url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1677276102/fonts/radikalregularitalicfont.woff2') format('woff2'),
            url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1677276102/fonts/radikalregularitalicfont.woff') format('woff');
        font-weight: normal;
        font-style: italic;
      }
      @font-face {
        font-family: 'Radikal Bold';
        src:url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1677276038/fonts/radikalboldfont.woff2') format('woff2'),
            url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1677276038/fonts/radikalboldfont.woff') format('woff');
        font-weight: bold;
        font-style: normal;
      }
      @font-face {
        font-family: 'Passata';
        src:url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1678142076/fonts/FuturaPassata-DISPLAY.ttf') format('truetype'),
            url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1678142076/fonts/FuturaPassata-DISPLAY.eot'), /* Fallback for IE8 and earlier */
            url('https://res.cloudinary.com/dl4k1qf4e/raw/upload/v1678142076/fonts/FuturaPassata-DISPLAY.eot?#iefix') format('embedded-opentype'); /* IE compatibility */
        font-weight: normal;
        font-style: normal;
      }
      @font-face {
        font-family: "korolev-condensed", sans-serif;
        font-weight: 500;
        font-style: normal;
      }
      @font-face {
        font-family: "korolev-condensed", sans-serif;
        font-weight: 900;
        font-style: normal;
      }
      .swiper-button-next, .swiper-button-prev {
        color: #fff;
      }
      --swiper-theme-color {
        color:#fff;
      }