/* ============================================================
   IL FOOTER, IN UN FILE SOLO
   ============================================================
   Prima queste regole stavano in tre posti: il CSS del sito, quello di ODG e
   un blocco <style> dentro production/share.html. Il 17/08/2026 una correzione
   di mezza riga — lo spazio fra le icone social e il marchio sullo schermo
   stretto — ha dovuto essere ripetuta tre volte. Tre copie della stessa cosa
   sono tre occasioni di divergere, e stavano gia' divergendo.

   Il file lo caricano tutti: le pagine del sito e quelle delle app.

   PERCHE' C'E' LO STRATO --fo-* QUI SOTTO
   Sito e app hanno gli stessi valori con nomi diversi: il sito chiama --space-m
   quello che le app chiamano --f-gap-m, --ink quello che chiamano --text. Un
   file condiviso non puo' dipendere dal vocabolario di chi lo carica. Quindi
   qui si dichiara un vocabolario proprio, che pesca dal primo nome, poi dal
   secondo, e in ultimo da un valore scritto per esteso: cosi' funziona ovunque
   e continua a funzionare anche se un giorno una delle due parti rinomina i
   suoi token.
   Da qui in giu' si usano SOLO le --fo-*. Se aggiungi una regola e ti serve un
   token nuovo, aggiungilo a questo elenco: non pescare direttamente da --ink o
   da --text, o il file torna a dipendere da dove sta. */
