/**
 * Clone Colors Override CSS
 * 
 * Matches color scheme of soicau247s.org EXACTLY
 * 
 * STRICT RULES:
 * - ONLY color, background, border-color adjustments
 * - NO layout/positioning changes
 * - NO structure modifications
 * - Loads LAST to override existing styles
 */

/* ============================================
   PRIMARY COLORS - Navigation & Headers
   ============================================ */

/* Header Menu Background - Blue */
.header-menu.bg-blue1,
.bg-blue1 {
    background-color: #004593 !important;
    background: #004593 !important;
}

/* Nav Header - Blue Background with White Text */
/* High specificity to override design-system-important.css */
body .nav_header,
html body .nav_header,
.nav_header {
    background: #004593 !important;
    background-color: #004593 !important;
    color: #ffffff !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
}

body .nav_header *,
html body .nav_header *,
.nav_header * {
    color: #ffffff !important;
}

/* Menu items height normalization - 56px */
body .nav_header .menu_a,
html body .nav_header .menu_a,
.nav_header .menu_a,
body .nav_header .menu_ul,
html body .nav_header .menu_ul,
.nav_header .menu_ul {
    height: 56px !important;
    line-height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
}

/* Menu list items */
body .nav_header .menu_li,
html body .nav_header .menu_li,
.nav_header .menu_li {
    height: 56px !important;
    line-height: 56px !important;
}

/* Homepage font style - capitalize and color */
.main-home {
    text-transform: capitalize !important;
}

.main-home h1,
.main-home h2,
.main-home h3,
.main-home h4,
.main-home h5,
.main-home h6 {
    text-transform: capitalize !important;
    color: #333333 !important;
}

.main-home a {
    color: #004593 !important;
}

.main-home a:hover {
    color: #D0021B !important;
}

/* Header Menu Links */
.header-menu .nav-link,
.header-menu a {
    color: #ffffff !important;
}

.header-menu .nav-link:hover,
.header-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Active Menu Item */
.header-menu .active-menu,
.header-menu .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   RED ACCENT COLORS - Headers & Highlights
   ============================================ */

/* Red Background 1 - Section Headers (Changed to Blue) */
.bg-red1 {
    background-color: #004593 !important;
    background: #004593 !important;
}

/* Red Background 2 - Table Headers (Changed to Blue) */
.bg-red2 {
    background-color: #004593 !important;
    background: #004593 !important;
}

/* Red Text */
.text-red1 {
    color: #ED1C24 !important;
}

/* Red Text in Tables */
.table-result .text-red1,
.result .text-red1 {
    color: #ED1C24 !important;
}

/* ============================================
   TABLE COLORS - KQXS Tables
   ============================================ */

/* Table Result Headers */
.table-result h3.bg-red2,
.result h3.bg-red2 {
    background-color: #004593 !important;
    color: #ffffff !important;
}

/* Table Borders */
.table-flex-border {
    border-color: #dee2e6 !important;
}

.table-flex {
    border-color: #dee2e6 !important;
}

/* Table Number Colors */
.table-result .text-number {
    color: #333333 !important;
}

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

/* Footer Background */
footer.bg-blue1 {
    background-color: #004593 !important;
    background: #004593 !important;
}

footer .text-white {
    color: #ffffff !important;
}

