/* Footer del sito — concept "crema e blu" del 20.09.2026.
 * Copia di "DESIGN BY CODEX/assets/site-footer.css", con due sole differenze,
 * entrambe chieste dalla nota di consegna (footer/v1/NOTE-PER-CLAUDE.md):
 *  - tolte le regole della finestra cookie dimostrativa: in produzione il
 *    pulsante e' quello vero di Complianz;
 *  - i tipi di carattere restano quelli gia' caricati dal tema.
 * Il logo usa mix-blend-mode perche' il file disponibile e' un JPG con fondo
 * bianco (300x56). Quando arrivera' un originale trasparente: sostituire il
 * file e togliere quella riga. */

/* Shared footer v1. Palette and typefaces belong to the approved design system. */
footer.billo-footer {
  --bf-blue: #003e78;
  --bf-cream: #fbf8f3;
  --bf-text: #d9e2ea;
  --bf-rule: rgba(251,248,243,.16);
  background: var(--bf-blue);
  color: var(--bf-cream);
  border: 0;
  padding: 0;
  font-family: 'Source Sans 3', sans-serif;
}
.billo-footer * { box-sizing: border-box; }
.billo-footer [hidden] { display: none !important; }
/* Stessa griglia del resto del sito: il prototipo del footer usa 112px di
   margine sopra i 700px e 48px sotto, ma il tema usa 112 / 64 / 40 / 32 ai
   suoi breakpoint (css/base.css, ".container"). Tenendo i valori del
   prototipo il footer risultava 24..366 su telefono mentre header e
   contenuto stanno a 20..370: quattro pixel di scarto per lato, visibili.
   Stesso token di larghezza massima, cosi' i due non possono divergere. */
