/* Global Styles
   - Applies to all pages (e.g., home/index.php, advanced-mapping.html)
   - Sets default font, background color, text color, and resets margins/padding
*/
body {
    font-family: 'Roboto', sans-serif; /* Default font for most pages (e.g., home/index.php) */
    background-color: #ffffff; /* White background for consistent look */
    color: #333; /* Default text color (dark gray) */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
}

/* Advanced Mapping Page
   - Overrides default font for advanced-mapping.html to use Montserrat
   - Applied to pages with .advanced-mapping class (add <div class="advanced-mapping"> to advanced-mapping.html)
*/
.advanced-mapping body {
    font-family: 'Montserrat', sans-serif; /* Use Montserrat for Advanced Mapping */
}

/* Navbar
   - Styles the navigation bar used across all pages
   - Includes sticky positioning, gradient background, and hover effects
*/
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    background: linear-gradient(90deg, #1a3c6e, #2a5b9b); /* Blue gradient background */
    z-index: 1000 !important; /* Ensure navbar stays above other content */
    position: sticky !important; /* Stick to top when scrolling */
    top: 0 !important; /* Align to top of viewport */
}

.navbar-brand {
    font-weight: 700; /* Bold brand name (e.g., Berkeley County GIS) */
    font-size: 1.8rem; /* Larger font for brand */
    display: flex; /* Flex layout for logo and text alignment */
    align-items: center; /* Vertically center logo and text */
}

.logo {
    width: 40px; /* Logo size (gislogo.gif) */
    height: 40px;
    margin-right: 10px; /* Space between logo and brand text */
}

.nav-link, .dropdown-toggle {
    font-weight: 500; /* Medium weight for nav links */
    color: white !important; /* White text for visibility on gradient */
    transition: color 0.3s ease; /* Smooth color change on hover */
}

.nav-link:hover, .dropdown-toggle:hover {
    color: #00d4ff !important; /* Cyan hover color */
}

.dropdown-menu {
    background-color: #2a5b9b; /* Match navbar gradient for dropdown */
    border: none; /* Remove default border */
    border-radius: 8px; /* Rounded corners */
}

.dropdown-item {
    color: white; /* White text for dropdown items */
    font-weight: 500; /* Medium weight */
    display: flex; /* Flex for alignment */
    align-items: center; /* Center vertically */
}

.dropdown-item:hover {
    background-color: #1a3c6e; /* Darker blue on hover */
    color: #00d4ff; /* Cyan text on hover */
}

.navbar .nav-link.active,
.navbar .dropdown-item.active {
    background-color: #0d6efd !important; /* Blue background for active link */
    color: #ffffff !important; /* White text */
    font-weight: 700 !important; /* Bold for emphasis */
    border-radius: 4px !important; /* Rounded corners */
}

.navbar .nav-link.active.dropdown-toggle {
    background-color: transparent !important; /* Clear background for dropdown toggle */
    color: #ffffff !important; /* White text */
    font-weight: 700 !important; /* Bold */
}

/* Hero Section
   - Styles the hero banner on all pages (e.g., "Welcome to Berkeley County, SC!")
   - Uses background image with overlay for contrast
*/
.hero-section {
    background: url('/images/mc.jpg') no-repeat center center/cover; /* Hero image */
    padding: 6rem 0; /* Vertical padding for spacious look */
    position: relative; /* For overlay positioning */
    z-index: 1 !important; /* Ensure content stays above overlay */
}

.hero-section::before {
    content: ''; /* Empty content for overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for text readability */
}

.hero-section .container {
    position: relative; /* Ensure content stays above overlay */
    z-index: 1; /* Above overlay */
}

.hero-section h1 {
    font-weight: 700; /* Bold title */
    font-size: 3rem; /* Large font */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Shadow for depth */
}

.hero-section p {
    font-size: 1.2rem; /* Slightly larger subtitle */
    margin-bottom: 2rem; /* Space below */
}

/* Info Section (Home Page)
   - Styles the main content area on home/index.php
   - Includes background image, overlay, and card for contact and maps
*/
.info-section {
    background: url('/images/greenbelt.jpg') no-repeat center center/cover; /* Background image */
    position: relative; /* For overlay */
    padding: 2rem 0; /* Vertical padding */
    margin-top: 0; /* No top margin */
}

