/* ==================================================
   NYC TREE CANOPY MAP
   Publication Style CSS
   ================================================== */


/* ---------- Global ---------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;

    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#map {
    background-color: #ffffff;
}


/* ---------- Leaflet Base ---------- */

.leaflet-container {
    background: #ffffff;
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* ---------- Popup ---------- */

.leaflet-popup-content-wrapper {
    background: #ffffff;
    border-radius: 12px;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.22);
}

.leaflet-popup-tip {
    background: #ffffff;
}

.leaflet-popup-content {

    margin: 16px 20px;

    min-width: 220px;

    font-family:
        "Inter",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.5;

    color: #333333;
}


/* ---------- Custom Tree Popup ---------- */

.canopy-popup {

    min-width: 230px;

}


.canopy-popup h3 {

    margin: 0 0 12px 0;

    padding-bottom: 8px;

    border-bottom:
        2px solid #95b890;

    color: #1b4332;

    font-size: 20px;

    font-weight: 600;

    letter-spacing: -0.3px;

}


.canopy-popup p {

    margin: 8px 0;

    font-size: 14px;

    color: #444444;

}


.canopy-popup b {

    color: #2d6a4f;

    font-weight: 600;

}


/* ---------- Hover Tooltips ---------- */

.leaflet-tooltip {

    background:
        rgba(255,255,255,0.96);

    border:
        1px solid #d0d0d0;

    border-radius: 6px;

    padding:
        6px 10px;

    color: #333333;

    font-family:
        "Inter",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 500;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.15);

}


.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {

    border: none;

}


/* ---------- Controls ---------- */

.leaflet-control {

    box-shadow:
        0 3px 12px rgba(0,0,0,0.15);

}


.leaflet-control-zoom {

    border: none !important;

}


.leaflet-control-zoom a {

    background:
        rgba(255,255,255,0.95) !important;

    color:
        #333333 !important;

    font-size:
        18px;

    border-radius:
        6px;

}


.leaflet-control-zoom a:hover {

    background:
        #eef5ec !important;

    color:
        #1b4332 !important;

}


/* ---------- Layer Switcher ---------- */

.leaflet-control-layers {

    background:
        rgba(255,255,255,0.96) !important;

    border-radius:
        10px !important;

    padding:
        10px !important;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        13px;

}


.leaflet-control-layers label {

    color:
        #333333;

}


/* ---------- Info Boxes / Legend ---------- */

.info {

    padding:
        12px 14px;

    background:
        rgba(255,255,255,0.96) !important;

    border-radius:
        10px;

    color:
        #333333 !important;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        13px;

    line-height:
        1.5;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.18);

}


.info h2 {

    margin:
        0 0 10px 0;

    color:
        #1b4332;

    font-size:
        17px;

    font-weight:
        600;

}


/* ---------- Scale Bar ---------- */

.leaflet-control-scale-line {

    background:
        rgba(255,255,255,0.85);

    border:
        2px solid #333333 !important;

    color:
        #333333 !important;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        11px;

}


/* ---------- Attribution ---------- */

.leaflet-control-attribution {

    background:
        rgba(255,255,255,0.85) !important;

    font-size:
        10px;

}


.leaflet-control-attribution a {

    color:
        #2d6a4f !important;

}


/* ---------- Remove Default Table Popup Styling ---------- */

.leaflet-popup-content table {

    border-collapse:
        collapse;

}


.leaflet-popup-content td {

    padding:
        4px;

}