/* Hutch Homes — visible breadcrumbs + FAQ accordion (added 2026-07) */

/* ---- Breadcrumbs ---- */
.hh-crumbs {
  background: #F8F5F2;
  border-bottom: 1px solid rgba(139, 76, 25, .12);
  padding: 11px 20px;
  font-size: 14px;
  line-height: 1.4;
}
.hh-crumbs ol {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1140px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.hh-crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5a5147;
}
.hh-crumbs a {
  color: #8B4C19;
  text-decoration: none;
  font-weight: 600;
}
.hh-crumbs a:hover,
.hh-crumbs a:focus-visible {
  text-decoration: underline;
}
.hh-crumbs li + li::before {
  content: "\203A"; /* › */
  color: rgba(139, 76, 25, .55);
  font-weight: 600;
}
.hh-crumbs [aria-current="page"] {
  color: #5a5147;
}

/* ---- FAQ accordion ---- */
.hh-faq {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) 20px;
}
.hh-faq-head {
  text-align: center;
  margin: 0 0 28px;
}
.hh-faq-head .hh-eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #CF6426;
  margin: 0 0 8px;
}
.hh-faq-head h2 {
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 1.15;
  margin: 0;
  color: #2b2620;
}
.hh-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hh-faq details {
  border: 1px solid rgba(139, 76, 25, .16);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hh-faq details[open] {
  border-color: rgba(139, 76, 25, .38);
  box-shadow: 0 6px 22px -14px rgba(139, 76, 25, .45);
}
.hh-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #2b2620;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.hh-faq summary::-webkit-details-marker { display: none; }
.hh-faq summary:focus-visible { outline: 2px solid #CF6426; outline-offset: 2px; }
.hh-faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: #CF6426;
  transition: transform .2s ease;
}
.hh-faq details[open] summary::after { transform: rotate(45deg); }
.hh-faq-a {
  padding: 0 22px 20px;
  color: #5a5147;
  line-height: 1.68;
}
.hh-faq-a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .hh-faq details, .hh-faq summary::after { transition: none; }
}

/* Tinted FAQ accordion titles, so the question rows read as buttons
   against the white answer panel. Uses the existing brown at low
   opacity so it stays in the same family as the card border. */
.hh-faq summary {
  background: rgba(139, 76, 25, .055);
}
.hh-faq details[open] summary {
  background: rgba(139, 76, 25, .085);
}