/* ============================================================
   ARVIO · components.css
   Component library, sezione 7 del brief.
   Navigation (hybrid), footer, bottoni, card, form, mark corner,
   scroll indicator. Nessun gradiente, nessuna ombra decorativa.
   ============================================================ */

/* ============================================================
   7.1 · NAVIGATION PRIMARY (hybrid)
   Top: trasparente, integrata nella hero navy.
   Scroll: navy traslucida con backdrop blur (classe .is-scrolled via JS).
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  background: transparent;
  transition: background var(--t-medium), backdrop-filter var(--t-medium);
}

/* Velo nero a gradiente su pseudo-elemento piu alto della navbar: sfuma dentro
   la hero senza creare un bordo netto. Niente border-bottom (niente lineetta). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.3) 48%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--t-medium);
}

.site-header.is-scrolled {
  background: var(--navy-translucent);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
}

.site-header.is-scrolled::before { opacity: 0; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: var(--header-h);
  /* navbar a larghezza piena, margini laterali contenuti e simmetrici */
  max-width: none;
  padding-inline: clamp(var(--space-s), 4vw, var(--space-m));
}

/* Gruppo nav spinto a destra, accanto al bottone contatto */
.nav-primary {
  margin-left: auto;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
}

.site-header__logo img {
  height: 3.668rem;
  width: auto;
}

/* Desktop nav */
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--parchment);
  transition: color var(--t-medium);
}

/* Bottone contatto in navbar (copper, compatto) */
.nav-cta {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--copper);
  border-radius: var(--radius-cta);
  padding: 0.5rem 1.3rem;
  white-space: nowrap;
  transition: background var(--t-medium);
}

.nav-cta:hover {
  background: var(--copper-light);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--copper);
  transition: width var(--t-medium);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--white);
}

.nav-link:hover::after,
.nav-link.is-active::after {
  width: 100%;
}

/* Hamburger */
.nav-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 26px;
  height: 1px;
  background: var(--parchment);
  transform: translateX(-50%);
  transition: transform var(--t-medium), opacity var(--t-medium);
}

.nav-toggle__bar { top: 50%; }
.nav-toggle__bar::before { top: -8px; }
.nav-toggle__bar::after { top: 8px; }

body.nav-open .nav-toggle__bar { background: transparent; }
body.nav-open .nav-toggle__bar::before { top: 0; transform: translateX(-50%) rotate(45deg); background: var(--parchment); }
body.nav-open .nav-toggle__bar::after { top: 0; transform: translateX(-50%) rotate(-45deg); background: var(--parchment); }

/* Mobile overlay · voci allineate a sinistra, stile masthead Harvey */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-xs);
  padding: var(--space-l) var(--gutter);
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform var(--t-slow);
  visibility: hidden;
}

body.nav-open .nav-overlay {
  transform: translateY(0);
  visibility: visible;
}

.nav-overlay a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: var(--tracking-display);
  color: var(--parchment);
  transition: color var(--t-medium);
}

.nav-overlay a:hover {
  color: var(--copper-light);
}

/* "Contatto" diventa un bottone CTA copper, spinto in fondo a sinistra
   (margin-top auto: resta in basso ma scorre col menu quando si allunga) */
.nav-overlay a[href$="contatto.html"] {
  margin-top: auto;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--navy);
  background: var(--copper);
  border-radius: var(--radius-cta);
  padding: 0.85rem 2rem;
}

.nav-overlay a[href$="contatto.html"]:hover {
  color: var(--parchment);
  background: var(--copper-light);
}

/* Overlay: gruppo Servizi con sottomenu (accordion) */
.nav-overlay__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.nav-overlay__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: var(--tracking-display);
  color: var(--parchment);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--t-medium);
}

.nav-overlay__toggle:hover { color: var(--copper-light); }

.nav-overlay__arrow {
  display: inline-flex;
  color: var(--copper-light);
}

.nav-overlay__arrow svg { transition: transform var(--t-medium); }

.nav-overlay__toggle[aria-expanded="true"] .nav-overlay__arrow svg {
  transform: rotate(180deg);
}

.nav-overlay__sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xxs);
  margin-top: var(--space-xs);
  padding-left: var(--space-s);
}

.nav-overlay__sub[hidden] { display: none; }

/* Sottomenu Servizi: Jost, non corsivo, piu piccolo */
.nav-overlay__sub a {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-ui);
  text-transform: none;
  color: rgba(242, 238, 232, 0.78);
}

@media (max-width: 1023px) {
  .nav-list { display: none; }
  .nav-primary { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-block; margin-left: auto; }
}

/* ---- Dropdown Servizi (hover, desktop) ---- */
.nav-item--has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
}

