/* Lightweight blog/article helpers layered on top of /assets/css/br-shared.css */

.skipLink{
  position:absolute;
  left:-9999px;
  top:8px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skipLink:focus{
  left:12px;
  width:auto;
  height:auto;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  z-index:10000;
  text-decoration:none;
}

.sub{
  margin:0 auto;
  color:var(--muted);
  max-width:78ch;
}

.bylineRow,
.metaRow,
.btnRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
}

.bylineRow{
  margin-top:12px;
  color:var(--muted2);
  font-size:12px;
}

.metaRow{
  margin-top:10px;
  color:var(--muted2);
  font-size:12px;
}

.sep{
  opacity:.7;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  text-decoration:none;
}

.heroImg{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  border:1px solid var(--border);
  margin-top:14px;
  background:rgba(255,255,255,.04);
}

.btnRow{
  margin-top:14px;
}

.contentWrap{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:14px;
  align-items:start;
}

.toc{
  position:sticky;
  top:14px;
}

.toc h2{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.1px;
  text-align:left;
}

.toc a{
  display:block;
  padding:8px 10px;
  border-radius:12px;
  color:var(--muted);
  border:1px solid transparent;
  font-size:13px;
  text-decoration:none;
  text-align:left;
}

.toc a:hover{
  border-color:var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-decoration:none;
}

.toc a[aria-current="true"]{
  border-color:rgba(30,86,160,.45);
  background:rgba(30,86,160,.10);
  color:var(--text);
}

.contentWrap article,
.contentWrap article h2,
.contentWrap article h3,
.contentWrap article h4,
.contentWrap article p,
.contentWrap article ul,
.contentWrap article ol,
.contentWrap article li,
.contentWrap article figcaption,
.contentWrap article .callout,
.contentWrap article .takeaways,
.contentWrap article .sources{
  text-align:left;
}

.contentWrap article ul,
.contentWrap article ol{
  padding-left:20px;
  list-style-position:outside;
}

.contentWrap article h2[id],
.contentWrap article h3[id],
.contentWrap article section[id]{
  scroll-margin-top:18px;
}

.contentWrap article h2{
  margin:18px 0 8px;
  font-size:18px;
  letter-spacing:.1px;
}

.contentWrap article h3{
  margin:14px 0 8px;
  font-size:15px;
  color:var(--text);
}

.contentWrap article p{
  margin:0 0 10px;
  color:var(--muted);
}

.contentWrap article li{
  margin:6px 0;
  color:var(--muted);
}

.callout p{
  margin:8px 0 0;
}

figure{
  margin:12px 0 16px;
}

figure img{
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid var(--border);
  display:block;
  background:rgba(255,255,255,.04);
}

figcaption{
  margin-top:8px;
  color:var(--muted2);
  font-size:12px;
}

.takeaways{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:14px;
  margin:14px 0;
  color:var(--muted);
}

.takeaways strong{
  color:var(--text);
}

.takeaways ul{
  margin:8px 0 0;
}

.checklist{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:10px 0 14px;
  list-style:none;
  padding:0;
}

.check{
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  border-radius:16px;
  padding:12px 14px;
}

.check b{
  color:var(--text);
  display:block;
  margin-bottom:4px;
}

.check span{
  color:var(--muted);
  font-size:13px;
}

.sources ul{
  margin-left:18px;
}

.sources a{
  text-decoration:underline;
}

.relatedGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:14px;
}

.relatedGrid .card{
  grid-column: span 6;
  min-height:auto;
  text-align:left;
}

.relatedGrid .card h3,
.relatedGrid .card h4{
  margin:0 0 8px;
  text-align:left;
  justify-content:flex-start;
}

.relatedGrid .card p{
  margin:0 0 10px;
  text-align:left;
}

.relatedGrid .card a{
  text-decoration:underline;
}

@media (max-width: 980px){
  .contentWrap{
    grid-template-columns:1fr;
  }

  .toc{
    position:static;
  }
}

@media (max-width: 860px){
  .relatedGrid .card{
    grid-column:span 12;
  }

  /* Mobile: hide desktop text nav, but KEEP theme icon + burger */
  header.topbar .nav{
    display:none !important;
  }

  header.topbar .themeBtn{
    display:inline-flex !important;
  }

  header.topbar .menuBtn{
    display:inline-flex !important;
  }

  header.topbar{
    grid-template-columns:1fr auto !important;
    grid-template-areas:"brand actions" !important;
  }

  header.topbar .brand{
    grid-area:brand;
    justify-self:start !important;
    min-width:0 !important;
  }

  header.topbar .actions{
    grid-area:actions;
    display:flex !important;
    justify-self:end !important;
    align-items:center !important;
    gap:10px !important;
  }
}