/******************
    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
*/

/*@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');*/

/* 1. Remove padding from the navbar and force it to be full width */
#survey-nav {
    padding: 0 !important;
    background-color: #fff; /* Matches banner background */
}

/* 2. Break the container constraint */
#survey-nav .container-fluid.col-xl-8 {
    max-width: 100% !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 !important;
    display: block; /* Allows banner to stack with menu if needed */
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Ensures the shadow stays on top of the body content */
    z-index: 1050; 
    border-bottom: none !important;
}

/* 3. Make the logo container full width */
#survey-nav .logo-container {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#survey-nav .logo-container img {
    padding: 0 !important;
    max-height: 100px;
}

/* 4. Force the banner image to stretch full width */
#survey-nav img.logo {
    height: auto;       /* Maintain aspect ratio */
    display: block;
    object-fit: contain;  /* Ensures it fills the space nicely */
}

/* 5. Position the menu button over the banner so it's still accessible */
#navbar-menu {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1030; /* Ensures it stays above the image */
}

/* 6. Style the toggle button to be visible against the banner */
#navbar-toggler {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
}

body { background-color: #eee;}


body .top-container {
    margin: 0 !important;
    padding: 20px 20px 0 20px !important;
    background-color: transparent !important;
 }
 
 .space-col { margin-top: 10px !important; }
 
 #welcome-container {
     background-color: #fff;
     border-radius: 8px;
     width: 100%;
     max-width: 100% !important;
 }
 

.top-content {
     margin-top: 0 !important;
 }
 
 .brand-logo .top-container .top-content { margin-top: 0 !important; padding-top: 0 !important; }
 

.large-heading, .group-container .group-title {
    font-family: "Helvetica Neue", Arial, "Noto Sans";
    font-size:1.5rem;
    margin-bottom: 4px !important;
}

.form-heading {
    font-size:1.05rem;
    margin-top: 0 ;
    padding-top: 0 !important;
}

#progressbar-top { padding: 10px 0; }
.top-container .progress { height:10px; }

.question-count-text {
    font-size:0.95rem;
    font-weight: 300;
    font-style: italic;
}

.group-container {
    background-color: white;
    margin-top: 100px;
    border-radius: 8px;
}

.group-container .space-col {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.group-container .group-description {
    font-size:0.95rem !important;
    font-weight: 300;
    font-style: italic;
    margin: 12px 12px 0 12px !important;
    padding: 0 12px !important;
}

.group-container h1.group-title, h1.survey-name {
    font-size:1.25rem !important;
    color:white;
    line-height: 2;
}

.group-title, .survey-name {
    margin: 0px !important;
    padding: 0 12px !important;
    background-color: var(--bs-primary);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-bottom: 8px;
}

.question-container {
    margin:1em;
    padding: 1em;
    border: 1px solid #eeeeee;
    border-radius: 6px;
}

.question-title-container {
    display:flex;
    margin-bottom: 0 !important;
} 

.question-number {
    line-height: 33px;
    font-size: 1.5rem;
    color: #000 !important;
}

.question-number::after {
    content: ".";
    display: inline-block;   /* Make margin work */
    margin-right: 4px;       /* Space after the period */
    transform: translateX(-6px);
}

.question-valid-container, .question-help-container { 
    margin-top: 0 !important; 
    font-weight: 300;
    font-size: 0.9em;
    font-style: italic;
    color: #6E748C !important;
}

 .survey-welcome, .number-of-questions {
     padding: 12px !important;
 }
 
 .survey-description {
     padding: 12px !important;
     padding-bottom: 0 !important;
 }
 
 i.asterisk {
    color: var(--bs-danger) !important;
}

.group-outer-container { margin-bottom: 0 !important; }
#ls-button-submit { width: 50%; }

/* slider vital assesment fix */
/**
 * Minimal CSS Fix - Keep Min/Max Values Inline
 * Add this to your LimeSurvey question group or theme
 */

/* Prevent wrapping - keep everything on one line */
.ls-slider-answer-row .row {
    flex-wrap: nowrap !important;
    --bs-gutter-x: 3.5rem;
    width: 90%;
}

/* Make sure min/max labels don't wrap */
.slider-min-block,
.slider-max-block {
    white-space: nowrap;
}

/* On mobile, make labels slightly smaller if needed */
@media (max-width: 576px) {
    .slider-min-block,
    .slider-max-block {
        font-size: 0.875rem;
    }
}