/* --- 1. HEADER ALIGNMENT (LEFT) --- */

.navbar-default {
    background: #24323f !important; /* Your chosen blue */
    border: none !important;
    padding-top: 10px;
}

/* Align Logo and Title to the Left */
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* MOVED TO LEFT */
    height: auto !important;
    padding: 15px 0 15px 15px !important; /* Added left padding */
    width: auto !important;
    float: left !important;
}

/* Logo Image Styling */
.navbar-brand img {
    max-height: 80px !important;
    width: auto !important;
    margin-right: 20px !important; /* Space between logo and text */
    background: transparent !important;
    border: none !important;        /* Removes the border */
    box-shadow: none !important;    /* Removes the shadow */
    
    /* THE MAGIC: This makes the black parts of the image transparent */
    mix-blend-mode: screen; 
}

/* Force Text Title styling */
.navbar-brand::after {
    content: "Journal of Computation Intelligence and Research";
    color: #ffffff !important;
    font-family: "Times New Roman", Times, serif !important;
    font-size: 24px !important;
    font-weight: 400;
    line-height: 1.2;
    display: inline-block;
}

/* --- 2. MENU ALIGNMENT (LEFT, NEXT LINE) --- */
.navbar-header {
    width: 100% !important;
    float: none !important;
}

.navbar-collapse {
    width: 100% !important;
    clear: both !important;
    text-align: left !important; /* MENU TO THE LEFT */
    padding-left: 15px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.navbar-nav {
    float: left !important;
    margin: 0 !important;
}

/* Search Bar positioning */
.navbar-form {
    float: right !important;
    margin-right: 15px !important;
}

/* Search Button Text - BLACK as requested */
.navbar-form .btn-default {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: bold !important;
}

/* --- 3. MOBILE PADDING & ALIGNMENT --- */
@media (max-width: 767px) {
    /* 1. FORCE SAME-LINE LAYOUT */
    .navbar-brand {
        display: flex !important;
        flex-direction: row !important; /* Force side-by-side */
        flex-wrap: nowrap !important; /* Prevent dropping to new line */
        align-items: center !important;
        justify-content: flex-start !important;
        width: 80% !important; /* Save 20% space for the menu button */
        height: auto !important;
        padding-left: 10px !important;
        padding-top: 10px !important;
        float: left !important;
    }

    /* 2. THE LOGO: Fixed size so it doesn't get pushed */
    .navbar-brand img {
        max-height: 45px !important;
        width: auto !important;
        flex-shrink: 0 !important; /* Prevents the logo from shrinking */
        margin-right: 12px !important;
        margin-bottom: 0 !important;
        display: inline-block !important;
        background: transparent !important;
        border: none !important;        /* Removes the border */
        box-shadow: none !important;    /* Removes the shadow */
    
        /* THE MAGIC: This makes the black parts of the image transparent */
        mix-blend-mode: screen; 
    }

    /* 3. THE TEXT: Take remaining space and wrap internally */
    .navbar-brand::after {
        content: "Journal of Computation Intelligence and Research" !important;
        font-size: 13px !important; /* Small enough to fit */
        line-height: 1.2 !important;
        color: #ffffff !important;
        display: block !important;
        white-space: normal !important; /* Allows the text to wrap into lines NEXT to logo */
        flex: 1 !important; /* Tells text to fill the rest of the row */
        font-family: "Times New Roman", Times, serif !important;
    }

    /* 4. THE MENU BUTTON: Adjust positioning so it doesn't overlap */
    .navbar-toggle {
        margin-top: 18px !important;
        margin-right: 10px !important;
        float: right !important;
        background-color: rgba(255,255,255,0.1) !important;
    }

    /* 5. USER PROFILE: Make it very small to save space */
    #navigationUser {
        position: absolute;
        right: 10px;
        top: 2px;
        font-size: 10px !important;
    }
}

/* --- FOOTER LOGO FIX (Must be outside media query) --- */
.pkp_brand_footer img {
    max-width: 120px !important; /* Professional watermark size */
    height: auto !important;
    opacity: 0.5;
    filter: brightness(0) invert(1);
    float: right;
}

/* --- LAPTOP/DESKTOP ONLY: CENTER NAVIGATION --- */
@media (min-width: 768px) {
    
    /* 1. Center the container of the menu links */
    .navbar-collapse {
        text-align: center !important; /* Centering command */
        width: 100% !important;
        clear: both !important;
        padding-top: 5px;
        padding-bottom: 5px;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* 2. Change the menu list from "float:left" to "inline-block" */
    .navbar-nav {
        float: none !important;
        display: inline-block !important; /* This allows centering */
        margin: 0 auto !important;
    }

    /* 3. Keep the Search Bar on the Right side of the centered menu */
    .navbar-form {
        float: right !important;
        margin-right: 20px !important;
        margin-top: 4px !important;
    }
    
    /* 4. Navigation Link Styling */
    .navbar-nav > li > a {
        font-size: 12px !important;
        letter-spacing: 0.5px;
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-transform: uppercase;
    }
}