/**
 * Header and Navigation Styles
 * Custom styling for SoundSteps header, navigation, and logo
 */

/* Logo Styling - Using high specificity to override Pixel theme's 37px */
.navbar-brand img.navbar-logo,
img.navbar-logo {
    height: 100px !important;
    width: auto;
    filter: invert(0);
    max-width: none;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .navbar-brand img.navbar-logo,
    img.navbar-logo {
        height: 80px !important;
    }
}

/* Override Pixel theme's absolute positioning that causes overlap */
.navbar-main {
    position: relative !important;
    top: auto !important;
    margin-bottom:0px;
    padding-bottom:0px;
}

/* Header spacing adjustments */
.header-global {
    padding-bottom: 1.5rem !important;
    margin-bottom: 0;
    position: relative;
    z-index: 1000;
    display: block;
    width: 100%;
}

/* Section header for logged-in user pages */
.section-header {
    padding-top: 0rem;
    padding-bottom: 0.5rem;
    margin-top: 0;
    clear: both;
    position: relative;
    z-index: 999;
    display: block;
    width: 100%;
}

.section-header h1 {
    margin-bottom: 0;
    font-size: 1.75rem;
}

.section-header .btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .section-header h1 {
        font-size: 1.5rem;
    }

    .section-header {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/* Admin header - more compact */
.admin-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 0;
}

.admin-header h1 {
    margin-bottom: 0;
    font-size: 1.75rem;
}

/* Breadcrumb spacing */
.section-breadcrumbs {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Subnav spacing */
.subnav {
    margin-bottom: 0;
}

/* Admin sidebar navigation */
.admin-sidebar {
    min-height: calc(100vh - 80px);
    background-color: #f8f9fa;
}

.admin-sidebar .list-unstyled a {
    color: #495057;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

.admin-sidebar .list-unstyled a:hover {
    background-color: #e9ecef;
}

.admin-sidebar .list-unstyled a.active {
    background-color: #007bff;
    color: #fff;
}

/* Admin content area */
.admin-content {
    padding: 2rem;
}

@media (max-width: 768px) {
    .admin-content {
        padding: 1rem;
    }
}