/* RPR homepage lane cards */
.rpr-category-card[role="link"] {
  cursor: pointer;
  position: relative;
  z-index: 1;
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    box-shadow 220ms ease,
    filter 220ms ease;
  will-change: transform;
}

.rpr-category-card[role="link"]:focus-visible {
  outline: 3px solid #B2433C;
  outline-offset: 4px;
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 18px 38px rgba(17,17,17,.16);
  z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
  .rpr-category-card[role="link"]:hover {
    transform: translateY(-7px) scale(1.035);
    box-shadow: 0 20px 42px rgba(17,17,17,.18);
    filter: saturate(1.04) contrast(1.02);
    z-index: 3;
  }
}

.rpr-category-card[role="link"]:active {
  transform: translateY(-2px) scale(1.012);
  transition-duration: 90ms;
}

/* Keep article-card category links in RPR Journey Red. */
.rpr-post-grid .wp-block-post-terms a,
.rpr-post-grid .wp-block-post-terms a:visited,
.rpr-post-grid .wp-block-post-terms a:hover,
.rpr-post-grid .wp-block-post-terms a:focus {
  color: #B2433C !important;
}

/* Archive pages use the intended wide content area. */
body.archive main.rpr-section > .wp-block-query-title,
body.archive main.rpr-section > .wp-block-query {
  width: calc(100% - 48px) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Archive: 3-column desktop grid. */
body.archive .rpr-post-grid .wp-block-post-template {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Homepage Latest from the Journey:
   use 3 columns instead of the original 4 so each article card has more presence. */
body.home .rpr-post-grid .wp-block-post-template {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Gentle article-card interaction. */
@media (hover: hover) and (pointer: fine) {
  .rpr-post-grid .wp-block-post {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .rpr-post-grid .wp-block-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(17,17,17,.10);
  }
}

@media (max-width: 900px) {
  body.archive .rpr-post-grid .wp-block-post-template,
  body.home .rpr-post-grid .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.archive main.rpr-section > .wp-block-query-title,
  body.archive main.rpr-section > .wp-block-query {
    width: calc(100% - 32px) !important;
  }

  body.archive .rpr-post-grid .wp-block-post-template,
  body.home .rpr-post-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpr-category-card[role="link"],
  .rpr-category-card[role="link"]:hover,
  .rpr-category-card[role="link"]:focus-visible,
  .rpr-category-card[role="link"]:active,
  .rpr-post-grid .wp-block-post,
  .rpr-post-grid .wp-block-post:hover {
    transition: none;
    transform: none;
  }
}


/* Wide editorial column sections inside regular Pages.
   The Page template keeps Post Content at the 760px reading width.
   This lets direct child Columns break out to a roomy editorial width
   while paragraphs above and below remain narrow and readable. */
body.page .rpr-article-shell .wp-block-post-content > .wp-block-columns {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-width: none !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%);
  column-gap: clamp(28px, 4vw, 56px);
}

@media (max-width: 781px) {
  body.page .rpr-article-shell .wp-block-post-content > .wp-block-columns {
    width: min(100%, calc(100vw - 32px)) !important;
    margin-left: 50% !important;
    transform: translateX(-50%);
  }
}


/* ---------------------------------------------------------
   v1.5: Reliable sticky header
   ---------------------------------------------------------
   The RPR header itself lives inside WordPress's Template Part wrapper.
   Making only the inner .rpr-header sticky can keep it constrained to the
   height of that wrapper. Make the top-level header template part sticky
   instead, and let the inner header behave as the visual shell.
--------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:first-child:has(.rpr-header) {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Avoid nested-sticky behavior now that the template-part wrapper sticks. */
.wp-site-blocks > header.wp-block-template-part .rpr-header,
.wp-site-blocks > .wp-block-template-part:first-child:has(.rpr-header) .rpr-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
}

/* Keep the sticky header below the WordPress admin toolbar when logged in. */
.admin-bar .wp-site-blocks > header.wp-block-template-part,
.admin-bar .wp-site-blocks > .wp-block-template-part:first-child:has(.rpr-header) {
  top: 32px !important;
}

@media (max-width: 782px) {
  .admin-bar .wp-site-blocks > header.wp-block-template-part,
  .admin-bar .wp-site-blocks > .wp-block-template-part:first-child:has(.rpr-header) {
    top: 46px !important;
  }
}


/* ---------------------------------------------------------
   v1.6: "Our Story" hero button interaction
   --------------------------------------------------------- */
.rpr-button--outline .wp-block-button__link {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .rpr-button--outline .wp-block-button__link:hover {
    background-color: #B2433C !important;
    border-color: #B2433C !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
  }
}

.rpr-button--outline .wp-block-button__link:focus-visible {
  background-color: #B2433C !important;
  border-color: #B2433C !important;
  color: #FFFFFF !important;
  outline: 3px solid rgba(178, 67, 60, .28);
  outline-offset: 3px;
}

.rpr-button--outline .wp-block-button__link:active {
  background-color: #B2433C !important;
  border-color: #B2433C !important;
  color: #FFFFFF !important;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .rpr-button--outline .wp-block-button__link,
  .rpr-button--outline .wp-block-button__link:hover,
  .rpr-button--outline .wp-block-button__link:focus-visible,
  .rpr-button--outline .wp-block-button__link:active {
    transition: none;
    transform: none;
  }
}


/* ---------------------------------------------------------
   v1.7: Animate the red geometric square/chevron on lane cards
   --------------------------------------------------------- */
.rpr-category-card::after {
  pointer-events: none;
  transform: translate(0, 0) rotate(42deg);
  transform-origin: center;
  transition:
    transform 320ms cubic-bezier(.2,.75,.2,1),
    opacity 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .rpr-category-card[role="link"]:hover::after {
    transform: translate(-18px, -14px) rotate(48deg) scale(1.06);
    opacity: 1;
  }
}

.rpr-category-card[role="link"]:focus-visible::after {
  transform: translate(-18px, -14px) rotate(48deg) scale(1.06);
  opacity: 1;
}

.rpr-category-card[role="link"]:active::after {
  transform: translate(-10px, -8px) rotate(45deg) scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .rpr-category-card::after,
  .rpr-category-card[role="link"]:hover::after,
  .rpr-category-card[role="link"]:focus-visible::after,
  .rpr-category-card[role="link"]:active::after {
    transition: none;
    transform: rotate(42deg);
  }
}


/* ---------------------------------------------------------
   v1.8: Mobile navigation — show the whole menu clearly
   ---------------------------------------------------------
   The header's backdrop-filter can create a containing block for fixed
   descendants on mobile browsers, which can make WordPress's responsive
   menu behave like a small internally-scrollable panel. On phones we remove
   that blur and turn the Navigation overlay into a true full-screen menu.
--------------------------------------------------------- */

@media (max-width: 781px) {
  /* The header is already almost opaque; removing blur on phones also lets
     WordPress's fixed menu overlay anchor to the viewport reliably. */
  .rpr-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .rpr-header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #F7F5F2 !important;
    color: #111111 !important;
    z-index: 999999 !important;
  }

  .rpr-header .wp-block-navigation__responsive-close,
  .rpr-header .wp-block-navigation__responsive-dialog {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .rpr-header .wp-block-navigation__responsive-dialog {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .rpr-header .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    z-index: 2 !important;
  }

  .rpr-header .wp-block-navigation__responsive-container-content {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 72px 28px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .rpr-header .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .rpr-header .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item {
    width: 100% !important;
    margin: 0 !important;
  }

  .rpr-header .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.11);
    font-size: clamp(1.05rem, 5vw, 1.3rem) !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
  }

  .rpr-header .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
    border-top: 1px solid rgba(17,17,17,.11);
  }

  .rpr-header .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content:active,
  .rpr-header .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content:focus-visible {
    color: #B2433C !important;
  }
}

/* Very short phone screens / landscape: keep all six items visible by
   tightening the menu rather than forcing an unexplained inner scroll. */
@media (max-width: 781px) and (max-height: 500px) {
  .rpr-header .wp-block-navigation__responsive-container-content {
    padding-top: 58px !important;
    padding-bottom: 12px !important;
  }

  .rpr-header .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item__content {
    min-height: 36px !important;
    padding: 5px 0 !important;
    font-size: 1rem !important;
  }

  .rpr-header .wp-block-navigation__responsive-container-close {
    top: 8px !important;
    right: 14px !important;
  }
}