.menu-backdrop { position: fixed; z-index: 40; inset: 0; background: rgb(10 14 18 / 72%); }
.menu-backdrop[hidden] { display: none; }
.offcanvas-menu { position: fixed; z-index: 41; top: 0; left: 0; display: flex; width: min(28rem, 85vw); height: 100vh; height: 100dvh; flex-direction: column; overflow: hidden; color: var(--dfm-menu-text); background: var(--dfm-menu); transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
.offcanvas-menu.is-open { transform: none; visibility: visible; }
.offcanvas-menu__head { position: relative; display: flex; min-height: 5.75rem; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--dfm-menu-divider); }
.offcanvas-logo { position: absolute; top: 50%; left: 50%; width: min(13rem, calc(100% - 5.5rem)); transform: translate(-50%, -50%); }
.offcanvas-logo img, .offcanvas-logo .custom-logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 3.75rem; margin-inline: auto; object-fit: contain; }
.offcanvas-menu__body { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; padding: 1.25rem 1rem; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.offcanvas-menu__footer { flex: 0 0 auto; margin-top: auto; padding: .5rem 1rem .75rem; border-top: 1px solid var(--dfm-menu-divider); }
.social-links--offcanvas { justify-content: center; }
.social-links--offcanvas a { color: var(--dfm-menu-text); }
.social-links--offcanvas a:hover { color: var(--dfm-menu-text); background: color-mix(in srgb, var(--dfm-accent) 18%, var(--dfm-menu)); }
.menu-close { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; place-items: center; padding: 0; border: 0; color: var(--dfm-menu-text); background: transparent; }
.offcanvas-menu__head .menu-close { position: relative; z-index: 1; margin-left: auto; }
.menu-close .material-symbols-outlined { font-size: 1.65rem; }
.offcanvas-menu__list, .site-menu-list { margin: 0; padding: 0; list-style: none; }
.offcanvas-menu__list a, .site-menu-list a { display: block; padding: .8rem .5rem; border-bottom: 1px solid var(--dfm-menu-divider); color: var(--dfm-menu-text); text-decoration: none; overflow-wrap: anywhere; }
.offcanvas-menu__list a:hover, .site-menu-list a:hover { color: var(--dfm-menu-text); background: color-mix(in srgb, var(--dfm-accent) 18%, var(--dfm-menu)); }
.offcanvas-menu__list .sub-menu { margin: 0; padding: 0 0 0 1rem; list-style: none; }
.offcanvas-menu__list .sub-menu a { padding-block: .65rem; }
body.menu-is-open { overflow: hidden; }
body.admin-bar .offcanvas-menu { top: 32px; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
@media (max-width: 782px) {
    body.admin-bar .offcanvas-menu { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); }
}
@media (max-width: 575.98px) {
    .offcanvas-menu { width: 50vw; }
    .offcanvas-menu__head,
    .offcanvas-menu__body,
    .offcanvas-menu__footer { padding-inline: .75rem; }
    .offcanvas-menu__head { min-height: 6.4rem; }
    .offcanvas-logo { top: auto; bottom: .55rem; width: calc(100% - 1.5rem); max-width: 11rem; transform: translateX(-50%); }
    .offcanvas-logo img, .offcanvas-logo .custom-logo { max-height: 2.4rem; }
    .offcanvas-menu__head .menu-close { position: absolute; top: .5rem; right: .75rem; }
    .social-links--offcanvas { width: 100%; flex-wrap: wrap; gap: .15rem; }
    .social-links--offcanvas li { flex: 0 0 auto; }
}