/* =========================================================================
   Bio Dental Hygiene — site.css
   Design tokens taken verbatim from the approved BRAND BOARD (05.09.2026).
   Do not invent new colours here: add them to the brand board first.
   ========================================================================= */

:root {
  /* --- Ground ------------------------------------------------------- */
  --paper:      #F7F6F2;   /* ground primario  — ~60% delle superfici   */
  --cream:      #EDE9E1;   /* ground secondario — alternanza, citazioni */

  /* --- Ink & accents ------------------------------------------------ */
  --ink:        #2B2B2B;   /* testo                                     */
  --forest:     #2F4F3E;   /* accento forte — titoli chiave, dati       */
  --sage:       #A7B39A;   /* accento tenue — filetti (mai testo)       */

  /* --- Derivati, per accessibilità e per il grigio cemento del brief -- */
  /* Sage scurito fino a superare WCAG AA come TESTO su Paper.
     Misurato: #A7B39A = 2.03 (insufficiente) · #6E7D62 = 4.07 (insufficiente)
     · #647358 = 4.70 ✓ — è il più chiaro che passa, quindi il più vicino al Sage. */
  --sage-deep:  #647358;
  --concrete:   #8E8D87;   /* grigio cemento — cornice foto, didascalie */
  --clinical:   #7A858B;   /* PROPOSTA: il "grigio clinico freddo"      */
                           /* ancora aperto in BRAND BOARD §10 — da approvare */

  /* --- Tipografia ---------------------------------------------------- */
  /* ⚠️ CAMBIO rispetto a BRAND BOARD §3 (che fissava Playfair + Montserrat).
     Su tua indicazione (21.09) adottiamo la coppia di Sama Oral Health,
     estratta dal loro CSS: Cormorant Garamond + Source Sans.
     Entrambi open source (SIL OFL), quindi usabili senza licenza a pagamento.
     → il BRAND BOARD va aggiornato di conseguenza. */
  --font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style",
                  "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- Ritmo --------------------------------------------------------- */
  --gutter:      clamp(1.5rem, 6vw, 5rem);   /* margini generosi, 8-10% */
  --rule:        1px solid var(--sage);
  --tracking-label: 0.17em;   /* ≈2px a 12px, come le micro-etichette Sama */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================================
   Reset — minimo, niente framework
   ========================================================================= */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;          /* Cormorant vive nei pesi leggeri, a corpo grande */
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
}

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

/* =========================================================================
   Elementi ricorrenti
   ========================================================================= */

/* Etichetta in maiuscoletto spaziato — lo stile "fonte/didascalia" del brand.
   Colore: sage-deep, non Sage: Sage su Paper non raggiunge il contrasto. */
.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--sage-deep);
  margin: 0;
}

.rule {
  border: 0;
  border-top: var(--rule);
  width: 3.5rem;
  margin: 0;
}

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

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================================
   Coming soon — la homepage
   ========================================================================= */

.hero {
  min-height: 100svh;
  display: block;
}

.hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 3.2vh, 2.25rem);
  padding: clamp(2.25rem, 7vh, 4.5rem) var(--gutter);

  /* Il titolo deve scalare sulla larghezza DELLA COLONNA, non della finestra:
     in due colonne la colonna è metà schermo e il testo andava a capo 4 volte. */
  container-type: inline-size;
}

/* --- Marchio: solo il dente + il nome composto in tipografia --- */

.hero__brand {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 3cqi, 1.4rem);
}

.hero__brand picture { display: block; flex: none; }

.hero__mark {
  width: clamp(58px, 13cqi, 86px);
  height: auto;
  margin: 0;
}

.hero__wordmark {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.8rem, 2.6cqi, 1rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
  max-width: 7ch;      /* manda "Hygiene" a capo, come nel logo originale */
}

.hero__title {
  /* Cormorant regge corpi grandi: è lì che diventa editoriale */
  font-size: clamp(2.4rem, 11.5cqi, 4.35rem);
  max-width: 14ch;
}

/* la seconda riga del titolo, in Forest: è lì che il verde fa l'accento */
.hero__title em {
  font-style: normal;
  color: var(--forest);
  display: block;
}

.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 300;
  color: var(--sage-deep);
  margin: 0.85rem 0 0;   /* respiro sotto il titolo, non incollato */
}


