@charset "utf-8";
/* HP4U Page Prev/Next — arrow + uppercase text, WCAG AA
   Scope: only affects markup from the [hp4u_page_nav] shortcode. */

.hp4u-page-nav {
  --hp4u-nav-text:   #54585e;  /* link/text color */
  --hp4u-nav-accent: #d9875c;  /* arrow color */
  --hp4u-gap: clamp(14px, 3vw, 28px);
  margin: clamp(20px, 5vw, 44px) 0;
}


.hp4u-page-nav--align-center .hp4u-page-nav-list { justify-content: space-between; }
.hp4u-page-nav--align-left   .hp4u-page-nav-list { justify-content: flex-start; }
.hp4u-page-nav--align-right  .hp4u-page-nav-list { justify-content: flex-end; }

.hp4u-page-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hp4u-gap);
    align-items: center;
    padding: 0;
    list-style: none;
    margin: 0 auto 0 auto!important;
    align-content: center;
    justify-content: space-between;
}

.hp4u-page-nav-item { list-style: none; }
.hp4u-page-nav-item {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.hp4u-page-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--hp4u-letterspacing-default);
  font-weight: var(--hp4u-main-fontweight-bold);
  color: var(--hp4u-main-color-dark);
  outline-offset: 3px;
}

/* arrow before text (brand color) */
.hp4u-page-nav-link::before {
  content: "";
  width: 1.05em;
  height: 0.72em;
  background-color: var(--hp4u-main-accent-color);
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.99 11.71'%3E%3Cpolygon fill='currentColor' points='4.7 11.71 4.7 7.75 5.77 7.75 5.77 10.01 14.5 5.85 5.77 1.7 5.77 6.39 0 6.39 0 5.32 4.7 5.32 4.7 0 16.99 5.85 4.7 11.71'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.99 11.71'%3E%3Cpolygon fill='currentColor' points='4.7 11.71 4.7 7.75 5.77 7.75 5.77 10.01 14.5 5.85 5.77 1.7 5.77 6.39 0 6.39 0 5.32 4.7 5.32 4.7 0 16.99 5.85 4.7 11.71'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
}

/* flip arrow for "previous" */
.hp4u-page-nav-item--prev > .hp4u-page-nav-link::after { transform: scaleX(-1); }
.hp4u-page-nav-item--prev > .hp4u-page-nav-link::before {
  display: none; /* hide the left-side arrow for NEXT */
}

.hp4u-page-nav-item--prev > .hp4u-page-nav-link::after {
  content: "";
  width: 1.05em;
  height: 0.72em;
  background-color: var(--hp4u-main-accent-color);
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.99 11.71'%3E%3Cpolygon fill='currentColor' points='4.7 11.71 4.7 7.75 5.77 7.75 5.77 10.01 14.5 5.85 5.77 1.7 5.77 6.39 0 6.39 0 5.32 4.7 5.32 4.7 0 16.99 5.85 4.7 11.71'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.99 11.71'%3E%3Cpolygon fill='currentColor' points='4.7 11.71 4.7 7.75 5.77 7.75 5.77 10.01 14.5 5.85 5.77 1.7 5.77 6.39 0 6.39 0 5.32 4.7 5.32 4.7 0 16.99 5.85 4.7 11.71'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
}
/* hover/focus (AA-visible) 
.hp4u-page-nav-link:hover { text-decoration: underline; }
.hp4u-page-nav-link:focus-visible {
  outline: 2px solid currentColor;
  text-decoration: underline;
}
*/

/* narrow screens: stack */
@media (max-width: 460px) {
  .hp4u-page-nav-list { flex-direction: column; align-items: stretch; }
  .hp4u-page-nav-link { width: 100%; justify-content: center; }
}

/* OPTIONAL: put prev on the far left and next on the far right of the row */
/*
.hp4u-page-nav--align-left  .hp4u-page-nav-list,
.hp4u-page-nav--align-right .hp4u-page-nav-list {
  justify-content: space-between;
}
*/