/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

body {
    background-color: black
}
* {
    font-variant-ligatures: none;
}
.game--content,
.game--level-content,
.game--results-content {
    border: 1px solid;
    border-image: linear-gradient(var(--bricks-color-npbuep), var(--bricks-color-olyyze)) 1;
}
.efb-lines,
.efb-words {
    overflow: hidden !important;
}
.efb-chars {
    display: block;
}
.thousand-separator {
	margin-right: -20%
}

/* landscape orientation styles */
@media only screen and (min-width: 848px) and (orientation: landscape) {

    /* Global styles */
    .efb-logo.brxe-container {
        position: absolute;
        align-items: flex-end;
        padding-right: 0;
        padding-left: 0;
        width: auto;
        top: var(--space-s);
        right: var(--space-s);
    }


    /* Front page */
    .efb-logo {
        position: absolute !important;
    }
    .game--content {
        justify-content: space-between !important;
    }
    .splash-header {
        width: 100% !important  ;
        flex-direction: row !important;
        align-items: center !important;
    }
    .thg-logo {
        width: 50% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .splash-teaser {
        width: 50% !important;
        row-gap: var(--space-s) !important;
    }
    .screensaver {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        padding: var(--space-m) var(--space-m) var(--space-m) var(--space-xl) !important;
        column-gap: var(--space-s) !important;
    }
    .screensaver-teaser--wrapper {
        height: 100% !important;
        width: 60vw !important;
    }
    .screensaver-teaser--text {
        font-size: var(--step-6) !important;
        top: 10% !important;
        text-align: left !important;
    }
    .screensaver-teaser--wrapper {
        padding-left: var(--space-m) !important;
    }
    .screensaver-teaser--text {
        padding: 0 !important;
        position: relative !important;
        top: 0 !important;
    }
    .screensaver-leaf {
        width: 50vh !important;
        max-height: 60vh !important;
    }


    /* Quiz page styles */
    .game--level-content,
    .game--results-content {
        padding: var(--space-xs) !important;
    }
    .game--level-quiz {
        padding: 0 0 var(--space-m) 0 !important;
    }
    body .gform_wrapper .gquiz-field legend {
        font-size: var(--step-2) !important;
        margin-bottom: var(--space-s) !important;
        display: block !important;
    }
    body .gform_wrapper .ginput_container_radio .gfield_radio .gchoice {
        height: calc(var(--step-0) * 6) !important;
        width: 100% !important;
    }
    body .gform_wrapper .ginput_container_radio .gfield_radio .gform-field-label {
        padding: var(--space-xs) !important;
        font-size: var(--step-0) !important;
    }
    .gform_wrapper .ginput_container_radio .gfield_radio .gform-field-label span {
        font-size: var(--step-5) !important;
    }
    .game--level-quiz--title--level {
        font-size: var(--step-4) !important;
    }
    .game--level-quiz--title {
        margin-bottom: var(--space-2xs) !important;
    }
    body .ginput_container_radio .gfield_radio {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    body .gform_wrapper .gquiz-answer-explanation {
        font-size: var(--step--1) !important;
        padding: var(--space-s) var(--space-s) var(--space-m) var(--space-s) !important;
    }
    .gform_wrapper .gquiz-answer-explanation.visible {
        transform: translateX(-50%) translateY(-58%) !important;  
		top: 50% !important
    }
    .restart-button-wrapper {
        right: var(--space-m) !important;
        bottom: var(--space-m) !important;
    }
   body .gform_wrapper .gfield--input-type-name {
        flex-flow: column wrap !important;
        grid-column: 1 / 6 !important;
    }
    body .gform_wrapper .gfield--type-email {
        grid-column: 7 / 12 !important;
    }
   

    /* Results page styles */
    .game--results--pass,
    .game--results--fail {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: var(--space-s) 0 0 0 !important;
    }
    .game--result--badge {
        width: 40% !important;
    }
    .game--result--details {
        width: 60% !important;
    }
    .game--result-title--wrapper {
        row-gap: 0 !important;
        margin-bottom: var(--space-xs) !important;
    }
    .game--result-subtitle {
        font-size: var(--step-2) !important;
        margin-bottom: var(--space-2xs) !important;
    }
    .game--result-title {
        font-size: var(--step-6) !important;
        line-height: 0.9 !important;
    }
    .thg-button--text {
        font-size: var(--step-3) !important;
    }
    .game--results {
        padding-bottom: 0 !important;
    }


    /* Next button styling */
    body .gform_wrapper form .gform_page_footer .gform-theme-button,
    body .gform_wrapper form .gform_page_footer .gform-theme-button:hover,
    body .gform_wrapper form .gform_page_footer .gform-theme-button:focus,
    body .gform_wrapper form .gform_page_footer .gform_button,
    body .gform_wrapper form .gform_page_footer .gform_button:hover,
    body .gform_wrapper form .gform_page_footer .gform_button:focus {
        padding: var(--space-2xs) var(--space-s) !important;
    }
}