body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Make the map container fill the content area */
#map-container {
    position: fixed;
    top: 5rem; /* (Navbar height + margin) */
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1;
    border-radius: 0.5rem; /* Optional: adds rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
}

/* Custom marker styling */
.bike-marker {
    background: none;
    border: none;
}
/* inReach location marker styles */
.inreach-marker {
    background: none;
    border: none;
}

.inreach-pulse {
    width: 20px;
    height: 20px;
    position: relative;
}

.inreach-dot {
    width: 12px;
    height: 12px;
    background-color: #ff4444;
    border: 2px solid #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
    animation: inreach-pulse 2s infinite;
}

@keyframes inreach-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
    }
}

/* Override Leaflet's default link color for nav buttons */
.nav-button a,
.nav-button a:link,
.nav-button a:visited {
    color: var(--color-earth);
}

/* Force cluster opacity to work */
.marker-cluster-posts,
.marker-cluster-images {
    opacity: 0.9 !important;
}

/* Override Leaflet's default cluster styles */
.marker-cluster-posts.bg-savannah-90,
.marker-cluster-posts.bg-savannah-75,
.marker-cluster-posts.bg-savannah-60 {
    background-color: var(--color-savannah-90) !important;
    opacity: 0.9 !important;
}

.marker-cluster-images.bg-sky-90,
.marker-cluster-images.bg-sky-75,
.marker-cluster-images.bg-sky-60 {
    background-color: var(--color-sky-90) !important;
    opacity: 0.9 !important;
}