/*------------------------------------------------------------------*\
    COMPONENTS - Scroll Down  ([scroll_down] shortcode)

    Minimal hero indicator: label + bouncing chevron. Inherits the
    surrounding text colour (works on light AND dark heroes), with a
    subtle infinite bounce (CSS animation; respects reduced motion).

    A11y:
      - real <button>, native keyboard
      - aria-label provides the accessible name
      - decorative chevron is aria-hidden in the template
      - ≥44px hit area, visible :focus-visible ring
\*------------------------------------------------------------------*/

.c-scroll-down {
    /* reset */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    /* layout — hit area + spacing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;

    /* typography */
    color: #ffffff;                  /* white text + chevron (via currentColor) */
    font-family: var(--font-primary, inherit);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;

    transition: opacity 0.2s ease, transform 0.2s ease;
}

.c-scroll-down:hover { color: #ffffff; }
.c-scroll-down:active { transform: translateY(1px); }

.c-scroll-down:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

/* ── Chevron — soft infinite bounce ── */
.c-scroll-down__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    animation: c-scroll-down-bounce 1.8s ease-in-out infinite;
}
.c-scroll-down__icon svg {
    width: 100%;
    height: 100%;
}

@keyframes c-scroll-down-bounce {
    0%, 100% { transform: translateY(-1px); opacity: 1; }
    50%      { transform: translateY(4px);  opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .c-scroll-down__icon { animation: none; }
}