/* site-chrome.css — shared top bar (nav) + bottom bar (footer).
   Single source of truth: landing, use-case SEO pages, and /poradnik all use
   the fragments in templates/fragments/site-chrome.html + these styles, so the
   belka can never drift between pages again.
   Depends on tokens (--warm, --copper, --dark, --font-d) — load tokens.css too. */

a,button,.lang-btn,.nav-signin,.nav-start,.footer-link{cursor:pointer!important}

/* ═══ NAV (top bar) ═══ */
.nav{
  position:sticky;top:0;z-index:100;
  height:68px;
  background:rgba(15,12,10,0.75);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;padding:0 2.5rem;gap:0;
}
.nav-brand{font-family:var(--font-d);font-weight:800;font-size:1.7rem;color:var(--warm);letter-spacing:-0.03em;display:inline-flex;align-items:center;gap:0.25rem;white-space:nowrap;text-decoration:none}
@keyframes logo-wobble{0%,100%{transform:rotate(0deg)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}90%{transform:rotate(2deg)}}
.nav-brand img{width:40px;height:40px;flex-shrink:0;animation:logo-wobble 2.8s ease-in-out 2;transform-origin:center}
.brand-accent{color:var(--copper)}
.nav-links{display:flex;gap:2rem;margin-left:3rem;flex:1}
.nav-links a{font-size:0.88rem;color:rgba(249,244,235,0.45);text-decoration:none;transition:color 150ms ease-out}
.nav-links a:hover{color:rgba(249,244,235,0.85)}
.nav-cta{display:flex;align-items:center;gap:0.6rem}
.nav-signin{font-size:0.88rem;color:rgba(249,244,235,0.45);padding:0.5rem 0.9rem;border-radius:8px;text-decoration:none;transition:color 150ms ease-out,background 150ms ease-out}
.nav-signin:hover{color:var(--warm);background:rgba(255,255,255,0.06)}
.nav-start{background:var(--copper);color:var(--warm);padding:0.55rem 1.2rem;border-radius:9px;font-size:0.88rem;font-weight:600;text-decoration:none;transition:background 150ms ease-out,transform 100ms ease-out;box-shadow:0 4px 16px rgba(182,108,69,0.3)}
.nav-start:hover{background:#C87A50}
.nav-start:active{transform:scale(0.97)}
.lang-toggle{display:flex;align-items:center;gap:1px;background:rgba(255,255,255,0.06);border-radius:7px;padding:2px;margin-left:0.4rem}
.lang-btn{font-size:0.75rem;font-weight:600;padding:0.3rem 0.6rem;border-radius:5px;cursor:pointer;color:rgba(249,244,235,0.4);transition:all 150ms ease-out;user-select:none}
.lang-btn.active{background:rgba(255,255,255,0.12);color:var(--warm)}

/* ═══ FOOTER (bottom bar) ═══ */
.footer{background:var(--dark);border-top:1px solid rgba(255,255,255,0.05);padding:2rem 2.5rem;display:flex;align-items:center;justify-content:space-between}
.footer-brand{font-family:var(--font-d);font-weight:800;font-size:1rem;color:rgba(249,244,235,0.4)}
.footer-copy{font-size:0.82rem;color:rgba(249,244,235,0.25)}
.footer-link{color:rgba(249,244,235,0.35);text-decoration:none;font-size:0.82rem}
.footer-link:hover{color:var(--copper)}
.footer-seo{background:var(--dark);padding:3rem 2.5rem 0;text-align:center}
.footer-seo-label{font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(249,244,235,0.38);margin-bottom:1.25rem}
.seo-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:840px;margin:0 auto}
.seo-links a{color:rgba(249,244,235,0.6);text-decoration:none;font-size:0.85rem;font-weight:500;border:1px solid rgba(249,244,235,0.12);border-radius:999px;padding:8px 16px;transition:0.16s}
.seo-links a:hover{color:var(--copper);border-color:rgba(182,108,69,0.55);background:rgba(182,108,69,0.08)}

/* ── Mobile ── */
@media(max-width:860px){
  .nav-links{display:none}
  .nav{padding:0 1.25rem}
}
@media(max-width:520px){
  .nav-signin{display:none}
  .nav-start{display:none}
  .footer{padding:1.25rem;gap:0.5rem;flex-wrap:wrap;justify-content:center}
  .footer-brand{display:none}
  .footer-copy{font-size:0.75rem;text-align:center}
}