/* =========================================================
========================  FOOTER SECTION  ==================
========================================================= 
Styles for website footer including layout, links, brand,
social icons, and bottom copyright bar.

Table of Content (Footer):
1. Base Footer Wrapper
2. Grid Layout
3. Column Titles
4. Brand (Left Column)
5. Quick Links && Social Links
6. Footer Bottom
========================================================= */

/* ===============================
    1. Base Footer Wrapper
 =============================== */
.site__footer {
    padding: var(--spacing-md) 0;
    border-top: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* ===============================
    2. Grid Layout
 =============================== */
.footer__container {
    display: grid;
    gap: var(--spacing-xxl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .footer__container {
        grid-template-columns: 1.2fr 1fr 1fr;
        align-items: start;
    }
}

/* ===============================
    3. Column Titles
 =============================== */
.footer__column-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-tertiary);
    letter-spacing: 1px;
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
}

/* ===============================
    4. Brand (Left Column)
 =============================== */
.footer__title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-tertiary);
    margin-bottom: var(--spacing-sm);
}

.footer__desc {
    font-size: var(--font-size-sm);
    opacity: 0.75;
    line-height: var(--line-height-lg);
    max-width: 90%;
    color: var(--color-text-inverse);
}

/* ===============================
    5. Quick Links
 =============================== */
.footer__links, .footer__socials {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.quick__link, .social__link {
    font-size: var(--font-size-sm);
    color: var(--color-text-inverse);
    opacity: 0.7;
    transition: opacity var(--transition-normal), transform var(--transition-fast);
}

.quick__link:hover, .social__link:hover {
    opacity: 1;
    transform: translateX(8px);
    color: var(--color-tertiary);
}   

/* ===============================
    6. Footer Bottom
 =============================== */
.footer__bottom {
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: var(--spacing-md);
    text-align: center;
    direction: ltr !important;
}

.footer__bottom p {
    font-size: var(--font-size-xs);
    opacity: 0.8;
    color: var(--color-text-inverse);
}

.footer__bottom span {
    color: var(--color-tertiary);
    font-weight: var(--font-weight-bold);
}