/* Global CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body,
h1,
p {
    margin-block-end: 0;
}

body {
    min-height: 100vh;
    line-height: 1.5;
}

h1 {
    line-height: 1.1;
}

img {
    max-width: 100%;
    display: block;
}

summary {
    list-style: none;
}

/* Font Loading */
@font-face {
    font-display: swap;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/work-sans-v24-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/work-sans-v24-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/work-sans-v24-latin-700.woff2') format('woff2');
}


/* Global Changes w/ Root */
:root {
    /* Colors */
    --clr-white: hsl(0, 100%, 100%);
    --clr-purple-100: hsl(275, 100%, 97%);
    --clr-purple-600: hsl(292, 16%, 49%);
    --clr-purple-950: hsl(292, 42%, 14%);
    --clr-box-shadow: rgba(0,0,0,0.4);

    /* Font */
    --FF: "Work Sans", sans-serif;

    --FW-400: 400;
    --FW-600: 600;
    --FW-700: 700;

    --FS-16: 1rem; /* 16px */
}

/* Typography */
.site__container {
    font-family: var(--FF);
    font-size: var(--FS-16);
}

.faq__title {
    font-weight: var(--FW-700);
    color: var(--clr-purple-950);
}

.faq__question-text {
    font-weight: var(--FW-600);
    color: var(--clr-purple-950);
    font-size: 16px;
}

.faq__answer {
    font-weight: var(--FW-400);
    color: var(--clr-purple-600);
}

/* General - Mobile View */
.site__container {
    background-color: var(--clr-purple-100);
    max-width: 375px;
    background-image: url(./assets/images/background-pattern-mobile.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 375px auto;
    margin: 0 auto;
}

.faq {
    max-width: 350px;
    background-color: var(--clr-white);
    margin: 9.375em auto 0;
    border-radius: 1em;
    padding: 2em;
    box-shadow: 0px 0px 1.2em 0px var(--clr-box-shadow);
}

.faq__header {
    display: flex;
    align-items: center;
    margin-bottom: 1.875em;
}

.faq__icon {
    height: 1.8em;
    width: 1.8em;
    margin-right: 1.875em;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    cursor: pointer;
}

.faq__question-text {
    margin-bottom: 0.6em;
    flex: 1;
}

.faq__toggle-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    background-image: url(./assets/images/icon-plus.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.faq__item[open] .faq__toggle-icon {
    background-image: url(./assets/images/icon-minus.svg);
}

.faq__answer {
    margin-bottom: 1.2em;
}

hr {
    opacity: 10%;
    width: 90%;
    margin-bottom: 0.6em;
}

/* General - Desktop */
@media (min-width: 1000px) {
    .site__container {
        max-width: 1000px;
        background-image: url(./assets/images/background-pattern-desktop.svg);
        background-size: auto;
    }

    .faq {
        max-width: 600px;
    }
}