@import 'sitewide_constants.css';

/*
 * TOP AND BOTTOM
 * We have a two-part background image,
 * a dark area for a header/intro text that must be brief,
 * and lighter large area for the main content.
 */

.yourwaterworksheet, .yourwaterresultspanel {
    background: url(/wp-content/themes/watertool/images/bluewave-top-fullwidth.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 -15px;

    background-color: var(--verylightblue);

    min-height: 500px;

    padding-bottom: 2em;

    .headercontent {
        color: white;
        font-weight: 700;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 110px;  
        padding: 10px 10px 0 10px;  /* height of the dark blue wavy part of the background image*/
        margin-bottom: 16px;
        // border-bottom: 16px solid #3a99d0;
    }

    hr {
        border-top: 1px solid var(--verydarkblue);
    }

    i {
        color: inherit;
    }

    h1, h2, h3 {
        color: var(--verydarkblue);
    }

    h2 {
        font-size: 25px;
        font-weight: 600;
    }

    h3 {
        font-size: 25px;
    }

    strong {
        font-size: 15px;
    }
}


.yourwaterworksheet {
    p.addressstatus {
        font-weight: var(--bold);
        color: var(--verydarkblue);
        font-size: 16px;
        text-align: center;
    }

    label.radiobox {  /* hide the real radiobox, show these pretty rectangles */
        display: inline-block;
        padding: 6px 10px 6px 10px;
        border: 2px solid var(--verydarkblue);
        background-color: var(--verydarkblue);
        color: var(--white);
        border-radius: 5px;

        cursor: pointer;

        margin-top: 10px;

        input {
            display: none;
        }

        &:hover {
            background-color: var(--verydarkblue);
            color: var(--midblue);
        }

        &.checked {
            background-color: var(--verydarkblue);
            color: var(--midblue);
        }
    }

    label {
        margin-bottom: 5px;
        font-size: 18px;
    }

    input[name="address"] {
        width: 250px;

        border-radius: 5px;

        border: 0 none transparent;

        font-size: 15px;
        height: 35px;

        padding: 10px 10px 10px 10px;

        margin-top: 5px;
    }

    button {
        font-size: 25px;
        padding: 6px 10px 6px 10px;
        border: 2px solid var(--verydarkblue);
        background-color: var(--verydarkblue);
        color: var(--white);
        border-radius: 5px;

        cursor: pointer;

        margin-top: 5px;

        &:hover {
            color: var(--midblue);
        }

        &[disabled] {
            background-color: var(--darkblue);
            color: var(--verylightblue);
            border: 2px solid var(--darkblue);
            opacity: .5;
            cursor: not-allowed;
        }
    }

    .formcontent {
        @media screen and (min-width: 768px) {
            width: 75%;
            margin: auto;
        }
    }
}


.yourwaterresultspanel {
    .results-backbutton {
        text-align: right;

        margin-bottom: 1em;
        padding-right: 15px;
        padding-top: 15px;

        a, a:hover, a:active {
            color: var(--verydarkblue !important);
            text-decoration: none !important;
        }
    }

    .resultscontent {
    }

    .mapcaption {
        font-size: 13px;
        font-style: italic;
    }

    .whiteborder {
        border: 2px solid var(--verydarkblue);
        padding: 0.75em;
        margin-bottom: 1em;
    }

    .whiteborder ul:last-child {
        margin-bottom: 0;
    }
}


.results-map {
    width: 100%;

    height: 100%;
    min-height: 3in;
    max-height: 5in;

    border: 1px solid var(--verydarkblue);
    cursor: pointer;  /* there is a click handler to forward them to Our Water, let the cursor show it */

    a {  /* this is in a .wavybox so the links are underlined; sigh */
        text-decoration: none !important;
        color: black !important;
    }
}



/* BS columns have some limitations when the content height changes, or varied widely; this helper class hacks around that */
.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}