/* ExtraLight - 200 */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Light - 300 */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular - 400 */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium - 500 */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold - 600 */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold - 700 */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold - 800 */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Base usage */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}



.menu-blur-bg {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

p {
  @apply text-[18px] leading-[30px] !important;
}

#mobile-menu {
  transition: transform 0.3s ease-in-out;
  transform: translate(0, 0) ;

}
#mobile-menu.active {
  transform: translate(0, 100%);
}
.mobile-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.mobile-dropdown-content.active {
  max-height: 500px;
}

/* fix breaking of layout */
.wp-block-search__label {
  width: auto !important;
}

/* FIX: Pure CSS breakdown instead of using @apply */
.single-post h1, 
.single-post h2, 
.single-post h3, 
.single-post h4, 
.single-post h5, 
.single-post h6 {
  font-weight: 700;       /* font-bold */
  color: rgb(15, 23, 42);  /* text-slate-900 */
  line-height: 1.25;       /* tracking-tight / leading-tight */
}

.single-post h1 {
  font-size: 2.25rem;     /* 36px (Tailwind text-4xl) */
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.single-post h2 {
  font-size: 1.875rem;    /* 30px (Tailwind text-3xl) */
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.single-post h3 {
  font-size: 1.5rem;      /* 24px (Tailwind text-2xl) */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.single-post h4 {
  font-size: 1.25rem;     /* 20px (Tailwind text-xl) */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.single-post h5 {
  font-size: 1.125rem;    /* 18px (Tailwind text-lg) */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.single-post h6 {
  font-size: 1rem;        /* 16px (Tailwind text-base - Same as base, but bold) */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}


.container {
  @media (width >= 48rem) {
      max-width: 100%;
  }
  @media (width >= 64rem) {
      max-width: 100%;
  }
  @media (width >= 80rem) {
    max-width: 100%;
  }
  @media (width >= 96rem) {
      max-width: 1820px;
  }
}