/* =========================
   Style Guide helpers
   ========================= */
   
/* Allow styleguide sandbox to exceed editorial canvas if desired */
.sg-sandbox {
  max-width: none;
}

/* If Tarapro is still boxing the inner content area, let the sandbox breathe */
.sg-sandbox .z-pattern,
.sg-sandbox .sg-section {
  max-width: none;
}
   
.sg-section {
  margin-bottom: 2.5rem;
  padding: 0;
}

/* Inline → class: border-bottom + spacing */
.sg-section--border-bottom {
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

/* Inline → class: muted grey background + padding */
.sg-section--muted {
  background-color: #f0f0f0;
  padding: 20px;
}

/* Inline → class: top border + spacing */
.sg-section--top-accent {
  border-top: 3px solid #1D9A44;
  margin-top: 50px;
  padding-top: 20px;
}

/* Inline → class: card-ish section */
.sg-section--panel {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
}

/* Centered section headings / helper text */
.sg-center {
  text-align: center;
}

/* Z-pattern placeholder images */
.sg-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

/* Two shades used in your markup */
.sg-image-placeholder--light {
  background-color: #ccc;
}

.sg-image-placeholder--dark {
  background-color: #bbb;
}

/* Palette swatches */
.sg-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sg-swatch {
  width: 100px;
  text-align: center;
}

.sg-swatch-box {
  height: 60px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: transparent; /* you’ll later bind to CSS vars */
}

/* Button samples layout */
.sg-button-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* =========================
   Palette swatches bound to theme tokens
   ========================= */

/* Fallbacks included so you still see color if a token is missing. */
.sg-swatch-box--navy {
  background: var(--dark, #2c3245);
}

.sg-swatch-box--green {
  background: var(--color-secondary, #53a063);
}

/* You don't currently have an amber token in :root.
   We'll bind to --cta-accent if you add it; otherwise fall back to a sane amber. */
.sg-swatch-box--amber {
  background: var(--cta-accent, #f0b429);
}

/* =========================
   Typography Stress Test helpers
   ========================= */

.sg-section--panel blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--border, #d1d8df);
  background: rgba(0, 0, 0, 0.02);
}

.sg-section--panel blockquote p {
  margin: 0 0 0.5rem 0;
}

.sg-section--panel blockquote cite {
  display: block;
  font-style: normal;
  opacity: 0.8;
}

.sg-section--panel code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--border, #d1d8df);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.95em;
}