/* ================================================================
# DACOG Search Engine – System Architecture
# File: dacog-layouts.css
# Path: /static/css/dacog-layouts.css
# Version: 3.0.0
# Description: Unified Layout Controller (Index, Main, Search)
# ================================================================*/

/* ==========================================================================
   1. GLOBAL BRAND VARIABLES (THEME ARCHITECTURE)
   ========================================================================== */

/* LIGHT THEME (Default) */
:root, .theme-light {
    --dacog-bg-base: #f8f9fa;
    --dacog-bg-nav: #ffffff;
    --dacog-bg-topbar: #1a1a1a;
    --dacog-text-main: #212529;
    --dacog-text-muted: #6c757d;
    --dacog-text-topbar: #9aa0a6;
    --dacog-border-color: rgba(0, 0, 0, 0.08);
    --dacog-accent-primary: #0d6efd;
    --dacog-accent-danger: #dc3545;
    --dacog-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --dacog-shadow-dropdown: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* HERO THEME (Premium Dark Mode) */
.theme-hero {
    --dacog-bg-base: #121212;
    --dacog-bg-nav: #1e1e1e;
    --dacog-bg-topbar: #000000;
    --dacog-text-main: #e8eaed;
    --dacog-text-muted: #9aa0a6;
    --dacog-text-topbar: #bdc1c6;
    --dacog-border-color: #3c4043;
    --dacog-accent-primary: #8ab4f8;
    --dacog-accent-danger: #f28b82;
    --dacog-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    --dacog-shadow-dropdown: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   2. STRICT VIEWPORT CONTROL & RESETS
   ========================================================================== */
html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* STRICT LOCK: Prevents global bouncing/scrolling */
    background-color: var(--dacog-bg-base);
    color: var(--dacog-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The main container that holds dynamic content.
  This allows vertical scrolling INSIDE the page while the body remains locked.
*/
.dacog-scroll-area {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Momentum scrolling for iOS */
    padding-bottom: 2rem;
}

/* ==========================================================================
   3. UNIFIED NAVIGATION COMPONENTS
   ========================================================================== */
   
/* General Nav Behaviors */
.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.dacog-index-nav { border-bottom: none; }
.dacog-main-nav, .results-header {
    background-color: var(--dacog-bg-nav) !important;
    border-bottom: 0.0625rem solid var(--dacog-border-color);
    -webkit-box-shadow: var(--dacog-shadow-sm);
    -moz-box-shadow: var(--dacog-shadow-sm);
    box-shadow: var(--dacog-shadow-sm);
}

/* Search Topbar (Layout_Search) */
.dacog-sys-topbar {
    background: var(--dacog-bg-topbar);
    color: var(--dacog-text-topbar);
    text-align: center;
    padding: 0.3125rem;
    font-size: 0.6875rem; /* 11px */
    letter-spacing: 0.0625rem;
    border-bottom: 0.0625rem solid var(--dacog-border-color);
}

/* Interactive Links */
.hover-primary:hover, 
.nav-link.hover-primary:hover {
    color: var(--dacog-accent-primary) !important;
}

.hover-dark:hover {
    color: var(--dacog-text-main) !important;
}

/* Dropdown Styling */
.dropdown-menu {
    background-color: var(--dacog-bg-nav);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-box-shadow: var(--dacog-shadow-dropdown);
    -moz-box-shadow: var(--dacog-shadow-dropdown);
    box-shadow: var(--dacog-shadow-dropdown);
    border-radius: 1rem;
}

.dropdown-item {
    color: var(--dacog-text-main);
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--dacog-bg-base);
    color: var(--dacog-accent-primary);
}

/* Search Inputs in Header */
.header-search form {
    background: var(--dacog-bg-base);
    border: 0.0625rem solid var(--dacog-border-color);
}

.header-search input {
    color: var(--dacog-text-main) !important;
}

/* Filter Bar */
.search-filter-bar {
    background-color: var(--dacog-bg-nav);
    border-bottom: 0.0625rem solid var(--dacog-border-color);
}

/* ==========================================================================
   4. GLOBAL MOBILE MENU ICON (HAMBURGER)
   ========================================================================== */
.navbar-toggler {
    border: none;
    background: transparent;
    padding: 0.5rem;
    cursor: pointer;
}

.navbar-toggler:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Custom Hamburger Lines to match DACOG Premium feel */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28108, 117, 125, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

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

/* Tablets and Mid-size Screens (Max 992px / 62em) */
@media screen and (max-width: 62em) {
    .navbar-collapse {
        background-color: var(--dacog-bg-nav);
        padding: 1.5rem;
        border-radius: 1rem;
        margin-top: 1rem;
        -webkit-box-shadow: var(--dacog-shadow-dropdown);
        box-shadow: var(--dacog-shadow-dropdown);
        border: 0.0625rem solid var(--dacog-border-color);
        z-index: 9999;
        position: absolute;
        width: 90vw;
        right: 5vw;
    }
    
    .dropdown-menu {
        -webkit-box-shadow: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding-left: 1rem;
    }
}

/* Mobile Portrait - Primary African Target (Max 480px / 30em) */
@media screen and (max-width: 30em) {
    .navbar {
        padding: 0.75rem 1rem;
    }
    
    .navbar-brand {
        font-size: 1.5rem !important; /* Scale logo down slightly */
    }
    
    .header-search form {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .dacog-master-footer {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem !important;
    }
    
    .search-filter-bar .d-flex {
        padding-bottom: 0.5rem;
        /* Hides scrollbar on mobile filters */
        -ms-overflow-style: none;  
        scrollbar-width: none; 
    }
    .search-filter-bar .d-flex::-webkit-scrollbar { 
        display: none; 
    }
}

/* Mobile Landscape (Max Height 480px / 30em) */
@media screen and (max-height: 30em) and (orientation: landscape) {
    .navbar {
        padding: 0.25rem 1rem;
    }
    .dacog-sys-topbar {
        display: none; /* Hide topbar to save vertical space in landscape */
    }
}