/* 1. CLEAN HEADER: NO BARS, ALIGNED LOGO */
header#masthead, .site-header, .header-wrapper, .main-navigation, .header-main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.site-branding {
    margin-left: 100px !important;
    padding-top: 25px !important;
    display: block !important;
}

/* 2. THE LAYOUT: 100px MARGINS & SIDE-BY-SIDE */
.site-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 1400px !important;
    margin-left: 100px !important;
    margin-top: 10px !important;
    background: #ffffff !important;
}

/* 3. POST COLUMN: FIXED AT 650px */
#primary {
    flex: 0 0 650px !important;
    margin: 0 !important;
}

/* 4. SIDEBAR: DARK SINGLE COLUMN */
#secondary {
    flex: 0 0 350px !important; 
    margin-left: 40px !important;
    background-color: #222222 !important;
    padding: 30px !important;
    min-height: 1200px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 5. WIDGETS: SNAPPED TO TOP */
#secondary .widget {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}

#secondary .widget:first-child {
    margin-top: -10px !important; 
}

/* 6. MOBILE: HIDE FEATURED PHOTOS */
@media screen and (max-width: 800px) {
    .post-thumbnail, .entry-thumbnail, .featured-image {
        display: none !important;
    }
}

/* 7. TEXT COLORS */
#secondary h2, #secondary a, #secondary li, #secondary .tagcloud a {
    color: #ffffff !important;
}

    #secondary {
        display: table-cell !important;
        width: 35% !important;
        vertical-align: top !important;
    }

    .widget-area {
        display: block !important;
        column-count: 2 !important;
        column-gap: 20px !important;
    }
}

/* 4. Mobile Fix - Force Sidebar Visibility */
@media screen and (max-width: 899px) {
    .site-header { 
        background: #000 !important; 
    }

    /* Force the sidebar container to be visible and move to the bottom */
    #secondary, 
    .widget-area, 
    #secondary .widget {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        position: relative !important;
        clear: both !important;
    }

    /* Add a visual break so you can see where the widgets start */
    #secondary {
        margin-top: 50px !important;
        padding: 40px 20px !important;
        border-top: 2px solid #ccc !important;
        background: #ffffff !important;
    }

    /* Stack widgets in one column */
    .widget-area {
        column-count: 1 !important;
    }
}

/* 1. THE TOP: BARS VANISH & LOGO REMAINS */
header#masthead, .site-header, .header-wrapper, .main-navigation {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.site-branding {
    margin-left: 100px !important;
    padding-top: 25px !important;
    display: block !important;
}

/* 2. THE STAGE: 100px LEFT MARGIN & SIDE-BY-SIDE */
.site-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 1400px !important;
    margin-left: 100px !important;
    margin-top: 10px !important;
    background: #ffffff !important;
}

/* 3. THE POST COLUMN (650px INTACT) */
#primary {
    flex: 0 0 650px !important;
    margin: 0 !important;
}

/* 4. THE DARK SIDEBAR (SINGLE COLUMN STACK) */
#secondary {
    flex: 0 0 350px !important; /* Adjusted width for a clean single column */
    margin-left: 40px !important;
    background-color: #222222 !important;
    padding: 30px !important;
    min-height: 1200px !important;
    
    /* THE FIX: Vertical Stacking */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* 5. WIDGET ALIGNMENT (SNAPS TO TOP) */
#secondary .widget {
    margin-top: 0 !important;
    margin-bottom: 40px !important; /* Space between widgets vertically */
    padding-top: 0 !important;
}

/* Force the very first widget to touch the top edge */
#secondary .widget:first-child {
    margin-top: -10px !important; 
}

/* 6. MOBILE ONLY: HIDE PHOTOS */
@media screen and (max-width: 800px) {
    .post-thumbnail, .entry-thumbnail, .featured-image {
        display: none !important;
    }
    .site-content {
        display: block !important;
        margin-left: 20px !important;
    }
    #secondary {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* 7. TEXT COLORS (STABLE) */
#secondary h2, #secondary a, #secondary li, #secondary .tagcloud a {
    color: #ffffff !important;
}