/* ==========================================================
   FALAE

   Arquivo:
      site-footer.css

   Domínio:
      Site Institucional

   Componente:
      Footer

   Responsabilidade:
      Definir a apresentação visual do rodapé institucional,
      seus links, acessos e informações complementares.

   Dependências:
      site-variables.css
      site-base.css
      site-typography.css

   Sprint:
      20.1 — Produção Landing Page
========================================================== */


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {
    position: relative;

    overflow: hidden;

    padding:
        var(--site-space-20)
        0
        var(--site-space-8);

    background:
        linear-gradient(
            145deg,
            var(--site-color-primary-active) 0%,
            var(--site-color-primary) 100%
        );

    color: var(--site-color-text-inverse);
}

.site-footer::before {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px
        );

    background-size: 4rem 4rem;

    content: "";

    pointer-events: none;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.75),
            transparent
        );
}


/* ==========================================================
   CONTEÚDO PRINCIPAL
========================================================== */

.site-footer__main {
    position: relative;
    z-index: var(--site-z-content);

    display: grid;
    grid-template-columns:
        minmax(18rem, 1.1fr)
        minmax(0, 1.9fr);

    align-items: flex-start;

    gap: clamp(
        var(--site-space-12),
        8vw,
        var(--site-space-24)
    );

    padding-bottom: var(--site-space-16);
}


/* ==========================================================
   MARCA
========================================================== */

.site-footer__brand {
    max-width: 28rem;
}

.site-footer__brand-link {
    display: inline-flex;
    align-items: center;

    margin-bottom: var(--site-space-6);

    text-decoration: none;
}

.site-footer__logo {
    width: auto;
    height: 2.75rem;

    object-fit: contain;

    filter:
        brightness(0)
        invert(1);
}

.site-footer__description {
    margin:
        0
        0
        var(--site-space-5);

    color: rgba(255, 255, 255, 0.68);

    font-size: var(--site-font-size-base);
    line-height: var(--site-line-height-relaxed);

    text-wrap: pretty;
}

.site-footer__slogan {
    max-width: 26rem;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: var(--site-font-size-sm);
    font-weight: var(--site-font-weight-medium);
    line-height: var(--site-line-height-relaxed);

    text-wrap: pretty;
}


/* ==========================================================
   NAVEGAÇÃO
========================================================== */

.site-footer__navigation {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--site-space-8);
}

.site-footer__column {
    min-width: 0;
}

.site-footer__column-title {
    margin:
        0
        0
        var(--site-space-4);

    color: var(--site-color-white);

    font-size: var(--site-font-size-sm);
    font-weight: var(--site-font-weight-bold);
    line-height: var(--site-line-height-snug);
    letter-spacing: var(--site-letter-spacing-wide);
    text-transform: uppercase;
}


/* ==========================================================
   LINKS
========================================================== */

.site-footer__links {
    display: flex;
    flex-direction: column;

    gap: var(--site-space-3);

    margin: 0;
    padding: 0;

    list-style: none;
}

.site-footer__link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    color: rgba(255, 255, 255, 0.64);

    font-size: var(--site-font-size-sm);
    line-height: var(--site-line-height-relaxed);
    text-decoration: none;

    transition:
        color var(--site-transition-fast),
        transform var(--site-transition-fast);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: var(--site-color-white);

    transform: translateX(0.2rem);
}


/* ==========================================================
   RODAPÉ INFERIOR
========================================================== */

.site-footer__bottom {
    position: relative;
    z-index: var(--site-z-content);

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

    gap: var(--site-space-6);

    padding-top: var(--site-space-6);

    border-top:
        var(--site-border-width)
        solid
        rgba(255, 255, 255, 0.1);
}

.site-footer__copyright {
    margin: 0;

    color: rgba(255, 255, 255, 0.52);

    font-size: var(--site-font-size-sm);
    line-height: var(--site-line-height-normal);
}


/* ==========================================================
   STATUS
========================================================== */

.site-footer__status {
    display: inline-flex;
    align-items: center;

    gap: var(--site-space-2);

    color: rgba(255, 255, 255, 0.72);

    font-size: var(--site-font-size-xs);
    font-weight: var(--site-font-weight-medium);
}

.site-footer__status-dot {
    width: 0.5rem;
    height: 0.5rem;

    border-radius: 50%;

    background-color: #34D399;

    box-shadow:
        0 0 0
        0.3rem
        rgba(52, 211, 153, 0.12);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 61.9375rem) {

    .site-footer__main {
        grid-template-columns: 1fr;

        gap: var(--site-space-12);
    }

    .site-footer__brand {
        max-width: var(--site-content-width-md);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 47.9375rem) {

    .site-footer {
        padding:
            var(--site-space-16)
            0
            var(--site-space-6);
    }

    .site-footer__main {
        padding-bottom: var(--site-space-10);
    }

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

        gap:
            var(--site-space-8)
            var(--site-space-5);
    }

    .site-footer__column:last-child {
        grid-column: 1 / -1;
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* ==========================================================
   MOBILE REDUZIDO
========================================================== */

@media (max-width: 27.5rem) {

    .site-footer__navigation {
        grid-template-columns: 1fr;
    }

    .site-footer__column:last-child {
        grid-column: auto;
    }

}


/* ==========================================================
   ACESSIBILIDADE
========================================================== */

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

    .site-footer__link {
        transition: none;
    }

    .site-footer__link:hover,
    .site-footer__link:focus-visible {
        transform: none;
    }

}


/* ==========================================================
   IMPRESSÃO
========================================================== */

@media print {

    .site-footer {
        padding: var(--site-space-8) 0;

        background: var(--site-color-white);
        color: var(--site-color-black);
    }

    .site-footer__navigation,
    .site-footer__status {
        display: none;
    }

    .site-footer__main {
        display: block;

        padding-bottom: var(--site-space-6);
    }

    .site-footer__logo {
        filter: none;
    }

    .site-footer__description,
    .site-footer__slogan,
    .site-footer__copyright {
        color: var(--site-color-black);
    }

}