/* ==========================================================================
   1. FIXED FLOATING HEADER CONFIGURATION (PREVENTS DESKTOP CROPPING)
   ========================================================================= */

/* Remove Lovecraft's default fixed height bounds to prevent top-to-bottom clipping */
.header-image-wrapper,
.header-wrapper,
.header-image {
    background-color: #9fcfc1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Force ONLY the graphic element to float naturally without stretching or cropping */
.header-image img {
    display: block !important;
    max-width: 100% !important;
    width: auto !important; 
    height: auto !important;
    max-height: 444px !important; 
    margin: 0 auto !important; 
    object-fit: contain !important; /* Protects avatar and right edges from being sliced */
}

/* Always hide Lovecraft's native overlapping text titles over your graphic artwork */
.header-wrapper .blog-title,
.header-wrapper .blog-description {
    display: none !important;
}

/* ==========================================================================
   2. HIDE TOP NAV BAR ON HOMEPAGE ONLY (DESKTOP SPECIFIC FIX)
   ========================================================================== */

/* Target the theme's core navigation structures strictly on desktop screens */
@media only screen and (min-width: 1025px) {
    .home #site-header,
    .home #site-navigation,
    .home .navigation-wrapper,
    .home .navigation,
    .home .navigation-inner,
    .home .main-menu,
    .home #site-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        opacity: 0 !important;
    }
}

/* Closes up the extra padding gap Lovecraft leaves for the top navigation row */
.home .header-wrapper {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* ==========================================================================
   3. RESPONSIVE MEDIA QUERIES FOR PERFECT BALANCED VISUALS
   ========================================================================== */

/* --- A. DESKTOP & LARGE TABLET VIEWS (Screens wider than 480px) --- */
@media only screen and (min-width: 481px) {
    /* Locks in your perfect 85px margin break to clear column floats */
    .header-image-wrapper {
        margin-bottom: 85px !important;
    }
    .main-wrapper, #content-wrapper {
        margin-top: 25px !important;
        clear: both !important;
    }
}

/* --- B. SMARTPHONE MOBILE VIEW ONLY (Screens 480px wide and narrower) --- */
@media only screen and (max-width: 480px) {
    /* Prevents the empty padding from blowing up into a massive gap on small phones */
    .header-image-wrapper {
        margin-bottom: 25px !important;
    }
    
    /* Retained your exact nudge modifications for the mobile hamburger menu */
    .home .toggles,
    .home .nav-toggle,
    .toggles,
    .nav-toggle,
    .mobile-menu-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 10px !important; /* Safely nudges it down away from running off screen edge */
        position: relative !important;
        top: 9px !important;
    }
}

/* ==========================================================================
   4. DEEP SIDEBAR NAVIGATION ROLLOVER OVERRIDE (HOVER EFFECT)
   ========================================================================== */

/* Target Lovecraft's deep sidebar list anchor layers to accept your color mapping */
.sidebar .widget_content ul li a:hover,
#sidebar .widget_content ul li a:hover,
.widgets .widget_content ul li a:hover,
.widget_content ul li a:hover,
.widget_nav_menu ul li a:hover {
    color: #99dcd4 !important; /* Lights up text in your brand meme aqua */
    text-decoration: underline !important;
    opacity: 1 !important;
    transition: color 0.15s ease-in-out !important;
}