/* ===============================================
   BOOTSWATCH COSMO NAVBAR OVERRIDE
   Must override Cosmo's navbar styling
   =============================================== */

/* Force navbar to be fixed and sticky */
nav.navbar.sb-slide {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 1000 !important;
	background-color: #053349 !important;
	border: none !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
	height: 50px !important;
	min-height: 50px !important;
	max-height: 50px !important;    display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 0 !important;
    background-color: #222222 !important;
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.01), 0 4px 0 0 rgba(0, 0, 0, 0.02), 0 3px 0 0 rgba(0, 0, 0, 0.04);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.02) 51%);
	background-size: 100% !important;
	background-repeat: no-repeat !important;
}

/* Reset any child elements to block/flex */
nav.navbar.sb-slide > * {
    display: block !important;
}

/* Left toggle button - ALWAYS on the left */
nav.navbar.sb-slide .sb-toggle-left {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 60px !important;
    padding: 13px !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;
    position: relative !important;
}



/* Right toggle button - PUSH TO THE RIGHT with margin-left: auto */
nav.navbar.sb-slide .sb-toggle-right {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    padding: 13px !important;
    margin: 0 0 0 auto !important;  /* margin-left: auto pushes to right! */
    cursor: pointer !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;
    position: relative !important;
}


nav.navbar.sb-slide .navicon-line:last-child {
    margin-bottom: 0 !important;
}

/* Override any Cosmo container styles */
nav.navbar.sb-slide .container,
nav.navbar.sb-slide .container-fluid {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    display: none !important;
}


/* ===============================================
   CONTAINER WIDTH CLASSES
   Add these to your style.css
   =============================================== */

/* FULL WIDTH - 100% of screen */
.container-full {width: 98%;max-width: 98%;padding-left: 15px;padding-right: 15px;margin-left: auto;margin-right: auto;}

/* NARROW - Slightly narrower with small margins */
.container-narrow {width: 90%;max-width: 90%;padding-left: 15px;padding-right: 15px;margin-left: auto;margin-right: auto;}

/* BOXED - Even narrower, typical content width *//* Won't go wider than 1200px on large screens */
.container-boxed {width: 80%;max-width: 1200px; padding-left: 20px;padding-right: 20px;margin-left: auto;margin-right: auto;}

/* Optional: Extra narrow for forms, cards, etc */
.container-extra-narrow {
    width: 100%;
    max-width: 800px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* Optional: Mobile responsive adjustments */
@media (max-width: 768px) {
    .container-narrow,
    .container-boxed {
        width: 95%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .container-extra-narrow {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}