/*
 * www.destinationflorence.it - hub del sistema Destination Florence
 * ---------------------------------------------------------------------------
 * Foglio di stile autonomo (niente Bootstrap, niente jQuery): stessi colori,
 * font e forme del tema "df" di fondazione.destinationflorence.it, ma solo
 * quello che serve a questa pagina. Nessuna animazione che nasconda i
 * contenuti: tutto e' visibile da subito, per utenti e crawler.
 * kidstudio, novembre 2026
 */

/* Font ------------------------------------------------------------------- */

@font-face {
  font-family: "GeneralSans";
  src: url("../fonts/GeneralSans-Extralight.woff2") format("woff2"),
       url("../fonts/GeneralSans-Extralight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Pressura Mono";
  src: url("../fonts/GT-Pressura-Mono-Light.woff2") format("woff2"),
       url("../fonts/GT-Pressura-Mono-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Token ------------------------------------------------------------------ */

:root {
  --beige: #F4EEE7;
  --bianco: #FBF8F4;
  --nero: #4C4C4C;
  --giallo: #F4C679;
  --azzurro: #7AC4F3;
  --rosso: #E08282;
  --verde: #8CE281;

  --sans: "GeneralSans", "Helvetica Neue", Arial, sans-serif;
  --mono: "GT Pressura Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --r-big: 16px;
  --r-small: .375rem;
  --frame: 15px;          /* margine delle cornici arrotondate */
  --gutter: 24px;
  --box: 5.5rem;          /* padding verticale delle bande */
  --wrap: 1296px;
}

/* Base ------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bianco);
  color: var(--nero);
  font-family: var(--mono);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 200;
  line-height: 1.1;
}

p { margin: 0; font-size: .9rem; }

ul { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--frame);
  z-index: 10000;
  padding: 8px 16px;
  background: var(--nero);
  color: var(--beige);
  border-radius: var(--r-small);
  font-size: .9rem;
}
.skip-link:focus { top: var(--frame); }

:focus-visible {
  outline: 2px solid var(--nero);
  outline-offset: 3px;
}
.hero :focus-visible,
.band--nero :focus-visible,
.footer :focus-visible { outline-color: var(--beige); }

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

/* Tipografia di display -------------------------------------------------- */

.display-1 {
  font-size: clamp(2.6rem, 1.625rem + 4.5vw, 5rem);
  line-height: 1;
}

.display-2 {
  font-size: clamp(2.4rem, 1.575rem + 3.9vw, 4.5rem);
  line-height: 1;
}

.h1 { font-size: clamp(1.9rem, 1.375rem + 1.5vw, 2.5rem); }

.mini-headline {
  display: inline-block;
  padding: 8px 14px;
  border: .5px solid currentColor;
  border-radius: var(--r-small);
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Bottoni ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 6px 40px;
  border: .5px solid transparent;
  border-radius: var(--r-small);
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.btn--block { display: block; width: 100%; }

.btn--nero { background-color: var(--nero); border-color: var(--nero); color: var(--beige); }
.btn--nero:hover { background-color: transparent; color: var(--nero); }

.btn--beige { background-color: var(--beige); border-color: var(--beige); color: var(--nero); }
.btn--beige:hover { background-color: transparent; color: var(--beige); }

.btn--outline {
  padding: 6px 12px;
  border-color: currentColor;
  background-color: transparent;
  color: inherit;
  font-size: .8rem;
  line-height: 1.25;
}

/* Navigazione ------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 9000;
  color: var(--beige);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: .5px solid transparent;
  border-radius: var(--r-small);
  transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}

.nav.is-scrolled { color: var(--nero); }
.nav.is-scrolled .nav__bar {
  background-color: var(--bianco);
  border-color: var(--nero);
}

.brand { position: relative; flex: 0 0 auto; width: 234px; }
.brand img { width: 100%; height: auto; }
.brand .brand--dark { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.brand .brand--light { transition: opacity .4s ease; }
.nav.is-scrolled .brand .brand--dark { opacity: 1; }
.nav.is-scrolled .brand .brand--light { opacity: 0; }

.nav__links {
  display: flex;
  border: .5px solid currentColor;
  border-radius: var(--r-small);
  overflow: hidden;
}

.nav__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  padding: 6px 14px;
  font-size: .8rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.nav__links a + a { border-left: .5px solid currentColor; }

.nav__links a:hover { background-color: var(--beige); color: var(--nero); }
.nav.is-scrolled .nav__links a:hover { background-color: var(--nero); color: var(--beige); }

.nav__lang { flex: 0 0 auto; }
.nav__lang:hover { background-color: var(--beige); color: var(--nero); }
.nav.is-scrolled .nav__lang:hover { background-color: var(--nero); color: var(--beige); }

/* Hero ------------------------------------------------------------------- */

.hero { padding: var(--frame) var(--frame) 0; }

.hero__frame {
  position: relative;
  min-height: calc(100vh - 2 * var(--frame));
  min-height: calc(100svh - 2 * var(--frame));
  /* Tetto all'altezza: il renderer di Google usa una finestra altissima e
     una hero a 100vh coprirebbe tutta la pagina nei suoi screenshot. */
  min-height: min(calc(100svh - 2 * var(--frame)), 1100px);
  border-radius: var(--r-big);
  overflow: hidden;
  background-color: var(--nero);
  color: var(--beige);
  isolation: isolate;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media { z-index: -2; }
.hero__media img { object-fit: cover; object-position: center 40%; }

.hero__swoosh {
  position: absolute;
  bottom: -5%;
  left: -10%;
  width: 120%;
  height: 80%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero__swoosh svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 84%;
}

.hero__content { padding-top: max(13rem, min(24vh, 260px)); }

.hero__intro {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 2rem 8%;
  align-items: end;
}

.hero__intro p { max-width: 34ch; line-height: 1.6; }

.portali {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 6rem;
  padding-bottom: 6rem;
}

.portale {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 22px;
  border-radius: var(--r-big);
  background-color: var(--beige);
  color: var(--nero);
}

.portale--giallo { background-color: var(--giallo); }
.portale--nero { background-color: var(--nero); color: var(--beige); }

.portale .mini-headline { align-self: flex-start; margin-bottom: 2.5rem; }

.portale__title { margin-bottom: 1rem; font-size: 2rem; }

.portale__title a { text-decoration: none; }

.portale .sottolineato,
.underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.portale p { margin-bottom: 2rem; line-height: 1.6; }

.portale .btn,
.card .btn { margin-top: auto; }

/* Bande arrotondate ------------------------------------------------------ */

.band {
  position: relative;
  margin: var(--frame) var(--frame) 0;
  padding-block: var(--box);
  border-radius: var(--r-big);
  overflow: hidden;
  isolation: isolate;
}

.band--nero { background-color: var(--nero); color: var(--beige); }
.band--beige { background-color: var(--beige); }

.band__outline {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  z-index: -1;
  pointer-events: none;
}

.band__outline svg { width: 100%; height: auto; }
.band__outline path { fill: transparent; stroke: var(--beige); stroke-width: 1; opacity: .7; }

.split {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 2rem 8%;
  align-items: center;
}

.split--end { align-items: end; }

.split p { line-height: 1.6; }
.split p + .btn { margin-top: 1.5rem; }

/* Sezione "modi di vivere Firenze" --------------------------------------- */

.section { padding-top: var(--box); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: 3rem;
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 22px;
  border-radius: var(--r-big);
  color: var(--nero);
}

.card h3 { margin-bottom: 1rem; font-size: 1.5rem; }
.card p { margin-bottom: 2rem; line-height: 1.6; }

.card--azzurro { background-color: var(--azzurro); }
.card--rosso { background-color: var(--rosso); }
.card--verde { background-color: var(--verde); }

.card--azzurro .btn--nero { color: var(--azzurro); }
.card--rosso .btn--nero { color: var(--rosso); }
.card--verde .btn--nero { color: var(--verde); }
.card .btn--nero:hover { color: var(--nero); }

/* Banda Fondazione ------------------------------------------------------- */

.fondazione {
  display: flex;
  align-items: center;
  min-height: 480px;
  margin-top: var(--box);
}

.fondazione__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.fondazione__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  transform: scale(1.06);
}

.fondazione__card {
  max-width: 760px;
  padding: 30px;
  border: .5px solid var(--nero);
  border-radius: var(--r-big);
  background-color: var(--beige);
}

.fondazione__card h2 { margin-bottom: 1.5rem; }
.fondazione__card p { margin-bottom: 1.5rem; line-height: 1.6; }

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-bottom: 1.75rem;
}

.link-list a {
  font-size: .9rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Newsletter ------------------------------------------------------------- */

.newsletter { padding-block: var(--box); }
.newsletter h2 { margin-bottom: 1rem; }

/* Footer ----------------------------------------------------------------- */

.footer {
  margin: 0 var(--frame) var(--frame);
  padding-block: var(--box) 2.5rem;
  border-radius: var(--r-big);
  background-color: var(--nero);
  color: var(--beige);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

.footer .brand { width: 234px; }

.footer__contacts { font-style: normal; text-align: right; }

.footer li,
.footer a,
.footer p { font-size: .85rem; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem var(--gutter);
  padding-top: var(--box);
}

.footer h2 {
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 300;
  text-transform: uppercase;
}

.footer__cols li + li { margin-top: .35rem; }

.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

.social {
  display: flex;
  gap: 14px;
  margin-top: 1rem;
}

.social img { width: 22px; height: 22px; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: .5px solid var(--beige);
}

/* Pagina 404 ------------------------------------------------------------- */

.notfound .hero__content { padding-bottom: 6rem; }
.notfound .hero__content p { max-width: 46ch; margin-top: 1.5rem; line-height: 1.6; }
.notfound .hero__content .btn { margin-top: 2rem; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1199px) {
  .nav__links a { min-width: 0; padding-inline: 10px; }
  .brand { width: 190px; }
}

@media (max-width: 991px) {
  :root { --box: 4.5rem; }

  .nav { top: var(--frame); }
  .nav__bar { padding: .75rem; }

  /* Su tablet e smartphone i quattro link diventano una griglia 2x2
     fissata in basso, come la bottom nav del tema. */
  .nav__links {
    position: fixed;
    left: var(--frame);
    right: var(--frame);
    bottom: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5px;
    border: .5px solid var(--nero);
    background-color: var(--nero);
    color: var(--nero);
  }

  .nav__links a {
    min-height: 34px;
    padding: 6px 8px;
    border: 0 !important;
    background-color: var(--beige);
    font-size: .72rem;
  }

  /* Cinque voci: la DMO su una riga intera, le divisioni in 2x2 sotto */
  .nav__links a:first-child { grid-column: 1 / -1; }

  body { padding-bottom: 116px; }

  .hero__intro,
  .split { grid-template-columns: 1fr; }

  .hero__content { padding-top: 11rem; }

  .portali {
    grid-template-columns: 1fr 1fr;
    margin-top: 4rem;
    padding-bottom: 4.5rem;
  }

  .portale { min-height: 280px; }

  .cards { grid-template-columns: 1fr 1fr; }

  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .portali,
  .cards,
  .footer__cols { grid-template-columns: 1fr; }

  .footer__contacts { text-align: left; }
}

@media (max-width: 576px) {
  :root { --box: 2.5rem; --gutter: 18px; }

  .brand { width: 150px; }

  .hero__content { padding-top: 9.5rem; }
  .hero__swoosh { left: -30%; width: 160%; height: 50%; }

  .portali { margin-top: 3rem; padding-bottom: 3rem; gap: 18px; }

  .portale { min-height: 250px; padding: 15px; }
  .portale .mini-headline { margin-bottom: 2rem; padding: 6px 12px; font-size: .8rem; }
  .portale__title { font-size: 1.6rem; }

  .card { min-height: 170px; padding: 15px; }
  .card h3 { font-size: 1.3rem; }

  .btn { padding-inline: 20px; }

  .fondazione { min-height: 380px; }
  .fondazione__card { padding: 18px; }

  .footer { padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition: none !important; }
}

/* ===========================================================================
 * Animazioni (v1.1, novembre 2026)
 * ---------------------------------------------------------------------------
 * Stesso linguaggio della Home 2026 del tema: zoom morbido della foto,
 * testi e card che salgono in sequenza, parallasse sulle linee "swoosh".
 *
 * Regola per l'indicizzazione: senza la classe .anim su <html> nessun
 * elemento e' nascosto. La classe la mette lo script nel <head> solo per
 * visitatori veri (non per crawler, non con "riduci movimento", non su
 * browser senza IntersectionObserver), e c'e' sempre un'uscita di sicurezza
 * (.anim-done) che mostra tutto. Si anima solo transform/opacity: niente
 * spostamenti di layout (CLS) e la foto della hero (LCP) non e' mai nascosta.
 * ========================================================================= */

.anim [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition:
    opacity 1s cubic-bezier(.22, 1, .36, 1) var(--d, 0s),
    transform 1.2s cubic-bezier(.22, 1, .36, 1) var(--d, 0s);
  will-change: opacity, transform;
}

.anim [data-reveal="card"] { transform: translate3d(0, 64px, 0); }
.anim [data-reveal="fade"] { transform: none; }

.anim [data-reveal].is-in,
.anim.anim-done [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Foto della hero: entra con uno zoom da 1.08 a 1 (sempre visibile) */
.anim .hero__media img {
  transform: scale(1.08);
  transition: transform 2.2s cubic-bezier(.22, 1, .36, 1);
}
.anim.is-ready .hero__media img,
.anim.anim-done .hero__media img { transform: scale(1); }

/* Margine per la parallasse: lo strato e' piu' alto della cornice, cosi'
   spostandosi non scopre mai i bordi */
.hero__media { inset: -8% 0; height: auto; }
.fondazione__bg { inset: -12% 0; }

[data-parallax] { will-change: transform; }

/* Bottoni e card: piccolo sollevamento al passaggio del mouse */
@media (hover: hover) {
  .portale,
  .card {
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
  }
  .anim .portale:hover,
  .anim .card:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45);
  }
}

/* Mobile: la foto verticale ha molto cielo chiaro dietro al testo bianco.
   Un velo scuro sfumato (piu' intenso in alto, dove c'e' il testo) migliora
   il contrasto senza toccare l'immagine. Sta sopra la foto e sotto le linee
   swoosh e i contenuti. */
@media (max-width: 767px) {
  .hero__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(20, 24, 28, .55) 0%,
      rgba(20, 24, 28, .42) 40%,
      rgba(20, 24, 28, .18) 70%,
      rgba(20, 24, 28, 0) 90%);
  }
}

/* Banner Cookiebot (lo stesso di fondazione.destinationflorence.it): sopra la
   barra di navigazione e la griglia dei link mobile, come nel tema df. */
#CybotCookiebotDialog { z-index: 10001 !important; }