/* =========================================================
   La Bottega Gullino — stili condivisi
   Font brand (Cinzel + Inter), focus states, marquee, scroll-spy
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* Testo con contorno (usato per "momento" e per il "404") */
.text-stroke {
  -webkit-text-stroke: 3px #2A1810;
  color: #F5ECD7;
}

/* Mood piu' sobrio: bordi sottili al posto dei 4px, niente rotazioni */
.border-4  { border-width: 2px !important; }
.border-b-4{ border-bottom-width: 2px !important; }
.border-t-4{ border-top-width: 2px !important; }
.border-y-4{ border-top-width: 2px !important; border-bottom-width: 2px !important; }
.rotate-1,.rotate-2,.rotate-6,.rotate-12,
.-rotate-1,.-rotate-2,.-rotate-3 { --tw-rotate: 0deg !important; }

/* Top bar color cacao (= marrone del logo, cosi' il logo si integra senza box) */
header.sticky {
  background: #442A18;
  border-bottom-color: #442A18;
  transition: background .2s ease;
}
header nav[aria-label="Navigazione principale"] a { color: #F5ECD7; }

/* Compatta la top bar quando si scorre giu' */
header.sticky > div:first-child { transition: padding .2s ease; }
header.sticky img { transition: height .2s ease; }
header.is-compact > div:first-child { padding-top: .45rem; padding-bottom: .45rem; }
header.is-compact img { height: 2.6rem !important; }

/* Focus visibile (WCAG 2.4.7) su qualsiasi sfondo */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

footer a:focus-visible {
  outline-color: #FFD53E;
}

/* Sezione corrente nel menu (scroll-spy) */
.nav-active {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
}

/* Marquee sotto l'header (solo home) */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-track {
  animation: marquee 26s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}