/*
 * Footer V2 — CSS-only restyle of the live FooterWidget output
 * (views/widgets/footerWidget/view.php → `.crowd-footer-*` markup) on
 * Homepage V2. Scoped under `.home-v2-footer-scope` (the wrapper div in
 * home-v2.php) so only /home-v2 is affected.
 *
 * Selectors carry the `.dark-bg` / `.boat-crowd-footer` ancestor on purpose:
 * view.php registers its own inline rules (`.dark-bg a`,
 * `.dark-bg .crowd-footer-title`, `.dark-bg{background:var(--template-color)}`),
 * so the overrides here need the extra class to outrank them.
 */

/* Navy backdrop — overrides the brand-colour `.dark-bg` fill */
.home-v2-footer-scope.home-v2-footer-wrap,
.home-v2-footer-scope .boat-crowd-footer.dark-bg {
    background: #162336;
    color: rgba(255, 255, 255, .65);
}

.home-v2-footer-scope .boat-crowd-footer.dark-bg {
    padding: 56px 0 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* Centre both inner containers at the mockup's 1200px */
.home-v2-footer-scope .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Link columns: view.php flexbox → mockup 4-column grid */
.home-v2-footer-scope .crowd-footer-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 32px;
    row-gap: 36px;
}

/* Column heading: 14px bold → .72rem uppercase */
.home-v2-footer-scope .dark-bg .crowd-footer-title {
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 14px;
}

/* Links: 13px #ccc → .73rem rgba(.4) */
.home-v2-footer-scope .dark-bg .crowd-nav-list {
    display: block;
    font-size: .73rem;
    padding: 3px 0;
    color: rgba(255, 255, 255, .4);
    transition: color 200ms ease;
}

.home-v2-footer-scope .dark-bg .crowd-nav-list:hover {
    color: #fff;
}

/* Bottom bar (.copyright) → mockup .footer-bottom */
.home-v2-footer-scope .copyright {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: .7rem;
    color: rgba(255, 255, 255, .35);
}

.home-v2-footer-scope .dark-bg .copyright a {
    color: rgba(255, 255, 255, .35);
    transition: color 200ms ease;
}

.home-v2-footer-scope .dark-bg .copyright a:hover {
    color: #fff;
}

/* Responsive — mirror the mockup breakpoints */
@media (max-width: 900px) {
    .home-v2-footer-scope .crowd-footer-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .home-v2-footer-scope .copyright {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}