/* ==========================================
   1. THE CANVAS: Elongated Diagonal Sky Wash
   ========================================== */
html body.parent div.parentpage div#header.parenthead {
    width: 100% !important;
    background-color: #02040a !important;
    
    /* 45-degree angle stretches the colors sideways across your 1706px screen */
    background: linear-gradient(45deg, 
        #02040a 0%, 
        #0b1736 35%, 
        #1e3a8a 50%, 
        #0b1736 65%, 
        #02040a 100%
    ) !important;
    
    border-bottom: 2px solid #2563eb !important; /* Sharp blue accent baseline */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important;
}

/* ==========================================
   2. TEXT INTERACTION: Increased Lift
   ========================================== */
html body.parent div.parentpage div#header.parenthead .mainmenu div a,
html body.parent div.parentpage div#header.parenthead #config-menulink span a {
    display: inline-block !important;
    /* Uses a spring-like ease out instead of a flat linear animation */
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), color 0.15s ease !important;
}

html body.parent div.parentpage div#header.parenthead .mainmenu div a:hover,
html body.parent div.parentpage div#header.parenthead #config-menulink span a:hover {
    color: #ffffff !important;
    transform: translateY(-3px) !important; /* Doubled the lift distance for a distinct reaction */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* Subtle text clarity boost */
    text-decoration: none !important;
}

/* ==========================================
   3. BUTTON INTERACTION: Solid Scale Pop
   ========================================== */
html body.parent div.parentpage div#header.parenthead button.btn,
html body.parent div.parentpage div#header.parenthead .btn-primary {
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.15s ease, filter 0.15s ease !important;
}

html body.parent div.parentpage div#header.parenthead button.btn:hover,
html body.parent div.parentpage div#header.parenthead .btn-primary:hover {
    transform: translateY(-3px) scale(1.04) !important; /* Increased lift and expansion scale */
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.6) !important; /* Clear highlight glow underneath */
    filter: brightness(1.2) !important;
}

/* ==========================================
   4. UTILITY ICONS: Quick Response
   ========================================== */
html body.parent div.parentpage div#header.parenthead .header-right a i,
html body.parent div.parentpage div#header.parenthead #profile-button i,
html body.parent div.parentpage div#header.parenthead #help-button i {
    display: inline-block !important;
    transition: transform 0.12s ease, color 0.12s ease !important;
}

html body.parent div.parentpage div#header.parenthead .header-right a i:hover,
html body.parent div.parentpage div#header.parenthead #profile-button:hover i,
html body.parent div.parentpage div#header.parenthead #help-button:hover i {
    color: #60a5fa !important;
    transform: scale(1.2) translateY(-1px) !important; /* Visually pops forward and up slightly */
}