/* ============================================================
   «ROTATIVA» — cornice.css: l'arredo che si ripete su ogni pagina.
   Testata appiccicata col bottone del Numero Verde, panino del
   menù, congedo con la telefonata, piede a colonne, barretta del
   pollice. Il numero verde vive nel bottone della testata, nel
   numerone del congedo e nella barretta (scelta di Giorgio,
   25/7): MAI nel piè di pagina, che non porta cifre.
   ============================================================ */

/* ============ TESTATA: resta in cima solo sul computer ============ */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(240,241,236,.94);
  border-bottom:1px solid var(--border);
}
/* la trasparenza è l'aggiunta, non la base: senza supporto resta opaca */
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .header{background:rgba(240,241,236,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.header-row{
  display:flex;align-items:center;align-content:center;flex-wrap:wrap;
  gap:.5rem 1.5rem;
  min-height:var(--header-height);
}

.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
a.brand:hover .brand-name{color:var(--red-deep)}
/* nel tondo va il SOLO simbolo del marchio: il logo completo porta dentro
   il nome, che a 48px è illeggibile e ripete la scritta qui accanto */
.brand img{
  width:48px;height:48px;border-radius:50%;flex:none;
  background:var(--paper);
  box-shadow:0 0 0 1px var(--border);
}
.brand-name{
  display:block;margin:0;
  font-family:var(--serif);font-size:1.25rem;line-height:1.1;
  color:var(--bordeaux);
}
.brand-tagline{
  display:block;margin:.2rem 0 0;
  font-size:.75rem;font-weight:600;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray-2);
}

/* ============ MENÙ ============ */
.header nav{margin-left:auto}
.header nav ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem}
.header nav a{
  position:relative;display:inline-block;
  font-size:.9375rem;font-weight:500;
  color:var(--gray-1);text-decoration:none;
  padding:.85rem .7rem;min-height:44px;
  transition:color .18s ease;
}
.header nav a::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.6rem;height:1px;
  background:var(--red);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .25s var(--ease-soft);
}
.header nav a:hover{color:var(--red)}
.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1)}
.header nav a[aria-current="page"]{color:var(--red);font-weight:600}
.header nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--gold-rule)}

/* ============ IL NUMERO VERDE: bottone della testata ============
   Vive FUORI dal <nav>: dentro, la piega del panino lo nasconderebbe. */
.header-phone{
  order:3;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--red);color:var(--paper);
  text-decoration:none;white-space:nowrap;
  padding:.5rem 1.05rem;min-height:48px;
  border-radius:3px;
  box-shadow:var(--shadow-light);
  transition:background-color .2s ease;
}
.header-phone:hover{background:var(--red-deep);color:var(--paper)}
.header-phone svg{width:18px;height:18px;flex:none}
.header-phone-label{
  display:block;
  font-size:.75rem;font-weight:600;line-height:1.25;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(251,251,248,.9);
}
.header-phone-digits{display:block;font-size:1.0625rem;font-weight:700;line-height:1.25;letter-spacing:.01em}

/* ============ PANINO: solo sotto 1080px e solo con JS ============ */
.burger{
  order:2;display:none;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:.8125rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:none;
  border:1px solid var(--border);border-radius:3px;
  padding:.7rem .85rem;min-height:44px;
  cursor:pointer;
}
.burger-lines{position:relative;display:inline-block;width:18px;height:2px;background:var(--red);transition:background-color .2s ease}
.burger-lines::before,.burger-lines::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--red);
  transition:transform .3s var(--ease-soft);
}
.burger-lines::before{top:-6px}
.burger-lines::after{top:6px}
.burger[aria-expanded="true"] .burger-lines{background:transparent}
.burger[aria-expanded="true"] .burger-lines::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-lines::after{transform:translateY(-6px) rotate(-45deg)}

/* ============ CONGEDO: la telefonata, riquadro inserito nella pagina ============ */
/* più aria sotto che sopra: il riquadro scuro non deve appoggiarsi al piede scuro */
.closing-wrap{padding-block:clamp(2rem,3vw,3rem) clamp(4rem,6vw,6rem)}
.closing{
  position:relative;overflow:hidden;
  background:var(--bordeaux-deep);color:var(--ivory-body);
  border-radius:10px;
  padding:clamp(2.5rem,4vw,3.5rem) clamp(1.5rem,3.5vw,3.25rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:2rem 3rem;
}
.closing h2{color:var(--ivory);margin-bottom:.9rem}
.closing-text{position:relative;max-width:34rem}
.closing-text p{color:var(--ivory-body)}
.closing-text a{color:var(--gold-text);text-decoration:underline}
.closing-text a:hover{color:#DCC084}
.closing-phone{position:relative;text-align:right}
.closing .hours,.closing .tap-note{text-align:right}

/* ============ PIEDE: quattro colonne, nessuna cifra del numero ============ */
.footer{background:var(--footer);color:var(--ivory-body)}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.15fr;gap:2.5rem;
  padding-block:clamp(3rem,4.5vw,4.25rem) 2rem;
}
.footer-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.footer-brand img{width:44px;height:44px;border-radius:50%;flex:none;background:var(--paper)}
.footer-name{margin:0;font-family:var(--serif);font-size:1.1875rem;color:var(--ivory)}
.footer-tagline{font-size:.9375rem;line-height:1.65;color:var(--ivory-soft);max-width:19rem}
.footer-title{
  margin:0 0 1rem;
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);
}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.1rem}
.footer a{color:var(--ivory-body);text-decoration:none}
.footer a:hover{color:var(--gold-text);text-decoration:underline}
.footer li a{display:inline-block;padding:.42rem 0;font-size:.9375rem}
.footer a[aria-current="page"]{color:var(--gold-text)}
.footer address{font-style:normal;font-size:.9375rem;line-height:1.9;color:var(--ivory-body)}
.footer address a{text-decoration:underline;text-underline-offset:3px}

