/* Basic Reset & Global Styles */
:root {
    --primary-color: #007bff;
    --secondary-color: #4CAF50;
    --accent-color: #FFC107;
    --text-color: #333;
    --background-color: #f4f7f6;
    --light-gray: #e9ecef;
    --dark-gray: #6c757d;
    --danger-color: #dc3545;
    --danger-background: #f8d7da;
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-headings: 'Arial', Helvetica, sans-serif;
    --alarm-primary-color: #8B0000;
    --alarm-secondary-color: #FF4500;
    --alarm-text-color: #FFF0F5;
    --alarm-background-color: #580000;
    --alarm-font-headings: 'Impact', Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    --relief-zone-color: #007bff; /* For Cool Zones (Blue) */
    --relief-zone-fill-color: rgba(0, 123, 255, 0.4); /* For Cool Zones (Blue) */
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* === SECTION DISPLAY RULES === */
main {
    position: relative; 
}
.page-section {
    display: none; /* ALL sections HIDDEN by default */
    padding: 20px;
    min-height: calc(100vh - 120px); /* header + footer height approx */
    box-sizing: border-box; /* Include padding in min-height calculation */
}
.page-section.active-section {
    display: block; /* ONLY the active section is SHOWN */
    animation: fadeIn 0.5s ease-in-out;
}
section#map-section.active-section { /* Specific override for map section when active */
    display: flex; 
    flex-direction: column;
    height: calc(100vh - 60px); /* Navbar height only */
    padding: 0; 
}
/* No separate rule for section#map-section needed if its only unique styles are when active */
/* === END OF SECTION DISPLAY RULES === */

/* Alarm mode styles */
body.alarm-mode {
    --primary-color: var(--alarm-primary-color);
    --secondary-color: var(--alarm-secondary-color);
    --text-color: var(--alarm-text-color);
    --background-color: var(--alarm-background-color);
    --font-headings: var(--alarm-font-headings);
}
body.alarm-mode .navbar { background-color: var(--alarm-primary-color); }
body.alarm-mode .nav-link { color: var(--alarm-text-color); }
body.alarm-mode .nav-link:hover, body.alarm-mode .nav-link.active-link {
    color: var(--accent-color); border-bottom-color: var(--accent-color);
}
body.alarm-mode .nav-logo { color: var(--alarm-text-color); font-family: var(--alarm-font-headings); }
body.alarm-mode h1, body.alarm-mode h2, body.alarm-mode h3, body.alarm-mode h4 {
    font-family: var(--alarm-font-headings); color: var(--alarm-secondary-color);
}
body.alarm-mode .cta-button, body.alarm-mode button {
    background-color: var(--alarm-secondary-color); color: var(--alarm-text-color); border-color: var(--alarm-primary-color);
}
body.alarm-mode button:hover { background-color: var(--alarm-primary-color); }
body.alarm-mode #temp-warning { background-color: var(--danger-color); color: white; border: 2px solid white; }
body.alarm-mode .content-container { background-color: rgba(0,0,0,0.2); }
body.alarm-mode #map-controls { background-color: var(--alarm-background-color); border-bottom-color: var(--alarm-primary-color); }
body.alarm-mode #legend { background-color: rgba(50,0,0,0.85); }
body.alarm-mode #legend label { color: var(--alarm-text-color); }
body.alarm-mode #route-info-display { background-color: rgba(50,0,0,0.7); color: var(--alarm-text-color); border-color: var(--alarm-secondary-color); }
body.alarm-mode .leaflet-control-scale-line { border-color: rgba(255,255,255,0.4); color: var(--alarm-text-color); background-color: rgba(50,0,0,0.75); text-shadow: 1px 1px #000; }
body.alarm-mode .image-placeholder { background-color: rgba(0,0,0,0.2); border-color: var(--alarm-secondary-color); color: var(--alarm-text-color); }
body.alarm-mode .image-placeholder i { color: var(--alarm-secondary-color); }
body.alarm-mode footer { background-color: var(--alarm-primary-color); color: var(--alarm-text-color); }


/* Navbar */
.navbar {
    background-color: var(--primary-color);
    color: white;
    padding: 0.8rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.5s ease;
    
}
.nav-logo {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    transition: color 0.5s ease, font-family 0.5s ease;
    white-space: nowrap; 
    margin-right: 20px; /* Add some space between logo and menu */
}
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Align items vertically if navbar has more height */
    flex-shrink: 0; /* Prevent menu from shrinking if logo gets very wide */
}
.nav-menu li {
    margin-left: 10px; /* Spacing between items, adjust as needed */
    white-space: nowrap; /* Prevent text inside LI from wrapping */
}
.nav-menu li:first-child {
    margin-left: 0;
}
.nav-link {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.5rem 0.75rem; /* Padding for click area */
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    display: inline-block;
}
.nav-link:hover, .nav-link.active-link {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.nav-toggle {
    display: none;
    background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer;
}

/* Content containers */
.content-container {
    max-width: 900px; margin: 20px auto; padding: 25px; background-color: white;
    border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.08);
    transition: background-color 0.5s ease;
}
h1, h2, h3, h4 {
    font-family: var(--font-headings); color: var(--primary-color); margin-bottom: 0.75em;
    transition: color 0.5s ease, font-family 0.5s ease;
}
h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; }

