@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

body {
  @apply font-blinker;
}

h1 {
  @apply text-h1 font-blinker;
}

h2 {
  @apply text-h2 font-blinker;
}

h3 {
  @apply text-h3 font-blinker;
}

.p-tabmenu .p-tabmenu-nav {
  background-color: transparent !important;
  border: none !important;
}

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
  background-color: transparent !important;
  border: none !important;
}

.p-menubar-button .p-icon {
  display: none !important;
}

.p-button .pi.pi-bolt {
  color: yellow;
}

.p-overlaypanel-content {
  width: 100% !important;
  height: 100% !important;
}

.p-dropdown-items-wrapper {
  max-width: 80vw !important;
  max-height: 400px !important;
}

/* hero banner animation */
@keyframes flip {
  0%, 100% {
    transform: rotateX(0);
    opacity: 1;
  }
  45%, 60% { /* Adjusted for quicker opacity transition */
    transform: rotateX(180deg);
    opacity: 0;
  }
}

.flip-enter-active, .flip-exit-active {
  animation-name: flip;
  animation-duration: 800ms; /* Keep as is for smooth transition */
  animation-timing-function: ease-in-out;
  transform-origin: center center;
  animation-fill-mode: forwards; /* Ensures the end state of the animation is retained */
}

/* YT thumbnails */
.markdown-content iframe {
  max-width: 100vw;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Hide scrollbars globally (need to be cautious with this approach) */
.p-tabmenu .p-tabmenu-nav {
  overflow-x: auto;
  scrollbar-width: none;
}

.p-tabmenu .p-tabmenu-nav::-webkit-scrollbar {
  display: none;
}

/* markdown content display styles */
.markdown-content {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.markdown-content h1, .markdown-content h2 {
  padding-bottom: 0.3em;
}

.markdown-content pre {
  border-radius: 3px;
  padding: 16px;
  overflow: auto;
}

.markdown-content code {
  border-radius: 3px;
  font-size: 85%;
  margin: 0;
}