// ==========================================================================
// PressZone Theme - Footer Styles
// ==========================================================================
// Uses Sass variables with body.dark-mode & nesting pattern.
// ==========================================================================

.site-footer {
    background: $light-bg-secondary;
    border-top: 1px solid $light-border-color;

    body.dark-mode & {
        background: $dark-bg-secondary;
        border-top-color: $dark-border-color;
    }
}

.footer-logo-text {
    color: $light-text-primary;
    text-decoration: none;

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

.footer-description {
    font-size: 0.875rem;
    max-width: 300px;
}

.footer-social .social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $light-bg-tertiary;
    border: 1px solid $light-border-color;
    border-radius: 0.5rem;
    color: $light-text-secondary;
    transition: all $transition-base;

    &:hover {
        background: $color-primary;
        border-color: $color-primary;
        color: $dark-bg-primary;
    }

    body.dark-mode & {
        background: $dark-bg-tertiary;
        border-color: $dark-border-color;
        color: $dark-text-secondary;

        &:hover {
            background: $color-primary;
            border-color: $color-primary;
            color: $dark-bg-primary;
        }
    }
}

.footer-heading {
    font-size: 0.75rem;
    font-weight: 600;
    color: $light-text-muted;
    letter-spacing: 0.05em;

    body.dark-mode & {
        color: $dark-text-muted;
    }
}

.footer-link {
    color: $light-text-secondary;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color $transition-base;

    &:hover {
        color: $light-text-primary;
    }

    body.dark-mode & {
        color: $dark-text-secondary;

        &:hover {
            color: $dark-text-primary;
        }
    }
}

.footer-legal a:hover {
    color: $light-text-primary;

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

// RTL Support
@include rtl {
    .site-footer {
        text-align: right;

        .row {
            flex-direction: row-reverse;
        }
    }

    .footer-social {
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: row-reverse;
    }

    .footer-legal {
        flex-direction: row-reverse;
    }
}