/* Shared top navbar for both tabs (FABRICAT at /, STICKERS at /stickers/).
   Loaded by each page; the page itself reserves --nav-h at the top. */

@font-face {
  font-family: "Jersey25";
  src: url("stickers/assets/fonts/Jersey25-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --nav-h: 64px;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 5000;

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;

  background: #fff;
  border-bottom: 3px solid #000;
  font-family: "Jersey25", Helvetica, Arial, sans-serif;
}

.site-nav__tabs {
  display: flex;
  gap: 10px;
}

.site-nav__tab {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  padding: 7px 18px 5px;

  color: #000;
  background: #fff;
  border: 3px solid #000;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #000;
  text-decoration: none;
  letter-spacing: 0.02em;

  transition: transform 0.15s, box-shadow 0.15s;
}

.site-nav__tab:hover {
  text-decoration: none;
  transform: translate(-1px, -2px) rotate(-2deg);
  box-shadow: 5px 5px 0 #000;
}

.site-nav__tab[aria-current="page"] {
  color: #fff;
}

.site-nav__tab--fabricat[aria-current="page"] {
  background: #6766ff;
  transform: rotate(-2deg);
}

.site-nav__tab--stickers[aria-current="page"] {
  background: linear-gradient(135deg, #ff0080, #7928ca);
  transform: rotate(2deg);
}

.site-nav__end {
  margin-left: auto;
  display: flex;
  align-items: center;
}

@media (max-width: 480px) {
  :root {
    --nav-h: 56px;
  }

  .site-nav {
    gap: 8px;
    padding: 0 10px;
  }

  .site-nav__tabs {
    gap: 8px;
  }

  .site-nav__tab {
    font-size: 21px;
    padding: 6px 10px 4px;
  }
}