.site-footer {
  --fo-ink:         var(--ink,             var(--text,       #000000));
  --fo-ink-soft:    var(--ink-soft,        var(--text-dim,   #4a4a4a));
  --fo-paper:       var(--paper,           var(--bg,         #ffffff));
  --fo-invert:      var(--ink-invert,      #fafafa);
  --fo-invert-soft: var(--ink-invert-soft, rgba(250, 250, 250, 0.72));
  --fo-gap:         var(--space-l,         var(--f-gap,      clamp(36px, 4.857vw, 68px)));
  --fo-gap-m:       var(--space-m,         var(--f-gap-m,    clamp(24px, 3vw, 42px)));
  --fo-gap-s:       var(--space-s,         var(--f-social-top, clamp(16px, 1.857vw, 26px)));
  --fo-fs-tiny:     var(--fs-tiny,         var(--f-txt,      14px));
  --fo-fs-body:     var(--fs-body,         var(--f-h3,       16px));
  --fo-font:        var(--font-body, "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --fo-logo-w:      var(--logo-w, 237px);
  /* Larghezza del contenuto. Sul sito il footer sta dentro la griglia, che la
     larghezza gliela da' gia': qui "nessun limite" e' il valore giusto. Le
     applicazioni non hanno griglia e la impostano loro (.site-footer--app). */
  --fo-row-w:       none;
  --fo-row-pad:     0px;
}

/* ---------- Footer ---------- */
/* The live site builds its footer on the same Fluid Engine grid as every
   other section, with blocks at fixed coordinates — not an evenly divided
   4-column row, which is what this used to approximate and why the spacing
   never matched. Its rows are shorter than a page section's (25.3125px vs
   28.5px), so the grid gets a footer variant. */
.site-footer {
  background: var(--fo-paper);
  /* Top padding trimmed (was clamp(40px,6vw,72px)) to sit closer to
     whichever section's grey/soft background comes right before it. */
  padding: var(--fo-gap-m) 0 var(--fo-gap-m);
}
@media (min-width: 768px) {
  .fe-grid--footer { grid-auto-rows: minmax(25.3125px, auto); }
}
/* No intermediate stacking: the source keeps its 4-across footer all the way
   down and simply lets the lines wrap, which stays tidy. An earlier attempt
   here stacked below 1200px and looked far worse than just wrapping. */
/* Logo and badge must show whole, so they opt out of the grid's default
   object-fit: cover and are sized by their block instead of cropped by it. */
.fe-grid--footer img { object-fit: contain; object-position: left center; }
/* Capped at the 237px the source renders at 1280px. Without the cap the logo
   fills whatever block it sits in, which on the stacked mobile layout is
   almost the full page width. */
/* The logo file's own top edge is set by the tall peak of the "W" (a
   decorative flourish), not by the cap-height of the rest of the
   wordmark — measured directly on the pixels of the vector logo (drawn to
   a 1920x433 canvas to sample it precisely): ink starts at row 8 (the
   peak) but the normal letters ("atermelon") don't start until row 103 of
   433. Aligning by the image's box edge (as the grid does) left
   "atermelon"/"FILM & ANIMATION" sitting visibly lower than "Legal" next
   to it. Shifted up by that same proportion (95/433 = 21.9%) of the
   rendered height to compensate. */
/* Note: checked precisely (pixel-sampling the rendered logo) and the
   "Watermelon" wordmark's own baseline already lines up with "Legal"'s
   baseline within 0.6px at -11.73px — this extra +5px is a manual
   aesthetic nudge down on top of that, not a correction to it. */
.footer-logo { display: block; width: 100%; max-width: 237px; margin-top: -6.73px; color: var(--fo-ink); }
.footer-logo img { width: 100%; height: auto; }
/* Fixed height, not height:100%. The badge sits in an auto-sized grid row, so
   sizing it off the row makes row height and image height depend on each
   other and the row inflates. Was 98px (matching the source); trimmed a bit
   smaller per request. */
/* Il selettore deve battere `.fe-block img { height: 100% }` della griglia,
   che altrimenti vince e rimette in piedi il dimensionamento circolare. Era
   scritto `.fe-block img.footer-bcorp`, che pero' dentro le applicazioni non
   corrisponde a niente: li' non c'e' nessuna griglia e il marchio restava
   grande quanto capitava. `.site-footer .footer-bcorp` vale due classi contro
   una classe e un elemento, quindi vince lo stesso e vale in tutti e due i
   posti. */
.site-footer .footer-bcorp { width: auto; height: 78px; max-width: 100%; flex: 0 0 auto; align-self: start; }
/* One row, four items, sized to their own content. Equal column widths gave
   visibly unequal gaps (measured 120px between Legal and Contact, 253px
   between Contact and B Corp) because each column kept a different amount of
   empty space after its text. With fit-content widths the only thing between
   them is the gap, so the two are equal by definition; margin-right:auto on
   the logo collects all the spare width in the one place where it does no
   harm, which also stops Legal drifting toward the logo as the page narrows. */
/* display:flex e' ridondante sul sito — la riga e' un .fe-block, che e' gia'
   flex — ma serve alle applicazioni, dove il footer non sta in una griglia. */
.footer-row { display: flex; width: 100%; align-items: flex-start; gap: var(--fo-gap);
              max-width: var(--fo-row-w); margin-inline: auto; padding-inline: var(--fo-row-pad); }
/* Logo and social stacked in one left column, both flush left. width, not
   max-width: as a flex item the logo's `width:100%` would resolve against the
   whole row. */
.footer-row > .footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
}
/* Legal + Contact travel together as one group, centred in the space between
   the two marks: margin-inline:auto splits the leftover width equally on both
   sides, so brand -> Legal and Contact -> B Corp come out the same. Before
   this the auto margin sat on the brand alone, which pushed the whole group
   right and left 470px of air on one side against 68px on the other. */
.footer-mid {
  display: flex;
  gap: var(--fo-gap);
  margin-inline: auto;
  min-width: 0;
}
.footer-brand { --logo-w: 237px; }
.footer-brand .footer-logo { width: var(--fo-logo-w); }
/* Flush left with the logo box, not indented to the "FILM & ANIMATION" line.
   The vertical position is set by JS (see footer.js): it is measured off the
   copyright line rather than computed, because the distance depends on how
   the Legal column happens to wrap, and on which of the two middle columns is
   the taller one. */
.footer-brand .footer-social { margin-left: 0; }
.footer-row .footer-col { width: fit-content; min-width: 0; flex: 0 1 auto; }
/* Four columns need roughly 740px of text plus three gaps; below that they
   start crushing, so the footer stacks earlier than the rest of the layout. */
@media (max-width: 1000px) {
  .footer-row { flex-direction: column; gap: var(--fo-gap-m); }
  .footer-mid { flex-direction: column; gap: var(--fo-gap-m); margin-inline: 0; }
  .footer-row .footer-col { width: auto; }
}
.footer-social { display: flex; align-items: center; gap: 1.1rem; margin-top: var(--fo-gap-s); }
/* Impilato, le icone stanno fra il marchio e "Note legali" ma erano piu'
   vicine al primo che alla seconda: --space-s sopra (16px), --space-m sotto
   (24px, il gap fra le colonne). Sembravano appese al logo invece di essere
   una riga a se'. Stessa misura sopra e sotto.
   ATTENZIONE ALL'ORDINE: questo blocco deve stare DOPO la riga qui sopra.
   Una @media non aggiunge specificita', e i due selettori sono identici:
   scritto prima, vinceva il margin-top di sopra e questa correzione non
   faceva niente — misurato il 17/08/2026, 16px sopra e 24 sotto a 375px,
   esattamente il difetto che doveva togliere. */
@media (max-width: 1000px) {
  .footer-social { margin-top: var(--fo-gap-m); }
}
.footer-social a { display: flex; color: var(--fo-ink); position: relative; }
.footer-social svg { width: 28px; height: 28px; display: block; }
/* Same tap-area trick as .nav-toggle: icons stay 28x28 visually, the
   touchable box becomes 44x44. Safe against the two icons stealing each
   other's taps — their centres sit 45.6px apart (28 + 17.6 gap), so two
   44px boxes still don't overlap. */
.footer-social a::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
/* Al passaggio del mouse l'icona rientra un poco e sbiadisce: un gesto solo,
   nella stessa direzione. Il focus da tastiera resta fuori — li' l'icona deve
   restare piena e ben leggibile, non attenuata. */
.footer-social a { transition: transform .2s ease, opacity .2s ease; }
.footer-social a:hover { opacity: .5; transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
  .footer-social a { transition: opacity .2s ease; }
  .footer-social a:hover { transform: none; }
}
/* Internal spacing measured off the live site's Legal column (169px tall):
   heading 28.29px/1.2 then a 14px gap, links at 19.07px/1.2 with no gap
   between stacked lines, another 14px before the small print. Everything
   below the heading is the soft grey, including the bold "Watermelon". */
.footer-col h3 { font-family: var(--fo-font); font-weight: 400; font-size: var(--fo-fs-body); line-height: 1.2; color: var(--fo-ink); margin: 0 0 14px; }
/* overflow-wrap: unbreakable tokens like the email address are wider than the
   column at narrow viewports and would otherwise run out over the B Corp
   block instead of wrapping the way the source does. */
/* Unified with .footer-legal-meta p below: every small line in the footer
   (policy link, address, email, phone, copyright/P.IVA/capitale) reads at the
   same flat size, a step smaller than the old 16px "Capitale sociale" size. */
.footer-col > a, .footer-col > p { display: block; font-size: var(--fo-fs-tiny); line-height: 1.2; margin: 0; color: var(--fo-ink-soft); overflow-wrap: anywhere; }
.footer-col h3 { overflow-wrap: anywhere; }
/* Tutte le righe di una colonna sono righe consecutive dello stesso blocco,
   non voci separate: la loro spaziatura e' quella di un a capo. Prima i link
   di Contatti avevano 7px di padding (bersaglio 31px) e fra telefono e mail
   restava un buco di 14px che si leggeva come una riga vuota.
   Con 2px il bersaglio scende a ~21px, sotto i 24 raccomandati da WCAG 2.5.8.
   E' il massimo possibile con righe a contatto: allargarlo oltre il passo
   della riga farebbe sovrapporre i due riquadri, che comincerebbero a
   rubarsi i tocchi a vicenda — peggio di un bersaglio piccolo. */
.footer-col > a { padding-block: 2px; margin-top: -2px; margin-bottom: -2px; }
.footer-col > p + a { margin-top: 2px; }
.footer-col > a + a { margin-top: 0; }
/* Azzerare solo il margin-top del link successivo non basta: i margini
   verticali adiacenti collassano e il -2px inferiore del precedente vince,
   tirandolo su. Va tolto sul link che ne ha un altro subito dopo. La regola
   su tel serve ai browser senza :has(). */
.footer-col > a:has(+ a) { margin-bottom: 0; }
/* L'indirizzo e' una voce a se', telefono e mail sono due righe dello stesso
   recapito: dopo l'indirizzo torna lo stacco da voce a voce (14px), fra
   telefono e mail resta l'a capo (4px). 10 di margine + i 2+2 di padding
   fanno i 14 che separano ogni altra voce del footer. */
.footer-col > a[href^="tel"] { margin-top: 10px; margin-bottom: 0; }
/* A stringersi dev'essere la colonna legale, non i recapiti. Sono entrambe
   flessibili e sotto i 900px di larghezza cedevano in proporzione: Contatti
   scendeva a 122px e "+39 0342 1856126" andava a capo a meta' numero. Un
   numero di telefono e un indirizzo mail spezzati non si leggono; una riga
   di piu' nel blocco legale si'. */
.footer-col:not(.footer-col--legal) { flex-shrink: 0; }
/* Only the policy link and the email are underlined; the phone number is not. */
/* No permanent underline: the links carry their affordance on hover instead,
   where the text both darkens to full ink and gains a rule. Two cues, not one,
   so it does not rest on colour alone. :focus-visible gets the same treatment
   so keyboard users see what mouse users see. */
.footer-col > a { text-decoration: none; transition: color 0.18s ease; }
.footer-col > a:hover,
.footer-col > a:focus-visible {
  color: var(--fo-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Small print sits under the Legal column, not in a separate full-width row. */
.footer-legal-meta { margin-top: 14px; }
.footer-legal-meta p { font-size: var(--fo-fs-tiny); color: var(--fo-ink-soft); line-height: 1.2; margin: 0; }
/* The P.IVA line needs 294px. The Legal column only reaches that from a
   ~1320px viewport (287px at 1280), so nowrap is gated there — applying it
   any earlier is what made the text run over the Contact column instead of
   wrapping. Below 1320 it wraps to a second line, which is harmless.
   Fuori dal sito no: quella soglia guarda la finestra, ma quello che conta e'
   la colonna. Nelle applicazioni il footer e' largo 900px fissi, quindi la
   colonna non arriva mai ai 294px nemmeno su uno schermo da 2000 — e la riga,
   invece di andare a capo, finirebbe sopra i Contatti. */
@media (min-width: 1320px) {
  .site-footer:not(.site-footer--app) .footer-legal-meta p { white-space: nowrap; }
}
.footer-legal-meta strong { font-weight: 700; color: inherit; }


/* ---------- Footer su fondo scuro (variante) ----------
   NON e' il default: il sito watermelon.it ha il footer bianco. Questa
   variante esiste per le applicazioni (ODG, production, equipment — dal
   17/08/2026 sotto watermelon.it/odg, /production, /equipment) che avevano
   gia' un footer nero, cosi' condividono lo stesso componente invece di
   riscriverlo.
   Uso: <footer class="site-footer site-footer--dark"> e nel markup i marchi
   in versione bianca (logo-white.svg, bcorp-badge-white.svg). */
.site-footer--dark { background: var(--fo-ink); color: var(--fo-invert); }
.site-footer--dark .footer-col h3 { color: var(--fo-invert); }
.site-footer--dark .footer-col > a,
.site-footer--dark .footer-col > p,
.site-footer--dark .footer-legal-meta p { color: var(--fo-invert-soft); }
.site-footer--dark .footer-col > a:hover,
.site-footer--dark .footer-col > a:focus-visible { color: var(--fo-invert); }
.site-footer--dark .footer-legal-meta strong { color: var(--fo-invert); }
.site-footer--dark .footer-social a { color: var(--fo-invert); }
.site-footer--dark .report-nav { border-top-color: rgba(250, 250, 250, 0.28); }


/* ---------- Footer dentro le applicazioni (variante) ----------
   ODG e production. Tre differenze rispetto al sito, tutte per lo stesso
   motivo: nelle applicazioni il footer non sta dentro la griglia fluida, ha
   sopra di se' il contenuto della pagina sullo stesso fondo scuro, e non c'e'
   nessuna sezione colorata a fargli da stacco.
     - larghezza: 900px, quella della colonna di contenuto delle app;
     - una riga sopra, altrimenti footer e contenuto si toccano senza confine;
     - 64px di stacco dal contenuto.
   Il colore NON serve dichiararlo: le applicazioni definiscono gia' --bg,
   --text, --text-dim scuri e lo strato --fo-* qui sopra li pesca da solo.
   Uso: <footer class="site-footer site-footer--app"> e nel markup i marchi in
   versione bianca (logo-white.svg, bcorp-badge-white.svg). */
/* Il backend di production e' largo 1200, non 900: senza questa variante il
   footer restava stretto in mezzo alla pagina. La classe c'era gia', l'avevo
   tolta il 17/08/2026 come "codice morto" perche' in quel momento nessuna
   pagina la usava — e mezz'ora dopo, aggiungendo il footer al backend, e'
   tornata a servire. Uso: site-footer site-footer--app site-footer--wide. */
.site-footer--app.site-footer--wide { --fo-row-w: 1200px; }

.site-footer--app {
  --fo-row-w: 900px;
  --fo-row-pad: 20px;
  /* Il sito legge queste due dai suoi --fs-tiny / --fs-body; le applicazioni
     non ce le hanno, e senza queste righe il footer scenderebbe ai valori di
     ultima istanza (14px e 16px) rendendo un filo piu' piccolo di quello del
     sito. Sono le stesse formule dei token del sito, non i valori che
     producono a una certa larghezza: cosi' i due footer scalano uguale. */
  --f-txt: 0.9rem;                             /* = --fs-tiny */
  --f-h3:  min(calc(16px + 0.96vw), 29.44px);  /* = --fs-body */
  border-top: 1px solid var(--border, var(--fo-ink-soft));
  margin-top: 64px;
}


/* Il footer di partenza scritto nell'HTML, che js/footer.js sostituisce appena
   parte. Chi ha JavaScript non lo vede mai; queste righe servono perche' nel
   mezzo secondo in cui puo' comparire - o per chi JavaScript non lo esegue -
   sia leggibile invece che accatastato. Vedi il commento nelle pagine. */
.footer-fallback { padding: 24px 24px 40px; font-size: 13px; line-height: 1.7; }
.footer-fallback p { margin: 0; }
.footer-fallback a { color: inherit; }