/* Remlinger Fun Park 2.1.5
   Spring/summer identity on the Global Shell. Every rule is scoped under .rfp
   (the <main>) or body.rf-fun-park, so nothing leaks to the rest of the site.

   Three rules that are not style choices (Fall Harvest 1.7.1 / 1.2.0 lessons):
   1. Never put an overflow value on .rfp or any ancestor of the ticker or
      planner panel — it turns them into a scrollport and kills position:sticky.
      Each element that needs clipping clips itself.
   2. Never write the same property twice as a progressive upgrade. NitroPack
      keeps only the first declaration.
   3. Every h1–h6 declares its own colour; X Theme Pro colours headings site-wide.
   Component rules are written .rfp .rfp-x (0-2-0) so the .rfp button reset
   (0-1-1) can never beat them.

   The middle of the page — photo strip, planner, Add-Ons, All the Rides, Your
   plan — is the shared Remlinger Ride Planner (.rp), styled by its own
   stylesheet, which loads after this one. Its theme reads --rfp-header-h,
   --rfp-progress-h and --rfp-ticker-h from here to park under the ticker. */

@font-face {
  font-family: "RFP Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif.woff2") format("woff2");
}
@font-face {
  font-family: "RFP Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
}

body.rf-fun-park { background: #F2F8F5; }

/* Flush the shell header to the very top on this page only. The 3px strip the
   shell normally leaves is where the homepage parks its own progress bar; this
   page's bar sits under the header instead. --rf-shell-admin-offset keeps the
   header below the WordPress toolbar for logged-in editors (Fall Harvest 1.8). */
body.rf-fun-park .rf-shell-header { top: var(--rf-shell-admin-offset, 0px); }

/* position:sticky dies if html or body becomes a scroll container (a theme
   rule like overflow-x:hidden on both does that). clip never creates one, so
   the pinned hero and the parked ticker survive. One declaration each — no
   progressive pairs (NitroPack keeps only the first). */
html:has(body.rf-fun-park) { overflow-x: clip !important; overflow-y: visible !important; }
body.rf-fun-park { overflow-x: clip !important; overflow-y: visible !important; }

.rfp {
  /* palette — meadow, sunflower, raspberry, lake ink, morning sky */
  --bg: #F2F8F5; --surface: #FFFFFF; --surface-2: #E6F1EC; --ink: #12324A; --muted: #4F6B7C; --line: rgba(18, 50, 74, .14);
  --meadow: #1F7346; --meadow-ink: #FFFFFF; --sun: #F4B731; --sun-ink: #1E2A12; --berry: #C2305A; --berry-ink: #FFFFFF; --sky: #D3EAF3;
  --r1: #E9A514; --r2: #2B7FC0; --r3: #8656C2; --no: #9AA9B2;
  --glass: rgba(255, 255, 255, .55); --glass-edge: rgba(255, 255, 255, .75); --glass-shadow: rgba(18, 50, 74, .14);
  /* the Claude Design ride-finder greens */
  --pine: #17452F; --pine-2: #1F5238; --pine-ink: #F3EFE4; --pine-muted: rgba(243, 239, 228, .72); --pine-line: rgba(243, 239, 228, .16); --amber: #F2A93B;
  --night: #0E0C0A;
  --display: "RF Shell Montserrat", "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "RFP Instrument Serif", "Instrument Serif", Georgia, "Times New Roman", serif;
  --radius: 16px;
  /* chrome: --rfp-header-h is the shell header's bottom edge, measured by the
     script; these are the no-JS fallbacks (shell: 78 / 76 / 68px) */
  --rfp-header-h: 78px;
  --rfp-progress-h: 4px;
  --rfp-ticker-h: 40px;
  position: relative;
  display: block;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 500 1rem/1.55 var(--display);
  -webkit-text-size-adjust: 100%;
  text-wrap: pretty;
}
@media (width <= 940px) { .rfp { --rfp-header-h: 76px; } }
@media (width <= 640px) { .rfp { --rfp-header-h: 68px; } }

.rfp *, .rfp *::before, .rfp *::after { box-sizing: border-box; }
.rfp img { max-width: 100%; display: block; }
.rfp [hidden] { display: none !important; }
.rfp h1, .rfp h2, .rfp h3, .rfp h4 { margin: 0; text-wrap: balance; text-transform: none; letter-spacing: normal; color: var(--ink); font-family: var(--display); }
.rfp p { margin: 0; }
.rfp a { color: inherit; }
.rfp button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; margin: 0; text-shadow: none; box-shadow: none; text-transform: none; letter-spacing: normal; line-height: inherit; }
.rfp button:focus-visible, .rfp a:focus-visible, .rfp summary:focus-visible, .rfp [tabindex]:focus-visible { outline: 3px solid var(--r2); outline-offset: 2px; }
.rfp .rfp-wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }
.rfp .rfp-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rfp .rfp-eyebrow { font: 700 .72rem/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--meadow); }
.rfp .rfp-note { font-size: .8rem; color: var(--muted); }
.rfp em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* HighTrek's invisible full-width bar must not swallow taps on the plan bar
   (the Fall Harvest 1.8.1 fix, page-scoped). */