.nav-arrow {
  display: inline-flex;
  margin-left: 0.45em;
  color: var(--copper-light);
}

.nav-arrow svg {
  display: block;
  transition: transform var(--t-medium);
}

.nav-item--has-dropdown:hover .nav-arrow svg,
.nav-item--has-dropdown:focus-within .nav-arrow svg {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  padding: var(--space-xs) 0;
  background: var(--navy-mid);
  border-top: 1px solid var(--copper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-medium), transform var(--t-medium),
    visibility var(--t-medium);
}

.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: var(--space-xxs) var(--space-s);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: rgba(242, 238, 232, 0.82);
  white-space: nowrap;
  transition: color var(--t-medium);
}

.nav-dropdown a:hover {
  color: var(--copper-light);
}

/* ---- Hero pagine interne · sinistra, aria sotto la navbar ---- */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  /* altezza fissa unica per tutte le hero interne (eyebrow e non),
     riferimento hero con eyebrow +20% (D41) */
  min-height: 66vh;
  min-height: 66svh;
  padding-top: calc(var(--header-h) + var(--space-m));
  padding-bottom: var(--space-l);
}

.page-hero__inner {
  max-width: var(--container-editorial);
}

/* ---- Hero fotografica condivisa (sfondo + scrim neutro, pagine interne) ---- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.62) 32%,
    rgba(0, 0, 0, 0.26) 60%,
    rgba(0, 0, 0, 0) 88%
  );
}

@media (max-width: 767px) {
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.46) 42%,
      rgba(0, 0, 0, 0.18) 68%,
      rgba(0, 0, 0, 0) 88%
    );
  }
}

.page-hero {
  overflow: hidden;
}

.page-hero > .container {
  position: relative;
  z-index: 2;
}

/* ---- Hero "display": fondo bianco, titolo enorme navy, piena altezza desktop ---- */
.page-hero--display {
  background: var(--white);
  color: var(--navy);
}

@media (min-width: 768px) {
  .page-hero--display {
    min-height: 100vh;
    min-height: 100svh;
  }
}

.page-hero--display .page-hero__inner {
  max-width: var(--container-narrow);
}

.page-hero--display h1 {
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: 1.04;
}

.page-hero--display .eyebrow {
  color: var(--copper-text);
}

.page-hero--display .lead {
  color: var(--navy);
  max-width: 46ch;
}

/* Hero articolo/legali in versione display: testo scuro su bianco */
.page-hero--display .article-hero__inner { max-width: var(--container-narrow); }
.page-hero--display .article-hero__standfirst { color: var(--navy); }
.page-hero--display .article-hero__meta { color: var(--stone); }
.page-hero--display .article-hero__meta .cat { color: var(--copper-text); }

/* Navbar su hero chiara: trasparente, logo e voci navy. Niente velo, niente barra.
   Logo a doppia versione: chiara di default, navy quando body.nav-light. */
.site-header__logo .logo-navy { display: none; }

body.nav-light .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.nav-light .site-header::before { display: none; }

/* Su scroll (pagine chiare): barra bianca traslucida, niente linea di separazione */
body.nav-light .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
}

/* Home: navbar non sticky, resta a inizio pagina e scorre via */
body.nav-scrollaway .site-header {
  position: absolute;
}

body.nav-light .nav-link { color: var(--navy); }
body.nav-light .nav-link:hover { color: var(--copper-text); }

body.nav-light .site-header__logo .logo-light { display: none; }
body.nav-light .site-header__logo .logo-navy { display: inline-block; }

body.nav-light .nav-toggle__bar,
body.nav-light .nav-toggle__bar::before,
body.nav-light .nav-toggle__bar::after { background: var(--navy); }

/* Menu mobile aperto: overlay navy, quindi logo bianco e X bianca */
body.nav-light.nav-open .site-header__logo .logo-light { display: inline-block; }
body.nav-light.nav-open .site-header__logo .logo-navy { display: none; }
body.nav-light.nav-open .nav-toggle__bar { background: transparent; }
body.nav-light.nav-open .nav-toggle__bar::before,
body.nav-light.nav-open .nav-toggle__bar::after { background: var(--parchment); }

/* Menu mobile aperto: la navbar sparisce (logo + sfondo + velo), resta solo la
   X per chiudere, sopra l'overlay navy a tutto schermo. */
body.nav-open .site-header__logo { display: none; }
body.nav-open .site-header,
body.nav-open .site-header.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.nav-open .site-header::before { display: none; }

/* ============================================================
   7.2 · FOOTER
   ============================================================ */

.site-footer {
  background: var(--navy);
  color: var(--parchment);
  border-top: 1px solid var(--hairline-parchment);
  /* Top generoso per stacco, bottom contenuto: niente vuoto in coda */
  padding-block: var(--space-l) var(--space-s);
}

