:root{
  --blue:#003a8c;
  --blue-2:#0b3f96;
  --green:green;
  --gray:#f3f3f3;
  --line:#d5d5d5;
  --red:#9b0000;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding:0;
  background:var(--gray);
  color:#000;
  font-family:Arial, sans-serif;
  text-align:center;
}

.header{
  background:#fff;
  padding:35px 20px;
}

.logo{
  width:90%;
  max-width:900px;
  height:auto;
  display:block;
  margin:0 auto;
}

.button-menu{
  width:90%;
  max-width:1100px;
  margin:40px auto;
}

details{
  width:90%;
  max-width:900px;
  margin:0 auto 15px auto;
}

summary{
  width:100%;
  display:block;
  padding:18px;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-size:clamp(18px, 3vw, 24px);
  font-weight:700;
  line-height:1.15;
  list-style:none;
  cursor:pointer;
  user-select:none;
  transition:background .25s ease;
  overflow-wrap:break-word;
}

summary:hover{
  background:var(--green);
}

summary::-webkit-details-marker{
  display:none;
}

details[open] summary{
  border-radius:12px 12px 0 0;
}

.dropdown-content{
  padding:30px;
  background:#fff;
  border:2px solid var(--blue);
  border-top:none;
  border-radius:0 0 12px 12px;
  font-size:20px;
  line-height:1.7;
  text-align:center;
}

.dropdown-content p,
.dropdown-content ul,
.dropdown-content ol,
.dropdown-content li{
  text-align:left;
}

.dropdown-content p{
  margin:0 auto 20px auto;
  max-width:900px;
}

.dropdown-content h2,
.dropdown-content h3{
  color:var(--blue);
  text-align:center;
  line-height:1.2;
}

.dropdown-content h2{
  font-size:28px;
  margin:25px 0 15px 0;
}

.dropdown-content h3{
  font-size:28px;
  margin:30px 0 15px 0;
}

.dropdown-content ul,
.dropdown-content ol{
  max-width:900px;
  margin:15px auto 20px auto;
  padding-left:35px;
}

.dropdown-content li{
  margin-bottom:10px;
}

.dropdown-content a,
.join-section a{
  color:var(--blue);
  font-weight:700;
  text-decoration:none;
  overflow-wrap:anywhere;
}

.dropdown-content a:hover,
.join-section a:hover{
  color:var(--green);
}

hr{
  width:75%;
  margin:30px auto 25px auto;
  border:0;
  border-top:2px solid var(--line);
}

button,
.button-link{
  display:inline-block;
  min-width:220px;
  padding:15px 25px;
  border:0;
  border-radius:12px;
  background:var(--blue);
  color:#fff !important;
  font-size:18px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s ease;
}

button:hover,
.button-link:hover{
  background:var(--green);
}

.wide-image,
.vote-image,
.landing-image,
.qr{
  display:block;
  height:auto;
  margin:25px auto;
}

.wide-image{
  width:100%;
  max-width:1000px;
  border-radius:15px;
}

.vote-image{
  width:90%;
  max-width:900px;
  border-radius:15px;
  object-fit:contain;
}

.landing-image{
  width:95%;
  max-width:900px;
}

.edge-image{
  width:calc(100% + 60px);
  max-width:none;
  margin-left:-30px;
  margin-right:-30px;
  border-radius:0;
}

.qr{
  width:220px;
  max-width:80%;
}

.small-qr{
  width:180px;
}

.max-700{max-width:700px;}
.max-840{max-width:840px;}
.max-850{max-width:850px;}
.max-900{max-width:900px;}
.max-950{max-width:950px;}
.max-1050{max-width:1050px;}

.sa-landing{
  width:calc(100% + 60px);
  max-width:none;
  margin-left:-30px;
  margin-right:-30px;
  margin-top:-30px;
}


.voting-banner{
  width:calc(100% + 60px);
  max-width:none;
  margin-left:-30px;
  margin-right:-30px;
}

.feedback-landing{
  width:calc(100% + 60px);
  max-width:none;
  margin-left:-30px;
  margin-right:-30px;
  margin-top:-30px;
}

.feedback-box{
  background:#f3f8ff;
  border-color:var(--blue);
  border-left-color:var(--green);
}

.feedback-box h3{
  color:var(--blue);
  font-size:clamp(30px,5vw,42px);
}

.hero-semi{
  width:100%;
  text-align:center;
  margin:28px auto 32px auto;
}

.hero-semi-image{
  width:78%;
  max-width:1400px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:18px;
}

.hero-contained{
  width:58vw !important;
  max-width:900px !important;
  min-width:340px;
}

.hero-safety{
  width:100%;
  text-align:center;
  margin:18px auto 28px auto;
}

