/**
 * minCore - Back to Top Button Styles
 *
 * @package    MadeInNature\MinCore
 * @author     made in nature Projektagentur
 * @copyright  2026 made in nature
 * @license    GPL-2.0-or-later
 *
 * Features:
 * - CSS Custom Properties for theming
 * - Dark Mode support (prefers-color-scheme)
 * - Reduced motion support (prefers-reduced-motion)
 * - Print hidden
 * - WCAG 2.2 AA compliant focus indicator
 * - Smooth fade-in/fade-out animations
 * - Hover/focus effects
 */

/* =============================================================================
   CSS Custom Properties (Design Tokens)
   ============================================================================= */
:root {
    /* Button dimensions */
    --mincore-btt-size: 3rem;
    --mincore-btt-icon-size: 1.25rem;

    /* Position */
    --mincore-btt-bottom: 1.5rem;
    --mincore-btt-right: 1.5rem;

    /* Colors - Light Mode */
    --mincore-btt-bg: rgba(30, 30, 30, 0.9);
    --mincore-btt-bg-hover: rgba(0, 0, 0, 1);
    --mincore-btt-color: #ffffff;
    --mincore-btt-color-hover: #ffffff;

    /* Border & Shadow */
    --mincore-btt-border-radius: 50%;
    --mincore-btt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --mincore-btt-box-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.3);

    /* Focus */
    --mincore-btt-focus-ring-color: #005fcc;
    --mincore-btt-focus-ring-width: 3px;
    --mincore-btt-focus-ring-offset: 2px;

    /* Transitions */
    --mincore-btt-transition-duration: 300ms;
    --mincore-btt-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index */
    --mincore-btt-z-index: 999;
}

/* =============================================================================
   Dark Mode Colors
   ============================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --mincore-btt-bg: rgba(240, 240, 240, 0.95);
        --mincore-btt-bg-hover: rgba(255, 255, 255, 1);
        --mincore-btt-color: #1e1e1e;
        --mincore-btt-color-hover: #000000;
        --mincore-btt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        --mincore-btt-box-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
        --mincore-btt-focus-ring-color: #66b3ff;
    }
}

/* =============================================================================
   High Contrast Mode Support
   ============================================================================= */
@media (prefers-contrast: high) {
    :root {
        --mincore-btt-bg: #000000;
        --mincore-btt-bg-hover: #000000;
        --mincore-btt-color: #ffffff;
        --mincore-btt-color-hover: #ffffff;
        --mincore-btt-focus-ring-color: #ffffff;
        --mincore-btt-focus-ring-width: 4px;
    }
}

@media (prefers-contrast: high) and (prefers-color-scheme: dark) {
    :root {
        --mincore-btt-bg: #ffffff;
        --mincore-btt-bg-hover: #ffffff;
        --mincore-btt-color: #000000;
        --mincore-btt-color-hover: #000000;
        --mincore-btt-focus-ring-color: #ffff00;
    }
}

/* =============================================================================
   Main Button Styles
   ============================================================================= */
.mincore-back-to-top {
    /* Reset button styles */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;

    /* Positioning */
    position: fixed;
    bottom: var(--mincore-btt-bottom);
    right: var(--mincore-btt-right);
    z-index: var(--mincore-btt-z-index);

    /* Dimensions */
    width: var(--mincore-btt-size);
    height: var(--mincore-btt-size);
    min-width: 44px; /* WCAG touch target minimum */
    min-height: 44px;

    /* Visual */
    background-color: var(--mincore-btt-bg);
    color: var(--mincore-btt-color);
    border-radius: var(--mincore-btt-border-radius);
    box-shadow: var(--mincore-btt-box-shadow);

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Initial state: hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);

    /* Transitions */
    transition:
        opacity var(--mincore-btt-transition-duration) var(--mincore-btt-transition-easing),
        visibility var(--mincore-btt-transition-duration) var(--mincore-btt-transition-easing),
        transform var(--mincore-btt-transition-duration) var(--mincore-btt-transition-easing),
        background-color 150ms ease,
        box-shadow 150ms ease;
}

/* Hidden state (from JS) */
.mincore-back-to-top[hidden] {
    display: none;
}

/* Visible state */
.mincore-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =============================================================================
   Hover & Active States
   ============================================================================= */
.mincore-back-to-top:hover {
    background-color: var(--mincore-btt-bg-hover);
    color: var(--mincore-btt-color-hover);
    box-shadow: var(--mincore-btt-box-shadow-hover);
    transform: translateY(-2px);
}

