/* ==========================================================================
   Studio Dentistico Bicchierini — foglio di stile unico
   Palette:  verde acqua #66c4bf | oro #f1c232 | grigio scuro #404040
   ========================================================================== */

/* ------------------------------------------------------------------ font
   Lato e Comfortaa sono serviti da questo dominio (assets/font/) invece che
   da fonts.gstatic.com: cosi' il browser del visitatore non contatta Google
   per caricare la pagina. Sottoinsiemi latin e latin-ext, gli unici che
   servono all'italiano. Entrambi i caratteri sono sotto licenza SIL Open
   Font License 1.1 (assets/font/OFL.txt), che consente di ridistribuirli.
   Il nome dei file contiene un'impronta del contenuto: cambiando versione
   cambia il nome, quindi si possono tenere in cache per un anno. */

@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/comfortaa-latin-ext-4c38c8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/comfortaa-latin-a964ec.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/font/comfortaa-latin-ext-4c38c8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/font/comfortaa-latin-a964ec.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/lato-latin-ext-ab8d74.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/font/lato-latin-702e3b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/font/lato-latin-ext-91ee0a.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/font/lato-latin-b0cd9a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* --acqua e' solo decorativo (fondi ampi, pallini): con testo bianco
     sopra sta a 2.06:1 e non raggiunge la soglia WCAG AA di 4.5:1.
     Per testo e fondi di pulsanti si usano le due varianti scure. */
  --acqua: #66c4bf;
  --acqua-medio: #3f9a95;   /* capo scuro della sfumatura della fascia */
  --acqua-scuro: #2f7a76;   /* 5.04:1 su bianco, 4.54:1 su --sfondo */
  --acqua-cupo: #24615e;    /* 7.13:1 su bianco, per gli stati hover */
  --oro: #f1c232;
  --scuro: #404040;
  --testo: #213e46;
  --sfondo: #f3f3f3;
  --max: 1150px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --font-testo: Lato, "Segoe UI", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--testo);
  background: var(--sfondo);
}

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

a { color: var(--acqua-scuro); }
a:hover { color: var(--acqua-scuro); text-decoration: underline; }

h1, h2, h3 { font-family: Comfortaa, Lato, system-ui, sans-serif; line-height: 1.25; }

.contenitore {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.salta-al-contenuto {
  /* fixed e non absolute: con absolute il riquadro si posiziona rispetto al
     documento, quindi se il fuoco lo raggiungesse a pagina gia' scorsa
     comparirebbe sopra il bordo dello schermo, invisibile. Con fixed e'
     sempre riferito alla finestra. */
  position: fixed;
  left: -9999px;
}
.salta-al-contenuto:focus {
  left: 1rem; top: 1rem;
  z-index: 100;
  background: #fff;
  padding: .6rem 1rem;
  border-radius: 4px;
}

/* --------------------------------------------------------------- testata */

.testata {
  position: relative;
  background: #ddd url("/images/header-bg.jpg") center/cover no-repeat;
  color: #fff;
}
.testata::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .18);
}
.testata > * { position: relative; z-index: 1; }

.testata__marchio {
  display: block;
  text-align: center;
  padding: clamp(2.5rem, 9vw, 4.5rem) var(--gutter) clamp(1.5rem, 5vw, 2.5rem);
  text-decoration: none;
}
.testata__marchio:hover { text-decoration: none; }

