/* Palette EasyRecipes — ripresa dall'app: guida il ciano del pulsante +,
   il rosa resta accento (nell'app e' la cartella Dolci).
   Sovrascrive i token di base.css: i componenti restano gli stessi. */

[data-site="easyrecipes"] {
  --navy: #0D0D12; --navy-deep: #040405; --navy-ink: #08080B;
  --navy-elevated: #15151C; --navy-soft: #1E1E28;
  --gold: #22D3EE; --gold-soft: #7DE7F7; --cream: #F5EDDD;
  --accent-red: #FF5A5A; --accent-green: #3DE07A; --accent-cyan: #FF3D8F;
  --on-gold: #000000; --accent-text: #22D3EE; --muted-fg: #D5B36F;
  --paper: #F7F0E2; --paper-ink: #17171D;
  --bg-0: #0D0D12;
  --bg-1: #08080B;
  --bg-2: #040405;
  --panel-0: #15151C;
  --panel-1: #0B0B10;
  --tile-0-a: #0B6E86; --tile-0-b: #22D3EE;
  --tile-1-a: #12703F; --tile-1-b: #3DE07A;
  --tile-2-a: #8A6A00; --tile-2-b: #FFE03D;
  --tile-3-a: #8A1147; --tile-3-b: #FF3D8F;
  --tile-4-a: #123C86; --tile-4-b: #4D8DFF;
  --tile-5-a: #4A1470; --tile-5-b: #A855F7;
  --tile-6-a: #0B5F6E; --tile-6-b: #22C8D8;
  --is-dark: 1;
  color-scheme: dark;
}
/* ==========================================================================
   Il fulcro: fonti disordinate -> scheda ordinata
   ========================================================================== */
.convert {
  display: grid; gap: var(--sp-3);
  grid-template-columns: auto auto 1fr;
  align-items: center;
}
@media (max-width: 780px) {
  .convert { grid-template-columns: 1fr; justify-items: center; gap: var(--sp-4); }
  .convert__arrow { rotate: 90deg; }
}

