/* =====================================================================
   HEADER — barra contatti + navbar a pillola + pop-up emergenza + barra azioni mobile
   Misure dalla schermata Stitch "Home" (1280px). Vedi design/DESIGN.md › Components.
   ===================================================================== */

/* Header sempre visibile: il template part resta incollato in cima */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
}
@media (max-width: 600px) {
  /* su mobile la barra admin di WordPress scorre via: niente spazio vuoto */
  .wp-site-blocks > header.wp-block-template-part { top: 0; }
}
.mm-header { margin: 0; }

/* --- Barra contatti (Blu Notte, 44px) --- */
.mm-topbar {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--wp--style--root--padding-left, 40px);
  background-color: var(--wp--preset--color--primary-deep);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
  color: var(--wp--preset--color--surface);
  font-size: var(--wp--preset--font-size--body-sm);
  line-height: 1.55;
  gap: 24px;
}
.mm-topbar p { margin: 0; }
.mm-topbar__info { gap: 24px; }
.mm-topbar__info .mm-ico { --mm-ico-size: 16px; }
.mm-topbar a { color: inherit; text-decoration: none; transition: color .2s; }
.mm-topbar__info a:hover { color: var(--wp--preset--color--primary-soft); }
.mm-topbar__hours { color: var(--wp--preset--color--on-primary-variant); }

.mm-topbar__actions { gap: 12px; }
.mm-topbar__actions .mm-ico { --mm-ico-size: 15px; }
.mm-topbar__actions .wp-block-button__link {
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary-deep);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background-color .2s;
}
.mm-topbar__actions .wp-block-button__link:hover,
.mm-topbar__actions .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--surface-blue);
  color: var(--wp--preset--color--primary-deep);
}

/* --- Navbar a pillola (80px) --- */
.mm-navbar-wrap {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px var(--wp--style--root--padding-left, 40px) 0;
}
.mm-navbar {
  position: relative;
  min-height: 80px;
  padding: 0 24px;
  border-radius: 9999px;
  box-shadow: 0 20px 48px rgba(11, 27, 46, .08);
  gap: 24px;
}
/* Sfondo bianco sfocato su uno pseudo-elemento: un backdrop-filter sul contenitore
   intrappolerebbe il menu mobile a tutto schermo (position: fixed) dentro la pillola */
.mm-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

/* Logo + nome */
.mm-brand { gap: 16px; flex: none; }
.mm-brand .wp-block-site-logo img { display: block; width: auto; height: 36px; }
.mm-brand__text { gap: 0; }
.mm-brand__text p { margin: 0; }
.mm-brand__name {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wp--preset--color--primary-deep);
}
.mm-brand__payoff {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--on-surface-variant);
}

/* Menu */
/* specificita' doppia: la regola TT5 ":root :where(.wp-block-navigation)" viene stampata dopo questo CSS */
.wp-block-navigation.mm-nav { font-size: var(--wp--preset--font-size--nav-link); }
/* il core forza "color: inherit" sui link: il colore si imposta sulla voce <li> e il link lo eredita */
.mm-nav .wp-block-navigation-item { color: var(--wp--preset--color--on-surface-variant); transition: color .2s; }
.mm-nav .wp-block-navigation-item:hover { color: var(--wp--preset--color--on-surface); }
.mm-nav .wp-block-navigation-item.current-menu-item { color: var(--wp--preset--color--primary); }
.mm-nav .wp-block-navigation__container { gap: 24px; flex-wrap: nowrap; }
.mm-nav .wp-block-navigation-item__content {
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  transition: color .2s;
}
.mm-nav .current-menu-item > .wp-block-navigation-item__content { font-weight: 700; }
/* Bottone hamburger */
.mm-nav .wp-block-navigation__responsive-container-open {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--wp--preset--color--on-surface);
}
.mm-nav .wp-block-navigation__responsive-container-open:hover { background-color: var(--wp--preset--color--surface-blue); }
/* Menu aperto: tutto schermo in Blu MM, voci grandi */
.mm-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--wp--style--root--padding-left, 20px); }
/* specificita' (0,5,0): il core usa ".wp-block-navigation__responsive-container.is-menu-open:not(...) ...-content" (0,4,0) */
.mm-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { padding-top: 120px; }
/* Con il menu aperto il bottone emergenza resta visibile sopra il menu (DESIGN.md: "sempre visibile accanto all'hamburger") */
.mm-navbar > .mm-emergenza-btn { position: relative; z-index: 100001; }
.mm-nav .is-menu-open .wp-block-navigation__container { gap: 12px; }
/* nel menu aperto il core forza "color: inherit !important" sulle voci <li>: il colore della voce corrente va sul link */
.mm-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary-soft); }
.mm-nav .is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--headline-md);
  font-weight: 700;
  line-height: 1.2;
}
.mm-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--surface); }

