@import "leaflet.css" layer(plugin);
@import "MarkerCluster.css" layer(plugin);
@import "MarkerCluster.Default.css" layer(plugin);


@layer components {
    .leaflet-popup-content {
        margin: 1.3rem 1.5rem .8rem 1.25rem;
        font-size: 1.125rem;
    }
}

@layer pages {
    .map_outer_container {
        margin-top: 2rem;
        position: relative;
        z-index: 1000;
    }

    .map_row {
        display: grid;
        grid-template-columns: 80% 1fr;
        column-gap: 1.5rem;
    }

    .map_container {
        height: 700px;
    }
}

@layer pages {
    .popup_inner {
        max-height: 30rem;
        overflow-y: auto;
    }

    .popup_inner .popup_title {
        font-size: 1rem;
        font-weight: bold;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--light_grey_400);
    }

    .popup_inner .superscript_container {
        
        font-size: .9rem;
    }

    .popup_details {
        list-style: none;
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        display: grid;
        grid-template-columns: 2rem 1fr;
        column-gap: 1.3rem;
        font-size: .9rem;
    }

    .popup_details>li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        margin-bottom: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .popup_details:has(>li:nth-child(2))>li:first-child {}

    .popup_details>li:not(:last-child) {
        border-bottom: 1px solid var(--light_grey_400);
    }

    .item_list {
        list-style: none;
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .item_list>li {}

    .item_label {
        font-weight: bold;
    }
}

@layer media_query {
    @media(max-width: 992px) {
        .map_row {
            grid-template-columns: 100%;
            row-gap: 1rem;
        }
    }
}