/* ==========================================================
   RUDE PANTRY — SITE JOURNEY
   Shortcode: [rp_site_journey]
   Optional dark version: [rp_site_journey theme="dark"]
   ========================================================== */

.rp-site-journey {
  --rp-journey-bg: #fffdf8;
  --rp-journey-text: #422546;
  --rp-journey-muted: #8d7a63;
  --rp-journey-brass: #a98c57;
  --rp-journey-line: rgba(169, 140, 87, 0.38);
  --rp-journey-current-bg: #422546;
  --rp-journey-current-text: #fffdf8;
  --rp-journey-hover-bg: #a98c57;
  --rp-journey-hover-text: #2c1830;

  margin: 0 !important;
  padding: clamp(46px, 6vw, 78px) clamp(20px, 4vw, 54px) !important;
  background: var(--rp-journey-bg) !important;
  color: var(--rp-journey-text) !important;
  border-top: 1px solid var(--rp-journey-line) !important;
}

/* Rare alternative for a page whose ending genuinely needs a dark panel. */
.rp-site-journey--dark {
  --rp-journey-bg: #422546;
  --rp-journey-text: #fffdf8;
  --rp-journey-muted: #d7c8ae;
  --rp-journey-line: rgba(255, 255, 255, 0.22);
  --rp-journey-current-bg: #a98c57;
  --rp-journey-current-text: #2c1830;
  --rp-journey-hover-bg: #fffdf8;
  --rp-journey-hover-text: #422546;
}

.rp-site-journey__inner {
  width: min(100%, 1120px) !important;
  margin: 0 auto !important;
}

.rp-site-journey__eyebrow {
  margin: 0 0 clamp(28px, 4vw, 42px) !important;
  color: var(--rp-journey-brass) !important;
  font-family: var(--rp-inter, Inter, Arial, sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.22em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.rp-site-journey__track {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 3vw, 42px) !important;
  align-items: start !important;
}

/* Fine brass route line behind the three page panels. */
.rp-site-journey__track::before {
  content: "";
  position: absolute;
  top: 59px;
  left: 16.666%;
  right: 16.666%;
  height: 1px;
  background: var(--rp-journey-line);
  z-index: 0;
}

.rp-site-journey__slot {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  text-align: center !important;
}

.rp-site-journey__slot-label {
  display: block !important;
  margin: 0 0 15px !important;
  color: var(--rp-journey-muted) !important;
  font-family: var(--rp-inter, Inter, Arial, sans-serif) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.rp-site-journey__page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 14px 20px !important;
  box-sizing: border-box !important;
  background: var(--rp-journey-bg) !important;
  border: 1px solid var(--rp-journey-brass) !important;
  border-radius: 4px !important;
  color: var(--rp-journey-text) !important;
  font-family: var(--rp-cormorant, Georgia, serif) !important;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition:
    transform .18s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

/* Clear but restrained interactive state for Previous and Next. */
.rp-site-journey a.rp-site-journey__page:hover,
.rp-site-journey a.rp-site-journey__page:focus-visible {
  background: var(--rp-journey-hover-bg) !important;
  border-color: var(--rp-journey-hover-bg) !important;
  color: var(--rp-journey-hover-text) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(44, 24, 48, 0.10) !important;
  outline: none !important;
}

.rp-site-journey a.rp-site-journey__page:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Current page: highlighted and deliberately non-interactive. */
.rp-site-journey__slot.is-current .rp-site-journey__page {
  background: var(--rp-journey-current-bg) !important;
  border-color: var(--rp-journey-current-bg) !important;
  color: var(--rp-journey-current-text) !important;
  cursor: default !important;
  pointer-events: none !important;
}

.rp-site-journey__slot.is-current::before {
  content: "";
  position: absolute;
  top: 55px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--rp-journey-brass);
  border: 3px solid var(--rp-journey-bg);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}

/* Only used on the first or final page in the menu order. */
.rp-site-journey__slot.is-empty {
  visibility: hidden !important;
}

.rp-site-journey__notice {
  padding: 16px 20px !important;
  background: #fff8df !important;
  border-left: 4px solid #a98c57 !important;
  color: #422546 !important;
}

@media (max-width: 720px) {
  .rp-site-journey {
    padding: 42px 20px !important;
  }

  .rp-site-journey__track {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .rp-site-journey__track::before,
  .rp-site-journey__slot.is-current::before {
    display: none !important;
  }

  .rp-site-journey__slot.is-empty {
    display: none !important;
  }

  .rp-site-journey__slot-label {
    margin-bottom: 8px !important;
  }

  .rp-site-journey__page {
    min-height: 56px !important;
    font-size: clamp(1.22rem, 7vw, 1.65rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp-site-journey__page {
    transition: none !important;
  }

  .rp-site-journey a.rp-site-journey__page:hover,
  .rp-site-journey a.rp-site-journey__page:focus-visible,
  .rp-site-journey a.rp-site-journey__page:active {
    transform: none !important;
  }
}