/* Chef Academy — Piano del Corso
 *
 * Palette dal kit Elementor del sito (nero #000/#14110c, oro #D4AF37) e
 * Montserrat, gia' caricato dal tema: qui si usa se c'e', senza aggiungere
 * una richiesta. Tutto scoped sotto .ca-piano.
 *
 * Struttura: testata scura con i numeri, corpo chiaro con il riepilogo per
 * area (sempre visibile, 6-7 righe), l'indice completo dentro un <details>
 * chiuso, e la CTA in coda. Aperto di default l'indice sono 39 righe che
 * spingono giu' di due schermate la descrizione del corso.
 */

.ca-piano {
  --ca-oro: #d4af37;
  --ca-oro-scuro: #8a6d2c;
  --ca-nero: #14110c;
  --ca-crema: #fbf7ee;
  --ca-bordo: #ece0c4;
  --ca-testo: #2a251c;
  --ca-tenue: #6a6253;
  --ca-verde: #008c45;        /* il verde dell'acquisto, preso dall'infobar del tema */
  --ca-verde-scuro: #00733a;
  box-sizing: border-box;
  margin: 0 0 32px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ca-testo);
}
.ca-piano *, .ca-piano *::before, .ca-piano *::after { box-sizing: border-box; }
.ca-piano .ca-piano-svg { flex: 0 0 auto; display: block; }

/* ── Testata scura: il "counter digitale" ─────────────────────────────────── */
.ca-piano .ca-piano-testata {
  background: linear-gradient(160deg, #1d1a15 0%, var(--ca-nero) 100%);
  border-radius: 14px 14px 0 0;
  padding: 1.5rem 1.5rem 1.35rem;
}
.ca-piano .ca-piano-occhiello {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ca-oro);
}
.ca-piano .ca-piano-h {
  margin: 0 0 1.15rem;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}
.ca-piano .ca-piano-numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ca-piano .ca-piano-n {
  padding: .7rem .85rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(212, 175, 55, .28);
  border-radius: 10px;
}
.ca-piano .ca-piano-cifra {
  display: block;
  font-size: 2.35rem;
  line-height: 1;
  font-weight: 800;
  color: var(--ca-oro);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.ca-piano .ca-piano-eti {
  display: block;
  margin-top: .35rem;
  font-size: .74rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .04em;
  color: #e8e1d2;
}
.ca-piano .ca-piano-sotto {
  margin: 1rem 0 0;
  max-width: 64ch;
  font-size: .84rem;
  line-height: 1.5;
  color: #cfc7b6;
}

/* ── Corpo chiaro ─────────────────────────────────────────────────────────── */
.ca-piano .ca-piano-corpo {
  padding: 1.1rem 1.15rem 1.15rem;
  background: var(--ca-crema);
  border: 1px solid var(--ca-bordo);
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

/* Riepilogo per area: quello che si legge senza aprire niente. */
.ca-piano .ca-piano-macro { margin: 0; padding: 0; list-style: none; }
.ca-piano .ca-piano-macro-r {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 150px 92px;
  align-items: center;
  gap: 0 14px;
  padding: .6rem .2rem;
  border-bottom: 1px solid rgba(236, 224, 196, .9);
}
.ca-piano .ca-piano-macro-r:last-child { border-bottom: 0; }
.ca-piano .ca-piano-macro-i { display: flex; color: var(--ca-oro-scuro); }
.ca-piano .ca-piano-mese-n {
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--ca-oro);
  border-radius: 50%;
  font-size: .76rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ca-oro-scuro);
}
.ca-piano .ca-piano-macro-t { font-size: .9rem; font-weight: 700; line-height: 1.35; }
.ca-piano .ca-piano-macro-d {
  display: block;
  margin-top: 1px;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ca-tenue);
}
.ca-piano .ca-piano-macro-b {
  height: 6px;
  background: #ece0c4;
  border-radius: 3px;
  overflow: hidden;
}
.ca-piano .ca-piano-macro-b > span {
  display: block;
  height: 100%;
  background: var(--ca-oro);
  border-radius: 3px;
}
.ca-piano .ca-piano-macro-n {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ca-testo);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Un riepilogo per vista: quello tematico non parla di mesi, quello
   cronologico non parla di aree. La regola della 1.4.0, applicata anche qui. */
