/* 
*
* stijl voor Brafoer 
*
*/
:root {

    /* basis config */
    --bodyFontFamily: 'Inconsolata', sans-serif;
    --bodyFontSize: 1em;
    --bodyFontColor: rgb(103, 103, 103);
    --bodyBackground: url('/theme/brafoer/img/background.webp') no-repeat center center/cover;
    --bodyBackgroundColor: #535353;
    --bodyBackgroundShadow: inset 0 0 0 1000px rgba(0,0,0,.6);

    /* tekst: inloggen webmail */
    --headerFontFamily: 'Brafoer', sans-serif;
    --headerFontSize: 4em;
    --headerFontColor: #687d92;
    --headerFontWeight: 400;
    --headerFontTransform: uppercase;
    --headerMargin: 0 0 30px 0;

    /* test: Welkom! */
    --subheaderFontFamily: 'Gotham', sans-serif;
    --subheaderFontSize: 2.5em;
    --subheaderFontColor: #687d92;
    --subheaderFontWeight: 400;
    --subheaderMarginBottom: 20px;

    /* afmetingen witte box */
    --cardWrapperWidth: 1000px;
    --cardWrapperHeight: fit-content;
    --cardWrapperPadding: 50px;
    --cardWrapperBackground: #FFFFFF;

    /* linker gedeelte met logos */
    --cardHeaderWidth: 265px;
    --cardHeaderBackground: none;
    --cardHeaderBorderRadius: 0;
    --cardHeaderShadow: none; /*0 20px 60px 0 rgba(14, 14, 14, 0.55);*/

    --cardHeaderHeroImage: url('/theme/brafoer/img/hero.webp') no-repeat center;
    --cardHeaderHeroSize: 800px;
    --cardHeaderHeroWidth: var(--cardHeaderWidth);
    --cardHeaderHeroHeight: var(--cardHeaderWidth);

    --cardHeaderLogoImage: url('/theme/brafoer/img/logo.webp') no-repeat bottom;
    --cardHeaderLogoSize: contain;
    --cardHeaderLogoWidth: var(--cardHeaderWidth);
    --cardHeaderLogoHeight: calc(var(--cardHeaderWidth) / 2);

    --cardHeaderLogoImgWidth: 100%;
    --cardHeaderLogoImgHeight: 100%;

    --cardBodyBackground: transparent;
    --cardBodyBorderRadius: 0;
    --cardBodyShadow: none;
    --cardBodyFontSize: 1em;
    --cardBodyPaddingLeft: 20px;

    --listMargin: 0 0 20px 0;

    --listGridColumnsTemplate: min-content minmax(100px, 500px);
    --listGridColumnsGap: 10px;
    --listGridRowsGap: 20px;

    --listGridDecoratorColor: #687d92;
    --listGridDecoratorShape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    --listGridDecoratorWidth: 35px;
    --listGridDecoratorHeight: 35px;
    --listGridDecoratorFontColor: #FFFFFF;
    --listGridDecoratorFontSize: 1em;
    --listGridDecoratorFontWeight: 600;

    --buttonBackground: #FFFFFF;
    --buttonBorder: 2px solid #525151;
    --buttonPadding: 0.8em 2.5em;
    --buttonMargin: 20px 0 0 0;
    --buttonFontColor: #525151;
    --buttonFontFamily: 'GothamBold', sans-serif;
    --buttonFontSize: 1em;
    --buttonFontWeight: 800;
    --buttonShadow: none;
    --buttonBackgroundHover: #525151;
    --buttonFontColorHover: #FFFFFF;

    --cardFooterSeparator: 0;
    --cardFooterBackground: transparent;
    --cardFooterMargin: 30px 0 0 0;

    --progressWrapperMargin: 20px 0 0 0;

    --progressBarHeight: 10px;
    --progressBarBorder: none;
    --progressBarBorderRadius: 0;
    --progressBarBackground: #ACAFAE;
    --progressBarColor: #687d92;
    --progressBarFontColor: #FFFFFF;
    --progressBarFontSize: 11px;
    --progressBarShadow: none; /*0 0 5px #687d92*/
}


@font-face {
    font-family: 'Inconsolata';
    src: url('Inconsolata-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Gotham';
    src: url('GothamLight.ttf') format('truetype');
}

@font-face {
    font-family: 'GothamBold';
    src: url('GothamBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Brafoer';
    src: url('California-Medium.woff2') format('woff2'),
        url('California-Medium.woff') format('woff'),
        url('California-Medium.ttf') format('truetype');
}

@media screen and (max-width: 768px) {

    :root {
        /* --cardWrapperWidth: 85vw;
        --cardWrapperHeight: 90vh; */
        --cardWrapperPadding: 30px;

        --cardBodyPaddingLeft: 0;

        --cardHeaderHeroWidth: 180px;
        --cardHeaderHeroHeight: 180px;

        --cardHeaderLogoWidth: 180px;

        --headerFontSize: 2.5em;
        --headerMargin: 10px 0;
        --subheaderFontSize: 1.5em;
        --headerMarginBottom: 10px;

        --listGridRowsGap: 15px;

        --listMargin: 0 0 15px 0;
        --buttonMargin: 15px 0 0 0;
        --cardFooterMargin: 20px 0 0 0;
        --progressWrapperMargin: 10px 0 0 0;
    }

    #wrapper-card {
        max-width: 85vw;
        max-height: 90vh;
    }

}