/* =============================================================================
   L'ACCHIANATA DI SANTA ROSALIA
   assets/css/style.css - Stili di base condivisi da tutto il sito
   -----------------------------------------------------------------------------
   1. Variabili        5. Testata e menu
   2. Reset            6. Bottoni e form
   3. Tipografia       7. Messaggi e schede
   4. Layout           8. Piede di pagina
   ============================================================================= */

/* 1. VARIABILI ------------------------------------------------------------- */

:root{
  /* Palette rosaliana */
  --bordeaux:#5C1A32;
  --bordeaux-scuro:#471427;
  --rosa:#C97B8E;
  --rosa-chiaro:#F0DDE1;
  --oro:#C9A227;
  --oro-chiaro:#E8D9A0;
  --avorio:#F6F1E7;
  --avorio-scuro:#EBE3D4;
  --pietra:#4A5D4E;
  --notte:#1B2A3A;
  --notte-chiaro:#2A3B4D;

  /* Uso semantico */
  --sfondo:var(--avorio);
  --sfondo-alt:#FFFFFF;
  --testo:var(--notte);
  --testo-morbido:#5A6470;
  --bordo:#E0D6C6;
  --guida:var(--bordeaux);

  --successo:#2F7D4F;
  --errore:#B3261E;
  --avviso:#B07D18;
  --info:var(--pietra);

  /* Tipografia */
  --font-display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --font-testo:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Spaziature e forme */
  --colonna:1140px;
  --raggio:10px;
  --raggio-piccolo:6px;
  --ombra:0 2px 14px rgba(28,20,14,.07);
  --ombra-alta:0 12px 34px rgba(28,20,14,.14);
  --transizione:180ms ease;
}

/* Tema notturno: pagine tappa del cammino reale, pensate per la salita al buio */
html[data-tema="notte"]{
  --sfondo:var(--notte);
  --sfondo-alt:var(--notte-chiaro);
  --testo:#F3EDE2;
  --testo-morbido:#B6BFC9;
  --bordo:#3A4C5F;
  --guida:var(--oro);
}

/* 2. RESET ----------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--sfondo);
  color:var(--testo);
  font-family:var(--font-testo);
  font-size:1.05rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--guida);text-decoration:none;transition:color var(--transizione)}
a:hover{color:var(--rosa)}
button{font:inherit}

:focus-visible{outline:3px solid var(--rosa);outline-offset:2px;border-radius:3px}

.salta-contenuto{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--bordeaux);color:#fff;padding:12px 20px;border-radius:0 0 var(--raggio) 0;
}
.salta-contenuto:focus{left:0;color:#fff}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* 3. TIPOGRAFIA ------------------------------------------------------------ */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--testo);
}
h1{font-size:clamp(2.1rem,5.4vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.1em}

.occhiello{
  font-family:var(--font-testo);
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--rosa);margin-bottom:.7em;
}
html[data-tema="notte"] .occhiello{color:var(--oro)}

.sommario{font-size:1.15rem;color:var(--testo-morbido);max-width:62ch}
.piccolo{font-size:.88rem;color:var(--testo-morbido)}

/* Filetto dorato: separatore ricorrente del progetto */
.filetto{border:0;height:2px;background:linear-gradient(90deg,var(--oro),transparent);margin:2.4rem 0}

/* 4. LAYOUT ---------------------------------------------------------------- */

.contenitore{width:100%;max-width:var(--colonna);margin:0 auto;padding:0 20px}
.contenitore--stretto{max-width:760px}
.sezione{padding:clamp(48px,7vw,84px) 0}
.griglia{display:grid;gap:26px}
@media (min-width:720px){
  .griglia--2{grid-template-columns:repeat(2,1fr)}
  .griglia--3{grid-template-columns:repeat(3,1fr)}
}

/* 5. TESTATA E MENU -------------------------------------------------------- */