body.rf-fun-park #hightrekposFloatingButtonWrapper { pointer-events: none !important; }
body.rf-fun-park #hightrekposFloatingButtonWrapper > * { pointer-events: auto !important; }

/* ------------------------------------------------------------ glass buttons */
.rfp .rfp-btn {
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), background-color .18s ease, box-shadow .18s ease;
}
.rfp .rfp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font: 700 .9rem/1 var(--display); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 8px 22px var(--glass-shadow);
}
.rfp .rfp-btn:hover { transform: translateY(-1px); }
.rfp .rfp-btn:active { transform: scale(.97); }
.rfp .rfp-btn--tix { background: rgba(194, 48, 90, .88); color: var(--berry-ink); border-color: rgba(255, 210, 222, .7); }
.rfp .rfp-btn--go { background: rgba(31, 115, 70, .88); color: var(--meadow-ink); border-color: rgba(200, 236, 214, .7); }
.rfp .rfp-btn--sun { background: rgba(244, 183, 49, .92); color: var(--sun-ink); border-color: rgba(255, 236, 190, .8); }
.rfp .rfp-btn--glass, .rfp .rfp-btn--clear { background: rgba(255, 255, 255, .14); color: #F7FBF8; border-color: rgba(255, 255, 255, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px rgba(0, 0, 0, .22); }
.rfp .rfp-btn--sm { min-height: 44px; padding: 0 16px; font-size: .82rem; }
.rfp .rfp-btn--lg { min-height: 56px; font-size: 1rem; }
.rfp .rfp-tix-soon { background: var(--glass); color: var(--muted); border-color: var(--glass-edge); cursor: default; }
.rfp .rfp-hero .rfp-tix-soon { background: rgba(255, 255, 255, .16); color: rgba(247, 251, 248, .85); }
.rfp [aria-disabled="true"].rfp-btn:not(.rfp-tix-soon) { opacity: .45; pointer-events: none; }

/* ----------------------------------------------------------- progress bar */
.rfp .rfp-progress {
  position: fixed; left: 0; right: 0; top: var(--rfp-header-h); height: var(--rfp-progress-h); z-index: 979;
  background: rgba(12, 28, 22, .35); transform: translateY(-130%); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
body.rfp-scrolled .rfp .rfp-progress { transform: none; opacity: 1; }
.rfp .rfp-progress i { display: block; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #1F7346, #5DBB83 45%, #F4B731 80%, #FFE08A); box-shadow: 0 0 10px rgba(93, 187, 131, .55); will-change: transform; }

/* --------------------------------------------------------------------- hero */
/* The hero is pinned (sticky, not fixed — it keeps its place in the flow) and
   everything from the ticker down scrolls over it. The script drives two
   fades from how much of the hero is covered: the text goes first (60–90%),
   the photograph holds until 80% and is at half strength as the ticker parks. */
.rfp .rfp-hero {
  position: sticky; top: 0; z-index: 0; display: grid; align-items: end; color: #F7FBF8; background: #123A2A;
  min-height: calc(100svh - var(--rfp-ticker-h)); overflow: clip;
}
.rfp .rfp-hero picture { position: absolute; inset: 0; opacity: var(--rfp-hero-photo, 1); }
.rfp .rfp-flow { position: relative; z-index: 1; background: var(--bg); }
.rfp .rfp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 20% 45%; }
.rfp .rfp-hero::after { content: ""; position: absolute; inset: 0; opacity: var(--rfp-hero-photo, 1); background: linear-gradient(180deg, rgba(9, 30, 22, .45), rgba(9, 30, 22, .2) 35%, rgba(9, 30, 22, .86)), linear-gradient(90deg, rgba(9, 30, 22, .55), rgba(9, 30, 22, 0) 60%); }
@media (width <= 760px) { .rfp .rfp-hero img { object-position: 50% 40%; } }
.rfp .rfp-hero-in { position: relative; z-index: 1; width: 100%; opacity: var(--rfp-hero-text, 1); visibility: var(--rfp-hero-vis, visible); display: grid; gap: 18px; padding-block: calc(var(--rfp-header-h) + clamp(48px, 10vh, 120px)) clamp(28px, 5vh, 48px); }
.rfp .rfp-status { display: inline-flex; align-items: center; gap: 10px; font: 700 .74rem/1.35 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #E9F4EE; }
.rfp .rfp-status i { width: 9px; height: 9px; border-radius: 50%; background: #7EE0A3; box-shadow: 0 0 0 4px rgba(126, 224, 163, .25); flex: 0 0 auto; animation: rfp-glow 2.6s ease-in-out infinite; }
@keyframes rfp-glow { 50% { box-shadow: 0 0 0 7px rgba(126, 224, 163, .12); } }
.rfp .rfp-hero h1 { font: 800 clamp(2.6rem, 9vw, 6.4rem)/.9 var(--display); letter-spacing: -.035em; text-transform: uppercase; color: #F7FBF8; }
.rfp .rfp-hero h1 span { display: block; color: var(--sun); }
.rfp .rfp-hero-lede { max-width: 54ch; color: rgba(247, 251, 248, .9); font-size: 1.02rem; }

/* ----------------------------------------------------------- ride ticker */
.rfp .rfp-ticker { position: sticky; top: calc(var(--rfp-header-h) + var(--rfp-progress-h)); z-index: 30; height: var(--rfp-ticker-h); background: var(--night); border-bottom: 1px solid rgba(244, 241, 234, .1); overflow: hidden; }
.rfp .rfp-ticker.is-js { position: fixed; left: 0; right: 0; z-index: 970; }
.rfp .rfp-ticker-ph { height: var(--rfp-ticker-h); }
.rfp .rfp-ticker-track { display: flex; width: max-content; height: 100%; animation: rfp-mw 64s linear infinite; }
.rfp .rfp-ticker-track div { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding: 0 clamp(10px, 1.5vw, 22px); font: 600 .72rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 241, 234, .62); white-space: nowrap; }
.rfp .rfp-ticker-track b { color: var(--sun); font-weight: 400; }

/* HighTrek compatibility (2.1.2). HighTrek's checkout puts position: fixed on
   <html>; a fixed root sizes to its content's min-content, and these wide
   max-content tracks would stretch the document to ~13,600px and push the
   checkout iframe off-screen. Size containment keeps each strip's intrinsic
   width out of the page's; the tracks stay max-content inside, so the ticker
   still animates and the rail still scrolls. Pairs with Global Shell 1.3.4.
   .rp-rail is the photo rail, rendered by the Ride Planner since 2.1.0;
   .rfp-rail is its pre-2.1.0 name. */
body.rf-fun-park .rfp-ticker,
body.rf-fun-park .rfp-rail,
body.rf-fun-park .rp-rail {
  contain: inline-size;
  inline-size: 100%;
  max-inline-size: 100%;
}
@keyframes rfp-mw { to { transform: translate3d(-50%, 0, 0); } }

.rfp .rfp-fest { background: var(--sky); }
.rfp .rfp-fest .rfp-wrap { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 12px; }
.rfp .rfp-fest p { font-size: .9rem; min-width: 0; flex: 1 1 320px; }

/* -------------------------------------------------------- wristband story */
.rfp .rfp-band { display: flex; gap: clamp(28px, 5vw, 76px); flex-wrap: wrap; align-items: center; padding-block: clamp(48px, 9vh, 100px) clamp(28px, 5vh, 52px); }
.rfp .rfp-band > div { flex: 1 1 min(100%, 380px); min-width: 0; }
.rfp .rfp-big { font: 800 clamp(2.1rem, 8.6vw, 4.9rem)/.92 var(--display); letter-spacing: -.04em; color: var(--meadow); text-transform: none; }
.rfp .rfp-big span { white-space: nowrap; }
@media (width > 900px) { .rfp .rfp-band > div:first-child { flex-basis: 52%; } }
.rfp .rfp-big span { display: block; color: var(--berry); }
.rfp .rfp-wipe { height: 3px; margin-top: 14px; background: var(--sun); transform-origin: left center; animation: rfp-wipe 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rfp-wipe { from { transform: scaleX(0); } }
.rfp .rfp-lbl { margin-top: 14px; font: 700 .72rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.rfp .rfp-band h2 { font: 400 clamp(1.9rem, 4.4vw, 3.2rem)/1.02 var(--serif); color: var(--meadow); margin-bottom: 16px; }
.rfp .rfp-copy { margin-bottom: 24px; color: var(--muted); max-width: 48ch; }
.rfp .rfp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rfp .rfp-tiles div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px; }
.rfp .rfp-tiles b { display: block; font: 800 1.35rem/1 var(--display); color: var(--ink); }
.rfp .rfp-tiles span { display: block; margin-top: 6px; font: 700 .64rem/1.35 var(--display); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
@media (width <= 480px) { .rfp .rfp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rfp .rfp-tiles div:last-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- sections */
.rfp .rfp-sec { padding-block: clamp(44px, 7vh, 84px); scroll-margin-top: calc(var(--rfp-header-h) + var(--rfp-progress-h) + var(--rfp-ticker-h)); }
.rfp #top { scroll-margin-top: 0; }
.rfp .rfp-head { display: grid; gap: 10px; margin-bottom: clamp(20px, 3vh, 32px); max-width: 62ch; }
.rfp .rfp-head h2 { font: 800 clamp(1.8rem, 4.2vw, 3rem)/1.02 var(--display); letter-spacing: -.02em; color: var(--ink); }
.rfp .rfp-head h2 em { font-size: 1.08em; letter-spacing: 0; color: var(--meadow); }
.rfp .rfp-head p { color: var(--muted); }
.rfp .rfp-head a { color: var(--meadow); }

/* ------------------------------------------------- photo tiles (After the Rides) */
.rfp .rfp-ph { aspect-ratio: 3 / 2; position: relative; display: grid; place-items: center; max-width: 100%; overflow: hidden; }
.rfp .rfp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rfp .rfp-icon { width: 40%; height: auto; opacity: .8; }
.rfp .rfp-badge { position: absolute; left: 10px; top: 10px; border-radius: 999px; padding: 6px 11px; font: 700 .68rem/1 var(--display); background: rgba(255, 255, 255, .72); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--glass-edge); }

/* ------------------------------------------------------- after the rides */
.rfp .rfp-after { background: var(--surface-2); }
.rfp .rp + .rfp-after { background: var(--bg); }
.rfp .rfp-after-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.rfp .rfp-after-grid article { display: grid; gap: 10px; align-content: start; }
.rfp .rfp-after-grid .rfp-ph { border-radius: var(--radius); aspect-ratio: 5 / 4; background: var(--surface); color: var(--meadow); }
.rfp .rfp-after-grid h3 { font: 800 1.15rem/1.1 var(--display); color: var(--ink); }
.rfp .rfp-after-grid p { color: var(--muted); font-size: .9rem; }
.rfp .rfp-editor-only { align-content: center !important; background: var(--surface); border-radius: var(--radius); padding: 20px; outline: 2px dashed var(--berry); outline-offset: -6px; }
.rfp .rfp-editor-only .rfp-eyebrow { color: var(--berry); }

/* ------------------------------------------------------------ good to know */
.rfp .rfp-faq { display: grid; gap: 10px; max-width: 860px; }
.rfp .rfp-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.rfp .rfp-faq summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; font: 700 1rem/1.3 var(--display); color: var(--ink); }
.rfp .rfp-faq summary::-webkit-details-marker { display: none; }
.rfp .rfp-faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); flex: 0 0 auto; transition: transform .2s; }
.rfp .rfp-faq details[open] summary::after { transform: rotate(-135deg); }
.rfp .rfp-a { padding: 0 18px 16px; color: var(--muted); max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
  .rfp *, .rfp *::before, .rfp *::after { animation: none !important; transition: none !important; }
}