/* =====================================================================
   Farmacia Pressacco - foglio di stile del sito
   Struttura di ogni pagina:
     header.intestazione  -> logo e immagine della frutta
     nav.barra            -> menu principale (con sottomenu Servizi)
     main.contenuto       -> riquadro bianco con il contenuto della pagina
     footer.piede         -> dati della farmacia
   ===================================================================== */

/* ---------- Colori e caratteri (modificare qui per cambiarli ovunque) ---------- */
:root {
  --verde-scuro: #51811d;   /* nome della farmacia */
  --verde: #82d02f;         /* link, "Flaibano" */
  --verde-hover: #5eb210;   /* link al passaggio del mouse */
  --verde-sfondo: #f3fbe9;  /* sfondo dei riquadri evidenziati */
  --grigio-titoli: #67836a; /* titoli delle pagine */
  --testo: #5f5f5f;         /* testo normale */
  --bordo: #b5c5b6;         /* bordo del riquadro bianco */
  --bordo-tabelle: #819c84;
  --larghezza: 900px;       /* larghezza massima del sito */

  --font-titoli: "Trebuchet MS", Arial, Helvetica, sans-serif;
  --font-testo: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* sfondo con le foglie: copre sempre tutta la finestra, senza ripetersi */
  background: #fff url("../images/page.jpeg") center / cover no-repeat fixed;
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 14px;
  line-height: 1.5;
}

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

a {
  color: var(--verde);
}

a:hover {
  color: var(--verde-hover);
  text-decoration: none;
}

h1,
h2 {
  font-family: var(--font-titoli);
  color: var(--grigio-titoli);
  line-height: 1.2;
}

h1 {
  font-size: 24px;
  margin: 0 0 15px;
}

h2 {
  font-size: 20px;
  margin: 25px 0 10px;
}

p {
  margin: 10px 0;
}

/* ---------- Intestazione ---------- */
.intestazione {
  margin-top: 7px;
  background: url("../images/header.png") center top no-repeat;
}

.intestazione-interno {
  max-width: var(--larghezza);
  height: 200px;
  margin: 0 auto;
  padding: 42px 0 0 12px;
  /* la frutta a destra, ridotta a 240 px di altezza */
  background: url("../images/object0.png") right -3px / auto 240px no-repeat;
}

.logo {
  display: inline-block;
  font-family: var(--font-titoli);
  text-decoration: none;
  line-height: 1;
}

.logo-nome {
  display: block;
  font-size: 48px;
  font-weight: bold;
  color: var(--verde-scuro);
  text-shadow: 2px 2px 1px rgba(23, 23, 23, 0.3);
}

.logo-paese {
  display: block;
  margin: 8px 0 0 12px;
  font-size: 38px;
  color: var(--verde);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}

/* ---------- Menu (barra di navigazione) ---------- */
/* la barra resta in alto mentre si scorre; il fondo bianco è largo
   quanto il riquadro del contenuto, così ai lati si vede lo sfondo */
.barra {
  position: sticky;
  top: 0;
  z-index: 100;
}

.barra-interno {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

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

/* voci principali */
.barra-voci {
  display: flex;
  flex-wrap: wrap;
}

.barra-voci li {
  position: relative;
}

.barra-voci a {
  display: block;
  padding: 12px 12px 9px;
  border-bottom: 3px solid transparent;
  color: #333;
  font-size: 14px;
  text-decoration: none;
}

.barra-voci a:hover {
  color: var(--verde-scuro);
  border-bottom-color: #c8eaa4;
}

/* pagina aperta: sottolineatura verde (anche "Servizi" nelle sue sottopagine) */
.barra-voci a[aria-current="page"],
.barra-voci li:has(ul [aria-current="page"]) > a {
  color: var(--verde-scuro);
  font-weight: bold;
  border-bottom-color: var(--verde);
}

/* freccetta accanto a "Servizi" */
.barra-sotto > a::after {
  content: " ▾";
  font-size: 11px;
}

/* sottomenu: bianco con ombra, compare al passaggio del mouse o col tasto Tab */
.barra-sotto ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.barra-sotto:hover > ul,
.barra-sotto:focus-within > ul {
  display: block;
}

.barra-sotto ul a {
  padding: 8px 15px;
  border-bottom: 0;
  font-weight: normal;
}

.barra-sotto ul a:hover,
.barra-sotto ul a[aria-current="page"] {
  border-bottom: 0;
  background: var(--verde-sfondo);
}

/* telefono a destra */
.barra-telefono {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--verde-sfondo);
  color: var(--verde-scuro);
  font-weight: bold;
  white-space: nowrap;
  text-decoration: none;
}

