/* ================================================
   POLINO — Header
   ================================================ */

.site-header {
  position: fixed; top:0; left:0; right:0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex; align-items: center;
  transition: background-color var(--duration-slow) var(--ease-out),
              backdrop-filter  var(--duration-slow) var(--ease-out),
              box-shadow       var(--duration-slow) var(--ease-out);
}

.site-header.at-top  { background: transparent; }
.site-header.scrolled {
  background: rgba(244, 232, 210, 0.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(104,112,74,0.15);
}

.header-inner {
  width: 100%; max-width: var(--container-max);
  margin-inline: auto; padding-inline: var(--space-8);
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-6);
}

/* LOGO */
.logo { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }

/* The emblem is a traced copy of the studio's mark, whose line is a 1.9-unit
   hairline — 0.7px once it is scaled to 36px, which reads thin beside the
   wordmark. Stroking the same outline in its own colour brings it back to the
   ~1px the lockup wants. It is deliberately set here and not on the symbol, so
   the 380px contact watermark still renders the mark at its true weight. */
.logo-emblem {
  width: 36px; height: 36px;
  display: block;
  flex-shrink: 0;
  color: var(--olive-dark);
  stroke: currentColor;
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.logo-text   { display:flex; flex-direction:column; line-height:1; }
.logo-name   { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-semi); letter-spacing:var(--tracking-wide); color:var(--olive-dark); text-transform:uppercase; }
.logo-sub    { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:var(--tracking-widest); text-transform:uppercase; color:var(--olive); margin-top:2px; }

/* NAV DESKTOP */
.nav-desktop { display:flex; align-items:center; gap:var(--space-6); }

.nav-link {
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--olive-deep);
  position:relative; padding-bottom:2px;
  transition: color var(--duration-base) var(--ease-out);
}
.nav-link::after {
  content:''; position:absolute; bottom:-1px; left:0; width:100%; height:1.5px;
  background:var(--terra); transform:scaleX(0); transform-origin:left center;
  transition: transform var(--duration-base) var(--ease-out);
}
.nav-link:hover         { color:var(--terra); }
.nav-link:hover::after  { transform:scaleX(1); }

/* HEADER RIGHT */
.header-right { display:flex; align-items:center; gap:var(--space-4); flex-shrink:0; }

/* LANG SWITCHER */
.lang-switcher { display:flex; align-items:center; gap:var(--space-1); }
.lang-btn {
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--weight-semi);
  letter-spacing:var(--tracking-widest); text-transform:uppercase; color:var(--olive);
  padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm);
  transition: color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}
.lang-btn.active           { color:var(--terra); background:rgba(201,106,58,0.1); }
.lang-btn:hover:not(.active){ color:var(--olive-dark); }
.lang-sep { color:var(--olive); opacity:0.35; font-size:var(--text-xs); }

/* ETSY CTA */
.btn-etsy       { background:var(--olive-deep); color:var(--white-mosaic); font-size:var(--text-xs); padding:var(--space-2) var(--space-5); }
.btn-etsy:hover { background:var(--terra); box-shadow:var(--shadow-terra); }

/* BURGER */
.burger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:32px; height:32px; padding:4px;
}
.burger span {
  display:block; height:1.5px; background:var(--olive-dark); border-radius:2px;
  transition: transform var(--duration-base) var(--ease-out),
              opacity   var(--duration-base) var(--ease-out);
  will-change: transform;
}
.burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* MOBILE DRAWER */
.nav-mobile {
  position:fixed; top:var(--header-height); left:0; right:0;
  background:rgba(244,232,210,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:var(--space-8) var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-6);
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity   var(--duration-slow) var(--ease-out),
              visibility var(--duration-slow) var(--ease-out);
  border-bottom:1px solid rgba(104,112,74,0.2);
  z-index:calc(var(--z-header) - 1);
}
.nav-mobile.open           { transform:translateY(0); opacity:1; visibility:visible; }
.nav-mobile .nav-link      { font-size:var(--text-lg); opacity:0; transform:translateX(-16px); }
.nav-mobile.open .nav-link { transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out), color var(--duration-base) var(--ease-out); }
.nav-mobile.open .nav-link:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.nav-mobile.open .nav-link:nth-child(2) { opacity:1; transform:none; transition-delay:0.10s; }
.nav-mobile.open .nav-link:nth-child(3) { opacity:1; transform:none; transition-delay:0.15s; }
.nav-mobile.open .nav-link:nth-child(4) { opacity:1; transform:none; transition-delay:0.20s; }
.nav-mobile.open .nav-link:nth-child(5) { opacity:1; transform:none; transition-delay:0.25s; }

/* Same button, new home. Full width so it reads as the drawer's one action
   rather than a sixth link. */
.nav-mobile__etsy {
  display:none;
  justify-content:center;
  margin-top:var(--space-2);
  padding-block:var(--space-3);   /* .btn-etsy's compact header padding gives a
                                     33px target here; a drawer needs ~44 */
  opacity:0; transform:translateX(-16px);
}
.nav-mobile.open .nav-mobile__etsy {
  opacity:1; transform:none;
  transition: opacity var(--duration-slow) var(--ease-out) 0.30s,
              transform var(--duration-slow) var(--ease-out) 0.30s,
              background-color var(--duration-base) var(--ease-out);
}
@media (max-width: 1100px) { .nav-mobile__etsy { display:inline-flex; } }

/* RESPONSIVE */
@media (max-width: 1100px) { .nav-desktop { display:none; } .burger { display:flex; } }
@media (min-width: 1101px) { .nav-mobile  { display:none; } }
/* The burger appears at 1100px, so the widest item in the row has to leave
   at the same point — otherwise it pushes the burger off-screen and the
   whole menu becomes unreachable. It reappears at the foot of the drawer. */
@media (max-width: 1100px) { .header-right .btn-etsy { display:none; } }
/* Below 560px the row still measures 384px of content against 360px of
   screen, and the burger is the item that falls off the end. Every gap and
   glyph below is trimmed to buy that back. */
@media (max-width: 560px) {
  .header-inner { gap:var(--space-3); }
  .header-right { gap:var(--space-2); }
  .lang-btn     { padding-inline:var(--space-1); }
  .logo-emblem  { width:32px; height:32px; }
}
@media (max-width: 480px)  { .header-inner { padding-inline:var(--space-4); } }
/* Measured: with the trims above, the descriptor still fits from 360px up,
   so only the narrowest devices give it up. The emblem and wordmark carry
   the brand there; the full name stays in the logo's aria-label. */
@media (max-width: 350px) {
  .logo-sub  { display:none; }
  .logo-name { font-size:var(--text-lg); }
}