/* ============================================================
   ACTION IN LINE — Brand CSS per WordPress / Elementor
   Porta i token e gli effetti del Design System dentro WordPress.
   Carica questo file dal child theme (vedi functions.php).

   COME SI USA IN ELEMENTOR
   - I token (:root) alimentano i colori/font globali del Kit Elementor.
   - Le classi utility (.ail-*) si applicano a un widget tramite il campo
     "Avanzate → CSS Classes". Es: a un widget Titolo dai la classe
     "ail-outline" sulla parola da rendere "svuotata".
   - Regola NON negoziabile: i titoli sono SEMPRE bianchi (su scuro) /
     neri (su chiaro). Mai arancio/blu sui titoli, nemmeno sullo svuotato.
       arancio #E45C3B = BAMBINI · blu/teal #3093AE = ADULTI · grigi = resto.
   ============================================================ */

/* ---------------- FONT (Anton + Poppins) ---------------- */
@font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Anton-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }

/* ---------------- TOKEN (primitives + scale) ---------------- */
:root {
  /* Brand */
  --primitive-white:#ffffff;
  --primitive-night:#1e1e25;
  --primitive-orange:#E45C3B;       /* BAMBINI */
  --primitive-orange-dark:#C44A2A;
  --primitive-orange-light:#F07D62;
  --primitive-blue:#3093AE;         /* ADULTI */
  --primitive-blue-dark:#1F7490;
  --primitive-blue-light:#5AAFC5;
  /* Status */
  --primitive-red:#E53935;
  --primitive-green:#43A047;
  /* Gray ramp */
  --primitive-gray-50:#f9f9f9;  --primitive-gray-100:#f0f0f0; --primitive-gray-200:#e0e0e0;
  --primitive-gray-300:#bdbdbd; --primitive-gray-400:#9e9e9e; --primitive-gray-500:#757575;
  --primitive-gray-600:#525252; --primitive-gray-700:#3d3d3d; --primitive-gray-800:#2a2a2a;
  --primitive-gray-900:#1e1e25;

  /* Tonal ramp ricavata dal night #1E1E24 (superfici sezioni) */
  --ail-950:#131317; --ail-900:#16161b; --ail-850:#19191f; --ail-800:#1b1b21;
  --ail-750:#1E1E24; --ail-700:#232329; --ail-650:#27272e; --ail-600:#2e2e37;
  --ail-550:#393942; --ail-500:#45454f;

  /* Tipografia */
  --font-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body:'Poppins', system-ui, -apple-system, sans-serif;
  --text-xs:11px; --text-sm:13px; --text-base:16px; --text-md:18px; --text-lg:20px;
  --text-xl:24px; --text-2xl:32px; --text-3xl:40px; --text-4xl:56px; --text-display:80px;
  --tracking-display:0.03em; --tracking-wide:0.05em; --tracking-wider:0.1em;

  /* Spaziatura / raggi (base 4px) */
  --spacing-xs:4px; --spacing-sm:8px; --spacing-md:16px; --spacing-lg:24px; --spacing-xl:32px;
  --spacing-2xl:48px; --spacing-3xl:64px; --spacing-4xl:96px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
  --layout-max-width:1280px; --layout-container:24px;

  /* Ombre / glow (tarati sul fondo scuro) */
  --shadow-sm:0 1px 3px rgba(0,0,0,.40);
  --shadow-md:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 8px 24px rgba(0,0,0,.50);
  --shadow-xl:0 16px 48px rgba(0,0,0,.55);
  --shadow-brand:0 4px 20px rgba(228,92,59,.45);  /* glow arancio (bambini) */
  --shadow-blue:0 4px 20px rgba(48,147,174,.40);  /* glow blu (adulti) */
  --ring-brand:0 0 0 3px rgba(228,92,59,.25);
  --ring-blue:0 0 0 3px rgba(48,147,174,.25);

  /* Gradiente accento arancio→blu (ponte bambini→adulti) */
  --gradient-accent:linear-gradient(90deg, var(--primitive-orange), var(--primitive-blue));

  /* Motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-snap:cubic-bezier(0.2,0.8,0.2,1);
  --duration-fast:.12s; --duration-normal:.2s; --duration-slow:.3s;

  /* Token semantici — TEMA SCURO (default del brand) */
  --color-bg-primary:var(--ail-750);
  --color-bg-secondary:var(--ail-650);
  --color-bg-surface:var(--ail-600);
  --color-text-primary:var(--primitive-white);
  --color-text-secondary:var(--primitive-gray-400);
  --color-border-default:var(--ail-600);
  --color-border-strong:var(--ail-550);

  /* Accent attivo (per accent-bar / glow neutri). Override per pagina:
     body.ail-kids{--accent:arancio} · body.ail-adults{--accent:blu} */
  --accent:var(--primitive-orange);
  --accent-2:var(--primitive-blue);
}

