/* ==========================================================================
   FOOTER

   The minimal footer: logo, real contact details, copyright. See inc/footer.php
   for why this is not yet the design's full four column version.

   Design values are in style.css. Never write a raw colour or size here.
   ========================================================================== */

/* Naomi, 1 September: the footer should read as its own rounded panel, inset
   from the edges like the other bands on the page, not a full width strip.

   Chad, 3 September: the gap above it is wider than the gutter down its
   sides. It is the design's own card to card spacing, so whatever panel ends
   a page, the space between it and the footer is the same and is set once,
   here, rather than by each of those panels separately. */
.nex-footer {
    margin: var(--card-gap) var(--gutter-bleed) var(--gutter-bleed);
    border-radius: var(--radius-large);
    background: linear-gradient(100deg, var(--brand-dark) 0%, var(--brand-light) 130%);
    color: var(--page);
}

/* Width in base.css, with the header and the content. */
.nex-footer-inner {
    padding-block: var(--space-16) var(--space-8);
}

.nex-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nex-footer-logo {
    display: block;
    line-height: 0;
}

/* Chad, 31 August: too small next to the header logo. Matches it on desktop
   now (96px); stays at its old size on tablet and mobile, in the override
   below, where the header logo is increasing to meet it instead. */
.nex-footer-logo img {
    height: 96px;
    width: auto;
}

@media (max-width: 1200px) {
    .nex-footer-logo img {
        height: 56px;
    }
}

.nex-footer-contact {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nex-footer-contact a {
    color: var(--page);
    font-size: var(--size-sm);
    text-decoration: none;
}

.nex-footer-contact a:hover,
.nex-footer-contact a:focus-visible {
    text-decoration: underline;
}

.nex-footer-social {
    display: block;
    line-height: 0;
}

.nex-footer-bottom {
    margin: var(--space-8) 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--size-xs);
}

@media (max-width: 700px) {
    .nex-footer-inner {
        width: min(100% - (var(--space-6) * 2), var(--width-default));
    }

    .nex-footer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .nex-footer-contact {
        flex-wrap: wrap;
        gap: var(--space-4) var(--space-8);
    }
}