/* =====================================================
   BM HEADER NAV — Stili header e mega-menu BioMarin
   Hello Elementor Child Theme
   =====================================================
   NOTA: "Futura PT" è un font commerciale.
   Deve essere caricato separatamente (Adobe Fonts /
   Typekit oppure self-hosted). Il CSS lo referenzia
   già con il nome corretto; aggiungere il @font-face
   o lo snippet di Adobe Fonts in functions.php.
   ===================================================== */

/* --------------------------------------------------
   VARIABILI HEADER
   -------------------------------------------------- */
:root {
  /* Dimensioni esatte da specifiche */
  --bm-header-height:     80px;         /* altezza fissa */
  --bm-header-max-width:  1440px;       /* larghezza max */
  --bm-mega-padding-x:    80px;         /* padding orizzontale tendina */
  /* padding-y gestito direttamente in .bm-mega-menu-inner (top/bottom separati) */

  /* Colori brand */
  --bm-blue:              #004993;      /* colore ufficiale testi */
  --bm-blue-hover:        #003070;      /* hover leggermente più scuro */
  --bm-header-bg:         #ffffff;
  --bm-header-border:     #e4eaf4;
  --bm-header-shadow:     0 2px 12px rgba(0, 73, 147, 0.07);
  --bm-divider:           #c8d6ea;

  --bm-btn-bg:            #1a3d7a;
  --bm-btn-hover:         #002060;

  /* Font */
  --bm-font-futura:       'Futura PT', 'Futura', 'Century Gothic', Arial, sans-serif;
  --bm-font-fallback:     'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* z-index */
  --bm-header-z:          1100;
  --bm-mega-z:            1090;
  --bm-overlay-z:         1080;

  /* Animazione */
  --bm-ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --bm-dur:               0.30s;
}

/* --------------------------------------------------
   BOX-SIZING RESET
   -------------------------------------------------- */
.bm-site-header *,
.bm-mega-menu * {
  box-sizing: border-box;
}

/* ====================================================
   SITE HEADER  —  1440 × 80 px
   ==================================================== */
.bm-site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--bm-header-z);
  background: var(--bm-header-bg);
  border-bottom: 1px solid var(--bm-header-border);
  box-shadow: var(--bm-header-shadow);
  transition: box-shadow var(--bm-dur) var(--bm-ease),
              border-color var(--bm-dur) var(--bm-ease);
}

.bm-site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 73, 147, 0.12);
}

.bm-site-header.menu-open {
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Riga interna: larghezza max 1440px, altezza 80px */
.bm-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  max-width: var(--bm-header-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--bm-mega-padding-x); /* 80px sx/dx */
  height: var(--bm-header-height);     /* 80px */
  gap: 2rem;
}

/* ====================================================
   MENU TRIGGER (hamburger + "MENU")
   ==================================================== */
.bm-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0;
  font-family: var(--bm-font-futura);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bm-blue);
  text-transform: uppercase;
  transition: color var(--bm-dur) var(--bm-ease);
  flex-shrink: 0;
  line-height: 1;
  justify-self: start;
}

.bm-menu-trigger:hover  { color: var(--bm-blue-hover); }

.bm-menu-trigger:focus-visible {
  outline: 2px solid var(--bm-blue);
  outline-offset: 4px;
  border-radius: 3px;
}

.bm-menu-label {
  font-size: 15px;
}

/* Tre linee hamburger */
.bm-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  height: 16px;
  flex-shrink: 0;
}

.bm-hamburger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--bm-dur) var(--bm-ease),
              opacity   var(--bm-dur) var(--bm-ease),
              width     var(--bm-dur) var(--bm-ease);
  transform-origin: center;
}
.bm-hamburger span:nth-child(1) { width: 100%; }
.bm-hamburger span:nth-child(2) { width: 100%; }
.bm-hamburger span:nth-child(3) { width: 100%; }

/* Stato aperto → × */
.bm-menu-trigger[aria-expanded="true"] .bm-hamburger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  width: 100%;
}
.bm-menu-trigger[aria-expanded="true"] .bm-hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.bm-menu-trigger[aria-expanded="true"] .bm-hamburger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  width: 100%;
}

/* ====================================================
   LOGO SITO (centro header)
   ==================================================== */
.bm-site-logo {
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bm-site-logo a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.bm-logo-img {
  max-height: 52px;
  width: auto;
  display: block;
}

.bm-logo-text {
  font-family: var(--bm-font-futura);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bm-blue);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* ====================================================
   AZIONI DESTRA (CERCA CENTRI + logo BioMarin)
   ==================================================== */
.bm-header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
  justify-self: end;
}

