/* The collapsible page menu in the header, shared by every page on the site. Uses the page's own colour tokens. */
.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 15px; cursor: pointer; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { border-color: var(--accent); }
.menu > summary svg { width: 18px; height: 18px; }
.menu > summary .chev { width: 14px; height: 14px; transition: transform .15s; color: var(--muted); }
.menu[open] > summary .chev { transform: rotate(180deg); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(320px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px; }
.menu-panel a { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); font-size: 15px; line-height: 1.35; }
.menu-panel a small { color: var(--muted); font-size: 13px; }
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--hl); outline: none; }
.menu-panel a[aria-current="page"] { background: var(--hl); }
.menu-panel a[aria-current="page"] span::after { content: " ·  du är här"; color: var(--gold); font-size: 13px; }
.menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu-panel .app { background: var(--accent); color: var(--on-accent); text-align: center; font-weight: 600; margin-top: 4px; }
.menu-panel .app:hover, .menu-panel .app:focus-visible { background: var(--accent); filter: brightness(1.08); }