/* Matcha mobile navigation; desktop navigation retains its existing layout. */
@media (max-width: 1199px) {
  body.mobile-nav-active { overflow: hidden; }
  body.mobile-nav-active #header.header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    z-index: 10000;
  }
  body.mobile-nav-active #navmenu.navmenu {
    position: fixed !important;
    inset: 0 !important;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    background: rgba(8, 17, 10, .94) !important;
    z-index: 10001;
  }
  body.mobile-nav-active #navmenu.navmenu > ul {
    display: block !important;
    position: fixed !important;
    inset: 84px 16px auto !important;
    width: auto;
    max-width: 460px;
    max-height: calc(100vh - 108px);
    max-height: calc(100dvh - 108px);
    margin: 0 auto !important;
    padding: 20px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    background: linear-gradient(145deg, #243721, #152313) !important;
    border: 1px solid #4b6340 !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .4) !important;
  }
  body.mobile-nav-active #navmenu.navmenu > ul::before {
    content: 'MySIPMa / MENU';
    display: block;
    padding: 4px 12px 20px;
    color: #bbcea7;
    font: 600 12px/1.5 system-ui, sans-serif;
    letter-spacing: .16em;
  }
  body.mobile-nav-active #navmenu.navmenu > ul > li { margin: 5px 0; }
  body.mobile-nav-active #navmenu.navmenu ul li a,
  body.mobile-nav-active #navmenu.navmenu ul li a:focus {
    min-height: 52px;
    padding: 14px 16px !important;
    border: 1px solid transparent;
    border-radius: 14px !important;
    color: #eef3e6 !important;
    -webkit-text-fill-color: #eef3e6 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    background: transparent !important;
    text-decoration: none;
  }
  body.mobile-nav-active #navmenu.navmenu ul li a::after { display: none !important; }
  body.mobile-nav-active #navmenu.navmenu ul li a:hover {
    background: #30462a !important;
    color: #e0efc7 !important;
    -webkit-text-fill-color: #e0efc7 !important;
  }
  body.mobile-nav-active #navmenu.navmenu ul li a.active,
  body.mobile-nav-active #navmenu.navmenu ul li a.active:focus {
    background: #c5d8a5 !important;
    color: #203719 !important;
    -webkit-text-fill-color: #203719 !important;
    border-color: #d4e4bb;
    font-weight: 700 !important;
    box-shadow: inset 4px 0 #7b9a53;
  }
  body.mobile-nav-active #navmenu.navmenu ul li a.text-danger {
    margin-top: 16px;
    color: #f0b5a8 !important;
    -webkit-text-fill-color: #f0b5a8 !important;
    border-color: #735046;
    background: #392a23 !important;
  }
  body.mobile-nav-active #navmenu.navmenu ul li a.text-danger:hover {
    background: #50372e !important;
  }
  body.mobile-nav-active #navmenu .mobile-nav-toggle {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0;
    border: 1px solid #536b43;
    border-radius: 50%;
    background: #243721;
    z-index: 10003;
  }
  body.mobile-nav-active #navmenu .mobile-nav-toggle::before {
    color: #e0efc7 !important;
    font-size: 26px;
  }
  body.mobile-nav-active #navmenu.navmenu a:focus-visible,
  body.mobile-nav-active #navmenu .mobile-nav-toggle:focus-visible {
    outline: 2px solid #d4e4bb;
    outline-offset: 3px;
  }
}
/* Light matcha palette follows the application's existing theme switch. */
@media (max-width: 1199px) {
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu {
    background: rgba(231, 238, 220, .96) !important;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu > ul {
    background: linear-gradient(145deg, #fffef8, #f1f5e8) !important;
    border-color: #c4d2b3 !important;
    box-shadow: 0 24px 70px rgba(53, 75, 37, .16) !important;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu > ul::before {
    color: #62754e;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu ul li a,
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu ul li a:focus {
    color: #34452b !important;
    -webkit-text-fill-color: #34452b !important;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu ul li a:hover {
    background: #e6eed9 !important;
    color: #293e20 !important;
    -webkit-text-fill-color: #293e20 !important;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu ul li a.active,
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu ul li a.active:focus {
    background: #d5e4bb !important;
    color: #28421b !important;
    -webkit-text-fill-color: #28421b !important;
    border-color: #b1c78d;
    box-shadow: inset 4px 0 #718e4e;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu ul li a.text-danger {
    color: #963f30 !important;
    -webkit-text-fill-color: #963f30 !important;
    border-color: #e3c3b8;
    background: #fbefe8 !important;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu ul li a.text-danger:hover {
    background: #f4dfd5 !important;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu .mobile-nav-toggle {
    background: #f9fbf2;
    border-color: #b8cba0;
    box-shadow: 0 4px 14px rgba(53, 75, 37, .1);
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu .mobile-nav-toggle::before {
    color: #3d562b !important;
  }
  [data-bs-theme="light"] body.mobile-nav-active #navmenu.navmenu a:focus-visible,
  [data-bs-theme="light"] body.mobile-nav-active #navmenu .mobile-nav-toggle:focus-visible {
    outline-color: #597937;
  }
}