/* Pulsante CERCA CENTRI */
.bm-btn-cerca-centri {
  display: inline-flex;
  align-items: center;
  background: var(--bm-btn-bg);
  color: #fff;
  font-family: var(--bm-font-futura);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 1.6rem;
  border-radius: 50px;
  white-space: nowrap;
  transition: background var(--bm-dur) var(--bm-ease),
              box-shadow  var(--bm-dur) var(--bm-ease),
              transform   var(--bm-dur) var(--bm-ease);
}

.bm-btn-cerca-centri:hover {
  background: var(--bm-btn-hover);
  box-shadow: 0 4px 18px rgba(0, 73, 147, 0.30);
  transform: translateY(-1px);
  color: #fff;
}

/* Logo BioMarin */
.bm-biomarin-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity var(--bm-dur) var(--bm-ease);
}

.bm-biomarin-logo-link:hover { opacity: 0.72; }

.bm-biomarin-logo {
  height: 26px;
  width: auto;
  display: block;
}

/* ====================================================
   OVERLAY SFONDO
   ==================================================== */
.bm-menu-overlay {
  position: fixed;
  inset: 0;
  top: var(--bm-header-height);
  background: rgba(0, 24, 80, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--bm-overlay-z);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bm-dur) var(--bm-ease);
}

.bm-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ====================================================
   MEGA MENU PANEL — slide-down animato
   ==================================================== */
.bm-mega-menu {
  position: fixed;
  top: var(--bm-header-height);  /* subito sotto header */
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--bm-mega-z);
  background: #fff;
  border-bottom: 1px solid var(--bm-header-border);
  box-shadow: 0 8px 40px rgba(0, 73, 147, 0.10);

  /* Stato CHIUSO */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  will-change: max-height, opacity, transform;

  transition:
    max-height calc(var(--bm-dur) * 1.15) var(--bm-ease),
    opacity    calc(var(--bm-dur) * 0.85) var(--bm-ease),
    transform  var(--bm-dur) var(--bm-ease);
}

/* Stato APERTO */
.bm-mega-menu.open {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Wrapper interno: 1440px, padding 80px sx/dx */
.bm-mega-menu-inner {
  max-width: var(--bm-header-max-width);
  width: 100%;
  margin: 0 auto;
  padding-top:    60px;                          /* padding sopra le voci */
  padding-bottom: 40px;                          /* padding sotto le voci */
  padding-left:   var(--bm-mega-padding-x);      /* 80px */
  padding-right:  var(--bm-mega-padding-x);      /* 80px */
}

/* ====================================================
   GRIGLIA COLONNE MEGA MENU
   col-storie | col-appunti | divider(1px) | col-extra
   ==================================================== */
.bm-mega-grid {
  display: grid;
  /* Storie(1fr) | Appunti(1.8fr — ospita 2 sottocolonne) | 1px | Extra(1fr) */
  grid-template-columns: 1fr 1.8fr 1px 1fr;
  gap: 0 56px;
  align-items: start;
}

/* ====================================================
   SEPARATORE VERTICALE — max 180px, centrato verticalmente
   ==================================================== */
.bm-col-divider {
  background: var(--bm-divider);
  align-self: center;   /* centra verticalmente nella griglia */
  height: 180px;        /* altezza fissa massima come da spec */
  max-height: 180px;
  width: 1px;
}

/* ====================================================
   HEADER COLONNA — link archivio (STORIE PHE / APPUNTI PHE)
   ==================================================== */
.bm-col-header {
  margin-bottom: 24px;  /* spazio tra titolo archivio e voci menu */
}

/* Wrapper voci menu: padding sopra e sotto */
.bm-col-items {
  padding-top: 4px;
  padding-bottom: 8px;
}


.bm-col-archive-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  gap: 2px;
}

/* Titolo archivio: bold, uppercase */
.bm-col-archive-title {
  display: block;
  font-family: var(--bm-font-futura);
  font-size: 18px;
  font-weight: 700;       /* bold */
  font-style: normal;
  text-align: left;
  color: var(--bm-blue);  /* #004993 */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  transition: color var(--bm-dur) var(--bm-ease);
}

/* Freccia → sotto il titolo archivio */
.bm-col-archive-arrow {
  display: block;
  font-family: 'Futura PT', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--bm-blue);
  line-height: 1;
  transition: color    var(--bm-dur) var(--bm-ease),
              transform var(--bm-dur) var(--bm-ease);
}

