/** DETAILS BLOCK 
** Animation styling thanks to Kevin Powell and Zoran Jambor for their tutorials.
**/

details.is-style-hotelivalo-faq-details {
	overflow: hidden;
	font-style: normal;
	font-weight: 700;
    box-shadow: var(--wp--preset--shadow--natural);

    & > ul > li, > p {
        padding-inline: 16px;
    }
}

/* details.is-style-hotelivalo-faq-details > ul > li {
    padding-inline: 16px;
} */

.is-style-hotelivalo-faq-details > *:not(summary) {
    margin: 0 !important;
    transition: color 0.3s ease-in-out;
    
    li:last-child {
        padding-bottom: 16px;
    }
        
}

.is-style-hotelivalo-faq-details::details-content {
	background: inherit;
	block-size: 0;
	transition: block-size 0.5s, content-visibility 0.5s;
	transition-behavior: allow-discrete;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	font-family: var(--wp--preset--font-family--open-sans);
    /* margin: 0; */
    /* padding-inline: 16px; */
}

details[open].is-style-hotelivalo-faq-details::details-content {
	block-size: auto;

    &:last-child {
        margin-bottom: 1em;
    }
}

summary:hover::after {
	background: var(--wp--preset--color--accent-2)!important;
	transition: 0.3s ease-in-out;
	will-change: transition;
}

.is-style-hotelivalo-faq-details summary {
	transition: 0.3s ease-in-out;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
	padding-inline: 16px;
	text-wrap: pretty;
	font-size: var(--wp--preset--font-size--large);

	&:hover {
		color: var(--wp--preset--color--accent-2);
	}

	&::after {
        content: ' + ';
        color: var(--wp--preset--color--accent-1);
        background: var(--wp--preset--color--base);
        font-size: var(--wp--preset--font-size--medium);
        font-family: var(--wp--preset--font-family--open-sans);
        align-content: center;
        align-self: center;
        border-radius: 100%;
        /* font-weight: 700; */
        aspect-ratio: 1 / 1 !important;
        width: 2em;
        height: 2em;
        text-align: center;
	}
}

.is-style-hotelivalo-faq-details summary::-webkit-details-marker {
	display: none;
}
  
details[open].is-style-hotelivalo-faq-details summary:after {
	content: ' - ';
}