/* Footer: brand, services, saved-menu pages and contact columns on the dark surface. */
.ocf-footer {
    border-top: var(--card-border-width) solid color-mix(in srgb, var(--ocf-heading-alt) 24%, transparent); /* full-width line where the CTA meets the footer */
    background: var(--neptune-band);
    color: var(--ocf-heading-alt);
    padding-block: calc(var(--ocf-grid-gap) * 2);
    font-size: var(--ocf-font-small-size);
}

.ocf-footer-grid {
    display: grid;
    grid-template-columns: 320fr 208fr 176fr 320fr;
    gap: calc(var(--ocf-grid-gap) * 2);
}

.ocf-footer-brand {
    display: block;
    max-width: calc(var(--ocf-grid-gap) * 7.5);
    margin-bottom: calc(var(--ocf-grid-gap) * 0.625);
}

.ocf-footer .eyebrow {
    color: var(--ocf-secondary);
    margin-bottom: calc(var(--ocf-grid-gap) * 0.625);
}

.ocf-footer-links {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ocf-grid-gap) * 0.4375);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ocf-footer-contact a,
.ocf-footer-contact__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--ocf-space-unit) * 0.625);
    align-items: start;
}

.ocf-footer-icon {
    width: calc(var(--ocf-space-unit) * 1.125);
    height: calc(var(--ocf-space-unit) * 1.125);
    margin-top: calc(var(--ocf-space-unit) * 0.125);
    color: var(--ocf-secondary);
}

.ocf-footer-phone {
    font-weight: var(--font-weight-bold);
}

.ocf-footer a:hover {
    color: var(--ocf-secondary);
}

.ocf-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--ocf-grid-gap);
    margin-top: calc(var(--ocf-grid-gap) * 1.5);
    padding-top: var(--ocf-grid-gap);
    border-top: var(--card-border-width) solid color-mix(in srgb, var(--ocf-heading-alt) 16%, transparent);
}

.ocf-footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ocf-grid-gap) * 0.625);
}

@media (max-width: 1000px) {
    .ocf-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--ocf-grid-gap) * 1.25);
    }
}

@media (max-width: 600px) {
    .ocf-footer-grid {
        grid-template-columns: 1fr;
    }

    .ocf-footer-bottom {
        flex-direction: column;
    }
}