/* =========================================================

   Poggio Blog 2026 — menu.css (HEADER + OVERLAY)

   - Uses: html.has-overlay + .site-overlay.is-open

   - JS: assets/js/menu.js

   ========================================================= */



/* ---------- HEADER (fixed) ---------- */

.site-header{

  position: fixed;

  top: 0; left: 0; right: 0;

  z-index: 10020;

  background:#fff;

  border-bottom: 1px solid rgba(0,0,0,.10);

  padding: 24px 60px;

}



.header-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 24px;

}



.header-left{

  display:flex;

  align-items:center;

  gap: 18px;

}



/* Brand */

.site-brand{

  font-family: var(--serif);

  text-transform: uppercase;

  letter-spacing: .20em;

  font-size: 25px;

  opacity: .92;

}



/* Top nav (desktop) */

.site-nav .menu{

  display:flex;

  gap: 10px;

  align-items:center;

  list-style:none;

  margin:0;

}



.site-nav .menu a{

  font-family: var(--serif);

  text-transform: uppercase;

  letter-spacing: .14em;

  font-size: 1.15rem;

  opacity:.85;

  white-space: nowrap;

  padding-right: 10px;

  border-right: 1px solid rgba(0,0,0,.4);

}



.site-nav .menu a:hover{ 

  opacity: .65; 

  text-decoration: underline;

}



/* Burger / X */

.nav-toggle{

  width:44px;

  height:44px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  background:transparent;

  border:0;

  cursor:pointer;

  padding:0;

  position:relative;

  z-index: 10030; /* above overlay */

}

.burger{

  position:relative;

  width:18px;

  height:2px;

  background:#111;

  display:block;

}

.burger::before,

.burger::after{

  content:"";

  position:absolute;

  left:0;

  width:18px;

  height:2px;

  background:#111;

  transition: transform .18s ease, top .18s ease, opacity .18s ease;

}

.burger::before{ top:-6px; }

.burger::after{ top: 6px; }



html.has-overlay .burger{ background:transparent; }

html.has-overlay .burger::before{ top:0; transform:rotate(45deg); }

html.has-overlay .burger::after{ top:0; transform:rotate(-45deg); }



/* Mobile header */

@media (max-width: 980px){

  .site-header{ padding: 18px 20px; }

  .site-nav{ display:none; }

}



/* Space under fixed header */

body{ padding-top: 92px; }

@media (max-width: 980px){ body{ padding-top: 80px; } }



/* Lock scroll when overlay open */

html.has-overlay,

body.has-overlay{

  overflow: hidden;

}



/* Hide any theme "MENU" labels if present */

.site-nav-title,

.menu-label,

.header-menu-label,

.nav-label,

.menu-title,

.menu-text{

  display:none !important;

}



/* ---------- OVERLAY ---------- */

.site-overlay{

  display:none;

  position: fixed;

  inset: 0;

  background:#fff;

  z-index: 10010; /* under header, above page */

  overflow:auto;

}

.site-overlay.is-open{ display:block; }



.site-overlay-inner{

  min-height: 100%;

  width: 100%;

  max-width: none;

  margin: 0;

  padding: 42px 60px;

  padding-top: 106px; /* accounts for fixed header */

}



/* Brand/logo centered */

.overlay-brand{

  text-align:center;

  margin: 18px 0 44px;

}

.overlay-brand-link{ display:inline-block; }

.overlay-brand-logo{

  height: 90px;

  width: auto;

  display:block;

  margin: 0 auto;

}

@media (max-width: 900px){

  .overlay-brand{ margin: 10px 0 22px; }

  .overlay-brand-logo{ height: 64px; }

}



/* Reset lists */

.overlay-menu,

.overlay-menu ul{

  list-style:none;

  margin:0;

  padding:0;

}



/* Desktop columns */

.overlay-menu{

  display:grid;

  grid-template-columns: repeat(8, minmax(150px, 1fr));

  gap: 34px 32px;

  align-items:start;

}



/* Column title (top-level) */

.overlay-menu > li > a{

  display:block;

  font-family: var(--serif);

  font-size: 28px;

  margin: 0 0 14px;

}



