/* wm-plugins preview — tmp-blog-sidebar @ 4bc2bf5b1e53 — 2026-09-21T15:35:02.041Z */
/* Blog Sidebar prototype | Will Myers */
[data-wm-sidebar-layout] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--wm-bs-sidebar-width, 28%));
  column-gap: var(--wm-bs-gap, 3rem);
  align-items: start;
  max-width: var(--wm-bs-blog-width, 1200px);
  margin-inline: auto;
}
[data-wm-sidebar-layout] > :not([data-wm-plugin="blog-sidebar-panel"]) { grid-column: 1; min-width: 0; width: 100%; }
[data-wm-sidebar-layout] > .blog-item-content-wrapper { margin: 0; }
[data-wm-plugin="blog-sidebar-panel"] {
  grid-column: 2;
  grid-row: 1 / span 20;
  align-self: stretch;
  min-width: 0;
  color: var(--wm-bs-color, var(--paragraphMediumColor, inherit));
  background: var(--wm-bs-background, transparent);
}
[data-wm-plugin="blog-sidebar-panel"] > .wm-bs-inner { display: flow-root; }
[data-wm-plugin="blog-sidebar-panel"][data-sticky="true"] > .wm-bs-inner {
  position: sticky;
  top: calc(var(--wm-bs-header-bottom, 0px) + var(--wm-bs-top-gap, 1.5rem));
  max-height: calc(100dvh - var(--wm-bs-header-bottom, 0px) - var(--wm-bs-top-gap, 1.5rem) - 1rem);
  overflow: auto;
}
[data-wm-plugin="blog-sidebar-panel"] .sqs-block { box-sizing: border-box; max-width: 100%; }
[data-wm-plugin="table-of-contents"] .contents-list { list-style: none; padding: 0; margin: 0; }
[data-wm-plugin="table-of-contents"] .contents-list li { margin: var(--wm-bs-toc-spacing, .6em) 0; }
[data-wm-plugin="table-of-contents"] .toc-link { color: var(--wm-bs-link-color, var(--paragraphLinkColor, inherit)); text-decoration: none; overflow-wrap: anywhere; }
[data-wm-plugin="table-of-contents"] .toc-link:hover { text-decoration: underline; }
[data-wm-plugin="table-of-contents"] .toc-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[data-wm-toc-anchor] { display: block; scroll-margin-top: var(--wm-bs-anchor-offset, 120px); }
@media (max-width: 767px) {
  [data-wm-sidebar-layout] { display: block; max-width: 100%; }
  [data-wm-plugin="blog-sidebar-panel"] { display: block; margin-top: var(--wm-bs-mobile-gap, 2rem); }
  [data-wm-plugin="blog-sidebar-panel"][data-sticky="true"] > .wm-bs-inner { position: static; max-height: none; overflow: visible; }
}

/* Approved Toolkit sponsor. Fixed brand colors are intentional. */
.sidebar-sponsor[data-wm-plugin="blog-sponsor"] {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: var(--wm-bs-sponsor-gap, 28px) !important;
  font-family: inherit;
  text-align: left;
  color: #ececf0;
}
[data-wm-plugin="blog-sponsor"], [data-wm-plugin="blog-sponsor"] * { box-sizing: border-box; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-card {
  display: block;
  overflow: hidden;
  border: 1px solid #ffffff21;
  border-radius: var(--wm-bs-sponsor-radius, 8px);
  background: var(--wm-bs-sponsor-background, #14161b);
  color: #f2f2f4;
  text-decoration: none !important;
}
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-card:focus-visible { outline: 2px solid #df99f2; outline-offset: 4px; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-card:hover { border-color: #cc62ea80; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-card:hover .wm-bs-sponsor-panel-footer { background: #cc62ea20; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-intro { padding: 20px 17px 18px; }
[data-wm-plugin="blog-sponsor"] h3 {
  padding: 0;
  margin: 0 !important;
  font-family: inherit;
  color: #f2f2f5;
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.035em;
}
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-gradient { background: linear-gradient(100deg, #cc62ea, #e467c5); background-clip: text; -webkit-background-clip: text; color: transparent; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-intro p { padding: 0; margin: 13px 0 0 !important; font-size: 12px; line-height: 1.65; color: #acafba; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-features { padding: 0 12px 8px; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-feature { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; padding: 13px 0; color: #d9d9e0; border-top: 1px solid #ffffff13; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-icon { display: grid; place-items: center; width: 25px; height: 28px; color: #d990ef; font: 14px/1 ui-monospace, monospace; white-space: nowrap; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-features strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-features small { display: block; margin-top: 3px; font-size: 11px; color: #a6a8b3; line-height: 1.4; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-panel-footer { display: flex; gap: 8px; align-items: center; padding: 12px 14px; background: #cc62ea12; border-top: 1px solid #cc62ea22; font-size: 11px; color: #e4d1e9; font-weight: 550; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(130deg, #cc62ea, #e467c5); color: #17131c; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: 0; text-indent: 0; }
[data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-footer-arrow { flex: none; margin-left: auto; color: #dfa4ef; }
/* The existing WMArticlesBlog.css uses an inclusive 768px breakpoint. */
@media (max-width: 768px) {
  .desktop-nav-container[data-wm-bs-sponsored] {
    display: block !important;
    position: static !important;
    grid-row: auto !important;
    grid-column: 1 !important;
    order: 1;
    width: 100% !important;
    max-width: none !important;
    margin: var(--wm-bs-sponsor-mobile-gap, 32px) 0 0 !important;
    padding: 0 !important;
    border-left: 0 !important;
  }
  [data-wm-bs-sponsored] .blog-anchor-nav { display: none !important; }
  [data-wm-bs-sponsored] .sidebar-sponsor[data-wm-plugin="blog-sponsor"] { margin-top: 0 !important; }
  [data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-features strong { font-size: 14px; }
  [data-wm-plugin="blog-sponsor"] .wm-bs-sponsor-features small { font-size: 12px; }
}