/*! The site nav, shared by the home page and the tag pages.
    Developer notes for this file: docs/frontend-notes.md

    Its own file because both pages carry the same bar but nothing else in
    common: the home page has its own stylesheet, home.css, and cannot take
    tag.css, whose body, link and layout rules would fight with it. Two copies
    of these rules drifted apart the moment one of them was edited. */

/* --- site nav: "Arcade" keycaps --- */
/* The bar carries its own link reset. On a tag page tag.css has already
   removed the underline from every link, but the home page keeps browser
   defaults. Its height is fixed and published as --nav-h so other sticky
   pieces (the tag page's search bar) can dock underneath it, and so in-page
   anchors such as the skip link do not land behind it. */
:root { --nav-h:68px; scroll-padding-top:var(--nav-h);
        --nav-acc:#b98af7; --nav-acc-soft:oklch(88% 0.09 300); --nav-acc-deep:oklch(50% 0.13 300); }
.nav a, .sel a { text-decoration:none; }
.nav { display:flex; align-items:center; gap:28px; padding:0 28px;
       box-sizing:border-box; height:var(--nav-h); background:#0b0b0d;
       border-bottom:2px solid #000; box-shadow:0 1px 0 rgba(255,255,255,.08);
       position:sticky; top:0; z-index:30; }
.nav-brand { display:flex; align-items:center; gap:10px; color:inherit; min-width:0; }
.nav-brand:hover { color:inherit; }
.nav-brand vent-logo { flex-shrink:0; }
.nav-brand b { font:700 17px/1 'Space Grotesk',sans-serif; color:#fff; }

.nav-links { display:flex; gap:12px; align-items:center; margin-left:auto; flex-shrink:0; }
.key { display:flex; align-items:center; gap:10px; padding:9px 14px 9px 9px; border-radius:6px;
       background:#141417; border:1px solid rgba(255,255,255,.2); box-shadow:0 4px 0 #000;
       font:700 13px/1 'Space Grotesk',sans-serif; letter-spacing:.07em; text-transform:uppercase;
       color:#fff; white-space:nowrap; cursor:pointer;
       transition:transform .08s ease-out, box-shadow .08s ease-out, border-color .08s ease-out; }
.key:hover, .drop[open] > .key { transform:translateY(2px); box-shadow:0 2px 0 #000; border-color:var(--nav-acc); color:#fff; }
.key:active { transform:translateY(4px); box-shadow:0 0 0 #000; }
.key:focus-visible { outline:2px solid var(--nav-acc-soft); outline-offset:3px; }
.key-num { display:flex; align-items:center; justify-content:center; width:20px; height:20px;
           box-sizing:border-box; border-radius:4px; border:1px solid rgba(255,255,255,.25);
           color:rgba(255,255,255,.7); font:700 11px ui-monospace,monospace; }
.key.on, .key.on:hover { background:var(--nav-acc); border-color:var(--nav-acc); color:#0b0b0d; box-shadow:0 4px 0 var(--nav-acc-deep); }
.key.on:hover, .drop[open] > .key.on { box-shadow:0 2px 0 var(--nav-acc-deep); color:#0b0b0d; }
.drop > summary.on::after { color:#0b0b0d; }
.key.on .key-num { background:#0b0b0d; border-color:#0b0b0d; color:var(--nav-acc); }

.drop { position:relative; }
.drop > summary { list-style:none; }
.drop > summary::-webkit-details-marker { display:none; }
.drop > summary::after { content:"\25BE"; font-size:10px; color:var(--nav-acc); }
.drop-menu { position:absolute; top:calc(100% + 14px); right:0; width:240px; box-sizing:border-box;
             background:#141417; border:1px solid rgba(255,255,255,.2); border-radius:6px;
             padding:8px; display:flex; flex-direction:column; box-shadow:6px 6px 0 #000; }
.drop-menu a { display:flex; align-items:center; gap:10px; padding:10px; border-radius:4px;
               font:700 14px 'Space Grotesk',sans-serif; text-transform:uppercase;
               letter-spacing:.05em; color:#fff; }
.drop-menu a::before { content:"\25B6"; opacity:0; color:inherit; }
.drop-menu a:hover, .drop-menu a:focus-visible { background:rgba(255,255,255,.08); color:#fff; outline:none; }
.drop-menu a:hover::before, .drop-menu a:focus-visible::before { opacity:1; color:var(--nav-acc); }
.drop-menu a.on, .drop-menu a.on:hover { background:var(--nav-acc); color:#0b0b0d; }
.drop-menu a.on::before { opacity:1; color:#0b0b0d; }
/* The arrow is drawn, not typed, so the link's text stays "All tag pages". */
.drop-menu .all { margin-top:6px; padding:10px 10px 6px; border-top:1px dashed rgba(255,255,255,.18);
                  border-radius:0; font:600 12px ui-monospace,monospace; letter-spacing:.04em;
                  color:var(--nav-acc-soft); }
.drop-menu .all::before { content:none; }
.drop-menu .all::after { content:" \2192"; }
.drop-menu .all:hover, .drop-menu .all:focus-visible { color:var(--nav-acc-soft); }
.drop-menu .none { padding:10px; font:600 12px ui-monospace,monospace; color:rgba(255,255,255,.45); }

/* The MENU button and the select screen exist only below the phone break. */
.menu-btn, .sel { display:none; }

/* The home keycap reads "Steam Game Recommender" in full, and the whole bar
   then needs about 935px. Below that the wordmark goes first: the logo still
   carries the brand and links home. */
@media (max-width: 960px) {
  .nav-brand b { display:none; }
}

/* Below 760px the three keycaps no longer fit even without the wordmark, so
   they move behind MENU. This is wider than the site's usual 640px phone
   break because the home label is never shortened. */
@media (max-width: 760px) {
  :root { --nav-h:60px; }
  .nav { padding:0 14px 0 16px; gap:10px; }
  .nav-brand b { display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nav-links { display:none; }
  .menu-btn { display:flex; align-items:center; margin-left:auto; height:40px; padding:0 14px;
              border:0; border-radius:6px; background:var(--nav-acc);
              box-shadow:0 4px 0 var(--nav-acc-deep); cursor:pointer; flex-shrink:0;
              font:700 13px 'Space Grotesk',sans-serif; letter-spacing:.08em; color:#0b0b0d; }
  .menu-btn:active { transform:translateY(4px); box-shadow:none; }
  .menu-btn:focus-visible, .sel-close:focus-visible, .sel a:focus-visible {
    outline:2px solid var(--nav-acc-soft); outline-offset:3px; }

  /* Above the filter sheets (10000) and the cookie bar (100000). */
  .sel { position:fixed; inset:0; z-index:100001; background:#0b0b0d;
         flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
  .sel.open { display:flex; }
  .sel-top { display:flex; align-items:center; height:60px; padding:0 14px 0 16px; flex-shrink:0; }
  .sel-top span { font:600 12px ui-monospace,monospace; letter-spacing:.1em; color:rgba(255,255,255,.5); }
  .sel-close { margin-left:auto; height:40px; padding:0 14px; border-radius:6px; background:#141417;
               border:1px solid rgba(255,255,255,.2); box-shadow:0 4px 0 #000; cursor:pointer;
               font:700 13px 'Space Grotesk',sans-serif; letter-spacing:.08em; color:#fff; }
  .sel-close:active { transform:translateY(4px); box-shadow:none; }
  .sel-logo { display:flex; justify-content:center; padding:18px 0 26px; }
  .sel-list { display:flex; flex-direction:column; gap:12px; padding:0 20px 32px; }
  .sel-item { display:flex; align-items:center; gap:14px; padding:16px; border-radius:6px;
              background:#141417; border:1px solid rgba(255,255,255,.2); box-shadow:0 5px 0 #000;
              font:700 22px/1.15 'Space Grotesk',sans-serif; text-transform:uppercase;
              letter-spacing:.04em; color:#fff; }
  .sel-item .n { font:700 13px ui-monospace,monospace; color:rgba(255,255,255,.5); min-width:20px; flex-shrink:0; }
  .sel-item.on { background:var(--nav-acc); border-color:var(--nav-acc); box-shadow:0 5px 0 var(--nav-acc-deep); color:#0b0b0d; }
  .sel-item.on .n { color:#0b0b0d; }
  .sel-group { flex-direction:column; align-items:stretch; gap:10px; }
  .sel-group-h { display:flex; align-items:center; gap:14px; }
  .sel-tags { display:flex; flex-wrap:wrap; gap:8px; padding-left:34px; }
  .sel-tags a { padding:9px 12px; border-radius:4px; border:1px solid rgba(255,255,255,.22);
                font:700 13px 'Space Grotesk',sans-serif; text-transform:uppercase;
                letter-spacing:.05em; color:rgba(255,255,255,.9); }
  .sel-tags a.on { background:var(--nav-acc); border-color:var(--nav-acc); color:#0b0b0d; }
  .sel-tags .all { border:0; padding:9px 4px; font:600 12px ui-monospace,monospace; color:var(--nav-acc-soft); }
  .sel-tags .all::after { content:" \2192"; }
  .sel-tags .none { padding:9px 0; font:600 12px ui-monospace,monospace; color:rgba(255,255,255,.45);
                    text-transform:none; letter-spacing:0; }
}

@media (max-width: 380px) {
  .nav-brand b { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .key, .menu-btn, .sel-close { transition:none; }
}