/* Shared sticky navigation for the institutional site and TV landing. */
header.header, header.wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax -1px);
  border-bottom: 1px solid #e0e2e6;
}
html { scroll-padding-top: var(--sticky-nav-offset, 160px); }
@media (max-width: 800px) {
  header.header { clip-path: none; box-shadow: none; }
  header.header::before {
    content: '';
    position: absolute;
    inset: 0 calc((100% - 100vw) / 2);
    background: #fff;
    border-bottom: 1px solid #e0e2e6;
    z-index: -1;
  }
}
@media(max-width:560px){
  header.header{gap:8px}
  header.header .logo{width:120px}
  header.header .header-actions{min-width:0}
  header.header .button{gap:8px;padding:12px 10px;font-size:10px;white-space:nowrap}
  header.header .menu{flex-shrink:0;padding:8px 0 8px 4px}
}
@media(max-width:800px){header.header::before{left:-20px;right:-20px}}

/* A shared, lightweight line-icon vocabulary for both navigation menus. */
header nav a{display:inline-flex;align-items:center;gap:7px}
header nav .nav-icon{width:17px;height:17px;flex:0 0 17px;opacity:.8}
header nav a:hover .nav-icon{opacity:1}
@media(max-width:800px){header.header nav a{gap:10px}}
@media(max-width:720px){
 header.wrap nav{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
 header.wrap nav>a:first-child{display:inline-flex;font-size:14px}
 header.wrap nav>.button{grid-column:1/-1;justify-content:center}
}
header.header nav a{display:flex;align-items:center;gap:8px}
header.wrap nav a.button{gap:9px}

/* Highlight the entry point for customers reusing their own TV. */
header.header nav a.nav-tv-highlight{background:#d7ef74;color:#283d2a;border:1px solid #c6de65;border-radius:8px;padding:10px 13px;gap:9px;white-space:nowrap}
header.header nav a.nav-tv-highlight:hover{background:#cce766;color:#203322;border-color:#a9c344}
.nav-tv-highlight strong{display:block;font-size:12px;font-weight:600;line-height:1.3}
.nav-tv-highlight small{display:block;margin-top:3px;font-size:10px;font-weight:400;line-height:1.3}
@media(max-width:800px){
 header.header nav a.nav-tv-highlight{margin:10px 0 3px;padding:13px 12px;border:1px solid #c6de65}
 .nav-tv-highlight strong{font-size:16px}
 .nav-tv-highlight small{font-size:12px;margin-top:4px}
}
/* Give mobile navigation icons a clear, consistent separation from labels. */
@media(max-width:800px){
 header.header nav a,
 header.header nav a.nav-tv-highlight,
 header.wrap nav a,
 header.wrap nav a.button{column-gap:14px}
 header nav .nav-icon{display:block;flex-shrink:0}
}
@media(max-width:360px){
 header.header .logo{width:100px;flex-shrink:0}
 header.header .button{padding:12px 8px;font-size:9px}
 header.wrap nav>a:first-child,header.wrap nav a[href="#circuiti-adv"]{font-size:13px;white-space:nowrap}
}
/* Align the highlighted mobile item with the other menu icons and labels. */
@media(max-width:800px){
 header.header nav a.nav-tv-highlight{margin-left:-13px;margin-right:-13px}
}