/*
Theme Name: Starshine Responsive Styles
Description: Mobile-only styles for Starshine theme. Desktop layout remains unchanged.
*/

/* ========================================
   MOBILE ONLY - TABLET & BELOW (max-width: 768px)
   Desktop (769px+) uses base style.css unchanged
   ======================================== */

@media (max-width: 768px) {
    /* Hide fixed sidebar completely on mobile */
    .starshine-fixed-sidebar {
        display: none !important;
    }
    
    /* Reset site margins (no sidebar offset) */
    body.sidebar-left .site,
    body.sidebar-right .site {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Reset footer margins */
    body.sidebar-left .site-footer,
    body.sidebar-right .site-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }
    
    /* Stack content and sidebar vertically */
    .content-sidebar {
        flex-direction: column !important;
    }
    
    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .content-area {
        width: 100% !important;
    }
    
    /* Reduce padding on mobile */
    .site-content {
        padding: 15px 10px;
    }
    
    /* Hide hamburger menu button on mobile */
    .mobile-sidebar-toggle {
        display: none !important;
    }
    
    /* Stack navigation vertically */
    .main-nav ul {
        flex-direction: column;
    }
    
    .main-nav a {
        padding: 12px;
        text-align: center;
    }
    
    /* Make blog grids single column */
    .blog-grid-2 .post-card,
    .blog-grid-3 .post-card {
        width: 100% !important;
    }
    
    /* Stack classic blog layout */
    .blog-classic .post-card {
        flex-direction: column;
    }
    
    .blog-classic .post-thumbnail {
        width: 100%;
    }
    
    /* Footer single column */
    .footer-widgets {
        grid-template-columns: 1fr !important;
    }
    
    /* Touch-friendly buttons */
    button,
    .button,
    input[type="submit"],
    .wp-block-button__link {
        min-height: 44px;
        padding: 12px 20px;
    }
}

/* ========================================
   MOBILE ONLY - PHONES (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
    /* Even smaller padding */
    .site-content {
        padding: 10px;
    }
    
    /* Smaller typography */
    body {
        font-size: 15px;
    }
    
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.2em; }
    
    /* Hide effects on small screens for performance */
    .ss-snow-container,
    .ss-twinkle-container,
    .ss-glitter-container {
        display: none !important;
    }
}