/* Shared article navigation, section flow and mobile catalogue components. */

.site-article-flow > section{
  scroll-margin-top:116px;
  padding-top:30px;
}


.site-article-toc{
  min-width:0;
  align-self:stretch;
}
.site-article-toc__inner{
  position:sticky;
  top:116px;
}
.site-article-toc__title{
  margin:0;
  padding:0 0 16px;
  color:var(--site-ink);
  border-bottom:1px solid var(--site-line);
  font-size:18px;
  font-weight:700;
  line-height:1.3;
}
.site-article-toc nav{
  display:grid;
  gap:5px;
  padding-top:14px;
}
.site-article-toc nav a{
  display:block;
  padding:11px 13px;
  color:#4d5b65;
  border-radius:10px;
  font-size:15px;
  font-weight:500;
  line-height:1.45;
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease;
}
.site-article-toc nav a:hover{
  color:var(--site-primary-dark);
  background:var(--site-primary-soft);
}
.site-article-toc nav a[aria-current="location"]{
  color:#fff;
  background:var(--site-primary);
}
.site-article-toc nav a[aria-current="location"]:hover{
  color:#fff;
  background:var(--site-primary-dark);
}
.site-article-toc nav a:focus-visible{
  color:var(--site-primary-dark);
  background:var(--site-primary-soft);
  outline:3px solid rgba(7,135,28,.24);
  outline-offset:2px;
}

/* Mobile article catalogue is generated from the existing desktop table of contents. */
.article-mobile-catalogue{
  display:none;
}
.article-mobile-catalogue__toggle,
.article-mobile-catalogue__panel,
.article-mobile-catalogue__backdrop{
  position:fixed;
}
.article-mobile-catalogue__toggle{
  right:18px;
  bottom:18px;
  z-index:1482;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  min-height:44px;
  padding:9px 14px;
  color:var(--site-ink);
  background:#fff;
  border:1px solid #cfd8dc;
  border-radius:6px;
  box-shadow:0 7px 24px rgba(23,33,43,.12);
  font:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,border-color .2s ease,color .2s ease,visibility .2s ease;
}
.article-mobile-catalogue.is-visible .article-mobile-catalogue__toggle{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.article-mobile-catalogue__toggle:hover,
.article-mobile-catalogue__toggle:focus-visible{
  color:var(--site-primary-dark);
  border-color:rgba(7,135,28,.42);
}
.article-mobile-catalogue__toggle:focus-visible,
.article-mobile-catalogue__close:focus-visible,
.article-mobile-catalogue__nav a:focus-visible{
  outline:3px solid rgba(7,135,28,.22);
  outline-offset:2px;
}
.article-mobile-catalogue__backdrop{
  inset:0;
  z-index:1480;
  background:rgba(10,22,31,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}
.article-mobile-catalogue__panel{
  right:18px;
  bottom:72px;
  z-index:1481;
  width:min(360px,calc(100vw - 36px));
  max-height:min(66vh,520px);
  overflow:hidden;
  color:var(--site-ink);
  background:#fff;
  border:1px solid var(--site-line);
  border-radius:16px;
  box-shadow:0 18px 54px rgba(23,33,43,.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.985);
  transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.article-mobile-catalogue.is-open .article-mobile-catalogue__backdrop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.article-mobile-catalogue.is-open .article-mobile-catalogue__panel{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.article-mobile-catalogue__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:54px;
  padding:10px 12px 10px 18px;
  border-bottom:1px solid var(--site-line);
}
.article-mobile-catalogue__title{
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
}
.article-mobile-catalogue__close{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 auto;
  padding:0;
  color:#53616b;
  background:transparent;
  border:0;
  border-radius:8px;
  font:inherit;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.article-mobile-catalogue__close:hover{
  color:var(--site-ink);
  background:#f3f6f7;
}
.article-mobile-catalogue__nav{
  display:grid;
  gap:4px;
  max-height:calc(min(66vh,520px) - 55px);
  overflow-y:auto;
  padding:10px;
  overscroll-behavior:contain;
}
.article-mobile-catalogue__nav a{
  display:block;
  padding:11px 12px;
  color:#4d5b65;
  border-radius:9px;
  font-size:14px;
  font-weight:500;
  line-height:1.45;
  text-decoration:none;
  transition:color .18s ease,background-color .18s ease;
}
.article-mobile-catalogue__nav a:hover{
  color:var(--site-primary-dark);
  background:var(--site-primary-soft);
}
.article-mobile-catalogue__nav a[aria-current="location"]{
  color:var(--site-primary-dark);
  background:var(--site-primary-soft);
  font-weight:600;
}
body.article-catalogue-open{
  overflow:hidden;
}

@media (max-width:1080px){
  .site-article-flow > section{
    scroll-margin-top:94px;
  }
  .site-article-toc{
    order:initial;
  }
  .site-article-toc__inner{
    position:static;
  }
  .site-article-toc__title,
  .site-article-toc nav{
    display:none;
  }
  body[data-page="blog"] .site-article-toc,
  body[data-page="case-study"] .site-article-toc{
    display:none;
  }
  .article-mobile-catalogue{
    display:block;
  }
}

@media (max-width:640px){
  .site-article-flow > section{
    padding-top:20px;
    scroll-margin-top:86px;
  }
  .article-mobile-catalogue__toggle{
    right:12px;
    bottom:calc(var(--site-contact-dock-total-height) + 12px);
  }
  .article-mobile-catalogue__panel{
    right:12px;
    bottom:calc(var(--site-contact-dock-total-height) + 66px);
    width:calc(100vw - 24px);
    max-height:68vh;
    border-radius:14px;
  }
  .article-mobile-catalogue__nav{
    max-height:calc(68vh - 55px);
  }
}

@media (prefers-reduced-motion:reduce){
  .article-mobile-catalogue__toggle,
  .article-mobile-catalogue__backdrop,
  .article-mobile-catalogue__panel{
    transition:none;
  }
}

@media print{
  .article-mobile-catalogue{
    display:none!important;
  }
}