/* Sub links */

.overlay-menu .sub-menu a{

  display:block;

  font-family: var(--serif);

  font-size: 18px;

  line-height: 1.65;

  opacity:.85;

  margin: 8px 0;

}

.overlay-menu .sub-menu a:hover{ opacity: .65; }



/* Desktop: parent titles not clickable when they have children */

.overlay-menu > li.menu-item-has-children > a{

  pointer-events:none;

  cursor:default;

}



@media (max-width: 1200px){

  .overlay-menu{ grid-template-columns: repeat(4, minmax(160px, 1fr)); }

}

@media (max-width: 900px){

  .site-overlay-inner{ padding: 30px 22px; padding-top: 100px; }

  .overlay-menu{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }

  .overlay-menu > li > a{ font-size: 18px; }

}

@media (max-width: 520px){

  .overlay-menu{ grid-template-columns: 1fr; }

}



/* Footer area in overlay */

.overlay-footer{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 24px;

  margin-top: 70px;

  padding-top: 26px;

  border-top: 1px solid rgba(0,0,0,.10);

}



.overlay-footer-left a{

  font-family: var(--serif);

  font-size: 16px;

  margin-right: 22px;

  opacity: .9;

}

.overlay-footer-left a:hover{ opacity: .65; }



.overlay-footer-right{

  display:flex;

  gap: 16px;

  align-items:center;

  opacity: .75;

  min-height: 22px;

}



@media (max-width: 900px){

  .overlay-footer{

    flex-direction:column;

    align-items:flex-start;

    margin-top: 40px;

  }

  .overlay-footer-left a{ margin-right: 16px; }

}



/* ---------- MOBILE ACCORDION ---------- */

@media (max-width: 900px){



  .overlay-menu{

    grid-template-columns: 1fr !important;

    gap: 0 !important;

  }



  .overlay-menu > li{

    padding: 18px 0;

    border-bottom: 1px solid rgba(0,0,0,.10);

  }



  /* In mobile: titles are clickable to expand */

  .overlay-menu > li.menu-item-has-children > a{

    pointer-events:auto;

    cursor:pointer;

  }



  .overlay-menu > li > a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size: 26px;

    margin: 0;

  }



  .overlay-menu > li.menu-item-has-children > a::after{

    content:"";

    width: 10px;

    height: 10px;

    border-right: 1px solid rgba(0,0,0,.6);

    border-bottom: 1px solid rgba(0,0,0,.6);

    transform: rotate(45deg);

    margin-left: 12px;

    transition: transform .2s ease;

  }



  .overlay-menu .sub-menu{

    display:none;

    padding-top: 14px;

  }



  .overlay-menu .sub-menu a{

    font-size: 16px;

    margin: 10px 0;

  }



  .overlay-menu > li.is-open > .sub-menu{ display:block; }

  .overlay-menu > li.is-open > a::after{ transform: rotate(-135deg); }



  .overlay-footer{

    margin-top: 28px;

    padding-top: 18px;

  }

}

/* aggiunta 7-2-26 */
/* =========================================================
   Overlay: SEZIONI solo mobile (accordion)
   ========================================================= */

.overlay-mobile-sections{
  display: none; /* di default off (desktop) */
  margin-top: 18px;
}

@media (max-width: 900px){
  .overlay-mobile-sections{
    display: block;
  }
}

.oms-toggle{
  width: 100%;
  display: flex;
  font-family: var(--serif); 
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding: 14px 0;
  font: inherit;
  font-size: 25px;  
  /*letter-spacing: .22em;*/
  /*text-transform: uppercase;*/
  cursor: pointer;
}

.oms-icon{
  width: 10px;
  height: 10px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-left: 10px;
}

.oms-toggle[aria-expanded="true"] .oms-icon{
  transform: rotate(-135deg);
}

.oms-panel{
  padding: 4px 0 10px;
}

.oms-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.oms-item + .oms-item{
  margin-top: 10px;
}

.oms-link{
  display: inline-block;
  text-decoration: none;
  opacity: .9;
}

.oms-link:hover{
  opacity: 1;
  text-decoration: underline;

}