/* --- Bottone "Hai un'emergenza?" (unico elemento rosso del sito) --- */
.mm-emergenza-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 9999px;
  background-color: var(--wp--preset--color--emergency);
  color: #fff;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  transition: background-color .2s;
}
.mm-emergenza-btn:hover,
.mm-emergenza-btn:focus-visible { background-color: var(--wp--preset--color--emergency-deep); }
.mm-emergenza-btn:focus-visible { outline: 2px solid var(--wp--preset--color--emergency-deep); outline-offset: 2px; }
.mm-emergenza-btn__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background-color: #fff; }
.mm-emergenza-btn__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #fff;
  animation: mm-ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes mm-ping {
  0% { transform: scale(1); opacity: .6; }
  75%, 100% { transform: scale(1.8); opacity: 0; }
}
.mm-emergenza-btn__icon {
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--mm-ico-warning) center / contain no-repeat;
  mask: var(--mm-ico-warning) center / contain no-repeat;
}
.mm-emergenza-btn__label-short { display: none; }

/* --- Pop-up emergenza (popover nativo: niente JavaScript) --- */
/* ".mm-navbar >" serve a battere ".is-layout-flex > :is(*,div) { margin: 0 }" che toglierebbe il centraggio */
.mm-navbar > .mm-emergenza {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 48px;
  overflow: auto;
  border: 0;
  border-radius: 32px;
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--on-surface);
  box-shadow: var(--wp--preset--shadow--modal);
  text-align: center;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1),
              overlay .25s allow-discrete, display .25s allow-discrete;
}
.mm-emergenza:popover-open { opacity: 1; transform: none; }
.mm-emergenza::backdrop {
  background-color: rgba(6, 51, 107, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s, overlay .2s allow-discrete, display .2s allow-discrete;
}
.mm-emergenza:popover-open::backdrop { opacity: 1; }
@starting-style {
  .mm-emergenza:popover-open { opacity: 0; transform: scale(.96); }
  .mm-emergenza:popover-open::backdrop { opacity: 0; }
}
.mm-emergenza__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--emergency-soft);
  color: var(--wp--preset--color--emergency);
}
.mm-emergenza__icon::before,
.mm-emergenza__close::before,
.mm-emergenza__call::before {
  content: "";
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--mm-ico) center / contain no-repeat;
  mask: var(--mm-ico) center / contain no-repeat;
}
.mm-emergenza__icon::before { --mm-ico: var(--mm-ico-emergency); width: 36px; height: 36px; }
.mm-emergenza__title {
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--headline-md);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.mm-emergenza__text {
  margin: 0 0 32px;
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.65;
  color: var(--wp--preset--color--on-surface-variant);
}
.mm-emergenza__text strong { color: var(--wp--preset--color--on-surface); font-weight: 600; }
.mm-emergenza__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 32px;
  border-radius: 9999px;
  background-color: var(--wp--preset--color--emergency);
  color: #fff;
  font-size: var(--wp--preset--font-size--body-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s;
}
.mm-emergenza__call::before { --mm-ico: var(--mm-ico-call); width: 20px; height: 20px; }
.mm-emergenza__call:hover,
.mm-emergenza__call:focus-visible { background-color: var(--wp--preset--color--emergency-deep); color: #fff; }
.mm-emergenza__call:focus-visible { outline: 2px solid var(--wp--preset--color--emergency-deep); outline-offset: 3px; }
/* Numero visibile solo su dispositivi con mouse (desktop), come da ISTRUZIONI-STITCH */
.mm-emergenza__alt,
.mm-emergenza__number { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mm-emergenza__alt { display: block; margin: 24px 0 4px; font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--on-surface-variant); }
  .mm-emergenza__number {
    display: inline-block;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans);
    font-size: var(--wp--preset--font-size--headline-sm);
    font-weight: 700;
    color: var(--wp--preset--color--emergency);
    text-decoration: none;
  }
}
.mm-emergenza__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wp--preset--color--on-surface-variant);
  cursor: pointer;
}
.mm-emergenza__close::before { --mm-ico: var(--mm-ico-close); width: 24px; height: 24px; }
.mm-emergenza__close:hover { background-color: var(--wp--preset--color--surface-blue); color: var(--wp--preset--color--on-surface); }

