/* ============================================================
   WF DESIGN KIT — TOKENS (brand REALE: Zoo al Maglio)
   ------------------------------------------------------------
   Un solo brand → le variabili vivono su :root (niente data-theme).
   Valori ufficiali dal brief (HANDOFF Zoo al Maglio).
   ⚠️ Tenere ALLINEATO con theme.json (theme.json serve l'editor
   Gutenberg, questo file serve i nostri snippet/markup).
   ============================================================ */
:root{
  /* --- Brand ufficiale Zoo al Maglio --- */
  /* ⭐ I colori li comanda la tavolozza di WordPress (Aspetto > Editor >
     Stili > Colori > Tavolozza): il cliente cambia 'Giallo Zoo' li' e cambia
     TUTTO il sito. Il valore dopo la virgola e' la riserva di fabbrica. */
  --color-primary:var(--wp--preset--color--primary, #fcba03);
  --color-primary-rgb:252,186,3;
  --color-primary-dark:var(--wp--preset--color--primary-dark, #e0a400);
  --color-secondary:var(--wp--preset--color--secondary, #4b6b26);
  --color-secondary-dark:var(--wp--preset--color--secondary-dark, #3a5320);
  --color-accent:var(--wp--preset--color--primary, #fcba03);
  --color-accent-rgb:252,186,3;
  --color-bg:var(--wp--preset--color--base, #ffffff);
  --color-bg-light:var(--wp--preset--color--base-2, #fdf8ec);
  --color-text:var(--wp--preset--color--contrast, #1a1a1a);
  --color-text-light:var(--wp--preset--color--contrast-2, #5c5c5c);
  --color-border:var(--wp--preset--color--border, #ece3cf);
  --color-on-primary:#1a1a1a;     /* testo su giallo = nero */

  /* --- Superfici / raggi --- */
  --radius-container:22px;
  --radius-button:50px;

  /* --- Bridge (compat snippet WebFactory: alcuni widget usano --theme-*) --- */
  --theme-bg:var(--color-bg);
  --theme-bg-light:var(--color-bg-light);
  --theme-text:var(--color-text);
  --theme-text-light:var(--color-text-light);
  --theme-primary:var(--color-primary);
  --theme-border:var(--color-border);

  /* --- Motion tokens --- */
  --fx-fast:.25s; --fx-base:.35s; --fx-slow:.8s;
  --fx-out:cubic-bezier(.16,1,.3,1);
  --brand-gradient:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-primary) 100%);

  /* --- Alias usati 1:1 dal markup/CSS della home (prototipo) --- */
  --giallo:var(--color-primary); --giallo-scuro:var(--color-primary-dark);
  --verde:var(--color-secondary); --verde-scuro:var(--color-secondary-dark);
  --nero:var(--color-text); --grigio:var(--color-text-light);
  --crema:var(--color-bg-light); --crema-2:#faf1da;
  --bianco:var(--color-bg); --bordo:var(--color-border);
  --radius:22px;
  --shadow:0 10px 30px rgba(26,26,26,.08);
  --shadow-hover:0 18px 44px rgba(252,186,3,.22);
  --maxw:1180px;

  /* --- Font reali (registrati anche in theme.json → fontFace) --- */
  --font-heading:var(--wp--preset--font-family--heading, 'Gagalin','Arial Black',sans-serif);
  --font-body:var(--wp--preset--font-family--body, 'Glacial',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  /* Serif corsivo per accenti editoriali (sottotitoli, nomi scientifici) */
  --font-accent:'Lora',Georgia,'Times New Roman',serif;
}

/* ============================================================
   Barra biglietti fissa in basso — SOLO mobile (≤820px).
   Pattern "app": l'azione principale resta sotto il pollice
   mentre si scorre (stampata da wp_footer in functions.php).
   ============================================================ */
.wf-ticketbar{ display:none; }
@media (max-width:820px){
  .wf-ticketbar{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:900;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid rgba(0,0,0,.08); }
  .wf-ticketbar a{ display:flex; align-items:center; justify-content:center;
    background:var(--giallo); color:var(--nero); font-family:var(--font-body); font-weight:700;
    font-size:16px; padding:13px 20px; border-radius:50px; text-decoration:none;
    box-shadow:0 4px 14px rgba(252,186,3,.35); }
  /* il contenuto non deve finire sotto la barra */
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
}