/* ==========================================================================
   Mad Science Lab - Dark Theme & Global Canvas Suite
   ========================================================================= */

/* Set the entire site canvas to the exact dark background tone of the logo */
html, 
body, 
#Ilcome, 
.background-white, 
#content {
    background-color: #0d1a27 !important;
    color: #ffffff !important;
}

/* Ensure headings and content text stand out cleanly */
h1, h2, h3, h4, h5, h6, .title, .lead, p {
    color: #ffffff !important;
}

/* Base horizontal rules modified to a subtle divider matching the dark scheme */
hr {
    border-top: 1px solid #2d3d4e !important;
}

/* Clear the isolated menu block strip entirely */
#hornav {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-top: 25px !important;       /* Clean vertical separation buffer below logo */
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   Header & Logo Layout (Image Focused with Circular Clipping)
   ========================================================================= */
#header {
    position: relative !important;
    background-color: #0d1a27 !important; /* Pure lab background instead of image */
    background-image: none !important;
    min-height: auto !important;
    height: auto !important;             /* STRICT OVERRIDE: Crushes the inline HTML height:100% lock */
    display: flex !important;          
    align-items: center !important;    
    justify-content: center !important;
    padding: 30px 0 10px 0 !important;
}

/* Container boundaries */
#header .container {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

.logo {
    padding-top: 0 !important;          
    padding-bottom: 10px !important;   
    text-align: center !important;
    width: 100% !important;
}

.logo a {
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
}

/* Main logo image constraint & perfect transparent corner clipping */
.logo img {
    max-width: 350px !important;       /* Keeps desktop layout proportion balanced */
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    /* Cuts out the outer square corners completely, making them perfectly transparent */
    clip-path: circle(49% at 50% 50%) !important; 
}

/* --- Sub-Page Slim Header Variant Overrides --- */
body.sub-page #header {
    padding: 20px 0 10px 0 !important; 
}

body.sub-page #hornav {
    margin-top: 15px !important;       
}

/* Adjust image scale down slightly on sub-pages so it doesn't crowd content */
body.sub-page .logo img {
    max-width: 260px !important;
}

/* ==========================================================================
   Content Layout Tuning & Paragraph Spacing Fixes
   ========================================================================= */

/* Pull the content wrapper area tightly up underneath the main navigation menu */
#Ilcome .container > .margin-vert-40 {
    margin-top: 15px !important;       /* Drops the massive top buffer spacing */
    margin-bottom: 30px !important;
}

/* FORCE EXPLICIT WHITE FOR PILLAR ICONS - Override any theme color locks */
#Ilcome h4 i.fa,
#Ilcome h4 i.fa::before,
.fa,
.fa-gears,
.fa-microchip,
.fa-eye,
.fa-rss,
.fa-server,
.fa-code-fork {
    color: #ffffff !important;
    opacity: 1 !important;
    fill: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Ensure spacing inside the core pillar grids */
#Ilcome .row h4 i.fa {
    margin-right: 8px !important;
}

/* ==========================================================================
   Navigation Menu Styling
   ========================================================================= */

/* Keep menu links highly visible, centered, and set as block links */
#hornavmenu > li > a, 
#hornavmenu > li > span {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    font-weight: 500 !important;
    display: block !important;
    text-align: center !important;
    transition: all 0.2s ease-in-out !important;
}

/* Force the icon wrapper to be a block element to push text down */
#hornavmenu li a i.fa {
    display: block !important;           
    margin: 0 auto 8px auto !important;  
    width: auto !important;
    height: auto !important;
    transition: transform 0.2s ease-in-out !important;
}

/* Menu icon sizing and rendering overrides */
#hornavmenu li a i.fa::before,
#hornavmenu li a i.fa:link::before,
#hornavmenu li a i.fa:visited::before {
    color: #ffffff !important;
    opacity: 1 !important;               
    display: block !important;       
    font-size: 24px !important;          
    padding: 0 !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    transition: color 0.2s ease-in-out !important;
}

/* Hover Effect: Vibrant cyan/neon blue lift to pop against the theme color */
#hornavmenu li a:hover {
    color: #00d2ff !important; 
    text-decoration: none !important;
}

#hornavmenu li a:hover i.fa {
    transform: translateY(-4px) !important; /* Elegant subtle upward lift on hover */
}

#hornavmenu li a:hover i.fa::before {
    color: #00d2ff !important;
}

/* Drop-down submenus (if populated later) */
#hornavmenu ul li a,
#hornavmenu ul li a:link,
#hornavmenu ul li a:visited {
    background-color: #2d3d4e !important;
    color: #ffffff !important;      
    text-shadow: none !important;    
    text-align: left !important;     
    padding: 10px 15px !important;
    display: block !important;
}

#hornavmenu ul li a:hover {
    background-color: #00d2ff !important; 
    color: #0d1a27 !important;
}

#hornav ul ul .parent:after {
    display: none !important;
}

/* ==========================================================================
   Global Thin Footer Overrides
   ========================================================================= */
#base {
    display: none !important;
}

#footer {
    background-color: #070d14 !important; /* Slightly darker shade for separation */
    background-image: none !important;
    padding: 20px 0 !important;
    border-top: 1px solid #2d3d4e !important; 
}

#footer,
#footer p,
#footer #copyright p {
    color: #999999 !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   Responsive tuning for mobile viewports
   ========================================================================== */
@media (max-width: 767px) {
    #header {
        min-height: auto !important;
        background-color: #0d1a27 !important;
        background-image: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 25px 0 15px 0 !important;   
    }
    
    body.sub-page #header {
        padding: 20px 0 10px 0 !important; 
    }
    
    .logo img {
        max-width: 240px !important; /* Scales down layout cleanly on mobile phone views */
    }
    
    body.sub-page .logo img {
        max-width: 200px !important;
    }
}