/* ================================================================
   drawer.css — Leonardo Edition
   Overlay mobile fullscreen (<1000px), entra da destra (translateX).
   Struttura: header (logo + chiudi) · nav (voci) · footer (util + social).
   Animazione: GSAP gestisce translateX — CSS definisce solo stato chiuso.
   Stagger voci: nav.js usa gsap.from(.drawer-link, { y:24, opacity:0,
     stagger:0.07, ease:'power2.out' }) al momento dell'apertura.
   100dvh: usa dynamic viewport height — corregge barra URL mobile Safari.
================================================================ */

/* ── Backdrop drawer ───────────────────────────────────────────── */
/*
  z-index 190: sotto il drawer (200), sopra il contenuto pagina.
  Separato dal backdrop megamenu (z-index 90) — ognuno serve solo
  il proprio overlay e non interferisce con l'altro.
*/
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background-color: rgba(14, 14, 13, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Mobile drawer base — NASCOSTO di default ──────────────────── */
/*
  transform: translateX(100%) = off-screen a destra.
  visibility: hidden evita focus trap quando chiuso (+ aria-hidden su HTML).
  NESSUNA CSS transition — GSAP gestisce interamente l'animazione
  per avere controllo preciso su easing, stagger e onComplete callback.
  height: 100dvh usa la dynamic viewport unit: esclude barra URL mobile.
*/
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: 100%;
  min-height: 100dvh;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Stato chiuso */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
}

/* Aperto: JS aggiunge .is-open prima che GSAP inizi l'animazione */
.mobile-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Desktop (≥1000px): drawer e backdrop non servono — rimossi dal flusso */
@media (min-width: 1000px) {
  .mobile-drawer,
  .drawer-backdrop {
    display: none;
  }
}


/* ── Header drawer ─────────────────────────────────────────────── */
/*
  Stessa altezza del header mobile principale per coerenza visiva.
  Logo stesso width del mobile toggle (--logo-width-drawer: 120px).
  Close button riusa le classi .toggle-lines/.toggle-line da header.css.
*/
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0; /* non si comprime con flex-grow sul nav */
  padding-block: var(--space-20);
  padding-inline: var(--space-24);
  border-bottom: 1px solid var(--color-hairline);
}

.drawer-logo {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
}

.drawer-logo img {
  display: block;
  width: var(--logo-width-drawer);
  height: auto;
}

.drawer-close {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
  padding: var(--space-4);
}

/* .toggle-lines, .toggle-line, .toggle-label ereditano stili da header.css */


/* ── Nav drawer ────────────────────────────────────────────────── */
/*
  flex: 1 → prende tutto lo spazio tra header e footer, spinge il
  footer a fondo pagina anche quando le voci sono poche.
  overflow-y: auto → se il contenuto supera l'altezza disponibile,
  si scorre solo il nav senza muovere header/footer.
*/
.drawer-nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-32) var(--space-24) var(--space-24);
}

.drawer-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  /* gap: 0 — spacing gestito da padding su ogni link */
}

/* ── Voci drawer ───────────────────────────────────────────────── */
/*
  Gerarchia tipografica concordata:
    40px italic  → .drawer-link--italic (Prodotti)
    40px upright → .drawer-link--upright (Tessuti)
    36px italic  → .drawer-link--sm.--italic (PDF · Visualizza · Contatti)
  Instrument Serif: serif da titoli, mai tutto maiuscolo.
  Sempre mixed-case. Niente letter-spacing — Instrument Serif non ne ha bisogno.
  Padding-block: target touch minimo 48px garantito a tutte le taglie.
*/
.drawer-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.15;
  padding-block: var(--space-8);
  transition: color var(--duration-fast) var(--ease-out);
}

.drawer-link:hover {
  color: var(--color-accent);
}

/* Voce principale grande — 40px */
.drawer-link:not(.drawer-link--sm) {
  font-size: var(--text-40);
}

/* Voce secondaria — 36px */
.drawer-link--sm {
  font-size: var(--text-36);
}

/* Modifier stile: italic (Prodotti + tutte secondarie) */
.drawer-link--italic {
  font-style: italic;
}

/* Modifier stile: upright normale (Tessuti) */
.drawer-link--upright {
  font-style: normal;
}

/*
  Separatore sottile tra le voci secondarie e il gruppo principale.
  Prima occorrenza di --sm: margine top aggiunto per segnalare cambio di
  gruppo (Prodotti + Tessuti vs link utility).
*/
.drawer-link--sm:first-of-type {
  /* non applicabile via CSS puro — gap gestito da padding già adeguato */
}

/* Spazio visivo tra voce Tessuti e il gruppo link secondari */
.drawer-nav li:nth-child(3) {
  margin-top: var(--space-12);
}


