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

@layer base {
    

    @font-face {
        font-family: Merriweather;
        src: url(../../fonts//merriweather-v22-latin-regular.eot?) format("embedded-opentype"),
        url(../../fonts//merriweather-v22-latin-regular.woff2) format("woff2"),
        url(../../fonts//merriweather-v22-latin-regular.woff) format("woff"),
        url(../../fonts//merriweather-v22-latin-regular.ttf) format("truetype"),
        url(../../fonts//merriweather-v22-latin-regular.svg) format("svg");
        font-display: swap
    }
    
    @font-face {
        font-family: "Montserrat Medium";
        src: url(../../fonts//montserrat-v12-latin-500.woff2) format("woff2"),
        url(../../fonts//montserrat-v12-latin-500.woff) format("woff");
        font-display: swap
    }
    
    @font-face {
        font-family: "Montserrat SemiBold";
        src: url(../../fonts//montserrat-v12-latin-600.woff2) format("woff2"),
        url(../../fonts//montserrat-v12-latin-600.woff) format("woff");
        font-display: swap
    }

    html,
    body {
        scroll-behavior: smooth;
        @apply font-montserrat text-textColor;
    }

    a,
    button,
    .btn {
        @apply cursor-pointer duration-300 hover: text-textColor;
    }

    .below-header-index {
        z-index: 9997;
    }

    .header-index {
        z-index: 9998;
    }

    .above-header-index {
        z-index: 9999;
    }

    /* reseting styles from doit theme */
    #header-desktop {
        @apply h-20 border-b border-borderColor flex flex-col justify-center items-center hover: shadow-none;
    }

    @media only screen and (max-width: 680px) {
        #header-desktop {
            display: none;
        }
    }

    #header-desktop .header-wrapper.container {
        @apply flex items-center gap-4 justify-between px-4 lg: px-8;
    }

    #header-desktop .header-wrapper .header-title {
        @apply m-0 flex;
    }

    #header-desktop .header-wrapper .header-title .logo,
    #header-mobile .header-wrapper .header-title .logo {
        @apply object-contain object-left w-auto max-w-full h-auto max-h-14;
    }

    #header-desktop .header-wrapper .menu .menu-item.menuLink {
        @apply text-lg sm: text-base lg:border-b border-transparent font-semibold leading-tight tracking-wide hover:border-secondery inline-block hover:text-secondery lg:hover:text-textColor mx-2 md:mx-3.5;
        border-bottom-width: 3px;
    }

    .search-dropdown.desktop {
        @apply invisible container fixed top-36 left-2/4 transform -translate-x-2/4 -translate-y-16 duration-300 opacity-0;
    }

    .open+#search-dropdown-wrapper {
        @apply visible -translate-y-0 opacity-100;
    }

    .search-dropdown .dropdown-menu .search-footer {
        display: none !important;
    }

    .menu-item.search {
        @apply fixed top-20 max-w-full left-2/4 transform -translate-x-2/4 right-0 flex items-center justify-center h-0 duration-300 overflow-hidden;
    }

    #header-desktop.open .header-wrapper .menu .menu-item.search {
        @apply h-16;
    }

    #header-desktop .header-wrapper .menu .menu-item.search .algolia-autocomplete {
        @apply w-full duration-0;
    }

    #header-desktop .header-wrapper .menu .menu-item.search .algolia-autocomplete .input {
        @apply w-full pl-4 rounded-none duration-0;
    }

    #header-desktop .searchIcon.search-button.search-toggle,
    #header-desktop .search-button.search-clear,
    #header-desktop .search-button.search-loading {
        @apply absolute top-2/4 h-10 leading-10 transform -translate-y-2/4;
    }

    #header-desktop .header-wrapper .menu::before {
        content: '';
        @apply border-b border-borderColor fixed top-20 left-0 right-0 h-0 duration-300 shadow-md bg-boxBg;
    }

    #header-desktop.open .header-wrapper .menu::before {
        content: '';
        @apply h-16;
    }

    #header-mobile {
        @apply h-20;
    }

    @media only screen and (min-width: 681px) {
        #header-mobile {
            display: none;
        }
    }

    #header-mobile .header-container {
        @apply h-20;
    }

    #header-mobile .header-wrapper.container {
        @apply h-20 py-4;
    }

    #header-mobile.open .header-wrapper {
        @apply -mt-20
    }

    #header-mobile .header-container .menu .search-wrapper {
        @apply h-20 py-0 border-b border-borderColor mb-4;
    }

    #header-mobile .header-container .menu.active {
        @apply pt-0 min-h-screen;
    }

    #header-mobile .header-container .menu .menu-item {
        @apply text-left px-4 lg: px-8;
    }

    #header-mobile .header-container .menu .search input {
        @apply rounded-none;
    }

    .search-dropdown.mobile {
        @apply container mt-10 absolute;
    }

    .search-dropdown .dropdown-menu .search-footer {
        display: none !important;
    }

    #header-mobile .header-container .header-wrapper .menu-toggle {
        @apply h-8;
    }

    #header-mobile .header-container .header-wrapper .menu-toggle span:nth-child(1),
    #header-mobile .header-container .header-wrapper .menu-toggle span:nth-child(2),
    #header-mobile .header-container .header-wrapper .menu-toggle span:nth-child(3) {
        @apply my-1.5;
    }

    #header-mobile .header-container .header-wrapper .menu-toggle.active span:nth-child(1) {
        @apply transform rotate-45 -translate-x-0 translate-y-2
    }

    #header-mobile .header-container .header-wrapper .menu-toggle.active span:nth-child(3) {
        @apply transform -rotate-45 -translate-x-0 -translate-y-2
    }

    /* hompage styles */
    .lineBgBox {
        position: relative;
    }

    .lineBgBox:hover {
        transform: translate(3px, -3px);
    }

    .lineBgBox::after {
        z-index: 0;
        background-size: 6px 6px;
        background-position-y: bottom;
        background-image: linear-gradient(135deg, rgba(13, 13, 13, .5) 15.11%, rgba(255, 255, 255, 0) 15.11%, rgba(255, 255, 255, 0) 50%, rgba(13, 13, 13, .5) 50%, rgba(13, 13, 13, .5) 64.11%, rgba(255, 255, 255, 0) 64.11%, rgba(255, 255, 255, 0) 100%);
        transition: transform .3s;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -2;
        top: 0;
        left: 0;
    }

    .lineBgBox:hover::after {
        transform: translate(-10px, 10px);
    }

    .hoverUnderlineBox:hover .hoverUnderlineText {
        @apply underline decoration-secondery;
    }


    /* theme based styles */

    body[theme='dark'] #header-desktop .header-wrapper .menu .menu-item.menuLink,
    body[theme='black'] #header-desktop .header-wrapper .menu .menu-item.menuLink {
        @apply text-lightText hover: opacity-80;
    }

    #header-desktop .header-wrapper .menu .menu-item.menuLink.active {
        @apply border-secondery;
    }

    body[theme='dark'] .editorsAuthor,
    body[theme='black'] .editorsAuthor {
        @apply text-textColor;
    }

    [theme=black] .search-dropdown .dropdown-menu {
        @apply border-b border-l border-r border-borderColor;
    }

    [x-cloak] {
        display: none !important;
    }
}