/*
 Theme Name:   Conservation for Restoration
 Theme URI:    https://tree-conservation.org
 Description:  Conservation for Restoration (C4R) tool - WordPress theme for ecoregion conservation prioritization
 Author:       Camilo Rodriguez
 Author URI:   https://tree-conservation.org
 Version:      1.0.2
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  conservation
 Tags:         conservation, restoration, maps, bootstrap
*/

:root {
    --c4r-green: #198754;
    --c4r-green-dark: #146c43;
    --c4r-light-grey: #f8f9fa;
    --c4r-border: #dee2e6;
}

/* Layout */
.wrapper {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 76px);
    overflow: hidden;
}

.admin-bar .wrapper {
    height: calc(100vh - 76px - 32px);
}

#rmap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    cursor: crosshair;
    z-index: 2;
}

#rcontrols {
    min-width: 400px;
    max-width: 400px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--c4r-light-grey);
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
}

/* Form */
input[type="range"] {
    width: 100%;
}

.submit-area {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
    padding: 10px 10px 20px;
    background-color: #fff;
    border-top: 1px solid var(--c4r-border);
}

.no-scroll {
    height: 100%;
    overflow: hidden;
}

/* Loading overlay */
.loading {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 0.8;
    z-index: 9999;
}

.loading img {
    position: absolute;
    top: 44%;
    left: 50%;
}

/* Loading bar */
#loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--c4r-green);
    z-index: 10000;
    transition: width 0.3s;
}

#loading-bar.active {
    animation: loading-progress 30s ease-out forwards;
}

@keyframes loading-progress {
    0% { width: 0%; }
    50% { width: 70%; }
    90% { width: 90%; }
    100% { width: 95%; }
}

/* Accordion */
.accordion-button:not(.collapsed) {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--c4r-green-dark);
}

.accordion-button:focus {
    border-color: var(--c4r-green);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Navbar */
.navbar {
    padding: 0.5rem 1rem;
}

.navbar-brand {
    font-weight: 600;
    color: var(--c4r-green-dark) !important;
}

.nav-link.active {
    color: var(--c4r-green) !important;
}

/* Lists */
ol.alfa {
    list-style-type: lower-alpha;
}

/* Report modal */
.modal-xl {
    max-width: 90%;
}

/* Results alert — fixed position to avoid breaking layout */
#results {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 1050;
}

.admin-bar #results {
    top: 108px;
}

#results .alert {
    margin: 0;
    border-radius: 0;
}

/* Range inputs: darker track like prod */
.form-range[list]::-webkit-slider-runnable-track {
    background-color: #adb5bd;
}

.form-range[list]::-moz-range-track {
    background-color: #adb5bd;
}

/* Select2 overrides */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--c4r-border);
    border-radius: 0.375rem;
    height: 38px;
    padding: 4px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

/* Tool page: no vertical scroll, hide footer */
.page-template-page-tool #page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Make the tool fill the space under the header regardless of header height.
   The alliance logo can make the header taller than the old fixed 76px, which
   used to push the map and the "Send by Email" button below the fold. */
.page-template-page-tool .site-header {
    flex: 0 0 auto;
}
.page-template-page-tool .wrapper {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}
.page-template-page-tool.admin-bar .wrapper {
    height: auto;
}

.page-template-page-tool .site-footer {
    display: none;
}

/* Range inputs: show native tick marks from datalist */
.form-range[list] {
    -webkit-appearance: auto;
    appearance: auto;
    height: auto;
    padding: 0;
    background: transparent;
}

/* Responsive */
@media (max-width: 768px) {
    .page-template-page-tool #page {
        height: auto;
        overflow: auto;
    }

    .wrapper {
        flex-direction: column;
        height: auto;
    }

    .admin-bar .wrapper {
        height: auto;
    }

    #rmap {
        display: none;
    }

    #rcontrols {
        min-width: 100%;
        max-width: 100%;
        height: auto;
        overflow-y: visible;
    }

    .page-template-page-tool .site-footer {
        display: block;
    }
}

/* Alliance logo inside navbar collapse */
.alliance-logo {
    display: block;
    margin-left: auto;
}
.alliance-logo img {
    display: block;
    width: 140px;
    height: auto;
}
@media (max-width: 992px) {
    .alliance-logo {
        margin: 1.5rem auto;
    }
    .alliance-logo img {
        margin: 0 auto;
    }
}