/* Apeiron Games — shared site nav styles
   Single source of truth. Imported by every page via <link rel="stylesheet" href="_partials/nav.css">.
   Generated 2026-05-21 from the canonical index.html nav block.
*/

.nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: center;
      padding: 0 var(--gutter);
      background: rgba(17, 25, 40, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(201,168,76,0.12);
    }

.nav__inner {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; max-width: 1280px;
      padding: 1rem 0;
    }

.nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; perspective: 300px; }

.nav__left { display: flex; align-items: center; gap: 2rem; }

.nav__logo-mark {
      height: 38px; width: auto;
      display: block;
      animation: logoSpin 6s linear infinite;
    }

@keyframes logoSpin {
      from { transform: rotateY(0deg); }
      to   { transform: rotateY(360deg); }
    }

.nav__logo-wordmark {
      height: 24px; width: auto;
      display: block;
    }

.nav__center { display: flex; align-items: center; gap: 1.25rem; list-style: none; }

.nav__center > li { position: relative; }

.nav__center a, .nav__center button.nav__btn {
      font-family: var(--font-head); font-size: 0.85rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(245,239,224,0.75);
      background: none; border: none; cursor: pointer;
      padding: 0.4rem 0; transition: color 0.2s;
    }

.nav__center a:hover, .nav__center button.nav__btn:hover { color: var(--gold-light); }

.nav__center a.is-current { color: var(--gold); }

.nav__btn .caret { display: inline-block; margin-left: 0.35rem; transition: transform 0.2s; }

.nav__item--open .nav__btn { color: var(--gold-light); }

.nav__item--open .nav__btn .caret { transform: rotate(180deg); }

.nav__dropdown {
      position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
      min-width: 240px;
      background: rgba(15, 22, 38, 0.98);
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 4px; padding: 0.4rem 0;
      box-shadow: 0 14px 32px rgba(0,0,0,0.5);
      opacity: 0; pointer-events: none;
      transform: translateX(-50%) translateY(-6px);
      transition: opacity 0.18s ease, transform 0.18s ease;
      list-style: none;
    }

.nav__item--open .nav__dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.nav__dropdown a {
      display: block; padding: 0.7rem 1.1rem;
      font-family: var(--font-head); font-size: 0.78rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--parchment);
      border-left: 2px solid transparent;
      transition: background 0.18s, color 0.18s, border-color 0.18s;
    }

.nav__dropdown a small {
      display: block; font-family: var(--font-body); font-size: 0.7rem;
      text-transform: none; letter-spacing: 0.02em; color: var(--stone);
      margin-top: 0.15rem; line-height: 1.35;
    }

.nav__dropdown a:hover { background: rgba(201,168,76,0.08); color: var(--gold-light); border-left-color: var(--gold); }

.nav__dropdown a.is-featured { color: var(--gold-light); }

.nav__dropdown a.is-featured small { color: var(--gold-dim); }

.nav__right { display: flex; align-items: center; gap: 0.75rem; }

.nav__socials { display: flex; align-items: center; gap: 0.4rem; }

.nav__socials a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 30px; height: 30px; border-radius: 50%;
      color: rgba(245,239,224,0.7);
      transition: color 0.2s, background 0.2s;
    }

.nav__socials a:hover { color: var(--gold-light); background: rgba(201,168,76,0.08); }

.nav__socials svg { width: 16px; height: 16px; fill: currentColor; }

.nav__cta {
      font-family: var(--font-head); font-size: 0.82rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.55rem 1.25rem;
      background: var(--gold); color: var(--navy-deep);
      border-radius: 2px; transition: background 0.2s;
    }

.nav__cta:hover { background: var(--gold-light); }