.testata{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--sfondo) 92%,transparent);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--bordo);
}
.testata__interno{
  max-width:var(--colonna);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

.marchio{display:flex;align-items:center;gap:11px;color:var(--testo)}
.marchio__simbolo{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;
  display:grid;place-items:center;
 color:var(--oro-chiaro);font-size:1.15rem;
}
html[data-tema="notte"] .marchio__simbolo{color:var(--notte)}
.marchio__testo{display:flex;flex-direction:column;line-height:1.1}
.marchio__titolo{font-family:var(--font-display);font-size:1.22rem}
.marchio__sottotitolo{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--testo-morbido)}

.apri-menu,.chiudi-menu{
  background:none;border:0;color:var(--testo);font-size:1.7rem;
  padding:6px;cursor:pointer;line-height:1;
}
.chiudi-menu{display:none}

.navigazione__voci{display:flex;align-items:center;gap:4px}
.navigazione__voci a{
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:var(--raggio-piccolo);
  color:var(--testo);font-size:.95rem;font-weight:500;
}
.navigazione__voci a:hover{background:var(--avorio-scuro);color:var(--bordeaux)}
html[data-tema="notte"] .navigazione__voci a:hover{background:var(--notte-chiaro);color:var(--oro)}
.navigazione__voci a.attivo{color:var(--guida);box-shadow:inset 0 -2px 0 var(--oro)}
.navigazione__voci i{font-size:1rem;opacity:.65}

.navigazione__account{display:flex;align-items:center;gap:10px;margin-left:18px}
.account-nome{display:flex;align-items:center;gap:7px;color:var(--testo);font-weight:600;font-size:.95rem}
.account-nome i{font-size:1.25rem;color:var(--rosa)}

.velo-menu{
  position:fixed;inset:0;z-index:60;
  background:rgba(27,42,58,.55);backdrop-filter:blur(2px);
}

