/*
=========================================
TemperWorks Footer System
=========================================
*/


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

.site-footer {

    width: 100%;

    background: linear-gradient(
        135deg,
        var(--bg-primary),
        var(--bg-panel-2)
    );

    color: var(--text-primary);

    border-top: 1px solid var(--bg-panel-2);

    padding-top: 4rem;

}



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

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 4rem;

    align-items: start;

    padding-bottom: 3rem;

}



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

.footer-column h3 {

    color: var(--accent-gold);

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 1rem;

}



.footer-column p {

    color: var(--text-secondary);

    line-height: 1.7;

    max-width: 350px;

}



.footer-column ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-column li {

    margin-bottom: .75rem;

}



.footer-column a {

    color: var(--text-primary);

    text-decoration: none;

    transition: color .2s ease;

}



.footer-column a:hover {

    color: var(--accent-gold);

}



/* =========================
   COLUMN POSITIONING
========================= */


.footer-column:nth-child(2) {

    justify-self: center;

}



.footer-column:nth-child(3) {

    justify-self: end;

}



/* =========================
   COPYRIGHT BAR
========================= */


.footer-bottom {

    width: 100%;

    background: rgba(11,15,23,0.75);

    border-top: 1px solid var(--bg-panel-2);

    text-align: center;

    padding: 1.25rem 0;

}



.footer-bottom p {

    margin: 0;

    color: var(--text-secondary);

    font-size: .9rem;

}



/* =========================
   RESPONSIVE
========================= */


@media (max-width: 900px) {


    .footer-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .footer-column {

        justify-self: center;

    }


    .footer-column p {

        margin-left: auto;

        margin-right: auto;

    }


}