/* CONTENITORE PLAYER */
.audio-player-wrapper {
  background-color: #cfeccf;
  border-radius: 1rem;
  padding: .75rem;
}

/* PLAYER AUDIO */
.audio-player {
  width: 100%;
  border-radius: .75rem;
}

/* WEBKIT (Chrome, Edge, Safari) */
.audio-player::-webkit-media-controls-panel {
  background-color: #dff5e1;
  border-radius: .75rem;
}

/* PLAYER HOVER */
.audio-player:hover {
  opacity: .95;
}

/* CSS PER ICONE DEL SITO */
.icon {
  display: inline-block;
  color: #ffffff;
}

.icon-18 { width: 18px; height: 18px; }
.icon-22 { width: 22px; height: 22px; }
.icon-28 { width: 28px; height: 28px; }

/* CSS PER LE CARD */
.card-green {
  background-color: #dff5e1; /* verdino chiaro soft */
}
.card-blu {
  background-color: #d3e8ec; /* verdino chiaro soft */
}
/* CSS PER BOOTSTRAP 5 */

.bg-header {
 background:#2c7a4b;
}
.btn-postazione {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-postazione strong {
  font-size: 1.1rem;
}

.btn-postazione span {
  font-size: 1rem;
}

/* desktop */
@media (min-width: 992px) {
  .btn-postazione strong {
    font-size: 0.95rem;
  }

  .btn-postazione span {
    font-size: 0.85rem;
  }
}
/* Reset minimale */
body {
  margin: 0;
  padding: 1rem;
  font-family: sans-serif;
  line-height: 1.4;
  background:#f5f2eb;
  color:#222;
}

    /* HEADER POSTAZIONI MUSEO*/
    .topbar{
      display:flex;
      align-items:center;
      gap:15px;
      padding:15px;
      background:#2c7a4b;
      color:white;
    }

    .topbar img{
      width:70px;
      height:auto;
    }

    .topbar-text{
      line-height:1.3;
    }

    .topbar-text h1{
      margin:0;
      font-size:1.1rem;
    }

    .topbar-text p{
      margin:0;
      font-size:0.9rem;
    }
    /* CONTENUTO */
    .container{
      padding:20px;
      max-width:900px;
      margin:auto;
    }

    #titolo{
      font-size:1.7rem;
      margin-bottom:10px;
      margin-top: 15px;
      text-align:center;
      color: #2c7a4b;
    }

    #sottotitolo{
      font-size:1.2rem;
      margin-bottom:25px;
      text-align:center;
      color: #d27c30 !important;
    }

    #testo{
      line-height:1.7;
      font-size:1.05rem;
      margin-bottom:30px;
      text-align:justify;
    }

    /* AUDIO */
    .audio-wrap{
      text-align:center;
      margin-bottom:30px;
    }

    audio{
      width:100%;
      max-width:500px;
      border-radius:12px;
    }

    /* VIDEO */
    video{
      width:100%;
      border-radius:12px;
      margin-bottom:30px;
    }

    /* IMMAGINI */
    #immagini{
      display:flex;
      flex-wrap:wrap;
      gap:15px;
      justify-content:center;
      margin-bottom:30px;
    }

    #immagini img{
      width:100%;
      max-width:300px;
      border-radius:12px;
      box-shadow:0 2px 8px rgba(0,0,0,0.2);
    }

h1 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-align: center;
}

h2 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  text-align: center;
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

progress {
  width: 100%;
  height: 20px;
  margin-bottom: 1rem;
  -webkit-appearance: none;
}

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #007bff;
  border-radius: 10px;
}
img, video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0;
  border-radius: 6px;
}
#postazioni {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}

/* IMPOSTAZIONI TIPOGRAFIA */

.paragrafo-standard {
 font-size:16px;
    line-height: 1.6;
    width: 90%;
    max-width: 700px;
    margin: 0 auto 20px auto;
    text-align: justify;
}
/* definisce lo stile dei pulsanti delle pagine */
.pulsante-std {
padding:12px 25px;
font-size:16px;
border-radius:8px;
border:none;
background:#2c7a4b;
color:white;
cursor:pointer;
margin:5px;
}
.pulsante-std :hover {
  background-color: #0056b3;
}
.footer {
    width:100%;
    text-align:center;
    padding:15px 10px;
    font-size:14px;
    color:#fff;
    margin-top:30px;
    box-sizing:border-box;
 background: #2c7a4b;
}

/* NAVIGAZIONE POSTAZIONI */
.nav-postazioni{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:50px;
  padding:20px;
}

.pulsante-postazione{
  background:#7b4b2a;
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
  transition:0.2s;
}

.pulsante-postazione:hover{
  background:#5f3920;
  transform:translateY(-2px);
}

:root {

  /* colore principale */
  --plyr-color-main: #3b7d4f; /* variabile del css */

}