.ca-piano .ca-piano-macro { display: none; }
.ca-piano[data-vista="aree"] .ca-piano-macro--aree { display: block; }
.ca-piano[data-vista="attivazione"] .ca-piano-macro--onde { display: block; }

/* ── Indice completo, richiudibile ────────────────────────────────────────── */
.ca-piano .ca-piano-dett { margin-top: .9rem; border-top: 1px solid var(--ca-bordo); }
.ca-piano .ca-piano-summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .55rem .2rem;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ca-oro-scuro);
  list-style: none;
}
.ca-piano .ca-piano-summary::-webkit-details-marker { display: none; }
.ca-piano .ca-piano-summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease-out;
}
.ca-piano .ca-piano-dett[open] .ca-piano-summary::before { transform: rotate(-135deg) translate(-1px, -1px); }
.ca-piano .ca-piano-summary:hover { color: var(--ca-nero); }
.ca-piano .ca-piano-dett-corpo { padding-bottom: .4rem; }

/* Due schede, non due pillole sparse: si vede che sono due modi di leggere
   la stessa lista, e che uno solo e' attivo. */
.ca-piano .ca-piano-viste {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 1rem;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--ca-bordo);
  border-radius: 12px;
}
.ca-piano .ca-piano-vista {
  appearance: none;
  /* Il reset di hello-elementor colpisce questi pulsanti con [type=button],
     che pesa quanto una classe: a parita' di peso vinceva lui, perche' il suo
     foglio e' caricato dopo. Da qui i pulsanti rosa e — piu' grave — il suo
     white-space: nowrap, che impediva alle etichette di andare a capo e faceva
     sfondare la riga oltre lo schermo. Ogni regola di questo file e' quindi
     ".ca-piano .ca-piano-…": due classi, che battono l'attributo. Le tre
     proprieta' qui sotto sono l'antidoto diretto a quel reset. */
  white-space: normal;
  min-width: 0;              /* senza, un flex item non scende sotto il testo */
  text-transform: none;
  min-height: 44px;          /* area di tocco: 38 era sotto la soglia */
  padding: .45rem 1.05rem;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ca-tenue);
  cursor: pointer;
  transition: background .16s ease-out, color .16s ease-out;
}
/* L'attributo hidden del server DEVE vincere: una regola display: sul selettore
   di classe batte il [hidden] del browser, e senza JavaScript le schede si
   vedevano lo stesso — due pulsanti che non commutano niente. Trovato con
   scripts/audit-piano-corso.js, che carica la pagina a JS disattivato. */
.ca-piano .ca-piano-viste[hidden] { display: none !important; }
/* Lo stesso reset colora hover E focus di rosa pieno con
   "[type=button]:focus, button:hover": dopo un tap su telefono il pulsante
   resta in focus, e la scheda attiva diventava rosa. Vanno dichiarati tutti e
   due gli stati, per entrambe le schede. */
.ca-piano .ca-piano-vista:hover,
.ca-piano .ca-piano-vista:focus {
  background: transparent;
  color: var(--ca-nero);
}
.ca-piano .ca-piano-vista[aria-selected="true"],
.ca-piano .ca-piano-vista[aria-selected="true"]:hover,
.ca-piano .ca-piano-vista[aria-selected="true"]:focus {
  background: var(--ca-nero);
  color: var(--ca-oro);
}

