/*
    styled using css-grid:
    1. https://css-tricks.com/snippets/css/complete-guide-grid/
    2. https://www.w3.org/TR/css-align-3/#overview
    3. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
    4. https://codepen.io/komuw/pen/rvbPdw
    5. https://stackoverflow.com/questions/56463897/css-grid-align-vertically-and-horizontally-without-disturbing-background-color-o
    6. https://codepen.io/komuw/pen/YzvzGmp
    7. https://www.youtube.com/watch?v=rg7Fvvl3taU
    8. https://ishadeed.com/article/css-grid-area/
    9. https://cssgridgarden.com/
 
    more docs:
    - https://www.swyx.io/css-100-bytes
    - https://news.ycombinator.com/item?id=32972768
    - https://github.com/andybrewer/mvp
    - https://www.joshwcomeau.com/css/full-bleed/
    - https://www.joshwcomeau.com/css/custom-css-reset/
    - https://elad2412.github.io/the-new-css-reset/ (MIT)
    - https://unpkg.com/mvp.css@1.12/mvp.css
*/

/*
  We can do the import like this.
  But we want this file to also be cached by browsers using `benbjohnson/hashfs`
  Hence we have the html files importing this file instead.
@import "css_reset.css";
*/

@media (max-width: 767px) {

    /* applies if your viewport width is equal to or less than 720px */
    .container {
        grid-template-columns: 1fr;

        /* TODO: komu fix for small devices */
        grid-template-areas:
            "row1-header"
            "row2-main1"
            "row2-sidebar2";
    }
}


@media (min-width: 768px) {
    .container {
        grid-template-columns:
            [column1-start] minmax(0, 1fr) [column1-end] minmax(0, 8fr) [column2-end] minmax(0, 3fr) [column3-end];

        grid-template-areas:
            "row1-header    row1-header row1-header"
            "row2-sidebar1  row2-main1  row2-sidebar2";
    }
}

.container {
    /* grid | inline-grid | subgrid; */
    display: grid;


    /* this two may not be needed */
    grid-column-gap: 4px;
    grid-row-gap: 4px;

    /* start | end | center | stretch; */
    /* align, content inside a grid item, along horizontal ie to the left or right */
    justify-items: stretch;

    /* start | end | center | stretch; */
    /* align, content inside a grid item, top or bottom */
    align-items: stretch;

    /* start | end | center | stretch | space-around | space-between | space-evenly; */
    /* sets the alignment of the grid within the grid container. left or right.
        esp if ua grid is less than the size of its grid container*/

    /* aligns the contents of the box as a whole within the box itself. left or right.
    it effectively adjusts padding. - https://www.w3.org/TR/css-align-3/#overview
    */
    justify-content: stretch;

    /* start | end | center | stretch | space-around | space-between | space-evenly; */
    /* sets the alignment of the grid within the grid container. top or bottom.
        esp if ua grid is less than the size of its grid container*/

    /* aligns the contents of the box as a whole within the box itself. top or bottom.
    it effectively adjusts padding. - https://www.w3.org/TR/css-align-3/#overview
    */
    align-content: stretch;


    /*
    1. The justify-content property controls the alignment of grid tracks (columns or rows). 
    It is set on the grid container. 
    It does not apply to or control the alignment of grid items.
    
    2. The justify-items property controls the alignment of grid items. 
    It is set on the grid container.

    3. The justify-self property controls the alignment of grid items.
    It is set on grid items. 
    Basically, justify-self overrides the justify-items command (coming from the parent) on individual items.

    4. align-content, align-items and align-self
    These properties do the same as their justify-* counterparts, but in the perpendicular direction. 
      align-self: stretch
        Makes the background-color to fill the whole area.

    - https: //stackoverflow.com/a/48571889/2768067
        */
}


html {
    /* padding: 1em 1em; */
    margin: auto;
    font-size: 1.25rem;
    /* TODO: komu, increase font size and line-height */
    line-height: 1.5;
    /* Break at word boundaries if possible */
    word-break: break-word;
}

form {
    margin: 0 auto;
}

input,
textarea,
select {
    display: block;
    /* Makes each input occupy its own line */
    width: 100%;
    /* Optional, makes inputs take full available width */
    margin-bottom: 10px;
    /* Adds space between inputs */
}


/* ROW 1 */
.row1-header {
    grid-area: row1-header;
    justify-self: center;
}

/* ROW 1 */

/* ROW 2 */
.row2-sidebar1 {
    grid-area: row2-sidebar1;
    background-color: rgb(247 250 252);
}

.row2-main1 {
    grid-area: row2-main1;
    background-color: rgb(247 250 252);
}

.row2-sidebar2 {
    grid-area: row2-sidebar2;
    background-color: rgb(247 250 252);
}

/* ROW 2 */


/* sticky-tables: https://github.com/andybrewer/mvp/issues/113 */
th {
    position: sticky;
    top: 0;
    background: black;
    color: white;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.big-button {
    width: 200px;
    height: 80px;
    font-size: 24px;
}

.success-message {
    color: #066d1e;
}

/* display radio buttons on same line. */
input[type="radio"] {
    display: inline-block;
    width: 15px;
    margin-right: 20px;
}

.hide-review-answer {
    filter: brightness(0);
    opacity: 0;
    /* display: none; */
}

.hidden {
    display: none;
}


/* Handles menu dropdown  */
.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown-content {
    display: none;
    position: absolute;
    background: #f9f9f9;
    min-width: 120px;
}

.menu-dropdown-content a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: black;
}

.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}

/* Handles menu dropdown  */


#sign-up-tos-text {
    color: grey;
    font-size: medium;
}