/* Responsive Styles */

/* Tablets and smaller desktops */
@media (max-width: 1024px) {
    .sidebar {
        width: 25%;
    }
    
    .main-content {
        width: 46%;
        margin: 10px 2%;
    }
    
    .primary-menu li {
        margin-left: 15px;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .site-content {
        flex-direction: column;
    }
    
    .sidebar,
    .main-content {
        width: 100%;
        margin: 10px 0;
        order: 0;
    }
    
    .sidebar-left,
    .sidebar-right {
        width: 100%;
        margin: 10px 0;
    }
    
    .header-container {
        flex-wrap: wrap;
    }
    
    .menu-toggle {
        display: block;
        order: 2;
    }
    
    .primary-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        order: 3;
        margin-top: 20px;
    }
    
    .primary-menu.active {
        display: flex;
    }
    
    .primary-menu li {
        margin: 5px 0;
        width: 100%;
    }
    
    .primary-menu a {
        display: block;
        padding: 10px;
        background: var(--gray-light);
        border-radius: 4px;
    }
    
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-branding,
    .footer-menu {
        flex: 0 0 100%;
        margin-bottom: 20px;
    }
    
    .footer-menu ul {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    .header-logo {
        max-height: 40px;
    }
    
    .site-title {
        font-size: 20px;
    }
    
    .post-title {
        font-size: 22px;
    }
    
    .post-meta {
        flex-direction: column;
        gap: 5px;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .sidebar {
        padding: 15px;
    }
    
    .read-more {
        width: 100%;
        text-align: center;
    }
}

/* Small Mobile Phones */
@media (max-width: 320px) {
    .container {
        padding: 0 10px;
    }
    
    .post-title {
        font-size: 18px;
    }
    
    .post-content {
        font-size: 14px;
    }
}

/* Large Desktops */
@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
    }
}