/*
 * Watersports Center, "Capitoli di colore" (DESIGN.md). Testata, pannello del menu, barra Prenota/WhatsApp, footer.
 * Tutto sta sotto .ws: finché Elementor è attivo, il suo kit (.elementor-kit-5 a, button, h1-h5) colora link,
 * bottoni e titoli di tutta la pagina; le regole con .ws davanti escono dopo e pesano di più. Per link e bottoni
 * colorati va scritto anche lo stato :hover/:focus.
 */
/* ---------- testata ---------- */
.ws-head{position:relative;z-index:20;display:flex;align-items:stretch;height:64px;background:var(--paper)}
.ws-head .wm{background:var(--ink);display:flex;align-items:center;padding:0 max(var(--m),env(safe-area-inset-left,0px))}
.ws-head .wm img{height:30px;width:auto}
.ws-head .mainnav{background:var(--teal);display:flex;align-items:center;gap:24px;padding:0 24px;min-width:42%;font-size:var(--s-small);font-weight:500}
.ws-head .mainnav>a:hover{text-decoration:underline;text-underline-offset:.3em}
.ws-head .mainnav>a[aria-current]{text-decoration:underline;text-underline-offset:.3em}
.ws-head .nv{position:relative;height:100%;display:flex;align-items:center}
.ws-head .nv>button,.ws-head .nv>button:hover,.ws-head .nv>button:focus{font:500 var(--s-small)/1 var(--font);color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;height:100%}
.ws-head .nv>button::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ws-head .nv>button[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.ws-head .nv>button:hover{text-decoration:underline;text-underline-offset:.3em}
.ws-head .dd{position:absolute;top:100%;left:-24px;width:max-content;min-width:340px;padding:12px 0;background:var(--paper);color:var(--ink);box-shadow:0 18px 40px rgba(19,19,19,.18); /* taste-skill-ignore: menu aperto */ z-index:5}
.ws-head .dd[hidden]{display:none}
.ws .dd a,.ws .sg a{display:flex;justify-content:space-between;align-items:baseline;gap:40px;padding:12px 24px;font-size:var(--s-body);font-weight:500}
.ws .dd a:hover{background:var(--mist)}
.ws .dd a>span{white-space:nowrap}
.ws .dd-all a{font-weight:900}
.ws .from{white-space:nowrap;font-size:var(--s-small);font-weight:400}
.ws-head .act{margin-left:auto;display:flex;align-items:center;padding-right:max(var(--m),env(safe-area-inset-right,0px));padding-left:12px}
.ws-head .act .btn{min-height:48px}
.ws .cart,.ws .cart:hover,.ws .cart:focus{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;margin-right:8px;background:var(--paper);color:var(--ink);font:500 var(--s-small)/1 var(--font)}
.ws .cart:hover{background:var(--mist)}
.ws-head .menu{display:none}

@media (max-width:1100px){
	.ws-head .mainnav{display:none}
	.ws-head .menu,.ws-head .menu:hover,.ws-head .menu:focus{display:flex;align-items:center;background:var(--teal);padding:0 22px;font:500 var(--s-body)/1 var(--font);color:var(--ink);cursor:pointer}
}
@media (max-width:760px){
	.ws-head{height:56px}
	.ws-head .wm{padding-right:16px}
	.ws-head .act{padding:0}
	.ws-head .act .btn{display:none}
	.ws .cart,.ws .cart:hover,.ws .cart:focus{margin:0;background:none;padding:0 8px}
	.ws-head .menu,.ws-head .menu:hover,.ws-head .menu:focus{background:none;padding:0 max(var(--m),env(safe-area-inset-right,0px)) 0 8px;text-decoration:underline;text-underline-offset:.3em}
}

/* ---------- pannello del menu ---------- */
.ws.sheet{position:fixed;inset:0;z-index:100000;background:var(--paper);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.ws.sheet[hidden]{display:none}
.ws .sheet-top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 max(var(--m),env(safe-area-inset-right,0px)) 0 max(var(--m),env(safe-area-inset-left,0px));flex:none}
.ws .sheet-top img{height:28px;width:auto}
.ws .close,.ws .close:hover,.ws .close:focus{font:500 var(--s-body)/1 var(--font);padding:12px 0;text-decoration:underline;text-underline-offset:.3em;cursor:pointer;color:var(--ink)}
.ws .sheet-body{flex:1;overflow-y:auto;padding:8px max(var(--m),env(safe-area-inset-right,0px)) 24px max(var(--m),env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:24px}
.ws .sg h2{font-size:var(--s-lead);font-weight:900;letter-spacing:-.02em;line-height:1.1;margin-bottom:4px}
.ws .sg a{padding:10px 0}
.ws .sheet-plain a{display:block;padding:6px 0;font-size:var(--s-lead);font-weight:900;letter-spacing:-.02em}
.ws .sheet-sec{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:var(--s-small);padding-top:8px}
.ws .langs{display:inline-flex;gap:12px}
.ws .langs b{font-weight:900}
.ws .sheet-act{flex:none;display:flex;gap:8px;padding:12px max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:var(--mist)}
.ws .sheet-act .btn{flex:1}
.js .ws.sheet:not([hidden]) .sheet-body>*{animation:ws-rise .5s var(--ease) both}
.js .ws.sheet:not([hidden]) .sheet-body>*:nth-child(2){animation-delay:.05s}
.js .ws.sheet:not([hidden]) .sheet-body>*:nth-child(3){animation-delay:.1s}
.js .ws.sheet:not([hidden]) .sheet-body>*:nth-child(n+4){animation-delay:.15s}
@keyframes ws-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.ws-lock{overflow:hidden}
@media (min-width:1101px){.ws.sheet{display:none!important}}

/* ---------- barra Prenota/WhatsApp su telefono ---------- */
.ws.dock{display:none}
@media (max-width:760px){
	.ws.dock{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:9990;background:var(--paper);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));box-shadow:0 -8px 24px rgba(19,19,19,.14); /* taste-skill-ignore: barra fissa */ transform:translateY(110%);transition:transform .35s var(--ease)}
	.ws.dock.show{transform:none}
	.ws.dock .btn{flex:1;min-height:48px;padding:0 10px}
}

