/* Footer Section Styles - Site footer with contact information and navigation links - Mobile First */
.footer {
    /* Positioning & Display */
    position: relative;
    text-align: center;

    /* Box Model */
    padding-top: var(--spacing-xl);
    padding-right: var(--spacing-md);
    padding-bottom: 0 !important;
    padding-left: var(--spacing-md);
    border-top: 1px solid var(--border-color);

    /* Colors & Backgrounds */
    background-color: var(--background-color);

    & .footer-content {
        /* Positioning & Display */
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;

        /* Box Model */
        gap: 2rem;
        padding: 0;

        & .footer-section {
            & h3 {
                /* Box Model */
                margin-bottom: 1.25rem;

                /* Typography */
                font-size: 1.15rem;
                font-weight: 600;
            }

            & p {
                /* Box Model */
                margin-bottom: 0.5rem;

                /* Typography */
                font-size: 0.9rem;
            }

            & a {
                /* Positioning & Display */
                display: block;

                /* Box Model */
                margin-bottom: 0.5rem;

                /* Typography */
                color: var(--accent-color);
                text-decoration: none;
                font-size: 0.9rem;

                /* Effects & Transitions */
                transition: all 0.3s ease;
            }
        }
    }

    & .footer-bottom {
        /* Positioning & Display */
        text-align: center;

        /* Box Model */
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        margin-top: 2rem;
        border-top: 1px solid var(--border-color);

        & p {
            /* Box Model */
            margin-bottom: 0;

            /* Typography */
            font-size: 0.85rem;
            color: var(--secondary-text);
        }
    }
}

/* Tablet styles */
@media (min-width: 768px) {
    .footer {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
        text-align: left;

        & .footer-content {
            grid-template-columns: repeat(2, 1fr);
            text-align: left;
            gap: 2.5rem;

            & .footer-section a:hover {
                /* Positioning & Display */
                transform: translateX(3px);

                /* Typography */
                color: var(--primary-color);
            }
        }

        & .footer-bottom {
            padding-top: 1.75rem;
            padding-bottom: 1.75rem;
            margin-top: 2.5rem;

            & p {
                font-size: 0.875rem;
            }
        }
    }
}

/* Desktop styles */
@media (min-width: 992px) {
    .footer {
        padding-left: var(--spacing-xxl);
        padding-right: var(--spacing-xxl);
        margin: 0 auto;
        max-width: 1200px;

        & .footer-content {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 3rem;

            & .footer-section h3 {
                margin-bottom: 1.5rem;
                font-size: 1.2rem;
            }
        }

        & .footer-bottom {
            padding-top: 2rem;
            padding-bottom: 2rem;
            margin-top: 3rem;

            & p {
                font-size: 0.9rem;
            }
        }
    }
}