/* ============================================================
   help-article.css — article page right sidebar + print styles.

   Loaded AFTER help.css (via the article template's extra_css block) so its
   rules win where they intentionally override the base article layout. ALL
   values are driven by the help.css design tokens (--card, --line, --ink*,
   --brand, --accent, --r-*, --fs-*, --content, --e-*) so the sidebar themes
   correctly in light AND dark across every base template (branding.HELP_TEMPLATES).

   Nothing here is duplicated from help.css — help.css owns .hc-article,
   .hc-list, .hc-helpful etc.; this file only adds the layout wrapper, the
   sidebar (.hc-aside*), the print helpers, and the @media print rules.
   ============================================================ */

/* ---- Mobile-first: single column. The aside stacks BELOW the article body,
   preserving the "related links at the bottom" placement on small screens. -- */
.hc-aside{
  max-width:860px;
  margin:0 auto;
  padding:0 28px 28px;
}
.hc-aside-block + .hc-aside-block{margin-top:16px;}

/* Sidebar block cards — token-driven surfaces so they read coherently in every
   template + colour scheme. */
.hc-aside-block{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:16px 18px;
  box-shadow:var(--e-1);
}
.hc-aside-h{
  font-size:var(--fs-caption);
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:700;
  margin:0 0 8px;
}
.hc-aside .hc-list{margin-top:0;}
.hc-aside .hc-list-item{padding:11px 2px;}

/* Print block + button */
.hc-aside-print{padding:12px;}
.hc-print-btn{
  width:100%;
  justify-content:center;
  gap:8px;
}
.hc-print-btn .icon{width:1.05em;height:1.05em;}

/* Source URL — only rendered on the printed page (see @media print). */
.hc-print-url{display:none;}

/* ---- Desktop (>=1024px): two-column grid, sticky sidebar. ---- */
@media (min-width:1024px){
  .hc-article-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:40px;
    align-items:start;
    max-width:var(--content);
    margin:0 auto;
    padding:32px 28px 8px;
  }
  /* The article now lives in the grid cell, so drop help.css's own centering
     (max-width:860px; margin:0 auto; padding) — the layout owns spacing. */
  .hc-article-layout > .hc-article{
    max-width:none;
    margin:0;
    padding:0;
    min-width:0; /* allow the column to shrink so long content never overflows */
  }
  .hc-article-layout > .hc-aside{
    max-width:none;
    margin:0;
    padding:0;
    position:sticky;
    top:24px; /* clear of the (non-sticky) header */
  }
}

/* ============================================================
   PRINT — clean, black-on-white, full-width article only.
   ============================================================ */
@media print{
  /* Hide all chrome: header (nav + search + theme toggle), footer, contact CTA,
     the sidebar (print button / section / related), the feedback widget and any
     flash messages. */
  .hc-header,
  .hc-footer,
  .hc-cta-wrap,
  .hc-aside,
  .hc-helpful,
  .hc-flashes,
  .hc-theme-btn{display:none !important;}

  html,body{background:#fff !important;color:#000 !important;}

  /* Collapse the layout and let the article expand to the full page width. */
  .hc-main{width:auto !important;}
  .hc-article-layout{
    display:block !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  .hc-article-layout > .hc-article,
  .hc-article{
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Body copy: black text, full width (help.css caps children at 66ch). */
  .hc-article .hc-body,
  .hc-article .hc-body *{color:#000 !important;}
  .hc-body > *{max-width:none !important;}
  .hc-body img{max-width:100% !important;height:auto !important;}

  .hc-page-head h1,
  .hc-crumb,
  .hc-crumb *{color:#000 !important;}
  a{color:#000 !important;text-decoration:underline;}

  /* Show the source URL under the title on the paper copy. */
  .hc-print-url{
    display:block !important;
    margin-top:8px;
    color:#000 !important;
    font-size:12px;
    word-break:break-all;
  }

  @page{margin:1.5cm;}
}
