@charset "UTF-8";

/* =====================================================================
   OLLATOEDU ECOSYS
   Back-to-Top Component
   =====================================================================

   File:
   assets/css/components/back-to-top.css

   Phase:
   Phase 6 - Component CSS

   Purpose:
   - Style the global back-to-top control
   - Keep the control hidden until needed
   - Support JavaScript-controlled visibility
   - Support keyboard focus
   - Support reduced-motion preferences
   - Respect mobile safe-area insets
   - Avoid overlapping common fixed UI
   - Hide completely in print

   Dependencies:
   - assets/css/style.css
   - assets/css/website.css
   - assets/css/responsive.css

   Component markup will later be rendered by:
   website/components/back-to-top.php

   Behaviour will later be implemented by:
   assets/js/components/back-to-top.js
   ===================================================================== */


/* =====================================================================
   1. ROOT
   ===================================================================== */

.back-to-top {
    position: fixed;

    right:
        max(
            var(--space-5),
            env(safe-area-inset-right, 0px)
        );

    bottom:
        max(
            var(--space-5),
            env(safe-area-inset-bottom, 0px)
        );

    z-index: var(--z-fixed);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    padding: 0;

    color: var(--color-white);
    background-color: var(--color-primary-700);

    border:
        var(--border-width)
        solid
        rgb(255 255 255 / 0.16);

    border-radius: var(--radius-full);

    box-shadow: var(--shadow-lg);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(0.75rem)
        scale(0.96);

    transition:
        opacity var(--transition-base),
        visibility var(--transition-base),
        transform var(--transition-base),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);

    -webkit-tap-highlight-color: transparent;
}


/* =====================================================================
   2. VISIBLE STATE
   =====================================================================

   back-to-top.js will later add:

   .is-visible

   once the configured scroll threshold is reached.
   ===================================================================== */

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

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* =====================================================================
   3. HOVER
   ===================================================================== */

.back-to-top:hover {
    color: var(--color-white);
    background-color: var(--color-primary-800);

    box-shadow:
        0 12px 30px
        rgb(15 23 42 / 0.18);

    transform:
        translateY(-2px)
        scale(1);
}


/* =====================================================================
   4. ACTIVE
   ===================================================================== */

.back-to-top:active {
    transform:
        translateY(0)
        scale(0.97);
}


/* =====================================================================
   5. KEYBOARD FOCUS
   ===================================================================== */

.back-to-top:focus-visible {
    outline:
        3px
        solid
        rgb(33 111 219 / 0.28);

    outline-offset: 4px;
}


/* =====================================================================
   6. ICON
   ===================================================================== */

.back-to-top__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.15rem;
    height: 1.15rem;

    pointer-events: none;
}


.back-to-top__icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* =====================================================================
   7. OPTIONAL TEXT LABEL
   =====================================================================

   Normally the button will be icon-only with an accessible aria-label.

   This class exists in case a visible text variant is required later.
   ===================================================================== */

.back-to-top__label {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}


/* =====================================================================
   8. OPTIONAL TEXT VARIANT
   ===================================================================== */

.back-to-top--with-label {
    width: auto;

    min-width: 3rem;

    padding-inline:
        var(--space-4);

    gap:
        var(--space-2);

    border-radius:
        var(--radius-pill);
}


.back-to-top--with-label
.back-to-top__label {
    position: static;

    width: auto;
    height: auto;

    padding: 0;
    margin: 0;

    overflow: visible;

    clip: auto;
    clip-path: none;

    white-space: nowrap;

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-semibold);
}


/* =====================================================================
   9. LOADING / DISABLED STATE
   ===================================================================== */

.back-to-top:disabled,
.back-to-top.is-disabled {
    opacity: 0.5;

    cursor: not-allowed;

    pointer-events: none;

    transform: none;
}


/* =====================================================================
   10. FOOTER-AWARE POSITION
   =====================================================================

   back-to-top.js may later add this state while the footer enters the
   viewport if a different visual position is required.

   It does not change positioning drastically; it only gives the control
   slightly more breathing room.
   ===================================================================== */

.back-to-top.is-footer-visible {
    bottom:
        max(
            var(--space-8),
            env(safe-area-inset-bottom, 0px)
        );
}


