/* Floating "Back to Top" (.scrollToTop; .scrollToTophome on the home page) and "Prev Page"
   (.backButton) buttons, every page. Position and size come from ceh2.css / index-page.css;
   this file gives them their look and motion:
   - a clean green circle with a thin white arrow (an SVG drawn here, so the Font Awesome
     glyph in the markup of every page is simply hidden — no view has to change),
   - the label kept, centred just above the circle,
   - hidden until the page is scrolled, then fading in; a soft pulse ring; the arrow
     nudging in its own direction; a lift on hover.
   Motion is switched off for visitors who ask for reduced motion. */

/* ---- hidden until scrolled (layouts/app.blade.php sets html[data-scrolled] past 100px);
        visibility beats any inline display a page script sets ---- */
a.scrollToTop, a.scrollToTophome, a.backButton {
    background-color: #18ba60;
    box-shadow: 0 6px 16px -4px rgba(24, 186, 96, .55);
    transition: opacity .35s ease, transform .35s ease, visibility .35s, background-color .3s ease, box-shadow .3s ease !important;
}
html:not([data-scrolled]) .scrollToTop,
html:not([data-scrolled]) .scrollToTophome,
html:not([data-scrolled]) .backButton {
    opacity: 0 !important; visibility: hidden !important; pointer-events: none; transform: translateY(16px);
}

/* ---- the arrow: Font Awesome glyph replaced by a thin SVG, dead-centre in the circle ---- */
.scrollToTop i, .scrollToTophome i, .backButton i {
    display: block; width: 100%; height: 100%;
    background: center / 20px 20px no-repeat;
}
.scrollToTop i::before, .scrollToTophome i::before, .backButton i::before { content: none !important; }
.scrollToTop i, .scrollToTophome i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
    animation: float-btn-up 1.6s ease-in-out infinite;
}
.backButton i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
    animation: float-btn-left 1.6s ease-in-out infinite;
}

/* ---- soft pulse ring; the two buttons take turns ---- */
.scrollToTop::after, .scrollToTophome::after, .backButton::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(24, 186, 96, .5);
    animation: float-btn-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
.backButton::after { animation-delay: 1.2s; }

/* ---- hover ---- */
a.scrollToTop:hover, a.scrollToTophome:hover, a.backButton:hover {
    transform: translateY(-3px);
    background-color: #12a152;
    box-shadow: 0 10px 20px -6px rgba(18, 161, 82, .6);
}
.scrollToTop:hover i, .scrollToTophome:hover i, .backButton:hover i { animation-duration: .8s; }

/* ---- label: kept, centred over its circle, in the button's green ----
   (ceh2.css anchored it to the inner edge so it couldn't run off-screen; centred, "Back to
   Top" overhangs ~18px each side, which fits 20px+ from the edge) */
.scrollToTop .back-to-top-text,
.scrollToTophome .back-to-top-text,
.backButton .back-to-top-text {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: calc(100% + 6px); text-align: center;
    line-height: 1.2;   /* it inherited the button's 40px line-height: an ~18px empty band
                           sat between the words and the circle */
    color: #18ba60;
    transition: color .3s ease;
}
.scrollToTop:hover .back-to-top-text, .scrollToTophome:hover .back-to-top-text,
.backButton:hover .back-to-top-text { color: #12a152; }
.scrollToTophome { left: 22px; }   /* was 15px: room for the centred label */

@keyframes float-btn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(24, 186, 96, .5); }
    70%  { box-shadow: 0 0 0 8px rgba(24, 186, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(24, 186, 96, 0); }
}
@keyframes float-btn-up {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes float-btn-left {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .scrollToTop::after, .scrollToTophome::after, .backButton::after,
    .scrollToTop i, .scrollToTophome i, .backButton i { animation: none; }
    a.scrollToTop:hover, a.scrollToTophome:hover, a.backButton:hover { transform: none; }
}