/*
Theme Name: Sopra le Righe
Theme URI: https://sopralerigheautismo.info/
Author: VisioSpot
Description: Tema WordPress dedicato all'associazione Sopra le Righe Dentro l'Autismo, ricostruito dal sito storico.
Version: 1.0.0
Text Domain: sopralerighe
*/

:root {
  --slr-blue: #28a7e9;
  --slr-brown: #615144;
  --slr-cream: #fbf8f3;
  --slr-gold: #ba9872;
}

html { scroll-behavior: smooth; }
body {
  background: #fff;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  position: relative;
  width: 100%;
  overflow-x: hidden;
}
a { color: var(--slr-blue); }
a:hover, a:focus { color: #107db6; }
img { max-width: 100%; height: auto; }
p { line-height: 1.7; }
h1, h2, h3, h4 { font-weight: 700; }

.admin-bar .navbar-fixed-top { top: 32px; }
@media (max-width: 782px) { .admin-bar .navbar-fixed-top { top: 46px; } }

.slr-nav {
  background: #fff;
  border: 0;
  box-shadow: 0 2px 8px rgba(50,50,50,.08);
  margin: 0 !important;
  min-height: 70px;
}
.slr-brand { display: flex; align-items: center; min-height: 70px; }
.slr-brand img { max-height: 58px; width: auto; }
.slr-nav .navbar-nav > li > a {
  color: #666;
  font-size: 13px;
  font-weight: 700;
  line-height: 40px;
  min-height: 70px;
  text-transform: uppercase;
}
.slr-nav .navbar-nav > li > a:hover,
.slr-nav .navbar-nav > li > a:focus { color: var(--slr-blue); }
.slr-social-icon { max-height: 38px; width: auto; }

#home {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  margin-top: 70px;
  text-align: center;
}
.slr-overlay { background: rgba(0,0,0,.4); padding: 90px 0; }
.slr-home-logo { display: inline-block; margin-top: 20px; }
.slr-tagline { font-size: 28px; line-height: 1.35; margin: 25px auto; max-width: 780px; }
.slr-event-badge { display: inline-block; margin-top: 10px; max-width: 560px; }

.slr-section { padding: 80px 0; }
#chi-siamo { background: var(--slr-cream); }
#attivita { background: var(--slr-brown); color: #fff; }
#iniziative { background: #fff; }
.slr-section-heading { margin-bottom: 28px; }
.slr-portrait-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.slr-portrait-row img { width: 30%; min-width: 130px; max-width: 184px; }
.slr-goals, .slr-activities { padding-left: 20px; }
.slr-goals li, .slr-activities li { line-height: 1.6; margin-bottom: 12px; }
.slr-accent { color: var(--slr-gold); font-weight: 700; }

.slr-initiative { border-bottom: 1px solid #eee; padding: 0 0 55px; margin: 0 0 55px; }
.slr-initiative:last-child { border-bottom: 0; margin-bottom: 0; }
.slr-initiative h2 { margin-top: 0; text-transform: uppercase; }
.slr-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
.slr-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.slr-donation { background: #f7f7f7; border-left: 4px solid var(--slr-blue); padding: 18px; margin-top: 25px; }

#contatti {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
#contatti .slr-overlay { padding: 80px 0; }
#contatti a { color: #fff; text-decoration: underline; }
.slr-contact-item { margin: 0 0 15px; }
.slr-contact-item .fa { background: var(--slr-blue); border-radius: 50%; margin-right: 10px; padding: 12px; text-align: center; width: 40px; }
.slr-map { border: 0; max-width: 100%; min-height: 230px; width: 100%; }
.slr-contact-form { margin-top: 15px; }
.slr-contact-form .form-control { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 18px; min-height: 48px; }
.slr-contact-form textarea.form-control { min-height: 130px; }
.slr-contact-form .btn-primary { background: var(--slr-blue); border: 0; border-radius: 0; font-weight: 700; padding: 14px 35px; text-transform: uppercase; }
.slr-notice { background: rgba(255,255,255,.92); color: #222; margin-bottom: 20px; padding: 12px 16px; }
.slr-notice.success { border-left: 4px solid #2e9f52; }
.slr-notice.error { border-left: 4px solid #c0392b; }

.site-footer { background: #fff; padding: 24px 0; text-align: center; }
.site-footer p { margin: 0; }

.slr-content-wrap { margin-top: 100px; padding: 50px 0; }
.slr-content-wrap article { max-width: 850px; margin: 0 auto; }

@media (max-width: 767px) {
  .slr-nav .navbar-nav > li > a { line-height: 2em; min-height: auto; }
  .slr-section, .slr-overlay, #contatti .slr-overlay { padding: 45px 0; }
  .slr-tagline { font-size: 22px; }
  .slr-gallery { grid-template-columns: 1fr; }
  .slr-portrait-row img { width: 31%; min-width: 90px; }
}