/*
    Social Feed Template - Responsive Styles
    All @media queries and responsive adjustments will go here.
*/

/* Example: Adjust layout for smaller screens */
@media (max-width: 992px) { /* Tablet and below */
    .sf-main-content-area {
        flex-direction: column;
    }

    .sf-main-content-area.layout-two-column .sf-feed-column,
    .sf-main-content-area.layout-two-column .sf-right-sidebar,
    .sf-main-content-area.layout-three-column .sf-left-sidebar,
    .sf-main-content-area.layout-three-column .sf-feed-column,
    .sf-main-content-area.layout-three-column .sf-right-sidebar {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .sf-right-sidebar {
        margin-top: calc(var(--spacing-unit, 1rem) * 1.5);
    }

    .sf-search-area {
        max-width: 300px; /* Reduce search bar width */
    }
    .sf-main-navigation ul {
        margin-left: var(--spacing-unit, 1rem);
    }
    .sf-main-navigation ul li {
        margin-left: var(--spacing-unit, 1rem);
    }
}

@media (max-width: 768px) { /* Mobile */
    .container {
        width: 95%;
    }

    .social-feed-header .container,
    .sf-header-main {
        flex-direction: column;
        align-items: flex-start;
    }
    .sf-logo-area {
        margin-bottom: 0.5rem;
    }
    .sf-search-area {
        width: 100%;
        max-width: none;
        margin: 0.5rem 0;
    }
    .sf-main-navigation {
        width: 100%;
        margin-top: 0.5rem;
    }
    .sf-main-navigation ul {
        justify-content: space-around;
        margin-left: 0;
    }
    .sf-main-navigation ul li {
        margin-left: 0;
    }
    .sf-user-actions {
        margin-top: 0.5rem;
        padding-left: 0;
        align-self: flex-start;
    }

    .sf-feed-tabs li {
        margin-right: var(--spacing-unit, 1rem);
        font-size: 0.9rem;
    }

    .sf-avatar {
        width: 40px;
        height: 40px;
    }
    .sf-item-content h3 {
        font-size: 1.1rem;
    }
    .sf-item-content p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) { /* Smaller Mobile */
    body {
        font-size: 13px;
    }
    .sf-main-navigation ul li a {
        font-size: 0.9rem;
        padding: 0.3rem 0;
    }
    .sf-item-actions {
        font-size: 0.8rem;
    }
    .sf-item-actions span a i {
        font-size: 1rem;
    }
    .widget-title, .sf-widget-title {
        font-size: 1rem;
    }
}