/* Shared menu feedback and dropdown panels. */
.site-header #mainmenu a {
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.site-header #mainmenu a:focus-visible {
    outline: 2px solid #ffad79;
    outline-offset: 3px;
}
@media (min-width: 994px) {
    .site-header #mainmenu > li > ul {
        top: calc(100% + 6px);
        left: -16px;
        width: 270px;
        max-width: calc(100vw - 32px);
        height: auto;
        padding: 10px;
        border: 1px solid #ffffffd9;
        border-radius: 20px;
        background: linear-gradient(145deg, #fffffff7, #f6f8fcf7);
        box-shadow: 0 18px 50px #10203324, 0 2px 6px #10203308, inset 0 1px 0 #fff;
        transform: translateY(8px) scale(.98);
        transform-origin: top left;
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .site-header #mainmenu > li > ul::before {
        content: '';
        position: absolute;
        inset: -14px 0 auto;
        height: 14px;
    }
    .site-header #mainmenu > li > ul::after {
        content: '';
        position: absolute;
        top: -5px;
        left: 30px;
        width: 10px;
        height: 10px;
        border-radius: 2px 0 0;
        background: #fff;
        transform: rotate(45deg);
    }
    .site-header #mainmenu > li:is(:hover, :focus-within) > ul { transform: translateY(0) scale(1); }
    .site-header #mainmenu li li { margin: 0; padding: 0; }
    .site-header #mainmenu li li + li { margin-top: 3px; }
    .site-header #mainmenu li li a {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 48px;
        padding: 8px 32px 8px 9px;
        border: 0;
        border-radius: 12px;
        color: #35465c;
        font-size: 12px;
        font-weight: 550;
        line-height: 1.5;
    }
    .site-header #mainmenu .dropdown-menu-icon {
        display: inline-grid;
        place-items: center;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border: 1px solid #e5eaf1;
        border-radius: 10px;
        background: #edf1f6;
        color: #61748b;
        font-size: 13px;
        transition: background-color .2s, border-color .2s, color .2s;
    }
    .site-header #mainmenu > li > a { isolation: isolate; }
    .site-header #mainmenu > li > a::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: 16px -10px;
        border-radius: 9px;
        background: rgba(255, 255, 255, .09);
        opacity: 0;
        transition: opacity .22s ease;
        pointer-events: none;
    }
    .site-header #mainmenu > li > a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 6px;
        bottom: 17px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, #f85c00, #ffb380);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease;
        pointer-events: none;
    }
    .site-header #mainmenu > li:is(:hover, :focus-within) > a { color: #ffd1b3; }
    .site-header #mainmenu > li:is(:hover, :focus-within) > a::before { opacity: 1; }
    .site-header #mainmenu > li:is(:hover, :focus-within) > a::after { transform: scaleX(1); }
    .site-header #mainmenu li:focus-within > ul { visibility: visible; opacity: 1; }
    .site-header #mainmenu li li a { padding-right: 30px; }
    .site-header #mainmenu li li a::after {
        content: '\2197';
        position: absolute;
        right: 12px;
        top: 50%;
        color: #b53d09;
        font-size: 16px;
        opacity: 0;
        transform: translate(-4px, -50%);
        transition: opacity .2s ease, transform .2s ease;
    }
    .site-header #mainmenu li li:is(:hover, :focus-within) > a {
        background: #fff0e5;
        color: #9f3508;
        box-shadow: inset 0 0 0 1px #f6dcc9;
    }
    .site-header #mainmenu li li:is(:hover, :focus-within) .dropdown-menu-icon { color: #b3420f; background: #ffe4cf; border-color: #f0c5a5; }
    .site-header #mainmenu li li:is(:hover, :focus-within) > a::after {
        opacity: 1;
        transform: translate(0, -50%);
    }
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    @media (min-width: 994px) {
        .site-header #mainmenu > li > ul { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
    }
}
@media (max-width: 993px) {
    .site-header #mainmenu .dropdown-menu-icon { display: inline-block; width: 24px; margin-right: 8px; color: #9a5b36; text-align: center; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header #mainmenu a,
    .site-header #mainmenu a::before,
    .site-header #mainmenu a::after,
    .site-header #mainmenu > li > ul,
    .site-header #mainmenu .dropdown-menu-icon { transition: none; }
}