@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

:root {
    --hover-brand-pink: #ff6e95;
    --brand-pink: #f0537d;
    --brand-yellow: #f7c645;
    --brand-blue: #314cd7;
    --hover-brand-navy: #2e3166;
    --brand-navy: #12143d;

    --underline-color: var(--hover-brand-navy);
}

@layer components {
    .content a {
        @apply hover-underline-animation transition duration-300 hover:text-hover-brand-navy;
    }
}

@layer utilities {
    .hover-underline-animation {
        @apply relative inline-block;
    }

    .hover-underline-animation::after {
        @apply absolute bottom-0 left-0 h-[2px] w-full origin-left scale-x-0 transition-all duration-200 ease-in-out content-[''];
        /* allows customisation by overriding --underline-color style inline */
        background-color: var(--underline-color);
    }

    .hover-underline-animation:hover::after {
        @apply scale-x-100;
    }

    .hover-underline-animation:hover::after {
        @apply scale-x-100;
    }

    .bg-cta-mobile {
        background-image: url("/public/images/background/cta/background_mobile.svg");
    }

    .bg-cta-desktop {
        background-image: url("/public/images/background/cta/background_desktop.svg");
    }

    .bg-menu-mobile {
        background-image: url("/public/images/background/menu/background_mobile.svg");
    }

    .bg-menu-desktop {
        background-image: url("/public/images/background/menu/background_desktop.svg");
    }

    .bg-team-mobile {
        background-image: url("/public/images/background/team/background_mobile.svg");
    }

    .bg-team-desktop {
        background-image: url("/public/images/background/team/background_desktop.svg");
    }

    .list-letter-params li::marker {
        content: "(" counter(list-item, lower-alpha) ") ";
    }
    .bg-work-mobile {
        background-image: url("/public/images/background/work/background_mobile.svg");
    }

    .bg-work-desktop {
        background-image: url("/public/images/background/work/background_desktop.svg");
    }
}

html {
    font-size: 100%;
}

body {
    font-size: 1.125rem;
}

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

.bg-home {
    background-image: url("/public/images/background/home/background.svg");
}

.bg-team-member {
    background-image: url("/public/images/background/team/background_member.svg");
}

.content.text-content a {
    color: var(--brand-pink);
    --underline-color: var(--hover-brand-pink);
}

.content.text-content a:hover {
    color: var(--hover-brand-pink);
}

.content.text-content p {
    margin-bottom: 1rem;
}

.content.text-content h1 {
    font-weight: 800;
    font-size: 2.25rem;
    margin: 3rem 0 1.5rem;
}

.content.text-content h2 {
    font-weight: 800;
    font-size: 1.625rem;
    margin: 3rem 0 1.5rem;
}

.content.text-content h3 {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 3rem 0 1.5rem;
}

.content.text-content h4 {
    font-weight: 500;
    font-size: 1.25rem;
    margin: 3rem 0 1.5rem;
}

.content.text-content ul {
    list-style-type: disc;
}

.content.text-content li {
    margin-left: 2rem;
}

.content.text-content li:last-child {
    margin-bottom: 1rem;
}

#privacy-policy-content.content.text-content li {
    margin-left: unset;
}

#privacy-policy-content.content.text-content li:last-child {
    margin-bottom: unset;
}

#project-categories li {
    @apply rounded-full text-lg border border-brand-pink text-brand-pink mr-4 flex items-center mb-5;
} 

#project-categories .active {
    @apply text-white bg-brand-pink;
}
#project-categories a{
    @apply flex-1 px-5 py-1.5;
}


#our-work .work-details a{
    @apply text-brand-pink underline;
}
#our-work .work-details a:hover{
    @apply text-hover-brand-pink;
}