@import 'sitewide_constants.css';

:root {
    --sidebar-width: 500px;  /* Spanish is more verbose than English, bottom buttons and area titles are longe/wider */
}

/*
 * WP ADMIN BAR HACKS
 * if you're using this while logged in, WP's admin bar is a huge nuisance
 */

#wpadminbar {
    display: none !important;
}
html {
    margin-top: 0 !important;
}


/*
 * LOADING...
 */

#Loading {
    width: 100%;
    text-align: center;
    padding-top: 40vh;
}


/*
 * BASIC SIDEBAR AND MAP CONCEPT
 */

body {
    background-color: var(--white);
    max-height: 100vh;
    overflow-y: hidden;
}

#SidebarAndMap {
    height: 100vh;
}

#Map {
    height: 100%; /* match to #Sidebar */
    width: 100%;
    float: left;

    cursor: crosshair; /* cuz there's a click handler */

    &.WithSidebar {
        width: calc(100% - var(--sidebar-width)); /* see also Sidebar */

        @media screen and (max-width: 700px) {  /* mobile, Sidebar isn't on the side but full-size, so Map.WithSidebar is hidden */
            visibility: hidden;
        }
    }
}

#Sidebar {
    height: 100%; /* match to #Map */
    width: var(--sidebar-width); /* see also Map */
    float: left;

    @media screen and (max-width: 700px) {  /* mobile, Sidebar isn't on the side but full-size */
        width: 100%;
    }
}

#Map div.sidebar-opener {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    background-color: var(--white);
    border-bottom-right-radius: 5px;
    padding: 5px 10px 5px 10px;
    cursor: pointer;

    i {
        font-size: 28px;
        color: black;
    }
}

#Sidebar div.sidebar-closer {
    position: absolute;
    top: 0;
    left: var(--sidebar-width);
    z-index: 1000;

    background-color: var(--white);
    border-bottom-right-radius: 5px;
    padding: 5px 10px 5px 5px;
    cursor: pointer;

    i {
        font-size: 28px;
        color: black;
    }
				
    @media screen and (max-width: 700px) {
        right: 0;
        left: auto;
    }

    @media screen and (max-width: 500px) {
        top: 1em;
    }
}


/*
 * SIDEBAR STRUCTURE THEN SIDEBAR STYLES
 * logo, acordion of layer lists, weird custom legends to select demographic boundary types, ...
 * a weird fixed background that calls attention to things not being pixel-perfect,
 * a big scrolling area, some links anchored to the bottom, ...
 */

#Sidebar {
    div.subtitle {
        font-size: 16px;
        padding-left: 72px;
        padding-bottom: 0.5em;
    }
    a.logo {
        text-decoration: none !important;

        img {
            max-width: 350px;
        }
    }

    .scrollcontent {
        background-color: var(--verylightblue);

        height: calc(100vh - 105px);
        max-height: calc(100vh - 105px);
        overflow-y: auto;
        padding-bottom: 2em;
        padding-top: 18px;

        color: var(--verydarkblue);
        background-image: url(/wp-content/themes/watertool/images/bluewave-top-fullwidth.svg);
        background-repeat: no-repeat;
        background-position: center -2px;
    }

    .padded {
        padding-right: 1em;
        padding-left: 1em;
    }

    a.footbutton {
        display: block;
        height: 35px;
        background-color: var(--lighterblue);

        text-align: center;
        line-height: 35px;

        i {
            color: #000;
            font-size: 20px;
            vertical-align: middle;
        }
    }

    .footcontent {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: var(--sidebar-width);

        border: 2px solid var(--verydarkblue);

        background-color: white;
        a {
            color: var(--verydarkblue) !important;
            font-weight: bold;
            text-decoration: none;
        }

        ul {  /* generated by wp_nav_menu() so we inherit some style and function, ome of which we don't want cuz of this weird usage in the bottom-left corner */
            text-align: center;
            list-style-type: none;
            padding-left: 0;
            margin: 0;

            li {
                line-height: 1;
            }
        }

        .dropdown-menu {
            float: none !important;
            position: unset !important;
            transform: unset !important;
            padding: 0;
            padding-bottom: 1em;
            border: 0 none transparent;
        }
    }

}