/* Da tablet in giù: pannello laterale */
@media (max-width:960px){
  .apri-menu{display:block}
  .chiudi-menu{display:block;position:absolute;top:14px;right:16px}

  /* Il pannello del menu vive dentro la testata: per farlo uscire a schermo
     intero e restare sopra il velo servono due cose.
     1. niente backdrop-filter: un elemento che lo usa diventa il blocco
        contenitore dei figli in position:fixed, che verrebbero ritagliati
        dentro l'altezza della barra;
     2. z-index più alto del velo, perché il figlio non può mai superare il
        contesto di impilamento del padre. */
  .testata{
    z-index:80;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:var(--sfondo);
  }

  .navigazione{
    position:fixed;top:0;right:0;bottom:0;z-index:70;
    width:min(84vw,340px);
    background:var(--sfondo-alt);
    border-left:1px solid var(--bordo);
    box-shadow:var(--ombra-alta);
    padding:64px 22px 28px;
    display:flex;flex-direction:column;gap:26px;
    transform:translateX(100%);
    transition:transform 240ms ease;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .navigazione.aperto{transform:translateX(0)}
  .navigazione__voci{flex-direction:column;align-items:stretch;gap:2px}
  .navigazione__voci a{padding:13px 12px;font-size:1.05rem}
  .navigazione__voci a.attivo{box-shadow:none;background:var(--rosa-chiaro)}
  html[data-tema="notte"] .navigazione__voci a.attivo{background:var(--notte-chiaro)}
  .navigazione__account{flex-direction:column;align-items:stretch;margin:0;padding-top:20px;border-top:1px solid var(--bordo)}
  .navigazione__account .bottone{width:100%;justify-content:center}
  body.menu-aperto{overflow:hidden}
}

@media (min-width:961px){
  .apri-menu{display:none}
  .velo-menu{display:none !important}

  /* Voci e area account su un'unica riga, spinte a destra */
  .navigazione{display:flex;align-items:center;gap:10px;margin-left:auto}

  /* Separatore leggero tra navigazione e account */
  .navigazione__account{
    margin-left:12px;padding-left:16px;
    border-left:1px solid var(--bordo);
  }

  /* Nella barra i bottoni sono compatti: la misura piena resta ai moduli */
  .navigazione__account .bottone{
    padding:9px 17px;
    font-size:.9rem;
    border-width:1px;
  }
}

/* 6. BOTTONI E FORM -------------------------------------------------------- */

.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border:2px solid transparent;border-radius:var(--raggio-piccolo);
  background:var(--bordeaux);color:#fff;
  font-family:var(--font-testo);font-size:1rem;font-weight:700;
  letter-spacing:.01em;cursor:pointer;text-align:center;
  transition:background var(--transizione),transform var(--transizione),border-color var(--transizione);
}
.bottone:hover{background:var(--bordeaux-scuro);color:#fff;transform:translateY(-1px)}
.bottone:active{transform:translateY(0)}

.bottone--oro{background:var(--oro);color:var(--notte)}
.bottone--oro:hover{background:#B08F1E;color:var(--notte)}

.bottone--fantasma{background:transparent;color:var(--testo);border-color:var(--bordo)}
.bottone--fantasma:hover{background:transparent;border-color:var(--bordeaux);color:var(--bordeaux)}
html[data-tema="notte"] .bottone--fantasma:hover{border-color:var(--oro);color:var(--oro)}

.bottone--grande{padding:17px 34px;font-size:1.08rem}
.bottone--pieno{width:100%}
.bottone[disabled],.bottone[aria-disabled="true"]{opacity:.5;pointer-events:none}

.campo{margin-bottom:18px}
.campo label{display:block;font-weight:700;font-size:.92rem;margin-bottom:7px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;
  border:1px solid var(--bordo);border-radius:var(--raggio-piccolo);
  background:var(--sfondo-alt);color:var(--testo);
  font-family:var(--font-testo);font-size:1rem;
  transition:border-color var(--transizione),box-shadow var(--transizione);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-chiaro);
}
.campo--errore input{border-color:var(--errore)}
.campo__nota{display:block;font-size:.84rem;color:var(--testo-morbido);margin-top:6px}
.campo__errore{display:block;font-size:.86rem;color:var(--errore);font-weight:700;margin-top:6px}

/* Occhio per mostrare la password.
   Usato nelle pagine di accesso ma anche nella cancellazione dell'account:
   per questo sta nel foglio globale e non in auth.css. */
.campo--password{position:relative}
.campo--password input{padding-right:52px}
.mostra-password{
  position:absolute;top:33px;right:6px;
  width:42px;height:44px;
  background:none;border:0;cursor:pointer;
  color:var(--testo-morbido);font-size:1.15rem;
  display:grid;place-items:center;border-radius:var(--raggio-piccolo);
}
.mostra-password:hover{color:var(--bordeaux)}

.campo__errore--staccato{display:block;margin:-10px 0 16px}

/* Avviso di errore in cima a un modulo */
.avviso-modulo{
  display:block;position:relative;
  background:#FDF1F0;border-left:4px solid var(--errore);
  border-radius:0 var(--raggio-piccolo) var(--raggio-piccolo) 0;
  padding:13px 16px 13px 44px;margin-bottom:22px;
  color:#8C1F19;font-size:.94rem;font-weight:500;
}
.avviso-modulo i{position:absolute;left:16px;top:.9em;font-size:1.15rem}

/* Nelle pagine a fondo scuro l'avviso deve restare leggibile */
html[data-tema="notte"] .avviso-modulo{
  background:rgba(179,38,30,.16);
  color:#F3C9C5;
}

.campo--scelta{display:flex;gap:11px;align-items:flex-start}
.campo--scelta input{width:auto;margin-top:4px;accent-color:var(--bordeaux)}
.campo--scelta label{font-weight:400;font-size:.95rem}

/* 7. MESSAGGI E SCHEDE ----------------------------------------------------- */

.flash-area{max-width:var(--colonna);margin:18px auto 0;padding:0 20px;display:grid;gap:10px}
.flash{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:var(--raggio-piccolo);
  border-left:4px solid var(--info);background:var(--sfondo-alt);
  box-shadow:var(--ombra);font-size:.97rem;
}
.flash i{font-size:1.2rem;line-height:1.35;color:var(--info)}
.flash span{flex:1}
.flash--successo{border-left-color:var(--successo)} .flash--successo i{color:var(--successo)}
.flash--errore{border-left-color:var(--errore)}     .flash--errore i{color:var(--errore)}
.flash--avviso{border-left-color:var(--avviso)}     .flash--avviso i{color:var(--avviso)}
.flash__chiudi{background:none;border:0;color:var(--testo-morbido);font-size:1.4rem;cursor:pointer;line-height:1}

.scheda{
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:26px;box-shadow:var(--ombra);
}
.scheda--centrata{max-width:520px;margin:0 auto}

/* Pagine di servizio: manutenzione, 404 */
.servizio{max-width:620px;margin:0 auto;padding:15vh 24px;text-align:center}
.servizio__occhiello{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--rosa)}
.servizio__titolo{font-family:var(--font-display);font-size:clamp(1.9rem,5vw,2.8rem);margin:.2em 0 .6em}
.servizio__testo{color:var(--testo-morbido)}
.servizio__motto,.piede__motto{
  font-family:var(--font-display);font-style:italic;
  color:var(--oro);margin-top:1.6em;
}