.bm-col-archive-link:hover .bm-col-archive-title,
.bm-col-archive-link:hover .bm-col-archive-arrow {
  color: var(--bm-blue-hover);
}

.bm-col-archive-link:hover .bm-col-archive-arrow {
  transform: translateX(3px);
}

/* ====================================================
   VOCI DI MENU FLAT (output standard wp_nav_menu)
   ul.bm-flat-menu > li.menu-item > a
   ==================================================== */

/* Reset */
ul.bm-flat-menu,
ul.bm-flat-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.bm-flat-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Singola voce */
ul.bm-flat-menu > li.menu-item > a {
  display: block;
  font-family: var(--bm-font-futura);
  font-size: 18px;
  font-weight: 400;       /* normal */
  font-style: normal;
  text-align: left;
  color: var(--bm-blue);  /* #004993 */
  line-height: 18px;
  text-decoration: none;
  padding: 7px 0;         /* distanza tra voci */
  transition: color        var(--bm-dur) var(--bm-ease),
              padding-left var(--bm-dur) var(--bm-ease);
}

ul.bm-flat-menu > li.menu-item > a:hover {
  color: var(--bm-blue-hover);
  padding-left: 4px;
}

/* ── 2 COLONNE CSS per Appunti PHE ───────────────── */
ul.bm-flat-menu.bm-flat-menu--2col {
  display: block;
  columns: 2;
  column-gap: 40px;
}

ul.bm-flat-menu.bm-flat-menu--2col > li.menu-item {
  break-inside: avoid;
}

/* Placeholder (opacità ridotta finché menu non assegnato) */
ul.bm-flat-menu--placeholder {
  opacity: 0.4;
}

/* Note visibili solo agli amministratori */
.bm-menu-note {
  font-family: var(--bm-font-fallback);
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  line-height: 1.5;
}

.bm-menu-note a {
  color: var(--bm-blue);
  text-decoration: underline;
}

}

/* ====================================================
   COLONNA EXTRA — link statici (CONOSCERE LA PKU / QUADERNO)
   font-family: Futura PT | font-size: 18px | bold | #004993
   Il blocco di ogni voce ha min-height 155px come da spec
   ==================================================== */
.bm-mega-col--extra {
  padding-left: 4px;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 0;
}

.bm-static-link {
  display: flex;
  align-items: flex-start;
  min-height: 155px;          /* altezza blocco voce da spec */
}

.bm-static-link__anchor {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-decoration: none;
}

.bm-static-link__title {
  display: block;
  font-family: var(--bm-font-futura);
  font-size: 18px;
  font-weight: 700;           /* bold */
  font-style: normal;
  text-align: left;
  color: var(--bm-blue);      /* #004993 */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
  max-width: 210px;
  transition: color var(--bm-dur) var(--bm-ease);
}

.bm-static-link__arrow {
  display: block;
  font-family: 'Futura PT', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--bm-blue);
  line-height: 1;
  transition: color     var(--bm-dur) var(--bm-ease),
              transform var(--bm-dur) var(--bm-ease);
}

.bm-static-link__anchor:hover .bm-static-link__title,
.bm-static-link__anchor:hover .bm-static-link__arrow {
  color: var(--bm-blue-hover);
}

.bm-static-link__anchor:hover .bm-static-link__arrow {
  transform: translateX(4px);
}

/* Hide mobile-specific menu actions on desktop */
.bm-mobile-menu-actions {
  display: none;
}

/* ====================================================
   RESPONSIVE — LAPTOP LARGO (1025–1440px)
   Scaling proporzionale del padding
   ==================================================== */
@media (max-width: 1440px) and (min-width: 1025px) {
  :root {
    --bm-mega-padding-x: 60px;
  }
}

/* ====================================================
   RESPONSIVE — TABLET LANDSCAPE (769–1024px)
   ==================================================== */
@media (max-width: 1024px) {
  :root {
    --bm-header-height:   72px;
    --bm-mega-padding-x:  40px;
  }

  .bm-header-inner {
    padding: 0 40px;
    gap: 1.5rem;
  }

  .bm-mega-menu-inner {
    padding-top:    48px;
    padding-bottom: 32px;
  }

  .bm-mega-grid {
    grid-template-columns: 1fr 1.5fr 1px 1fr;
    gap: 0 40px;
  }

  /* Link statici: riduci altezza blocco su tablet */
  .bm-static-link {
    min-height: 100px;
  }
}

/* ====================================================
   RESPONSIVE — TABLET PORTRAIT (601–768px)
   Layout 2 colonne
   ==================================================== */
