/**
 * Joomill Domain per Language
 *
 * @copyright   Copyright (c) 2026 Jeroen Moolenschot | Joomill
 * @license     GNU General Public License version 3 or later
 * @link        https://www.joomill-extensions.com
 */

/*
 * The language suggestion bar. :where() keeps the specificity at zero, so any
 * template rule for .dpl-suggest wins. The link is the exception: it is written
 * as a plain selector, because a template's own link colour would otherwise
 * turn it unreadable on the dark bar.
 */
:where(.dpl-suggest) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: center;
    padding: .75rem 1rem;
    background: #1f2937;
    color: #fff;
    line-height: 1.4;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .2);
}

.dpl-suggest a,
.dpl-suggest a:hover,
.dpl-suggest a:focus,
.dpl-suggest a:active {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

:where(.dpl-suggest button) {
    padding: .25rem .75rem;
    border: 1px solid #fff;
    border-radius: .25rem;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

:where(.dpl-suggest a:focus-visible, .dpl-suggest button:focus-visible) {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/*
 * On a low viewport (a phone in landscape, or a zoomed page) a fixed bar takes
 * too much of the screen: there it sits at the top of the page, in the flow.
 */
@media (max-height: 30em) {
    :where(.dpl-suggest) {
        position: static;
        box-shadow: none;
    }
}