/* Footer Menu Layout Improvements
-----------------------------------------
This CSS file provides improved layout options for the footer menu items,
creating a more balanced spread across different device sizes.
*/

/* Create a more spread out layout for Quick Links */
.app-footer .quick-links-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    width: 100%;
    margin: 0 auto;
}

/* Group buttons by category */
.app-footer .btn-group-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* On larger screens, use a wider grid with more columns */
@media (min-width: 768px) {
    .app-footer .quick-links-container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        max-width: 100%;
    }
}

/* On extra large screens, allow for even more horizontal spread */
@media (min-width: 1200px) {
    .app-footer .quick-links-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        max-width: 100%;
    }
}

/* Make buttons more consistent in size */
.app-footer .btn-outline-light,
.app-footer .btn-outline-secondary,
.app-footer .btn-outline-primary,
.app-footer .btn-outline-success,
.app-footer .btn-outline-info,
.app-footer .btn-outline-warning,
.app-footer .btn-outline-danger {
    width: auto;
    min-width: 100px;
    margin: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Footer section spacing */
.app-footer .footer-section {
    margin-bottom: 1.5rem;
}

/* Ensure icons and text align properly */
.app-footer .btn i {
    margin-right: 0.25rem;
}

/* Better social media icon layout */
.app-footer .social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.app-footer .social-links a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.app-footer .social-links a:hover {
    transform: translateY(-3px);
}