/* FAQ index (/faq) and question pages (/faq/{slug}).

   Sections are built from the theme's own pieces -- .default-padding,
   .site-heading with its .sub-title and .devider, .btn-theme -- so this file
   only styles what the theme has no equivalent for: the search box, the
   category chips, the question cards and the answer layout.

   Palette from child-style.css, as in locations.css: #49a760 primary,
   #1f4e3d dark, #eaf5ee tint.

   child-style.css sets `p { color: inherit !important }` site-wide, so a colour
   put on a paragraph never applies. Colour the container and let the
   paragraph inherit. */

/* ---------- shared ---------- */

.faq-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eaf5ee;
    color: #1f4e3d;
    border-radius: 30px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.faq-tag i,
.faq-filter i {
    color: #49a760;
    font-size: 18px;
    line-height: 1;
}

.faq-tag i::before,
.faq-filter i::before {
    margin: 0;
    font-size: inherit;
}

/* ---------- index: search and filters ---------- */

.faq-tools {
    margin: 0 auto 45px;
}

/* faq.js scrolls these into view; the margin keeps them clear of the sticky
   header. */
.faq-tools,
.faq-grid {
    scroll-margin-top: 130px;
}

.faq-search {
    position: relative;
    max-width: 620px;
    margin: 0 auto 28px;
}

.faq-search__icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #49a760;
    pointer-events: none;
}

/* Elementor's kit gives every input a black 1px border and a 10px radius from
   `.elementor-kit-7 input:not([type="button"]):not([type="submit"])`, which is
   0,3,1. The extra .faq-tools is only there to reach 0,3,1 and win on order. */
.faq-tools .faq-search input.faq-search__input {
    width: 100%;
    height: 58px;
    padding: 0 24px 0 56px;
    border: 1px solid #d9e6dd;
    border-radius: 30px;
    background: #fff;
    font-size: 16px;
    color: #04000b;
    box-shadow: 0 10px 30px rgba(4, 0, 11, .06);
}

.faq-tools .faq-search input.faq-search__input:focus {
    outline: none;
    border-color: #49a760;
    box-shadow: 0 0 0 4px rgba(73, 167, 96, .15);
}

.faq-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.faq-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #cfe6d6;
    border-radius: 30px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #1f4e3d;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.faq-filter:hover {
    border-color: #49a760;
}

.faq-filter.is-active {
    background: #1f4e3d;
    border-color: #1f4e3d;
    color: #fff;
}

.faq-filter.is-active i {
    color: #fff;
}

/* Nine chips wrapped on a phone is nine rows of buttons before the first
   question. One row that swipes sideways instead, running to the screen edge
   so it is visibly cut off and reads as scrollable. */
@media (max-width: 575px) {
    .faq-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 0 calc(var(--bs-gutter-x, 30px) * -.5);
        padding: 2px calc(var(--bs-gutter-x, 30px) * .5) 8px;
        scrollbar-width: none;
    }

    .faq-filters::-webkit-scrollbar {
        display: none;
    }

    .faq-filter {
        flex: 0 0 auto;
    }
}

.faq-filter:focus-visible,
.faq-page-btn:focus-visible {
    outline: 3px solid rgba(73, 167, 96, .45);
    outline-offset: 2px;
}

/* ---------- index: cards ---------- */

.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.faq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e8ebee;
    border-radius: 12px;
    padding: 28px 26px;
    color: #5b6470;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.faq-card:hover,
.faq-card:focus-within {
    transform: translateY(-5px);
    border-color: #cfe6d6;
    box-shadow: 0 20px 40px rgba(4, 0, 11, .08);
}

.faq-card__question {
    font-size: 19px;
    line-height: 1.45;
    margin: 18px 0 12px;
}

.faq-card__question a {
    color: #04000b;
}

/* Stretches the question link over the whole card. */
.faq-card__question a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}

.faq-card:hover .faq-card__question a {
    color: #1f4e3d;
}

.faq-card__question a:focus-visible {
    outline: none;
}

.faq-card:focus-within {
    outline: 3px solid rgba(73, 167, 96, .45);
    outline-offset: 2px;
}

.faq-card__excerpt {
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 18px;
}

.faq-card__more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: #49a760;
}

.faq-card[hidden] {
    display: none;
}

@media (max-width: 991px) {
    .faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .faq-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-card {
        padding: 24px 20px;
    }

    .faq-card__question {
        font-size: 18px;
    }
}

.faq-empty {
    text-align: center;
    font-size: 16px;
    color: #5b6470;
    margin: 20px 0 0;
}

.faq-empty a {
    color: #1f4e3d;
    font-weight: 700;
}

/* ---------- index: pagination ---------- */

.faq-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 45px;
}

.faq-pagination[hidden] {
    display: none;
}

