/* ads.css */

/* Horizontal Ad Containers */
.ad-h { 
    min-height: 90px; 
    width: 100%; 
    display: none; /* JS toggles this to 'flex' */
    justify-content: center; 
    align-items: center;
    margin: 10px 0; 
    background: rgba(0,0,0,0.02); /* Very subtle hint of a box */
}

/* Vertical Ad Containers */
.ad-v { 
    width: 120px; 
    min-width: 120px; 
    min-height: 600px; 
    display: none; /* JS toggles this */
    position: sticky; 
    top: 10px; 
    background: #fafafa; 
    border-radius: 4px;
}

/* The Layout "Glue" */
/* .page { 
    display: flex; 
    gap: 15px; 
    width: 100%; 
    align-items: flex-start; 
    
}

.column { 
    flex: 1;    
    min-width: 0; 
} */

/* Mobile Fix: Hide side ads on screens narrower than 1024px */
@media (max-width: 1024px) {
    .ad-v { display: none !important; }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex !important; margin-left: auto; }

    /* The nav MUST be hidden by default on mobile */
    .nav {
        display: none !important; 
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background: #2b2d43;
        z-index: 1001;
    }

    /* This class is what the JS toggles */
    .nav.open {
        display: flex !important;
    }
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.menu-toggle span {
    transition: transform 0.3s, opacity 0.3s;
}