.info-section::before {
    content: ''; /* Empty content for overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay for readability */
    z-index: 0; /* Below content */
}

.info-section .container {
    position: relative; /* Ensure content stays above overlay */
    z-index: 1; /* Above overlay */
}

.info-card {
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white card */
    border: none; /* No border */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    transition: transform 0.3s ease; /* Smooth hover animation */
    padding: 2rem; /* Internal padding */
    margin: 1rem; /* External margin */
    position: relative; /* For watermark positioning */
}

.info-card::before {
    content: ''; /* Empty content for watermark */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/bclogo.png') no-repeat center center/80%; /* Watermark image */
    opacity: 0.3; /* Faded watermark */
    z-index: -1; /* Behind card content */
    transition: opacity 0.8s ease; /* Smooth hover transition */
}

.info-card:hover::before {
    opacity: 0.2; /* Slightly more visible on hover */
}

.info-card:hover {
    transform: translateY(-5px); /* Lift card on hover */
}

/* Contact Information (Home Page)
   - Styles the "Contact Information" and "Explore Our Maps" titles
   - Professional, business-like headings
*/
.contact-title,
.maps-title {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 2.3rem;
    color: #1f2b3a;
    text-align: center;
    margin-bottom: 1.75rem;
    letter-spacing: 0.02em;                 /* a bit more spacing for polish */
    position: relative;

    /* slightly softer, wider shadow for a refined look */
    text-shadow:
        0 1px 1px rgba(255, 255, 255, 0.75), /* gentle top highlight */
        0 2px 4px rgba(0, 0, 0, 0.48);       /* main shadow */

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Thin accent line that’s always visible */
.contact-title::after,
.maps-title::after {
    content: '';
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.5rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0d6efd, #00a8cc); /* subtle GIS-blue accent */
}

.contact-section {
    padding: 0; /* No padding to align with card */
}

.contact-list {
    list-style: none; /* Remove bullets */
    padding: 0; /* No padding */
}

.contact-list li {
    margin-bottom: 1.5rem; /* Space between items */
    display: flex; /* Flex layout for label and value */
    flex-direction: column; /* Stack label above value */
}

.contact-label {
    font-size: 1.1rem; /* Slightly larger font */
    font-weight: 700; /* Bold for titles (Office Hours, Phone, Email, Address) */
    color: #333; /* Dark gray */
    display: flex; /* Flex for icon and text */
    align-items: center; /* Center vertically */
    margin-bottom: 0.3rem; /* Space below label */
}

.contact-label i {
    color: #00a8cc; /* Cyan icon */
    font-size: 1.3rem; /* Larger icon */
    margin-right: 0.75rem; /* Space between icon and text */
}

.contact-value {
    font-size: 1rem; /* Standard font size */
    color: #555; /* Lighter gray for contrast */
}

.contact-value strong {
    font-weight: 600; /* Semi-bold for emphasized text (e.g., Addressing, GIS) */
    color: #333; /* Match label color */
}

/* Map Gallery (Home Page)
   - Styles the "Explore Our Maps" section on home/index.php
   - Includes title and gallery of map items with images
*/
.map-section {
    padding-left: 1.5rem; /* Space from divider */
    border-left: 2px solid rgba(0, 168, 204, 0.3); /* Vertical cyan divider */
}

.map-gallery {
    text-align: left; /* Left-align gallery items */
}

.map-gallery .gallery-item {
    display: flex; /* Flex for image and text */
    align-items: center; /* Center vertically */
    margin-bottom: 1.2rem; /* Space between items */
    transition: transform 0.3s ease; /* Smooth hover animation */
}

.map-gallery .gallery-item:hover {
    transform: translateX(5px); /* Slide right on hover */
}

.map-gallery .gallery-img {
    width: 150px; /* Image size */
    height: 100px;
    object-fit: cover; /* Fit image without distortion */
    border-radius: 8px; /* Rounded corners */
    margin-right: 1rem; /* Space between image and text */
}

.map-gallery .gallery-text {
    font-size: 0.9rem; /* Smaller font */
    color: #333; /* Dark gray */
    flex-grow: 1; /* Fill available space */
    line-height: 1.5; /* Space for <br> tags */
}

.map-gallery .gallery-text strong {
    font-weight: 600; /* Semi-bold for map titles */
    color: #333; /* Match text color */
}

/* Advanced Mapping Page
   - Styles the map logo image on advanced-mapping.html
   - Ensures consistent sizing and centering
*/
.map-logo {
    width: 400px; /* Increased image size for desktop */
    height: 300px;
    object-fit: cover; /* Fit image without distortion */
    border-radius: 8px; /* Rounded corners */
    display: block; /* Center with margin */
    margin: 0 auto; /* Center horizontally */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: transform 0.3s ease; /* Smooth hover animation */
}

.map-logo:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Footer
   - Styles the footer on all pages
   - Dark blue background with centered text
*/
footer {
    background: #1a3c6e; /* Dark blue */
    padding: 1.5rem 0; /* Vertical padding */
}

/* Mobile Optimizations
   - Adjusts styles for screens up to 768px (tablets and phones)
   - Scales fonts, images, and padding for smaller screens
*/
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem; /* Smaller title */
    }

    .hero-section p {
        font-size: 1rem; /* Smaller subtitle */
    }

    .navbar-brand {
        font-size: 1.4rem; /* Smaller brand text */
    }

    .logo {
        width: 30px; /* Smaller logo */
        height: 30px;
    }

    .hero-section {
        padding: 4rem 0; /* Reduced padding */
    }

    .info-section {
        padding: 1.5rem 0; /* Reduced padding */
        margin-top: 0;
    }

    .info-card {
        padding: 1.5rem; /* Reduced card padding */
        margin: 0.5rem; /* Smaller margins */
    }

    .contact-title,
    .maps-title {
        font-size: 1.6rem; /* Slightly smaller heading on mobile */
    }

    .contact-section {
        padding: 0;
    }

    .map-section {
        padding: 0; /* Remove side padding */
        padding-top: 1.5rem; /* Space above maps */
        border-left: none; /* Remove vertical divider */
        border-top: 2px solid rgba(0, 168, 204, 0.3); /* Horizontal divider */
    }

    .contact-list, .map-gallery {
        text-align: left; /* Maintain left alignment */
    }

    .contact-list li {
        margin-bottom: 1.2rem; /* Slightly less space */
    }

    .contact-label {
        font-size: 1rem; /* Smaller font */
        font-weight: 700; /* Maintain bold */
    }

    .contact-value {
        font-size: 0.9rem; /* Smaller font */
    }

    .contact-value strong {
        font-weight: 600;
        color: #333;
    }

    .map-gallery .gallery-img {
        width: 120px; /* Smaller image */
        height: 80px;
    }

    .map-gallery .gallery-text {
        font-size: 0.8rem; /* Smaller font */
        line-height: 1.5;
    }

    .map-gallery .gallery-text strong {
        font-weight: 600;
        color: #333;
    }

    .map-logo {
        width: 240px; /* Smaller image for mobile */
        height: 160px;
    }

    footer {
        padding: 1rem 0; /* Reduced padding */
    }
}

/* Small Screen Optimizations
   - Further adjustments for screens up to 576px (small phones)
   - Ensures compact layout
*/
@media (max-width: 576px) {
    .navbar .dropdown-item.active {
        font-size: 0.9rem !important; /* Smaller active link */
    }

    .info-section {
        padding: 1rem 0; /* Minimal padding */
    }

    .info-card {
        padding: 1rem; /* Minimal card padding */
    }

    .map-logo {
        width: 200px; /* Smallest image */
        height: 133px; /* Maintain aspect ratio */
    }
}

/* Weather Modal Styles */
.weather-modal .modal-content {
    border-radius: 10px;
}

.weather-info {
    text-align: center;
    padding: 20px;
}

.weather-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    display: block;
}

.weather-icon svg {
    width: 100%;
    height: 100%;
}

.loading {
    color: #007bff;
}

.error {
    color: #dc3545;
}

.atlas-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}