/* Studio Moriani Bordin - stile del sito.
   Misure, colori e caratteri riprendono quelli del sito originale. */

:root {
  --blu: #004aac;
  --testo: #454545;
  --testo-chiaro: #656565;
  --titoli: #232323;
  --fondo-scuro: #171717;
  --poppins: "Poppins", sans-serif;
  --roboto: "Roboto", sans-serif;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--testo);
  font: 400 16px/1.7 var(--roboto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--blu); text-decoration: none; transition: color .4s, background-color .4s; }
p { margin: 0 0 16px; }
ul { margin: 0 0 16px; padding-left: 40px; }
h1, h2, h3 { margin: 0; }
button, input, textarea { font: inherit; }

svg[hidden] { display: none; }
.icona { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }
.giustificato { text-align: justify; }

.visibile-solo-lettori {
  position: absolute; left: -9999px; top: 0; z-index: 10001;
  padding: 10px 16px; background: #fff; color: var(--blu);
}
.visibile-solo-lettori:focus { left: 16px; top: 16px; }

/* --- Griglia ------------------------------------------------------------- */

.contenitore { width: 100%; margin: 0 auto; padding: 0 15px; }
@media (min-width: 576px) { .contenitore { max-width: 540px; } }
@media (min-width: 768px) { .contenitore { max-width: 720px; } }
@media (min-width: 992px) { .contenitore { max-width: 960px; } }
@media (min-width: 1200px) { .contenitore { max-width: 1140px; } }

