/* ================================================================
# DACOG Search Engine – System Architecture
# File: city-page.css
# Path: /static/css/city-page.css
# Version: 3.0.0
# Description: Mathematical-Unit City Profile (Light/Hero Theme)
# ================================================================*/

/* 1. Hero Banner Architecture */
.city-page-wrapper {
    padding-bottom: 3.125rem; /* 50px */
}

.hero-banner {
    min-height: 28.125rem; /* 450px */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-border-radius: 0 !important; /* Forces edge-to-edge layout */
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.9));
    z-index: 1;
}

.hero-banner .card-body {
    z-index: 2; /* Text sits above the gradient overlay */
}

/* Glassmorphism Effect for Stat Pills */
.backdrop-blur {
    -webkit-backdrop-filter: blur(0.5rem); /* 8px */
    backdrop-filter: blur(0.5rem);
    background: rgba(255, 255, 255, 0.15);
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
}

.btn-backdrop-blur {
    -webkit-backdrop-filter: blur(0.75rem); /* 12px */
    backdrop-filter: blur(0.75rem);
    background: rgba(255, 255, 255, 0.2);
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.btn-backdrop-blur:hover {
    background: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

/* 2. Theme-Aware Layout Elements */
.entity-nav {
    background-color: var(--dacog-bg-nav) !important;
    border-bottom: 0.0625rem solid var(--dacog-border-color) !important;
    z-index: 1020; /* Stays under header */
}

.entity-nav .nav-link {
    color: var(--dacog-text-muted);
    padding: 1rem 1.5rem;
    font-weight: 600;
    border: none;
    -webkit-transition: color 0.2s ease, border-color 0.2s ease;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.entity-nav .nav-link:hover {
    color: var(--dacog-text-main);
    border: none;
}

.entity-nav .nav-link.active {
    color: var(--dacog-accent-primary) !important;
    border-bottom: 0.1875rem solid var(--dacog-accent-primary) !important; /* 3px */
    background-color: transparent !important;
}

/* 3. Theme-Aware Data Cards */
.city-data-card {
    background-color: var(--dacog-bg-nav);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: var(--dacog-shadow-sm);
    -moz-box-shadow: var(--dacog-shadow-sm);
    box-shadow: var(--dacog-shadow-sm);
    padding: 1.5rem;
}

/* Suburb Badge Colors (Strict overrides for data tags) */
.bg-luxury { background-color: #ffd700 !important; color: #000000 !important; }
.bg-tech { background-color: #00d4ff !important; color: #000000 !important; }
.bg-creative { background-color: #ff006e !important; color: #ffffff !important; }

/* Dynamic Tables in Dark Mode Fixes */
.theme-hero .table {
    color: var(--dacog-text-main);
}
.theme-hero .table-hover tbody tr:hover {
    color: var(--dacog-text-main);
    background-color: rgba(255,255,255,0.05);
}
.theme-hero .table-light {
    background-color: var(--dacog-border-color);
    color: var(--dacog-text-muted);
}
.theme-hero .table > :not(caption) > * > * {
    border-bottom-color: var(--dacog-border-color);
}

/* 4. Nomad Widget (Premium Dark Styling forced) */
.nomad-widget {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    border: none;
}
.nomad-widget .text-info {
    color: #38bdf8 !important;
}
.nomad-widget .border-secondary {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   5. MEDIA QUERIES (AFRICAN TARGET OPTIMIZATION)
   ========================================================================== */

/* Tablet & Mobile Menu Scrolls */
@media screen and (max-width: 62em) {
    .entity-nav .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 0.125rem;
    }
    
    .entity-nav .nav-tabs::-webkit-scrollbar {
        display: none;
    }
}

/* Mobile Portrait (Max 480px / 30em) */
@media screen and (max-width: 30em) {
    .hero-banner {
        min-height: 22rem; /* Compress banner on mobile */
    }
    
    .hero-banner h1.display-2 {
        font-size: 3rem; /* Scale down massive title */
    }
    
    .hero-banner p.lead {
        font-size: 1.1rem !important;
    }
    
    .stat-pill {
        width: 100%; /* Stack pills vertically on tiny screens */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .city-data-card {
        padding: 1.25rem; /* Shrink inner padding */
        -webkit-border-radius: 0.75rem;
        border-radius: 0.75rem;
    }
    
    /* Table responsiveness logic */
    .table-responsive {
        border: 0.0625rem solid var(--dacog-border-color);
        -webkit-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }
}

/* Mobile Landscape (Max Height 480px / 30em) */
@media screen and (max-height: 30em) and (orientation: landscape) {
    .hero-banner {
        min-height: 18rem; /* Extremely squashed height to keep text visible */
    }
    .hero-banner .card-body {
        padding: 1rem !important; /* Push text to edges */
    }
}