/* ══ HEADER v7 — +20%, Verde Petrolio, Oxford Blue ══ */

/* TOPBAR: 46px (+20% da 38px) — su bianco, bordo verde petrolio */
.topbar{height:var(--topbar-h,46px);background:#1A1A1A;position:sticky;top:0;z-index:1001;border-bottom:2px solid var(--petrol,#006D5B)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;height:100%}
/* Testi piccoli topbar → su sfondo scuro = bianco */
.topbar__tag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:rgba(255,255,255,.75)}
.topbar__tag svg{color:var(--petrol,#006D5B)}
.topbar__right{display:flex;align-items:center;gap:22px}
.topbar__link{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:rgba(255,255,255,.65);text-decoration:none;transition:color var(--tr,.2s)}
.topbar__link svg{flex-shrink:0;color:var(--petrol,#006D5B)}
.topbar__link:hover{color:#fff}

/* MAIN HEADER: 86px (+20% da 72px) — bianco, bordo verde petrolio */
.main-header{height:var(--hdr-h,86px);background:#fff;border-bottom:3px solid var(--petrol,#006D5B);box-shadow:0 2px 10px rgba(0,0,0,.07);position:sticky;top:var(--topbar-h,46px);z-index:1000;transition:box-shadow var(--tr,.2s)}
.main-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.11)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4,32px);height:100%}

/* LOGO: 58px (+20% da 48px) */
.site-logo{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none}
.site-logo img{height:58px;width:auto;max-width:232px;display:block;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08));transition:filter var(--tr,.2s),transform var(--tr,.2s)}
.site-logo:hover img{filter:drop-shadow(0 2px 5px rgba(0,0,0,.14));transform:scale(1.02)}

/* NAV desktop */
.main-nav{display:flex;align-items:center;flex:1}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.nav-item{position:relative}
/* Link nav: verde petrolio, font leggermente più grande (+20% nav area) */
.nav-link{display:flex;align-items:center;gap:5px;padding:10px 18px;font-size:15px;font-weight:600;color:var(--petrol,#006D5B);text-decoration:none;border-radius:var(--r-md,8px);white-space:nowrap;transition:background var(--tr,.2s),color var(--tr,.2s)}
.nav-link:hover{background:var(--petrol-light,#E6F2EF);color:var(--petrol-dark,#005247)}
.nav-link.active{background:var(--petrol-light,#E6F2EF);color:var(--petrol-dark,#005247);font-weight:700}
.nav-link.active::after{content:'';position:absolute;bottom:-3px;left:18px;right:18px;height:3px;background:var(--petrol,#006D5B);border-radius:2px}
.nav-arrow{color:var(--petrol-soft,#4DA090);transition:transform var(--tr,.2s),color var(--tr,.2s);flex-shrink:0}
.nav-item.open .nav-arrow,.nav-item:hover .nav-arrow{transform:rotate(180deg);color:var(--petrol-dark,#005247)}

/* Header actions */
.hdr-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.hdr-cta{white-space:nowrap}

/* Bottone CTA header "Prenota Call" → testo arancio (regola specifica) */
.hdr-cta.btn-prenota{border-color:var(--arancio,#F28C28);color:var(--arancio,#F28C28)}
.hdr-cta.btn-prenota:hover{background:var(--arancio,#F28C28);color:#fff;border-color:var(--arancio,#F28C28)}

/* Bottone "Scopri stadi" header → verde (come nav) */
.hdr-cta.btn-green{border-color:var(--petrol,#006D5B);color:var(--petrol,#006D5B)}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:48px;height:48px;background:#fff;border:1.5px solid var(--fog-dark,#CBD5E0);border-radius:var(--r-md,8px);cursor:pointer;padding:0;box-shadow:var(--sh-xs);transition:all var(--tr,.2s)}
.hamburger:hover{border-color:var(--petrol,#006D5B);background:var(--petrol-light,#E6F2EF)}
.hb-line{display:block;width:22px;height:2px;background:var(--petrol,#006D5B);border-radius:2px;transition:transform .22s,opacity .22s}
.hamburger.open .hb-line:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open .hb-line:nth-child(2){opacity:0}
.hamburger.open .hb-line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ══ DROPDOWN — Bianco, bordo verde petrolio ══ */
.dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-10px);min-width:620px;background:#fff;border:1.5px solid var(--fog-dark,#CBD5E0);border-top:3px solid var(--petrol,#006D5B);border-radius:var(--r-lg,12px);box-shadow:0 12px 48px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.07);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--tr,.2s),visibility var(--tr,.2s),transform var(--tr,.2s);z-index:900}
.nav-item.open .dropdown,.nav-item:hover .dropdown{opacity:1;visibility:visible;pointer-events:all;transform:translateX(-50%) translateY(0)}
.dropdown::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:16px;height:16px;background:#fff;border-left:1.5px solid var(--fog-dark,#CBD5E0);border-top:1.5px solid var(--fog-dark,#CBD5E0);rotate:45deg}
.dropdown__in{display:grid;grid-template-columns:1fr 220px;padding:8px;gap:0}
.dd-col{padding:18px 16px}
/* Heading dropdown → oxford blue (piccolo, su bianco) */
.dd-heading{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--oxford,#002147);padding:0 12px 14px;margin:0;display:block}
.dd-list{list-style:none;padding:0;margin:0}
.dd-list li+li{margin-top:3px}
.dd-link{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:var(--r-md,8px);text-decoration:none;color:var(--petrol,#006D5B);font-weight:500;transition:background var(--tr,.2s),color var(--tr,.2s)}
.dd-link:hover{background:var(--petrol-light,#E6F2EF);color:var(--petrol-dark,#005247)}
/* Cerchio numero stadio — verde petrolio, hover pieno */
.dd-link__n{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--petrol-light,#E6F2EF);border:1.5px solid var(--petrol-mid,#B3D6CF);font-size:12px;font-weight:700;color:var(--petrol,#006D5B);display:flex;align-items:center;justify-content:center;transition:all var(--tr,.2s);font-family:var(--font,'Poppins')}
.dd-link:hover .dd-link__n{background:var(--petrol,#006D5B);border-color:var(--petrol,#006D5B);color:#fff}
.dd-link strong{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--petrol,#006D5B);letter-spacing:-.01em}
/* Testo piccolo sotto → oxford (su bianco) */
.dd-link em{display:block;font-size:12px;font-style:normal;color:var(--oxford,#002147);margin-top:2px;font-weight:500}
.dd-link:hover strong{color:var(--petrol-dark,#005247)}
/* Card promo nel dropdown — sfondo petrol, testo bianco */
.dd-promo{border-left:1.5px solid var(--fog,#E2E8F0);padding:8px}
.dd-promo__card{background:linear-gradient(145deg,var(--petrol,#006D5B) 0%,var(--petrol-dark,#005247) 100%);border-radius:var(--r-md,8px);padding:var(--s3,24px);height:100%;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 16px rgba(0,109,91,.25)}
/* Su sfondo verde → bianco */
.dd-promo__micro{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0}
.dd-promo__title{font-size:15px;font-weight:700;color:#fff;margin:0;line-height:1.3}
.dd-promo__text{font-size:12px;color:rgba(255,255,255,.80);margin:0;flex:1;font-weight:500;line-height:1.55}

/* ══ MOBILE MENU — Oxford dark, testo bianco ══ */
.mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1098;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px)}
.mob-overlay.open{opacity:1;pointer-events:all}
.mob-menu{position:fixed;top:0;right:-100%;width:min(340px,92vw);height:100dvh;background:linear-gradient(180deg,var(--oxford,#002147) 0%,var(--oxford-dark,#001530) 100%);z-index:1099;overflow-y:auto;transition:right .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 48px rgba(0,0,0,.4)}
.mob-menu.open{right:0}
.mob-hdr{display:flex;align-items:center;justify-content:space-between;padding:22px var(--s3,24px);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
/* Logo su sfondo scuro → bianco */
.mob-hdr .site-logo img{filter:brightness(0) invert(1);opacity:.9}
.mob-close{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);cursor:pointer;padding:8px;border-radius:var(--r-md,8px);transition:all var(--tr,.2s)}
.mob-close:hover{background:rgba(255,255,255,.15);color:#fff}
.mob-list{list-style:none;padding:12px 0;margin:0;flex:1}
/* Testi menu mobile → su sfondo blu = bianco */
.mob-link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px var(--s3,24px);font-size:15px;font-weight:600;color:rgba(255,255,255,.90);text-decoration:none;background:transparent;border:none;font-family:var(--font,'Poppins');cursor:pointer;letter-spacing:.01em;transition:background var(--tr,.2s),color var(--tr,.2s),padding-left var(--tr,.2s)}
.mob-link:hover{background:rgba(0,109,91,.15);color:#fff;padding-left:calc(var(--s3,24px) + 6px)}
.mob-link.active{color:var(--petrol,#006D5B);font-weight:700}
/* Non serve: la verde è illeggibile su oxford; usiamo teal chiaro */
.mob-link.active{color:#5DC9B8}

.mob-sub{list-style:none;padding:0;margin:0;max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.4,0,.2,1);background:rgba(0,0,0,.2);border-left:2px solid var(--petrol,#006D5B);margin-left:16px}
.mob-sub.open{max-height:500px}
/* Sottovoci → bianco su sfondo scuro */
.mob-sub-link{display:block;padding:10px 20px 10px 24px;font-size:13px;font-weight:500;color:rgba(255,255,255,.70);text-decoration:none;transition:color var(--tr,.2s),padding-left var(--tr,.2s)}
.mob-sub-link:hover{color:#fff;padding-left:28px}

.mob-footer{padding:var(--s3,24px);border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15);flex-shrink:0}
/* Divider colorato: verde → arancio */
.mob-divider{height:2px;background:linear-gradient(90deg,var(--petrol,#006D5B),var(--petrol-soft,#4DA090),var(--arancio,#F28C28));margin:8px var(--s3,24px) 4px;border-radius:2px;opacity:.7}

/* RESPONSIVE HEADER */
@media(max-width:1024px){.main-nav{display:none}.hamburger{display:flex}.hdr-cta{display:none}}
@media(max-width:768px){.site-logo img{height:50px;max-width:192px}}
@media(max-width:480px){:root{--topbar-h:38px}.topbar__tag{display:none}.topbar__right{gap:14px}.topbar__link{font-size:11px}.site-logo img{height:44px;max-width:168px}}
