/*
 * "Till toppen" (november 2026). Knappen skapas av js/jbg-till-toppen.js och syns med .is-on.
 * z-index 980: under cookierutan (1000), UIkits menypanel och Snabbtittens modaler (UIkit 1010, mobilen 9998).
 * --jbg-topp-lyft är cookierutans höjd från nederkanten medan den visas (sätts av skriptet).
 */
.jbg-topp {
    position: fixed;
    z-index: 980;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + var(--jbg-topp-lyft, 0px) + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #f9c22b;                            /* headerns guldlinje (--jbg-gold-line i jbg-header.css) */
    border-radius: 50%;
    background: #fff;
    color: #ee0f16;                                         /* menyradens röda */
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, bottom .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.jbg-topp.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s, bottom .2s ease;
}

/* Dold medan en UIkit-modal (Snabbtitt på desktop) är öppen. Mobilens Snabbtitt låser body med position: fixed,
   så scrollY blir 0 och knappen döljs av skriptet. */
html.uk-modal-page .jbg-topp.is-on {
    opacity: 0;
    visibility: hidden;
}

.jbg-topp svg {
    display: block;
}

@media (hover: hover) {
    .jbg-topp:hover {
        color: #c60001;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    }
}

.jbg-topp:focus {
    outline: none;
}

.jbg-topp:focus-visible {
    outline: 2px solid #c60001;
    outline-offset: 2px;
}

body.jbg-topp-fokus:focus {
    outline: none;
}

@media (min-width: 960px) {
    .jbg-topp {
        right: calc(24px + env(safe-area-inset-right, 0px));
        bottom: calc(24px + var(--jbg-topp-lyft, 0px));
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jbg-topp,
    .jbg-topp.is-on {
        transition: none;
    }
}

@media print {
    .jbg-topp {
        display: none;
    }
}