/* =========================================================
   GEOG670 FINAL PROJECT WEBSITE STYLE
   GEOINT Certification Accessibility Analysis
========================================================= */

/* =========================================================
   BASE LAYOUT
========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #1f1f1f;
    background: #A7A7A7;
}

#container {
    width: 100%;
}

/* =========================================================
   TYPOGRAPHY AND SHARED ELEMENTS
========================================================= */

.site-title {
    margin: 20px 0 14px;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: #000;
}

.small-text,
#reportPanel {
    font-size: 14px;
    line-height: 1.4;
}

/* =========================================================
   HEADER BANNER
========================================================= */

/* Main banner container */
#header {
    min-height: 170px;
    background: #001e2e;
}

/* Banner content overlay */
.header-overlay {
    position: relative;
    width: 100%;
    min-height: 170px;
    padding: 20px;
    color: #818283;

    /* Left-to-right blue/red gradient */
    background:
        linear-gradient(
            90deg,
            #001e2e 75%,
            #660000 100%
        );
}

/* Small header label:
   "WEB MAP DASHBOARD" */
.header-overlay > p {
    margin: 0 0 6px;

    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;

    color: #84754E;
}

/* Main banner title */
.header-overlay h2 {
    margin: 0;
    max-width: 820px;
    font-size: 30px;
    color: #818283;
}

/* =========================================================
   HEADER DASHBOARD TOOLS
   Statistics and Export cards
========================================================= */

/* Container holding both cards */
.header-tools {
    position: absolute;
    top: 5px;
    right: 32px;

    display: flex;
    gap: 12px;

    align-items: stretch;
}

/* Shared card styling */
.header-tool-card {
    min-width: 220px;
    padding: 12px 14px;

    background: rgba(0, 15, 30, 0.45);

    border: 1px solid rgba(167, 167, 167, 0.45);
    border-radius: 6px;

    color: #A7A7A7;

    font-size: 14px;
    line-height: 1.3;
}

/* Dashboard card headings */
.header-tool-card h3 {
    margin: 0 0 8px;
    color: #A7A7A7;
    font-size: 16px;
}

/* Statistics text */
.header-tool-card p {
    margin: 4px 0;
    color: #A7A7A7;

    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
}

/* Export button */
.header-tool-card button {
    padding: 6px 10px;

    background: #fff;
    color: #000;

    border: 1px solid #999;
    border-radius: 4px;

    cursor: pointer;
}

.header-tool-card button:hover {
    background: #d9d9d9;
}

/* =========================================================
   NAVIGATION BAR
========================================================= */

#nav {
    display: flex;
    width: 100%;

    background: #000066;

    border-top: 3px solid #0a0a0a;
    border-bottom: 3px solid #0a0a0a;
}

#nav a {
    flex: 1;

    padding: 16px 10px;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: #84754E;
    background: #001e2e;
}

#nav a:hover,
#nav a.active {
    color: #660000;
    background: #082c3f;
}

/* =========================================================
   MAIN CONTENT AREA
========================================================= */

#content {
    min-height: 600px;

    padding: 22px 28px 42px;

    background: #84754E;

    border-right: 10px solid #000066;
    border-bottom: 10px solid #000066;
    border-left: 10px solid #000066;
}

/* =========================================================
   HERO CARD
========================================================= */

.hero-card {
    margin-bottom: 20px;
    padding: 20px 24px;

    background: #A7A7A7;

    border-left: 6px solid #000066;
    border-radius: 6px;
}

.hero-card h2 {
    margin-top: 0;
}

/* =========================================================
   REPORT SECTIONS
========================================================= */

.section {
    margin: 18px 0;
    padding: 16px 20px;

    background: #A7A7A7;

    border: 1px solid #ddd;
    border-radius: 6px;
}

.section h3 {
    margin-top: 0;
    color: #001e2e;
}

.section li {
    margin-bottom: 8px;
}

/* =========================================================
   MAP PAGE LAYOUT
========================================================= */

.map-layout {
    display: grid;
    grid-template-columns: 340px 1fr;

    gap: 18px;

    min-height: 72vh;
}

/* Left sidebar */
.map-sidebar {
    padding: 18px;

    overflow-y: auto;

    background: #f8f8f8;

    border: 1px solid #d5d5d5;
    border-radius: 6px;
}

.map-sidebar h2 {
    margin-top: 0;
    color: #001e2e;
}

/* Main map panel */
.map-panel {
    min-height: 72vh;

    overflow: hidden;

    border: 1px solid #bbb;
    border-radius: 6px;
}

/* Leaflet map container */
#map {
    width: 100%;
    height: 72vh;
}

/* =========================================================
   SIDEBAR CONTROLS
========================================================= */

/* Search container */
.search-row {
    display: flex;
    gap: 8px;

    margin: 8px 0 18px;
}

/* Search input */
.search-row input {
    flex: 1;

    padding: 10px;

    border: 1px solid #aaa;
    border-radius: 4px;
}

/* Search button */
.search-row button {
    padding: 10px 14px;

    color: #fff;
    background: #001e2e;

    border: 0;
    border-radius: 4px;

    font-weight: bold;

    cursor: pointer;
}

.search-row button:hover {
    background: #082c3f;
}

/* Shared sidebar cards */
.tool-card {
    margin-top: 16px;
    padding: 14px;

    background: #A7A7A7;

    border: 1px solid #ddd;
    border-radius: 6px;
}

.tool-card h3 {
    margin-top: 0;
    color: #001e2e;
}

/* Layer toggle labels */
.tool-card label {
    display: block;
    margin: 8px 0;
}

/* =========================================================
   LEAFLET POPUPS
========================================================= */

.leaflet-popup-content {
    max-height: 220px;
    overflow-y: auto;
}

/* =========================================================
   FOOTER
========================================================= */

#footer {
    padding: 14px;

    color: #fff;
    background: #0a0a0a;
}

#footer p {
    margin: 0;
    text-align: center;
}

/* =========================================================
   RESPONSIVE LAYOUT
========================================================= */

/* Header cards collapse below banner title */
@media (max-width: 1100px) {

    .header-tools {
        position: static;

        margin-top: 18px;

        flex-wrap: wrap;
    }
}

/* Mobile/tablet layout */
@media (max-width: 900px) {

    .map-layout {
        grid-template-columns: 1fr;
    }

    .map-sidebar {
        order: 2;
    }

    .map-panel {
        order: 1;
    }

    #map {
        height: 60vh;
    }

    .header-overlay {
        padding: 22px;
    }

    .header-overlay h2 {
        font-size: 24px;
    }
}