.riga { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.col { width: 100%; padding: 0 15px; }
@media (min-width: 768px) {
  .col-3 { width: 25%; }
  .col-4 { width: 33.3333%; }
  .col-5 { width: 41.6667%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.3333%; }
  .col-9 { width: 75%; }
}
@media (max-width: 767.98px) {
  .col:empty { display: none; }
  .riga > .col + .col { margin-top: 30px; }
}

/* --- Barra contatti e testata --------------------------------------------- */

.barra-contatti { background: var(--blu); color: #fff; padding: 10px 0; font-size: 14px; }
.barra-contatti__lista { list-style: none; margin: 0 auto; line-height: 25px; }
.barra-contatti__lista li { display: inline-block; margin-right: 20px; font-size: 14.4px; white-space: nowrap; }
.barra-contatti__lista li:last-child { margin-right: 0; }
.barra-contatti a { color: #fff; }
/* Come nell'originale, su schermi larghi la barra parte dal bordo del contenitore, senza rientro */
@media (min-width: 576px) { .barra-contatti__lista { padding: 0; } }

.testata { position: sticky; top: 0; z-index: 100; height: 90px; background: #fff; color: var(--titoli); transition: border-color .5s; border-bottom: 1px solid transparent; }
.testata--fissa { border-bottom-color: #e0e0e0; }
.testata__barra { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.testata__logo { display: block; flex: 0 1 auto; max-width: calc(50% - 15px); }
.testata__logo img { width: auto; max-height: 74px; }

.menu-pulsante {
  display: flex; align-items: center; height: 89px; padding: 0; border: 0;
  background: none; color: var(--titoli); font-size: 20px; cursor: pointer;
}
.menu__lista { list-style: none; margin: 0; padding: 0; }

@media (min-width: 992px) {
  .testata__logo { max-width: none; margin-left: -12px; }
  .testata__logo img { height: 74px; max-height: none; }
  .menu-pulsante, .menu__chiudi { display: none; }
  .menu__lista { display: flex; margin-right: -31px; }
  .menu__lista li + li { margin-left: -17px; }
  .menu__link {
    position: relative; display: block; height: 89px; padding: 0 15px;
    color: var(--titoli); font: 500 14px/90px var(--poppins); text-transform: uppercase;
  }
  .menu__link::before {
    content: ""; position: absolute; left: 15px; bottom: 14px; width: 20px; height: 2px;
    background: var(--blu); opacity: 0; transition: all .5s ease;
  }
  .menu__link:hover, .menu__link[aria-current="page"] { color: var(--blu); }
  .menu__link[aria-current="page"]::before { opacity: 1; }
  .menu__link:hover::before { opacity: 1; width: 40px; }
}

/* Menu laterale su tablet e smartphone */
@media (max-width: 991.98px) {
  .menu {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 10000;
    width: 300px; max-width: 85%; padding: 30px; overflow-y: auto;
    background: #fff; transform: translateX(100%); visibility: hidden;
    transition: transform .4s ease, visibility .4s;
  }
  .menu--aperto { transform: none; visibility: visible; }
  .menu__link { display: block; padding: 2px 0; color: #252525; font-size: 16px; line-height: 27.2px; }
  .menu__link[aria-current="page"] { color: var(--blu); }
  .menu__chiudi {
    position: absolute; top: 15px; right: 15px; display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: #252525; color: #fff; font-size: 13px; cursor: pointer;
  }
  .velo-menu { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .5); }
}

/* --- Testata con foto (1280 x 520, tutto in proporzione) ------------------ */

.testata-foto {
  position: relative; overflow: hidden; aspect-ratio: 1280 / 520;
  container-type: inline-size; background: #222;
}
.testata-foto__sfondo {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; animation: avvicina 4.5s linear both;
}
.testata-foto::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .67); }
.testata-foto__testi { position: absolute; inset: 0; z-index: 1; color: #fff; font-family: Helvetica, Arial, sans-serif; }
.testata-foto__titolo, .testata-foto__sottotitolo {
  position: absolute; left: 8.594%; margin: 0; white-space: nowrap;
  animation: svela 1s cubic-bezier(.86, 0, .07, 1) both;
}
.testata-foto__titolo { top: 30.577%; font-size: 3.75cqw; font-weight: 700; line-height: 1.2083; }
.testata-foto__sottotitolo {
  top: calc(var(--alto, 283) / 520 * 100%); font-size: max(1.40625cqw, 10px); line-height: 1.6667;
}
@media (max-width: 767.98px) { .testata-foto__sottotitolo { white-space: normal; right: 8.594%; } }

@keyframes avvicina { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes svela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* --- Sezioni ------------------------------------------------------------- */

main { overflow-x: clip; }
.sezione--50 { padding: 50px 0; }
.sezione--100 { padding: 100px 0; }
.sezione--fine { padding: 0 0 100px; }
.sezione--studio { margin: 50px 0; padding-bottom: 100px; }
.sezione--dopo-fascia { padding: 30px 0 130px; }
.sezione--contatti { padding: 150px 0 100px; }

/* Titolo con la lineetta blu sotto */
.titolo-sezione { margin: 0 0 8px; color: var(--titoli); font: 600 32px/43px var(--poppins); }
.titolo-sezione::after {
  content: ""; display: block; width: 87px; height: 20px; margin: 10px 0;
  background: url(../../images/separatore.png) no-repeat 50% 50%;
}
.titolo-centrato { margin: 0 0 50px; color: var(--testo); font: 500 36px/36px var(--poppins); text-align: center; }

/* Testo accanto alle foto */
.testo { color: var(--testo-chiaro); line-height: 27px; }
.testo li { padding-left: 12px; }
.testo > p:last-child { margin-bottom: 0; }
.foto { width: 100%; }

/* Riquadro bianco con icona */
.riquadro {
  display: flex; gap: 15px; padding: 35px; background: #fff;
  border: 1px solid #f0f0f0; box-shadow: 0 0 25px rgba(119, 119, 119, .09);
}
.riquadro__icona { flex: none; width: 45px; height: 45px; margin-top: 1px; color: var(--blu); fill: currentColor; }
.riquadro__corpo { flex: 1; min-width: 0; }
.riquadro__corpo p { margin: 0; }
.riquadro__titolo { margin: 0 0 5px; color: var(--blu); font: 600 16px/22px var(--poppins); text-transform: uppercase; }
.elenco-riquadri > .riquadro + .riquadro { margin-top: 30px; }

/* Foto con didascalia blu (home) */
.schede { padding: 50px 0; }
.scheda { display: block; color: #fff; }
.scheda img { width: 100%; }
.scheda__didascalia { display: block; padding: 10px 15px; background: var(--blu); color: #fff; }

/* Professionisti e collaboratori */
.persona h3 { margin: 0 0 8px; color: var(--testo); font: 500 20px/24px var(--roboto); }
.persona { padding-bottom: 30px; }
.persona p { margin: 0; text-align: justify; }

/* Fascia scura con foto di sfondo */
.fascia {
  position: relative; padding: 100px 0; color: #fff; text-align: center;
  background-color: #292929; background-repeat: no-repeat; background-position: 0 0;
  background-size: cover; background-attachment: fixed;
}
.fascia::before { content: ""; position: absolute; inset: 0; background: rgba(41, 41, 41, .89); }
.fascia__testo { position: relative; margin-bottom: 30px; }
.fascia h2 { margin: 0 0 8px; font: 600 17px/29px var(--poppins); text-transform: uppercase; }
.fascia p { margin: 0; font: 700 36px/48px var(--roboto); }

/* --- Contatti ------------------------------------------------------------ */

.mappa { padding: 20px; border: 1px solid #f0f0f0; }
.mappa iframe { display: block; width: 100%; height: 400px; border: 0; }

.modulo { position: relative; }
.modulo__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; }
@media (max-width: 575.98px) { .modulo__campi { grid-template-columns: 1fr; } }
.modulo__campo {
  display: block; width: 100%; height: 55px; padding: 10px 20px;
  border: 1px solid #eee; border-radius: 0; background: #fff;
  color: #495057; font-weight: 500; line-height: 20px;
}
.modulo__campo::placeholder { color: #6c757d; opacity: 1; }
.modulo__campo:focus { outline: 0; border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }
textarea.modulo__campo { height: 122px; resize: vertical; }
.modulo__campo--intero { grid-column: 1 / -1; }
.modulo__esca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.modulo__esito { margin-top: 10px; }
.modulo__esito--ok { color: #28a745; }
.modulo__esito--errore { color: #dc3545; }

.pulsante {
  display: inline-block; margin-top: 20px; padding: 14px 36px;
  border: 1px solid transparent; border-radius: 0; background: var(--blu); color: #fff;
  font: 600 14px/17.5px var(--poppins); text-transform: uppercase; cursor: pointer;
  transition: color .4s, background-color .4s;
}
.pulsante:hover, .pulsante:focus { background: #c9c9c9; color: var(--blu); }
.pulsante:disabled { opacity: .65; cursor: default; }

/* --- Piede --------------------------------------------------------------- */

.fondo { padding: 50px 0 107px; background: var(--fondo-scuro); color: #fff; font-size: 14px; line-height: 22.4px; }
.fondo__colonna {
  margin-left: -1px; padding: 25px 15px 30px;
  border-left: 1px solid rgba(255, 255, 255, .1); border-right: 1px solid rgba(255, 255, 255, .1);
}
.fondo__colonna p { margin: 0 0 30px; }
.fondo__logo { margin: 0 auto 30px; }
.fondo a { color: #a2a2a2; }
.fondo a:hover { color: #fff; }
@media (max-width: 767.98px) { .fondo .riga > .col + .col { margin-top: 0; } }

.torna-su {
  position: fixed; right: 30px; bottom: 30px; z-index: 1000;
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 3px; background: #333; color: #fff; font-size: 16px;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s, background-color .4s;
}
.torna-su:hover, .torna-su:focus { background: #444; color: #fff; }
.torna-su--visibile { opacity: 1; visibility: visible; }

/* --- Comparsa delle sezioni allo scorrimento ------------------------------ */

[data-effetto="dissolvi"] { --effetto: dissolvi; --durata: .5s; }
[data-effetto="ingrandisci"] { --effetto: ingrandisci; --durata: .9s; }
[data-effetto="da-destra"] { --effetto: da-destra; --durata: .9s; }
[data-effetto="da-sinistra"] { --effetto: da-sinistra; --durata: .9s; }
.js .appare { opacity: 0; }
.js .appare--visibile { opacity: 1; animation: var(--effetto) var(--durata) both; }

@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
@keyframes ingrandisci { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes da-destra { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes da-sinistra { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .appare { opacity: 1; }
}