@import "./components/fonts.css";

@import 'tailwindcss';
@import "./components/variables.css";
@import "./components/link.css";
@import "./components/container.css";
@import "./components/title.css";
@import "./components/card.css";
@import "./components/image.css";
@import "./components/list.css";
@import "./components/buttons.css";
@import "./components/badge.css";
@import "./components/menu.css";

@plugin "@iconify/tailwind4";
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --color-black: #0C0C0C;
    --color-dark: #464646;
    --color-primary: #004E41;
    --color-secondary: #E5E5E5;
    --color-secondary-dark: #D9D9D9;
    --color-white: #fff;
    --color-light: #F7F6F2;
    --color-light-dark: #F2EEE6;
    --tw-font-weight: 600;
}

@layer components {
    .triptych-card {
        @apply rounded-xl shadow-lg overflow-hidden;
    }
}

@layer utilities {
    @media (max-width: 740px) {
        .triptych-mobile > * {
            @apply static w-full h-auto transform-none mb-4;
        }
        .triptych-mobile img {
            aspect-ratio: 16/9;
        }
    }
}

html, body {
    width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    @apply font-body bg-light;
    color: var(--color-dark);
}

.page-content {
    @apply flex flex-col gap-12 sm:gap-20 md:gap-30 lg:gap-40 my-10 md:my-15 lg:my-20;

    > section {
        @media(max-width: 767px) {
            @apply pb-10;
            border-bottom: 10px solid var(--color-light-dark);

            &:last-child, &.no-border {
                @apply pb-0;
                border-bottom: none;
            }
        }
    }
}

nav ul li {
    font-weight: 500;
}

.logo-brand {
    max-height: 30px;
}

@utility underline {
    border-bottom: 1px solid;
    text-decoration: none !important;
}

@utility font-regular {
    font-weight: 400;
}

footer ul li a {
    @apply font-inter font-regular;
    font-size: 14px;
}

footer p {
    font-size: 18px;
}

header {
    nav {
        transition: 200ms ease-in-out;
    }
}

.header-sticky {
    @apply shadow-md bg-light-dark transition-all duration-300 ease-in-out;

    nav {
        @apply border-none py-2;
    }
}

.st-list {
    .st-list-item {

        h1 {
            transition: 300ms ease-in-out;
        }

        .number {
            @apply text-black opacity-25;
        }

        &.active, &:hover {
            h1 {
                @apply pl-2;
            }
        }

        &.active {
            .number {
                @apply opacity-100;
            }
        }
    }
}

.separator {
    @apply my-5 mx-auto;

    width: 50%;
    border: 2px solid var(--color-primary);
}