/* =====================================================
   MAPAQUALI — FOOTER
===================================================== */


/* =====================================================
   1. ESTRUTURA PRINCIPAL
===================================================== */

.mq-footer {
    width: 100%;

    background: var(--mq-footer-bg);
    color: var(--mq-footer-text);

    border-top:
        1px solid var(--mq-header-border);

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.mq-footer__inner {
    width: min(1400px, calc(100% - 64px));
    margin: 0 auto;

    padding:
        64px 0 28px;
}


/* =====================================================
   2. PARTE SUPERIOR
===================================================== */

.mq-footer__top {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.1fr)
        minmax(420px, 1.9fr);

    align-items: start;

    gap: 80px;
}


/* =====================================================
   3. MARCA
===================================================== */

.mq-footer__brand {
    max-width: 460px;
}

.mq-footer__logo {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--mq-footer-text);

    font-size: 24px;
    font-weight: 800;

    letter-spacing: 0.04em;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.mq-footer__logo:hover {
    color: var(--mq-primary);

    transform:
        translateY(-1px);
}

.mq-footer__brand p {
    margin: 0;

    max-width: 420px;

    color: var(--mq-text-soft);

    font-size: 15px;
    line-height: 1.75;

    transition:
        color 0.25s ease;
}


/* =====================================================
   4. ÁREA DE LINKS
===================================================== */

.mq-footer__links {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 48px;
}


/* =====================================================
   5. COLUNAS
===================================================== */

.mq-footer__column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


/* =====================================================
   6. TÍTULOS DAS COLUNAS
===================================================== */

.mq-footer__title {
    display: block;

    margin-bottom: 6px;

    color: var(--mq-footer-text);

    font-size: 13px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        color 0.25s ease;
}


/* =====================================================
   7. LINKS
===================================================== */

.mq-footer__column a {
    position: relative;

    display: inline-block;

    color: var(--mq-text-soft);

    font-size: 14px;
    font-weight: 500;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.mq-footer__column a:hover {
    color: var(--mq-primary);

    transform:
        translateX(3px);
}


/* =====================================================
   8. TEXTOS INSTITUCIONAIS
===================================================== */

.mq-footer__column span:not(.mq-footer__title) {
    color: var(--mq-text-muted);

    font-size: 14px;

    line-height: 1.5;

    transition:
        color 0.25s ease;
}


/* =====================================================
   9. DIVISOR
===================================================== */

.mq-footer__divider {
    width: 100%;
    height: 1px;

    margin:
        52px 0 24px;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--mq-divider-start) 75%,
                transparent
            ) 0%,
            color-mix(
                in srgb,
                var(--mq-divider-middle) 28%,
                transparent
            ) 38%,
            transparent 100%
        );

    transition:
        background 0.25s ease;
}


/* =====================================================
   10. PARTE INFERIOR
===================================================== */

.mq-footer__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.mq-footer__bottom p,
.mq-footer__bottom span {
    margin: 0;

    color: var(--mq-text-muted);

    font-size: 13px;

    line-height: 1.5;

    transition:
        color 0.25s ease;
}


/* =====================================================
   11. MODO CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-footer {
    background:
        linear-gradient(
            180deg,
            var(--mq-page-start) 0%,
            var(--mq-surface-muted) 100%
        );

    color:
        var(--mq-text);

    border-top:
        1px solid var(--mq-border-strong);
}


html:not([data-theme="dark"])
.mq-footer__logo,

html:not([data-theme="dark"])
.mq-footer__title {
    color:
        var(--mq-text);
}


html:not([data-theme="dark"])
.mq-footer__brand p,

html:not([data-theme="dark"])
.mq-footer__column a {
    color:
        var(--mq-text-soft);
}


html:not([data-theme="dark"])
.mq-footer__column a:hover {
    color:
        var(--mq-link);
}


html:not([data-theme="dark"])
.mq-footer__column span:not(.mq-footer__title),

html:not([data-theme="dark"])
.mq-footer__bottom p,

html:not([data-theme="dark"])
.mq-footer__bottom span {
    color:
        var(--mq-text-muted);
}


/* =====================================================
   12. MODO ESCURO
===================================================== */

html[data-theme="dark"]
.mq-footer {
    background:
        var(--mq-header-bg);

    color:
        var(--mq-footer-text);

    border-top:
        1px solid var(--mq-header-border);
}


html[data-theme="dark"]
.mq-footer__logo,

html[data-theme="dark"]
.mq-footer__title {
    color:
        var(--mq-footer-text);
}


html[data-theme="dark"]
.mq-footer__brand p,

html[data-theme="dark"]
.mq-footer__column a {
    color:
        var(--mq-text-soft);
}


html[data-theme="dark"]
.mq-footer__column a:hover {
    color:
        var(--mq-primary);
}


html[data-theme="dark"]
.mq-footer__column span:not(.mq-footer__title),

html[data-theme="dark"]
.mq-footer__bottom p,

html[data-theme="dark"]
.mq-footer__bottom span {
    color:
        var(--mq-text-muted);
}


/* =====================================================
   13. ACESSIBILIDADE — FOCO
===================================================== */

.mq-footer a:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--mq-primary) 55%,
            transparent
        );

    outline-offset: 4px;

    border-radius: 3px;
}


/* =====================================================
   14. RESPONSIVO — TABLET
===================================================== */

@media (max-width: 1000px) {

    .mq-footer__top {
        grid-template-columns: 1fr;

        gap: 48px;
    }

    .mq-footer__brand {
        max-width: 600px;
    }

    .mq-footer__links {
        max-width: 760px;
    }
}


/* =====================================================
   15. RESPONSIVO — MOBILE
===================================================== */

@media (max-width: 800px) {

    .mq-footer__inner {
        width:
            calc(100% - 32px);

        padding:
            52px 0 24px;
    }

    .mq-footer__top {
        gap: 40px;
    }

    .mq-footer__links {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            36px 28px;
    }

    .mq-footer__divider {
        margin:
            42px 0 22px;
    }

    .mq-footer__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }
}


/* =====================================================
   16. RESPONSIVO — CELULAR PEQUENO
===================================================== */

@media (max-width: 520px) {

    .mq-footer__inner {
        padding:
            44px 0 22px;
    }

    .mq-footer__top {
        gap: 36px;
    }

    .mq-footer__links {
        grid-template-columns:
            1fr;

        gap: 32px;
    }

    .mq-footer__column {
        gap: 10px;
    }

    .mq-footer__logo {
        font-size: 22px;
    }

    .mq-footer__divider {
        margin:
            36px 0 20px;
    }

    .mq-footer__bottom {
        gap: 8px;
    }
}


/* =====================================================
   17. REDUÇÃO DE MOVIMENTO
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .mq-footer,
    .mq-footer__logo,
    .mq-footer__brand p,
    .mq-footer__column a,
    .mq-footer__column span,
    .mq-footer__title,
    .mq-footer__bottom p,
    .mq-footer__bottom span {
        transition:
            none;
    }

    .mq-footer__logo:hover,
    .mq-footer__column a:hover {
        transform:
            none;
    }
}