@import "tailwindcss";

@theme {
    --color-primary: #95C11F;
    --color-secondary: #414140;
    --color-tertiary: #F2F2F2;
}

@layer base {
    body {
        @apply
        text-[14px]
        xl:text-[16px];
    }
}

@layer components {
    /* BUTTONS */
    .btn-search {
        @apply
        ml-5
        block
        w-[20px]
        h-[20px]
        lg:w-[30px]
        lg:h-[30px]
        bg-[url(/src/assets/images/search.svg)]
        bg-no-repeat
        bg-center
        bg-contain;
        content: '';
    }

    .btn-hamburger {
        @apply
        ml-5
        text-white
        focus:outline-none
        lg:hidden
        cursor-pointer;
    }

    .btn-primary {
        @apply
        bg-primary
        hover:bg-white
        border-primary
        text-white
        hover:text-primary
        text-nowrap
        border-1
        px-5
        xl:px-7
        py-2
        xl:py-3
        rounded-full
        transition-colors
        cursor-pointer;
    }

    /* ICONS */
    .ico {
        @apply
        w-[30px]
        h-[30px]
        bg-no-repeat
        bg-center
        bg-contain
        inline-block
        opacity-30
        hover:opacity-80
        transition-opacity;
        content: '';
    }

    .ico-linkedin {
        @apply bg-[url(/src/assets/images/linkedin.svg)]
    }

    .ico-youtube {
        @apply bg-[url(/src/assets/images/youtube.svg)];
    }

    /* PAGE HEADER */
    .page-header {
        @apply
        bg-secondary
        px-4
        md:px-6
        py-5
        xl:py-8
        flex
        items-center
        justify-between
    }

    .page-header__right-col {
        @apply ml-4 flex items-center
    }

    .logo {
        @apply
        mr-4
        w-[200px]
        xl:w-auto;
    }

    /* PAGE FOOTER */
    .page-footer {
        @apply bg-secondary px-4 md:px-6 pt-20 pb-30 text-white;
    }

    .page-footer__top {
        @apply pb-10 mb-8 border-b-1 border-b-white;
    }

    .page-footer__cols {
        @apply flex justify-between flex-wrap lg:flex-nowrap;
    }

    .page-footer__col__title {
        @apply font-bold pb-2;
    }

    .page-footer__col__text {
        @apply font-light;
    }

    .page-footer__contact-information {
        @apply pr-10 font-light w-full sm:w-[50%] lg:w-auto mb-10 lg:mb-0;
    }

    .page-footer__menu {
        @apply pr-0 lg:pr-10 w-full sm:w-[50%] lg:w-auto mb-10 lg:mb-0;
    }

    .page-footer__menu ul li {
        @apply py-0.5 first:pt-0 last:pb-0;
    }

    .page-footer__menu ul li a {
        @apply hover:underline hover:underline-offset-2;
    }

    .page-footer__news {
        @apply pr-10 lg:max-w-[30%] w-full sm:w-[50%] lg:w-auto mb-10 sm:mb-0;
    }

    .page-footer__social-media {
        @apply w-full sm:w-[50%] lg:w-auto;
    }

    /* MAIN MENU */
    .main-menu {
        @apply list-none hidden lg:flex items-center md:mx-4;
    }

    .main-menu > li {
        @apply
        mx-2
        first:ml-0
        last:mr-0
        xl:mx-4;
    }

    .main-menu > li > a {
        @apply
        text-white
        font-bold
        text-nowrap
        hover:underline
        hover:underline-offset-4;
    }

    .main-menu > li.has-mega > a {
        @apply pl-[30px] relative block;
    }

    .main-menu > li.has-mega > a:before {
        @apply
        w-[15px]
        h-[15px]
        bg-[url(/src/assets/images/chevron-up.svg)]
        bg-no-repeat
        absolute
        left-0
        top-[50%]
        transform
        -translate-y-1/2
        rotate-180
        transition-all;
        content: '';
    }

    .main-menu > li.has-mega.open > a:before {
        @apply rotate-0;
    }

    .main-menu.mobile-menu--open {
        @apply
        fixed
        top-[79px]
        left-0
        ml-0
        z-100
        w-full
        h-full
        bg-white
        overflow-y-scroll
        block;
    }

    .main-menu.mobile-menu--open > li {
        @apply
        mx-0
        first:ml-0
        last:mr-0;
    }

    .main-menu.mobile-menu--open > li > a {
        @apply
        block
        py-1.5
        relative
        px-4
        border-b-1
        border-b-gray-300
        text-black;
    }

    .main-menu.mobile-menu--open > li.has-mega > a {
        @apply
        pr-[30px];
    }

    .main-menu.mobile-menu--open > li.has-mega > a:before {
        @apply
        left-auto
        right-2;
    }

    .sub-menu__back {
        @apply
        lg:hidden
        mb-10;
    }

    .sub-menu__back a {
        @apply
        text-primary
        cursor-pointer
        block
        font-bold
        hover:underline
        hover:underline-offset-2;
    }

    .sub-menu__back a svg {
        @apply
        inline-block
        mt-[-4px]
        w-[15px]
        h-[15px];
    }

    /* SOLUTIONS MENU */
    .solutions-menu {
        @apply
        bg-white
        fixed
        left-0
        w-full
        h-full
        z-100
        flex
        overflow-y-scroll
    }

    .solutions-menu__inner {
        @apply
        xl:flex
        xl:justify-between
        pt-10
        lg:pt-20
        pb-10;
    }

    .solutions-menu__left-col {
        @apply
        xl:min-w-[50%]
        xl:pr-5
        mb-10
        xl:mb-0;
    }

    .solutions-menu__right-col ul {
        @apply
        grid
        grid-cols-1
        sm:grid-cols-3
        gap-5
        sm:gap-7;
    }

    .solutions-menu__item img {
        @apply
        w-full
        h-[140px]
        object-cover
        object-center;
    }

    .solutions-menu__item__title {
        @apply
        block
        mt-2
        mb-1
        text-primary
        text-lg
        font-bold;
    }

    .solutions-menu__item__text {
        @apply
        font-light
        text-sm
    }

    /* PRODUCTS MENU */
    .products-menu {
        @apply
        bg-white
        fixed
        left-0
        w-full
        h-full
        z-100
        flex
        overflow-y-scroll
    }


    .products-menu__inner {
        @apply
        px-4
        pt-10
        lg:pt-20
        pb-10;
    }

    .products-menu__top-link {
        @apply
        pb-2
        mb-9
        border-b-gray-300
        border-b-1;
    }

    .products-menu__top-link a {
        @apply
        text-primary
        block
        font-bold
        hover:underline
        hover:underline-offset-2;
    }

    .products-menu__top-link a svg {
        @apply
        inline-block
        mt-[-4px]
        w-[15px]
        h-[15px];
    }

    .products-menu .products-block__item {
        @apply p-0;
    }

    .products-menu .products-block__list {
        @apply mx-0;
    }


    /* SLIDER */
    .slider {
        @apply
        relative
        w-full
        min-h-[50vh]
        flex
        items-center
        justify-center
        text-white
        overflow-hidden;
    }

    .slider__text {
        @apply
        mt-15
        mb-15
        relative
        z-30
        text-center
        bg-white
        w-[75vw]
        xl:w-[50vw]
        py-10
        xl:py-20
        px-10
        xl:px-20;
    }

    /* PRODUCTS BLOCK */
    .products-block {
        @apply
        bg-[url(/src/assets/images/products-block-bg.jpg)]
        bg-no-repeat
        bg-center
        bg-cover
        bg-fixed
        py-14;
    }

    .products-block__list {
        @apply
        grid
        grid-cols-1
        lg:grid-cols-3
        gap-5
        xl:gap-10
        2xl:gap-20
        mx-5
        lg:mx-0;
    }

    .products-block__item {
        @apply bg-white p-3 transition-all;
    }

    .products-block__item img {
        @apply w-full h-64 object-cover object-center;
    }

    .products-block__item__title {
        @apply
        block
        mb-2
        mt-4
        text-2xl
        font-bold
        text-primary;
    }

    .products-block__item__description {
        @apply
        block
        mb-5
        text-base
        font-light
        text-secondary;
    }

    .products-block__menu li a {
        @apply
        block
        py-[0.4rem]
        relative
        pr-[30px]
        border-t-1
        border-t-gray-300
        text-base
        text-primary
        font-bold
        hover:underline
        hover:underline-offset-2;
    }

    .products-block__menu li a:after {
        @apply
        absolute
        right-0
        top-[50%]
        transform
        -translate-y-1/2
        w-[15px]
        h-[15px]
        bg-[url(/src/assets/images/chevron-right.svg)]
        bg-no-repeat;
        content: '';
    }

    /* TEXT & IMAGE BLOCK */
    .text-image-block {
        @apply
        bg-white
        sm:flex
        sm:items-stretch
        sm:justify-between;
    }

    .text-image-block__image {
        @apply sm:w-[50%];
    }

    .text-image-block__image img {
        @apply
        w-full
        h-full
        object-cover
        object-center;
    }

    .text-image-block__text {
        @apply sm:w-[50%] p-7 lg:p-14;
    }

    .text-image-block__text__inner {
        @apply
        flex
        flex-col
        justify-center
        h-full;
    }

    .text-image-block__title {
        @apply
        mb-4
        text-2xl
        lg:text-4xl
        font-normal
        text-primary;
    }

    .text-image-block__description {
        @apply mb-8 text-base lg:text-xl font-light;
    }

    .text-image-block.text-image-block--image-right .text-image-block__image {
        @apply sm:order-2;
    }

    .text-image-block.text-image-block--image-right .text-image-block__text {
        @apply sm:order-1;
    }

    /* SEARCH MODAL */
    .search-modal {
        @apply
        fixed
        inset-0
        z-50
        flex
        items-center
        justify-center
        bg-black/75;
    }

    .search-modal__close {
        @apply
        absolute
        right-5
        md:right-15
        top-5
        md:top-15
        w-[30px]
        h-[30px]
        bg-[url(/src/assets/images/close.svg)]
        bg-no-repeat
        bg-center
    }

    .search-modal__container {

    }

    .search-modal__form {
        @apply
        bg-white
        rounded-full
        flex
        justify-center
        items-center;
    }

    .search-modal__form input[type="text"] {
        @apply
        md:w-[500px]
        rounded-full
        py-4
        px-5
        hover:outline-none
        focus:outline-none
        active:outline-none;
    }

    .search-modal__form .btn-primary {
        @apply
        py-4
        md:px-8;
    }

    /* PAGE INTRO */
    .page-intro {
        @apply relative;
    }

    .page-intro img {
        @apply
        w-full
        h-[35vh]
        min-h-[300px]
        object-cover
        object-center;
    }

    .page-intro__inner {
        @apply
        flex
        flex-col
        justify-center
        h-full
        right-0
        left-0
        text-center
        absolute
        top-0
        z-50;
    }

    .page-intro__title {
        @apply
        text-4xl
        lg:text-5xl
        xl:text-6xl
        text-white;
        text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.6);
    }

    /* PAGE INFO */
    .page-info {
        @apply
        bg-secondary
        py-5
        text-xl
        lg:text-2xl
        font-light
        text-primary;
    }

    /* PRODUCT LIST */
    .product-list {
        @apply
        bg-[url(/src/assets/images/products-block-bg.jpg)]
        bg-no-repeat
        bg-center
        bg-cover
        bg-fixed;
    }

    .product-list__inner {
        @apply
        py-10
        grid
        grid-cols-1
        sm:grid-cols-2
        lg:grid-cols-3
        gap-5
        xl:gap-10;
    }

    .product-list__item {
        @apply
        bg-white
        rounded-2xl
    }

    .product-list__item img {
        @apply
        rounded-t-2xl
        w-full
        h-[200px]
        object-cover
        object-center;
    }

    .product-list__item__content {
        @apply
        px-5
        pt-7
        pb-10;
    }

    .product-list__item__title {
        @apply
        block
        mb-2
        text-2xl
        font-bold
        text-primary;
    }

    .product-list__item__secription {
        @apply
        block
        mb-7
        text-base
        font-light
        text-secondary;
    }

    .product-list__pagination {
        @apply flex justify-center pb-10;
    }

    .product-list__pagination li {
        @apply mx-2;
    }

    .product-list__pagination li a {
        @apply
        flex
        flex-col
        items-center
        justify-center
        text-white
        hover:text-primary
        bg-primary
        hover:bg-white
        w-[40px]
        h-[40px]
        border-1
        rounded-md
        border-primary
        transition-colors;
    }

    /* PRODUCT DETAIL */
    .product-detail {
        @apply
        flex
        flex-wrap
        sm:flex-nowrap;
    }

    .product-detail__right-col {
        @apply
        px-5
        md:px-10
        order-1
        sm:order-2;
    }

    .product-detail__title {
        @apply
        text-2xl
        md:text-3xl
        font-bold
        text-primary;
    }

    .product-detail__left-col {
        @apply
        bg-secondary
        order-2
        sm:order-1
        sm:min-w-[275px]
        lg:min-w-[375px];
    }

    .product-detail__left-col hr {
        @apply text-white mr-2;
    }

    .product-detail__gallery {
        @apply
        grid
        grid-cols-2
        sm:grid-cols-1
        p-3
        sm:p-5
        gap-3
        sm:gap-5;
    }

    .product-detail__left-col img {
        @apply
        w-full
    }

    /* TEXT CONTENT */
    .text-content {
        @apply
        py-8
    }

    .text-content h1 {
        @apply
        text-2xl
        md:text-3xl
        font-bold
        mb-4
        text-primary;
    }

    .text-content h2 {
        @apply
        text-xl
        md:text-2xl
        font-bold
        mb-4
        mt-5
        text-primary;
    }

    .text-content h3 {
        @apply text-lg md:text-xl font-bold mb-4 mt-5 text-primary;
    }

    .text-content h4 {
        @apply text-base md:text-lg font-bold mb-4 mt-5 text-primary;
    }

    .text-content h5 {
        @apply text-base md:text-base font-bold mb-4 mt-5 text-primary;
    }

    .text-content p {
        @apply text-base font-light mb-4;
    }

    .text-content strong {
        @apply font-bold;
    }

    .text-content a {
        @apply text-primary hover:underline hover:underline-offset-2;
    }

    .text-content ul {
        @apply mb-4;
    }

    .text-content ul li {
        @apply
        relative
        text-base
        font-light
        pl-[20px]
        mb-2;
    }

    .text-content ul li:before {
        @apply
        absolute
        left-0
        top-[12px]
        transform
        -translate-y-1/2
        w-[8px]
        h-[8px]
        bg-primary
        rounded-full;
        content: '';
    }

    .text-content ol {
        @apply mb-4 list-decimal pl-[20px];
    }

    .text-content ol li {
        @apply
        relative
        text-base
        font-light
        mb-2;
    }

    .text-content table {
        @apply
        w-full
        border-collapse
        border-2
        border-primary;
    }

    .text-content table tr th {
        @apply
        px-2
        py-2
        border-1
        border-secondary;
    }

    .text-content table tr td {
        @apply
        px-2
        py-2
        border-1
        border-secondary;
    }
}