/* =======================================================
   RESPONSIVE.CSS — solo adattamenti per breakpoint
   (coerente con il CSS principale)
======================================================= */

/* ================================================
   ≤ 992px — tablet / laptop piccoli
   - Riduce dimensioni header e spazi
   - Ammorbidisce il layout generale
================================================ */
@media (max-width: 992px) {
  :root {
    --nav-h: 80px;
    --logo-h: 72px;
    --brand-font: 18px;
  }

  .container {
    width: min(var(--container-max, 1280px), 96vw);
  }

  /* Menu: più compatto e centrato se va su due righe */
  .menu__list {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Hero (quando usi .hero__inner) un filo più compatto */
  .hero__inner { padding: 26px 0 20px; }
}

/* ================================================
   ≤ 768px — mobile principale
   - Compatta header/nav
   - Evita sovrapposizioni
   - Migliora i target di tap
================================================ */
@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
    --logo-h: 48px;
    --brand-font: 16px;

    /* Importantissimo: azzera gli shift che su mobile sballano */
    --brand-left-shift: 0;
    --call-right-shift: 0;
  }

  /* Header più stretto e regolare */
  .nav {
    gap: 12px;
    padding-left: 10px;
    padding-right: 10px;
    grid-template-columns: auto 1fr auto;
  }

  /* Brand/Logo compatti */
  .brand__logo { height: var(--logo-h); }
  .brand__name { font-size: var(--brand-font); }

  /* Box telefono più piccolo; niente shift */
  .call-us {
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    margin-right: 0;
    white-space: nowrap;
  }
  .phone-ic { width: 22px; height: 22px; }

  /* Menu orizzontale scrollabile se non ci sta */
  .menu__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    justify-content: flex-start;
  }
  .menu__list a {
    flex: 0 0 auto;
    padding: 8px 10px;
    min-height: 44px; /* target touch */
  }

  /* Hero generico più centrato e compatto */
  .hero__inner { padding: 20px 0; text-align: center; }
  .hero__title { font-size: clamp(22px, 6vw, 28px); }
  .hero__subtitle { font-size: 14px; }

  /* Searchbar (se presente) a tutta larghezza */
  .searchbar input { max-width: 100%; height: 46px; }

  /* Pulsanti primari full-width nei contesti d’azione */
  .actions { flex-direction: column; }
  .actions a,
  .btn-primary,
  .btn-whatsapp,
  .btn-wa-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
    min-height: 44px;
  }

  /* Spazi finali / CTA generiche */
  .module-list { margin-bottom: 28px; }
  .cta-bottom {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid #e6ecf5;
    display: flex;
    justify-content: center;
  }

  /* Tabelle legali: scroll orizzontale sicuro */
  .table-wrap,
  .legal-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .legal-content {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    line-height: 1.55;
  }

  /* Immagini sempre fluide */
  img { height: auto; max-width: 100%; }
  .hero img,
  .section img { max-width: 100%; display: block; }
}

/* ================================================
   ≤ 480px — schermi molto piccoli
   - Micro-ritocchi tipografici
   - Nasconde etichetta del numero per risparmiare spazio
================================================ */
@media (max-width: 480px) {
  :root {
    --nav-h: 58px;
    --logo-h: 42px;
    --brand-font: 15px;
  }

  .brand__name { letter-spacing: .2px; }

  /* Mostra solo il numero, nasconde la label */
  .call-us__label { display: none; }
  .call-us__num { font-weight: 800; }

  .hero__title { font-size: clamp(20px, 7vw, 26px); }
  .hero__subtitle { font-size: 13px; }

  /* Margini verticali più stretti tra sezioni generiche */
  .section,
  .page {
    padding-top: 20px;
    padding-bottom: 20px; /* spazio per footer fixed */
  }
}

/* ================================================
   Per le pagine COOKIE E PRIVACY (menu hamburgher e tabella)
================================================ */

