/**handles:menu**/
@layer utilities {
    .hide-nav .js-header-float {
        @apply -translate-y-full;
    }

    #wpadminbar ~ .js-header-float {
        @apply sm:!top-8;
    }

    .menu-on .line1 {
        @apply rotate-45 translate-y-2;
    }

    .menu-on .line2 {
        @apply opacity-0;
    }

    .menu-on .line3 {
        @apply mt-0 -rotate-45 -translate-y-[0.3125rem];
    }

    .menu-on .overlay {
        @apply translate-x-0 pointer-events-auto;
    }

    #search-toggle svg,
    .enter-icon svg {
        @apply size-full;
    }

    .js-menu-bar.dropdown-open {
        @apply bg-light text-dark shadow-sm;
    }

    .js-menu-bar.dropdown-open .logo-light,
    .menu-on .logo-light {
        @apply hidden;
    }
    
    .js-menu-bar.dropdown-open .logo-dark,
        .menu-on .logo-dark {
        @apply inline-flex;
    }

    .js-menu-bar.dropdown-open .btn-primary.light {
        @apply bg-dark text-light border-dark after:bg-light;
    }
    
    .js-menu-bar.dropdown-open .btn-primary.light:hover {
        @apply bg-light text-textcolor after:bg-textcolor;
    }

    .js-menu-bar.dropdown-open .btn-external.light {
        @apply text-accent [&_path]:stroke-accent;
    }
}

@layer components {
    .logo-img svg {
        @apply h-full w-auto;
    }

    .nav-toggle-icon {
        @apply relative flex h-2 w-2 shrink-0 items-center justify-center;
    }

    .nav-toggle-icon-bar {
        @apply absolute bg-current custom-transition;
    }

    .nav-toggle-icon-bar--v {
        @apply h-[0.5625rem] w-px;
    }

    .nav-toggle-icon-bar--h {
        @apply h-px w-[0.5625rem];
    }

    .js-nav-toggle[aria-expanded='true'] .nav-toggle-icon-bar--v {
        @apply scale-y-0;
    }

    .js-nav-item > span > a {
        @apply relative after:content-[''] after:absolute after:w-[250%] after:h-0 hover:after:h-[250%] after:-translate-x-1/2 after:left-1/2 after:bottom-0 after:translate-y-full
    }

    .js-nav-panel {
        @apply invisible opacity-0 pointer-events-none custom-transition;
    }

    .js-nav-item.js-open .js-nav-panel {
        @apply visible opacity-100 pointer-events-auto;
    }

    .js-nav-panel--dropdown {
        @apply absolute left-1/2 -translate-x-1/2 top-full mt-3 min-w-48 -translate-y-2 rounded-radius-sm border border-accent/10 bg-light p-5 shadow-sm;
    }

    .js-nav-panel--dropdown a {
        @apply text-dark;
    }

    .js-nav-item.js-open .js-nav-panel--dropdown {
        @apply translate-y-0;
    }

    .js-nav-panel--mega {
        @apply -translate-y-2;
    }

    .js-nav-item.js-open .js-nav-panel--mega {
        @apply translate-y-0;
    }

    .js-nav-panel--mobile {
        @apply visible h-0 translate-y-0 overflow-hidden opacity-100 pointer-events-none;
    }

    .js-nav-item.js-open .js-nav-panel--mobile {
        @apply h-auto pointer-events-auto pt-4 pb-6;
    }
    .js-nav-item--dropdown {
        @apply relative
    }

    .menu-mobile > li > a,
    .menu-mobile > li > button {
        @apply py-3 w-full inline-flex;
    }

    .menu-mobile a,
    .menu-mobile button {
        @apply custom-transition hover:text-secondary;
    }

    /**
     * A menu item with the admin-set "desktop-hidden" CSS class (Appearance >
     * Menus > Screen Options > CSS Classes) never shows on desktop. This
     * covers a plain dropdown child; a mega menu child with this class is
     * handled in PHP instead (see render_plain_mega_item() in
     * class-nav-walker.php), since it also needs to swap from a card to a
     * plain link on mobile, not just hide on desktop.
     */
    .js-nav-panel .desktop-hidden {
        @apply lg:hidden;
    }

    /**
     * Mega menu cards all share the same plain style by default; the
     * "photo" look in the maquette is a hover state, not a distinct card —
     * the background image (when set) and the light-on-dark text treatment
     * fade in together on hover.
     */
    .mega-card-image {
        @apply opacity-0 custom-transition;
    }

    .mega-card:hover .mega-card-image {
        @apply opacity-100;
    }

    .mega-card:hover .mega-card-tag {
        @apply border-transparent bg-light/50 text-light;
    }

    .mega-card:hover .mega-card-title,
    .mega-card:hover .mega-card-description {
        @apply text-light;
    }

    .mega-card:hover .btn-primary {
        @apply border-light bg-light text-textcolor after:bg-textcolor;
    }

    .mega-card:hover .btn-primary:hover {
        @apply bg-accent text-light after:bg-light;
    }
}