/* Map Controls & Map */
#map-controls {
    background-color: var(--light-gray); padding: 10px; display: flex;
    flex-wrap: wrap; gap: 15px; align-items: center;
    border-bottom: 1px solid var(--dark-gray); transition: background-color 0.5s ease;
}
.control-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#map-controls label, #map-controls p, #map-controls button, #map-controls select { font-size: 0.9rem; }
#map {
    flex-grow: 1; width: 100%; position: relative; z-index: 1;
}

/* Legend */
#legend {
    position: absolute; bottom: 30px; right: 10px; background-color: rgba(255,255,255,0.9);
    padding: 10px; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    z-index: 500; font-size: 0.85rem; transition: background-color 0.5s ease; max-width: 200px;
}
#legend-toggle-btn {
    background-color: var(--primary-color); color: white; border: none; padding: 5px 8px;
    font-size: 0.8rem; border-radius: 3px; cursor: pointer; width: 100%; text-align: left; margin-bottom: 5px;
}
body.alarm-mode #legend-toggle-btn { background-color: var(--alarm-secondary-color); color: var(--alarm-text-color); }
#legend-toggle-btn:hover { opacity: 0.9; }
#legend-content { transition: max-height 0.3s ease-out, opacity 0.3s ease-out; overflow: hidden; max-height: 500px; opacity: 1; }
#legend-content.collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top:0; }
#legend h4 { margin-top: 0; margin-bottom: 8px; font-size: 1rem; }
#legend label { display: flex; align-items: center; margin-bottom: 4px; cursor: pointer; }
.legend-color { display: inline-block; width: 15px; height: 15px; margin-right: 5px; border: 1px solid #555; vertical-align: middle; }
.legend-icon { display: inline-block; width: 18px; height: 18px; margin-right: 5px; text-align: center; vertical-align: middle; }
.legend-icon i { font-size: 14px; line-height: 18px; }
.heat-island { background-color: rgba(255,0,0,0.5); }
.relief-zone-legend { background-color: var(--relief-zone-fill-color); border: 1px solid var(--relief-zone-color); } /* Updated class for legend */

/* Temp Warning, Buttons, CTA, Footer, Modal, User Location Marker, Scale, Image Placeholders */
/* These styles can largely remain as they were in your last fully provided CSS, */
/* as they don't directly control section visibility or navbar item wrapping. */
/* For brevity, I'll assume they are correctly placed after the above sections. */
#temp-warning { padding: 8px 12px; margin-top: 5px; border-radius: 4px; font-weight: bold; display: flex; align-items: center; gap: 8px; transition: all 0.3s; }
#temp-warning.warning-active { background-color: var(--danger-background); color: var(--danger-color); border: 1px solid var(--danger-color); opacity: 1; animation: pulseWarning 1.5s infinite alternate; }
#temp-warning.warning-inactive { background-color: var(--light-gray); color: var(--dark-gray); border: 1px solid var(--dark-gray); opacity: 0; height: 0; padding: 0 12px; margin-top: 0; overflow: hidden; }
@keyframes pulseWarning { from { box-shadow: 0 0 5px var(--danger-color); } to { box-shadow: 0 0 15px var(--danger-color), 0 0 8px var(--danger-color) inset; } }
button, input[type="range"], select { padding: 8px 12px; border: 1px solid var(--dark-gray); border-radius: 4px; font-family: var(--font-primary); cursor: pointer; transition: all 0.3s; }
button { background-color: var(--primary-color); color: white; }
button:hover { background-color: #0056b3; }
button:disabled { background-color: var(--light-gray); color: var(--dark-gray); cursor: not-allowed; }
input[type="range"] { vertical-align: middle; }
.cta-button { background-color: var(--secondary-color); color: white; padding: 12px 25px; font-size: 1.1rem; text-decoration: none; border-radius: 5px; border: none; display: inline-block; margin-top: 15px; transition: background-color 0.3s ease; }
.cta-button:hover { background-color: #388E3C; }
footer { text-align: center; padding: 15px; background-color: var(--dark-gray); color: white; font-size: 0.9rem; transition: background-color 0.5s ease, color 0.5s ease; }
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); animation: fadeInModalBackground 0.3s; }
.modal-content { background-color: #fff; margin: 10% auto; padding: 25px 30px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: slideInModal 0.4s ease-out; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; }
@keyframes fadeInModalBackground { from { background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,0.6); } }
@keyframes slideInModal { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.user-location-marker-divicon { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; }
.user-location-marker-divicon .pulsing-dot { width: 16px; height: 16px; background-color: rgba(42,147,213,0.9); border-radius: 50%; box-shadow: 0 0 0 rgba(42,147,213,0.9); animation: pulseUserLocation 1.7s infinite; position: relative; z-index: 1; }
.user-location-marker-divicon i.fa-street-view { position: absolute; font-size: 14px; color: white; z-index: 2; }
@keyframes pulseUserLocation { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(42,147,213,0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(42,147,213,0); } 100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(42,147,213,0); } }
.leaflet-control-scale-line { border: 2px solid rgba(0,0,0,0.4); border-top: none; color: #333; background-color: rgba(255,255,255,0.75); padding: 2px 5px; font-size: 11px; text-shadow: 1px 1px #fff; }
#route-info-display { padding: 0px 10px; background-color: rgba(255,255,255,0.8); border-radius: 4px; font-size: 0.85rem; color: var(--text-color); border: 1px solid var(--dark-gray); margin-top: 5px; }
.image-placeholder-container { display: flex; gap: 20px; margin: 20px 0; flex-wrap: wrap; justify-content: center; }
.image-placeholder { background-color: var(--light-gray); border: 2px dashed var(--dark-gray); color: var(--dark-gray); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; min-height: 150px; flex-grow: 1; flex-basis: 200px; border-radius: 5px; font-size: 0.9rem; }
.image-placeholder i { margin-bottom: 10px; color: var(--primary-color); }
.image-placeholder-container.two-column .image-placeholder { flex-basis: calc(50% - 10px); }
.image-placeholder-container.three-column .image-placeholder { flex-basis: calc(33.333% - 14px); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile Friendliness */
@media (max-width: 768px) {
    .nav-menu { display: none; flex-direction: column; width: 100%; position: absolute; top: 60px; /* Approx navbar height */ left: 0; background-color: var(--primary-color); padding: 10px 0; box-shadow: 0 3px 5px rgba(0,0,0,0.1); }
    body.alarm-mode .nav-menu { background-color: var(--alarm-primary-color); }
    .nav-menu.active { display: flex; }
    .nav-menu li { margin: 0; width: 100%; text-align: center; }
    .nav-link { display: block; padding: 12px 15px; width: 100%; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .nav-menu li:last-child .nav-link { border-bottom: none; }
    .nav-link:hover, .nav-link.active-link { background-color: rgba(0,0,0,0.1); /* No bottom border for active on mobile by default */ border-bottom-color: transparent; }
    body.alarm-mode .nav-link:hover, body.alarm-mode .nav-link.active-link { background-color: rgba(255,255,255,0.1); }
    .nav-toggle { display: block; }
    section#map-section.active-section { height: auto; min-height: calc(100vh - 60px); }
    #map-controls { flex-direction: column; align-items: stretch; }
    .control-group { flex-direction: column; align-items: stretch; }
    .control-group > * { width: 100%; box-sizing: border-box; margin-bottom: 5px; }
    .control-group > *:last-child { margin-bottom: 0; }
    #map { min-height: 50vh; }
    #legend { font-size: 0.75rem; padding: 8px; bottom: 40px; right: 5px; max-width: 160px; }
    #legend-toggle-btn { font-size: 0.75rem; }
    .legend-icon i { font-size: 12px; }
    #route-info-display { width: 100%; box-sizing: border-box; text-align: center; }
    .modal-content { width: 90%; margin: 20% auto; }
    .image-placeholder-container.two-column .image-placeholder,
    .image-placeholder-container.three-column .image-placeholder { flex-basis: calc(100% - 10px); margin-bottom: 15px; }
    .image-placeholder-container.two-column .image-placeholder:last-child,
    .image-placeholder-container.three-column .image-placeholder:last-child { margin-bottom: 0; }
    .page-section { padding: 15px; }
    .content-container { padding: 20px; }
}