/* Navigation Buttons Responsive Styling - Extracted from responsive.css */

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
    /* Responsive Navigation Buttons */
    .pf-calendar-navigation {
        max-width: 300px; /* Slightly larger on mobile for better proportion */
        height: 52px; /* Larger touch target height */
    }
    
    .pf-nav-btn {
        width: 52px !important; /* Accessibility standard touch target */
        height: 52px !important;
    }
    
    .pf-nav-btn.prev {
        left: -52px; /* Safe positioning within container padding */
    }
    
    .pf-nav-btn.next {
        right: -52px; /* Safe positioning within container padding */
    }
    
    /* Larger icons for better visibility */
    .pf-nav-btn::after {
        width: 8px !important;
        height: 8px !important;
        border-width: 2.5px !important;
    }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .pf-calendar-navigation {
        max-width: 280px; /* Optimized for small screens */
        height: 56px; /* Even larger touch targets on very small screens */
    }
    
    .pf-nav-btn {
        width: 56px !important; /* Maximum touch target for small screens */
        height: 56px !important;
    }
    
    .pf-nav-btn.prev {
        left: -56px; /* Safe within the 3.5rem (56px) container padding */
    }
    
    .pf-nav-btn.next {
        right: -56px; /* Safe within the 3.5rem (56px) container padding */
    }
    
    /* Even larger icons on very small screens */
    .pf-nav-btn::after {
        width: 10px !important;
        height: 10px !important;
        border-width: 3px !important;
    }
}

/* Very Small Screens (max-width: 360px) */
@media (max-width: 360px) {
    .pf-calendar-navigation {
        max-width: 260px;
    }
}