/**** faq ****/
section.faq {
    /* sizing */
    min-height: 60vh;
}

section.faq * {
    margin: 0;
}

section.faq .container {}

/*** header ***/
section.faq .header {
    /* position */
    position: relative;

    /* sizing */
    width: 100%;
    height: min(400px, max(40vh, 200px));

    /* flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;

    /* styling */
    background-color: var(--tertiary-color);
    color: var(--primary-text-color);

    /* text */
    font-size: min(16px, max(2vw, 12px));
    font-weight: 600;
    line-height: 0.9;
    text-align: center;
}

section.faq .header h1 {
    /* position */
    position: relative;
    z-index: 1;

    /* text */
    font-size: min(35px, max(4vw, 25px));
    font-weight: 800;
    line-height: 1;
    text-align: center;

    /* styling */
    color: var(--primary-text-color);

    /* transition*/
    transition: color var(--transition-duration) var(--transition-method);
}

section.faq .header h2 {
    /* position */
    position: relative;
    z-index: 1;

    /* text */
    font-size: min(25px, max(3vw, 20px));
    font-weight: 700;
    line-height: 1;
    text-align: center;

    /* styling */
    color: var(--primary-text-color);

    /* transition*/
    transition: color var(--transition-duration) var(--transition-method);
}

section.faq .header img {
    /* position */
    position: absolute;
    inset: 0;
    z-index: 0;

    /* sizing */
    width: 100%;
    height: 100%;

    /* styling */
    overflow: hidden;

    /* image */
    object-fit: cover;
}

/*** questions ***/
section.faq .questions {
    /* spacing */
    margin: 50px 0;

    /* flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
}

section.faq .question {
    /* position */
    position: relative;

    /* sizing */
    width: 100%;

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

    /* styling */    
    color: var(--primary-text-color);

}

/** default **/
section.faq .question a {
    /* position */
    position: relative;
    z-index: 2;

    /* sizing */
    width: 100%;
    padding: 10px 30px;

    /* flex */
    display: flex;
    justify-content: left;
    align-items: center;

    /* styling */
    border-radius: var(--faq-radius);
    background-color: var(--secondary-color);
    color: inherit;
}

section.faq .question svg {
    /* sizing */
    width: 25px;
    height: 25px;

    /* position */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) scaleY(1);
    z-index: 3;

    /* styling */
    color: inherit;
    fill: currentColor;

    /* transition*/
    transition: transform calc(var(--transition-duration) * 2) var(--transition-method);
}

section.faq .awnser {
    /* position */
    position: absolute;
    inset: 0;
    top: auto;
    z-index: 1;

    /* sizing */
    width: 100%;
    padding: 10px 30px;
    padding-top: 20px;
    margin-top: -10px;

    /* flex */
    display: flex;
    justify-content: left;
    align-items: center;

    /* styling */
    border-radius: var(--faq-radius);
    background-color: var(--tertiary-color);
    
    /* transition*/
    transform: translateY(0);
    opacity: 0;
    transition: transform var(--transition-duration) var(--transition-method), opacity var(--transition-duration) var(--transition-method);
}

/** href active **/
section.faq .question:target a {
    /* position */
    z-index: 4;
}

section.faq .question:target svg {
    /* transition*/
    transform: translateY(-50%) scaleY(-1);

    /* position */
    z-index: 5;
}

section.faq .question:target .awnser {
    /* position */
    z-index: 3;
    color: red;

    /* transition*/
    transform: translateY(calc(100% - 10px));
    opacity: 1;
}