/* Nami Pietrasanta — stili comuni
   Il grosso degli stili resta inline nelle pagine (fedeltà al design handoff).
   Qui solo: reset, focus, placeholder, select option, date picker, hero-photo,
   checkbox privacy, stati errore/esito e le regole :hover che nel prototipo
   erano attributi proprietari `style-hover="..."`. */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #E9E2D0;
}

input::placeholder,
textarea::placeholder {
  color: rgba(233, 226, 208, .4);
}

input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus {
  outline: 1.5px solid rgba(233, 226, 208, .7);
  outline-offset: 0;
}

/* Sulla pagina Privacy (sfondo avorio, niente form) l'outline scuro è più leggibile */
body.pagina-chiara input:focus,
body.pagina-chiara textarea:focus,
body.pagina-chiara select:focus,
body.pagina-chiara button:focus,
body.pagina-chiara a:focus {
  outline-color: rgba(49, 45, 44, .5);
}

select option {
  background: #44413C;
  color: #E9E2D0;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.9);
}

/* Placeholder per la foto hero (image-slot del prototipo) */
.hero-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(300px, 45vw, 540px);
  background: #44413C;
  color: rgba(233, 226, 208, .6);
  font-family: Lato, sans-serif;
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* Checkbox privacy: vero <input type="checkbox"> reso accessibile,
   stilizzato come il quadratino 18x18 del prototipo */
.chk-privacy {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  border: 1px solid rgba(233, 226, 208, .5);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #E9E2D0;
  padding: 0;
}
.chk-privacy:checked {
  background: rgba(233, 226, 208, .2);
}
.chk-privacy:checked::before {
  content: '\2713';
  line-height: 1;
}

/* Honeypot: campo nascosto, mai visibile a un utente reale */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.err {
  font-size: 11.5px;
  color: #E8B4A0;
  min-height: 1px;
}

.hidden {
  display: none !important;
}

/* --- Hover, ex `style-hover="..."` del prototipo --- */

.btn-dark:hover {
  background: #44413C;
}

.btn-light:hover {
  background: #fff;
}

.btn-outline-dark:hover {
  border-color: #E9E2D0;
  color: #E9E2D0;
}

.btn-outline-invert:hover {
  background: #E9E2D0;
  color: #312D2C;
}

.wa-border:hover {
  border-color: #E9E2D0;
}

.ayce-card:hover {
  background: rgba(49, 45, 44, .05);
}

.menu-pill:hover {
  background: #312D2C;
  color: #E9E2D0;
}

/* Header su schermi stretti: quando logo e nav vanno a capo,
   centra entrambi (allineati tra loro invece che sfalsati a sinistra) */
@media (max-width: 700px) {
  .site-header nav { flex-wrap: wrap; }
}

/* Logo header: logotipo compatto a sinistra; allo scroll subentra lo stemma */
.site-header.scrolled .logo-full { display: none !important; }
.site-header.scrolled .logo-mark { display: block !important; animation: logofade .25s ease; }
@keyframes logofade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Mobile: logo e nav sulla STESSA riga, attaccati a sinistra */
/* Ancore (#contatti, #prenota, ...): compensa l'header sticky che altrimenti
   copre l'inizio della sezione quando si arriva da un link del menu */
#contatti, #prenota, #scrivici, #menu {
  scroll-margin-top: 84px;
}
@media (max-width: 700px) {
  #contatti, #prenota, #scrivici, #menu { scroll-margin-top: 68px; }
}

/* Scrivici su desktop: form a sinistra, testo a destra (specchiato rispetto a Prenota
   che ha il form a destra, per non avere due moduli impilati nella stessa posizione) */
@media (min-width: 701px) {
  #scrivici .scrivici-testo { order: 2; }
}

/* Logo a sinistra, menu centrato nello spazio rimanente; font fluidi col viewport
   (su iPhone 430px i link arrivano a 14px, su Android 360px ~12.6px) */
@media (max-width: 700px) {
  .site-header { gap: 8px !important; padding: 12px 16px !important; }
  /* Slot logo a larghezza fissa: allo scroll il logotipo diventa lo stemma (più stretto)
     ma il menu non si deve spostare */
  .site-header > a:first-child { flex: 0 0 60px !important; width: 60px !important; }
  .site-header .logo-full { height: 19px !important; }
  .site-header .logo-mark { height: 25px !important; }
  .site-header nav { flex: 1 1 auto !important; min-width: 0 !important; gap: clamp(6px, 2.2vw, 12px) !important; font-size: clamp(12px, 3.5vw, 14px) !important; letter-spacing: .07em !important; }
  .site-header nav .btn-dark { font-size: clamp(11.5px, 3.2vw, 13px) !important; padding: 8px clamp(8px, 2.8vw, 14px) !important; letter-spacing: .08em !important; }
  /* Menu centrato nello spazio tra logo e IT·EN; lo switch lingua sta sul bordo destro */
  .site-header nav > a:first-child { margin-left: auto !important; }
  .site-header nav > span { margin-left: auto !important; font-size: clamp(10.5px, 2.9vw, 11.5px) !important; gap: 3px !important; }
}
/* Schermi molto stretti (es. iPhone SE 320px): comprimi un filo per non sbordare */
@media (max-width: 340px) {
  .site-header { gap: 7px !important; padding: 12px !important; }
  .site-header > a:first-child { flex: 0 0 54px !important; width: 54px !important; }
  .site-header .logo-full { height: 17px !important; }
  .site-header nav { gap: 5px !important; letter-spacing: .04em !important; }
  .site-header nav .btn-dark { padding: 7px 8px !important; letter-spacing: .05em !important; }
}