/* ==========================================================
   Garage Memo Design System
   Component : GM Accordion
   File      : GM_Accordion.css
   Status    : Official Component v1.0
   Theme     : Premium Brown & Gold
========================================================== */

.gm-faq{
    display:grid;
    gap:1rem;
}

.gm-faq details{
    background:var(--gm-surface);
    border:1px solid var(--gm-border);
    border-left:4px solid var(--gm-gold);
    border-radius:18px;
    box-shadow:var(--gm-shadow-sm);
    overflow:hidden;
    transition:all .25s ease;
}

.gm-faq details:hover{
    transform:translateY(-2px);
    box-shadow:var(--gm-shadow-md);
}

.gm-faq details[open]{
    border-color:var(--gm-gold);
    box-shadow:var(--gm-shadow-lg);
}

.gm-faq summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1.2rem 1.5rem;
    cursor:pointer;
    list-style:none;
    font-weight:700;
    color:var(--gm-text);
    user-select:none;
    transition:background .25s ease;
}

.gm-faq summary:hover{
    background:#faf6f0;
}

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

.gm-faq summary::after{
    content:"+";
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(180deg,#7b5a47,#6a4b3a);
    color:#fff;
    font-size:1.2rem;
    font-weight:700;
    line-height:1;
    padding-bottom:2px;
    flex-shrink:0;
    transition:transform .25s ease;
}

.gm-faq details[open] summary::after{
    content:"−";
    transform:rotate(180deg);
}

.gm-faq details p{
    padding:0 1.5rem 1.5rem;
    color:var(--gm-text-light);
    line-height:1.9;
}

.gm-faq details strong{
    display:block;
    margin-bottom:.6rem;
    color:var(--gm-bronze);
}

@media (max-width:768px){
    .gm-faq summary{
        padding:1rem 1.2rem;
        font-size:.95rem;
    }

    .gm-faq details p{
        padding:0 1.2rem 1.2rem;
    }
}