/* Scoped styles for the shallow foundations page */
.sf-page{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  align-items:start;
}
@media (max-width: 960px){
  .sf-page{ grid-template-columns: 1fr; }
  .sf-toc{ position: static; }
}

.sf-toc{ position: sticky; top: 1rem; }
.sf-card{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.sf-card h4{ margin: .1rem 0 .4rem; }

.sf-card--toc h3{ margin: 0 0 .5rem; font-size: 1rem; }
.sf-card--toc nav{ display: grid; gap: .35rem; }
.sf-card--toc nav a{
  color: #1b4d8a; text-decoration: none; font-size: .95rem;
  border-left: 2px solid transparent; padding-left: .5rem;
}
.sf-card--toc nav a.active{ border-left-color:#1b4d8a; font-weight:600; }

.sf-card--refs h3{ font-size: .95rem; margin-top: .8rem; }
.sf-card--refs code{ background:#f6f8fa; padding:.08rem .35rem; border-radius:6px; }

.sf-hero h1{ margin: 0 0 .4rem; font-size: 2rem; }
.sf-hero .lead{ color:#444; max-width: 70ch; }

.sf-grid-3{
  display:grid; gap: .8rem; grid-template-columns: repeat(3,1fr); margin-top: .9rem;
}
.sf-grid-2{ display:grid; gap: .9rem; grid-template-columns: repeat(2,1fr); }
@media (max-width: 960px){
  .sf-grid-3{ grid-template-columns: 1fr; }
  .sf-grid-2{ grid-template-columns: 1fr; }
}

.sf-section{ margin-top: 2rem; }
.sf-list{ padding-left: 1.1rem; }
.sf-list li{ margin: .35rem 0; }

.sf-meta{ color:#666; font-size:.9rem; margin-top:.35rem; }

.sf-callout{
  border-radius: 10px; padding: .8rem 1rem; border: 1px solid;
  margin-top: .7rem;
}
.sf-callout--info{ background: #f4f8ff; border-color:#cfe2ff; }
.sf-callout--warn{ background: #fff8f0; border-color:#fde2c5; }

.sf-accordion{
  border:1px solid #e6e6e6; border-radius: 10px; margin:.6rem 0; background:#fff;
}
.sf-accordion > summary{
  cursor:pointer; list-style:none; padding:.8rem 1rem; font-weight:600;
}
.sf-accordion__body{ padding: .2rem 1rem 1rem; }

.sf-table-wrap{ overflow:auto; }
.sf-table{
  width:100%; border-collapse:collapse; background:#fff; border:1px solid #e6e6e6; border-radius:10px;
}
.sf-table th, .sf-table td{ padding:.6rem .7rem; border-top:1px solid #eee; text-align:left; }
.sf-table thead th{ background:#007bff; border-top:none; }

.sf-steps{ counter-reset: step; padding-left:1rem; }
.sf-steps > li{ margin:.45rem 0; }
.sf-steps > li:before{
  counter-increment: step; content: counter(step) ". ";
  font-weight:700; margin-right: .2rem;
}

.sf-note{ color:#666; font-size:.92rem; }

.sf-footnote{
  margin: 2.5rem 0 0; padding-top: 1.2rem; border-top:1px dashed #e2e2e2; color:#666; font-size:.9rem;
}