.sources { list-style: none; display: grid; gap: 0.5rem; }
.sources li {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.85rem; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  background: color-mix(in oklab, var(--cream) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
  color: color-mix(in oklab, var(--cream) 80%, transparent);
  transition: border-color 300ms var(--ease-out), color 300ms, transform 300ms var(--ease-out);
}
.sources li svg { width: 16px; height: 16px; flex: none; }
.sources li.is-active {
  border-color: var(--src-color, var(--accent-cyan));
  color: var(--cream);
  transform: translateX(4px);
  box-shadow: 0 0 22px -6px var(--src-color, var(--accent-cyan));
}
[dir="rtl"] .sources li.is-active { transform: translateX(-4px); }

.convert__arrow { color: color-mix(in oklab, var(--cream) 35%, transparent); }
.convert__arrow svg { width: 40px; height: 24px; }
[dir="rtl"] .convert__arrow { rotate: 180deg; }
@media (max-width: 780px) { [dir="rtl"] .convert__arrow { rotate: 90deg; } }

/* la scheda: carta chiara, come le pagine dell'icona */
.recipe-card {
  position: relative; padding: var(--sp-4); border-radius: 20px;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.8);
  max-width: 320px;
}
.recipe-card__tabs { position: absolute; top: -10px; inset-inline-start: 22px; display: flex; gap: 5px; }
.recipe-card__tabs i { width: 34px; height: 12px; border-radius: 4px 4px 0 0; display: block; }
/* stesso ordine delle cartelle dell'app: Antipasti, Primi, Secondi, Dolci */
.recipe-card__tabs i:nth-child(1) { background: var(--gold); }
.recipe-card__tabs i:nth-child(2) { background: var(--accent-green); }
.recipe-card__tabs i:nth-child(3) { background: #FFE03D; }
.recipe-card__tabs i:nth-child(4) { background: var(--accent-cyan); }
.recipe-card h3 { font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.3rem; color: var(--paper-ink); }
.recipe-card__meta { font-size: var(--fs-sm); color: #6B6B78; margin-bottom: var(--sp-3); }
.recipe-card__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8A2A5C; margin-bottom: 0.45rem;
}
.recipe-card__lines { list-style: none; display: grid; gap: 0.4rem; margin-bottom: var(--sp-3); counter-reset: step; }
.recipe-card__lines li { display: flex; align-items: center; gap: 0.5rem; }
.recipe-card__lines li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent-cyan);
}
.recipe-card__lines li:nth-child(2)::before { background: var(--accent-green); }
.recipe-card__lines li:nth-child(3)::before { background: var(--gold); }
.recipe-card__lines li::after {
  content: ""; height: 7px; border-radius: 999px; flex: 1;
  background: color-mix(in oklab, var(--paper-ink) 14%, transparent);
}
.recipe-card__lines li:nth-child(2)::after { max-width: 78%; }
.recipe-card__lines li:nth-child(3)::after { max-width: 60%; }
.recipe-card__lines--num { counter-reset: step; }
.recipe-card__lines--num li::before {
  counter-increment: step; content: counter(step);
  width: 16px; height: 16px; border-radius: 5px; background: var(--paper-ink); color: var(--paper);
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
/* la scheda entra in scena quando la sequenza riparte */
.recipe-card.is-fresh { animation: pop 520ms var(--ease-out); }
@keyframes pop { from { transform: scale(0.97); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .recipe-card.is-fresh { animation: none; } }

/* ==========================================================================
   Promesse sulla privacy
   ========================================================================== */
.promises { list-style: none; display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.promises li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  font-weight: 500;
}
.promises li svg { width: 20px; height: 20px; flex: none; stroke: var(--accent-green); }

/* ==========================================================================
   Da destra a sinistra (arabo)
   ========================================================================== */
[dir="rtl"] .brand { margin-inline-end: auto; }
[dir="rtl"] .doc__back::before { content: "→"; }

/* ==========================================================================
   Pagine documento specifiche di EasyRecipes
   ========================================================================== */
.steps { list-style: none; counter-reset: s; display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.steps li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
}
.steps li::before {
  counter-increment: s; content: counter(s);
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700;
  background: var(--gold); color: var(--on-gold);
}

.imports { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.import {
  padding: var(--sp-3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
}
.import h3 {
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0;
  font-size: 1rem; color: var(--cream); margin: 0 0 0.3rem;
}
.import p { font-size: var(--fs-sm); color: var(--muted-fg); margin: 0; text-wrap: pretty; }

/* il testo legale importato porta con se' tabelle e riquadri */
.doc__body table {
  width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4);
  font-size: var(--fs-sm); display: block; overflow-x: auto;
}
.doc__body th, .doc__body td {
  padding: 0.7rem 0.8rem; text-align: start; vertical-align: top;
  border-bottom: 1px solid color-mix(in oklab, var(--cream) 14%, transparent);
}
.doc__body th { font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.doc__body ul { list-style: none; display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.doc__body ul li {
  padding: var(--sp-3); border-radius: var(--radius);
  background: color-mix(in oklab, var(--cream) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  text-wrap: pretty;
}
.doc__body ol { padding-inline-start: 1.4rem; display: grid; gap: 0.5rem; margin-bottom: var(--sp-4); }
/* i bottoni non sono link di testo: la regola sotto li escludeva
   sovrascrivendone il colore, rendendoli rosa su rosa. */
.doc__body a:not(.btn) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.doc__body strong { color: var(--cream); }

/* un solo telefono, centrato: qui la scena e' la galleria stessa */
.device--single { width: min(100%, 300px); rotate: none; translate: none; }
[data-site="easyrecipes"] .gallery { justify-content: center; }
@media (max-width: 560px) {
  [data-site="easyrecipes"] .gallery { overflow: visible; }
  .device--single { width: min(100%, 280px); }
}