/* 8. PIEDE DI PAGINA ------------------------------------------------------- */

.piede{background:var(--notte);color:#E7E1D6;margin-top:80px}
.piede a{color:#E7E1D6}
.piede a:hover{color:var(--oro)}

.piede__interno{
  max-width:var(--colonna);margin:0 auto;padding:56px 20px 34px;
  display:grid;gap:34px;
}
@media (min-width:820px){
  .piede__interno{grid-template-columns:2fr 1fr 1fr}
}

.piede__titolo{font-family:var(--font-display);font-size:1.15rem;color:#fff;margin-bottom:.7em}
.piede__testo{color:#AEB7C1;font-size:.95rem;max-width:46ch}
.piede__lista li{margin-bottom:9px;font-size:.95rem;color:#AEB7C1}
.piede__lista i{color:var(--rosa);margin-right:6px}

.piede__social{display:flex;gap:14px;margin-top:16px;font-size:1.35rem}

.piede__chiusura{
  border-top:1px solid rgba(255,255,255,.12);
  max-width:var(--colonna);margin:0 auto;padding:18px 20px 30px;
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  font-size:.85rem;color:#939CA6;
}
.piede__chiusura p{margin:0}
.piede__legale{display:flex;flex-wrap:wrap;gap:18px}


/* =============================================================================
   AVVISO SUI COOKIE
   ============================================================================= */

.banner-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--notte);color:#E7E1D6;
  border-top:3px solid var(--oro);
  box-shadow:0 -6px 26px rgba(0,0,0,.28);
  animation:banner-entra 320ms ease-out;
}
@keyframes banner-entra{from{transform:translateY(100%)}to{transform:translateY(0)}}

.banner-cookie__interno{
  max-width:var(--colonna);margin:0 auto;
  padding:18px 20px;
  display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;
}

.banner-cookie__testo{flex:1 1 380px;min-width:0}
.banner-cookie__titolo{
  font-weight:700;font-size:.95rem;margin:0 0 .35em;
}
.banner-cookie__titolo i{color:var(--oro);margin-right:7px}
.banner-cookie__testo p{margin:0;font-size:.9rem;color:#AEB7C1;line-height:1.6}
.banner-cookie__testo a{color:var(--oro);text-decoration:underline}

.banner-cookie__azioni{display:flex;flex-wrap:wrap;gap:10px}
.banner-cookie__azioni .bottone{padding:11px 22px;font-size:.92rem}
.banner-cookie__azioni .bottone--fantasma{color:#E7E1D6;border-color:rgba(231,225,214,.4)}
.banner-cookie__azioni .bottone--fantasma:hover{border-color:var(--oro);color:var(--oro)}

@media (max-width:620px){
  .banner-cookie__interno{padding:16px}
  .banner-cookie__azioni{width:100%}
  .banner-cookie__azioni .bottone{flex:1 1 auto}
}