@layer components {
    .page-head {
        @apply sticky top-0 z-50 border-b border-base-300 bg-base-100 text-neutral;
    }

    .page-head > .container,
    .page-head .container {
        @apply mx-auto flex w-full max-w-[1170px] items-center justify-between gap-6 px-4 py-5 md:px-8;
    }

    .page-logo {
        @apply inline-flex items-center gap-3;
    }

    .page-logo-image {
        @apply h-12 w-auto rounded-lg border-0 border-base-300 bg-base-100 p-2;
    }

    .page-nav-container {
        @apply flex flex-1 items-center justify-end gap-4;
    }

    .page-nav-toggle {
        @apply inline-flex h-12 w-12 flex-col items-center justify-center rounded-xl border border-base-300 bg-base-100 text-neutral lg:hidden;
    }

    .page-nav-toggle .bar {
        @apply my-0.5 block h-0.5 w-5 rounded-full bg-current;
    }

    .page-nav {
        @apply hidden w-full lg:block lg:w-auto;
    }

    .page-nav.is-open {
        @apply absolute left-4 right-4 top-[88px] z-50 block rounded-2xl border border-base-300 bg-base-100 p-4 shadow-2xl lg:static lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none;
    }

    .page-nav > ul {
        @apply flex flex-col gap-2 lg:flex-row lg:items-center lg:gap-10;
    }

    .page-nav-item > a,
    .page-nav-item .dropdown-toggle {
        @apply inline-flex items-center gap-2 bg-transparent px-0 py-2 text-[1.06rem] font-semibold tracking-normal text-base-content transition-colors duration-200 hover:bg-transparent hover:text-primary;
    }

    .page-nav-item .dropdown-toggle {
        @apply border-0 bg-transparent;
    }

    .page-nav-item .dropdown-toggle .caret {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-1px);
        transform-origin: center;
        margin-left: 0.25rem;
    }

    .page-nav-item .fa-chevron-down {
        @apply text-[0.65rem] transition-transform duration-200;
    }

    .page-nav-item--has-dropdown {
        @apply relative;
    }

    .page-nav-item--active > a {
        @apply bg-transparent text-primary;
    }

    .page-nav-item--active > .dropdown-toggle,
    .page-nav-item--has-dropdown.open > .dropdown-toggle {
        @apply bg-transparent text-primary;
    }

    .page-nav-item--has-dropdown.open .dropdown-toggle .caret {
        transform: rotate(-135deg) translateY(-1px);
    }

    .page-nav-item--has-dropdown.open .fa-chevron-down {
        @apply rotate-180 text-primary;
    }

    .page-nav-dropdown {
        @apply mt-3 hidden min-w-[14rem] overflow-hidden rounded-xl border border-base-300 bg-base-100 py-2 shadow-lg lg:absolute lg:right-0 lg:z-[1];
    }

    .page-nav-item--has-dropdown.open > .page-nav-dropdown {
        @apply block;
    }

    @media (max-width: 1023px) {
        .page-nav-item,
        .page-nav-item > a,
        .page-nav-item .dropdown-toggle {
            @apply w-full;
        }

        .page-nav-item > a,
        .page-nav-item .dropdown-toggle {
            @apply justify-between;
        }

        .page-nav-item--has-dropdown {
            @apply static;
        }

        .page-nav-item--has-dropdown.open > .page-nav-dropdown {
            @apply static mt-1 min-w-0 rounded-xl border-base-200 shadow-none;
        }
    }

    .page-nav-dropdown a {
        @apply block border-b-0 px-4 py-2.5 text-base font-medium text-base-content transition-colors duration-200 hover:bg-base-200 hover:text-primary;
    }

    .page-nav-dropdown li:last-child a {
        @apply border-b-0;
    }

    .page-nav-dropdown li.active a {
        @apply bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary;
    }

    .page-banner {
        @apply relative overflow-hidden bg-slate-900;
    }

    .page-banner-bg {
        background-size: cover;
        background-image: url('@theme-images/banner.jpg');
        background-position: center;
        width: 100%;
        height: 340px;
        background-repeat: no-repeat;
    }

    .page-banner-image {
        @apply h-[360px] w-full object-cover;
    }

    .page-heading {
        @apply border-b border-base-300 bg-primary text-primary-content;
    }

    .page-heading .container {
        @apply mx-auto w-full max-w-[1170px] px-4 py-6 md:px-8;
        h1, h2, h3, h4, h5, h6 {
            @apply text-primary-content;
        }
    }

    .page-title {
        @apply text-2xl font-semibold md:text-3xl;
    }

    .page-content,
    .white {
        @apply bg-transparent;
    }
}