.mincore-back-to-top:active {
    transform: translateY(0);
    box-shadow: var(--mincore-btt-box-shadow);
}

/* =============================================================================
   Focus Styles (WCAG 2.2 AA)
   ============================================================================= */
.mincore-back-to-top:focus {
    outline: none;
}

.mincore-back-to-top:focus-visible,
.mincore-back-to-top.is-focused {
    outline: var(--mincore-btt-focus-ring-width) solid var(--mincore-btt-focus-ring-color);
    outline-offset: var(--mincore-btt-focus-ring-offset);
}

/* Fallback for browsers without :focus-visible */
.mincore-back-to-top:focus:not(:focus-visible) {
    outline: none;
}

/* =============================================================================
   Icon Styles
   ============================================================================= */
.mincore-back-to-top__icon {
    width: var(--mincore-btt-icon-size);
    height: var(--mincore-btt-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;

    /* Subtle animation on hover */
    transition: transform 200ms ease;
}

.mincore-back-to-top:hover .mincore-back-to-top__icon {
    transform: translateY(-2px);
}

/* =============================================================================
   Screen Reader Only Text
   ============================================================================= */
.mincore-back-to-top__sr-text,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================================================
   Reduced Motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .mincore-back-to-top {
        transition: none;
        transform: none;
    }

    .mincore-back-to-top.is-visible {
        transform: none;
    }

    .mincore-back-to-top:hover {
        transform: none;
    }

    .mincore-back-to-top:hover .mincore-back-to-top__icon {
        transform: none;
    }
}

/* =============================================================================
   Print Styles
   ============================================================================= */
@media print {
    .mincore-back-to-top {
        display: none !important;
    }
}

/* =============================================================================
   Responsive Adjustments
   ============================================================================= */

/* Mobile: larger touch target, slightly different position */
@media (max-width: 767px) {
    :root {
        --mincore-btt-size: 3.5rem;
        --mincore-btt-bottom: 1rem;
        --mincore-btt-right: 1rem;
        --mincore-btt-icon-size: 1.5rem;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --mincore-btt-bottom: 1.25rem;
        --mincore-btt-right: 1.25rem;
    }
}

/* Large screens */
@media (min-width: 1400px) {
    :root {
        --mincore-btt-bottom: 2rem;
        --mincore-btt-right: 2rem;
    }
}

/* =============================================================================
   Windows High Contrast Mode
   ============================================================================= */
@media (forced-colors: active) {
    .mincore-back-to-top {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        forced-color-adjust: none;
    }

    .mincore-back-to-top:hover {
        background: Highlight;
        color: HighlightText;
        border-color: HighlightText;
    }

    .mincore-back-to-top:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .mincore-back-to-top__icon {
        stroke: currentColor;
    }
}

/* =============================================================================
   Alternative Shapes (via data attribute)
   ============================================================================= */

/* Square button variant */
.mincore-back-to-top[data-shape="square"] {
    --mincore-btt-border-radius: 0.5rem;
}

/* Rounded square */
.mincore-back-to-top[data-shape="rounded"] {
    --mincore-btt-border-radius: 0.75rem;
}

/* Pill shape */
.mincore-back-to-top[data-shape="pill"] {
    --mincore-btt-border-radius: 9999px;
}

/* =============================================================================
   Size Variants (via data attribute)
   ============================================================================= */

/* Small */
.mincore-back-to-top[data-size="small"] {
    --mincore-btt-size: 2.5rem;
    --mincore-btt-icon-size: 1rem;
}

/* Large */
.mincore-back-to-top[data-size="large"] {
    --mincore-btt-size: 4rem;
    --mincore-btt-icon-size: 1.75rem;
}

/* =============================================================================
   Position Variants (via data attribute)
   ============================================================================= */

/* Left position */
.mincore-back-to-top[data-position="left"] {
    right: auto;
    left: var(--mincore-btt-right);
}

/* Center position */
.mincore-back-to-top[data-position="center"] {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
}

.mincore-back-to-top[data-position="center"].is-visible {
    transform: translateX(-50%) translateY(0);
}

.mincore-back-to-top[data-position="center"]:hover {
    transform: translateX(-50%) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .mincore-back-to-top[data-position="center"],
    .mincore-back-to-top[data-position="center"].is-visible,
    .mincore-back-to-top[data-position="center"]:hover {
        transform: translateX(-50%);
    }
}