/* WareTactic shared language bar: compact 2 x 5 mobile layout, no clipped selection. */
/* Theme color for Safari/iOS is also set in each HTML <head>. */
.site-language-bar a.active[aria-current="true"] {
    outline: none !important;
    outline-offset: 0 !important;
    /* Draw selection inside the control, never beyond the viewport. */
    box-shadow: inset 0 0 0 2px #ffe17a !important;
}

@media (max-width: 640px) {
    /* iOS can paint the exposed status-bar safe area using the header blue. */
    html { background-color: #154168; }
    body { background-color: #154168; }

    .site-language-bar {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 2px 1px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
        overflow-x: visible !important;
        white-space: normal !important;
    }
    .site-language-bar a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 3px 0 !important;
        border-radius: 12px !important;
        font-size: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
    }
    .site-language-bar a span {
        display: block !important;
        font-size: 1.1rem !important;
        line-height: 1 !important;
    }
    .site-language-bar a b { display: none !important; }
    .site-language-bar a:focus-visible {
        outline: 2px solid #ffffff !important;
        outline-offset: -3px !important;
    }
}

/* Keep page content below the iOS notch/status text in edge-to-edge viewport mode. */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 640px) {
        body {
            padding-top: env(safe-area-inset-top, 0px);
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }
    }
}