#Sidebar {
    a {
        color: var(--white);
        text-decoration: underline;
    }

    p {
        font-size: 16px;
    }

    h3 {
        color: var(--verydarkblue);
        font-size: 20px;
        font-weight: var(--bold);
        font-family: 'Droid Sans';
    }
}

#Sidebar {
    div.maplegend-accordion {
        font-family: 'Droid Sans';

        h1.maplegend-title {
            background-color: var(--verydarkblue);
            color: var(--white);
            font-size: 20px;
            line-height: 2;
            margin: 0;
            border-top: 1px solid var(--white);
            border-bottom: 1px solid var(--white);

            i {
                color: inherit;
            }
        }

        h2 {
            font-size: 18px;
        }

        div.maplegend-section {
            background-color: var(--white);
            color: black;

            h1, h2, h3 {
                color: inherit;
            }

            padding-top: 10px;

            &.collapsed {
                display: none;  /* toggled by clicks on the h1 */
            }

            div.random-html {
                padding-bottom: 5px;
                padding-top: 5px;

                &:first-child {
                    padding-top: 0;
                }
                &:last-child {
                    padding-bottom: 0;
                }
            }

            .maplegend-subsection {
                padding-bottom: 1em;
            }
        }

        /* alternative slide colors if they appear inside the accordion areas which have a --white background */
        .switch {
            .slider {
                background-color: var(--grey);
            }
            .slider::before {
                background-color: var(--white);
            }
            input:checked+.slider {
                background-color: var(--wavetop-blue);
            }
        }

        div.maplayer-layer {
            > label.pointer, label.fake-checkbox {
                margin-bottom: 0.15rem;
            }

            label.fake-checkbox {
                vertical-align: middle;
                position: relative;
                top: 2px;
                right: 2px;
            }
        }
    }
}


/* layer legends, broken out from Sidebar in case we use them elsewhere, which we do in Print View */
div.maplegend-layer-legend {
    margin-left: 1.9em;
    margin-right: 1em;

    &.collapsed {
        display: none;  /* toggled by clicks on the checkbox */
    }

    .maplegend-layer-levelpicker {
        margin-left: 1.5em;
        margin-bottom: 0.5em;

        background: none;
        border: 0;
        outline: 1px solid var(--lighterblue);  /* Chrome/Webkit is goofy about border-radius on SELECT, so use an outline instead and at least we can make sharp corners */
    }

    .legendswatch-text {
        font-size: 13px;

        &.legendswatch-text-gradient {
            margin-left: 2em;
            text-align: center;
            display: inline-block;
            width: 100%;
        }
    }

    .legendswatch {
        font-size: 12px;

        display: inline-block;
        width:1em;
        height:1em;
        margin-right: .5em;

        margin-left: 2em;

        &.legendswatch-square {
        }
        &.legendswatch-line {
            height: 0.2em;
            margin-bottom: 0.2em;
            line-height: 1em;
            vertical-align: middle;
        }
        &.legendswatch-circle {
            border-radius:50%;
        }
        &.legendswatch-image {
            width: auto;
            vertical-align: baseline;
        }
        &.legendswatch-gradient {
            display: block;
            width: 100%;
        }
    }
}


#Sidebar div.maplegend-accordion div.maplegend-section[data-section="demographics"] {
    /* hacks for the Demographics Race layers getting weird behavior: a SELECT item that shows separately from legends, but also legends ... */

    select[name="demograceXXX"] {
        display: block;
        margin-left: 3.2em;
        margin-bottom: 0.5em;

        &.collapsed {  /* toggled by clicks on the checkbox */
            display: none;  /* toggled like legends; see also toggleLayer() and initMapLayersAndLegends() */
        }
    }
}


