/* =========================================================
   COMPONENT — FOOTER
   ========================================================= */

/**
 * Base footer container.
 * Provides background, spacing, and centered content alignment.
 */
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
}


/* =========================================================
   FOOTER — SOCIAL MEDIA LINKS
   ========================================================= */

/**
 * Social media icon link.
 * Designed as large clickable icons for external profiles.
 */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;

    font-size: 40px;
    line-height: 1;
    color: #000;

    text-decoration: none;
}

.social-icon-tiktok {
    vertical-align: middle;
}

.social-icon-tiktok .fa-tiktok {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    border-radius: 10px;

    background-color: #000;
    color: #fff;

    font-size: 22px;
    line-height: 1;
    vertical-align: middle;
}


/* =========================================================
   FOOTER — TEXT CONTENT
   ========================================================= */

/**
 * Optional footer text (e.g., copyright, legal notes).
 */
.footer-text {
    flex-basis: 100%;
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}

/**
 * Author or developer attribution block.
 */
.footer-author a {
    color: #888;
    text-decoration: none;
}

.footer-author {
    flex-basis: 100%;
}

.footer-author a:visited {
    color: #888;
}

.footer-author a:hover {
    color: #555;
}


/* =========================================================
   RESPONSIVE — MOBILE ADJUSTMENTS
   ========================================================= */

/**
 * Adds extra bottom spacing on mobile devices to prevent
 * overlap with the fixed favorites banner.
 * Accounts for device safe areas (e.g., iPhone home indicator).
 */
@media (max-width: 768px) {

    footer {
        padding-bottom: calc(
                10px + 70px + env(safe-area-inset-bottom)
        );
        /*
            70px ≈ estimated favorites banner height.
            Adjust this value if the banner size changes.
        */
    }
}