.ca-piano .ca-piano-gruppo + .ca-piano-gruppo { margin-top: 1.35rem; }
.ca-piano .ca-piano-gruppo-h {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .2rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--ca-bordo);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ca-nero);
}
.ca-piano .ca-piano-ico { display: flex; color: var(--ca-oro-scuro); }
.ca-piano .ca-piano-conta {
  margin-left: auto;
  padding: 2px 9px;
  background: var(--ca-nero);
  border-radius: 12px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ca-oro);
}
.ca-piano .ca-piano-gruppo-d {
  margin: .4rem 0 .6rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ca-tenue);
}
.ca-piano .ca-piano-lista { margin: 0; padding: 0; list-style: none; }
/* Riga a colonne fisse, MAI a capo: l'etichetta dell'area ha una larghezza
   sua, uguale per tutte, cosi' le etichette formano una colonna allineata.
   Prima erano flex-wrap: le righe con il titolo lungo la spingevano sotto e
   quelle corte no, e la colonna si vedeva a zig-zag. */
.ca-piano .ca-piano-lez {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .6rem;
  border-bottom: 1px solid rgba(236, 224, 196, .8);
}
.ca-piano .ca-piano-lez:last-child { border-bottom: 0; }
.ca-piano .ca-piano-lez-a {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;                 /* senza questo il titolo lungo non si stringe */
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .5rem .25rem;
  cursor: pointer;
  text-decoration: none !important;
  color: var(--ca-testo) !important;
  box-shadow: none !important;
}
.ca-piano .ca-piano-lez-a:hover .ca-piano-tit { color: var(--ca-oro-scuro); text-decoration: underline; }
.ca-piano .ca-piano-num {
  flex: 0 0 auto;
  min-width: 26px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ca-oro-scuro);
  font-variant-numeric: tabular-nums;
}
.ca-piano .ca-piano-tit { min-width: 0; font-size: .9rem; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
/* Un criterio per vista, mai due nella stessa riga.
   · Per argomento  → numerazione interna all'area, niente mesi (l'arco di ogni
     area sta gia' nel riepilogo in alto).
   · Per attivazione → il mese e' il titolo del gruppo, quindi sulla riga
     restano la posizione nel corso e l'area di provenienza. */
.ca-piano .ca-piano-num--area,
.ca-piano .ca-piano-num--corso { display: none; }
.ca-piano[data-vista="aree"] .ca-piano-num--area { display: block; }
.ca-piano[data-vista="attivazione"] .ca-piano-num--corso { display: block; }

.ca-piano .ca-piano-tag {
  display: none;
  flex: 0 0 auto;
  width: 142px;                 /* fissa: e' cio' che rende la colonna dritta */
  align-items: center;
  justify-content: flex-start;
  gap: .3rem;
  padding: 3px 10px 3px 7px;
  background: #fff;
  border: 1px solid var(--ca-bordo);
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ca-oro-scuro);
}
.ca-piano .ca-piano-tag .ca-piano-svg { width: 14px; height: 14px; }
.ca-piano[data-vista="attivazione"] .ca-piano-tag { display: inline-flex; }

