/* assets/css/footer.css */
footer h3,
footer h4 {
    margin-bottom: 1rem;
    color: var(--primary);
}

footer p {
    color: #cbd5e1;
}

footer ul li {
    margin-bottom: 0.5rem;
}

footer a {
    color: #cbd5e1;
    transition: color 0.2s;
}

footer a:hover {
    color: var(--white);
    text-decoration: underline;
}

footer .footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Accessibility: visible focus for keyboard users */
footer a:focus {
    outline: 3px solid rgba(59,130,246,0.9);
    outline-offset: 2px;
}

/* Make footer a distinct region with good contrast */
footer {
    background: var(--footer-bg, #0b1220);
    padding: 2rem 0;
    color: #cbd5e1;
}

/* Responsive layout overrides for the inline flex container used in the template.
   Inline styles use `display:flex`; we override direction/spacing at small sizes. */
footer .container > div:first-child {
    gap: 2rem;
}

@media (max-width: 640px) {
    /* Stack columns vertically on small screens */
    footer .container > div:first-child {
        flex-direction: column !important;
        align-items: flex-start;
    }

    footer .footer-bottom {
        text-align: left;
    }

    /* Sticky ad: ensure it doesn't push content and is reasonably sized */
    #ad-sticky-bottom {
        padding: 8px 10px !important;
        background: rgba(0,0,0,0.85) !important;
        color: #fff !important;
        backdrop-filter: blur(4px);
    }

    #ad-sticky-bottom #ad-sticky-close {
        color: #fff !important;
    }
}

/* Hide sticky ad when user-closed (class added by JS if implemented) */
#ad-sticky-bottom.closed { display: none !important; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Ensure list spacing and readable link sizes */
footer ul { padding-left: 0; list-style: none; }
footer ul li { margin-bottom: 0.5rem; }

/* Small tweak: slightly increase link hit area on touch devices */
footer a { padding: 2px 0; display: inline-block; }