/* =========================================================
   ORCA UNIVERSAL
   SHARED FOOTER
   ========================================================= */

.orcaFooter {
    width: 100%;

    margin-top: 36px;
    padding: 22px 18px 18px;

    background: var(--orca-surface, #181b1f);

    border-top:
        2px solid
        var(--theme-color);

    text-align: center;
}


/* =========================================================
   ICON NAVIGATION
   ========================================================= */

.orcaFooterIcons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    width: 100%;
    margin: 0 auto;
}

.orcaFooterIconLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--gradient-color),
            var(--theme-color)
        );

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.orcaFooterIconLink:hover {
    transform: translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.5);

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.28);
}

.orcaFooterIconLink:focus-visible {
    outline:
        2px solid
        var(--theme-color);

    outline-offset: 3px;
}

.orcaFooterIcon {
    display: block;

    width: 44px;
    height: 44px;

    object-fit: contain;
}


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

.orcaFooterMeta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    width: 100%;
    margin-top: 18px;

    color: var(--orca-muted, #a3aab2);

    font-size: 13px;
}


/* =========================================================
   GENERAL FOOTER LINK
   ========================================================= */

.orcaFooterLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 6px 13px;

    border: 1px solid transparent;
    border-radius: 6px;

    color: var(--orca-muted, #a3aab2);

    text-decoration: none;

    transition:
        background 120ms ease,
        color 120ms ease,
        border-color 120ms ease;
}

.orcaFooterLink:hover {
    background:
        var(--orca-surface-raised, #202429);

    border-color:
        var(--theme-color);

    color:
        var(--theme-color);
}

.orcaFooterLink:focus-visible {
    outline:
        2px solid
        var(--theme-color);

    outline-offset: 2px;
}


/* =========================================================
   LOGIN
   ========================================================= */

.orcaFooterLogin {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 6px 14px;

    border:
        1px solid
        var(--theme-color);

    border-radius: 6px;

    background: transparent;

    color:
        var(--theme-color);

    font-weight: 600;
    text-decoration: none;

    transition:
        background 120ms ease,
        color 120ms ease,
        border-color 120ms ease,
        transform 120ms ease;
}

.orcaFooterLogin:hover {
    background:
        var(--theme-color);

    color:
        var(--anchor-color);

    transform: translateY(-1px);
}

.orcaFooterLogin:active {
    transform: translateY(0);
}

.orcaFooterLogin:focus-visible {
    outline:
        2px solid
        var(--theme-color);

    outline-offset: 2px;
}


/* =========================================================
   CREATIVE COMMONS
   ========================================================= */

.orcaLicense {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 5px 7px;

    border:
        1px solid transparent;

    border-radius: 6px;

    transition:
        background 120ms ease,
        border-color 120ms ease;
}

.orcaLicense:hover {
    background:
        var(--orca-surface-raised, #202429);

    border-color:
        var(--theme-color);
}

.orcaLicense:focus-visible {
    outline:
        2px solid
        var(--theme-color);

    outline-offset: 2px;
}

.orcaLicense img {
    display: block;

    border: 0;
}


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

@media (max-width: 600px) {

    .orcaFooter {
        margin-top: 28px;

        padding-left: 10px;
        padding-right: 10px;
    }

    .orcaFooterIcons {
        gap: 8px;
    }

    .orcaFooterIconLink {
        width: 50px;
        height: 50px;
    }

    .orcaFooterIcon {
        width: 39px;
        height: 39px;
    }

    .orcaFooterMeta {
        gap: 7px;

        margin-top: 14px;
    }

}