/* =====================================================================
   11. COOKIE-CONSENT OFFSET
   =====================================================================

   If cookie consent uses a bottom banner, cookie-consent.js may add
   .has-cookie-consent to <body>.

   This prevents the back-to-top control being covered by the banner.
   ===================================================================== */

body.has-cookie-consent
.back-to-top {
    bottom:
        calc(
            6rem
            +
            env(safe-area-inset-bottom, 0px)
        );
}


/* =====================================================================
   12. FLASH STACK OFFSET
   =====================================================================

   Optional integration state if fixed flash messages are positioned
   near the lower-right viewport area.
   ===================================================================== */

body.has-fixed-flash
.back-to-top {
    right:
        max(
            var(--space-6),
            env(safe-area-inset-right, 0px)
        );
}


/* =====================================================================
   13. DESKTOP
   ===================================================================== */

@media (min-width: 64rem) {

    .back-to-top {
        right:
            max(
                var(--space-8),
                env(safe-area-inset-right, 0px)
            );

        bottom:
            max(
                var(--space-8),
                env(safe-area-inset-bottom, 0px)
            );

        width: 3.25rem;
        height: 3.25rem;
    }


    .back-to-top__icon {
        width: 1.2rem;
        height: 1.2rem;
    }
}


/* =====================================================================
   14. LARGE DESKTOP
   ===================================================================== */

@media (min-width: 80rem) {

    .back-to-top {
        right:
            max(
                var(--space-10),
                env(safe-area-inset-right, 0px)
            );
    }
}


/* =====================================================================
   15. MOBILE
   ===================================================================== */

@media (max-width: 47.9375rem) {

    .back-to-top {
        right:
            max(
                var(--space-4),
                env(safe-area-inset-right, 0px)
            );

        bottom:
            max(
                var(--space-4),
                env(safe-area-inset-bottom, 0px)
            );

        width: 2.75rem;
        height: 2.75rem;

        box-shadow:
            0 8px 22px
            rgb(15 23 42 / 0.16);
    }


    .back-to-top__icon {
        width: 1rem;
        height: 1rem;
    }


    body.has-cookie-consent
    .back-to-top {
        bottom:
            calc(
                7rem
                +
                env(safe-area-inset-bottom, 0px)
            );
    }
}


/* =====================================================================
   16. VERY SMALL MOBILE
   ===================================================================== */

@media (max-width: 23.9375rem) {

    .back-to-top {
        right:
            max(
                var(--space-3),
                env(safe-area-inset-right, 0px)
            );

        bottom:
            max(
                var(--space-3),
                env(safe-area-inset-bottom, 0px)
            );

        width: 2.625rem;
        height: 2.625rem;
    }
}


/* =====================================================================
   17. SHORT VIEWPORT
   ===================================================================== */

@media (max-height: 32rem) {

    .back-to-top {
        bottom:
            max(
                var(--space-3),
                env(safe-area-inset-bottom, 0px)
            );
    }
}


/* =====================================================================
   18. HOVER-CAPABLE DEVICES
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {

    .back-to-top:hover {
        transform:
            translateY(-3px)
            scale(1);
    }
}


/* =====================================================================
   19. NON-HOVER / TOUCH DEVICES
   ===================================================================== */

@media (hover: none) {

    .back-to-top:hover {
        background-color:
            var(--color-primary-700);

        transform:
            translateY(0)
            scale(1);
    }
}


/* =====================================================================
   20. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .back-to-top {
        transition:
            none;
    }


    .back-to-top:hover,
    .back-to-top:active,
    .back-to-top.is-visible {
        transform:
            none;
    }
}


/* =====================================================================
   21. FORCED COLOURS / HIGH CONTRAST
   ===================================================================== */

@media (forced-colors: active) {

    .back-to-top {
        color: ButtonText;
        background: ButtonFace;

        border:
            2px
            solid
            ButtonText;

        box-shadow: none;
    }


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


    .back-to-top:focus-visible {
        outline-color: Highlight;
    }
}


/* =====================================================================
   22. PRINT
   ===================================================================== */

@media print {

    .back-to-top {
        display: none !important;
    }
}


/* =====================================================================
   END OF OLLATOEDU ECOSYS BACK-TO-TOP COMPONENT
   ===================================================================== */