:root{
  --blue-dark:#2e2a85;
  --blue-light:#009fe3;
  --blue-lighter:#4dc6ff;
  --header-max:1600px;
}

/* HEADER */
header{
  position:relative; z-index:9999;
  background:linear-gradient(to right,#f5f7fa,#e4e7eb,#d5d8dc);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:8px 0;
  font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
header .logo-nav{
  display:flex; align-items:center; gap:24px;
  justify-content:space-between;
  max-width:var(--header-max);
  width:100%; margin:0 auto; padding:0 24px;
}

/* Logo */
.logo{display:flex;align-items:center;gap:12px; flex:0 0 auto;}
.logo-img{width:60px;height:auto}
.logo h1{
  margin:0;font-size:1.8rem;line-height:1;font-weight:800;color:transparent;
  background:linear-gradient(to right,var(--blue-dark),var(--blue-light));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* MENU DESKTOP (inline) */
nav.menu-mobile.main-menu{
  display:flex;
  align-items:center;
  gap:18px;
  padding:0;
  background:transparent;
  flex:1 1 auto;
  justify-content:flex-end;
  flex-wrap:nowrap;
  overflow:visible;
  white-space:nowrap;
}
nav.menu-mobile.main-menu a,
nav.menu-mobile.main-menu .dropbtn{
  color:var(--blue-light);
  font-weight:300;
  font-size:1rem;
  line-height:1.4;
  text-decoration:none;
  background:none;border:none;padding:0;cursor:pointer;
  transition:color .25s ease;
  white-space:nowrap;
}
.gradient-menu:hover{
  background:linear-gradient(to right,var(--blue-dark),var(--blue-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  font-size:inherit;font-weight:inherit;
}
nav.menu-mobile.main-menu a:hover,
nav.menu-mobile.main-menu .dropbtn:hover,
nav.menu-mobile.main-menu .dropdown-content a:hover{
  color:var(--blue-lighter);
}

/* Dropdown (desktop) */
.dropdown{position:relative; flex:0 0 auto;}
.dropbtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.dropdown-content{
  display:none;position:absolute;top:100%;left:0;min-width:220px;
  background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:8px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.dropdown.open .dropdown-content{display:block}
.dropdown-content a{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  color:var(--blue-light);text-decoration:none;
}
.dropdown-content img{width:18px;height:18px}

/* Pulsanti hamburger/chiudi */
.menu-toggle,.close-btn3{display:none}

/* 
   MOBILE & IPAD: menu off-canvas (laterale)
   - max-width:900px  tutti i mobile
   - 901–1375px  iPad
    */

/* Stato body quando il menu è aperto (blocca scroll + scrim) */
body.menu-open{ overflow:hidden; }
body.menu-open::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:9999; pointer-events:auto;
}

/* Mobile  900px: attiva hamburger e off-canvas */
@media (max-width:900px){
  .menu-toggle{
    display:block; font-size:1.6rem; background:none; border:0; cursor:pointer;
    color:var(--blue-light);
  }
  .close-btn3{
    display:block; position:absolute; top:14px; right:14px;
    font-size:1.6rem; background:none; border:0; cursor:pointer; color:var(--blue-light);
  }

  /* Trasforma la nav in pannello laterale */
  nav.menu-mobile.main-menu{
    position:fixed; top:0; right:0; bottom:0;
    width:86vw; max-width:420px; height:100vh;
    background:#fff;
    padding:64px 20px 24px;
    display:flex; flex-direction:column; gap:14px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;

    /* Off-canvas chiuso: completamente invisibile, niente “rettangolo bianco” */
    transform:translateX(100%);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .3s ease, opacity .2s ease, visibility 0s linear .3s;
    box-shadow:-2px 0 20px rgba(0,0,0,.25);
    z-index:10000; /* sopra allo scrim del body */
    contain:paint; backface-visibility:hidden;
  }
  nav.menu-mobile.main-menu.open{
    transform:translateX(0);
    opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .3s ease, opacity .2s ease;
  }

  /* Dropdown dentro il pannello: layout a blocchi */
  .dropdown-content{
    position:static; display:none; min-width:auto;
    border:1px solid #e6e6e6; border-radius:8px; padding:8px 0; box-shadow:none; width:100%;
  }
  .dropdown.open .dropdown-content{ display:block; }
}

/* iPhone 16 (390–430) – fine tuning larghezza pannello */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:390px) and (max-width:430px){
    nav.menu-mobile.main-menu{ width:86vw; max-width:420px; }
  }
}
/* iPhone 16 Pro Max (435–747) – pannello un po’ più stretto */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:435px) and (max-width:747px){
    nav.menu-mobile.main-menu{ width:78vw; max-width:480px; }
  }
}

/* iPad 901–1375px: hamburger + off-canvas anche su tablet */
@media (min-width:901px) and (max-width:1375px){
  .menu-toggle{
    display:block; font-size:1.7rem; background:none; border:0; cursor:pointer; color:var(--blue-light);
  }
  .close-btn3{
    display:block; position:absolute; top:16px; right:16px;
    font-size:1.7rem; background:none; border:0; cursor:pointer; color:var(--blue-light);
  }
  nav.menu-mobile.main-menu{
    position:fixed; top:0; right:0; bottom:0;
    width:50vw; max-width:560px; height:100vh;
    background:#fff;
    padding:72px 24px 28px;
    display:flex; flex-direction:column; gap:16px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;

    transform:translateX(100%);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .3s ease, opacity .2s ease, visibility 0s linear .3s;
    box-shadow:-2px 0 24px rgba(0,0,0,.25);
    z-index:10000; contain:paint; backface-visibility:hidden;
  }
  nav.menu-mobile.main-menu.open{
    transform:translateX(0);
    opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .3s ease, opacity .2s ease;
  }

  .dropdown-content{ position:static; display:none; width:100%; border:1px solid #e6e6e6; border-radius:8px; padding:8px 0; box-shadow:none; }
  .dropdown.open .dropdown-content{ display:block; }
}
/* === Mobile (900px): menu laterale con voci IN CIMA + testi più grandi === */
@media (max-width:900px){
  /* voci in cima (colonna) */
  nav.menu-mobile.main-menu{
    justify-content:flex-start !important;  /* <-- in cima */
    align-items:stretch !important;         /* link a tutta larghezza */
    gap:16px;                               
  }
  /* testi più grandi nelle voci menu */
  nav.menu-mobile.main-menu a,
  nav.menu-mobile.main-menu .dropbtn{
    font-size:1.15rem;      /*  dimensione testo */
    line-height:1.6;
  }
}

/* === iPhone 16 (portrait 390–430): titolo più piccolo === */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:390px) and (max-width:430px){
    header .logo h1{ font-size:1.35rem; }   /* "Olivieri Costruzioni" più piccolo */
  }
}

/* === iPad (901–1375px): voci in cima + testi più grandi === */
@media (min-width:901px) and (max-width:1375px){
  nav.menu-mobile.main-menu{
    justify-content:flex-start !important;  /* <-- in cima */
    align-items:stretch !important;
    gap:18px;
  }
  nav.menu-mobile.main-menu a,
  nav.menu-mobile.main-menu .dropbtn{
    font-size:1.2rem;       /*  ancora un po’ su iPad */
    line-height:1.65;
  }
}