/*******************************************************

    polo.gr FAQ post (inc/functions/polo-faq.php): accordion + help card.
    Header and page frame: css/polo.page.css.

 *******************************************************/



    .polo-faq__grid {
        display: grid;
        grid-template-columns: minmax( 0, 8fr ) minmax( 0, 4fr );
        gap: clamp( 28px, 4vw, 64px );
        align-items: start;
    }



    /* Accordion */

    .polo-faq__list {
        border-top: 1px solid var( --polo-black );
    }

    .polo-faq__item {
        border-bottom: 1px solid var( --polo-line );
    }

    .polo-faq__item summary {
        position: relative;
        display: block;
        padding: 22px 48px 22px 0;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 17px;
        font-weight: 700;
        line-height: 1.4;
        list-style: none;
        cursor: pointer;
    }

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

    .polo-faq__item summary:hover {
        color: var( --polo-red );
    }

    .polo-faq__item summary:focus-visible {
        outline: 2px solid var( --polo-black );
        outline-offset: 2px;
    }

    /* A plus that turns into a minus. */
    .polo-faq__toggle {
        position: absolute;
        top: 50%;
        right: 6px;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        border-radius: 50%;
        background-color: var( --polo-page-soft );
    }

    .polo-faq__toggle::before,
    .polo-faq__toggle::after {
        position: absolute;
        top: 14px;
        left: 9px;
        width: 12px;
        height: 2px;
        background-color: var( --polo-black );
        content: "";
        transition: transform 0.2s var( --polo-ease );
    }

    .polo-faq__toggle::after {
        transform: rotate( 90deg );
    }

    .polo-faq__item[open] .polo-faq__toggle {
        background-color: var( --polo-black );
    }

    .polo-faq__item[open] .polo-faq__toggle::before,
    .polo-faq__item[open] .polo-faq__toggle::after {
        background-color: var( --polo-white );
    }

    .polo-faq__item[open] .polo-faq__toggle::after {
        transform: rotate( 0deg );
    }

    .polo-faq__answer {
        padding: 0 48px 24px 0;
        color: #2b2f33;
        font-size: 16px;
        line-height: 1.7;
    }

    .polo-faq-page .polo-faq__answer p,
    .polo-faq-page .polo-faq__answer ul,
    .polo-faq-page .polo-faq__answer ol {
        margin: 0 0 12px;
    }

    .polo-faq-page .polo-faq__answer ul,
    .polo-faq-page .polo-faq__answer ol {
        padding-left: 22px;
    }

    .polo-faq-page .polo-faq__answer li {
        margin-bottom: 4px;
    }

    .polo-faq-page .polo-faq__answer > :last-child {
        margin-bottom: 0;
    }

    .polo-faq-page .polo-frame .polo-faq__answer a {
        color: var( --polo-black );
        text-decoration: underline;
        text-decoration-color: var( --polo-red );
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    .polo-faq-page .polo-frame .polo-faq__answer a:hover {
        color: var( --polo-red );
    }



    /* Help card */

    .polo-faq-page .polo-faq__help {
        display: block; /* the legacy CSS hides <aside> elements */
        position: sticky;
        top: 120px;
        padding: 28px;
        border-radius: 8px;
        background-color: var( --polo-black );
        color: var( --polo-white );
    }

    .polo-faq-page .polo-faq__help h2 {
        margin: 0 0 8px;
        color: var( --polo-white );
        font-family: var( --polo-font-gotham );
        font-size: 21px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.25;
        text-align: left;
        text-transform: none;
    }

    .polo-faq-page .polo-faq__help p {
        margin: 0 0 18px;
        color: #d6d8da;
        font-size: 15px;
        line-height: 1.6;
    }

    .polo-faq-page .polo-faq__help ul {
        margin: 0 0 22px;
        padding: 0;
        list-style: none;
    }

    .polo-faq__help li {
        margin: 0 0 8px;
    }

    .polo-faq-page .polo-frame .polo-faq__help li a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var( --polo-white );
        font-size: 16px;
        text-decoration: none;
    }

    .polo-faq-page .polo-frame .polo-faq__help li a:hover {
        color: var( --polo-gold );
    }

    .polo-faq__help .polo-page-icon {
        width: 20px;
        height: 20px;
    }

    .polo-faq-page .polo-frame .polo-faq__button {
        display: inline-flex;
        padding: 12px 22px;
        border-radius: 999px;
        background-color: var( --polo-white );
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: background-color 0.2s var( --polo-ease ), color 0.2s var( --polo-ease );
    }

    .polo-faq-page .polo-frame .polo-faq__button:hover,
    .polo-faq-page .polo-frame .polo-faq__button:focus-visible {
        background-color: var( --polo-red );
        color: var( --polo-white );
    }



    @media ( max-width: 900px ) {

        .polo-faq__grid {
            grid-template-columns: minmax( 0, 1fr );
        }

        .polo-faq-page .polo-faq__help {
            position: static;
        }

    }

    @media ( max-width: 600px ) {

        .polo-faq__item summary {
            padding: 18px 44px 18px 0;
            font-size: 16px;
        }

        .polo-faq__answer {
            padding-right: 0;
            font-size: 15px;
        }

    }

    @media ( prefers-reduced-motion: reduce ) {

        .polo-faq__toggle::before,
        .polo-faq__toggle::after {
            transition: none;
        }

    }