/* WaveMatch side menu for wavematch.net (same look and behaviour as the app).
   Three bars on the left of the header open a panel from the left. */
header{ position:relative; }
header svg{ max-width:calc(100vw - 150px); height:auto; }
.wm-menu-button{
  position:absolute; left:20px; top:50%; transform:translateY(-50%); z-index:1001;
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border:1px solid #d8d2c0; border-radius:12px; background:#fbf9f3; color:#0f4c46; cursor:pointer;
  transition:color .15s, border-color .15s, background-color .15s;
}
.wm-menu-button:hover, .wm-menu-button:focus-visible, .wm-menu-button.is-open{ color:#c1502e; border-color:#c1502e; background:#f6e3db; }
.wm-menu-button:focus-visible{ outline:2px solid #c1502e; outline-offset:2px; }
.wm-bars{ display:flex; flex-direction:column; gap:5px; width:22px; }
.wm-bars span{ display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .2s, opacity .2s; }
.wm-menu-button.is-open .wm-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.wm-menu-button.is-open .wm-bars span:nth-child(2){ opacity:0; }
.wm-menu-button.is-open .wm-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.wm-menu-backdrop{ position:fixed; inset:0; background:rgba(26,43,40,.28); opacity:0; pointer-events:none; transition:opacity .2s; z-index:900; }
.wm-menu-backdrop.is-open{ opacity:1; pointer-events:auto; }
.wm-menu-panel{
  position:fixed; top:0; left:0; bottom:0; width:min(300px,84vw); z-index:1000; overflow-y:auto;
  padding:110px 20px 24px; background:#f6f3ea; border-right:1px solid #d8d2c0; box-shadow:4px 0 24px rgba(26,43,40,.14);
  transform:translateX(-102%); visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s;
  font-family:'Inter', system-ui, sans-serif;
}
.wm-menu-panel.is-open{ transform:none; visibility:visible; transition:transform .25s ease, visibility 0s; }
.wm-menu-panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.wm-menu-panel a{
  display:block; padding:12px 14px; border-radius:10px; text-decoration:none; color:#0f4c46;
  font-weight:500; font-size:17px; transition:color .15s, background-color .15s;
}
.wm-menu-panel a:hover, .wm-menu-panel a:focus-visible{ color:#c1502e; background:#f6e3db; }
.wm-menu-panel a[aria-current="page"]{ color:#c1502e; }
@media (max-width:420px){ .wm-menu-button{ left:12px; width:42px; height:42px; } }
@media (prefers-reduced-motion: reduce){ .wm-menu-panel, .wm-menu-backdrop, .wm-bars span{ transition:none; } }

/* The logo goes back to the home page. */
.logo-link{ display:inline-block; line-height:0; border-radius:8px; }
.logo-link:focus-visible{ outline:2px solid #c1502e; outline-offset:4px; }