/* V5.5.8.6: complete shared service navigation and glyph-only channel feedback.
   Load after 5.5.8.5 shell/UI so the homepage, services and client footer agree. */

/* The six service destinations are present in server HTML at every viewport.
   The index remains a separate link and does not join the rotating highlight. */
[data-sbi-global-footer] .sbi-footer-services {
    grid-area: capabilities;
    width: min(100%, 64rem);
    min-width: 0;
    margin: 0;
}
[data-sbi-global-footer] .sbi-footer-utilities {
    grid-area: privacy;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .1rem .65rem;
    max-width: 100%;
    margin: 0;
    font: 600 .75rem/1.4 var(--sbi-global-font-body, sans-serif);
}
[data-sbi-global-footer] .sbi-footer-utilities > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    padding: .35rem .65rem;
    color: #b9adc7;
    text-decoration: underline;
    text-underline-offset: .22em;
}
[data-sbi-global-footer] .sbi-footer-utilities > a:is(:hover, :focus-visible) {
    color: var(--sbi-global-shell-purple);
}
[data-sbi-global-footer] .sbi-footer-utilities > a:focus-visible {
    outline: 2px solid var(--sbi-global-shell-purple);
    outline-offset: 2px;
    border-radius: .25rem;
}
[data-sbi-global-footer] .sbi-footer-services > .sbi-footer-capabilities {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}
[data-sbi-global-footer] .sbi-footer-capabilities > a {
    min-width: 0;
    max-width: 100%;
    padding: .4rem .25rem;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
}
[data-sbi-global-footer] .sbi-footer-capabilities > a > span,
[data-sbi-global-footer] .sbi-footer-utilities > a > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The old case stylesheet used !important on the WHOLE channel pill and
   inherited icon color. Override those exact states, including keyboard focus.
   The existing dark pill and neutral label stay unchanged; only its glyph
   receives violet. These local !important declarations retire the old ones. */
.sbi-case-root a.sbi-case-social-link,
.sbi-case-root a.sbi-case-social-link:is(:hover, :focus-visible),
.sbi-case-root a.sbi-case-social-link:hover:not(:focus-visible) {
    color: #f5f3f8 !important;
    background: #211a2c !important;
    border-color: #51445e;
    box-shadow: none;
    filter: none;
    transform: none;
}
.sbi-case-root a.sbi-case-social-link .sbi-case-social-icon {
    color: #f4f1f7 !important;
    background: transparent !important;
    border: 0;
    box-shadow: none;
}
.sbi-case-root a.sbi-case-social-link:is(:hover, :focus-visible) .sbi-case-social-icon {
    color: var(--sbi-global-shell-purple) !important;
}
.sbi-case-root a.sbi-case-social-link:focus-visible {
    outline: 2px solid var(--sbi-global-shell-purple);
    outline-offset: 4px;
}

@media (max-width: 767px) {
    [data-sbi-global-footer].sbi-global-footer {
        padding-top: .75rem;
        padding-bottom: max(.25rem, env(safe-area-inset-bottom));
    }
    [data-sbi-global-footer] .sbi-global-footer-inner {
        width: min(100%, 28rem);
        grid-template-areas: "socials" "agency" "capabilities" "privacy";
        row-gap: .25rem;
        padding: 0;
    }
    [data-sbi-global-footer] .sbi-footer-services {
        width: 100%;
        margin-top: .35rem;
        padding-top: .25rem;
        border-top: 1px solid rgba(255,255,255,.1);
    }
    [data-sbi-global-footer] .sbi-footer-services > .sbi-footer-capabilities {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .1rem .65rem;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    [data-sbi-global-footer] .sbi-footer-capabilities > a {
        justify-content: center;
        min-height: 44px;
        font-size: .8125rem;
        font-weight: 600;
    }
    [data-sbi-global-footer] .sbi-footer-cookie-settings {
        margin: 0;
        padding-block: .25rem;
    }
}

/* Very narrow windows or enlarged text keep complete links in natural flow. */
@media (max-width: 319px) {
    [data-sbi-global-footer] .sbi-footer-services > .sbi-footer-capabilities {
        grid-template-columns: minmax(0, 1fr);
    }
    [data-sbi-global-footer] .sbi-global-socials { flex-wrap: wrap; }
}
@media (forced-colors: active) {
    [data-sbi-global-footer] .sbi-footer-utilities > a,
    .sbi-case-root a.sbi-case-social-link,
    .sbi-case-root a.sbi-case-social-link:is(:hover, :focus-visible),
    .sbi-case-root a.sbi-case-social-link:hover:not(:focus-visible),
    .sbi-case-root a.sbi-case-social-link .sbi-case-social-icon,
    .sbi-case-root a.sbi-case-social-link:is(:hover, :focus-visible) .sbi-case-social-icon {
        color: LinkText !important;
    }
    .sbi-case-root a.sbi-case-social-link,
    .sbi-case-root a.sbi-case-social-link:is(:hover, :focus-visible),
    .sbi-case-root a.sbi-case-social-link:hover:not(:focus-visible) {
        background: Canvas !important;
        border-color: LinkText;
    }
}