/* Famous Fried Chicken — basi di marca condivise da sito vetrina e menu. */

/* Font ufficiali della brand identity: Obviously Narrow Bold per i titoli, Retrofunk Script per le scritte corsive.
   Anton resta solo come riserva se il file non si carica. */
@font-face { font-family: "Obviously Narrow"; src: url("../fonts/obviously-narrow-bold.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Obviously Narrow"; src: url("../fonts/obviously-narrow-black.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Retrofunk"; src: url("../fonts/retrofunk.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); size-adjust: 87.3%; font-display: swap; }

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Yellowtail";
  src: url("../fonts/yellowtail.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Palette ufficiale */
  --cream: #fffbf3;
  --navy: #292458;
  --yellow: #f9b03e;
  --deep-red: #6d110b;
  --red: #aa191e;

  /* Derivati */
  --navy-ink: #1d1d45;
  --navy-soft: #4a4a7d;
  --cream-2: #f6eedf;
  --line: rgba(43, 43, 96, 0.14);
  --photo-bg: #ececec;

  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Retrofunk", "Yellowtail", "Brush Script MT", cursive;
  --font-display: "Obviously Narrow", "Anton", "Archivo", Impact, sans-serif;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-sticker: 4px 4px 0 var(--navy);
  --shadow-sticker-lg: 6px 6px 0 var(--navy);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--yellow); color: var(--navy); padding: 10px 16px;
  border-radius: var(--radius-s); font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

/* Titoli: grottesco condensato pesante come nella palette ufficiale */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  margin: 0;
}
/* Corsivo "FRIED CHICKEN" del logo */
.kicker {
  font-stretch: 100%;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--red);
  margin: 0 0 10px;
}
.script.script--brand { font-family: "Retrofunk", var(--font-script); }
.script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Bottoni "adesivo" con ombra piena blu, come il lettering del logo */
.btn {
  --btn-bg: var(--red);
  --btn-fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border: 2.5px solid var(--navy); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: var(--shadow-sticker);
  font-weight: 900; font-stretch: 100%; font-style: italic;
  text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
  .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy); }
}
.btn--yellow { --btn-bg: var(--yellow); --btn-fg: var(--navy); }
.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--navy); }
.btn--navy { --btn-bg: var(--navy); --btn-fg: var(--cream); border-color: var(--cream); box-shadow: 4px 4px 0 var(--cream); }
/* Colore di Deliveroo, per riconoscerlo al volo */
.btn--deliveroo { --btn-bg: #00ccbc; --btn-fg: #fff; }
.btn--small { min-height: 40px; padding: 8px 16px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Carta da vassoio con i loghi ripetuti */
.tray-pattern {
  background-color: var(--cream);
  background-image: url("../img/brand/tray-pattern.webp");
  background-size: 360px auto;
}

.star-divider { display: inline-block; color: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}