/* ==========================================================================
   Footer
   WIO Presentation System
   ========================================================================== */


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {

    width: 100%;

    background: var(--theme-footer-background);
    color: var(--theme-footer-text);

}


/* --------------------------------------------------------------------------
   Footer Inner
   -------------------------------------------------------------------------- */

.footer-inner {

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: var(--space-lg);

  /*  max-width: var(--page-max-width);*/

    margin-inline: auto;

    padding-inline: var(--page-padding-mobile);
    padding-block: var(--space-lg);

}


/* --------------------------------------------------------------------------
   Footer Columns
   -------------------------------------------------------------------------- */

.footer-column {

    display: flex;
    flex-direction: column;

    align-items: flex-start;

}


/* --------------------------------------------------------------------------
   Footer Logo
   -------------------------------------------------------------------------- */

.footer-column--logo {

    align-items: flex-start;

}

.footer-logo {

    display: block;

    text-decoration: none;

}

.footer-logo img {

    display: block;

    max-width: 100%;
    max-height: 6rem;

    width: auto;
    height: auto;


}


/* --------------------------------------------------------------------------
   Footer Headings
   -------------------------------------------------------------------------- */

.footer-column h2 {

    margin: 0 0 var(--space-md);

    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-h3);

    text-align: left;

}


/* --------------------------------------------------------------------------
   Footer Links
   -------------------------------------------------------------------------- */

.footer-column > a {

    margin-bottom: var(--space-sm);

    color: inherit;

    text-decoration: none;

}

.footer-column > a:hover,
.footer-column > a:focus {

    text-decoration: underline;

}


/* --------------------------------------------------------------------------
   Social Media
   -------------------------------------------------------------------------- */

.footer-socials {

    display: grid;

    grid-template-columns: repeat(4, auto);

    gap: var(--space-sm);

    margin-top: var(--space-md);
    margin-bottom: var(--space-md);

}

.footer-socials a {

    display: flex;

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

    width: 1.75rem;
    height: 1.75rem;

    text-decoration: none;

}

.footer-socials img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    filter: brightness(0) invert(1);

}

.footer-socials a:hover,
.footer-socials a:focus {

    opacity: 0.75;

}

/* --------------------------------------------------------------------------
   Footer Quote
   -------------------------------------------------------------------------- */

.footer-quote {

    width: 100%;

    padding-inline: var(--page-padding-mobile);
    padding-block: var(--space-md);

    border-top: 1px solid currentColor;

    text-align: center;

}


/* --------------------------------------------------------------------------
   Footer Meta
   -------------------------------------------------------------------------- */

.footer-meta {

    width: 100%;

    padding-inline: var(--page-padding-mobile);
    padding-bottom: var(--space-md);

    text-align: center;

    font-size: var(--font-size-small);

}
/* --------------------------------------------------------------------------
   Desktop Footer Structure
   -------------------------------------------------------------------------- */

.footer-meta,
.footer-quote {

    display: block;

    width: 100%;

}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {

    .footer-inner {

        grid-template-columns: 1fr;

        gap: var(--space-md);

    }

    .footer-column {

        align-items: center;

        text-align: center;

    }

    .footer-column--logo {

        align-items: center;

    }

    .footer-column h2 {

        text-align: center;

    }

    .footer-socials {

        grid-template-columns: repeat(4, auto);

        justify-content: center;

    }

    .footer-quote {
    width: 100%;
    overflow: hidden;

    padding-block: var(--space-md);

    border-top: 1px solid currentColor;
}
/* --------------------------------------------------------------------------
   Footer Quote
   -------------------------------------------------------------------------- */

.footer-quote {

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    border-top: 1px solid currentColor;

    padding-block: var(--space-md);

}

.footer-quote span {

    display: inline-block;

    padding-left: 100%;

    animation: footer-quote-scroll 15s linear infinite;

    white-space: nowrap;

}

@keyframes footer-quote-scroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }

}
/*  */
}