/* === Footer Section Styling === */
.site-footer-bottom {
    margin-top: 40px; /* Space above footer */
    padding: 14px 20px; /* Reduced vertical padding */
    text-align: center;
    border-top: 1px solid var(--border-light);
    font-size: 0.9em;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    width: 100%;
    box-sizing: border-box;
}

/* === Footer Links === */
.site-footer-bottom a {
    color: var(--footer-text);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer-bottom a:hover {
    color: var(--accent-hover);
}
.site-footer-bottom a + a {
    margin-left: 15px; /* Space between adjacent links */
}

/* === Scroll-to-Top Wrapper === */
#scroll-to-top-wrapper {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 85px; 
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    background-color: transparent;
    /* Optional: Add border-radius if you want the larger hitbox to be rounded */
    /* border-radius: 50%; */
}
#scroll-to-top-wrapper.active {
    opacity: 1;
    visibility: visible;
}

/* === Scroll-to-Top Button === */
#scroll-to-top-btn {
    width: 50px;
    height: 50px;
    background-color: black; /* Changed for light mode */
    color: white; /* Changed for light mode (SVG arrow) */
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
#scroll-to-top-btn:hover {
    background-color: #333; /* Darker gray for hover in light mode */
}

/* === Scroll-to-Top Button: Dark Mode === */
[data-theme="dark"] #scroll-to-top-btn {
    background-color: white;
    color: black; /* SVG arrow will be black */
}
[data-theme="dark"] #scroll-to-top-btn:hover {
    background-color: #eee; /* Light gray for hover in dark mode */
}

#scroll-to-top-btn svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
}

/* === Responsive Adjustments for Scroll-to-Top Button === */
@media (max-width: 767px) {
    #scroll-to-top-wrapper {
        bottom: -12px !important; /* Further increased for testing */
        right: -12px !important;  /* Further increased for testing */
        /* Optionally, you might want to make the button slightly smaller on mobile */
        /* width: 75px; */
        /* height: 75px; */
    }

    /* If you also made the wrapper smaller, adjust the button inside if needed */
    /* #scroll-to-top-btn { */
    /*     width: 45px; */
    /*     height: 45px; */
    /* } */
}