/* ═══════════════════════════════════════════════════════════════════
   CLAIRO — nav canônica (header + footer + menu de celular)
   Carregada DEPOIS da folha de cada família (clairo.v2.css / games-page.css):
   é ela que unifica as duas heranças num header só.
   Markup: estampado por tools/build_nav.py a partir de shared/nav.json.
   ═══════════════════════════════════════════════════════════════════ */

/* ── pular para o conteúdo (só aparece no foco do teclado) ── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ac-fill);color:#fff;font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none
}
.skip-link:focus{left:0}

/* ── barra ── */
.topnav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;min-width:0}
.tnav{
  font-size:13px;font-weight:500;padding:7px 14px;border-radius:999px;
  color:var(--t2);text-decoration:none;transition:color .2s,background .2s;
  display:flex;align-items:center;gap:6px;white-space:nowrap
}
.tnav:hover,.tnav.on,.tnav[aria-current="page"]{color:var(--t1);background:var(--s3)}
.tnav-dot{width:5px;height:5px;border-radius:50%;background:var(--t3)}
.tnav[href*="steam"] .tnav-dot{background:var(--steam)}
.tnav[href*="epic"] .tnav-dot{background:var(--epic)}
.tnav[href*="gog"] .tnav-dot{background:var(--gog)}
.tnav[href*="no-deadline"] .tnav-dot{background:var(--steam)}
.tnav[href*="subscriptions"] .tnav-dot{background:linear-gradient(90deg,var(--luna),var(--gamepass),var(--psplus),var(--netflix))}

.topbar .btn-sm{
  font-size:13px;font-weight:500;padding:7px 16px;border-radius:999px;
  border:1px solid var(--b2);background:transparent;color:var(--t2);
  text-decoration:none;transition:color .15s,border-color .15s;white-space:nowrap
}
.topbar .btn-sm:hover{color:var(--t1);border-color:var(--b3)}
.topbar .btn-sm.primary{background:var(--ac-fill);color:#fff;border-color:var(--ac-fill)}
.topbar .lang-picker{margin-left:auto}
.topbar .topnav + .lang-picker{margin-left:0}

/* ── botão do menu (só no celular) ── */
.nav-toggle{
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  width:38px;height:34px;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--b1);border-radius:8px
}
.nav-toggle:hover{border-color:var(--b2)}
.nav-toggle-bar{display:block;width:16px;height:2px;border-radius:2px;background:var(--t1);transition:transform .18s,opacity .18s}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── celular: os links viram gaveta; o seletor de idioma continua na barra ── */
@media (max-width:1100px){
  .nav-toggle{display:inline-flex}
  #clairo-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--s1,#0d0d12);border-bottom:1px solid var(--b1);
    padding:10px 12px 14px;
    box-shadow:0 18px 40px rgba(0,0,0,.5);
    display:none
  }
  #clairo-nav.is-open{display:flex}
  #clairo-nav .tnav{display:flex;font-size:15px;padding:12px 14px;border-radius:10px}
  .topbar{position:sticky;padding:0 16px;gap:12px}
  .topbar .lang-picker{margin-left:auto}
}
@media (min-width:1101px){
  #clairo-nav{display:flex}
}
@media (max-width:420px){
  .topbar .btn-sm{padding:7px 10px;font-size:12px}
}

/* ── rodapé canônico ── */
footer .footer-links{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:4px 2px;margin:0 auto 12px;max-width:960px
}
footer .footer-links a{
  color:var(--t2);text-decoration:none;margin:0;padding:5px 10px;border-radius:6px;
  font-size:12px;line-height:1.4
}
footer .footer-links a:hover{color:var(--t1);background:var(--s2)}
.footer-tagline{color:var(--t2);max-width:520px;margin:0 auto 10px;line-height:1.5;font-size:12px}

/* ── 404: o miolo virou <main>, então a barra e o rodapé ficam de ponta a ponta ── */
body.notfound{align-items:stretch;justify-content:flex-start;text-align:center;padding:0}
body.notfound .notfound-main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px}
body.notfound footer{margin-top:0}