/* Il bottone flottante di Weglot coprirebbe la barra e il footer: le lingue sono nel pannello e nel footer. */
aside.country-selector.weglot-default{display:none!important}

/* ---------- footer: DERVIO a blocchi ---------- */
.ws.foot{background:var(--ink);color:var(--paper);padding-block:48px 28px;display:flex;flex-direction:column;gap:40px}
.ws .blocks{display:flex;gap:4px;height:clamp(110px,14svh,160px);align-items:flex-end}
.ws .blocks span{flex:1;display:flex;align-items:flex-end;justify-content:center;color:var(--ink);font-weight:900;font-size:clamp(2.4rem,7.4vw,7.6rem);line-height:.8;letter-spacing:-.04em;transform-origin:bottom;transition:transform .6s var(--ease)}
.ws .blocks span:hover{transform:scaleY(1.04)}
.ws .blocks span:nth-child(1){height:100%;background:var(--teal)}
.ws .blocks span:nth-child(2){height:86%;background:var(--paper)}
.ws .blocks span:nth-child(3){height:94%;background:var(--teal-deep);color:var(--paper)}
.ws .blocks span:nth-child(4){height:82%;background:var(--paper)}
.ws .blocks span:nth-child(5){height:98%;background:var(--teal)}
.ws .blocks span:nth-child(6){height:90%;background:var(--stone)}
.ws .fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:36px;font-size:var(--s-small)}
.ws .fcol{grid-column:span 3}
.ws .fcol h3{font-size:var(--s-small);font-weight:500;letter-spacing:0;line-height:1.3;color:#9FB5AF;margin-bottom:12px}
.ws .fcol ul{display:flex;flex-direction:column;gap:10px}
.ws .fcol ul a:hover{text-decoration:underline;text-underline-offset:.25em}
.ws.foot .last{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px 28px;font-size:var(--s-small);color:#C9D2CF}
.ws.foot .last a:hover{text-decoration:underline}
.ws.foot .last>span{display:inline-flex;flex-wrap:wrap;gap:16px}
@media (max-width:1000px){.ws .fcol{grid-column:span 6}}
@media (max-width:760px){
	.ws .blocks{height:96px}
	.ws .blocks span{font-size:13vw}
	.ws .fgrid{grid-template-columns:1fr 1fr;row-gap:32px}
	.ws .fcol{grid-column:span 1}
	.ws.foot .last{flex-direction:column}
	.ws.foot{padding-bottom:calc(28px + 72px + env(safe-area-inset-bottom,0px))} /* spazio per la barra fissa */
}

/* ---------- 404 ---------- */
.ws-404{padding-block:clamp(72px,10vw,160px);display:flex;flex-direction:column;align-items:flex-start;gap:24px;font-family:var(--font);color:var(--ink)}
.ws-404 h1{font-family:var(--font);font-size:var(--s-display);font-weight:900;letter-spacing:-.045em;line-height:.9;max-width:12ch;margin:0}
.ws-404 p{font-size:var(--s-lead);margin:0}
.ws-404 .ws-404-links{display:flex;flex-wrap:wrap;align-items:center;gap:24px}

/* ---------- accessibilità ---------- */
.skip-link.screen-reader-text:focus{z-index:100001}

@media (prefers-reduced-motion:reduce){
	.ws .btn,.ws .blocks span,.ws.dock{transition:none!important}
	.js .ws.sheet:not([hidden]) .sheet-body>*{animation:none!important}
}