/*
  This file works WITH Tailwind CSS. It's for styles that are either difficult
  to manage with utility classes or are specific to third-party libraries like Leaflet.
*/

/* Set a base font and background for the entire page */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Tailwind's slate-50 */
}

/* Give the new hero section a minimum height */
.hero-section {
    min-height: 550px;
}

/* THE KEY CHANGE: Using a local background image */
.hero-bg-image {
    /* A local background image for the hero section */
    background-image: url('img/hero.jpg');
}


/*
  CRITICAL FOR LEAFLET MAP: The map container must have a defined height.
*/
#map {
    height: 500px; 
    border-radius: 0.75rem; 
    border: 1px solid #e2e8f0; 
}

/*
  A simple utility class that we use in JavaScript to show/hide entire sections of the app.
*/
.hidden {
    display: none;
}

/*
  Make Leaflet's popups match the modern UI theme of the app.
*/
.leaflet-popup-content-wrapper {
    border-radius: 0.75rem; 
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border: 1px solid #e2e8f0; 
}

.leaflet-popup-content {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}