/* ── Chiusura ─────────────────────────────────────────────────────────────── */
.ca-piano .ca-piano-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ca-bordo);
}
.ca-piano .ca-piano-cta-t { margin: 0; flex: 1 1 240px; font-size: .86rem; font-weight: 600; color: var(--ca-testo); }
.ca-piano .ca-piano-cta-w { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ca-piano .ca-piano-cta-b {
  display: block;
  min-height: 48px;
  padding: .7rem 1.5rem;
  background: var(--ca-verde);
  border-radius: 10px;
  /* 19px/800: sopra la soglia "testo grande" di WCAG, dove il bianco su questo
     verde passa con 4,2:1. Sotto i 18,66px servirebbe 4,5:1 e non ci arriva —
     e cambiare verde avrebbe rotto la coerenza col pulsante in cima. */
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .01em;
  color: #fff !important;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 140, 69, .22);
  transition: background .16s ease-out, transform .16s ease-out;
}
.ca-piano .ca-piano-cta-b:hover { background: var(--ca-verde-scuro); transform: translateY(-1px); }
.ca-piano .ca-piano-cta-r { font-size: .74rem; font-weight: 600; color: var(--ca-tenue); }

/* Solo per gli screen reader: il numero da solo ("10") non dice cosa conta. */
.ca-piano .ca-piano-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Focus sempre visibile: il tema toglie l'outline di default (WCAG 2.4.7). */
.ca-piano a:focus-visible,
.ca-piano button:focus-visible,
.ca-piano summary:focus-visible,
.ca-piano [tabindex]:focus-visible {
  outline: 3px solid var(--ca-oro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Riga LearnDash appena raggiunta dall'indice. */
.ca-piano .ca-piano-mirata { animation: ca-piano-lampo 1.6s ease-out 1; }
@keyframes ca-piano-lampo {
  0%, 60% { box-shadow: inset 0 0 0 3px rgba(212, 175, 55, .85); }
  100%    { box-shadow: inset 0 0 0 3px rgba(212, 175, 55, 0); }
}

/* Su schermo stretto il riepilogo scende a due righe per area e la barra
   sparisce: e' un indicatore di appoggio, e su 390px costava una riga per
   ognuna delle sei aree. Misurato: il blocco chiuso passa da 1031px a ~740px,
   cioe' da una schermata e un quarto a meno di una. */
@media (max-width: 780px) {
  .ca-piano .ca-piano-macro-r {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 0 12px;
    padding: .55rem .2rem;
  }
  .ca-piano .ca-piano-macro-b { display: none; }
  .ca-piano .ca-piano-macro-n { font-size: .78rem; white-space: nowrap; }
}
@media (max-width: 400px) {
  /* Sotto i 400px l'etichetta perde l'icona — i pixel servono al titolo — e il
     testo si centra, altrimenti resta appoggiato a sinistra in una pillola che
     ha comunque la larghezza della colonna. */
  .ca-piano .ca-piano-tag { justify-content: center; }
  .ca-piano .ca-piano-tag .ca-piano-svg { display: none; }
}
@media (max-width: 560px) {
  /* La descrizione dell'area vale su desktop; su 390px sono sei righe in piu'
     che rimandano piu' giu' il pulsante d'acquisto. Il nome basta. */
  .ca-piano .ca-piano-macro-d { display: none; }
  .ca-piano .ca-piano-viste { display: flex; width: 100%; }
  .ca-piano .ca-piano-vista {
    flex: 1 1 0;
    min-width: 0;
    padding: .4rem .5rem;
    font-size: .78rem;
    line-height: 1.25;
  }
}
@media (max-width: 560px) {
  .ca-piano .ca-piano-testata { padding: 1.1rem .9rem 1rem; }
  .ca-piano .ca-piano-h { font-size: 1.12rem; margin-bottom: .85rem; }
  .ca-piano .ca-piano-numeri { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .ca-piano .ca-piano-n { padding: .5rem .25rem; }
  .ca-piano .ca-piano-cifra { font-size: 1.5rem; }
  .ca-piano .ca-piano-eti { margin-top: .25rem; font-size: .64rem; letter-spacing: .02em; }
  .ca-piano .ca-piano-sotto { margin-top: .8rem; font-size: .8rem; }
  .ca-piano .ca-piano-corpo { padding: .85rem .8rem .9rem; }
  .ca-piano .ca-piano-macro-t { font-size: .85rem; }
  .ca-piano .ca-piano-lez { gap: .45rem; }
  .ca-piano .ca-piano-tag { width: 124px; font-size: .68rem; padding: 3px 8px 3px 6px; }
  .ca-piano .ca-piano-cta { justify-content: center; text-align: center; gap: .6rem; }
  .ca-piano .ca-piano-cta-t { flex-basis: 100%; font-size: .82rem; }
  .ca-piano .ca-piano-cta-w { width: 100%; }
  .ca-piano .ca-piano-cta-b { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-piano .ca-piano-mirata { animation: none; }
  .ca-piano *, .ca-piano *::before { transition: none !important; }
}