.billo-footer .bf-container { width: calc(100% - 112px); max-width: var(--container); margin: 0 auto; }
@media(max-width:1150px) { .billo-footer .bf-container { width: calc(100% - 64px); } }
@media(max-width:600px)  { .billo-footer .bf-container { width: calc(100% - 40px); } }
@media(max-width:360px)  { .billo-footer .bf-container { width: calc(100% - 32px); } }
.billo-footer a { color: inherit; text-decoration: none; }
.billo-footer p, .billo-footer h2, .billo-footer h3, .billo-footer ul { margin: 0; }
.billo-footer button { color: inherit; font: inherit; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; text-transform: none; }
.billo-footer a:focus-visible, .billo-footer button:focus-visible { outline: 2px solid var(--bf-cream); outline-offset: 5px; border-radius: 2px; }
.billo-footer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* The approved image concept is rebuilt as responsive HTML, not a background image. */
.billo-footer .bf-brand-band { position: relative; background: var(--bf-cream); color: var(--bf-blue); padding: 32px 0 44px; }
.billo-footer .bf-brand-inner { display: flex; align-items: center; justify-content: center; gap: 96px; }
.billo-footer .bf-brand-lockup { display: flex; flex-direction: column; align-items: center; }
.billo-footer .bf-logo { display: block; width: 330px; height: 74px; }
.billo-footer .bf-logo-original { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.billo-footer .bf-logo:focus-visible { outline-color: var(--bf-blue); }
.billo-footer .bf-flourish { display: flex; align-items: center; gap: 16px; margin-top: 10px; color: #c98800; }
.billo-footer .bf-flourish span { width: 54px; height: 1px; background: currentColor; }
.billo-footer .bf-flourish svg { width: 16px; height: 22px; stroke: none; }
.billo-footer .bf-flourish ellipse { fill: currentColor; }
.billo-footer .bf-flourish path { stroke: var(--bf-cream); stroke-width: 2; }
.billo-footer .bf-brand-statement { font: 400 26px/1.35 'Fraunces',Georgia,serif; letter-spacing: -.025em; }
.billo-footer .bf-curve { position: absolute; bottom: -1px; left: 0; width: 100%; height: 32px; fill: var(--bf-blue); stroke: none; }
.billo-footer .bf-main { display: grid; grid-template-columns: 1.2fr 1fr .85fr 1.2fr; gap: 44px; padding: 32px 0 28px; }
.billo-footer .bf-contact { min-width: 0; }
.billo-footer .bf-contact-heading { display: flex; align-items: center; min-height: 48px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .13em; color: var(--bf-text); font-size: 12px; font-weight: 400; }
.billo-footer .bf-contact-link, .billo-footer .bf-phone { display: flex; align-items: center; gap: 12px; min-height: 44px; width: fit-content; max-width: 100%; font-size: 16px; font-weight: 400; color: var(--bf-text); overflow-wrap: anywhere; }
.billo-footer .bf-contact-link svg, .billo-footer .bf-phone svg { width: 20px; height: 20px; }
.billo-footer .bf-group h3 { color: var(--bf-cream); font-family: 'Fraunces', Georgia, serif; line-height: 1.25; font-weight: 400; font-size: 25px; letter-spacing: -.025em; }
.billo-footer .bf-group-label { display: flex; align-items: center; min-height: 48px; margin-bottom: 8px; }
.billo-footer .bf-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 400; min-height: 44px; text-align: left; width: 100%; opacity: 1; margin-bottom: 9px; }
.billo-footer .bf-toggle:disabled { cursor: default; color: var(--bf-cream); opacity: 1; -webkit-text-fill-color: var(--bf-cream); }
.billo-footer .bf-toggle svg { display: none; }
.billo-footer .bf-links { list-style: none; padding: 0; }
.billo-footer .bf-links li { margin: 0; padding: 0; }
.billo-footer .bf-links a { display: flex; align-items: center; width: fit-content; min-height: 36px; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--bf-text); padding: 6px 0; }
.billo-footer .bf-reassurance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-block: 1px solid var(--bf-rule); padding: 12px 0; }
.billo-footer .bf-delivery { display: flex; align-items: center; gap: 10px; }
.billo-footer .bf-delivery > svg { width: 24px; height: 22px; }
.billo-footer .bf-delivery p { color: var(--bf-text); font-size: 14px; line-height: 1.5; }
.billo-footer .bf-payment { display: flex; align-items: center; gap: 20px; }
.billo-footer .bf-payment > div { display: flex; align-items: center; gap: 16px; }
.billo-footer .bf-payment-name { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0; border: 0; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: .025em; line-height: 1.3; }
.billo-footer .bf-invoice { letter-spacing: 0; font-weight: 400; border-left: 1px solid var(--bf-rule); padding-left: 16px; }
.billo-footer .bf-invoice svg { width: 16px; height: 16px; }
.billo-footer .bf-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; justify-content: space-between; padding: 10px 0 14px; color: var(--bf-text); }
.billo-footer .bf-bottom small { font-size: 13px; }
.billo-footer .bf-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.billo-footer .bf-bottom nav a, .billo-footer .bf-cookie, .billo-footer .bf-top { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; line-height: 1.4; }
.billo-footer .bf-bottom nav a { min-width: 44px; }
.billo-footer .bf-top { gap: 10px; }
.billo-footer .bf-top svg { width: 18px; height: 18px; }
@media(hover:hover) {
  .billo-footer .bf-links a, .billo-footer .bf-contact-link, .billo-footer .bf-phone, .billo-footer .bf-bottom a, .billo-footer .bf-bottom button { transition: color 160ms ease-out; }
  .billo-footer .bf-links a:hover, .billo-footer .bf-contact-link:hover, .billo-footer .bf-phone:hover, .billo-footer .bf-bottom a:hover, .billo-footer .bf-bottom button:hover { color: var(--bf-cream); text-decoration: underline; text-underline-offset: 5px; }
}
@media(min-width:701px) and (max-width:1100px) {
  .billo-footer .bf-main { grid-template-columns: 1fr 1fr; gap: 28px 48px; }
  .billo-footer .bf-brand-inner { gap: 44px; }
  .billo-footer .bf-logo { width: 290px; height: 66px; }
  .billo-footer .bf-brand-statement { font-size: 22px; }
}
@media(max-width:700px) {
  .billo-footer .bf-brand-band { padding: 28px 0 44px; }
  .billo-footer .bf-brand-inner { flex-direction: column; gap: 16px; }
  .billo-footer .bf-logo { width: min(280px,100%); height: 64px; }
  .billo-footer .bf-brand-lockup { width: 100%; }
  .billo-footer .bf-flourish { margin-top: 8px; gap: 12px; }
  .billo-footer .bf-flourish span { width: 42px; }
  .billo-footer .bf-brand-statement { text-align: center; font-size: 22px; line-height: 1.3; }
  .billo-footer .bf-curve { height: 20px; }
  .billo-footer .bf-main { display: block; padding: 16px 0 20px; }
  .billo-footer .bf-group { border-bottom: 1px solid var(--bf-rule); }
  .billo-footer .bf-group h3 { font-size: 23px; }
  .billo-footer .bf-toggle { min-height: 60px; margin: 0; }
  .billo-footer .bf-toggle:not(:disabled) svg { display: block; }
  .billo-footer .bf-links { padding-bottom: 14px; }
  .billo-footer .bf-links a { min-height: 44px; }
  .billo-footer .bf-contact { padding-top: 16px; }
  .billo-footer .bf-contact-heading { min-height: 28px; margin-bottom: 6px; font-size: 12px; }
  .billo-footer .bf-reassurance { padding: 16px 0; gap: 8px; }
  .billo-footer .bf-delivery { align-items: flex-start; gap: 12px; }
  .billo-footer .bf-delivery p { font-size: 13px; }
  .billo-footer .bf-delivery > svg { width: 24px; height: 22px; }
  .billo-footer .bf-payment { width: 100%; padding-left: 36px; }
  /* Il pulsante WhatsApp e' fisso in basso a destra DELLO SCHERMO e copriva
     "Nach oben": misurato a 390px, occupa 324..380 in orizzontale mentre il
     footer arriva a 366. Alzare la riga non basta — il pulsante non si sposta
     con la pagina — quindi la riga rientra a destra e "Nach oben" esce dalla
     sua colonna. Scostamento dal prototipo dichiarato: li' quel pulsante non
     c'e'. */
  .billo-footer .bf-bottom { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 64px 24px 0; }
  .billo-footer .bf-bottom nav { grid-column: 1/-1; grid-row: 1; justify-content: flex-start; column-gap: 18px; row-gap: 0; }
  .billo-footer .bf-bottom small { grid-column: 1; font-size: 12px; }
  .billo-footer .bf-top { grid-column: 2; font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .billo-footer a, .billo-footer button { transition: none !important; }
}
@media print { footer.billo-footer { display: none !important; } }