/* ═══════════════════════════════════════════
   CUPRIO — MENU SERVIZI (dropdown desktop + accordion mobile)
   Usa le variabili :root già definite nel sito
   (--slate, --copper, --fog, --fog-dark, --r-*, --t, --ease).
   Va caricato DOPO il blocco <style> principale.
   ═══════════════════════════════════════════ */

/* ─── 1. Header sticky ───
   Prima lo sticky era sulla <nav>, ma la <nav> è l'unico figlio
   visibile dell'<header>: non aveva spazio per "attaccarsi" e scorreva via.
   Ora è l'intero header a restare in alto (nav + menu mobile). */
.site-header{position:sticky;top:0;z-index:500;}
.site-header .nav{position:relative;top:auto;}
/* Le ancore (/#faq, /#contatti…) non finiscono sotto l'header */
section[id]{scroll-margin-top:84px;}

/* ─── 2. Barra desktop ─── */
.nav-menu{
  margin-left:auto;height:100%;
  display:flex;align-items:center;gap:28px;
}
.nav-menu > a:not(.btn),
.nav-dd-toggle{
  font-family:var(--f-body);font-size:12px;font-weight:400;
  color:rgba(255,255,255,.6);white-space:nowrap;
  transition:color var(--t);
}
.nav-menu > a:not(.btn):hover,
.nav-dd-toggle:hover,
.nav-dd.open .nav-dd-toggle,
.nav-dd.is-current .nav-dd-toggle{color:#fff;}
.nav-menu > .btn{margin-left:8px;padding:9px 20px;font-size:11px;}

/* ─── 3. Dropdown Servizi ─── */
.nav-dd{position:relative;height:100%;display:flex;align-items:center;}
.nav-dd-toggle{display:inline-flex;align-items:center;gap:5px;padding:6px 0;}
.nav-dd-chevron{width:14px;height:14px;transition:transform var(--t) var(--ease);}
.nav-dd.open .nav-dd-chevron{transform:rotate(180deg);}

.nav-dd-panel{
  position:absolute;top:calc(100% - 12px);left:50%;
  width:min(600px, calc(100vw - 48px));
  padding-top:12px;                 /* ponte invisibile: l'hover non si perde */
  transform:translate(-50%,8px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
}
.nav-dd.open .nav-dd-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);
  transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s;
}
.nav-dd-inner{
  position:relative;
  background:var(--white);
  border:1px solid var(--fog-dark);
  border-radius:var(--r-xl);
  box-shadow:0 24px 60px rgba(13,20,32,.28);
  padding:10px;
}
.nav-dd-inner::before{          /* freccia verso "Servizi" */
  content:'';position:absolute;top:-7px;left:50%;
  width:12px;height:12px;background:var(--white);
  border-left:1px solid var(--fog-dark);border-top:1px solid var(--fog-dark);
  transform:translateX(-50%) rotate(45deg);
}

/* Voce servizio */
.dd-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px;border-radius:var(--r-lg);
  color:var(--slate);
  transition:background var(--t);
}
.dd-item:hover{background:var(--fog);}
.dd-item[aria-current="page"]{background:var(--fog);box-shadow:inset 3px 0 0 var(--copper);}

.dd-icon{
  flex-shrink:0;width:36px;height:36px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:rgba(192,104,48,.1);color:var(--copper);
}
.dd-icon svg{width:18px;height:18px;}

.dd-text{display:block;min-width:0;}
.dd-title{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:14px;font-weight:600;line-height:1.3;color:var(--slate);
}
.dd-desc{
  display:block;margin-top:4px;
  font-size:12.5px;line-height:1.5;color:var(--slate-mid);
}

/* Servizio principale: in evidenza, a tutta larghezza */
.dd-item--featured{background:var(--fog);padding:18px;margin-bottom:4px;}
.dd-item--featured:hover{background:var(--fog-dark);}
.dd-item--featured .dd-icon{width:44px;height:44px;background:var(--copper);color:#fff;}
.dd-item--featured .dd-icon svg{width:22px;height:22px;}
.dd-item--featured .dd-title{font-size:15px;}
.dd-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:500;color:var(--slate-mid);
  background:var(--white);border:1px solid var(--fog-dark);
  padding:2px 9px;border-radius:20px;
}
.dd-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--copper);}

.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}

/* Piede del pannello */
.dd-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:6px;padding:14px 14px 6px;
  border-top:1px solid var(--fog);
  font-size:12.5px;color:var(--slate-mid);
}
.dd-foot-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--slate);}
.dd-foot-link svg{width:16px;height:16px;color:var(--copper);transition:transform var(--t) var(--ease);}
.dd-foot-link:hover svg{transform:translateX(3px);}

/* ─── 4. Menu mobile: accordion Servizi ─── */
.nav-drawer.open{
  max-height:calc(100vh - 84px);
  max-height:calc(100dvh - 84px);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer-dd-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px 24px;text-align:left;
  font-size:14px;color:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:color var(--t),background var(--t);
}
.drawer-dd-toggle:hover,
.drawer-dd-toggle[aria-expanded="true"]{color:#fff;}
.drawer-dd-toggle svg{width:16px;height:16px;transition:transform var(--t) var(--ease);}
.drawer-dd-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

.drawer-sub{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  background:rgba(0,0,0,.16);
  transition:grid-template-rows .3s var(--ease),visibility 0s linear .3s;
}
.drawer-sub.open{
  grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .3s var(--ease),visibility 0s;
}
.drawer-sub-inner{overflow:hidden;min-height:0;}
.nav-drawer .drawer-sub a{
  display:flex;align-items:center;gap:12px;
  padding:13px 24px 13px 28px;
  font-size:14px;color:rgba(255,255,255,.75);
}
.nav-drawer .drawer-sub a:hover,
.nav-drawer .drawer-sub a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.04);}
.nav-drawer .drawer-sub a svg{width:18px;height:18px;flex-shrink:0;color:var(--copper-lt);}

/* ─── 5. Focus da tastiera ─── */
.nav-menu > a:focus-visible,
.nav-dd-toggle:focus-visible,
.dd-foot-link:focus-visible,
.drawer-dd-toggle:focus-visible,
.nav-drawer a:focus-visible{outline:2px solid var(--copper-lt);outline-offset:3px;border-radius:4px;}
.dd-item:focus-visible{outline:2px solid var(--copper);outline-offset:-2px;}

/* ─── 6. Responsive ─── */
@media(max-width:860px){ .nav-menu{display:none;} }
@media(min-width:861px){ .nav-drawer,.nav-drawer.open{display:none;} }

@media(prefers-reduced-motion:reduce){
  .nav-dd-panel,.nav-dd.open .nav-dd-panel,.drawer-sub,.drawer-sub.open,
  .nav-dd-chevron,.drawer-dd-toggle svg,.dd-foot-link svg{transition:none!important;}
}