/* =============================================================================
   ACADEMY — base condivisa
   Token, tipografia, bottoni ed elementi ricorrenti del layout `layout-accademy/`.
   Serve tutte le pagine con wrapper `.mca` (front page, percorsi, …), che vi
   aggiungono sopra il proprio foglio.

   Tutto è confinato dentro `.mca` per non entrare in conflitto con general.css
   (che imposta h1/h2 globali e sottolinea i link).
   ========================================================================== */

.mca {
    --mca-ink: #0e0e0e;
    --mca-body: #5a564f;
    --mca-body-dark: #33302b;
    --mca-muted: #8a8580;
    --mca-cream: #f5f4f2;
    --mca-onDark: #c9c5be;
    --mca-line: rgba(14, 14, 14, .12);
    --mca-line-light: rgba(255, 255, 255, .16);
    --mca-pad: 44px;
    --mca-max: 1320px;

    font-family: 'Jost', sans-serif;
    color: var(--mca-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.mca .mca-disp { font-family: 'Space Grotesk', sans-serif; }

/* I link ereditano il colore di chi li contiene invece di imporsi l'inchiostro:
   dentro `.mca` è lo stesso valore, ma sui fondi scuri (cover, card nere) un
   colore dichiarato qui vincerebbe sulla classe del componente — `.mca a` vale
   (0,1,1) — e il testo finirebbe nero su nero. */
.mca a { text-decoration: none; color: inherit; transition: color .25s ease, background .3s ease, border-color .3s ease, opacity .25s ease; }
.mca a:hover { color: #555; }
.mca img,
.mca video { display: block; }
.mca p { color: var(--mca-body); }
.mca strong { font-weight: 500; color: var(--mca-ink); }
.mca h1, .mca h2, .mca h3, .mca h4 { margin: 0; letter-spacing: normal; }

.mca-container {
    max-width: var(--mca-max);
    margin: 0 auto;
    padding-left: var(--mca-pad);
    padding-right: var(--mca-pad);
}

.mca-section { padding-top: 130px; padding-bottom: 130px; }

/* ── Elementi ricorrenti ──────────────────────────────────────────────── */
.mca-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--mca-muted);
}
.mca-eyebrow--light { color: rgba(255, 255, 255, .7); }

.mca .mca-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 50px;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 16px 0 0;
}
.mca .mca-title--sm { font-size: 46px; margin-top: 14px; }
.mca .mca-title--xs { font-size: 34px; line-height: 1.1; margin-top: 12px; }
.mca .mca-title em { font-style: italic; font-weight: 500; }

.mca-head { max-width: 720px; }
.mca-head--center { margin: 0 auto 56px; text-align: center; }
.mca-head--narrow { max-width: 680px; margin-bottom: 48px; }
.mca-head__text { margin: 20px 0 0; font-size: 17px; line-height: 1.7; font-weight: 300; }

.mca-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 17px 30px;
    border-radius: 100px;
    white-space: nowrap;
    /* Un `.mca-btn` può essere un <a> o un <button> — quelli che aprono il form
       richiesta informazioni lo sono. Le proprietà che il browser mette da sé
       sui bottoni si azzerano qui, nella regola base a specificità (0,1,0),
       così le varianti scure e chiare qui sotto continuano a vincere. */
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
/* Le varianti restano scritte come `.mca .mca-btn--…` perché `.mca a` qui sopra
   vale (0,1,1) e batterebbe la sola classe del bottone: i bottoni scuri che
   sono link finirebbero con il testo nero su fondo nero. */
