/*
Theme Name: Reality:Check
Theme URI: http://example.com/
Author: Henni Wiesner
Author URI: http://itsjustletters.de
Description: Web-Archive for Interviews
Version: 1.0
*/

root,
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: "Amilia", sans-serif;
    font-weight: normal;
    --fontSizeXXL: 140px;
    --fontSizeL: 30px;
    --fontSizeLMiku: 33px;
    --fontSizeM: 20px;
    --fontSizeMS: 16px;
    --fontSizeS: 14px;
    --leadingXXL: 120px;
    --leadingL: 30px;
    --leadingM: 34px;
    --leadingS: 20px;
    --spacing03: 0.03em;
    --spacing10: 0.1em;
    --spacing20: 0.2em;
    --spacing30: 0.3em;
    --spacing40: 0.4em;
    --colorText: #02130f;
    --colorBlue: #0078bf;
    --paddingInterview: calc(100% - 670px - 30px);
    /*rgba(68, 214, 44, 1)*/
    --colorFlrGreen: #44d62c;
    /*rgba(255, 116, 11, 1)*/
    --colorFlrPink: #ff48b0;
    /*rgba(255, 72, 176, 1)*/
    --colorWhite: #fff;
    margin: 0;
}

/* Fonts */

h1 {
    font-family: "MikuMiku";
    font-weight: normal;
    font-size: var(--fontSizeXXL);
    line-height: var(--leadingXXL);
    color: var(--colorVar);
    margin-top: 10px;
    margin-bottom: 80px;
    font-feature-settings: 'liga'1, 'dlig'1;
}

h2 {
    font-family: "Amilia Mono";
    font-weight: normal;
    font-size: var(--fontSizeS);
    line-height: var(--leadingS);
    text-transform: uppercase;
    color: var(--colorText);
    margin-top: 10px;
    margin-bottom: 10px;
    font-feature-settings: 'liga'1, 'dlig'1;
}

p {
    font-size: var(--fontSizeM);
    line-height: var(--leadingM);
    letter-spacing: var(--spacing03);
    font-feature-settings: 'ss01'1, 'liga'1;
    color: var(--colorText);
    margin-top: 0;
    margin-bottom: 0;

}

a {
    text-decoration: none;
    color: inherit;
}

.rc-small-mono {
    font-family: "Amilia Mono";
    font-size: var(--fontSizeS);
    line-height: var(--leadingS);
    letter-spacing: 0;
}

@media (max-width: 767.98px) {

    root,
    body {
        --fontSizeXXL: 72px;
        --fontSizeL: 20px;
        --fontSizeLMiku: 23px;
        --fontSizeM: 14px;
        --fontSizeS: 10px;
        --leadingXXL: 56px;
        --leadingL: 30px;
        --leadingM: 26px;
        --leadingS: 15px;
    }

    h1 {
        margin-bottom: 40px;
    }
}

/* Header */

header {
    padding-top: 10px;
    border-bottom: 2px solid var(--colorText);
    background-color: var(--colorWhite);
    position: sticky;
    top: 0;
    box-shadow: 0 10px 40px var(--colorVar);
    z-index: 10;
}

:is(.page) {
    --colorVar: var(--colorBlue);
}

:is(.category-student, .student) {
    --colorVar: var(--colorFlrGreen);
}

:is(.category-alumni, .alumni) {
    --colorVar: var(--colorFlrPink);
}

header > p:has(.rc-nav-title) {
    font-family: "MikuMiku";
    font-size: var(--fontSizeLMiku);
    line-height: var(--leadingL);
    letter-spacing: var(--spacing40);
    text-transform: uppercase;
    height: 30px;
}

.rc-nav-title-2 {
    font-family: "Amilia";
    font-size: var(--fontSizeL);
}

nav {
    margin: 10px 0;
    height: auto;
}

nav ul {
    display: flex;
    flex-direction: row;
    column-gap: 30px;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* Footer */
/*footer {
    position: sticky;
    bottom: 0;
}*/

footer p {
    text-align: center;
    margin-top: 120px;
}

/* General */
main,
header > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 960px;
}

@media (max-width: 767.98px) {

    main,
    header > * {
        margin-left: 4px;
        margin-right: 4px;
    }
}

/* Page */
.page article p {
    margin-bottom: 30px;
    max-width: 700px;
}

/* Category */
.rc-cat-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.rc-cat-post-item {
    width: calc(50% - 10px);
}

.rc-cat-post-item a {
    color: var(--colorVar);
}


/* Category Shortcode */
.rc-cat-list-wrapper {
    display: flex;
    flex-direction: column;
    width: calc(50% - 10px);
}



.wp-block-group:has(.rc-cat-list) {
    align-items: flex-start;
    gap: 20px;
}

.rc-cat-list {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.rc-cat-list.alumni {
    color: var(--colorFlrPink);
}

.rc-cat-list.student {
    color: var(--colorFlrGreen);
}

.rc-cat-list li {
    margin-bottom: 10px;
}

/* Single Post*/
article {
    margin-top: 40px;
}

.title-info {
    font-family: "Amilia Mono";
    font-size: var(--fontSizeL);
    line-height: var(--leadingL);
    letter-spacing: var(--spacing10);
    text-transform: uppercase;
    color: var(--colorWhite);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--colorVar);
    paint-order: stroke fill;
    list-style: none;
}

