#content{
    overflow: hidden; 
}
  .progress-nav{
    /* --ehu-opm-bg / --ehu-opm-text are set inline by ehu-on-page-menu.php when a brand colour
       is chosen in the editor; the fallbacks are the original purple-and-white scheme. */
    background-color:var(--ehu-opm-bg, var(--ehu-colors-primary));
    justify-content:space-around;
    padding:10px;
    position:sticky;
    top:0;
    z-index:100;
    /* No margin of its own: the space around the bar comes from the Spacing sliders in the
       editor (has-ehu-margin-* classes, block-margin.css), so None there really means none. */
    margin:0;
}
  /* Layout: container > wrapper > [prev arrow] [scrolling link row] [next arrow]. Every level
     is a block-level flex box that fills the bar, so a long menu never pushes the arrows out
     of view: the link row is the only part allowed to shrink, and it scrolls sideways (the
     script centres the current page in it). The arrows never shrink. */
  .progress-nav .nav-links-container{
    max-width:95%;
    width:100%;
    margin:0 auto;
    padding:0;
    display:flex;
    align-items:center;
}
  .progress-nav .nav-links-wrapper{
  display:flex;
  align-items:center;
  padding:10px 0;
  width:100%;
  min-width:0;
}
  .progress-nav .nav-links-scroll{
    flex:1 1 auto;
    min-width:0; /* lets a flex item shrink below its content width, which is what makes it scroll */
    display:flex;
    align-items:center;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch; /* For smooth scrolling on iOS */
    scrollbar-width:none; /* For Firefox */
    -ms-overflow-style:none; /* For Internet Explorer and Edge */
}
  /* Centre the links when they fit, left-align when they overflow. justify-content:center
     would put the start of an overflowing row out of reach of scrolling; auto margins on the
     ends do not. */
  .progress-nav .nav-links-scroll > :first-child{
    margin-left:auto;
}
  .progress-nav .nav-links-scroll > :last-child{
    margin-right:auto;
}
  .progress-nav .nav-link.prev-arrow,
  .progress-nav .nav-link.next-arrow{
    flex-shrink:0;
}
  .progress-nav .nav-links-scroll::-webkit-scrollbar {
    display: none; /* For WebKit browsers (Chrome, Safari) */
}
  .progress-nav .nav-links-scroll a{
    /* --ehu-opm-gap is set inline by ehu-on-page-menu.php from the Link spacing slider; it is
       the space each side of a link, so the gap between two links is double it. */
    margin:0 var(--ehu-opm-gap, 2rem);
}
  .progress-nav .nav-link{
    display:inline-block;
    color:var(--ehu-opm-text, white);
    /* --ehu-opm-weight is set inline by ehu-on-page-menu.php when a link weight is chosen in
       the editor; otherwise the links keep the page's weight. */
    font-weight:var(--ehu-opm-weight, inherit);
    text-decoration:none;
    padding:5px 10px;
}
  .progress-nav .nav-link:focus {
    background-color:var(--ehu-colors-heritage-yellow);
    color:var(--ehu-colors-primary);
    outline: 0;
    border-radius: 2rem;
}
  .nav-link.prev-arrow{
    color:var(--ehu-opm-text, #ffffff);
}
  .nav-link.prev-arrow i:focus{
    color:var(--ehu-colors-heritage-yellow);
    padding:0;
    margin:0;
}
  .nav-link.prev-arrow i{
    padding:0;
}
  .nav-link.next-arrow i{
    padding:0;
}
  .nav-link.next-arrow i:focus{
    color:var(--ehu-colors-heritage-yellow);
    padding:0;
    margin:0;
    border-radius: 0;
    outline:0;
    text-decoration: none;
}
  .prev-arrow:hover {
    cursor: pointer;
}
  .progress-nav .nav-link.current{
    /* Inverted pill: text colour behind, background colour on the text. */
    background-color:var(--ehu-opm-text, white);
    color:var(--ehu-opm-bg, var(--ehu-colors-primary));
    border-radius:2rem;
    /* A chosen weight applies here too; the pill stays distinct by its inverted colours. */
    font-weight:var(--ehu-opm-weight, 700);
}
  .progress-nav .nav-link.disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
  @media screen and (min-width:1700px) {
    .progress-nav .nav-links-container{
      max-width:100%;
    }
}
  @media only screen and (max-width: 492px) {
  /* For mobile: */
    .progress-nav .nav-links-container{
      max-width:100%;
    }
    .progress-nav .nav-links-scroll a{
      margin:0 var(--ehu-opm-gap, 0.75rem);
    }
}