/* Shared FAQ accordion — extracted from city_landing.blade.php's original
   "Frequently Asked Questions" section (single-open accordion, smooth
   grid-template-rows expand/collapse, plus/minus icon swap). Used by
   city_landing.blade.php and service_page.blade.php via
   front.partials._faq; only content differs. JS: initSharedFaq() in
   shared_faq.js. Self-contained — see shared_about.css's docblock for why
   that matters and why this used to be one section of a single bundled
   shared_sections.css.

   Every margin below is explicit, including the ones that happen to be 0 —
   .shared_faq-answer p in particular relies on collapsing to true 0 height
   at rest (grid-template-rows: 0fr), and a browser-default <p> margin sits
   *outside* that collapse (margin isn't clipped by the element's own
   overflow), so an implicit margin here silently pads out every closed FAQ
   item. That's the actual bug this component broke on once already:
   nothing here declared its own margin, so it borrowed a `p { margin: 0 }`
   reset that only existed in city_landing.css — worked by accident on the
   page that happened to carry that reset, broke everywhere else. */

:root {
    --hp-dark: #0c2e16;
    --hp-lime: #cfff7f;
}

/* Clears the site-wide fixed "Get your 3 quotes now" tab. */
.shared_faq .container {
    padding: 0 30px;
}
@media (min-width: 768px) {
    .shared_faq .container {
        padding: 0 45px;
    }
}

.shared_faq {
    background: #f9fafb;
    padding: 48px 0;
}
.shared_faq .shared_faq-inner {
    max-width: 768px;
    margin: 0 auto;
}
.shared_faq-inner h2 {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin: 0 0 8px;
}
.shared_faq-sub {
    color: #4b5563;
    text-align: center;
    margin: 0 0 32px;
}
.shared_faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shared_faq-item {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.shared_faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.shared_faq-question span:first-child {
    font-weight: 600;
    color: #111827;
}
.shared_faq-icon {
    flex-shrink: 0;
    color: var(--hp-dark);
    display: flex;
}
.shared_faq-icon svg {
    width: 20px;
    height: 20px;
}
.shared_faq-icon .icon-minus { display: none; }
.shared_faq-item.active .shared_faq-icon .icon-plus { display: none; }
.shared_faq-item.active .shared_faq-icon .icon-minus { display: block; }
.shared_faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.shared_faq-item.active .shared_faq-answer {
    grid-template-rows: 1fr;
}
.shared_faq-answer p {
    margin: 0;
    min-height: 0;
    overflow: hidden;
    /* No bottom padding at rest so the collapsed row reaches true 0 height */
    padding: 0 20px 0;
    color: #4b5563;
    line-height: 1.6;
}
.shared_faq-item.active .shared_faq-answer p {
    padding-bottom: 20px;
}
@media (min-width: 640px) {
    .shared_faq { padding: 56px 0; }
}