/* Ride With Us page. Layout, spacing and colours come from Bootstrap classes in the page;
   this file holds only what Bootstrap has no class for. */

/* Stops the sticky jump bar covering a section heading when a jump link is followed. */
html { scroll-behavior: smooth; scroll-padding-top: 60px; }

/* The site's h1 face, for the page's other headings. */
.rw-head { font-family: "Palanquin Dark", sans-serif; font-weight: 800; }
.rw-track { letter-spacing: .1em; }

/* Hero photo reel: one layer per photo, crossfaded by the page script. */
.rw-reel span { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; }
.rw-reel span.on { opacity: 1; }
.rw-scrim { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.35) 100%); }
.rw-shadow { text-shadow: 0 2px 18px rgba(0,0,0,.4); }

/* Jump bar: grey links, cyan for the section in view, and sideways scrolling on phones without a scrollbar. */
.rw-chips {
    --bs-nav-link-color: var(--bs-secondary-color);
    --bs-nav-link-hover-color: var(--bs-emphasis-color);
    --bs-nav-underline-link-active-color: var(--bs-info);
    scrollbar-width: none;
}
.rw-chips::-webkit-scrollbar { display: none; }

/* Short coloured bar under each section heading. */
.rw-rule { width: 56px; height: 4px; }

/* Cards that are links lift slightly on hover. */
.rw-lift { transition: transform .16s, box-shadow .16s; }
.rw-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.6); }

/* Two minute check: an unticked box needs a stronger edge than Bootstrap's dark border to be seen on black,
   and a ticked item is crossed out and dimmed. */
.rw-check { border-color: var(--bs-secondary-color); }
.rw-check:checked ~ .rw-checktext { text-decoration: line-through; opacity: .5; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rw-reel span, .rw-lift { transition: none; }
    .rw-lift:hover { transform: none; }
}