/* Override accento per contesto pagina/sezione */
.ail-kids   { --accent:var(--primitive-orange); --accent-2:var(--primitive-orange); }
.ail-adults { --accent:var(--primitive-blue);   --accent-2:var(--primitive-blue); }
.ail-mix    { --accent:var(--primitive-orange); --accent-2:var(--primitive-blue); }

/* ---------------- BASE ---------------- */
body {
  background:var(--color-bg-primary);
  color:var(--color-text-primary);
  font-family:var(--font-body);
}
/* Ritmo tonale delle sezioni (assegna come classe alla Sezione Elementor) */
.section--base  { background:var(--ail-750); }
.section--raise { background:var(--ail-700); }
.section--sink  { background:var(--ail-900); }

/* ---------------- TIPOGRAFIA ---------------- */
.ail-display, .ail-h1, .ail-h2, .ail-h3 {
  font-family:var(--font-display); font-weight:400; line-height:1.08;
  letter-spacing:var(--tracking-display); color:var(--color-text-primary);
  text-transform:uppercase; margin:0;
}
.ail-display { font-size:clamp(54px,9vw,108px); line-height:1.1; }
.ail-h1 { font-size:var(--text-4xl); line-height:1.1; }
.ail-h2 { font-size:var(--text-3xl); }
.ail-h3 { font-size:var(--text-2xl); }

/* Effetto "svuotato" — bordo bianco, riempimento trasparente.
   Applica a un solo SPAN/parola dentro un titolo. Mai colore brand. */
.ail-outline {
  color:transparent;
  -webkit-text-stroke:1px var(--color-text-primary);
  text-stroke:1px var(--color-text-primary);
  paint-order:stroke fill;
}

/* Eyebrow / tag di sezione (label maiuscola spaziata) */
.ail-tag {
  display:inline-block; font-family:var(--font-body);
  font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--spacing-sm);
}
.ail-tag--blue    { color:var(--primitive-blue); }
.ail-tag--neutral { color:var(--color-text-secondary); }

/* Eyebrow "a pillola" usato sugli hero (vetro sfumato + bordo accento) */
.ail-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  background:color-mix(in srgb, var(--accent) 18%, rgba(19,19,23,.55));
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius:var(--radius-full); padding:6px 16px; backdrop-filter:blur(6px);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff;
}

