/* Public site header shared by the booth display and the company page */
.snav {
  position: relative; z-index: 3; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 40px);
  padding-block: clamp(10px, 2.2vh, 26px);
  background: linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) calc(100% - 1px));
  -webkit-mask-image: none;
}
.snav-tag {
  position: relative; display: inline-flex; align-items: center; gap: .6em; flex: none;
  font-size: clamp(.8rem, 1.7vh, 1.2rem); font-weight: 800; color: var(--accent); padding-block: .5em;
}
.snav-tag svg { width: 1.5em; height: 1.5em; }
.snav-tag::after { content: ""; position: absolute; inset-inline: 0; bottom: calc(-1 * clamp(10px, 2.2vh, 26px) - 1px); height: 2px; border-radius: 2px; background: var(--accent); }
.snav nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 44px); margin-inline: auto; }
.snav nav a {
  position: relative; color: var(--ink-2); text-decoration: none; font-weight: 700; padding-block: .5em;
  font-size: clamp(.85rem, 1.8vh, 1.25rem); transition: color var(--t-fast);
}
.snav nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--t-med) var(--ease-out); }
.snav nav a:hover, .snav nav a.on { color: var(--ink); }
.snav nav a:hover::after, .snav nav a.on::after { transform: scaleX(1); }
.snav nav a:focus-visible, .snav-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.snav-end { display: flex; align-items: center; gap: 14px; flex: none; }
.snav-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 900; font-size: clamp(1.1rem, 2.8vh, 2rem); }
.snav-brand .logo { width: clamp(34px, 6vh, 64px); }
.snav-theme { opacity: .45; transition: opacity var(--t-med); }
.snav-theme:hover, .snav-theme:focus-visible { opacity: 1; }

@media (max-width: 760px) {
  .snav { flex-wrap: wrap; gap: 6px 12px; padding-block: 12px 0; }
  .snav-tag { display: none; }
  .snav-end { order: -1; margin-inline-start: 0; flex: 1; justify-content: space-between; }
  .snav nav { order: 2; width: 100%; justify-content: space-between; gap: 8px; margin: 0; overflow-x: auto; }
  .snav nav a { font-size: .9rem; white-space: nowrap; padding-block: .8em; }
}