/* Product FAQs (app/contentFaq.php): one accordion for the FAQ page, the category listing and the product tab. */

.contentFaq{
    text-align: left;
}

.contentFaqSection{
    margin: 28px 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--lb-text);
}

.contentFaq > .contentFaqSection:first-child{
    margin-top: 0;
}

.contentFaqItem{
    border-bottom: 1px solid var(--lb-border);
    scroll-margin-top: 150px;   /* a question opened from a link lands under the sticky header, not behind it */
}

.contentFaqItem summary{
    position: relative;
    padding: 14px 32px 14px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lb-text);
    cursor: pointer;
    list-style: none;
}

.contentFaqItem summary::-webkit-details-marker{
    display: none;
}

/* the open/closed mark: a plus that turns into a minus (text, not an icon font) */
.contentFaqItem summary::after{
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--lb-brand);
}

.contentFaqItem[open] summary::after{
    content: "\2212";
}

.contentFaqItem summary:focus-visible{
    outline: 2px solid var(--lb-brand);
    outline-offset: 2px;
}

.contentFaqAnswer{
    padding: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lb-text);
}

.contentFaqAnswer p{
    margin: 0 0 8px;
}

.contentFaqAnswer p:last-child{
    margin-bottom: 0;
}

/* the FAQ's own page */
.contentFaqPage{
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
}

.contentFaqPage h1{
    margin: 10px 0 20px;
    font-size: 28px;
}

.contentFaqIntro{
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 28px;
    font-size: 15px;
    line-height: 1.6;
}

.contentFaqIntro img{
    flex: 0 0 auto;
    width: 220px;
    height: auto;
}

.contentFaqSource{
    margin-top: 28px;
    font-size: 13px;
    color: var(--lb-text-muted);
}

/* the block under a category's products and the product tab */
.contentFaqBlock{
    margin: 32px 0 8px;
    padding: 24px 28px;
    border: 1px solid var(--lb-border);
    border-radius: 8px;
    background: var(--lb-card);
}

.contentFaqBlock.contentFaqBlockBare{
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* inside the computer product tab: the tab's content area is the frame */
#resumeTabs .contentFaqBlockBare{
    padding: 24px 28px 20px;
}

.contentFaqNote{
    margin: 0 0 8px;
    padding: 10px 14px;
    border-left: 3px solid var(--lb-brand);
    background: var(--lb-surface);
    font-size: 14px;
    line-height: 1.5;
    color: var(--lb-text);
}

.contentFaqBlockHead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.contentFaqBlockHead h2{
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.contentFaqBlockHead img{
    width: 120px;
    height: auto;
}

.contentFaqMore{
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
}

@media (max-width: 767px){
    .contentFaqIntro{
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 16px;
    }

    .contentFaqIntro img{
        width: 170px;
    }

    .contentFaqPage h1{
        font-size: 22px;
    }

    .contentFaqBlock{
        margin: 20px 0 8px;
        padding: 16px;
    }

    .contentFaqBlockHead img{
        width: 90px;
    }
}

/* the category's entry to its FAQ: a card under the filters (computer) */
.contentFaqCard{
    margin: 32px 0 24px;
    padding: 20px;
    border: 1px solid var(--lb-border);
    border-radius: 8px;
    background: var(--lb-card);
    text-align: left;
}

.contentFaqCard img{
    display: block;
    width: 130px;
    height: auto;
    margin-bottom: 14px;
}

.contentFaqCard h2{
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--lb-text);
}

.contentFaqCard ul{
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.contentFaqCard li{
    padding: 7px 0;
    border-bottom: 1px solid var(--lb-border);
    font-size: 14px;
    line-height: 1.4;
}

.contentFaqCard li a{
    color: var(--lb-text);
}

.contentFaqCard li a::before{
    content: "\203A";
    margin-right: 6px;
    color: var(--lb-brand);
    font-weight: 700;
}

.contentFaqCard li a:hover{
    text-decoration: underline;
}

.contentFaqCard .contentFaqMore{
    margin-top: 4px;
}

/* the same entry on the phone: one line above the products */
.contentFaqStrip{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--lb-border);
    border-radius: 8px;
    background: var(--lb-card);
    color: var(--lb-text);
    font-size: 15px;
    line-height: 1.3;
}

.contentFaqStrip img{
    flex: 0 0 52px;
    width: 52px;
    height: auto;
}

.contentFaqStrip span{
    flex: 1 1 auto;
}

.contentFaqStrip b{
    flex: 0 0 auto;
    color: var(--lb-brand);
    font-weight: 600;
    white-space: nowrap;
}

.contentFaqStrip b::after{
    content: " \203A";
}

.contentFaqStrip:hover, .contentFaqStrip:focus{
    color: var(--lb-text);
    text-decoration: none;
}