/*--------------------------------------------------------------
# FSJ Footer Redesign
# Bold dark footer with strong orange accent dividers,
# improved spacing, and cleaner visual hierarchy.
# Brand orange pulled from theme: #f25600
--------------------------------------------------------------*/

/* Overall footer container: deepen the black slightly and
   add a bold orange top border as the primary accent divider */
footer.site-footer {
    background-color: #141414;
    border-top: 4px solid #f25600;
    padding-top: 10px;
}

/* Primary footer content area (nav links + social icons row) */
footer.site-footer .primary-footer {
    padding-top: 30px;
    padding-bottom: 25px;
}

/* Footer navigation links: more breathing room, bolder type,
   subtle uppercase treatment for a strong newspaper masthead feel */
.footer-navigation .menu li {
    margin-right: 0;
    margin-bottom: 12px;
    padding-right: 24px;
    position: relative;
}

.footer-navigation .menu li a {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #e8e8e8;
    transition: color 0.25s ease;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}

.footer-navigation .menu li a:hover {
    color: #f25600;
    border-bottom-color: #f25600;
}

/* Small orange divider dot between nav items for visual rhythm,
   skipped on the last item in each row */
.footer-navigation .menu li:not(:last-child):after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #f25600;
    opacity: 0.6;
}

/* Social icons area: add breathing room from the nav links above it,
   and give the icons themselves a bit more polish */
.site-footer .aft-small-social-menu,
.site-footer .social-widget-menu {
    margin-top: 10px;
}

.site-footer .aft-small-social-menu ul li a,
.site-footer .social-widget-menu ul li a,
.site-footer .em-author-details ul li a {
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-footer .aft-small-social-menu ul li a:hover,
.site-footer .social-widget-menu ul li a:hover,
.site-footer .em-author-details ul li a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(242, 86, 0, 0.35);
}

/* Back-to-top button: keep it bold and consistent with the accent color,
   slightly larger tap target and a subtle hover lift */
#scroll-up {
    border-radius: 4px 0 0 4px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#scroll-up:hover {
    background-color: #ff6e1a;
    transform: translateX(-2px);
}

/* Copyright / secondary footer bar: separate it clearly from the
   content above with its own darker band and a thin orange top rule,
   plus more generous vertical padding so it stops feeling glued on */
.secondary-footer {
    background-color: #0c0c0c;
    border-top: 1px solid rgba(242, 86, 0, 0.4);
    margin-top: 15px;
}

.secondary-footer .af-flex-container {
    padding: 16px 5px;
    min-height: unset;
}

.site-info {
    padding: 16px 0;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #9a9a9a;
}

.site-info a {
    color: #f25600;
    font-weight: 600;
}

/* Small screens: tighten the divider dots since items stack vertically anyway */
@media screen and (max-width: 480px) {
    .footer-navigation .menu li:after {
        display: none;
    }
    .footer-navigation .menu li {
        padding-right: 0;
        display: block;
    }
}