/* ========== NAV/HAMBURGER: allinea le pagine legali al comportamento di "Chi Siamo" ========== */
/* forza la stessa logica: menu hidden su mobile, visibile quando body ha .menu-open */
@media (max-width: 900px){
  .site-header .menu{
    display: none !important;
    position: fixed;
    top: var(--nav-h, 96px);
    left: 0; right: 0;
    background: #fff;
    padding: 14px 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
    z-index: 1000;
    flex-direction: column;
    gap: 12px;
  }
  body.menu-open .site-header .menu{ display: flex !important; }

  /* pulsante hamburger coerente con "Chi Siamo" */
  .site-header .hamburger{
    display: inline-flex !important;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid #e1e7f0; background: #f3f6fb; border-radius: 10px;
  }
  /* animazione X (usa già body.menu-open come in Chi Siamo) */
  body.menu-open .hamburger .hamburger__bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  body.menu-open .hamburger .hamburger__bar:nth-child(2){ opacity: 0; }
  body.menu-open .hamburger .hamburger__bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

  /* overlay click-blocker come in Chi Siamo */
  body.menu-open::before{
    content:""; position:fixed; inset: var(--nav-h,96px) 0 0 0;
    background: rgba(0,0,0,.3); z-index: 900;
  }
}

/* Piccola compatibilità: alcune pagine legali hanno header con doppia classe .site-header.header */
.site-header.header .menu{ justify-content: center; }

/* ========== TABELLA COOKIE: non sfora su mobile (card layout pulito) ========== */
/* desktop: assicurati che stia dentro e vada a capo */
.cookie-table{ table-layout: fixed; word-break: break-word; width: 100%; }

/* mobile: trasformo ogni riga in una "card" con etichette via nth-child (niente HTML extra) */
@media (max-width: 560px){
  .cookie-table,
  .cookie-table thead,
  .cookie-table tbody,
  .cookie-table th,
  .cookie-table td,
  .cookie-table tr { display: block; }

  .cookie-table thead{ display: none; }

  .cookie-table tr{
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 12px;
    margin: 10px 0;
    box-shadow: 0 2px 10px rgba(13,38,76,.05);
    overflow: hidden;
  }

  .cookie-table td{
    border: 0;
    border-bottom: 1px dashed #eaeff6;
    padding: 10px 12px 10px 118px; /* spazio per l’etichetta */
    position: relative;
    min-height: 38px;
    font-size: 14px;
  }
  .cookie-table td:last-child{ border-bottom: 0; }

  /* Etichette automatiche */
  .cookie-table td:nth-child(1)::before { content: "Nome"; }
  .cookie-table td:nth-child(2)::before { content: "Tipologia"; }
  .cookie-table td:nth-child(3)::before { content: "Finalità"; }
  .cookie-table td:nth-child(4)::before { content: "Durata"; }
  .cookie-table td:nth-child(5)::before { content: "Terza parte"; }

  .cookie-table td::before{
    position: absolute;
    left: 12px; top: 10px;
    width: 96px;
    font-weight: 700; color: #0b2239; font-size: 13px;
    white-space: nowrap;
  }
}

/* Se preferisci lo SCROLL orizzontale (invece del card layout), commenta il blocco @media sopra
   e usa solo questo wrapper generico: scrolla senza rompere il layout. */
.cookie-table-wrapper{ width: 100%; overflow-x: auto; }
/* Wrapper con scroll */
.cookie-table-wrapper{ width:100%; overflow-x:auto; }

/* Forza il comportamento "tabella vera" su mobile */
@media (max-width:560px){
  .cookie-table{ 
    display: table !important; 
    width: 100%;
    min-width: 640px;           /* così compare lo scroll */
    table-layout: auto;
    white-space: normal;
    word-break: normal;
  }
  .cookie-table thead{ display: table-header-group !important; }
  .cookie-table tbody{ display: table-row-group !important; }
  .cookie-table tr{ display: table-row !important; }
  .cookie-table th, .cookie-table td{ 
    display: table-cell !important; 
    padding: 10px; 
    border: 1px solid #e6ecf5;
  }
  /* Rimuovi le etichette generate dal vecchio layout */
  .cookie-table td::before{ content: none !important; }
}