.colophon{border-top:1px solid rgba(246,239,233,.12);padding-top:1.25rem;padding-bottom:1.4rem}
.colophon-row{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  font-size:.8125rem;color:var(--ivory-soft);
}
.colophon-row p{margin:0}
.colophon-links{display:flex;flex-wrap:wrap;gap:1.25rem}

/* ============ BARRETTA DEL POLLICE: solo telefono ============ */
/* rossa come tutti i bottoni pieni: sul piede scuro il bordeaux spariva,
   e questo è l'unico invito a chiamare che resta sul telefono */
.call-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--red);
  border-top:1px solid var(--red-deep);
  color:var(--paper);
  font-size:1rem;font-weight:600;letter-spacing:.03em;
  text-align:center;text-decoration:none;
  padding:.95rem 1rem calc(.95rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 14px rgba(24,8,10,.3);
}
.call-bar:hover{background:var(--red-deep);color:var(--paper)}
.call-bar svg{width:17px;height:17px;vertical-align:-3px;margin-right:.5rem;color:var(--paper)}

/* ===== RESPONSIVE — cornice ===== */
@media (max-width:1080px){
  /* il conto della testata non chiude più: il menù si ripiega */
  .header nav{margin-left:0;flex-basis:100%;order:4}
  .header-phone{order:1;margin-left:auto}
  .header nav ul{padding-block:.2rem .5rem}
  .js .burger{display:inline-flex}
  .js .header nav{
    display:grid;grid-template-rows:0fr;visibility:hidden;
    transition:grid-template-rows .35s var(--ease-soft),visibility 0s .35s linear;
  }
  .js .header nav ul{overflow:hidden;min-height:0}
  .js .header nav.is-open{
    grid-template-rows:1fr;visibility:visible;
    transition:grid-template-rows .35s var(--ease-soft),visibility 0s;
  }
  /* col panino il menù è una colonna di righe piene: sul telefono si legge
     e si tocca meglio di una fila che va a capo da sola */
  .js .header nav a{display:block}
  .js .header nav ul{flex-direction:column;align-items:stretch;gap:0}
  .js .header nav li + li{border-top:1px solid var(--border)}
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .closing-phone,.closing .hours,.closing .tap-note{text-align:left}
}
@media (max-width:760px){
  /* sul telefono resta ferma solo la barra del pollice, in basso */
  .header{position:static}
  /* con la testata ferma non serve compensarla: le ancore atterravano 94px sotto */
  [id]{scroll-margin-top:1rem}
  .call-bar{display:block}
  /* il compenso vive DENTRO il piede: il fondo scuro resta continuo
     fino alla barretta, senza filo di carta chiara */
  .colophon-row{padding-bottom:calc(1.4rem + 54px + env(safe-area-inset-bottom,0px))}
  .brand img{width:44px;height:44px}
  .brand-name{font-size:1.125rem}
  /* sul telefono il numero sta al pollice, in basso: nella testata sarebbe
     lo stesso presidio due volte, e non ci starebbe accanto al panino */
  .header-phone{display:none}
  .closing{border-radius:6px}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:1.75rem}
  .colophon-row{flex-direction:column}
}
@media (max-width:480px){
  /* marchio e panino devono stare su UNA riga: due righe di testata
     rubano schermo alla prima cosa che si deve leggere */
  .brand img{width:40px;height:40px}
  .brand-name{font-size:1rem}
  .burger{padding:.7rem;margin-left:auto}
  /* la riga sotto il marchio («Avvocati e medici legali», 5/9/2026) è più lunga di quella della proposta:
     il marchio cede spazio e la riga va a capo DENTRO il blocco, il bottone del menù resta sulla stessa riga
     (senza questa regola il contenitore manda a capo il bottone: +37px di testata, misurato con DIAG) */
  .brand{flex:1 1 0;min-width:0}
  .brand-tagline{text-wrap:balance}
}
@media (max-width:360px){
  .header-row{gap:.5rem .75rem}
  .brand-name{font-size:.9375rem}
  .brand-tagline{letter-spacing:.12em}
}

/* ===== TORNA SU (5/9/2026, blocco 3a: richiesta di Giorgio nel giro a vista) =====
   Tondo rosso in basso a destra, sopra la barretta del pollice sul telefono. Senza JS è sempre visibile
   (un collegamento a #top); con JS compare dopo una schermata di scorrimento (classe is-visible). */
.to-top{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:55;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:var(--paper);
  box-shadow:var(--shadow-lift);
  transition:opacity .3s var(--ease-soft),visibility 0s linear .3s,translate .3s var(--ease-soft),background .2s;
}
.to-top svg{width:22px;height:22px}
.to-top:hover{background:var(--red-deep)}
.to-top:focus-visible{outline-color:var(--paper);outline-offset:-5px}
.js .to-top{opacity:0;visibility:hidden;translate:0 12px}
.js .to-top.is-visible{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
@media (max-width:760px){
  .to-top{right:.75rem;bottom:calc(54px + env(safe-area-inset-bottom,0px) + .75rem)}
}