.faq-page-numbers {
    display: flex;
    gap: 8px;
}

.faq-page-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #cfe6d6;
    border-radius: 30px;
    background: #fff;
    color: #1f4e3d;
    font-weight: 700;
    cursor: pointer;
}

.faq-page-btn:hover:not(:disabled),
.faq-page-btn[aria-current="page"] {
    background: #49a760;
    border-color: #49a760;
    color: #fff;
}

.faq-page-btn:disabled {
    opacity: .45;
    cursor: default;
}

/* ---------- question page ---------- */

.faq-answer {
    background: #fff;
    border: 1px solid #e8ebee;
    border-radius: 12px;
    padding: 38px 36px;
    box-shadow: 0 18px 40px rgba(4, 0, 11, .05);
    color: #3f4852;
}

.faq-tag--link:hover {
    background: #49a760;
    color: #fff;
}

.faq-tag--link:hover i {
    color: #fff;
}

.faq-answer__row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 28px;
}

.faq-answer__badge {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 50%;
    background: #1f4e3d;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-answer__badge--answer {
    background: #49a760;
}

.faq-answer__question {
    font-size: 24px;
    line-height: 1.4;
    margin: 6px 0 0;
}

.faq-answer__body {
    min-width: 0;
}

.faq-answer__text {
    font-size: 18px;
    line-height: 1.85;
    margin: 6px 0 0;
}

.faq-answer__text + .faq-answer__text {
    margin-top: 16px;
}

.faq-answer__row--question {
    padding-bottom: 26px;
    border-bottom: 1px solid #eef1f3;
}

.faq-reading {
    margin-top: 40px;
}

.faq-reading h3,
.faq-sidebar__box h3 {
    font-size: 20px;
    margin-bottom: 18px;
}

.faq-reading ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.faq-reading a {
    display: inline-block;
    background: #fff;
    border: 1px solid #cfe6d6;
    border-radius: 30px;
    padding: 10px 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #1f4e3d;
}

.faq-reading a:hover {
    background: #49a760;
    border-color: #49a760;
    color: #fff;
}

.faq-back {
    display: inline-block;
    margin-top: 35px;
    font-weight: 700;
    color: #1f4e3d;
}

.faq-back:hover {
    color: #49a760;
}

.faq-sidebar {
    position: sticky;
    top: 120px;
}

.faq-sidebar__box {
    background: #f6f8f7;
    border-radius: 12px;
    padding: 30px 28px;
    color: #5b6470;
}

.faq-sidebar__box + .faq-sidebar__box {
    margin-top: 25px;
}

.faq-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.faq-sidebar__list li {
    border-bottom: 1px solid #e3e8e5;
}

.faq-sidebar__list li:last-child {
    border-bottom: 0;
}

.faq-sidebar__list a {
    display: block;
    padding: 13px 0 13px 20px;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #04000b;
}

.faq-sidebar__list a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #49a760;
}

.faq-sidebar__list a:hover,
.faq-sidebar__all {
    color: #1f4e3d;
}

.faq-sidebar__all {
    font-weight: 700;
}

.faq-sidebar__all:hover {
    color: #49a760;
}

.faq-sidebar__box--contact {
    background: #1f4e3d;
    color: #fff;
}

.faq-sidebar__box--contact h3 {
    color: #fff;
}

.faq-sidebar__contact {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.faq-sidebar__contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    word-break: break-word;
}

.faq-sidebar__contact i {
    color: #9fd6ad;
    font-size: 20px;
    line-height: 1;
}

.faq-sidebar__contact a {
    color: #fff;
    font-weight: 700;
}

@media (max-width: 991px) {
    .faq-sidebar {
        position: static;
        margin-top: 45px;
    }
}

@media (max-width: 575px) {
    .faq-answer {
        padding: 28px 20px;
    }

    .faq-answer__row {
        gap: 14px;
    }

    .faq-answer__badge {
        flex-basis: 36px;
        height: 36px;
        font-size: 16px;
    }

    .faq-answer__question {
        font-size: 20px;
        margin-top: 3px;
    }

    .faq-answer__text {
        font-size: 16px;
        margin-top: 3px;
    }
}

/* ---------- closing band ---------- */

.faq-cta {
    background: #1f4e3d;
}

.faq-cta .site-heading,
.faq-cta .site-heading .title,
.faq-cta .site-heading p {
    color: #fff;
}

.faq-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

/* A real border, not box-shadow: style.css sets `box-shadow: none !important`
   on .btn, and resets border-width to 0 -- see locations.css. */
.faq-cta .faq-btn--light.btn.btn-theme {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .7);
    padding: 14px 50px;
}

.faq-cta .faq-btn--light.btn.btn-theme:hover {
    background: #fff;
    color: #1f4e3d;
}