/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* 1. Scale the logo image to a medium size */
.navbar-brand, 
.logo-container, 
.navbar-brand > img, 
.logo-img {
    height: 130px !important;    
    max-height: 130px !important;
    width: auto !important;
    min-width: 65px !important;
    display: block !important;
}

/* 2. Tighten the navigation bar container */
.navbar, 
.navbar-default, 
.header-container {
    min-height: 130px !important; 
    height: auto !important;
    padding-top: 5px !important;  
    padding-bottom: 5px !important;
    margin-bottom: 0px !important; 
}

/* 3. Aggressively pull the body start point up (ONLY on active survey pages) */
body:not(.completed) {
    padding-top: 100px !important; /* Reduced from 140px to force content upward */
}

/* 4. Forcefully yank the progress bar and main content container UP (ONLY on active survey pages) */
body:not(.completed) .progress-container,
body:not(.completed) .progress-bar-container,
body:not(.completed) .progress,
body:not(.completed) #progress-wrapper,
body:not(.completed) .outerframe-container,
body:not(.completed) #surveyview,
body:not(.completed) .survey-main,
body:not(.completed) #main-col {
    margin-top: -40px !important;  /* Using a negative margin to physically close the gap */
    padding-top: 0px !important;
}

/* 4b. Safely position the End Page below your custom 130px header */
body.completed .outerframe-container,
body.completed #completed-container {
    margin-top: 40px !important;
    padding-top: 20px !important;
    display: block !important;
}

/* 5. Remove any Version 6 'Flex' restrictions */
.navbar-header {
    float: none !important;
    display: block !important;
}