/* /partials/menu.css

   Stile menu con NAV trasparente.

   Il pannello (drawer) resta leggibile, overlay semitrasparente.

*/



:root{

  --scr-nav-height: 80px;

  --scr-bg: rgba(0,0,0,0);                 /* NAV trasparente */

  --scr-panel-bg: rgba(3,3,8,0.92);        /* drawer */

  --scr-overlay: rgba(0,0,0,0.45);

  --scr-text: #fff;

  --scr-accent: #e17bff;

  --scr-thin: rgba(255,255,255,0.16);

}



.scr-overlay{

  position: fixed;

  inset: 0;

  background: var(--scr-overlay);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity .25s ease, visibility .25s ease;

  z-index: 900;

}



.scr-nav{

  position: fixed;

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

  height: var(--scr-nav-height);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 20px;

  box-sizing: border-box;

  background: var(--scr-bg);               /* trasparente */

  z-index: 1000;

}



.scr-logo{

  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

}

.scr-logo img{

  height: 56px;

  width: auto;

  display: block;

}

.scr-wordmark{

  font-family: "Neuzeit S", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 0.11em;

  line-height: 0.95;

  text-transform: uppercase;

  color: var(--scr-text);

}



/* button */

.scr-3d-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--scr-text);
  padding: 4px 0;
}

.scr-3d-btn:focus-visible{

  outline: 2px solid var(--scr-accent);

  outline-offset: 4px;

}



.scr-3d-btn model-viewer{
  display: block;
  width: 52px;
  height: 52px;
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  opacity: 1;
  visibility: visible;
}



.scr-3d-btn .bars{

  display: inline-flex;

  flex-direction: column;

  justify-content: center;

  gap: 4px;

}

.scr-3d-btn .bars i{

  display: block;

  width: 18px;

  height: 2px;

  border-radius: 999px;

  background: var(--scr-text);

  transition: transform .25s ease, opacity .2s ease;

}



/* drawer */

.scr-drop{

  position: fixed;

  top: var(--scr-nav-height);

  right: 0;

  width: min(320px, 82vw);

  max-height: calc(100vh - var(--scr-nav-height));

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  background: var(--scr-panel-bg);

  color: var(--scr-text);

  padding: 18px 20px 24px;

  box-sizing: border-box;

  transform: translateX(100%);

  transition: transform .28s ease;

  z-index: 950;

  border-left: 1px solid var(--scr-thin);

  backdrop-filter: blur(10px);

}



.scr-drop-list{

  list-style: none;

  margin: 0;

  padding: 0;

  font-family: "Neuzeit S", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 13px;

}

.scr-drop-list > li + li{ margin-top: 12px; }



.scr-drop a{

  color: var(--scr-text);

  text-decoration: none;

}

.scr-drop a:hover{ color: var(--scr-accent); }



.scr-glb-link a{ font-weight: 800; }



.scr-acc-btn{

  border: 0;

  background: none;

  color: var(--scr-text);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 13px;

  padding: 0;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}

.scr-acc-btn:focus-visible{

  outline: 2px solid var(--scr-accent);

  outline-offset: 4px;

}

.scr-acc-btn::after{

  content:"+";

  font-size: 14px;

  transform-origin: center;

  transition: transform .2s ease;

}



.scr-acc-panel{

  list-style: none;

  margin: 8px 0 0;

  padding: 0 0 0 10px;

  border-left: 1px solid var(--scr-thin);

  display: none;

}

.scr-acc-panel li + li{ margin-top: 6px; }



/* open states (class on :root) */

.scr-menu-open .scr-overlay{

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}

.scr-menu-open .scr-drop{ transform: translateX(0); }



.scr-menu-open .scr-3d-btn .bars i:nth-child(1){

  transform: translateY(6px) rotate(45deg);

}

.scr-menu-open .scr-3d-btn .bars i:nth-child(2){ opacity: 0; }

.scr-menu-open .scr-3d-btn .bars i:nth-child(3){

  transform: translateY(-6px) rotate(-45deg);

}



/* accordion open */

.scr-acc-open .scr-acc-panel{ display: block; }

.scr-acc-open .scr-acc-btn::after{ transform: rotate(45deg); }



@media (min-width: 960px){

  .scr-nav{ padding: 16px 32px; }

  .scr-logo img{ height: 64px; }

  .scr-wordmark{ font-size: 18px; }

  .scr-drop{

    top: calc(var(--scr-nav-height) + 8px);

    width: 360px;

    padding: 20px 24px 26px;

  }

}



@media (max-width: 480px){

  .scr-wordmark{ font-size: 14px; letter-spacing: 0.1em; }

  .scr-logo img{ height: 48px; }

  .scr-3d-btn model-viewer{ width: 46px; height: 46px; }

}



/* Always keep hamburger visible as robust control */
.scr-3d-btn .bars{ display: inline-flex !important; }


/* Keep model-viewer aligned */

.scr-3d-btn model-viewer{
  width: 52px;
  height: 52px;
  display: block;
  background: rgba(0,0,0,0.24) !important;
}