/* --- Barra azioni mobile (fissa in basso, solo sotto 768px) --- */
/* ".wp-block-buttons.": WordPress applica "body .is-layout-flex { display: flex }" con specificita' (0,1,1) */
.wp-block-buttons.mm-mobilebar { display: none; }

/* --- Responsive --- */
@media (max-width: 1279.98px) {
  .mm-topbar__hours { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .wp-block-group.mm-brand__text { display: none; }
  .mm-nav .wp-block-navigation__container { gap: 20px; }
}
/* Sotto 1024px il menu passa all'hamburger (il blocco Navigation lo farebbe solo sotto 600px) */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .mm-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .mm-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023.98px) {
  .mm-navbar > .mm-brand { margin-right: auto; }
  .mm-navbar { gap: 8px; padding: 0 12px 0 24px; }
  .mm-emergenza-btn { order: 2; }
  .mm-nav { order: 3; }
}
@media (max-width: 767.98px) {
  .wp-block-group.mm-topbar { min-height: 36px; justify-content: center; flex-wrap: wrap; font-size: 12px; }
  /* indirizzo e telefono interi: se non stanno su una riga (sotto ~414px) vanno su due righe centrate */
  .wp-block-group.mm-topbar__info { flex-wrap: wrap; justify-content: center; gap: 2px 16px; padding-block: 4px; }
  .mm-topbar__info a { white-space: nowrap; }
  .mm-topbar__info .mm-ico { --mm-ico-size: 14px; }
  .wp-block-buttons.mm-topbar__actions { display: none; }
  .mm-navbar-wrap { padding-top: 8px; }
  .mm-navbar { min-height: 64px; padding: 0 8px 0 16px; }
  .mm-emergenza-btn { padding: 8px 14px; gap: 6px; font-size: 13px; }
  .mm-emergenza-btn__icon,
  .mm-emergenza-btn__label { display: none; }
  .mm-emergenza-btn__label-short { display: inline; }
  .mm-navbar > .mm-emergenza { padding: 40px 24px 32px; border-radius: 24px; }

  .wp-block-buttons.mm-mobilebar {
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    box-sizing: border-box;
    margin: 0;
    padding: 12px var(--wp--style--root--padding-left, 20px) calc(12px + env(safe-area-inset-bottom));
    gap: 12px;
    background-color: var(--wp--preset--color--surface);
    border-top: 1px solid var(--wp--preset--color--outline);
  }
  .mm-mobilebar .wp-block-button { flex: 1 1 0; }
  .mm-mobilebar .wp-block-button__link { display: flex; justify-content: center; width: 100%; padding-top: 0; padding-bottom: 0; min-height: 44px; }
  .mm-mobilebar .mm-ico { --mm-ico-size: 18px; }
  /* spazio in fondo alla pagina: la barra non deve coprire il footer */
  .wp-site-blocks { padding-bottom: 68px; }
}
@media (max-width: 639.98px) {
  .wp-block-group.mm-brand__text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-emergenza-btn__dot::after { animation: none; }
  .mm-emergenza, .mm-emergenza::backdrop { transition: none; }
}