/* -------------  CSS styles for the Wildfire CE platform ------------- */
/* ------------------------------ General ----------------------------- */

body {
    height: 100vh;
    width: 100vw;
    margin: 0;

    display: grid;
    row-gap: 0;
    grid-template:
        "header"
        "content" 1fr
        "footer";
    background-color: #c3d3d7;
}

#project_link {
    width: 80%;
}

#project_link img {
    padding: 15px;
    margin-right: 50px;
    width: 100%;
}

.content {
    grid-area: content;
    margin: 0px 20%;
    padding: 50px;
    justify-self: center;
    background-color: white;
    text-align: justify;
}

/* ---------------------------- Large Maps ---------------------------- */

#map {
    grid-area: content;
    height: 100%;
    width: 100%;
}

.leaflet-map-pane {
    z-index: 0
}

.leaflet-control-layers-expanded {
    display: block !important;
}

#dropdown {
    position: absolute;
    left:60px;
    top: 125px;
    background-color: white;
    padding: 15px;
}

/* ------------------------------ Header ------------------------------ */

header {
    grid-area: header;
    border-bottom: 1px solid #6c8793;
}

nav {
    z-index: 1001;
    text-align: right;
    background-color: white;
};

#navbar_logo {
    height: 10px !important;
}

/* ------------------------------ Footer ------------------------------ */

footer {
    grid-area: footer;
    text-align: center;
    border-top: 1px solid #6c8793;
    background-color: white;
}

.socials {
    fill: #9ACA3C;
    width: 35px;
    height: 35px;
    margin: 30px;
}

/* ------------------ Unique styles for fire-danger.html ----------------- */

.fire-danger {
    background-color: white;
    padding: 10px;
    padding-top: 2%;
    padding-bottom: 5%;
}

#fire-danger-desc {
    padding-top: 10px;
}

#btn-group-wildfire {
    display: grid;
    grid-template:
    "fwi dfmc dfmc dfmc dfmc" 40px
    "fwi 1h 10h 100h 1000h" 40px / 2fr 1fr 1fr 1fr 1fr;;
}

#btn-fire_spread {grid-area: fwi;}
#btn-fuel_moisture {grid-area: dfmc;}

#windy {
    grid-area: content;
    min-height: 600px;
}

/* ------------------ Unique styles for download.html ----------------- */

h2 {
    margin-bottom: 25px;
}

.download_section {
    margin-bottom: 20px;
}

.download_items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 50px;
}

.download_items button {
    /*background-color:  #c3d3d7;*/
    background-color: white;
    border: 1px solid #6c8793;
}

.download_items p {
    margin-bottom: 10px;
    font-size: large;
}

.download_items img {
    width: 100%;
    padding: 10px;
}

/* ------------------- Unique styles for about.html ------------------- */

#project_overview {
    margin-bottom: 50pt;
}

.partner_logos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 100px;
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 50pt;
}

.partner_logos a {
    align-self: center;
    justify-self: center;
    text-align: center;
}

#interreg_overview {
    display: grid;
    grid-template:
    "txt map"
    "logo map"
    / 2fr 1fr;

    margin: 50px;
}

#mapPartners {
    grid-area: map;
    justify-self: right;
    height: 250px;
    width: 200px;
}

/* ------------------------ Responsive design ------------------------- */

@media (max-width: 992px) {
    .download_items {
        grid-template-columns: 1fr 1fr;
    }

    .partner_logos {
        grid-template-columns: 1fr 1fr;
    }
}

/* The modal background */
.modal {
display: none; /* Hidden by default */
position: fixed; 
z-index: 1000; 
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; 
background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
}

/* Modal content box */
.modal-content {
background-color: #fff;
margin: 15% auto; /* Center vertically & horizontally */
padding: 20px;
border-radius: 8px;
width: 50vw;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
position: relative;
}

/* Close button */
.close {
color: #aaa;
float: right;
font-size: 24px;
font-weight: bold;
cursor: pointer;
position: absolute; /* add this */
top: 10px;          /* distance from top */
right: 10px;        /* distance from right */
}

.close:hover {
color: #000;
}