/* 
Jacob Brodeur - Team CARP
ISTE.240.01 - Team Website
11.24.24
*/

/* general class used to center elements */
.center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* general class to align items to bottom */
.bottomAlign {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* common 12 column grid used across the site */
.col12 {
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 80%;
    row-gap: 20px;
    column-gap: 20px;
}

/* added the appropriately styled background to objects with associated class */
.contentBG {
    background-color: #ACDCE040;
    border-radius: 8px;
    padding: 20px 32px 28px 32px;
}

/* Layout styling for content of each principle, 2 rows */
.principleContent {
    grid-template-rows: auto auto;
}

/* defines styles for bubble graphic */
#bubble1 img, #bubble2 img{
    height: 285px;
    margin: auto;
    display: block;
}

/* positioning for definition, application, and bubble graphic content on principles pages */
.definition {
    grid-column: 1 / span 9;
}

#bubble1 {
    grid-column: 11 / span 2;
}

#bubble2 {
    grid-column: 1 / span 2;
}

.application {
    grid-column: 4 / span 9;
}

/* General universal example formatting */
.example{
    margin-top: 20px;
    margin-bottom: 20px;
}

.example h2, .example h3 {
    text-align: center;
}


/* Formatting for contrast examples */
.example.contrast {
    grid-template-rows: repeat(2, 1fr);
    /* min-width: 470px; */
}

.example.contrast .good_example, .example.contrast .bad_example {
    grid-column: 1 / span 12;
    
}

.example.contrast img {
    width: 45%;
}


/* Formatting for alignment examples */
.example.alignment .good_example {
    grid-column: 1 / span 6;
}

.example.alignment .bad_example {
    grid-column: 7 / span 6;
}

.example.alignment img {
    margin: auto;
    display: block;
    width: 100%;
    object-fit: contain;
}


/* Formatting for repetition examples */
.example.repetition {
    grid-template-rows: auto auto;
    
}

.example.repetition .good_example, .example.repetition .bad_example {
    grid-column: 1 / span 12;

    width: 100%;
    
    height: fit-content;

    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 20px;
}

.example.repetition .good_example h2, .example.repetition .bad_example h2 {
    width: 100%;
    flex-basis: 100%;
    grid-column: 1 / span 3;
}

.good_example .repetition_example{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 13em 5em auto;
    row-gap: 20px;
}

.bad_example .repetition_example {
    display: flex;
    flex-direction: column;
}

.repetition_example img {
    margin: auto;
    display: block;
    width: 100%;
    object-fit: scale-down;
}


/* Formatting for proximity examples */
.example.proximity {
    grid-template-rows: auto auto;
}

.example.proximity .good_example, .example.proximity .bad_example {
    grid-column: 1 / span 12;
    
}

.example.proximity img {
    width: 100%;
    object-fit: contain;
}

.mobileImg {
    display: none;
}


/* Formatting and Styling for Contrast Checker */
#checker_contents {
    grid-column: 1 / span 12;

    display: grid;
    grid-template-columns: 40% 25% 25%;
    grid-template-rows: auto auto auto auto;
    column-gap: 20px;
    row-gap: 20px;
    margin-bottom: 20px;
    
}

.colorInput {
    width: 100%;
    height: 100%;
}

.colorSelectLabel {
    width: 100%;
    text-align: center;
    align-self: flex-end;
    justify-self: center;
}

label h6, #contrast_results h6{
    text-decoration: none;
}

#sampleText {
    width: 100%;
    max-width: 100%;

    height: 100%;

    border-radius: 8px;
    border: none;
    padding: 10px;
}

#contrast_results {
    grid-column: 2 / span 2;
}


/* Adjusts styling and layout for mobile devices (<767px) */
@media (max-width:768px) {
    .col12 {
        width: 100%;
    }
    
    /* removes bubbles and centers the definition and application on the page */
    #bubble1, #bubble2 {
        display: none;
    }
    
    .definition, .application {
        grid-column: 1 / span 12;
    }

    /* Updates layout of contrast examples to column */
    .example.contrast .center {
        flex-direction: column;
    }

    .example.contrast img {
        width: 100%;
    }

    /* Changes layout of contrast checker for a streamlined mobile experience */
    #checker_contents {
        display: grid;
        grid-template-areas: 
            "head head"
            "instructions instructions"
            "bgLabel textLabel"
            "bgPicker textPicker"
            "sampleText sampleText"
            "results results";
        grid-template-columns: 50% 50%;
        grid-template-rows: repeat(6, auto);
    }

    #contrastHeader {
        grid-area: head;
        order: 0;
    }

    #contrastInstructions {
        grid-area: instructions;
        order: 0;
    }

    #bgLabel{
        grid-area: bgLabel;
        order: 1;
    }

    #textLabel{
        grid-area: textLabel;
        order: 1;
    }

    #bgColor {
        grid-area: bgPicker;
        order: 2;
        width: 100%;
        height: 5em;
    }

    #textColor {
        grid-area: textPicker;
        order: 2;
        width: 100%;
        height: 5em;
    }

    #sampleText {
        grid-area: sampleText;
        order: 3;
    }

    #contrast_results {
        grid-area: results;
        order: 4;
    }

    /* updates layout of alignment examples to one column */
    .example.alignment .good_example {
        grid-column: 1 / span 12;
    }
    
    .example.alignment .bad_example {
        grid-column: 1 / span 12;
    }

    /* updates layout of repetition examples */
    .example.repetition .good_example, .example.repetition .bad_example {
        grid-template-columns: auto;
        row-gap: 20px;
    }
    
    .example.repetition .good_example h2, .example.repetition .bad_example h2 {
        grid-column: 1 / span 1;      
    }
    
    .good_example .repetition_example{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 10em auto auto;
    }

    .good_example .repetition_example img {
        order: 1;
    }

    .good_example .repetition_example p {
        order: 3;
    }

    .good_example .repetition_example h3 {
        order: 2;
    }
    
    .bad_example .repetition_example {
        display: flex;
        flex-direction: column;
    }
    
    .repetition_example img {
        margin: auto;
        display: block;
        height: 100%;
        object-fit: scale-down;
    }

    /* updates layout of proximity examples */
    .desktopImg {
        display: none;
    }

    .mobileImg {
        display: block;
    }

}