/* Menu in the top bar: pure HTML <details>, nav.js only closes it after a tap */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(31,170,89,.22); background: rgba(31,170,89,.08); -webkit-tap-highlight-color: transparent; }
.menu summary::-webkit-details-marker { display: none; }
.menu .bars, .menu .bars::before, .menu .bars::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: #e8f2ec; transition: transform .2s ease, background .2s ease; }
.menu .bars { position: relative; }
.menu .bars::before, .menu .bars::after { content: ''; position: absolute; left: 0; }
.menu .bars::before { top: -6px; }
.menu .bars::after { top: 6px; }
.menu[open] .bars { background: transparent; }
.menu[open] .bars::before { top: 0; transform: rotate(45deg); }
.menu[open] .bars::after { top: 0; transform: rotate(-45deg); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(310px, calc(100vw - 44px)); max-height: calc(100vh - 100px); overflow-y: auto; padding: 8px; border-radius: 18px; background: #07130f; border: 1px solid rgba(31,170,89,.3); box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(31,170,89,.12); }
.menu-panel a { display: block; padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: .92rem; line-height: 1.4; color: #d7f5e3; }
.menu-panel a:hover, .menu-panel a:focus { background: rgba(31,170,89,.14); color: #fff; }
.menu-panel .sub-a { padding-left: 26px; font-weight: 500; font-size: .88rem; color: #b9cdc4; }
.menu-h { display: block; padding: 12px 14px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1FAA59; }
.menu-sep { height: 1px; margin: 6px 8px; background: rgba(31,170,89,.2); }
.fh { margin: 22px 0 -4px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1FAA59; }