.mca .mca-btn--dark { background: var(--mca-ink); color: #fff; }
.mca .mca-btn--dark:hover { background: #333; color: #fff; }
.mca .mca-btn--ghost { border: 1px solid rgba(14, 14, 14, .25); color: var(--mca-ink); }
.mca .mca-btn--ghost:hover { border-color: var(--mca-ink); color: var(--mca-ink); }
.mca .mca-btn--light { background: #fff; color: var(--mca-ink); }
.mca .mca-btn--light:hover { background: #ddd; color: var(--mca-ink); }
.mca .mca-btn--outline-light { color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.mca .mca-btn--outline-light:hover { background: rgba(255, 255, 255, .14); color: #fff; }
/* Larghezza piena: nelle card il bottone chiude la colonna. */
.mca-btn--block { display: flex; justify-content: center; width: 100%; font-size: 12.5px; padding: 16px 24px; gap: 10px; }

/* ── Aggiungi al carrello ───────────────────────────────────────────────────
   Il bottone è un `.mca-btn` come gli altri, ma WooCommerce ci lavora sopra da
   JavaScript: lo marca `loading` mentre parla col server e, finito, gli accoda
   un link al carrello. Quel link non è nostro e senza queste righe erediterebbe
   lo stile dei link di contenuto, spuntando fuori posto sotto al bottone. */
.mca .mca-cart-btn.loading { opacity: .55; pointer-events: none; }
.mca .added_to_cart {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--mca-body);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mca .added_to_cart:hover { color: var(--mca-ink); }

/* Anche il prezzo del negozio arriva come markup e non come testo: importo,
   simbolo di valuta e, in saldo, il vecchio prezzo barrato più una nota per i
   lettori di schermo. Le regole stanno qui perché i punti in cui quel prezzo
   compare — card d'iscrizione, barra d'acquisto, card del catalogo — vivono in
   fogli diversi ma devono renderlo allo stesso modo. */
.mca-enroll__price-now .woocommerce-Price-amount,
.mca-ldbuy__price .woocommerce-Price-amount,
.mca-course__price-now .woocommerce-Price-amount { white-space: nowrap; }

.mca-enroll__price-now del,
.mca-ldbuy__price del,
.mca-course__price-now del {
    font-size: .5em;
    font-weight: 400;
    opacity: .45;
    margin-right: .35em;
}
.mca-enroll__price-now ins,
.mca-ldbuy__price ins,
.mca-course__price-now ins {
    text-decoration: none;
    background: none;
    color: inherit;
}

.mca .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mca-badge {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 100px;
    border: 1px solid rgba(14, 14, 14, .25);
}
.mca-badge--solid { background: var(--mca-ink); color: #fff; border-color: var(--mca-ink); }

.mca-tag {
    font-size: 11px;
    letter-spacing: .06em;
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(14, 14, 14, .18);
    color: inherit;
}

.mca-pill {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 8px 16px;
    border-radius: 100px;
    background: #fff;
    border: 1px solid var(--mca-line);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--mca-body);
    animation: mcaHeroIn 1s cubic-bezier(.19, 1, .22, 1) both;
}
.mca-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mca-ink); }

.mca-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Animazioni ───────────────────────────────────────────────────────── */
@keyframes mcaHeroIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes mcaSpin    { to { transform: rotate(360deg); } }
@keyframes mcaSpinRev { to { transform: rotate(-360deg); } }
@keyframes mcaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mcaFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* Come mcaMarquee ma al contrario: il nastro della hero è stampato due volte e
   risale da metà della propria larghezza fino a zero, cioè scorre verso destra e
   il giro si chiude su sé stesso. */
@keyframes mcaReel    { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Reveal allo scroll: front-page.js aggiunge .is-visible quando l'elemento entra
   nel viewport (con l'eventuale ritardo di data-delay). */
.mca [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.19, 1, .22, 1), transform .8s cubic-bezier(.19, 1, .22, 1);
}
.mca [data-reveal].is-visible { opacity: 1; transform: none; }

/* ── Responsive di base ───────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .mca { --mca-pad: 32px; }
    .mca .mca-title { font-size: 42px; }
}

@media (max-width: 991.98px) {
    .mca-section { padding-top: 90px; padding-bottom: 90px; }
    .mca-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .mca { --mca-pad: 20px; }
    .mca .mca-title,
    .mca .mca-title--sm { font-size: 32px; }
    .mca .mca-title--xs { font-size: 26px; }
    .mca-btn { padding: 15px 24px; font-size: 12px; }
}

/* Rispetto delle preferenze di movimento ridotto. */
@media (prefers-reduced-motion: reduce) {
    .mca *,
    .mca *::before,
    .mca *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .mca [data-reveal] { opacity: 1; transform: none; }
}

/* =============================================================================
   COVER — testata scura delle pagine Academy
   Usata da percorsi.php e calendario.php: stava dentro percorsi.css finché la
   pagina era una sola. La variante `--slim` toglie l'altezza alle pagine che
   sotto hanno un elenco e non un racconto.
   ========================================================================== */
.mca-cover {
    position: relative;
    overflow: hidden;
    background: var(--mca-ink);
    color: #fff;
}
.mca-cover__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .62;
}
.mca-cover__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(14, 14, 14, .88), rgba(14, 14, 14, .35));
}
.mca-cover__ring {
    position: absolute;
    top: -90px;
    right: -70px;
    width: 360px;
    opacity: .2;
    animation: mcaSpin 60s linear infinite;
}
.mca-cover__inner {
    position: relative;
    z-index: 2;
    padding-top: 80px;
    padding-bottom: 76px;
}

.mca-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--mca-muted);
    margin-bottom: 26px;
}
.mca-crumbs a { color: var(--mca-muted); }
.mca-crumbs a:hover { color: #fff; }
.mca-crumbs .is-current { color: #fff; }

/* Composto come il logo: Jost maiuscolo in peso leggero. La spaziatura del
   marchio è .42em ma è tarata su un logo piccolo — a questo corpo diventa aria
   fra le lettere e poco altro. Vedi la nota estesa in learndash.css, dove la
   stessa scelta vale per la cover del corso. */
.mca .mca-cover__title {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 54px;
    line-height: 1.16;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 20px 0 0;
    max-width: 860px;
    color: #fff;
}
/* Il prefisso `.mca` è obbligatorio, non un vezzo: academy-base dichiara
   `.mca p { color: var(--mca-body) }`, che vale (0,1,1) e batte la classe da
   sola. Senza prefisso questo paragrafo, che sta su fondo scuro, finiva del
   grigio caldo pensato per il testo su fondo chiaro. */
.mca .mca-cover__text {
    max-width: 640px;
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--mca-onDark);
}
.mca-cover__text strong { color: #fff; }

.mca-cover__stats {
    display: flex;
    gap: 44px;
    margin-top: 44px;
    flex-wrap: wrap;
}
.mca-cover .mca-stat__num { font-size: 34px; font-weight: 700; line-height: 1; }
.mca-cover .mca-stat__label {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mca-muted);
    margin-top: 6px;
}

/* Testata compatta: sotto c'è subito da leggere, e una cover alta come quella
   del catalogo terrebbe il primo contenuto fuori schermo. */
.mca-cover--slim .mca-cover__inner { padding-top: 56px; padding-bottom: 52px; }
.mca .mca-cover--slim .mca-cover__title { font-size: 44px; }

@media (max-width: 900px) {
    .mca .mca-cover__title { font-size: 34px; letter-spacing: .08em; }
    .mca .mca-cover--slim .mca-cover__title { font-size: 30px; }
}

/* =============================================================================
   SEGNO DI MARCA — il cuore del logo fra due filetti
   Uno stacco fra due sezioni che sa di marchio.
   Markup: template-parts/brand-mark.php
   ========================================================================== */
/* Il cuore è linea sottile: sotto i 64px si impasta. 72 è la misura minima a
   cui il disegno si legge ancora, e per questo non scende nemmeno sul telefono
   — lì si stringono i filetti, non il marchio. */
/* L'aria sopra la mette la sezione che precede — hanno tutte un padding
   generoso — quella sotto se la porta il marchio: senza, in home finirebbe
   incollato al bordo del blocco crema che comincia subito dopo. */
.mca-brandmark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--mca-pad) 96px;
}
.mca-brandmark__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--mca-line);
}
.mca-brandmark__heart {
    flex: 0 0 auto;
    display: block;
    height: 72px;
    width: auto;
}

