/* Shared header: homepage appearance and responsive layout on every page. */
/* ---------- Header ---------- */
.hdr {
  /* Keep homepage header colors independent of page-level token overrides. */
  --fu-ink-900: #1A1614;
  --fu-bloom-600: #5F353A;
  color: var(--fu-ink-900);
  /* The header is a body child so hero clipping and section stacking cannot
     hide the navigation. Keep it above the sticky purchase bar as well. */
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 12px var(--pad);
  isolation: isolate;
}
/* Keep the open sheet within the viewport, including when keyboard focus
   moves to its last link. The closed header keeps its original placement. */
.hdr:has(.sheet.open) { position: fixed; }
.hdr::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--fu-bg) 35%, transparent) 0%,
    color-mix(in srgb, var(--fu-bg) 18%, transparent) 45%,
    transparent 100%);
  pointer-events: none;
}
.hdr .brand img {
  width: clamp(140px, 12vw, 160px);
  height: auto;
  max-width: none;
}
.hdr .brand {
  font-family: var(--fu-font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: .02em; text-align: center; white-space: nowrap;
  color: var(--fu-ink-900);
}
.hdr .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fu-font-sans);
  height: 38px; padding: 0 16px;
  border: 1px solid var(--fu-border-strong);
  border-radius: var(--fu-radius-pill);
  background: rgba(250, 247, 244, .72);
  backdrop-filter: blur(8px);
  font-size: var(--fu-text-2xs); letter-spacing: .06em;
  color: var(--fu-ink-900); cursor: pointer;
  transition: background var(--fu-dur-base) var(--fu-ease-out),
              border-color var(--fu-dur-base) var(--fu-ease-out),
              transform var(--fu-dur-base) var(--fu-ease-out);
}
.hdr .pill:hover { background: var(--fu-surface); border-color: var(--fu-bloom-300); transform: translateY(-1px); }
.hdr .pill:active { transform: translateY(0); }
.hdr__r { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.hdr .lang {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--fu-border-strong);
  border-radius: var(--fu-radius-pill);
  background: rgba(250, 247, 244, .72);
  backdrop-filter: blur(8px);
}
.hdr .lang button {
  border: 0; background: transparent;
  font-family: var(--fu-font-sans); font-size: 11.5px; letter-spacing: .1em;
  color: var(--fu-text-muted);
  height: 30px; min-width: 36px; padding: 0 9px;
  border-radius: var(--fu-radius-pill); cursor: pointer;
  transition: color var(--fu-dur-fast) var(--fu-ease-out), background var(--fu-dur-fast) var(--fu-ease-out);
}
.hdr .lang button:hover { color: var(--fu-ink-900); }
/* The head initializer sets lang before these controls can first paint.
   aria-pressed is synchronized by i18n.js once the document is parsed. */
html[lang="it"] .hdr .lang button[data-lang="it"],
html[lang="en"] .hdr .lang button[data-lang="en"] {
  background: var(--fu-bloom-500); color: #FFFFFF;
}
.hdr .accedi { font-size: var(--fu-text-2xs); letter-spacing: .06em; padding: 0 6px; white-space: nowrap; transition: color var(--fu-dur-fast) var(--fu-ease-out); }
.header-login__en { display: none; }
html[lang="en"] .header-login__it { display: none; }
html[lang="en"] .header-login__en { display: inline; }

@media (max-width: 900px) {
  .hdr { padding: 8px var(--pad); }
}
@media (max-width: 520px) {
  .hdr { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .hdr .brand img { width: clamp(112px, 32vw, 152px); }
  .hdr__r { flex-direction: column; gap: 2px; align-items: flex-end; }
  .hdr .lang { gap: 1px; padding: 2px; }
  .hdr .lang button { min-width: 32px; padding-inline: 6px; }
}

/* Menu sheet */
.sheet {
  position: absolute; top: calc(100% + 6px); left: var(--pad); right: var(--pad); z-index: 7;
  /* 100% is the header height: leave 16px below the menu on short screens. */
  max-height: min(720px, calc(100vh - 100% - 22px));
  max-height: min(720px, calc(100dvh - 100% - 22px));
  background: rgba(250, 247, 244, .97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--fu-border);
  border-radius: var(--fu-radius-2xl);
  padding: 10px 22px 18px;
  box-shadow: var(--fu-shadow-lg);
  opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
  transition: opacity 180ms var(--fu-ease-out), transform 180ms var(--fu-ease-out), visibility 180ms;
}
.sheet.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
/* SleekFlow pins its layer with an inline !important z-index. Temporarily
   hide the widget while navigating; closing the menu restores it unchanged. */
body:has(.sheet.open) #sleekflow-widget-container {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.sheet a {
  display: block; padding: 12px 0; font-size: 17px;
  border-bottom: 1px solid var(--fu-border);
  transition: color var(--fu-dur-fast) var(--fu-ease-out);
}
.sheet a:last-child { border-bottom: 0; }


.sheet a[aria-current="page"] { color: var(--fu-bloom-600); }
@media (max-width: 900px) { .sheet a { padding: 10px 0; } }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }