.jm-faq-page__header {
margin-bottom: var(--space-8);
}
.jm-faq {
padding-bottom: var(--space-section-md);
}
.jm-faq__category + .jm-faq__category {
margin-top: var(--space-10);
}
.jm-faq__category-title {
margin: 0 0 var(--space-4);
font-family: var(--font-base);
font-size: var(--fs-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--color-text-muted);
}
.jm-faq__list {
border-block: var(--border);
}
.jm-faq__item {
border-bottom: var(--border);
}
.jm-faq__item:last-child {
border-bottom: 0;
}
.jm-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-5);
font-family: var(--font-base);
font-size: var(--fs-base);
font-weight: var(--font-weight-medium);
line-height: var(--lh-snug);
color: var(--color-text);
list-style: none;
cursor: pointer;
transition: color var(--duration-fast) var(--ease);
}
.jm-faq__question::-webkit-details-marker {
display: none;
}
.jm-faq__question::marker {
content: "";
}
.jm-faq__question::after {
flex-shrink: 0;
width: 0.55rem;
height: 0.55rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--duration-base) var(--ease);
content: "";
}
.jm-faq__item[open] > .jm-faq__question {
color: var(--color-text);
}
.jm-faq__item[open] > .jm-faq__question::after {
transform: rotate(-135deg) translateY(0.1rem);
}
.jm-faq__question:hover {
color: var(--color-primary);
}
.jm-faq__answer {
padding-bottom: var(--space-5);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-text-muted);
}
.jm-faq__answer > :first-child {
margin-top: 0;
}
.jm-faq__answer > :last-child {
margin-bottom: 0;
}
.jm-faq__answer p {
margin-block: 0 0 var(--space-4);
}
.jm-faq__answer p:last-child {
margin-bottom: 0;
}
.jm-faq__answer a {
color: var(--color-text);
}
.jm-faq__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-12);
padding-top: var(--space-8);
text-align: center;
}
.jm-faq__cta-text {
margin: 0;
font-size: var(--fs-md);
line-height: var(--lh-snug);
color: var(--color-text);
}
@media (min-width: 782px) {
.jm-faq-page__header {
margin-bottom: var(--space-10);
}
.jm-faq__question {
padding-block: var(--space-6);
font-size: var(--fs-md);
}
.jm-faq__category + .jm-faq__category {
margin-top: var(--space-12);
}
}