/* ── Footer drawer ─────────────────────────────────────────────── */
/*
  Hairline top: pseudo-element ::before + scaleY(0.5).
  Garantisce 1px fisico su display 1× (Windows non-retina)
  e linea sottilissima su Retina 2×. Alpha 0.18 già calibrato nel token.
  Due righe: utilities (La mia selezione) + social (Instagram).
*/
.drawer-footer {
  flex-shrink: 0;
  padding: var(--space-20) var(--space-24) var(--space-32);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Hairline sopra il footer */
.drawer-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-24);
  right: var(--space-24);
  height: 1px;
  background: var(--color-hairline);
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

/* ── Utilities footer ──────────────────────────────────────────── */
.drawer-utilities {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.drawer-util-link {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.drawer-util-link:hover {
  color: var(--color-accent);
}

/* ── Social footer ─────────────────────────────────────────────── */
.drawer-social {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* Instagram a sx · lingua a dx */
  gap: var(--space-20);
  width: 100%;
}

.drawer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--color-mid);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.drawer-social-link:hover {
  color: var(--color-ink);
}


/* ══════════════════════════════════════════════════════════════
   PANNELLO CONTATTI — MOBILE (<1000px)
   Schermata dedicata che scorre da destra SOPRA il drawer.
   Equivalente mobile della striscia megamenu desktop.
   z-index 210: sopra il drawer (200).
   GSAP gestisce translateX + stagger su .csheet-anim.
══════════════════════════════════════════════════════════════ */
.contatti-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  width: 100%;
  min-height: 100dvh;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Stato chiuso */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
}

.contatti-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Desktop: non serve — c'è il megamenu */
@media (min-width: 1000px) {
  .contatti-sheet {
    display: none;
  }
}

/* ── Barra superiore: indietro + chiudi ── */
.contatti-sheet__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-20) var(--space-24);
  background-color: var(--color-bg);
}

.contatti-sheet__back,
.contatti-sheet__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-8);
  margin: calc(var(--space-8) * -1);   /* tap target ampio, allineamento ottico */
  color: var(--color-mid);
  font-family: var(--font-utility);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease-out);
}

.contatti-sheet__back:active,
.contatti-sheet__close:active {
  color: var(--color-ink);
}

/* ── Corpo ── */
.contatti-sheet__body {
  padding: var(--space-8) var(--space-24) var(--space-64);
}

.contatti-sheet__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.5rem;              /* 40px — pari alle voci principali del drawer */
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0 0 var(--space-32);
}

/* ── Card sede ─────────────────────────────────────────────────
   Hairline superiore come separatore: struttura editoriale,
   niente box/riquadri — coerente col resto del sito.
──────────────────────────────────────────────────────────── */
.csheet-card {
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-hairline);
}

.csheet-card__label {
  font-family: var(--font-utility);
  font-size: var(--text-10);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  margin: 0 0 var(--space-8);
}

.csheet-card__city {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;             /* 28px */
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 var(--space-8);
}

.csheet-card__addr {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  line-height: 1.6;
  color: var(--color-mid);
  margin: 0 0 var(--space-16);
}

/* ── Azioni: Chiama / Mappa ── */
.csheet-actions {
  display: flex;
  gap: var(--space-8);
}

.csheet-btn {
  flex: 1;
  min-height: 48px;               /* tap target comodo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border: 1px solid var(--color-hairline);
  border-radius: 2px;
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  background: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out);
}

.csheet-btn:active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Sezione generica (Scrivici / Orari) ── */
.csheet-section {
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-hairline);
}

.csheet-section__label {
  font-family: var(--font-utility);
  font-size: var(--text-10);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  margin: 0 0 var(--space-12);
}

/* ── Riga tappabile (email) ── */
.csheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 48px;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.csheet-row + .csheet-row {
  border-top: 1px solid rgba(14, 14, 13, 0.07);
}

.csheet-row__text {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  color: var(--color-ink);
}

.csheet-row__arrow {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  color: var(--color-mid);
  transition: transform var(--duration-fast) var(--ease-out);
}

.csheet-row:active .csheet-row__text,
.csheet-row:active .csheet-row__arrow {
  color: var(--color-accent);
}

.csheet-row:active .csheet-row__arrow {
  transform: translateX(3px);
}

/* ── Orari ── */
.csheet-hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.csheet-hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-20);
}

.csheet-hours__day {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  color: var(--color-ink);
}

.csheet-hours__time {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  line-height: 1.5;
  color: var(--color-mid);
  text-align: right;
}

.csheet-hours__time--closed {
  font-style: italic;
}

/* ── Social ── */
.csheet-social {
  display: flex;
  gap: var(--space-24);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-hairline);
}

.csheet-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;                /* tap target */
  font-family: var(--font-utility);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-mid);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.csheet-social .ig-icon {
  flex-shrink: 0;
}

.csheet-social a:active {
  color: var(--color-ink);
}