:root {
  --box-shade-light: #dee;
  --box-blue: #215f9a;
  --box-orange: #99ff55;
  --box-newsletter:#90390e;
  --box-open-access:#256116;
  --box-meet-us:purple;
  --geel: #fdb813;
  --font-size: 10.5pt;
}
body {
  font-size:var(--font-size);
}
.page {
  width: 100%;
  /* avoid abundant whitespace above first heading */
  & > div:first-child {
    margin-top: 1.2em;
  }
}

p.flush-right {
  text-align:right;
}


/* reduce leading whitespace in shaded boxes */
#publish-with-jb h2,
.box h2,
.info-box h2 {
  padding-top:0;
}


#home-top-block {
  display: flex;
  flex-direction: row;
  flex: 2 1 auto;
  justify-content: space-between;
  & > * {
    margin: -1em 0 1em;
    padding: 1em;
    
    text-align: left;
    border-radius: .25em;
  }
  & > *:first-child {
    margin-left:0;
  }
  & h2 {
    color: var(--jb-blauw);
    font-size:1.3em;
  }
}
#publish-with-jb {
  background-color: var(--box-shade-light);
  max-width:25em;
}

.link-boxes {
  display:flex;
  gap: 2.5%;
  justify-content:space-between;
  flex-flow: row wrap;
  & .box {
    margin: .66em 0 1em;
    padding: 1em;
    text-align: left;
    border-radius: .25em;
    flex: 2 1 0;
    min-width:15em;
  }
} 
#link-boxes {
  & .box {
    background-color:var(--box-blue);
  }
  & h2
  , a {
    color: white;
    letter-spacing:.035em;
  }
  & a {
    font-weight:normal;
  }
  & ul {
    margin-block-start: 0;
    padding-inline-start:1em;
    }
  & li::marker {
    color:#dee;
    font-weight:bold;
  }  
  & li {
    margin-bottom:0;
    padding-bottom:0;
    font-size:1.05em;
    & p {
      margin:0;
      padding:0;
    }
  }
  .jbe-logo {
    display:inline-block;
    float:right;
    margin-left:.5em;
    padding:0 .2em;
    border-radius:.25em;
    background-color:white;
  }
  .jbe-logo img {
    position:relative;
    top:.2em;
  }
}

#general .link-boxes .box {
  background-color:#def;
}

/* CAROUSEL SECTION */
/* highlighted section, other carousel lists */
#highlighted > h2,
#latest-titles > h2,
#new-journals > h2
{
  padding-bottom:1.5em;
  font-size:1.4rem;
}
.scroll-layout {
  display:grid;
  grid-template-areas: 
      "scroll scroll scroll"
      "left markers right";
  grid-template-columns: auto 1fr auto;
  }
  
.carousel {
  grid-area: scroll;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  height:19em;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color:var(--geel) white;
  scroll-marker-group: after;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }  

  &::scroll-button(left) {
    content: url('online/resources/images/go-left.svg') / "Scroll Left";
    grid-area:left;
  }
  
  &::scroll-button(right) {
    content: url('online/resources/images/go-right.svg') / "Scroll Right";
    grid-area:right;
  }
  
  &::scroll-marker-group {
    grid-area: markers; /* place markers in parent grid area */
    
    display: grid;
    place-content: safe center;
    grid: 1.5rem / auto-flow 1.5rem;
    gap: 1em;
    padding: 1em;
    scroll-padding: 1em;
    
    /* handle overflow */
    overflow: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
  &::scroll-button(*) {
    /* make them round and easy to press */
    inline-size: 3.5em;
    aspect-ratio: 1;
    border-radius: 50%;
    border: .1em solid #ddd;
    
    margin: 5px;
  }
  &::scroll-button(*):hover {
  background: var(--geel);
  }
  &::scroll-button(*):disabled {
    border: .1em solid transparent;
    opacity:1;
    content:" ";
    background: transparent;
    transition:all .3s;
  }
  &::scroll-button(*):enabled {
    transition:all .3s;
  }
  &::scroll-button(*):disabled:hover {
  }
  & > .content
  {
    display: grid;
    grid: 82% / auto-flow 45%;
    gap: 1em;
    padding: 0;
    margin: 0;
    
    > .list-item {
    border-radius:.25em;
    grid-column-gap:.5em;
    }
  }
  & .list-item {
      scroll-snap-align: start;
      padding-top:1em;
      grid-template-areas:
        "image text"
        "image misc";
      grid-template-rows: 14.5em 1fr;
      grid-template-columns: var(--list-image-width) auto;
      grid-row-gap:.25em;
      & .text {
        max-height:100%;
      }
      &::scroll-marker {
        content: ' ';
        background:#eee;
        border-radius:50%;
      }
      &::scroll-marker:target-current {
        background-color: var(--geel);
      }
      & + .list-item {
        margin-top:0;
      }
      & h3.author {
        font-size:1rem;
      }
      & h3.title, h3.subtitle {
        font-size:1.1rem;
      }
      & h3.title .subtitle {
       font-size:.9em;
       line-height:auto;
      }
      & .highlight-type, 
      & .pub-date {
        grid-area: misc;
        text-transform:uppercase;
        letter-spacing:.1em;
        font-size:.9rem;
        text-decoration:solid 1em #def;
      }
  }
}