/* Su fondo scuro. Il cuore è nero pieno su trasparente, quindi si ribalta:
   invertire i canali colore lo porta a bianco e lascia stare l'alfa, così i
   bordi sfumati restano sfumati. Un secondo file bianco sarebbe una copia da
   tenere allineata a mano ogni volta che il marchio cambia. */
.mca-brandmark--light .mca-brandmark__rule { background: var(--mca-line-light); }
.mca-brandmark--light .mca-brandmark__heart { filter: invert(1); }

@media (max-width: 600px) {
    .mca-brandmark { gap: 18px; padding-bottom: 64px; }
}

/* ── «Iscriviti»: la domanda a chi non ha fatto l'accesso ─────────────────
   Vedi template-parts/learndash/enroll-button.php. Una domanda, due strade:
   la finestra deve leggersi in un colpo d'occhio, non spiegare il Level Match. */
/* Anche `dialog.` davanti: la finestra nasce dentro i contenitori dei bottoni,
   e regole come `.mca-enroll__actions > * + *` le darebbero un margine. */
dialog.mca-gate {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    overflow: auto;
    padding: 40px 36px 36px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    color: var(--mca-ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}
.mca-gate::backdrop { background: rgba(14, 14, 14, .55); }
.mca-gate__close-wrap { position: absolute; top: 12px; right: 12px; margin: 0; }
.mca-gate__close {
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: var(--mca-cream); color: var(--mca-ink);
    font-size: 20px; line-height: 1; cursor: pointer;
}
/* Il prefisso `.mca` è obbligatorio, non un vezzo: academy-base dichiara
   `.mca h1, .mca h2, … { margin: 0 }`, che vale (0,1,1) e batte la classe da
   sola. Senza prefisso questi margini non si applicavano affatto — il titolo
   stava incollato al sopratitolo sopra e alle due scelte sotto, e il modale
   sembrava un blocco unico di testo. */
/* `balance` perché il titolo è una domanda intera e va a capo: senza, l'ultima
   parola resta sola su una riga tutta sua e la domanda si legge in due tempi.
   Dove non è supportato il titolo va a capo come sempre — non si perde niente. */
.mca .mca-gate__title {
    margin: 12px 0 26px;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 500;
    text-wrap: balance;
}

/* Il sopratitolo e il titolo stanno alla larga dalla × in alto a destra: il
   titolo è una domanda intera e su due righe arriverebbe a passarci sotto. */
.mca-gate .mca-eyebrow,
.mca-gate__title { padding-right: 44px; }

.mca-gate__options { display: grid; gap: 12px; }
.mca-gate__option {
    display: grid; gap: 6px;
    padding: 20px 22px;
    border: 1px solid var(--mca-line);
    border-radius: 14px;
    color: var(--mca-ink);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}
.mca-gate__option:hover { border-color: var(--mca-ink); background: var(--mca-cream); color: var(--mca-ink); }
.mca-gate__option strong { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mca-gate__option span { font-size: 14px; line-height: 1.5; color: var(--mca-body); }

@media (max-width: 575px) {
    dialog.mca-gate { padding: 34px 20px 24px; }
    .mca .mca-gate__title { font-size: 21px; margin: 10px 0 22px; }
    .mca-gate__option { padding: 16px 18px; }
}