/* ==========================================================================
   Components — Footer
   ========================================================================== */

/* Overrides .logo__mark's color for the footer's dark background,
   where the base (--color-primary) would render invisible. */
.site-footer .logo__mark {
    color: var(--color-text-on-primary);
}

.footer-company__text {
    max-width: 20rem;
    margin-block: var(--space-sm);
    font-size: var(--fs-sm);
    opacity: 0.9;
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
}

.footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-text-on-primary);
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.footer-social__link:hover {
    opacity: 1;
}

.footer-social__icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.footer-links__title {
    margin-bottom: var(--space-sm);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text-on-primary);
}

.footer-links__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links__link,
.footer-contact__list li {
    font-size: var(--fs-sm);
    color: var(--color-text-on-primary);
    opacity: 0.9;
}

.footer-links__link {
    transition: opacity var(--transition-fast);
}

.footer-links__link:hover {
    opacity: 1;
}

.footer-bottom__text {
    font-size: var(--fs-xs);
    color: var(--color-text-on-primary);
    opacity: 0.9;
}