/* Mobile first Design */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; 
    list-style: none;

    font-size: 16px;
}

:root {
    /* colors */

    --white: hsl(0, 100%, 100%);
    --black: hsl(0, 0%, 0%);
    --purple-background: hsl(276, 71%, 95%);
    --purple-100: hsl(275, 100%, 97%);
    --purple-600: hsl(292, 16%, 49%);
    --purple-950: hsl(292, 42%, 14%);
    --violet-600: hsl(281, 83%, 54%);

    /* typography */

    --text-preset-1: 700 56px/66px "Work Sans", sans-serif;
    --mobile-text-preset-1: 700 32px/66px "Work Sans", sans-serif;

    --text-preset-2: 600 18px/21px "Work Sans", sans-serif;
    --mobile-text-preset-2: 600 16px/21px "Work Sans", sans-serif;

    --text-preset-3: 400 16px/24px "Work Sans", sans-serif;
    --mobile-text-preset-3: 400 14px/1.5 "Work Sans", sans-serif;

    --default-letter-spacing: 0;

    /* Spacing */

    --spacing-100: 8px;
    --spacing-200: 16px;
    --spacing-300: 24px;
    --spacing-400: 32px;
    --spacing-450: 38px;
    --spacing-500: 40px;
    --spacing-600: 60.5px;
}

/* body styles */

body {
    background-color: var(--purple-background);
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    
}

/* background image */

.background-image-mobile {
    max-height: 232px;
    max-width: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;
}

.background-image-desktop {
    display: none;
}

.card {
    min-height: 551px;
    max-width: 327px;
    background-color: var(--white);
    border-radius: var(--spacing-100);
    margin: 130.5px var(--spacing-300);
    padding: var(--spacing-300);
    box-sizing: border-box;
}

/* radio input style hidden */

input {
    display: none;
}

/* header styles */

.header {
    display: flex;
    align-items: center;

    max-height: 38px;
}

.purple-star {
    max-width: 24px;
    max-height: 24px;

    margin-right: var(--spacing-300);
}

/* overflow hidden;  */

.FAQ-item {
    min-height: var(--spacing-450);
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.FAQ-header {
    font: var(--mobile-text-preset-1);
    color: var(--purple-950);
}

/* FAQ List  */

.FAQ-list {
    margin-top: var(--spacing-300);
}

/* question container */

.question-container {
    max-height: var(--spacing-450);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

}

.question {
    min-width: 225px;
    font: var(--mobile-text-preset-2);
    color: var(--purple-950);
    margin-right: var(--spacing-300);
}

.plus-icon, .minus-icon {
    max-width: 30px;
    max-height: 30px;

}

/* answer layout and styles */

.answer {
    font: var(--mobile-text-preset-3);
    color: var(--purple-600);
    margin-top: var(--spacing-300);
    
}



/* divider */

.divider {
    border: 1px solid var(--purple-100);
    box-sizing: border-box;
    margin: var(--spacing-300) 0;
}



/* input radio li show hide logic */

/* Default: show plus hide minus */

.FAQ-item input[type="radio"] ~ .question-container .plus-icon {
    display: inline;
}

.FAQ-item input[type="radio"] ~ .question-container .minus-icon {
    display: none;
}

/* When checked: show minus, hide plus */

.FAQ-item input[type="radio"]:checked ~ .question-container .minus-icon {
    display: inline;
}

.FAQ-item input[type="radio"]:checked ~ .question-container .plus-icon {
    display: none;
}

/* answer hidden */

.answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* expand when checked:  */

.FAQ-item input[type="radio"]:checked ~ .answer{
    max-height: 300px;
}


/* img styles */

img {
    max-width: 50px;
}

/* attribution */

.attribution {
    display: none;
    font-size: 11px; text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

/* transition from mobile to desktop */

@media (min-width: 376px) {
    .background-image-desktop {
    display: block;
    max-height: 320px;
    max-width: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;

}

.background-image-mobile {
    display: none;
}
}



/* Tablet & Desktop*/
@media (min-width: 768px) {

.card {
    min-height: 565px;
    max-width: 600px;

    margin: 60.5px auto;
    padding: var(--spacing-500);

    box-shadow: 0 32px 56px 0 hsla(281, 100%, 23%, 0.1)
}

/* header  */

.FAQ-header {
    font: var(--text-preset-1);
}

.purple-star {
    max-width: 40px;
    max-height: 40px;
}



/* question container | active state */

.question:hover {
    cursor: pointer;
    color: var(--violet-600);
}

.question {
    font: var(--text-preset-2);
}

.answer {
    font: var(--text-preset-3);
}

/* FAQ-list margin-top */

.FAQ-list {
    margin-top: var(--spacing-400);
}

/* attribution */

.attribution {
    display: block;
    position: absolute;
    top: 5px;

}

.attribution a, footer {
    font: var(--mobile-text-preset-2);

    color: var(--purple-background);
    text-decoration: none;
}

.attribution a:hover {
    cursor: pointer;
    text-decoration: underline;
}   
}