/* ui-enhancements.css
 * UI/UX only: fixed site header + back-to-top control.
 * Loaded after custom.css so the !important overrides below win,
 * and before ns-extracted.css so former-inline styles keep priority.
 */

/* ---------------------------------------------------------------
   1. Fixed header
   `position: sticky` is NOT usable here: custom.css sets
   `overflow-x: hidden` on html AND body, which turns them into
   scroll containers and breaks sticky. Fixed + height compensation
   is the reliable route.
   --------------------------------------------------------------- */
:root {
    --ns-header-h: 80px;          /* fallback; JS sets the measured value */
    --ns-ease: cubic-bezier(.22, .61, .36, 1);
}

header.custom-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transition: box-shadow .3s var(--ns-ease), backdrop-filter .3s var(--ns-ease);
    will-change: box-shadow;
}

/* Reserve the space the header used to occupy, so nothing jumps. */
#app > main {
    padding-top: var(--ns-header-h);
}

/* In-page anchors must not land underneath the fixed header. */
html {
    scroll-padding-top: calc(var(--ns-header-h) + 16px);
}

/* Lift on scroll - subtle depth, no layout change. */
header.custom-header.ns-scrolled {
    box-shadow: 0 6px 24px rgba(20, 49, 26, .10), 0 1px 0 rgba(20, 49, 26, .06);
}

/* Bootstrap modals must sit above the header (it stays on screen now).
   Modal = 1055, backdrop = 1050, so drop the header just below both. */
body.modal-open header.custom-header {
    z-index: 1040 !important;
}

@media (max-width: 1199.98px) {
    :root { --ns-header-h: 72px; }
}
@media (max-width: 575.98px) {
    :root { --ns-header-h: 66px; }
}

/* ---------------------------------------------------------------
   2. Back-to-top button
   --------------------------------------------------------------- */
.ns-back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: #14311A;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 1035;
    box-shadow: 0 6px 20px rgba(20, 49, 26, .16), 0 2px 6px rgba(20, 49, 26, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.88);
    transition: opacity .32s var(--ns-ease), transform .32s var(--ns-ease),
                visibility .32s var(--ns-ease), box-shadow .25s var(--ns-ease),
                background-color .25s var(--ns-ease), color .25s var(--ns-ease);
}

.ns-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ns-back-to-top:hover {
    background: #6CB545;
    color: #FFFFFF;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 28px rgba(108, 181, 69, .34), 0 3px 8px rgba(20, 49, 26, .12);
}

.ns-back-to-top:active {
    transform: translateY(-1px) scale(.97);
}

.ns-back-to-top:focus-visible {
    outline: 3px solid rgba(108, 181, 69, .45);
    outline-offset: 3px;
}

/* Arrow */
.ns-back-to-top .ns-btt-arrow {
    width: 19px;
    height: 19px;
    position: relative;
    z-index: 1;
    transition: transform .3s var(--ns-ease);
}
.ns-back-to-top:hover .ns-btt-arrow {
    transform: translateY(-2px);
}

/* Scroll-progress ring */
.ns-back-to-top .ns-btt-ring {
    position: absolute;
    inset: 0;
    width: 52px;
    height: 52px;
    transform: rotate(-90deg);   /* start the arc at 12 o'clock */
    pointer-events: none;
}
.ns-btt-ring circle {
    fill: none;
    stroke-width: 2.5;
    /* cx / cy / r live on the SVG element as attributes and scale via viewBox */
}
.ns-btt-ring .ns-btt-track {
    stroke: rgba(20, 49, 26, .10);
}
.ns-btt-ring .ns-btt-bar {
    stroke: #6CB545;
    stroke-linecap: round;
    transition: stroke-dashoffset .12s linear, stroke .25s var(--ns-ease);
}
.ns-back-to-top:hover .ns-btt-bar {
    stroke: #FFFFFF;
}
.ns-back-to-top:hover .ns-btt-track {
    stroke: rgba(255, 255, 255, .3);
}

@media (max-width: 575.98px) {
    .ns-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
    .ns-back-to-top .ns-btt-ring { width: 46px; height: 46px; }
    .ns-back-to-top .ns-btt-arrow { width: 17px; height: 17px; }
}

/* Keep it out of the way while a modal is open. */
body.modal-open .ns-back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Accessibility: honour reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ns-back-to-top,
    .ns-back-to-top .ns-btt-arrow,
    .ns-btt-ring .ns-btt-bar,
    header.custom-header {
        transition-duration: .01ms !important;
    }
    .ns-back-to-top:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Accessibility: WCAG AA contrast fix (Lighthouse `color-contrast`).
   Bootstrap's .text-muted (#6c757d) on the footer background (#f6f8f4)
   measures 4.39:1 - just under the 4.5:1 minimum for small text.
   #646c73 measures 4.99:1 and is visually near-identical.
   Scoped to the footer so .text-muted is unchanged everywhere else.
   --------------------------------------------------------------- */
.figma-footer-section .text-muted,
.figma-footer-contact .text-muted {
    color: #646c73 !important;
}