/*
Theme Name: Hal42 Theme
Description: The HAL42 WordPress theme is a sleek, modern, and responsive design tailored for HAL42 d.o.o
Author: Visoka Razina
Version: 1.0.0
*/

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

html, body {
    overflow-x: hidden;
}

body {
    max-width: 100vw;
    position: relative;
}

.link-underline {
    @apply underline;
}

ul {
    @apply list-disc [&_ul]:pl-8 [&_ul]:list-disc;
}

/* Navigation menu styles */
.hfe-nav-menu {
    @apply hidden;
}

.menu-is-active .hfe-nav-menu {
    @apply !block;
}

* {
    scroll-margin-top: 200px !important;
}

html:has(.menu-is-active) {
    overflow: hidden;
}

.menu-is-active {
    @apply !h-[100vh] flex justify-center pt-20 overscroll-contain mt-3;
    animation: menuSlideIn 0.3s linear forwards;
}

.menu-is-active .hfe-nav-menu li {
    opacity: 0;
    animation: menuItemFadeIn 0.5s ease-out forwards;
}

.menu-is-active .hfe-nav-menu li:nth-child(1) { animation-delay: 0.1s; }
.menu-is-active .hfe-nav-menu li:nth-child(2) { animation-delay: 0.2s; }
.menu-is-active .hfe-nav-menu li:nth-child(3) { animation-delay: 0.3s; }
.menu-is-active .hfe-nav-menu li:nth-child(4) { animation-delay: 0.4s; }
.menu-is-active .hfe-nav-menu li:nth-child(5) { animation-delay: 0.5s; }
.menu-is-active .hfe-nav-menu li:nth-child(6) { animation-delay: 0.6s; }

.hfe-nav-menu__toggle {
    @apply h-full aspect-square;
}

.menu-is-active * {
    @apply !h-max space-y-4 md:space-y-10 !border-none;
    font-size: clamp(1.4rem, 4.5vw, 2rem)
}

.hfe-menu-item {
    @apply !flex flex-row !items-center !text-center !justify-center
}

.nav {
    @apply !fixed !z-50 bg-white;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem); /* ~32px to ~56px */
}

h2 {
    font-size: clamp(1.75rem, 4.75vw, 3rem); /* ~28px to ~48px */
}

h3 {
    font-size: clamp(1.4rem, 4.5vw, 2rem); /* ~24px to ~40px */
}

h4 {
    font-size: clamp(1.15rem, 4.25vw, 1.5rem); /* ~20px to ~32px */
}

body, p, span, li, a, blockquote, label, input, button, small, em, strong, code, button, small, em, strong, code {
  font-size: clamp(.8rem, 2.5vw, 1.2rem);
}

.w-fit-content {
    @apply w-fit !important;
}

.body-container {
    /* background-color: red; */
    @apply max-w-[1200px] mx-auto;
}

@keyframes menuSlideIn {
    from {
        opacity: 0;
        /* transform: translateX(100vw); */
    }
    to {
        opacity: 1;
        /* transform: translateX(0); */
    }
}

@keyframes menuItemFadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}