/**
 * SWARCS ENGINEERING - FOOTER INFRASTRUCTURE
 * (c) 2006-2026 Software Architectures and Solutions d.o.o. Novi Sad.
 * All Rights Reserved.
 *
 * ENGINEERING FOCUS:
 * - SVG Masking for high-performance iconography.
 * - Consistent brand-alignment via var(--accent-blue) boundaries.
 * - Clean, multi-column responsive layout.
 */

/*
 * GLOBAL FOOTER BOUNDARY
 * Strategic baseline for site-wide navigation closure.
 */
#footer {
    background-color: var(--bg-black);
    border-top: 1px solid var(--accent-blue);
    padding: 60px 0 30px;
    font-family: 'Lato', sans-serif;
    color: var(--text-muted);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/*
 * FOOTER LINKS
 * Functional navigation for secondary pages and legal content.
 */
.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-blue);
    border-bottom: 1px dotted var(--accent-blue);
    text-decoration: none;
}

.separator {
    color: var(--text-muted);
    font-weight: normal;
    margin: 0 10px;
}

/*
 * SOCIAL INTERFACE
 * High-performance SVG Mask implementation for dynamic icon coloring.
 */
.social-icons {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: flex-end;
}

.social-icons a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;

    /* SVG Mask Logic: Decouples asset from color state */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.si-facebook {
    -webkit-mask-image: url('../images/icons/facebook.svg');
    mask-image: url('../images/icons/facebook.svg');
}

.si-twitter  {
    -webkit-mask-image: url('../images/icons/twitter-x.svg');
    mask-image: url('../images/icons/twitter-x.svg');
}

.si-linkedin {
    -webkit-mask-image: url('../images/icons/linkedin.svg');
    mask-image: url('../images/icons/linkedin.svg');
}

.social-icons a:hover {
    background-color: var(--accent-blue);
    transform: translateY(-3px);
}

/*
 * CONTACT META-DATA
 * Tactical information display utilizing Neuropolitical for brand identity.
 */
.contact-info {
    font-family: 'Neuropolitical', sans-serif;
    font-size: 11px;
    text-align: right;
}

.contact-info a {
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-left: 20px;
    transition: color 0.3s;
}

.contact-info a:hover { color: var(--text-primary); }

.contact-info i {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    background-color: var(--accent-blue);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-envelope2 { -webkit-mask-image: url('../images/icons/envelope.svg'); mask-image: url('../images/icons/envelope.svg'); }
.icon-headphones { -webkit-mask-image: url('../images/icons/phone.svg'); mask-image: url('../images/icons/phone.svg'); }

/*
 * FOOTER ADAPTIVITY
 * Mobile-centric alignment shifts for vertical readability.
 */
@media (max-width: 991px) {
    .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 30px; }
    .social-icons { justify-content: center; }
    .contact-info { text-align: center; }
    .contact-info a { margin: 10px; }
}