/* ==========================================================
   ÉLAN Footer
   Version: 1.0.0
========================================================== */

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

.footer {

    position: relative;

    padding-block: clamp(3rem, 6vw, 5rem);

    padding-inline: var(--container-padding);

    text-align: center;

    background: var(--color-surface);

    border-top: 1px solid rgba(0, 0, 0, 0.06);

}

/* ==========================================================
   INNER
========================================================== */

.footer__inner {

    width: min(100%, 720px);

    margin-inline: auto;

    display: grid;

    gap: 1rem;

}

/* ==========================================================
   MESSAGE
========================================================== */

.footer__message {

    margin: 0;

    color: var(--color-text-light);

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

    line-height: 1.8;

}

/* ==========================================================
   SIGNATURE
========================================================== */

.footer__signature {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .45rem;

    color: var(--color-text-light);

    font-size: .875rem;

    letter-spacing: .08em;

    text-transform: uppercase;

}

/* ==========================================================
   LOGO
========================================================== */

.footer__logo {

    width: 18px;

    height: 18px;

    color: var(--color-primary);

    flex-shrink: 0;

}

/* ==========================================================
   LINK
========================================================== */

.footer__link {

    color: inherit;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);

}

.footer__link:hover {

    color: var(--color-primary);

}

.footer__link:focus-visible {

    outline: 2px solid var(--color-primary);

    outline-offset: 3px;

}

/* ==========================================================
   DIVIDER
========================================================== */

.footer__divider {

    width: 56px;

    height: 1px;

    margin-inline: auto;

    background: rgba(0,0,0,.08);

}

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

.footer__copyright {

    margin: 0;

    color: var(--color-text-light);

    font-size: .8rem;

}