/* ORGANISM: HEADER - UDEMY STYLE ELEVATION */

.header-organism {
    width: 100%;
}

.master-header {
    /* Layout & Position */
    position: sticky;
    top: 0;
    z-index: 50;
    height: 70px;
    width: 100%;

    /* Appearance (Light Mode) */
    background-color: #ffffff;
    border-bottom: 1px solid #d1d7dc; /* Gray-300 equivalent */
    
    /* Shadows */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);

    /* Transitions */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.dark .master-header {
    background-color: #0f172a; /* darkbg (Slate-900) */
    border-bottom-color: #1e293b; /* Slate-800 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}


/* Used when a SubHeader is present immediately below */
.master-header.header-seamless {
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: 51; /* Must sit on top of the subheader */
}

.dark .master-header {
    background-color: #0f172a; /* darkbg (Slate-900) */
    border-bottom-color: #1e293b; /* Slate-800 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

/* Dark mode */
.dark .master-header.header-seamless {
    border-bottom: none !important;
    box-shadow: none !important;
}




.udemy-header {
    border-bottom: 1px solid #d1d7dc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 
                0 4px 12px rgba(0, 0, 0, 0.05);
}

.dark .udemy-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 
                0 2px 4px -1px rgba(0, 0, 0, 0.3);
    background-color: #1c1d1f;
}

.header-inner {
    width: 100%; max-width: 1920px; height: 70px; 
    padding: 0 1rem; /* Default (Tablet/Desktop) */
    display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;
}

/* Mobile padding */
@media (max-width: 767px) {
    .header-inner {
        padding: 0 0.75rem !important; /* Reduced to 12px for tighter mobile look */
        grid-template-columns: 1fr auto 1fr;
    }
}

.header-organism img {
    user-select: none;
    max-height: 44px;
    width: auto;
}