/* footer-style.css
   All footer variables intentionally removed — main.css owns :root.
   This file handles only structural footer layout not already in main.css.
*/

.dark {
    display: flex;
    background-color: var(--clr-dark);
    flex-direction: row;
}

.footer-wrap {
    width: 100%;
    padding: 0 2rem;
}

.footer-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 1rem 2rem;
    color: #fff;
}

.footer-container .social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.footer-container .links { flex: 1; }
.footer-container .copyright { flex: 1; }

.social-media,
.social-media-icons {
    font-size: 14px;
}

.social-media-icons .icons {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-right: 15px;
    filter: brightness(10);
    opacity: 0.8;
    transition: opacity 0.2s;
}
.social-media-icons a:hover .icons { opacity: 1; }

.copyright { font-size: 14px; text-align: right; }

.footer_menu_items {
    display: flex;
    align-items: center;
    flex-grow: 1;
}
.footer_menu_items ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}
.footer_menu_items li {
    flex: 1;
    list-style: none;
    text-align: center;
    white-space: nowrap;
}
.footer_menu_items li a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s;
}
.footer_menu_items li a:hover { color: var(--clr-accent); }

.social { order: 1; }
.links  { order: 2; }
.copyright { order: 3; }

@media (max-width: 920px) {
    footer { bottom: unset; }
    .dark { flex-direction: column; justify-content: center; }
    .social-media-icons,
    .copyright { flex-direction: row; justify-content: center; text-align: center; }
}

@media (max-width: 767px) {
    .footer-wrap { padding: 0; margin: 0; }
    .footer-container {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 15px;
    }
    .links { order: 1; }
    .social { order: 2; }
    .copyright { order: 3; }
    .footer-container .social {
        align-items: center;
    }
}