/* ---------------- ACCENT BAR (ponte arancio→blu) ---------------- */
.ail-accent-bar {
  width:64px; height:4px; border-radius:var(--radius-full);
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
/* Variante sempre arancio→blu, indipendente dall'accento di pagina */
.ail-accent-bar--mix { background:var(--gradient-accent); }

/* ---------------- BOTTONI ---------------- */
/* Applica queste classi al bottone Elementor (oltre allo stile widget),
   oppure replica i colori nel Kit. */
.ail-btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:600; line-height:1; cursor:pointer;
  border:none; border-radius:var(--radius-sm); padding:14px 24px; font-size:15px;
  text-decoration:none; transition:transform var(--duration-fast) var(--ease-snap),
    background-color var(--duration-normal), box-shadow var(--duration-normal);
}
.ail-btn:active { transform:scale(.97); }
.ail-btn--primary   { background:var(--primitive-orange); color:#fff; }     /* BAMBINI / CTA generale */
.ail-btn--primary:hover   { background:var(--primitive-orange-dark); box-shadow:var(--shadow-brand); }
.ail-btn--secondary { background:var(--primitive-blue); color:#fff; }       /* ADULTI */
.ail-btn--secondary:hover { background:var(--primitive-blue-dark); box-shadow:var(--shadow-blue); }
.ail-btn--ghost { background:transparent; color:var(--color-text-primary);
  box-shadow:inset 0 0 0 2px var(--color-border-strong); }
.ail-btn--ghost:hover { background:color-mix(in srgb, var(--color-text-primary) 8%, transparent); }

/* Gradiente arancio→blu: per TUTTO ciò che non è solo-bambini o solo-adulti
   (hockey, eventi aperti a tutti, CTA generiche). */
.ail-btn--gradient, .btn-gradient {
  background-image:linear-gradient(45deg, var(--primitive-orange), var(--primitive-blue));
  color:#fff !important; border-color:transparent;
}
.ail-btn--gradient:hover, .btn-gradient:hover {
  background-image:linear-gradient(45deg, var(--primitive-orange-dark), var(--primitive-blue-dark));
  box-shadow:var(--shadow-lg);
}

/* ---------------- BADGE / PILL ---------------- */
.ail-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:5px 12px; border-radius:var(--radius-full); line-height:1;
}
.ail-badge--primary   { background:var(--primitive-orange); color:#fff; }
.ail-badge--secondary { background:var(--primitive-blue); color:#fff; }
.ail-badge--neutral   { background:var(--ail-600); color:var(--color-text-primary); }
.ail-badge--gradient  { background-image:linear-gradient(45deg, var(--primitive-orange), var(--primitive-blue)); color:#fff; }

/* Pallini audience (legenda, liste) */
.ail-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.ail-dot--kids   { background:var(--primitive-orange); }
.ail-dot--adults { background:var(--primitive-blue); }
.ail-dot--mix    { background:var(--gradient-accent); }

/* ---------------- CARD CORSO (3 audience) ---------------- */
.ail-card {
  position:relative; overflow:hidden; border-radius:var(--radius-xl);
  border:1px solid var(--color-border-default); background:var(--color-bg-secondary);
  padding:var(--spacing-2xl) var(--spacing-xl) var(--spacing-xl);
  transition:transform var(--duration-normal) var(--ease-snap), border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.ail-card:hover { transform:translateY(-4px); }
.ail-card--kids   { background:linear-gradient(165deg, color-mix(in srgb, var(--primitive-orange) 18%, transparent), transparent 58%), var(--color-bg-secondary); }
.ail-card--kids:hover   { border-color:var(--primitive-orange); box-shadow:var(--shadow-brand); }
.ail-card--adults { background:linear-gradient(165deg, color-mix(in srgb, var(--primitive-blue) 18%, transparent), transparent 58%), var(--color-bg-secondary); }
.ail-card--adults:hover { border-color:var(--primitive-blue); box-shadow:var(--shadow-blue); }
.ail-card--hockey { background:linear-gradient(165deg, color-mix(in srgb, var(--primitive-gray-400) 14%, transparent), transparent 58%), var(--color-bg-secondary); }
.ail-card--hockey:hover { border-color:var(--color-border-strong); box-shadow:var(--shadow-lg); }

/* ---------------- HERO SCRIM (overlay foto copertina) ---------------- */
/* Metti questa classe su un layer/overlay sopra l'immagine di sfondo dell'hero,
   così il testo bianco resta leggibile. */
.ail-hero-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 100% 0%, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 55%),
    radial-gradient(95% 70% at 0% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    linear-gradient(90deg, rgba(19,19,23,.92) 0%, rgba(19,19,23,.42) 42%, rgba(19,19,23,0) 72%),
    linear-gradient(0deg, var(--ail-750) 1%, rgba(30,30,36,.70) 24%, rgba(19,19,23,0) 54%, rgba(19,19,23,.28) 100%);
}

/* ---------------- CALENDARIO — accenti evento ---------------- */
.ev-bambini { --ev:var(--primitive-orange); }
.ev-adulti  { --ev:var(--primitive-blue); }
.ev-mix     { --ev:transparent; }
.ev-dot--mix { background:var(--gradient-accent) !important; }

/* ---------------- RESPONSIVE HOOK ---------------- */
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }