/* ==========================================================================
   Character — Elementi hand-drawn, rotazioni, personalita Merendero
   ========================================================================== */

/* ── Quote stilizzata ── */

.quote-highlight {
  position: relative;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-terracotta);
  font-weight: var(--weight-medium);
  padding-left: var(--space-6);
  border-left: 4px solid var(--color-terracotta);
}

/* ── Testo con rotazione leggera (hand-written feel) ── */

.tilted {
  display: inline-block;
  transform: rotate(-2deg);
}

.tilted-right {
  display: inline-block;
  transform: rotate(1.5deg);
}

/* ── Sottolineatura a mano ── */

.underline-hand {
  position: relative;
  display: inline;
}

.underline-hand::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -2%;
  width: 104%;
  height: 8px;
  background: var(--color-terracotta);
  opacity: 0.25;
  border-radius: 4px;
  transform: rotate(-0.5deg);
}

/* ── Badge ruotato ── */

.badge-tilted {
  transform: rotate(-3deg);
  box-shadow: var(--shadow-sm);
}

/* ── Decorazioni SVG inline ── */

.deco-star {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E3931' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.09 6.26L20 9.27l-4.91 3.82L16.18 20 12 16.77 7.82 20l1.09-6.91L4 9.27l5.91-1.01z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.deco-arrow-down {
  display: inline-block;
  width: 40px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' fill='none' stroke='%239E3931' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 5 C18 20, 22 35, 20 50' /%3E%3Cpath d='M14 44 L20 52 L26 44' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.deco-squiggle {
  display: block;
  width: 120px;
  height: 20px;
  margin: var(--space-4) 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' fill='none' stroke='%239E3931' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 10 C15 2, 25 18, 35 10 C45 2, 55 18, 65 10 C75 2, 85 18, 95 10 C105 2, 115 18, 115 10' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
}

/* ── Freccia curva decorativa "guarda qui" ── */

.deco-look {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%239E3931' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 50 C15 20, 40 10, 55 15' /%3E%3Cpath d='M48 8 L55 15 L46 18' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
}

/* ── Separator hand-drawn ── */

.separator-hand {
  width: 100%;
  max-width: 200px;
  height: 12px;
  margin: var(--space-6) auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' fill='none' stroke='%239E3931' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 6 C30 2, 50 10, 80 6 C110 2, 140 10, 195 6' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.5;
}

/* ── Hero con piu carattere ── */

.hero__motto {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.6;
  margin-top: var(--space-4);
}

/* ── Card menu con piu espressivita ── */

.menu-card__quote {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-terracotta);
  margin-top: var(--space-2);
}

/* ── Review card con piu calore ── */

.review-card__highlight {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-style: italic;
  line-height: var(--leading-snug);
}

/* (footer texture rimossa — troppo rumore) */