#Sidebar div.maplegend-accordion div.maplegend-section[data-section="quantity"] {
    /* hacks for the Water Quantity layer getting weird behavior: a slider for picking a drought level and thus map layer suffix */

    input[type="range"][name="quantitydrought"] {
        width: 100%;
        cursor: pointer;
    }
    div.quantitydrought-legend {
    }
}


#Sidebar {
    div.vectoroption {
        font-family: 'Droid Sans';

        div.vectorlayercontrols {
            input[type="text"][name="filter"] {
                border: 0 none transparent;

                &:focus {  /* turn off aria highlight, which doesn't show anyway cuz it's blue on blue */
                    outline: none;
                    box-shadow: none;
                }
            }

            div.input-group {
                margin-bottom: 10px;

                .input-group-prepend .input-group-text {
                    background-color: var(--white);
                    border-color: var(--white);
                    padding-right: 0;

                    i {
                        color: var(--grey);
                    }
                }

                .input-group-append .input-group-text {
                    background-color: var(--lighterblue);
                    border-color: var(--lighterblue);
                    padding-left: 1rem;

                    i {
                        color: var(--white);
                    }
                }
            }
        }

        div.vectorlayerlisting {
            margin-bottom: 1em;

            div.vectorlayerlisting-listing {
                max-height: 25vh;
                overflow: auto;

                ul {
                    list-style-type: none;
                    padding-left: 0;

                    li {
                        font-size: 16px;
                        color: var(--darkblue);
                        background-color: var(--white);
                        cursor: pointer;

                        padding: 10px 10px 10px 10px;
                        border-bottom: 1px solid var(--darkblue);
                        &:last-child {
                            border-bottom: 0 none transparent;
                        }

                        &:hover {
                            background-color: var(--darkblue);
                            color: var(--white);
                        }
                    }
                }
            }

            div.vectorlayerlisting-details {
                div.name {
                    background-color: var(--white);
                    color: var(--nearblack);
                    padding: 10px 5px 10px 5px;

                    span.buttons {
                        float: right;
                        white-space: nowrap;

                        > i {
                            font-size: 30px;
                            line-height: 22px;
                            cursor: pointer;
                        }
                        > button {
                            margin-top: -10px;
                        }
                    }
                }

                table {
                    width: 100%;

                    td {
                        vertical-align: top;
                        padding: 5px 5px 5px 5px;

                        &:first-child {  /* two cells; this is left-hand side (LHS) */
                            font-size: 15px;
                        }
                        &:last-child:not(:first-child) {  /* two cells; this is right-hand side (RHS) */
                            text-align: right;
                            font-size: 14px;
                        }

                        &.text {
                        }
                        &.percent {
                        }
                        &.longpercent {
                        }
                        &.number {
                        }
                        &.phone {
                        }
                        &.email {
                        }
                        &.url {
                        }

                        span.moe {
                            font-size: 12px;
                        }
                        span.percent {
                        }

                        a {
                            color: inherit;
                        }

                        i[data-tooltip] {
                            color: var(--darkblue);
                        }
                    }

                    tr:nth-child(even) td {
                        background-color: var(--white);
                        color: var(--nearblack);
                    }
                    tr:nth-child(odd) td {
                        background-color: var(--paleblue);
                        color: var(--nearblack)
                    }
                }
            }
        }

        i[data-tooltip] {
            margin-left: 5px;
            cursor: pointer;
            color: var(--verydarkblue);
        }
    }
}


#Sidebar {
    div.geocoder-tool {
        background: var(--wavetop-blue);
        padding-bottom: 1em;
        padding-top: 1em;
        margin-bottom: 1em;
        background-color: var(--wavetop-blue);

        .input-group-append {
            cursor: pointer;
        }
    }
}