.title-info:last-of-type {
    margin-bottom: 10px;
}

/* rc-stats element */
.rc-stats-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    margin: 0 calc((100vw - 960px) / 2 * -1);
    padding: 20px;
    border-top: 1px solid var(--colorText);
    border-bottom: 1px solid var(--colorText);
}

.rc-stats-item {
    width: calc(20% - 16px);
}

.rc-stats-item p:first-of-type {
    text-transform: uppercase;
}

.rc-stats-wrapper a {
    color: var(--colorVar);
}

@media (max-width: 999.98px) {
    .rc-stats-wrapper {
        margin: 0 -4px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 767.98px) {
    .title-info {
        letter-spacing: 0;
        -webkit-text-stroke-width: 1px;
    }

    .rc-stats-wrapper {
        padding-left: 4px;
        padding-right: 4px;
    }

    .rc-stats-item {
        width: calc(33% - 16px);

    }
}

@media (max-width: 480px) {
    .rc-stats-item {
        width: calc(50% - 16px);
    }
}

/* Interview Formats */
.rc-interview-question {
    font-size: calc(var(--fontSizeM) * 0.9);
    line-height: var(--leadingM);
    letter-spacing: var(--spacing10);
    text-transform: uppercase;
    padding: 0 0 0 var(--paddingInterview);
    max-width: 780px;
}

.rc-interview-question + .rc-interview-answer {
    margin-top: 20px;
}

.rc-interview-question.rc-interview-initial {
    padding-top: 20px;
    position: relative;
}

/* Animate Q Initial */
.rc-interview-question.rc-interview-initial:before {
    content: "Q";
    font-family: "MikuMiku";
    font-size: var(--fontSizeL);
    line-break: var(--leadingM);
    position: absolute;
    top: 20px;
    left: calc(var(--paddingInterview) - 40px);
    transition: all 1.2s ease-out;
}

.rc-interview-question.rc-interview-initial.rc-anim-end:before {
    left: 0px;
}

/* Animate Q Initial Line */
.rc-interview-question.rc-interview-initial:after {
    content: "";
    height: 1px;
    width: 0px;
    background-color: var(--colorText);
    position: absolute;
    top: 34px;
    left: calc(var(--paddingInterview) - 40px);
    transition: all 1.5s ease-out;
}

.rc-interview-question.rc-interview-initial.rc-anim-end:after {
    width: calc(var(--paddingInterview) - 50px);
    left: 40px;
}

.rc-interview-answer + .rc-interview-question {
    margin-top: 20px;
    border-top: 1px solid var(--colorText);
}


.rc-interview-answer {
    padding: 0 var(--paddingInterview) 0 0;

}

p:is(.rc-interview-answer, .rc-interview-question):not(.rc-interview-initial) {
    text-indent: 40px;
}

.rc-interview-answer.rc-interview-initial {
    padding-top: 20px;
    border-top: 1px solid var(--colorText);
    position: relative;
}

/* Animate A Initial */
.rc-interview-answer.rc-interview-initial:before {
    content: "A";
    font-family: "MikuMiku";
    font-size: var(--fontSizeL);
    line-break: var(--leadingM);
    position: absolute;
    top: 20px;
    right: calc(var(--paddingInterview) - 40px);
    transition: all 1.2s ease-in;
}

.rc-interview-answer.rc-interview-initial.rc-anim-end:before {
    right: 0px;
}

/* Animate A Initial Line */
.rc-interview-answer.rc-interview-initial:after {
    content: "";
    height: 1px;
    width: 0px;
    background-color: var(--colorText);
    position: absolute;
    top: 34px;
    right: calc(var(--paddingInterview) - 40px);
    transition: all 1.5s ease-in;
}

.rc-interview-answer.rc-interview-initial.rc-anim-end:after {
    width: calc(var(--paddingInterview) - 50px);
    right: 40px;
}

@media (max-width: 767.98px) {

    .rc-interview-answer.rc-interview-initial,
    .rc-interview-answer + .rc-interview-question {
        border-top: none;
    }

    .rc-stats-wrapper {
        border-bottom: none;
    }

    .rc-interview-answer,
    .rc-interview-question {
        padding: 0;

    }

    /* Animate A/Q Initial */
    :is(.rc-interview-answer, .rc-interview-question).rc-interview-initial:before {
        text-align: center;
        color: var(--colorVar);
        background-color: var(--colorWhite);
        width: 24px;
        top: -14px;
        left: calc(50% - 12px);
        right: unset;
    }

    :is(.rc-interview-answer, .rc-interview-question).rc-interview-initial.rc-anim-end:before {
        left: calc(50% - 12px);
        right: unset;
    }

    /* Animate A/Q Initial Line */
    :is(.rc-interview-answer, .rc-interview-question).rc-interview-initial:after {
        top: 0;
        left: 50%;
        right: unset;
        transition: all 1.5s ease-in;
        z-index: -1;
    }

    :is(.rc-interview-answer, .rc-interview-question).rc-interview-initial.rc-anim-end:after {
        width: 100vw;
        left: -4px;
        right: unset;
    }
}