/* ============================================================
   SELINUNTE.NET — STILE CONDIVISO
   Usato sia dalla home (index_cc.html) sia da tutte le pagine interne.
   ============================================================ */

* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background:#ffffff;
  color:#000;
}

/* ---------- HEADER ---------- */
header.site-header {
  background:#0E3A99;
  color:#ffffff;
  text-align:center;
  padding: 18px 10px;
}
header.site-header h1 {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 1px;
}
header.site-header a { color:#ffffff; text-decoration:none; }

/* ---------- IMMAGINE CENTRALE (solo home) ---------- */
.hero-img { text-align:center; background:#ffffff; }
.hero-img img {
  width:100%;
  max-width:600px;
  height:auto;
  display:block;
  margin:0 auto;
}

/* ---------- FASCIA / TESTO SOTTO IMMAGINE (solo home) ---------- */
.sub-banner {
  background:#ffffff;
  color:#0E3A99;
  text-align:center;
  font-size: 18px;
  font-weight: bold;
  padding: 14px 10px;
}

/* ---------- BREADCRUMB (pagine interne) ---------- */
.breadcrumb {
  max-width: 990px;
  margin: 16px auto 0;
  padding: 0 16px;
  font-size: 13px;
  color:#555;
  text-align: center;
}
.breadcrumb a {
  color:#0E3A99;
  text-decoration:none;
}
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span.sep { margin:0 6px; color:#999; }
.breadcrumb span.current { color:#555; }

/* ---------- TITOLO PAGINA (pagine interne) ---------- */
.page-title {
  max-width: 990px;
  margin: 14px auto 18px;
  padding: 0 16px;
  text-align: center;
}
.page-title h1 {
  font-size: 26px;
  font-weight: bold;
  color:#0E3A99;
  letter-spacing: 0.5px;
}

/* ---------- CONTENUTO PAGINA (pagine interne) ---------- */
.page-content {
  max-width: 990px;
  margin: 0 auto 10px;
  padding: 0 16px;
}
.page-content .map-block {
  text-align:center;
  margin: 10px 0 20px;
}
.page-content .map-block .map-label {
  font-weight:bold;
  font-size:14px;
  color:#222;
  margin-bottom:8px;
  text-align:center !important;
}
.page-content .map-block .map-scroll {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.page-content .map-block img[usemap] {
  border:1px solid #e2e2e2;
  /* Dimensione fissa 750x484: le coordinate dell'image map sono in pixel
     e non si adattano al ridimensionamento CSS, quindi l'immagine NON
     deve essere rimpicciolita con max-width/height:auto. Su schermi
     piccoli scorre in orizzontale (vedi .map-scroll). */
}
.page-content .map-block .map-caption {
  font-size:12px;
  color:#777;
  margin-top:8px;
}
.page-content p {
  font-size:15px;
  line-height:1.7;
  color:#222;
  margin-bottom:14px;
  text-align:justify;
}
.page-content p a {
  color:#0E3A99;
  text-decoration:underline;
}
.page-content p a:hover { color:#cc0000; }
.page-content .pdf-link {
  display:block;
  text-align:center;
  margin: 18px 0;
  font-size:14px;
}
.page-content .pdf-link a {
  color:#0E3A99;
  text-decoration:underline;
}
.page-content .related-links {
  text-align:center;
  margin: 18px 0;
  font-size:14px;
}
.page-content .related-links a {
  color:#0E3A99;
  text-decoration:underline;
  margin: 0 8px;
  font-weight:bold;
}

/* ---------- GRIGLIA TEMPLI / SOTTO-SEZIONI (pagine interne) ---------- */
.page-content .temple-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px;
  margin: 20px 0 24px;
}
.page-content .temple-grid a {
  display:block;
  background:#f5f7fc;
  border:1px solid #d6dcef;
  color:#0E3A99;
  text-decoration:none;
  font-weight:bold;
  font-size:14px;
  padding: 10px 18px;
  border-radius:3px;
  transition: background 0.15s ease, color 0.15s ease;
}
.page-content .temple-grid a:hover {
  background:#0E3A99;
  color:#ffffff;
}

/* ---------- SFONDO DIETRO IL MENU AD ACCORDION ---------- */
.menu-wrap {
  background:#ffffff;
  padding: 18px 16px 24px;
}

/* ---------- ACCORDION (menu) ---------- */
.accordion {
  max-width: 990px;
  margin: 0 auto;
}
.acc-item { margin-bottom: 8px; }
.acc-header {
  display:flex;
  align-items:center;
  gap:8px;
  background:#0E3A99;
  color:#ffffff;
  font-weight:bold;
  font-size:15px;
  padding: 12px 16px;
  cursor:pointer;
  border: 1px solid #0E3A99;
  user-select:none;
}
.acc-header:hover { background:#0c3286; }
.acc-header .arrow {
  display:inline-block;
  transition: transform 0.18s ease;
  font-size: 11px;
  transform: rotate(-90deg);
}
.acc-item.open .acc-header .arrow { transform: rotate(0deg); }
.acc-item.open .acc-header { background:#0E3A99; }

.acc-panel {
  max-height: 0;
  overflow: hidden;
  background:#ffffff;
  border-left: 1px solid #e2e2e2;
  border-right: 1px solid #e2e2e2;
  border-bottom: 0px solid #e2e2e2;
  transition: max-height 0.25s ease;
}
.acc-item.open .acc-panel { border-bottom: 1px solid #e2e2e2; }
.acc-panel ul { list-style:none; }
.acc-panel li { border-bottom: 1px solid #e2e2e2; }
.acc-panel li:last-child { border-bottom: none; }
.acc-panel a {
  display:block;
  color:#0E3A99;
  text-decoration:none;
  font-size:15px;
  padding: 12px 16px;
}
.acc-panel a:hover { background:#f5f7fc; color:#cc0000; }

/* ---------- RICERCA (dopo il menu) ---------- */
.search-row {
  max-width: 990px;
  margin: 18px auto 0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.search-row input[type="text"] {
  padding:7px;
  width:220px;
  border:1px solid #999;
}
.search-row input[type="submit"] {
  padding:7px 16px;
  margin-left:6px;
  background:#0E3A99;
  color:#fff;
  border:none;
  cursor:pointer;
}
.search-row input[type="submit"]:hover { background:#0c3286; }

/* ---------- FOOTER ---------- */
footer.site-footer {
  background:#0E3A99;
  color:#ffffff;
  text-align:center;
  padding: 18px 10px;
  font-size: 13px;
  margin-top: 24px;
}
footer.site-footer a { color:#ffffff; text-decoration:underline; }
footer.site-footer .fb-name { margin-bottom: 6px; }
footer.site-footer .fb-link {
  margin-bottom: 6px;
  display:block;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
  header.site-header h1 { font-size:22px; }
  .sub-banner { font-size:15px; }
  .acc-header { font-size:14px; padding:10px 12px; }
  .page-title h1 { font-size:21px; }
  .page-content p { font-size:14px; text-align:left; }
}