.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.75rem;
  margin-top: auto;
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* --- Icone: Instagram, mail, luogo. Disegnate in SVG dentro l'HTML,
       nessuna icon-font e nessuna richiesta esterna. ---------------------- */

.hero__icons {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__icons li { display: flex; }

.hero__icons svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: var(--forest);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* il puntino dell'icona Instagram è pieno, non contornato */
.hero__icons svg .fill { fill: var(--forest); stroke: none; }

.hero__icons a {
  display: block;
  color: var(--forest);
  /* area di tocco da 44px sul telefono, senza allargare il disegno:
     icona 20px + 12px di padding per lato = 44px esatti */
  padding: 0.75rem;
  margin: -0.75rem;
  border-radius: 4px;
  transition: opacity 0.3s var(--ease);
}

.hero__icons a:hover svg { stroke: var(--ink); }
.hero__icons a:hover svg .fill { fill: var(--ink); }

/* Zurigo: segnaposto + città, non cliccabile finché non c'è un indirizzo */
.hero__place {
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.35rem;
}

.hero__place span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--sage-deep);
}




/* =========================================================================
   Layout adottato 21.09.2026 — impaginazione Sama Oral Health:
   fotografia a tutta pagina, velo scuro, titolo maiuscolo centrato sopra,
   wordmark centrato in alto, icone in alto a sinistra.
   Il velo NON è estetico: senza, il testo avorio non raggiunge il contrasto
   minimo sulle zone chiare della foto. Valori misurati, non scelti a occhio.
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: block;
}

/* --- La fotografia, a tutta pagina --------------------------------------- */

.hero__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  z-index: 0;
}

.hero__figure picture,
.hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* "tipo video": zoom lentissimo, 28s per ciclo, avanti e indietro */
.hero__figure img {
  animation: heroDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -2%, 0); }
}

/* Velo scuro, tarato sulla fotografia REALE, non a occhio.
   Misurato sulla banda dove cade il testo: mediana 139/255, 99° percentile 212.
   velo 0.50 -> contrasto 4.28 (sotto il minimo)
   velo 0.55 -> contrasto 4.90 ✓
   velo 0.62 -> contrasto 5.9  ✓
   Adottato 0.56 in alto, 0.62 in basso: il minimo che rispetta WCAG AA,
   così la fotografia resta viva invece di essere spenta. */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(20, 22, 19, 0.56) 0%,
              rgba(20, 22, 19, 0.62) 100%);
}

/* --- Il testo, sopra la foto --------------------------------------------- */

.hero__panel {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.hero__title {
  font-size: clamp(1.9rem, 6.2cqi, 3.4rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  max-width: 20ch;
  margin-inline: auto;
  color: var(--paper);
}

.hero__title em { display: inline; color: var(--paper); }

.hero__sub {
  font-size: clamp(1.05rem, 2.6cqi, 1.5rem);
  text-transform: capitalize;
  margin-top: 1.1rem;
  color: #DCE2D4;
}

/* marchio centrato in alto */
.hero__brand {
  position: absolute;
  top: clamp(1.5rem, 4vh, 2.75rem);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.hero__mark { filter: brightness(0) invert(1) opacity(0.95); }

.hero__wordmark {
  max-width: none;
  letter-spacing: 0.3em;
  font-size: 0.7rem;
  color: var(--paper);
  white-space: nowrap;
}

/* icone in alto a sinistra */
.hero__icons {
  position: absolute;
  top: clamp(1.6rem, 4.2vh, 2.9rem);
  left: clamp(1.5rem, 5vw, 3rem);
  gap: 0.9rem;
}

.hero__icons svg { stroke: var(--paper); }
.hero__icons svg .fill { fill: var(--paper); }
.hero__icons a:hover svg { stroke: #C8D4BC; }
.hero__icons a:hover svg .fill { fill: #C8D4BC; }
.hero__place span { color: #DCE2D4; }

.hero__foot { padding-top: 0; margin-top: 0; }
.rule { display: none; }

/* telefono: il wordmark accanto alle icone starebbe stretto, va sotto */
@media (max-width: 30rem) {
  .hero__brand { top: auto; bottom: clamp(1.5rem, 5vh, 2.5rem); }
  .hero__wordmark { font-size: 0.62rem; letter-spacing: 0.24em; }
}