/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* FAQ */

/* ============================================================
   14. FAQ
   Rows on a rule, matching the service list above it.

   Built on native <details>/<summary> rather than the JS accordion in
   the footer. It opens with no script running, it is keyboard and
   screen-reader accessible for free, and Ctrl+F on a closed answer
   still finds the text in every current browser. The h3 lives inside
   the summary, which the HTML spec allows, so the heading outline
   stays h1 > h2 > h3 and the FAQPage schema has a real heading to
   match against.
   ============================================================ */
.faq-list { border-top: 1px solid rgba(0,0,0,.2); }

.faq-item { border-bottom: 1px solid rgba(0,0,0,.2); }

.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5em; padding: 1.15em 0; cursor: pointer;
  list-style: none;                    /* kills the marker in Firefox */
  transition: color .3s ease;
}
/* Safari and older Chrome use a separate pseudo-element for the arrow. */
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--c-brand); }

.faq-q h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625em; line-height: 1.2; letter-spacing: -.01em;
  max-width: 28em;
}

/* Reuses the footer accordion's plus/minus. The rule that rotates the
   bar there keys off [data-accordion-status], so this needs its own. */
.faq-q .acc-icon { display: block; }
.faq-item[open] .faq-q .acc-icon .v { transform: rotate(90deg); }

.faq-a { padding: 0 0 1.5em; }
.faq-a .body-mono { color: var(--c-mute); max-width: 46em; }

@media (max-width: 767px) {
  .faq-q { gap: 1em; padding: 1em 0; }
  .faq-q h3 { max-width: none; }
  .faq-a { padding-bottom: 1.25em; }
}