/* Mobile hamburger menu: readability fix (parent theme: black panel + black links).
   White panel, dark links, hover in brand purple; same breakpoint as parent. */
@media screen and (max-width: 1199px) {
    .sidenav {
        background: #ffffff !important;
        box-shadow: 2px 0 14px rgba(0, 0, 0, 0.18);
    }
    .sidenav .menu > li > a,
    #site-navigation .menu ul li a {
        color: #333333 !important;
    }
    .sidenav .menu > li > a:hover,
    #site-navigation .menu ul li a:hover {
        color: var(--first-color) !important;
    }
    .sidenav .closebtn {
        background: var(--first-color) !important;
        color: #ffffff !important;
    }
    /* Parent theme leaves #site-navigation as a flex box (align-items:center),
       so the menu list was vertically centered on the full-screen panel.
       Reset to block => menu starts from the top, below the X button. */
    #mySidenav #site-navigation {
        display: block;
        height: auto;
    }
    .sidenav .menu {
        margin-top: 70px !important;
        padding: 0 14px 14px 14px;
    }
}