#highlighted,
#latest-titles {
  .abstract,
  .bkdetails,
  .details
  {
    display:none;
  }
  & .list-item .text {
    position:relative;
    top:-.5em;
    overflow-y:auto;
  }
}
.list-item .text {
  height: 17.5em;
}

#new-journals {
  & .content {
    grid: 80% / auto-flow 47%;
  }
/*  & .list-item {
    grid-template-columns : 175px auto;
  }
*/  & ::scroll-marker,
   ::scroll-marker-group,
   ::scroll-button(*):disabled {
    display:none;
  }
}

/* Overlay left/right scrolling arrows for browsers that do not support ::scroll-marker */
@supports not selector(::scroll-marker) {
  .scroll-layout {
    position: relative;
    & .carousel-prev , & .carousel-next {
      position: absolute;
      top: 42%;
      z-index: 2;
      inline-size: 3.5em;
      aspect-ratio: 1;
      border-radius: 50%;
      border: .1em solid #ddd;
      background-color: buttonface;
      opacity: 0.7;
      &:hover {
        background-color: var(--geel);
        opacity: 1.0;
      }
    }
    & .carousel-prev {
      left: -1.5em;
    }
    & .carousel-next {
      right: -2.2em;
    }
  }
}
@supports selector(::scroll-marker) {
  .scroll-layout {
    & .carousel-prev {
      display: none;
    }
    & .carousel-next {
      display: none;
    }
  }
}

.image-container {
  height:100%;
}

/* INFO BOXES */
.info-box {
  margin: 3em 0 1em;
  padding: 1em;
  padding-right:2em;
  border-radius:.25em;
  display:grid;
  grid-template-rows:2em 1fr;
  grid-template-columns: 1fr 15%;
  grid-template-areas: 
  "heading image"
  "text image";
  h2, 
  a, 
  p {
    color:white;
    padding-top:0;
  }
  & h2 {
    grid-area:heading;
  }
  & a {
    grid-area:image;
    text-align:right;
    & img {
      margin:0 1em;
      width: 100%;
      position:relative;
    }
  }
  & p {
    grid-area:text;
    margin-top:0;
  }
}
#open-access {
    background-color:var(--box-open-access);
    & img {
        width:50%;
    }
}
#newsletter {
    background-color:var(--box-newsletter);
    grid-column-gap:2em;
    & a img {
        margin-top:-3em;
        right:1em;
        transform:scale(120%);
        margin-bottom:-4em;
    }
    & .title-logo
    {
     top:-4em;
    }
}
#meet-us {
    background-color:var(--box-meet-us);
    & a img {
        margin: -8% 0em -15% .5em;
    }
}
  
@media screen and (max-width: 900px) {
  .carousel {
    height: 15em;
    & .list-item {
        grid-template-rows: 10em 1fr;
    }
  }
}

@media screen and (max-width: 850px) {
  :root{
    --font-size:9.5pt;
  }
  main {
      padding: 3em 2vw;
  }
  #link-boxes {
    justify-content:start;
  }
  #meet-us {
    grid-template-columns: 1fr 20%;
  }
  .list-item .text {
    max-height: 12.5em;
  }
  #new-journals {
    & .content {
      grid: 70% / auto-flow 47%;
    }
}
@media screen and (min-width:800px) {
  .link-boxes .box {
    padding: 1em 3%;
  }
}
@media screen and (max-width: 750px) {
  main {
    padding-top:1em;
  }
  #home-top-block {
    display:block;
  }
  #publish-with-jb {
    max-width:max-content;
  }
  .carousel {
    height: 13em;
    & .list-item {
      grid-template-rows: 8.75em 1fr;
    }
  }
  .carousel .content,
  #new-journals .content {
    grid: 90% / auto-flow 90%;
  }

}