/*
 * TRANSLATION WIDGET needs to be moved a bit, both desktop and mobile
 * desktop, fit it so it looks like part of the map
 * mobile, top-right is the button to close the Sidebar so we need it moved downward
 * plus, a behavior in toggleSidebar() to shift it around when the Sidebar is toggled
 */

div.gtranslate-embed-here {
    position: absolute;
    top: 10px;
    right: 10px;

    @media screen and (max-width: 450px) {
        &.WithSidebar {
            top: 4em;
            right: 0;
        }
    }

    z-index: 1000;

    background-color: var(--white);
    box-shadow: 0px 1px 5px rgba(0,0,0,0.65);

    height: 28px;
    line-height: 28px;
    padding: 0 5px;
}



/*
 * TOOLTIPS by tooltipster
 */

i[data-tooltip] {
    margin-left: 5px;
    cursor: pointer;
    color: var(--darkblue);
}

#tooltip_contents {  /* storage area for HTML tooltips */
    display: none;
}

span.tooltipstered {
    cursor: pointer;
}

.tooltipster-base {
    pointer-events: auto;
}

.tooltipster-box {
    border-radius: 0 !important;
    border: 1px solid var(--lightblue) !important;
    background: var(--lightblue) !important;
    color: #fff !important;
    padding: 5px !important;
    font-size: 14px !important;

    a {
        color: var(--white) !important;
        font-weight: bold;
    }
}

.tooltipster-arrow-border, .tooltipster-arrow-background {
    border-right-color: var(--lightblue) !important;
}


/*
 * TOUR STEPS
 * defined in HTML so they are passed through WP template and automatic translation
 * loaded into JavaScript in initTour()
 */

#tour_steps {
    display: none !important;
}


/*
 * PRINTING of the sidebar report, per printVectorFeatureReport()
 * the body gains a .Printing CSS class which helps to hide/show specific content which goes down easily
 * the map is resized to fit onto the page vertically
 * and other such modifications are done, then undone after printing
 */
div.printcontentpage {
    display: none;
}
div.printonly {
    display: none;
}
body.Printing {
    * {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    div.printonly {
        display: block;
    }
    div.noprint {
        display: none !important;
    }

    #SidebarAndMap {
        width: 1050px !important;
        height: 1500px !important;
    }

    --sidebar-width-printing: 350px;
    #Sidebar {
        width: var(--sidebar-width-printing);
    }
    #Map.WithSidebar {
        width: calc(100% - var(--sidebar-width-printing));
    }

    .sidebar-closer,
    .gtranslate-embed-here,
    .a11y-toolbar
    {
        display: none !important;
    }

    #Map {
        .leaflet-control-basemapbar,
        .leaflet-control-attribution,
        .leaflet-tooltip-pane,
        .gin-control-zoom
        {
            display: none !important;
        }
    }

    div.vectorlayerlisting-details {
        a {
            text-decoration: none !important;
        }
        div.name {
            i, button {
                display: none !important;
            }
        }
    }

    #Sidebar {
        .footcontent,
        a.footbutton
        {
            display: none !important;
        }
    }

    div.scrollcontent {
        overflow: hidden !important;

        h3,
        > hr,
        .maplegend-accordion,
        > p.padded,
        .vectorlayercontrols,
        .geocoder-tool {
            display: none !important;
        }
    }

    #Sidebar, div.scrollcontent {
        background-color: white !important;
    }

    div.printcontentpage {
        display: block;
        page-break-before: always;
        width: 1050px !important;
        height: 1500px !important;
    }

    #printcontentpage-page1bottomleft {
        position: absolute;
        left: 0;
        bottom: 0;
        color: black;

        p {
            font-size: 10px;
        }
    }

    #printcontentpage-page3 {
        div.printcontent-maplegend {
            div.printcontent-maplegend-entry {
                h1 {
                    color: black;
                    font-size: 18px;
                    margin-bottom: 0;
                }
            }
        }
    }

    img.logo {
        width: 350px;
    }
}