/**
 * Footer Styles - Professional & Production Ready
 * FSE-First Approach with Minimal Custom Styles
 *
 * @package Versana
 * @since 1.0.0
 */

/* ==========================================================================
   Back to Top Button
   ========================================================================== */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--wp--preset--color--primary, #000);
    color: var(--wp--preset--color--base, #fff);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* Back to top icon */
.back-to-top svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Mobile: Smaller button */
@media (max-width: 781px) {
    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    .back-to-top svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   Admin Bar Adjustment
   ========================================================================== */

/* Adjust back-to-top position when admin bar is present */
.admin-bar .back-to-top {
    bottom: calc(2rem + 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .back-to-top {
        bottom: calc(1.5rem + 46px);
    }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Focus visible for back-to-top button */
.back-to-top:focus-visible {
    outline: 2px solid var(--wp--preset--color--base, #fff);
    outline-offset: 2px;
}

/* Skip to footer link (for accessibility) */
.skip-to-footer {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--wp--preset--color--contrast, #000);
    color: var(--wp--preset--color--base, #fff);
    padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1rem);
    text-decoration: none;
    z-index: 10000;
}

.skip-to-footer:focus {
    top: 0;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .back-to-top {
        display: none;
    }
}