.footer-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.footer-mark img {
  height: 3.386rem;
  width: auto;
  margin-bottom: var(--space-s);
}

.footer-claim {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body-large);
  line-height: var(--lh-tight);
  color: rgba(242, 238, 232, 0.7);
  max-width: 30ch;
}

.footer-col__title {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: var(--space-s);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-links a,
.footer-contacts a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-ui);
  color: rgba(242, 238, 232, 0.85);
  transition: color var(--t-medium);
}

.footer-links a:hover,
.footer-contacts a:hover {
  color: var(--copper-light);
}

.footer-bottom {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--hairline-parchment);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: space-between;
}

.footer-bottom p {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-ui);
  color: var(--stone);
  max-width: none;
}

.footer-bottom a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color var(--t-medium), border-color var(--t-medium);
}

.footer-bottom a:hover {
  color: var(--copper-light);
  border-bottom-color: var(--copper-light);
}

/* ============================================================
   7.3 · BOTTONI
   Niente fill copper, niente rotondi, niente gradiente.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  transition: background var(--t-medium), color var(--t-medium),
    border-color var(--t-medium);
}

/* Pill / ovale · riservato al CTA primario di conversione (deviazione
   voluta da Davide rispetto a 7.3 "mai pulsanti rotondi"). La forma
   distinta funziona da punto focale: bias di distintivita. */
.btn--pill {
  border-radius: var(--radius-cta);
  padding-inline: 2.4rem;
}

.btn-ghost {
  border-color: var(--copper-text);
  color: var(--navy);
}

.btn-ghost:hover {
  background: var(--navy);
  color: var(--parchment);
  border-color: var(--navy);
}

/* Ghost su fondo scuro */
.band-navy .btn-ghost,
.band-navy-mid .btn-ghost,
.btn-ghost--light {
  color: var(--parchment);
  border-color: var(--copper-text);
}

.band-navy .btn-ghost:hover,
.band-navy-mid .btn-ghost:hover,
.btn-ghost--light:hover {
  background: var(--parchment);
  color: var(--navy);
  border-color: var(--parchment);
}

.btn-navy {
  background: var(--navy);
  color: var(--parchment);
  border-color: var(--copper-text);
}

.btn-navy:hover {
  background: var(--navy-mid);
  border-color: var(--copper-light);
}

/* Copper pieno · CTA primario di conversione (deviazione voluta da 7.3).
   Testo navy per leggibilita; al hover inverte su navy/parchment. */
.btn-copper {
  background: var(--copper);
  color: var(--navy);
  border-color: var(--copper-text);
}

.btn-copper:hover {
  background: var(--navy);
  color: var(--parchment);
  border-color: var(--copper-text);
}

/* Sezione CTA di chiusura · spaziatura coerente su tutte le pagine */
.cta-close {
  text-align: center;
}

.cta-close .lead {
  margin-block: var(--space-s) var(--space-m);
  max-width: 42ch;
  margin-inline: auto;
}

/* Header e coda di sezione · condivisi, spaziatura coerente ovunque */
.section-head {
  margin-bottom: var(--space-m);
}

.section-head .lead {
  margin-top: var(--space-s);
  max-width: 48ch;
}

.section-tail {
  margin-top: var(--space-m);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--copper-text);
  transition: color var(--t-medium);
}

.btn-link .arrow {
  transition: transform var(--t-medium);
}

.btn-link:hover {
  color: var(--copper-light);
}

.btn-link:hover .arrow {
  transform: translateX(5px);
}

/* ============================================================
   7.4 · CARD
   ============================================================ */

/* Card surface su fondo bianco */
.card-parchment {
  background: var(--parchment);
  color: var(--navy);
  padding: var(--space-s);
  border: 1px solid var(--hairline-stone);
  transition: border-color var(--t-medium);
}

.card-parchment:hover {
  border-color: var(--copper-text);
}

/* Card surface su fondo parchment: sempre bianca, per stacco netto */
.card-white {
  background: var(--white);
  color: var(--navy);
  padding: var(--space-s);
  border: 1px solid var(--hairline-stone);
  transition: border-color var(--t-medium);
}

.card-white:hover {
  border-color: var(--copper-text);
}

.card-navy {
  background: var(--navy-mid);
  color: var(--parchment);
  padding: var(--space-s);
  transition: background var(--t-medium), color var(--t-medium);
}

/* Hover: la card vira a parchment con testo navy (foglio che si illumina) */
.card-navy:hover {
  background: var(--parchment);
  color: var(--navy);
}

.card-editorial {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
}

/* Cover esterna della card (solo dove presente il markup .card-cover) */
.card-editorial .card-cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--space-s);
  background: var(--navy);
}