.testata__titolo {
  margin: 0;
  /* Esplicito perche' in home l'elemento e' un <h1>: senza questa riga
     erediterebbe Comfortaa dalla regola h1,h2,h3 e cambierebbe aspetto. */
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: clamp(1.35rem, 5.2vw, 3rem);
  color: var(--oro);
  transform: skew(-19deg);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------- menu */

.menu { background: rgba(64, 64, 64, .92); }

.menu__pulsante {
  display: none;
  width: 100%;
  padding: .85rem var(--gutter);
  border: 0;
  background: var(--acqua-scuro);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.menu__pulsante::before {
  content: "\2630";
  margin-right: .6rem;
  font-size: 1.15em;
}
.menu__pulsante[aria-expanded="true"]::before { content: "\2715"; }

.menu__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.5rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__lista a {
  display: block;
  padding: .95rem 1rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.menu__lista a:hover,
.menu__lista a:focus-visible { color: var(--oro); text-decoration: none; }
.menu__lista a[aria-current="page"] {
  color: var(--oro);
  border-bottom-color: var(--oro);
}

/* --------------------------------------------------------------- sezioni */

main { display: block; }

.sezione { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.sezione--chiara { background: #fff; }
.sezione--grigia { background: var(--sfondo); }

.sezione__titolo {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  text-align: center;
}

/* Qui c'era una foto di sfondo (la targa dello studio) coperta da un velo
   opaco all'85%: una foto verticale schiacciata in una fascia orizzontale,
   illeggibile ma non abbastanza da nascondere che riportava orari diversi da
   quelli scritti poco sopra. Tolta: 62 KB in meno e il velo, che serviva solo
   a smorzarla, non serve piu'. La stessa targa resta in galleria. */
.striscia {
  padding-block: clamp(2rem, 6vw, 3.5rem);
  /* Il capo scuro e' --acqua-medio e non --acqua-scuro: quest'ultimo, nato
     per i pulsanti, porterebbe il testo della fascia a 3.34:1 invece di
     5.03:1. La fascia va da 8.20:1 in alto a 5.03:1 in basso. */
  background: linear-gradient(135deg, var(--acqua) 0%, var(--acqua-medio) 100%);
  text-align: center;
}
.striscia p {
  margin: 0;
  font-family: Comfortaa, Lato, sans-serif;
  font-size: clamp(1.15rem, 3.6vw, 1.9rem);
  font-weight: 700;
  color: #1d1d1d;
}

/* --------------------------------------------------------------- home */

.intro { text-align: center; max-width: 60ch; margin-inline: auto; }
.intro p { margin: 0 0 1rem; }

.due-colonne {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
}
@media (min-width: 760px) {
  .due-colonne { grid-template-columns: 1fr 1fr; }
  .due-colonne--invertita > :first-child { order: 2; }
}

.orari { margin: 0; }
.orari div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid #e2e2e2;
}
.orari dt { font-weight: 700; margin: 0; }
.orari dd { margin: 0; text-align: right; }

.elenco-servizi {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
.elenco-servizi li { padding-left: 1.4rem; position: relative; }
.elenco-servizi li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--acqua);
}

.bottone {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .75rem 1.75rem;
  background: var(--acqua-scuro);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.bottone:hover, .bottone:focus-visible {
  background: var(--acqua-cupo);
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------- staff */

.staff {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .staff { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .staff { grid-template-columns: repeat(4, 1fr); } }

/* Le foto di una stessa riga devono partire alla stessa altezza anche quando
   una didascalia va a capo (a 1000 px le colonne sono larghe 190 px e
   «Giuseppe Bicchierini» o «Assistente alla poltrona» occupano due righe):
   la didascalia si allunga fino all'altezza della riga e il testo si appoggia
   in basso, subito sopra la propria foto. */
.persona {
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.persona figcaption {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.persona__ruolo {
  margin: 0;
  font-family: Comfortaa, Lato, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acqua-scuro);
}
.persona__nome {
  margin: .15rem 0 .9rem;
  font-family: Comfortaa, Lato, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}
.persona img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
}

/* Quando le persone stanno su piu' righe, il nome si trova sospeso fra due
   ritratti: quello sopra, appena finito, e il proprio, che comincia sotto.
   Con foto alte 515 px su uno schermo da 812 lo si legge come didascalia
   della foto precedente.
   Il markup e' gia' corretto — <figcaption> viene prima di <img> — ma la
   distanza non lo diceva: 14 px dalla propria foto contro 32 dalla
   precedente. Qui il rapporto diventa 8 px contro 64, e l'appartenenza si
   vede senza doverci pensare. Vale a ogni larghezza: con otto persone anche
   a quattro colonne le righe sono due. */
.staff { row-gap: 4rem; }
.persona__nome { margin-bottom: .5rem; }

/* --------------------------------------------------------------- galleria */

.galleria {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.galleria button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
.galleria img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .25s ease, opacity .25s ease;
}
.galleria button:hover img,
.galleria button:focus-visible img { transform: scale(1.05); opacity: .85; }

/* Su schermi molto stretti 150 px non bastavano a farne stare due per riga
   (2x150 + 12 di spazio = 312 > 288 disponibili) e la griglia collassava a
   una colonna: tredici miniature da 288 px in fila. Con 130 px tornano due
   per riga. Sopra i 400 px resta tutto com'era. */
@media (max-width: 400px) {
  .galleria { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

.visore {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .9);
  border: 0;
  padding: 1rem;
}
.visore[hidden] { display: none; }
.visore img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  margin-inline: auto;
}
.visore__comando {
  position: absolute;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.visore__comando:hover { background: rgba(255, 255, 255, .3); }
.visore__chiudi { top: 1rem; right: 1rem; }
.visore__prec { left: 1rem; }
.visore__succ { right: 1rem; }

/* --------------------------------------------------------------- contatti */

.scheda-contatti {
  margin: 0;
  display: grid;
  gap: .35rem;
}
.scheda-contatti strong { font-family: Comfortaa, Lato, sans-serif; }

.mappa {
  position: relative;
  /* Nessuna proporzione fissa finche' c'e' il riquadro di consenso: sotto i
     ~360 px il testo va a capo e supera l'altezza che darebbe il 4/3, e con
     overflow:hidden il bordo inferiore del pannello bianco veniva tagliato.
     Senza aspect-ratio il contenitore cresce quanto serve.
     Nota: non basta aggiungere min-height al 4/3 — con una proporzione fissa
     il browser deduce la larghezza dall'altezza (288 x 4/3 = 384 px) e il
     riquadro sfonda lo schermo in orizzontale. */
  min-height: 18rem;
  background: #e6e6e6 url("/images/veranda-cornice.jpg") center/cover no-repeat;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* A mappa caricata torna la proporzione 4/3: qui il contenuto e' l'iframe,
   che si adatta, quindi il minimo non serve piu' e va tolto per non
   reintrodurre il gonfiaggio della larghezza. La classe la mette site.js. */
.mappa--caricata { aspect-ratio: 4 / 3; min-height: 0; }
.mappa iframe { width: 100%; height: 100%; border: 0; }
.mappa__consenso {
  max-width: 32ch;
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  background: rgba(255, 255, 255, .93);
  border-radius: 6px;
}
.mappa__consenso p { margin: 0 0 .9rem; font-size: .95rem; }
/* Via d'uscita per chi non vuole caricare l'iframe di Google: apre comunque
   la scheda del luogo in una pagina sua. */
.mappa__alternativa { margin: .9rem 0 0; font-size: .85rem; }

/* --------------------------------------------------------------- modulo */

.modulo { display: grid; gap: 1rem; max-width: 40rem; }
.modulo label { font-weight: 700; font-size: .95rem; }
.modulo input,
.modulo textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
}
.modulo input:focus,
.modulo textarea:focus {
  outline: 2px solid var(--acqua-scuro);
  outline-offset: 1px;
  border-color: var(--acqua-scuro);
}
.modulo textarea { min-height: 9rem; resize: vertical; }
.campo-nascosto {
  position: absolute;
  left: -9999px;
}
.esito {
  padding: .9rem 1.1rem;
  border-radius: 4px;
  border-left: 4px solid var(--acqua-scuro);
  background: #e8f7f6;
}
.esito--errore { border-left-color: #c0392b; background: #fdecea; }

/* ------------------------------------------------- pagine di solo testo */

/* Senza questo limite le righe dell'informativa arriverebbero a 1150 px:
   oltre un centinaio di caratteri, l'occhio perde il capo della riga dopo. */
.testo { max-width: 72ch; }
.testo h2 { margin-top: 2.5rem; }
.testo h3 { margin-top: 1.75rem; margin-bottom: .35rem; }
.testo ul { padding-left: 1.2rem; }
.testo li { margin-bottom: .5rem; }
.testo .scheda-contatti { margin: 1rem 0; }
.testo__data { color: #5d6b6f; font-size: .9rem; margin-top: -.5rem; }

/* --------------------------------------------------------------- piè */

.pie {
  background: var(--scuro);
  color: #ececec;
  padding-block: clamp(2rem, 6vw, 3rem);
}
.pie a { color: var(--acqua); }
.pie__griglia {
  display: grid;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 760px) {
  .pie__griglia { grid-template-columns: 1fr 1fr; text-align: left; }
  .pie__griglia > :last-child { text-align: right; }
}
.pie p { margin: 0 0 .2rem; }

/* Numero, e-mail e informativa erano alti 21 px con 3 px di distacco: sotto
   i 24 px minimi (WCAG 2.2 SC 2.5.8) e scomodi da centrare col pollice.
   Vale sia sotto i 760 px sia su qualunque dispositivo a puntatore grosso,
   perche' anche un tablet da 768 px si usa con le dita.
   Restano fuori i collegamenti dentro una frase, che la norma esclude. */
@media (max-width: 759px), (pointer: coarse) {
  .pie__griglia a,
  .scheda-contatti a { display: inline-block; padding-block: .3rem; }
  .mappa__alternativa a { display: inline-block; padding-block: .35rem; }
}
.pie__nota { margin-top: 1.5rem; font-size: .85rem; color: #b8b8b8; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 759px) {
  /* Il pulsante compare solo dopo che site.js gli ha tolto [hidden]:
     senza JS non resta a schermo un comando che non fa niente. */
  .menu__pulsante:not([hidden]) { display: block; }

  .menu__lista {
    flex-direction: column;
    gap: 0;
  }

  /* Allo stesso modo la lista si richiude solo se esiste il pulsante per
     riaprirla. Senza JS resta aperta e le quattro voci sono raggiungibili
     (prima il pulsante c'era ma era inerte e la lista restava chiusa:
     su telefono, a JS disattivato, non si navigava affatto). */
  .menu:has(.menu__pulsante:not([hidden])) .menu__lista { display: none; }
  .menu:has(.menu__pulsante:not([hidden])) .menu__lista.is-aperto { display: flex; }

  .menu__lista li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .menu__lista a { text-align: center; border-bottom: 0; }

  .visore__comando { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
}

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

/* --------------------------------------------------------------- stampa
   Chi stampa questo sito lo fa per portarsi via indirizzo, telefono e orari.
   Quindi: via gli sfondi, che su carta sono solo inchiostro; via menu, fascia
   e pulsanti, che su carta non si premono; e resta il pie' di pagina, che e'
   dove stanno i recapiti. */

@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .menu,
  .striscia,
  .salta-al-contenuto,
  .visore,
  .mappa,
  .bottone,
  .galleria,
  .modulo { display: none; }

  /* il modulo su carta non si compila: via anche il titolo che lo annuncia
     e il testo sul consenso, che senza modulo non vogliono dire niente */
  .sezione:has(.modulo) { display: none; }

  .testata { border-bottom: 1px solid #999; }
  .testata::after { display: none; }
  .testata__marchio { padding: 0 0 .5rem; }
  .testata__titolo { transform: none; font-size: 1.4rem; }

  .sezione { padding-block: .8rem; }
  .pie { padding-block: .8rem; border-top: 1px solid #999; }
  .pie a, .pie__nota { text-decoration: none; }

  /* i pallini dell'elenco servizi sono fondi colorati: azzerando gli sfondi
     sparirebbero, quindi qui tornano neri */
  .elenco-servizi li::before { background: #000 !important; }

  /* un indirizzo web su carta non si puo' premere: si scrive per esteso */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }

  img { max-width: 45mm; }
  .persona, .orari div { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  @page { margin: 15mm; }
}