/* ===============================
   ARTICLE PAGE — DOCUMENT SCROLL
   Standalone article pages (/docs/<article>/) have no SPA shell.
   global.css locks html/body scrolling for the panel system, so here
   the body itself becomes the scroll container.
   =============================== */

body.article-standalone {
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--bg-page);
}

/* ===============================
   ARTICLE PAGE — SITE BAR
   Slim branded bar linking back to the main site.
   =============================== */

#article-page .article-sitebar {
  padding: 12px 10%;
  background: var(--bg-sidebar);
}

#article-page .article-sitebar .logo-text {
  font-size: 34px;
  text-decoration: none;
}

/* ===============================
   ARTICLE PAGE — PAGE HEADER
   Mirrors the Insights page header (#insights .pageheader).
   =============================== */

#article-page .pageheader {
  background-image: url(../img/insight.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 190px 0 35px 0;
}

#article-page .pageheader .title {
  color: #fff;
  border: none;
}

/* ===============================
   ARTICLE PAGE — CONTENT SECTION
   .page .section padding does not apply outside the SPA shell.
   =============================== */

#article-page .section {
  padding: 50px 0 70px 0;
  position: relative;
}

/* Bottom triangle — bridges color-2 content into the footer (color-1),
   same divider used on all site pages */
#article-page .pagecontents {
  position: relative;
}

#article-page .pagecontents:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border: solid transparent;
  border-color: var(--bg-color-1);
  border-top-color: var(--bg-page);
  border-width: 30px;
  left: 50%;
  margin-left: -30px;
  top: auto;
  z-index: 1;
}

/* ===============================
   ARTICLE PAGE — FOOTER
   =============================== */

#article-page .article-footer {
  padding: 55px 10% 25px 10%;
  background: var(--bg-color-1);
  font-size: 14px;
}

#article-page .article-footer p {
  margin: 0 0 8px 0;
}

#article-page .article-footer a {
  color: var(--accent);
}

/* ===============================
   MEDIA QUERIES — largest first
   =============================== */

/* Mobile */
@media (max-width: 767px) {
  #article-page .article-sitebar,
  #article-page .article-footer {
    padding-left: 3%;
    padding-right: 3%;
  }

  #article-page .pageheader {
    padding: 120px 0 25px 0;
  }
}