.card-editorial .card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}

.card-editorial:hover .card-cover img {
  transform: scale(1.03);
}

.card-editorial .card-meta {
  margin-bottom: var(--space-xs);
}

.card-editorial .card-title {
  transition: color var(--t-medium);
}

.card-editorial:hover .card-title {
  color: var(--copper-text);
}

.card-editorial .card-excerpt {
  margin-top: var(--space-xs);
}

.card-editorial .divider-copper {
  margin-top: var(--space-s);
  margin-bottom: 0;
}

.card-meta {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}

.card-meta .cat { color: var(--copper-text); }
.card-meta .date { color: var(--stone); }

/* ============================================================
   7.9 · MARK CORNER
   ============================================================ */

.mark-corner {
  position: absolute;
  right: var(--space-s);
  bottom: var(--space-s);
  width: 32px;
  height: 32px;
}

.mark-corner img {
  width: 100%;
  height: 100%;
}

/* ============================================================
   7.10 · FORM FIELD
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.field > label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-sc);
  text-transform: uppercase;
  color: var(--stone);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--copper);
  padding: var(--space-xxs) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--navy);
  border-radius: 0;
  transition: border-color var(--t-fast), border-width var(--t-fast);
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-width: 2px;
  padding-bottom: calc(var(--space-xxs) - 1px);
}

/* ============ LANGUAGE SWITCHER (bilingue IT/EN) ============ */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: var(--space-s);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.nav-lang__link {
  color: var(--parchment);
  opacity: 0.7;
  transition: color var(--t-medium), opacity var(--t-medium);
}

.nav-lang__link:hover {
  color: var(--white);
  opacity: 1;
}

.nav-lang__link.is-active {
  color: var(--white);
  opacity: 1;
  font-weight: 500;
}

.nav-lang__sep {
  color: var(--parchment);
  opacity: 0.4;
}

/* Su pagine a hero bianco (nav-light) lo switcher diventa navy come i nav-link */
body.nav-light .nav-lang__link { color: var(--navy); }
body.nav-light .nav-lang__link:hover { color: var(--copper-text); }
body.nav-light .nav-lang__sep { color: var(--navy); }

/* Variante dentro l'overlay mobile */
.nav-overlay__lang {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-s);
}

.nav-overlay__lang a {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(242, 238, 232, 0.75);
}

.nav-overlay__lang a.is-active {
  color: var(--white);
}

.nav-overlay__lang span {
  color: rgba(242, 238, 232, 0.4);
}

@media (max-width: 1023px) {
  .nav-lang { display: none; }
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.field--error input,
.field--error textarea,
.field--error select {
  border-bottom-color: var(--copper-light);
}

.field__error {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-ui);
  color: var(--copper-light);
}

/* Form su band parchment: input leggibili, label stone */
.band-parchment .field input,
.band-parchment .field textarea,
.band-parchment .field select {
  color: var(--navy);
}

/* ============================================================
   7.11 · SCROLL INDICATOR (hero only)
   ============================================================ */

.scroll-indicator {
  width: 1px;
  height: 60px;
  background: var(--copper);
  animation: scroll-pulse 3s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator { animation: none; opacity: 0.7; }
}

/* ============================================================
   7.12 · REVEAL ON SCROLL (premium, performante)
   Stato nascosto applicato solo se il JS aggiunge .js-reveal e solo
   quando l'utente non chiede riduzione del movimento. Anima esclusivamente
   opacity e transform: composito su GPU, nessun reflow, nessun CLS
   (il box resta in flusso, translateY non sposta il layout).
   Il JS marca .reveal solo sugli elementi sotto la piega: nessun flash.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--t-slow),
      transform var(--t-slow);
  }
  .js-reveal .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   7.12 · COOKIE BANNER
   Iniettato da main.js solo se manca il consenso in localStorage.
   ============================================================ */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--navy-mid);
  border-top: 1px solid var(--hairline-parchment);
  color: var(--parchment);
  padding: var(--space-s) 0;
  transform: translateY(110%);
  transition: transform var(--t-slow);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.cookie-banner__text {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(242, 238, 232, 0.85);
  max-width: 70ch;
  margin: 0;
}

.cookie-banner__text a {
  color: var(--copper-light);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-medium);
}

.cookie-banner__text a:hover {
  border-bottom-color: var(--copper-light);
}

.cookie-banner__btn {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--white);
  background: var(--copper);
  border: 1px solid var(--copper);
  border-radius: var(--radius-cta);
  padding: 0.7rem 1.9rem;
  cursor: pointer;
  transition: background var(--t-medium), border-color var(--t-medium);
}

.cookie-banner__btn:hover {
  background: var(--navy);
  border-color: var(--copper-light);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}