@media (max-width: 768px) {
  :root {
    --bm-header-height:   68px;
    --bm-mega-padding-x:  28px;
  }

  .bm-mega-menu-inner {
    padding-top:    32px;
    padding-bottom: 40px;
  }

  .bm-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px;
    height: var(--bm-header-height);
  }

  .bm-menu-trigger {
    grid-column: auto;
    justify-self: auto;
  }

  .bm-site-logo {
    grid-column: auto;
    justify-self: auto;
    display: flex;
    align-items: center;
  }

  .bm-header-actions {
    display: none;
  }

  /* Mobile-specific menu styles */
  .bm-mega-menu {
    top: var(--bm-header-height);
    height: calc(100vh - var(--bm-header-height));
    height: calc(100dvh - var(--bm-header-height));
    max-height: none;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform var(--bm-dur) var(--bm-ease),
                opacity var(--bm-dur) var(--bm-ease);
  }

  .bm-mega-menu.open {
    max-height: none;
    transform: translateY(0);
    opacity: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bm-mobile-menu-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--bm-divider);
    width: 100%;
  }

  .bm-mobile-btn-cerca-centri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bm-btn-bg);
    color: #fff;
    font-family: var(--bm-font-futura);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    width: 100%;
    max-width: 280px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 73, 147, 0.15);
    transition: background var(--bm-dur) var(--bm-ease),
                box-shadow  var(--bm-dur) var(--bm-ease),
                transform   var(--bm-dur) var(--bm-ease);
  }

  .bm-mobile-btn-cerca-centri:hover {
    background: var(--bm-btn-hover);
    box-shadow: 0 4px 18px rgba(0, 73, 147, 0.30);
    transform: translateY(-1px);
    color: #fff;
  }

  .bm-mobile-biomarin-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: opacity var(--bm-dur) var(--bm-ease);
  }

  .bm-mobile-biomarin-logo-link:hover {
    opacity: 0.72;
  }

  .bm-mobile-biomarin-logo {
    height: 24px;
    width: auto;
    display: block;
  }

  /* Griglia: 2 col + col-extra sotto */
  .bm-mega-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 28px 28px;
  }

  /* Nasconde il divider verticale */
  .bm-col-divider {
    display: none;
  }

  /* Col-extra a piena larghezza, voci in riga */
  .bm-mega-col--extra {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 0;
    border-top: 1px solid var(--bm-divider);
    padding-top: 24px;
    padding-left: 0;
  }

  .bm-static-link {
    flex: 1;
    min-height: auto;
    padding-bottom: 0;
    padding-right: 24px;
  }

  /* Sottovoci APPUNTI: 1 colonna su tablet */
  ul.bm-flat-menu.bm-flat-menu--2col {
    columns: 1;
    column-gap: 0;
  }

  /* Font leggermente ridotti */
  .bm-col-archive-title,
  .bm-col-archive-arrow,
  ul.bm-flat-menu > li.menu-item > a,
  .bm-static-link__title,
  .bm-static-link__arrow {
    font-size: 16px;
  }
}

/* ====================================================
   RESPONSIVE — MOBILE (≤ 600px)
   Layout colonna singola
   ==================================================== */
@media (max-width: 600px) {
  :root {
    --bm-header-height:   60px;
    --bm-mega-padding-x:  20px;
  }

  .bm-mega-menu-inner {
    padding-top:    24px;
    padding-bottom: 32px;
  }

  .bm-header-inner {
    padding: 0 20px;
    gap: 0.75rem;
  }

  /* Header: comprimi logo */
  .bm-logo-img      { max-height: 38px; }

  /* Griglia: colonna singola */
  .bm-mega-grid {
    grid-template-columns: 1fr;
    gap: 24px 0;
  }

  .bm-col-divider { display: none; }

  /* Col-extra verticale */
  .bm-mega-col--extra {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--bm-divider);
    padding-top: 20px;
    padding-left: 0;
    grid-column: 1;
  }

  .bm-static-link {
    min-height: auto;
    padding-bottom: 20px;
  }

  .bm-static-link:last-child {
    padding-bottom: 0;
  }

  /* Font mobile */
  .bm-col-archive-title,
  .bm-col-archive-arrow,
  ul.bm-flat-menu > li.menu-item > a,
  .bm-static-link__title,
  .bm-static-link__arrow {
    font-size: 15px;
  }

  ul.bm-flat-menu > li.menu-item > a {
    line-height: 15px;
    padding: 5px 0;
  }
}