/* ==========================================================================
   HEADER e menu mobile (prototipo: style.css righe 144-162, 841-862)
   ========================================================================== */

.sb-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px var(--sb-gutter);
  transition: background-color .3s, backdrop-filter .3s;
}
.sb-header.is-scrolled { background: var(--sb-header-veil); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--sb-line); }
/* Lo stato compatto è il layout; quello più arioso in cima si disegna solo con transform */
.sb-header > * { transform: translateY(14px); transition: transform .3s; }
.sb-header.is-scrolled > * { transform: none; }
.sb-header__logo { transform-origin: left center; }
.sb-header__logo img { width: 118px; transform: scale(1.254); transform-origin: left center; transition: transform .3s; }
.sb-header.is-scrolled .sb-header__logo img { transform: none; }
.sb-nav { font-size: .95rem; }
.sb-nav__list { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.sb-nav a { text-decoration: none; }
.sb-nav a:hover { color: var(--sb-gold-lt); }
.sb-header__toggle { display: none; }

/* Sottomenu (le edizioni sotto "Il Forum"): a tendina su desktop, aperto con il mouse o la tastiera */
.sb-nav .menu-item-has-children { position: relative; }
.sb-nav .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.sb-nav .sub-menu { position: absolute; top: 100%; left: -16px; min-width: 210px; padding: 18px 0 8px; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.sb-nav .sub-menu::before { content: ""; position: absolute; inset: 10px 0 0; z-index: -1; background: var(--sb-header-veil-solid); border: 1px solid var(--sb-line); border-radius: 4px; }
.sb-nav .sub-menu a { display: block; padding: 8px 16px; white-space: nowrap; }
.sb-nav .menu-item-has-children:hover > .sub-menu, .sb-nav .menu-item-has-children:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.sb-nav .sub-menu .current-menu-item > a, .sb-nav .current-menu-ancestor > a { color: var(--sb-gold-lt); }

@media (max-width: 1080px) {
  .sb-header__toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--sb-toggle-line); border-radius: 50%; cursor: pointer; }
  /* Anche su :hover e :focus, dove GeneratePress dà ai button uno sfondo grigio */
  .sb-header__toggle, .sb-header__toggle:hover, .sb-header__toggle:focus { background: transparent; color: var(--sb-text); }
  .sb-burger, .sb-burger::before, .sb-burger::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .25s, background-color .25s; }
  .sb-burger::before, .sb-burger::after { content: ""; position: absolute; left: 0; }
  .sb-burger::before { top: -6px; }
  .sb-burger::after { top: 6px; }
  .sb-header__toggle[aria-expanded="true"] .sb-burger { background: transparent; }
  .sb-header__toggle[aria-expanded="true"] .sb-burger::before { transform: translateY(6px) rotate(45deg); }
  .sb-header__toggle[aria-expanded="true"] .sb-burger::after { transform: translateY(-6px) rotate(-45deg); }
  .sb-nav {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 100px var(--sb-gutter) 40px;
    background: var(--sb-space-0);
    font-size: 1.7rem; font-variation-settings: "wdth" 100; font-weight: 500;
    visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s;
  }
  .sb-nav__list { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Nel pannello le edizioni sono sempre visibili, sotto "Il Forum" */
  .sb-nav .menu-item-has-children > a::after { display: none; }
  .sb-nav .sub-menu { position: static; padding: 0 0 6px 18px; visibility: visible; opacity: 1; font-size: 1.15rem; font-weight: 400; }
  .sb-nav .sub-menu::before { display: none; }
  .sb-nav .sub-menu a { padding: 4px 0; }
  .sb-nav.is-open { visibility: visible; opacity: 1; }
  .sb-header > .sb-nav { transform: none; }
  /* backdrop-filter renderebbe il pannello fixed relativo all'header */
  .sb-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--sb-header-veil-solid); }
}