/*!
@file map_styles.css
@brief Main stylesheet for the Ellas Tienen Nombre project map interface.

This file contains all the CSS rules for styling the map page, including the
header, navigation, control and detail panels, Leaflet map popups, and
responsive layouts for mobile devices. It uses CSS variables for theming
and is organized into logical sections for maintainability.
*/

/*
==================================================
  Final Master Stylesheet for Ellas Tienen Nombre
==================================================
*/

/* --- 1. Global Styles & Root Variables --- */
:root {
    --text-color: #333333; --primary-color: #A93226; --primary-color-hover: #C0392B;
    --light-gray: #f8f9fa; --medium-gray: #e9ecef; --dark-gray: #343a40;
    --font-heading: 'Lato', sans-serif; --font-body: 'Open Sans', sans-serif;
}
html, body { height: 100%; margin: 0; font-family: var(--font-body); background-color: var(--light-gray); color: var(--text-color); }
body { display: flex; flex-direction: column; }


/* --- 2. Header and Navigation --- */
.site-header { background-color: var(--dark-gray); color: white; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; z-index: 2000; border-bottom: 3px solid var(--primary-color); position: relative; }
.site-header h1 { margin: 0; font-size: 1.25rem; font-family: var(--font-heading); }
.site-header a { color: white; text-decoration: none; }
.main-nav { display: flex; align-items: center; }
.nav-item { position: relative; margin-left: 1rem; }
.nav-link, .dropdown-toggle { color: white; text-decoration: none; padding: 10px; display: block; background: none; border: none; font-family: inherit; font-size: 1rem; cursor: pointer; white-space: nowrap; }
.nav-link:hover, .dropdown-toggle:hover { text-decoration: underline; }
.dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background-color: #495057; box-shadow: 0 4px 8px rgba(0,0,0,0.2); border-radius: 4px; padding: 10px 0; list-style: none; margin: 5px 0 0; min-width: 250px; z-index: 1001; }
.dropdown-menu a { color: white; padding: 10px 20px; text-decoration: none; display: block; }
.dropdown-menu a:hover { background-color: #5a6268; }
.nav-item:hover .dropdown-menu, .nav-item:focus-within .dropdown-menu { display: block; }
.mobile-menu-toggle { display: none; }


/* --- 3. Main Content & Panel Layouts --- */
.main-content { flex-grow: 1; position: relative; overflow: hidden; }
.map-container { display: flex; height: 100%; width: 100%; }
#map { height: 100%; flex-grow: 1; }
.controls-panel, .detail-panel { background-color: #ffffff; width: 340px; flex-shrink: 0; display: flex; flex-direction: column; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-left: 1px solid var(--medium-gray); position: relative; }
.controls-panel { border-right: 1px solid var(--medium-gray); border-left: none; overflow-y: auto; }


/* --- 4. Panel Inner & Content Styling --- */
.controls-panel h2 { padding: 25px 25px 15px; font-family: var(--font-heading); }
#filter-form { padding: 0 25px 25px; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; }
.form-group input, .form-group select { width: 100%; padding: 0.6rem; box-sizing: border-box; border: 1px solid #ced4da; border-radius: 0.25rem; font-size: 1rem; }
.form-buttons button { padding: 12px 18px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; font-weight: bold; }
#filter-form button[type="submit"] { background-color: var(--primary-color); color: white; }
#filter-form button[type="submit"]:hover { background-color: var(--primary-color-hover); }
#detail-content { padding: 25px; overflow-y: auto; flex-grow: 1; }
#detail-content h3 { color: var(--primary-color); font-size: 1.5rem; font-family: var(--font-heading); }
.detail-subheading { margin-top: 1.75rem; margin-bottom: 0.75rem; font-size: 1rem; font-weight: 700; color: var(--dark-gray); border-bottom: 2px solid var(--medium-gray); padding-bottom: 5px; font-family: var(--font-heading); }
.content-container { width: 100%; max-width: 800px; margin: 40px auto; padding: 30px 40px; background-color: #fff; border-radius: 8px; line-height: 1.8; }
.content-container h1, .content-container h2 { font-family: var(--font-heading); color: var(--primary-color); border-bottom: 2px solid var(--medium-gray); padding-bottom: 10px; }
.case-images {
    margin-top: 1rem;
}
.case-images img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* --- Polygon Notice in Filter Panel --- */
.polygon-notice {
    padding: 20px 25px;
    border-top: 1px solid var(--medium-gray);
    margin-top: 15px;
}
.polygon-notice h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 10px;
}
.polygon-notice p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
    margin: 0;
}


/* --- 5. MAP POPUPS & MARKERS (UPDATED SECTION) --- */
.leaflet-popup-content-wrapper {
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    max-width: 80vw;
    max-height: 80vh;
    overflow-y: auto;
}

.leaflet-popup-content {
    margin: 15px 20px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    /* Remove fixed size to allow popup to grow */
}

.leaflet-popup-content strong {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-color);
    display: block;
}

.popup-image {
    /* THIS IS THE CORRECTED RULE */
    max-width: 100%;
    /* Image will fill the width of the popup */
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    margin: 12px auto 5px;
    border-radius: 4px;
}

/* --- 6. Media Queries for Mobile/Responsive --- */
.panel-close-button { display: none; }
@media (max-width: 992px) {
    /* ... Hamburger menu styles ... */
    .mobile-menu-toggle { display: block; background: none; border: none; cursor: pointer; padding: 10px; z-index: 2010; }
    .hamburger-icon { display: block; width: 24px; height: 3px; background: white; position: relative; border-radius: 2px; }
    .hamburger-icon::before, .hamburger-icon::after { content: ''; position: absolute; left: 0; width: 24px; height: 3px; background: white; border-radius: 2px; }
    .hamburger-icon::before { top: -8px; }
    .hamburger-icon::after { bottom: -8px; }
    .main-nav { display: none; flex-direction: column; position: absolute; top: 100%; right: 0; width: 250px; background-color: var(--dark-gray); border-top: 1px solid #555; }
    .main-nav.is-open { display: flex; }
    .nav-item { margin: 0; width: 100%; }
    .nav-item > a, .nav-item > button { width: 100%; text-align: left; padding: 15px 20px; border-bottom: 1px solid #555; }
    .dropdown-menu { position: static; box-shadow: none; border-radius: 0; width: 100%; background-color: #5a6268; padding-left: 20px; }
}

@media (max-width: 800px) {
    /* ... Sliding panel styles ... */
    .controls-panel, .detail-panel { position: absolute; top: 0; height: 100%; width: 85%; max-width: 340px; transform: translateX(-105%); transition: transform 0.3s ease-in-out; z-index: 1010; }
    .detail-panel { left: auto; right: 0; transform: translateX(105%); }
    .controls-panel.panel-mobile-open, .detail-panel.panel-mobile-open { transform: translateX(0); }
    .panel-close-button { display: block; position: absolute; top: 8px; right: 10px; background: transparent; border: none; font-size: 32px; font-weight: 300; color: #6c757d; cursor: pointer; z-index: 1050; padding: 5px 10px; }
    #mobile-filter-toggle { display: block; position: absolute; top: 80px; left: 15px; z-index: 1000; background-color: white; border: 1px solid rgba(0,0,0,0.2); border-radius: 4px; padding: 8px 12px; font-weight: bold; font-family: var(--font-heading); cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,0.2); }
}