/**
 * Colombia site footer overrides (loads after common.css).
 * Base footer layout lives in common.css; Mexico-aligned deltas and CO-specific fixes here.
 */

/* Mexico: prevent awkward hyphenation in Spanish footer copy */
footer#footer {
    word-break: keep-all;
    overflow-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
}

footer#footer dt,
footer#footer dd,
footer#footer a,
footer#footer p,
footer#footer span,
footer#footer address {
    word-break: keep-all;
    overflow-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
}

/* Colombia: extra disclaimer paragraphs need flexible height */
footer#footer .innerWrap #footerWrap {
    height: auto;
    min-height: 40.563rem;
}

/* Keep external-link label + icon on one line (prevents orphaned ::after) */
footer#footer .innerWrap #footerWrap .menu li dl dd.outlink a,
footer#footer .innerWrap #footerWrap .menu li dl dd.esgLink a {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
}

/* Mexico: legal links row */
footer#footer .innerWrap #footerWrap .sideMenu li a {
    word-break: keep-all;
    white-space: nowrap;
}

/* common.css leaves a leftover 19.5rem right margin on desktop (mobile breakpoint already resets it to 0) */
footer#footer .innerWrap #footerWrap .sideMenu {
    margin-right: 0;
}

footer#footer .innerWrap #footerWrap address {
    word-break: keep-all;
}

@media (max-width: 1810px) and (min-width: 1580px) {
    html.en footer#footer .innerWrap #footerWrap .logo {
        margin-top: 3rem;
    }
}

@media (max-width: 1200px) and (min-width: 1025px) {
    footer#footer .innerWrap #footerWrap .menu li dl dd {
        margin-bottom: 0.65rem;
    }

    footer#footer .innerWrap #footerWrap .menu li dl dt {
        margin-bottom: 1rem;
    }
}

/* Extend the <=1023px mobile footer layout (common.css) up through <=1260px, so the gap between
   the old 1023 breakpoint and the newer 1260 one doesn't sit half-desktop/half-mobile. Values copied
   verbatim from common.css's @media (max-width:1023px) footer block. */
@media (max-width: 1260px) {
    footer#footer {
        padding-bottom: 1.25rem;
        transition: .25s ease
    }

    footer#footer .innerWrap {
        width: 100%;
        padding: 0 1.25rem 0 1.25rem;
        transition: .25s ease
    }

    footer#footer .innerWrap #footerWrap {
        width: 100%;
        height: 36.25rem;
        padding: 2.5rem 1.25rem;
        box-sizing: border-box;
        border-radius: 30px
    }

    footer#footer .innerWrap #footerWrap .footerArrowBtn {
        display: block;
        position: absolute;
        bottom: 37rem;
        right: 1.25rem;
        width: 2.75rem;
        height: 2.75rem;
        margin-right: initial
    }

    footer#footer .innerWrap #footerWrap .footerArrowBtn button {
        width: 2.75rem;
        height: 2.75rem
    }

    footer#footer .innerWrap #footerWrap .menu {
        display: none
    }

    footer#footer .innerWrap #footerWrap .familySite {
        width: 100%;
        position: absolute;
        top: initial;
        right: initial;
        bottom: 6.75rem
    }

    footer#footer .innerWrap #footerWrap .familySite .inputSelect {
        width: calc(100% - 2.5rem)
    }

    footer#footer .innerWrap #footerWrap .logo {
        margin-top: 0
    }

    footer#footer .innerWrap #footerWrap .sideMenu {
        font-size: 0;
        margin-top: 2rem;
        margin-right: 0;
        overflow: hidden
    }

    footer#footer .innerWrap #footerWrap .sideMenu li {
        display: block;
        margin-top: .75rem;
        margin-right: initial
    }

    footer#footer .innerWrap #footerWrap .sideMenu li:first-child {
        margin-top: 0
    }

    footer#footer .innerWrap #footerWrap .sideMenu li:first-child a {
        color: #b8b8b8
    }

    footer#footer .innerWrap #footerWrap .sideMenu li:last-child {
        margin-right: initial
    }

    footer#footer .innerWrap #footerWrap .sideMenu li a {
        font-size: .875rem;
        line-height: 1.375rem;
        letter-spacing: -.01px
    }

    footer#footer .innerWrap #footerWrap address {
        margin-top: 2.8rem
    }

    footer#footer .innerWrap #footerWrap address span {
        display: block;
        margin-top: .25rem;
        margin-left: 0
    }

    footer#footer .innerWrap #footerWrap address p {
        display: block;
        margin-top: .25rem
    }

    footer#footer .innerWrap #footerWrap .snsBtns {
        width: 100%;
        position: absolute;
        right: initial;
        bottom: 2.5rem
    }

    footer#footer .innerWrap #footerWrap .snsBtns ul li {
        margin-left: .75rem
    }
}