@import 'tailwindcss';

  @theme {
    --font-alegreya: 'Alegreya';
    --font-istok-web: 'Istok Web';
    --font-oswald: 'Oswald';
    --font-helvetica: Helvetica;
    --color-primary: #eab465;
    --color-secondary: #09415c;
    --color-secondary-50: #697882;
    --color-background: #0f0f0f;
    --color-foreground: #c8c8c8;
    --color-foreground-50: #f7eeee;
    --color-foreground-100: #7e7e7e;
    --color-foreground-200: #505050;
    --color-danger: #cc3466;
    --color-success: #17a398;
    --shadow-md: 0 5px 10px rgba(0, 0, 0, 0.025);
    --radius-4xl: 2rem;
    --radius-5xl: 2.5rem;
    --radius-6xl: 3rem;
    --default-transition-duration: 300ms;
    --animate-bounce-right: bounce-right 1s ease-in-out infinite;
  }

  /* Fonts */
  @font-face {
    font-family: 'Alegreya';
    font-weight: 500;
    src: url('../fonts/alegreya/Alegreya-Medium.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Istok Web';
    font-weight: 700;
    src: url('../fonts/istok-web/IstokWeb-Bold.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Istok Web';
    font-weight: 400;
    src: url('../fonts/istok-web/IstokWeb-Italic.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Oswald';
    font-weight: 400;
    src: url('../fonts/oswald/Oswald-Regular.ttf') format('truetype');
  }

  /* Keyframes */
  @keyframes bounce-right {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(4px);
    }
  }

  @layer base {
    html,
    body {
      @apply max-w-full overscroll-none;
    }
    body {
      @apply text-foreground-50 font-helvetica bg-background;
    }
    h1 {
      @apply font-istok-web text-primary text-5xl font-bold lg:text-7xl;
    }
    h2 {
      @apply font-istok-web text-4xl font-bold lg:text-5xl;
    }
    h3 {
      @apply font-alegreya text-2xl font-medium lg:text-3xl;
    }
    h4 {
      @apply text-lg;
    }
    h5 {
      @apply text-base;
    }
    h6 {
      @apply text-sm;
    }
    span,
    p,
    b,
    strong,
    i,
    u,
    input,
    label,
    select,
    textarea,
    ul,
    li {
      @apply text-foreground-50 m-0 text-sm transition-all lg:text-base;
    }
    a {
      @apply cursor-pointer text-sm no-underline transition-all lg:text-base;
    }
    iconify-icon {
      @apply text-base transition-all lg:text-lg;
    }
  }

  @layer components {
    .delimiter {
      @apply mx-auto w-full max-w-[86rem] px-6;
    }
    .divider {
      @apply bg-foreground-200 h-[1px] w-full;
    }
    .btn-primary {
      @apply bg-primary hover:bg-primary/90 border-primary relative inline-flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-sm border px-3 py-2 text-sm text-black transition-all;
    }
    .btn-secondary {
      @apply bg-primary/10 border-primary/10 !text-foreground-50 hover:text-primary relative inline-flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-sm border px-3 py-2 text-sm transition-all;
    }
    .btn-outline {
      @apply hover:border-primary/90 border-primary !text-primary relative inline-flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-sm border bg-transparent px-3 py-2 text-sm transition-all;
    }
    .btn-paginate {
      @apply bg-foreground-100 hover:bg-foreground-100/90 border-foreground-100 !text-foreground-50 hover:text-primary relative inline-flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-sm border px-4 py-2 text-sm transition-all;
    }
    .btn-paginate.active {
      @apply !bg-primary !border-primary !text-black;
    }
    .btn-primary iconify-icon,
    .btn-secondary iconify-icon,
    .btn-outline iconify-icon {
      @apply text-black;
    }
    .form label {
      @apply text-foreground-50 mb-1 inline-block text-sm;
    }
    .form input[type='text'],
    .form input[type='date'],
    .form input[type='time'],
    .form input[type='email'],
    .form input[type='number'],
    .form select,
    .form textarea {
      @apply text-foreground border-foreground-100 ring-primary focus:ring-primary/10 focus:border-primary w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-all outline-none placeholder:text-gray-500 focus:ring-2;
    }
    .form textarea {
      @apply max-h-48 min-h-32;
    }

    /* Swiper */
    .btn-prev,
    .btn-next {
      @apply bg-secondary hover:bg-secondary/90 flex size-10 min-w-10 cursor-pointer items-center justify-center rounded-full duration-300;
    }
    .btn-pagination .swiper-pagination-bullet {
      @apply !bg-secondary/50 !opacity-100;
    }
    .btn-pagination .swiper-pagination-bullet-active {
      @apply !bg-secondary !opacity-100;
    }
  }

/* WordPress Core Compatibility */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* Gallery */
.gallery {
  margin: 0 auto 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
  padding: 0.5em;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
}

/* Admin Bar Spacing */
body.admin-bar {
  margin-top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    margin-top: 46px;
  }
}

.content-blocks-container ul{
  @apply mt-4 list-disc pl-4
}

.content-blocks-container hr{
  @apply my-8;
}
.content-blocks-container hr:last-child{
  @apply mt-8 mb-0;
}
.content-blocks-container h4{
  @apply font-oswald text-primary text-2xl lg:text-3xl;
}

.content-blocks-container span{
  @apply text-primary mb-4 block tracking-widest uppercase;
}
.content-block h3{
  @apply my-3;
}
.content-block h2{
  @apply my-3;
}
.content-block ul{
  @apply mb-2 list-disc pl-4;
}