.barra-telefono:hover {
  background: #e2f5cc;
  color: var(--verde-scuro);
}

/* pulsante "Menu": serve solo sui telefoni */
.barra-apri {
  display: none;
}

/* Menu sui telefoni: elenco richiudibile */
@media (max-width: 700px) {
  .barra-interno {
    flex-wrap: wrap;
    padding: 6px 10px;
  }

  .barra-apri {
    display: block;
    padding: 6px 12px;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-weight: bold;
    color: #333;
    cursor: pointer;
  }

  /* l'elenco è nascosto finché non si preme "Menu" (vedi js/menu.js) */
  .barra-voci {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    margin-top: 6px;
  }

  .barra.aperto .barra-voci {
    display: flex;
  }

  .barra-voci a {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
  }

  .barra-voci a[aria-current="page"],
  .barra-voci li:has(ul [aria-current="page"]) > a {
    border-bottom-color: #eee;
    border-left: 4px solid var(--verde);
    padding-left: 10px;
  }

  /* su telefono le voci di Servizi sono sempre visibili, rientrate */
  .barra-sotto > a::after {
    content: "";
  }

  .barra-sotto ul {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .barra-sotto ul a {
    padding-left: 25px;
  }
}

/* ---------- Riquadro del contenuto ---------- */
.contenuto {
  max-width: var(--larghezza);
  margin: 15px auto 0;
  padding: 15px 20px 25px;
  background: #fff;
  border: 1px solid var(--bordo);
}

/* tabelle (orari, turni) */
.contenuto table {
  border-collapse: collapse;
}

.contenuto th,
.contenuto td {
  border: 1px solid var(--bordo-tabelle);
  padding: 4px 10px;
  text-align: left;
  vertical-align: top;
}

.contenuto th {
  font-weight: normal;
}

/* utilità */
.centrato {
  text-align: center;
}

/* foto affiancata a un testo (Chi siamo, Contatti); su telefono vanno uno sotto l'altro */
.affiancati {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  margin-bottom: 25px;
}

.affiancati img {
  flex: 0 1 420px;
  min-width: 0; /* permette alla foto di restringersi sotto la sua larghezza naturale */
}

.affiancati > div {
  flex: 1 1 300px;
}

/* riquadro bianco con bordo verde in alto (es. orari nella home) */
.riquadro {
  padding: 15px 20px;
  border: 1px solid var(--bordo);
  border-top: 4px solid var(--verde);
  border-radius: 6px;
}

/* piccola scritta verde sopra un testo (es. "Dove siamo") */
.occhiello {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 13px;
  font-weight: bold;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* riquadro evidenziato (es. "Suona il campanello...") */
.avviso {
  padding: 12px 15px;
  background: var(--verde-sfondo);
  border-left: 5px solid var(--verde);
  border-radius: 6px;
  font-size: 16px;
}

/* ---------- Home: slideshow ---------- */
.slideshow {
  position: relative;
  margin-bottom: 20px;
}

.slideshow-finestra {
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.7s ease;
}

.slide {
  flex: 0 0 100%;
  display: flex;
  background: var(--verde-sfondo);
  border-radius: 6px;
  overflow: hidden;
}

.slide img {
  display: block;
  width: 45%;
  object-fit: cover;
  background: #fff;
}

/* testo centrato in verticale accanto alla foto */
.slide-testo {
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 25px 30px;
}

.slide h2 {
  margin: 0 0 15px;
  font-size: 30px;
  font-weight: normal;
  color: var(--verde-scuro);
}

.slide p {
  margin: 0 0 10px;
  color: var(--testo);
  font-size: 16px;
}

/* frecce dentro lo slideshow, in cerchi bianchi */
.slide-prec,
.slide-succ {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  font-size: 18px;
  line-height: 1;
  color: var(--verde-scuro);
  cursor: pointer;
}

.slide-prec:hover,
.slide-succ:hover {
  background: #fff;
}

.slide-prec {
  left: 10px;
}

.slide-succ {
  right: 10px;
}

/* pulsante "Scopri..." dentro le slide */
.slide-link {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 6px;
  background: linear-gradient(#80cc2e, #5b9121);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.slide-link:hover {
  background: var(--verde-scuro);
  color: #fff;
}

/* ---------- Home: riquadri "Orario" e "Dove siamo" ---------- */
.home-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* i due riquadri hanno la stessa altezza e i pulsanti stanno sempre
   in fondo, allineati fra loro */
.info {
  display: flex;
  flex-direction: column;
}

.info h2 {
  margin: 0 0 12px;
  color: var(--verde-scuro);
}

.info-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 15px;
}

.info-azioni .pulsante {
  margin-top: 0;
}

/* stessa altezza del pulsante pieno (quello chiaro ha il bordo) */
.info-azioni .pulsante-chiaro {
  padding: 6px 16px;
}

/* foto intera, senza ritagli: si ridimensiona mantenendo le proporzioni */
.info-foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.info-indirizzo {
  margin: 12px 0 0;
  font-family: var(--font-titoli);
  font-size: 18px;
  line-height: 1.35;
  color: var(--grigio-titoli);
}

/* tabella degli orari: solo righe orizzontali; si allunga fino
   all'altezza del riquadro accanto */
.info .orari {
  flex: 1 0 auto;
}

.orari {
  width: 100%;
  font-size: 15px;
  white-space: nowrap; /* "8:45 - 12:45" sempre su una riga */
}

.contenuto .orari th,
.contenuto .orari td {
  border: 0;
  border-bottom: 1px solid #e3ead9;
  padding: 6px 8px;
}

.contenuto .orari thead th {
  border-bottom: 2px solid var(--bordo);
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
}

.orari .chiuso {
  color: #a5a5a5;
}

/* giorno di oggi (la classe "oggi" la mette js/orari.js) */
.orari tr.oggi {
  background: var(--verde-sfondo);
}

.orari tr.oggi th {
  color: var(--verde-scuro);
  font-weight: bold;
  box-shadow: inset 4px 0 0 var(--verde);
}

/* logo del consorzio, discreto, in fondo alla pagina */
.consorzio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 25px 0 0;
  padding-top: 15px;
  border-top: 1px solid #e3ead9;
  font-size: 13px;
  color: #888;
}

.consorzio img {
  width: 130px;
  border-radius: 4px;
}

/* ---------- Chi siamo ---------- */
.presentazione-testo {
  font-family: var(--font-titoli);
  font-size: 19px;
  line-height: 1.4;
  color: var(--grigio-titoli);
}

/* schede delle farmaciste */
.profili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.profilo {
  padding: 20px;
  border: 1px solid var(--bordo);
  border-top: 4px solid var(--verde);
  border-radius: 6px;
}

.profilo img {
  display: block;
  margin: 0 auto 10px;
  border-radius: 50%;
}

.profilo h2 {
  margin: 0;
  text-align: center;
  color: var(--verde-scuro);
}

.ruolo {
  margin: 2px 0 10px;
  text-align: center;
  color: #888;
}

/* specialità: piccole etichette verdi */
.etichette {
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.etichette li {
  padding: 2px 10px;
  background: var(--verde-sfondo);
  border: 1px solid var(--verde);
  border-radius: 12px;
  font-size: 12px;
  color: var(--verde-scuro);
}

/* ---------- Turni ---------- */
/* elenco dei turni: un riquadro per periodo */
.turni {
  list-style: none;
  margin: 15px 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.turni li {
  padding: 10px 15px;
  border: 1px solid var(--bordo);
  border-left: 5px solid var(--verde);
  border-radius: 6px;
  font-size: 18px;
}

.turni-mese {
  display: block;
  font-family: var(--font-titoli);
  font-size: 13px;
  font-weight: bold;
  color: var(--verde-scuro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* importi del diritto di chiamata */
.tariffe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tariffe p {
  flex: 1 1 180px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  text-align: center;
}

.tariffa-importo {
  display: block;
  font-family: var(--font-titoli);
  font-size: 26px;
  font-weight: bold;
  color: var(--verde-scuro);
}

/* ---------- Contatti ---------- */
/* elenco dei recapiti: etichetta piccola sopra, dato grande sotto */
.recapiti {
  margin: 10px 0 15px;
}

.recapiti dt {
  margin-top: 12px;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recapiti dd {
  margin: 2px 0 0;
  font-family: var(--font-titoli);
  font-size: 19px;
  color: var(--grigio-titoli);
}

.recapiti a {
  color: var(--verde-scuro);
  text-decoration: none;
}

.recapiti a:hover {
  text-decoration: underline;
}

/* ---------- Pulsante (es. "Apri in Google Maps" in Contatti) ---------- */
.pulsante {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 18px;
  border-radius: 6px;
  background: linear-gradient(#80cc2e, #5b9121);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.pulsante:hover {
  background: linear-gradient(#8fd544, #6daf28);
  color: #fff;
}

/* variante chiara (pulsante secondario) */
.pulsante-chiaro,
.pulsante-chiaro:hover {
  background: #fff;
  color: var(--verde-scuro);
  border: 2px solid var(--verde);
}

/* ---------- Servizi: schede con foto ---------- */
.schede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.scheda {
  background: #fff;
  border: 1px solid var(--bordo);
  border-top: 4px solid var(--verde);
  border-radius: 6px;
  overflow: hidden;
}

.scheda img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.scheda-testo {
  padding: 5px 15px 15px;
}

.scheda h2 {
  margin: 10px 0;
  color: var(--verde-scuro);
}

.scheda ul {
  margin: 0;
  padding-left: 18px;
}

.scheda li {
  margin-bottom: 10px;
}

.scheda li::marker {
  color: var(--verde);
}

/* riquadro "Per informazioni e appuntamenti" */
.invito {
  margin-top: 25px;
  padding: 15px;
  background: var(--verde-sfondo);
  border-radius: 6px;
  text-align: center;
}

.invito p {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: bold;
}

.invito .pulsante {
  margin: 5px;
}

/* ---------- Piè di pagina ---------- */
.piede {
  max-width: var(--larghezza);
  margin: 10px auto 20px;
  color: #808080;
  font-size: 11px;
  text-align: center;
}

.piede a {
  color: var(--verde);
  text-decoration: none;
}

.piede a:hover {
  text-decoration: underline;
}

/* ---------- Telefoni ---------- */
@media (max-width: 700px) {
  /* sui telefoni lo sfondo scorre con la pagina: lo adattiamo alla larghezza */
  body {
    background-attachment: scroll;
    background-position: center top;
    background-size: 100% auto;
  }

  .intestazione-interno {
    height: auto;
    padding: 20px 10px;
    background: none;
    text-align: center;
  }

  .logo-nome {
    font-size: 36px;
  }

  .logo-paese {
    margin: 8px 0 0;
    font-size: 30px;
  }

  .contenuto {
    padding: 10px;
  }

  .slide {
    flex-direction: column;
  }

  .slide img,
  .slide-testo {
    width: 100%;
  }

  .slide-testo {
    flex: 1;
    padding: 15px 20px 20px;
  }

  .slide h2 {
    font-size: 24px;
  }

  .riquadro {
    padding: 12px;
  }

  .contenuto .orari th,
  .contenuto .orari td {
    padding: 6px 4px;
    font-size: 14px;
  }

  /* frecce a metà della foto (che qui sta sopra al testo) */
  .slide-prec,
  .slide-succ {
    top: 100px;
  }

  .consorzio {
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slides {
    transition: none;
  }
}