footer .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer a {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer a:hover {
    color: #ffffff !important;
}

/* ============================================
   BORDER COLORS
   ============================================ */

.border-bottom {
    border-bottom-color: #dee2e6 !important;
}

.border-radius-4 {
    border-color: #dee2e6 !important;
}

/* ============================================
   BUTTON COLORS
   ============================================ */

/* Tab Navigation Pills */
.nav-pills.bg-blue1 {
    background-color: #004593 !important;
}

.nav-pills .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */

.text-white {
    color: #ffffff !important;
}

/* Main Content Text */
.main-home {
    color: #333333 !important;
}

/* ============================================
   LINK COLORS
   ============================================ */

a {
    color: #004593 !important;
}

a:hover {
    color: #D0021B !important;
}

/* ============================================
   SPECIFIC COMPONENT COLORS
   ============================================ */

/* Breadcrumb Table Title */
.breadcrumb-table-title a {
    color: #004593 !important;
}

.breadcrumb-table-title a:hover {
    color: #D0021B !important;
}

/* Result Section */
.result {
    border-color: #dee2e6 !important;
}

.result-single,
.result-multi {
    border-color: #dee2e6 !important;
}

/* Tab Content */
.tab-content {
    background-color: #ffffff !important;
}

/* ============================================
   MOBILE MENU COLORS
   ============================================ */

.show-menu-mobi {
    color: #333333 !important;
}

.show-menu-mobi:hover {
    color: #004593 !important;
}

/* ============================================
   UTILITY OVERRIDES
   ============================================ */

/* Ensure no layout shifts - only color changes */
* {
    /* NO position, margin, padding, width, height changes */
}

/* ============================================
   RESPONSIVE HEADER FIXES
   ============================================ */

/* Desktop: Ensure header is horizontal and 56px (≥992px) */
@media (min-width: 992px) {
    /* Desktop header-menu - horizontal menu */
    body .header-menu,
    html body .header-menu,
    .header-menu {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }
    
    /* Desktop nav_header - horizontal menu */
    body .nav_header,
    html body .nav_header,
    .nav_header {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        display: flex !important;
        flex-direction: row !important;
        overflow: visible !important;
    }
    
    /* Desktop menu list - horizontal */
    body .header-menu .nav.menu,
    html body .header-menu .nav.menu,
    .header-menu .nav.menu,
    body .header-menu .main-menu-pc,
    html body .header-menu .main-menu-pc,
    .header-menu .main-menu-pc {
        display: flex !important;
        flex-direction: row !important;
        height: 56px !important;
        width: auto !important;
        position: relative !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force d-lg-flex to display on desktop */
    body .header-menu .d-lg-flex,
    html body .header-menu .d-lg-flex,
    .header-menu .d-lg-flex,
    body .header-menu .nav.menu.d-lg-flex,
    html body .header-menu .nav.menu.d-lg-flex,
    .header-menu .nav.menu.d-lg-flex {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Desktop menu items - horizontal */
    body .header-menu .nav-item,
    html body .header-menu .nav-item,
    .header-menu .nav-item {
        height: 56px !important;
        line-height: 56px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Desktop menu links - horizontal */
    body .header-menu .nav-link,
    html body .header-menu .nav-link,
    .header-menu .nav-link,
    body .header-menu .active-menu,
    html body .header-menu .active-menu,
    .header-menu .active-menu {
        height: 56px !important;
        line-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        padding: 0 1rem !important;
    }
    
    /* Desktop menu items - horizontal */
    body .nav_header .menu_ul,
    html body .nav_header .menu_ul,
    .nav_header .menu_ul {
        display: flex !important;
        flex-direction: row !important;
        height: 56px !important;
        width: auto !important;
        position: relative !important;
    }
    
    /* Desktop menu links - horizontal */
    body .nav_header .menu_a,
    html body .nav_header .menu_a,
    .nav_header .menu_a {
        height: 56px !important;
        line-height: 56px !important;
        display: inline-block !important;
        white-space: nowrap !important;
    }
    
    /* Hide mobile menu on desktop */
    .show-menu-mobi,
    .menu-mobi {
        display: none !important;
    }
    
    /* Ensure desktop menu is visible - DO NOT override d-lg-none */
    .header-menu .d-lg-block {
        display: block !important;
    }
    
    .header-menu .d-lg-flex {
        display: flex !important;
    }
    
    /* Force header-menu nav.menu to be visible on desktop - MAXIMUM SPECIFICITY */
    html body .header-menu .nav.menu.d-lg-flex,
    body .header-menu .nav.menu.d-lg-flex,
    html body .header-menu .main-menu-pc,
    body .header-menu .main-menu-pc,
    .header-menu .nav.menu.d-lg-flex,
    .header-menu .main-menu-pc {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 56px !important;
        flex-direction: row !important;
        align-items: center !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Ensure header-menu container shows menu */
    html body .header-menu,
    body .header-menu,
    .header-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force all nav.menu inside header-menu to be visible - OVERRIDE ANY HIDDEN */
    html body .header-menu .nav.menu,
    body .header-menu .nav.menu,
    .header-menu .nav.menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Override any display:none on menu items */
    html body .header-menu .nav.menu *,
    body .header-menu .nav.menu *,
    .header-menu .nav.menu * {
        visibility: visible !important;
    }
}

/* Mobile: Vertical menu (<992px) */
@media (max-width: 991px) {
    /* Mobile header-menu - allow flexible height */
    body .header-menu,
    html body .header-menu,
    .header-menu {
        min-height: 56px !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Mobile nav_header - allow flexible height */
    body .nav_header,
    html body .nav_header,
    .nav_header {
        min-height: 56px !important;
        height: auto !important;
        max-height: none !important;
        flex-direction: column !important;
    }
    
    /* Mobile menu - vertical */
    body .header-menu .nav.menu,
    html body .header-menu .nav.menu,
    .header-menu .nav.menu {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile menu items - full width */
    body .header-menu .nav-link,
    html body .header-menu .nav-link,
    .header-menu .nav-link {
        height: auto !important;
        min-height: 48px !important;
        line-height: 48px !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Mobile menu - vertical */
    body .nav_header .menu_ul,
    html body .nav_header .menu_ul,
    .nav_header .menu_ul {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile menu items - full width */
    body .nav_header .menu_a,
    html body .nav_header .menu_a,
    .nav_header .menu_a {
        height: auto !important;
        min-height: 48px !important;
        line-height: 48px !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Show mobile menu button */
    .show-menu-mobi,
    .menu-mobi {
        display: block !important;
    }
    
    /* Hide desktop menu on mobile */
    .d-lg-block,
    .d-lg-flex {
        display: none !important;
    }
}

/* Color-only overrides maintain structure */
@media (max-width: 768px) {
    .bg-blue1 {
        background-color: #004593 !important;
    }
    
    .bg-red1 {
        background-color: #ED1C24 !important;
    }
    
    .bg-red2 {
        background-color: #D0021B !important;
    }
}