/* ===========================================================
   fs-faq.css  |  Florida Stucco FAQ module
   Upload to /css/fs-faq.css and link once in each page <head>:
   <link rel="stylesheet" href="/css/fs-faq.css">

   Colors are set as variables so they can be matched to the
   existing site palette in one place.
   =========================================================== */

:root {
  --fs-faq-rule:  #d8dde2;
  --fs-faq-text:  #222c33;
  --fs-faq-muted: #4a565f;
  --fs-faq-link:  #0b5fa5;
  --fs-faq-bg:    transparent;
}

.fs-faq {
  max-width: 1080px;
  margin: 3rem auto;
  padding: 0 1rem 1rem;
  background: var(--fs-faq-bg);
  color: var(--fs-faq-text);
}

.fs-faq > h2 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 1.5rem;
}

.fs-faq-item {
  border-bottom: 1px solid var(--fs-faq-rule);
}

.fs-faq-item:first-of-type {
  border-top: 1px solid var(--fs-faq-rule);
}

/* The question. Kept as an h3 inside <summary> so answer engines
   and screen readers both see a real heading hierarchy. */
.fs-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.75rem 1.05rem 0;
  position: relative;
}

.fs-faq-item > summary::-webkit-details-marker { display: none; }

.fs-faq-item > summary h3 {
  display: inline;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

.fs-faq-item > summary::after {
  content: "+";
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 400;
  color: var(--fs-faq-muted);
}

.fs-faq-item[open] > summary::after { content: "\2013"; }

.fs-faq-item > summary:hover h3 { color: var(--fs-faq-link); }

.fs-faq-item > summary:focus-visible {
  outline: 2px solid var(--fs-faq-link);
  outline-offset: 2px;
}

.fs-faq-a {
  padding: 0 2.75rem 1.35rem 0;
  line-height: 1.65;
  color: var(--fs-faq-muted);
}

.fs-faq-a p { margin: 0 0 .75rem; }
.fs-faq-a p:last-child { margin-bottom: 0; }

.fs-faq-a a {
  color: var(--fs-faq-link);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .fs-faq { margin: 2rem auto; }
  .fs-faq > h2 { font-size: 1.4rem; }
  .fs-faq-item > summary { padding-right: 2.25rem; }
  .fs-faq-a { padding-right: 0; }
}

@media print {
  .fs-faq-a { display: block !important; }
}