.hero-safety-image{
  width:65vw;
  max-width:900px;
  min-width:340px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:22px;
}

.hero-vote{
  width:100%;
  text-align:center;
  margin:18px auto 24px auto;
}

.hero-vote-image{
  width:60vw;
  max-width:900x;
  min-width:340px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:18px;
}

.monday-flyer{
  width:78%;
  max-width:900px;
  margin:25px auto 35px auto;
  text-align:center;
}

.monday-flyer-image{
  display:block;
  width:100%;
  max-width:1100px;
  height:auto;
  margin:0 auto 35px auto;
  border-radius:12px;
}

.question-image{
  max-width:900px;
  margin-bottom:60px;
}

.candidate-image{
  margin-top:20px;
}

.flyer-bottom{
  width:95%;
  margin-left:auto;
  margin-right:auto;
}

.monday-signup-link{
  display:block;
  width:max-content;
  max-width:100%;

  margin-left:auto;
  margin-right:auto;

  padding:16px 28px;
  background:#003a8c;
  color:#fff !important;
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  border-radius:12px;
}

.monday-signup-link:hover{
  background:green;
}

.monday-location-link{
  margin-top:12px;
  margin-bottom:12px;
}

.cant-attend-box{
  width:100%;
  max-width:900px;
  margin:25px auto 35px auto;
  padding:24px 28px;

  background:#eef7ff;
  border:2px solid var(--blue);
  border-left:8px solid var(--green);
  border-radius:15px;

  box-sizing:border-box;
}
.cant-attend-box h3{
  color:var(--blue);
  margin:0 0 12px 0;
  font-size:30px;
}

.cant-attend-box p{
  margin:0 0 18px 0;
  font-size:20px;
  line-height:1.6;
}

.city-contact-links a{
  display:block;
  margin:10px 0;
  color:var(--blue);
  font-size:20px;
  font-weight:700;
  text-decoration:none;
}

.city-contact-links a:hover{
  color:var(--green);
}

.text-block{
  max-width:900px;
  margin:0 auto;
}

.large-text{
  font-size:20px;
  line-height:1.65;
}

.compact-list{
  display:inline-block;
  max-width:650px;
}

.request-box{
  width:100%;
  max-width:1150px;

  margin:25px auto;
  padding:28px 40px;

  background:#eef7ff;
  border:2px solid var(--blue);
  border-left:8px solid var(--green);
  border-radius:15px;

  box-sizing:border-box;
}

.homepage-vote-box{
  max-width:900px;
}

.request-box h3{
  margin-top:0;
}

.request-box p{
  font-size:22px;
}

.petition-box{
  max-width:760px;
  padding:25px 20px;
}

.petition-box h3{
  color:var(--blue-2);
  font-size:32px;
}

.petition-points{
  display:inline-block;
  color:var(--red);
  font-size:22px;
  font-weight:700;
  line-height:1.8;
  text-align:left;
  margin:0 auto 20px auto;
}

.contact-lines p{
  margin-bottom:8px;
}

.assessment-facts p{
  font-size:23px;
  line-height:1.7;
}

.audit-box{
  background:#fff6dd;
  border-color:#d89a00;
  border-left-color:#d89a00;
}

.audit-box h3{
  font-size:clamp(30px, 5vw, 42px);
  color:var(--blue);
}

.soft-emphasis{
  font-size:90%;
  font-weight:600;
  color:#444;
}
.assessment-detail{
  font-size:24px;
  line-height:1.6;
}

.license-note{
  text-align:center !important;
  font-size:22px;
  font-weight:700;
  margin:0 auto 22px auto;
}

.source-note{
  color:#444;
  font-size:24px;
  line-height:1.7;
}

.info-card{
  max-width:850px;
  margin:18px auto 25px auto;
  padding:14px 18px;
  background:#f3f8ff;
  border-left:6px solid var(--blue-2);
  border-radius:10px;
  font-size:20px;
  line-height:1.5;
  text-align:left;
}

.card-list{
  width:85%;
  max-width:700px;
  padding:22px 28px !important;
  background:#fff;
  border-radius:14px;
  font-size:18px;
  line-height:1.8;
}

.check-list{
  display:inline-block;
  max-width:760px;
  padding-left:0 !important;
  list-style:none;
  font-size:22px;
  line-height:1.45;
  font-weight:400;
}

.check-list li{
  margin-bottom:12px;
}

.timeline-list{
  max-width:700px;
  margin:20px auto;
  text-align:left;
  line-height:1.8;
}
.roundabout-summary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:14px 18px;
  border-top:4px solid #FFD400;
}

.school-icon{
  height:clamp(70px, 9vw, 115px);
  width:auto;
  display:block;
  flex-shrink:0;
  margin-top:-3px;
  margin-bottom:-18px;
}

