/* ==========================================================================
   Site footer
   Restructured from a 5-column layout in which one column carried 22 links
   and the rest carried 3-5, leaving the block ~1000px tall and badly ragged.
   Now: brand + four balanced link groups, a regional contact strip, and a
   legal bar. Loaded globally from head.php.
   ========================================================================== */

footer .footer_top {
    padding-bottom: 8px;
}

/* --- Brand column ------------------------------------------------------ */

.footer_brand .footer_logo img {
    max-width: 190px;
    height: auto;
}

.footer_tagline {
    max-width: 320px;
    margin: 18px 0 20px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

.footer_social ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer_social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.footer_social li a:hover,
.footer_social li a:focus-visible {
    background: rgba(49, 186, 230, .18);
    border-color: #31bae6;
    color: #fff;
    transform: translateY(-2px);
}

/* --- Link groups ------------------------------------------------------- */

footer .footer_link_title {
    margin: 0 0 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #fff;
}

/* a legacy `footer ul` rule centres these at narrow widths, which makes a
   two-column link list very hard to scan */
.footer_link_list,
.footer_legal,
.footer_social ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left;
}

.footer_link_list li {
    margin-bottom: 9px;
    /* keep an item from splitting across the two columns below */
    break-inside: avoid;
}

.footer_link_list a {
    display: inline-block;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.footer_link_list a:hover,
.footer_link_list a:focus-visible {
    color: #31bae6;
    text-decoration: none;
    transform: translateX(3px);
}

/* The platform group carries 16 links. One column made it four times taller
   than its neighbours; two columns keep the row roughly level.
   This starts at 768px, not 992px: in the 768-991px band the columns are
   .col-md-6, the split rule did not apply and the other rule that splits
   lists (max-width: 767px, below) had already stopped, so the 16-link group
   ran as one ~480px column beside ~180px neighbours. */
@media (min-width: 768px) {
    .footer_link_list--split {
        column-count: 2;
        column-gap: 26px;
    }
}

/* --- Regional contact strip -------------------------------------------- */

.footer_contact_bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin-top: 36px;
    padding: 24px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.footer_contact_group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
}

.footer_contact_label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.footer_contact_label img {
    display: block;
    width: 18px;
    height: auto;
    border-radius: 2px;
}

.footer_contact_label i {
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
}

.footer_contact_group a {
    /* same 24px minimum target size as the legal links */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.footer_contact_group a:hover,
.footer_contact_group a:focus-visible {
    color: #31bae6;
    text-decoration: none;
}

/* The mail group used to be pushed to the far right with margin-left:auto,
   which stranded it away from the phone numbers it belongs with. */

/* --- Legal bar --------------------------------------------------------- */

.footer_bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 20px 0 6px;
}

.footer_copyright {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

.footer_legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer_legal a {
    /* 13px text on its own measured 77 x 17px, under the 24px WCAG 2.5.8
       minimum target size. Padding, not a bigger font, closes the gap. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    transition: color .2s ease;
}

.footer_legal a:hover,
.footer_legal a:focus-visible {
    color: #31bae6;
    text-decoration: none;
}

/* --- Focus visibility on the dark ground ------------------------------- */

footer a:focus-visible {
    outline: 2px solid #7fd4f2;
    outline-offset: 3px;
    border-radius: 3px;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 991px) {
    .footer_brand {
        margin-bottom: 34px;
        text-align: left;
    }

    .footer_tagline {
        max-width: 100%;
    }

    .footer_link_block {
        margin-bottom: 30px;
    }

}

@media (max-width: 767px) {
    .footer_contact_bar {
        gap: 16px 28px;
        margin-top: 24px;
    }

    .footer_contact_group {
        flex: 1 1 100%;
    }

    .footer_bottom {
        justify-content: flex-start;
    }

    /* Stacked single-column lists ran the footer to nearly 2000px on a phone.
       Two columns halves it, and the links need a real tap target: 26px of
       text is well under the 44px minimum. */
    .footer_link_list {
        column-count: 2;
        column-gap: 20px;
    }

    .footer_link_list li {
        margin-bottom: 2px;
    }

    .footer_link_list a {
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 4px 0;
    }

    .footer_link_block {
        margin-bottom: 22px;
    }

    .footer_contact_group a {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer_social li a,
    .footer_link_list a,
    .footer_contact_group a,
    .footer_legal a {
        transition: none;
    }
}

/* The link columns run as two rows: the two long lists (Platform, Solutions)
   at col-lg-6, then the three short lists. Without a gap the second row's
   headings sit hard against the lists above them, so they read as belonging
   to the wrong column. */
@media (min-width: 992px) {
    .footer_link_block--row2 {
        margin-top: 34px;
    }
}

/* Both rows have to read as one grid. A half-width block split in two gives
   columns a quarter of the row wide - the same module as the col-xl-3 blocks
   on the second row - but only if the split gap matches the Bootstrap gutter,
   so an inner column starts on the same line as the block beneath it. At 26px
   it landed 2px short. Kept to xl because that is where the second row is in
   quarters; below 1200px it is in thirds and the lists are narrow enough that
   the wider gap would cost a line. */
@media (min-width: 1200px) {
    .footer_link_list--split {
        column-gap: 30px;
    }
}