/* ==========================================================
   URISTST — FAQ POLISH
   Native details/summary. CSS only.
   ========================================================== */

body.home .ul-faq .ul-wrap {
    max-width: 980px;
}


/* ----------------------------------------------------------
   FAQ ITEM
   ---------------------------------------------------------- */

body.home .ul-faq details {
    position: relative;

    margin: 0;

    border: 0;
    border-top: 1px solid rgba(216, 211, 202, .95);

    background: transparent;

    transition:
        background-color 180ms ease,
        border-color 180ms ease;
}

body.home .ul-faq details:last-of-type {
    border-bottom: 1px solid rgba(216, 211, 202, .95);
}

body.home .ul-faq details[open] {
    background: rgba(255, 255, 255, .48);

    border-top-color: rgba(154, 80, 63, .38);
}


/* Small accent on the left when open */
body.home .ul-faq details[open]::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 2px;

    background: #9A503F;
}


/* ----------------------------------------------------------
   QUESTION
   ---------------------------------------------------------- */

body.home .ul-faq summary {
    position: relative;

    display: block;

    padding:
        23px
        58px
        23px
        18px;

    color: #172231;

    font-size: 17px;
    font-weight: 650;
    line-height: 1.45;

    cursor: pointer;

    list-style: none;

    transition:
        color 180ms ease,
        padding-left 180ms ease;
}

body.home .ul-faq summary::-webkit-details-marker {
    display: none;
}

body.home .ul-faq summary::marker {
    content: "";
}

body.home .ul-faq summary:hover {
    color: #9A503F;
}

body.home .ul-faq details[open] > summary {
    color: #9A503F;

    padding-left: 22px;
}


/* ----------------------------------------------------------
   PLUS / MINUS
   ---------------------------------------------------------- */

body.home .ul-faq summary::before,
body.home .ul-faq summary::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 19px;

    width: 16px;
    height: 2px;

    background: #9A503F;

    border-radius: 999px;

    transform-origin: center;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

/* Horizontal stroke */
body.home .ul-faq summary::before {
    transform: translateY(-50%);
}

/* Vertical stroke */
body.home .ul-faq summary::after {
    transform:
        translateY(-50%)
        rotate(90deg);
}

/* Open = minus */
body.home .ul-faq details[open] > summary::after {
    transform:
        translateY(-50%)
        rotate(0deg);

    opacity: 0;
}


/* ----------------------------------------------------------
   ANSWER
   ---------------------------------------------------------- */

body.home .ul-faq details > p {
    max-width: 780px;

    margin:
        -4px
        58px
        0
        22px;

    padding:
        0
        0
        24px;

    color: #5E6470;

    font-size: 15px;
    line-height: 1.72;
}

body.home .ul-faq details[open] > p {
    animation:
        uristst-faq-answer-in
        240ms
        ease-out
        both;
}

@keyframes uristst-faq-answer-in {

    from {
        opacity: 0;

        transform: translateY(-5px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


/* ----------------------------------------------------------
   KEYBOARD FOCUS
   ---------------------------------------------------------- */

body.home .ul-faq summary:focus-visible {
    outline: 2px solid rgba(154, 80, 63, .55);

    outline-offset: -2px;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 640px) {

    body.home .ul-faq summary {
        padding:
            20px
            48px
            20px
            14px;

        font-size: 16px;
    }

    body.home .ul-faq details[open] > summary {
        padding-left: 18px;
    }

    body.home .ul-faq summary::before,
    body.home .ul-faq summary::after {
        right: 14px;

        width: 14px;
    }

    body.home .ul-faq details > p {
        margin:
            -2px
            40px
            0
            18px;

        padding-bottom: 21px;

        font-size: 14px;
    }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    body.home .ul-faq details,
    body.home .ul-faq summary,
    body.home .ul-faq summary::before,
    body.home .ul-faq summary::after {
        transition: none !important;
    }

    body.home .ul-faq details[open] > p {
        animation: none !important;
    }
}