.priority-dropdown{
  padding-top:18px;
  padding-bottom:18px;
}

.priority-space,
.vote-details{
  margin-top:12px;
}

.community-details{
  margin-top:42px;
}

.section{
  width:88%;
  max-width:520px;
  margin:35px auto;
  padding:28px 24px;
  background:#fff;
  border-radius:20px;
  text-align:center;
}

.section h2{
  color:var(--blue);
  font-size:32px;
  line-height:1.2;
  margin:0 0 12px 0;
}

.join-text{
  margin-top:25px;
  color:#444;
  font-size:19px;
  font-weight:600;
  line-height:1.8;
}

.topbutton{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1000;
  padding:15px 20px;
  border-radius:50px;
  background:var(--blue);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}

.topbutton:hover{
  background:var(--green);
}

@media (max-width:768px){
  details{
    width:100%;
  }

  .button-menu{
    width:100%;
    padding:0 14px;
  }

  .priority-dropdown,
  .roundabout-summary{
    font-size:16px;
    line-height:1.2;
    padding:12px 16px;
  }
}

@media (max-width:600px){
  body{
    overflow-x:hidden;
  }

  .header{
    padding:24px 10px;
  }

  .logo{
    width:92%;
    max-width:430px;
  }

  summary{
    padding:18px 12px;
    font-size:18px;
  }

  .dropdown-content{
    padding:20px 16px;
    font-size:16px;
    line-height:1.55;
  }

  .dropdown-content h2,
  .dropdown-content h3{
    font-size:24px;
    line-height:1.2;
    margin-top:20px;
    margin-bottom:10px;
  }

  .dropdown-content ul,
  .dropdown-content ol{
    padding-left:26px;
    margin-top:10px;
    margin-bottom:12px;
  }

  .dropdown-content li{
    font-size:16px;
    line-height:1.5;
    margin-bottom:12px;
  }

  .dropdown-content p{
    margin-bottom:14px;
  }

  hr{
    margin:20px auto 16px auto;
  }

  .wide-image,
  .vote-image,
  .landing-image{
    width:95%;
    max-width:95%;
    margin:18px auto;
  }

  .edge-image{
    width:calc(100% + 32px);
    max-width:none;
    margin-left:-16px;
    margin-right:-16px;
  }

  .request-box{
    padding:18px;
    margin:18px auto;
  }

  .request-box p,
  .petition-points,
  .assessment-facts p{
    font-size:17px;
    line-height:1.55;
  }

  .petition-box h3,
  .audit-box h3{
    font-size:24px;
  }

  .source-note{
    font-size:18px;
  }

  .document-buttons button,
  button,
  .button-link{
    min-width:180px;
    padding:12px 16px;
    font-size:16px;
    line-height:1.25;
  }

  .school-icon{
    width:42px;
    height:auto;
    margin:0;
  }

  .section{
    width:92%;
    padding:18px 15px;
  }

  .section h2{
    font-size:26px;
  }

  .qr{
    width:140px;
    margin:10px auto;
  }

  .join-text{
    font-size:15px;
    line-height:1.4;
  }

  .topbutton{
    right:8px;
    bottom:70px;
    padding:8px 12px;
    font-size:13px;
  }
}


@media (max-width:700px){

.request-box{
  padding:18px 16px !important;
  width:100% !important;
  max-width:100% !important;
}

details summary{
  padding:20px 18px;
  line-height:1.2;
  font-size:clamp(20px, 5.6vw, 26px);
}


.why-three-details > summary,
.special-assessment-details > summary{
  font-size:clamp(18px, 5vw, 22px);
  padding:18px 14px;
  line-height:1.15;
  white-space:normal;
}

.hero-vote-image{
  width:96% !important;
  max-width:96% !important;
  min-width:0 !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:0 !important;
}

.hero-safety-image{
  position:relative;
  left:-20px;
}

.monday-signup-link{
  font-size:16px;
  line-height:1.2;
  padding:13px 16px;
  border-radius:10px;
}

.monday-flyer .monday-signup-link:nth-of-type(1){
  width:88%;
}

.monday-flyer .monday-signup-link:nth-of-type(2){
  width:78%;
  margin-top:10px;
}

.monday-flyer .monday-signup-link:nth-of-type(3){
  width:66%;
  margin-top:10px;
  margin-bottom:32px;
}
.mobile-tip{
  width:92%;
  margin:8px auto 18px auto;
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  color:#003a8c;
  text-align:center;
}
.cant-attend-box h3{
  font-size:24px !important;
  line-height:1.15 !important;
}
.cant-attend-box p{
  font-size:16px !important;
  line-height:1.5 !important;
}
.candidate-image{
  width:110% !important;
  max-width:110% !important;
  margin-left:-5% !important;
  margin-right:-5% !important;
}
}