/* Shared legal page styling (Terms + Privacy) */
main.container{
justify-content: normal;
}

/* Keep content top-aligned and scrollable */
.legal-main { justify-content: flex-start; }


.legal-hero {
  /* base box styles (yours) */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 4px var(--shadow);
  margin: var(--gap) 0;
  color: white;

  /* background stack:
     1) a very subtle white wash to soften the pattern
     2) the triangle texture svg
     3) a solid brand color fallback (acts like your old background) */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10)),
    url("/icons/legal_bg.svg"),
    linear-gradient(0deg, var(--primary), var(--primary));
  background-size: auto, cover, auto;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}


h1{
    color: white;
}

/* Two-column layout with sticky TOC */
.legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }

.legal-toc { position: sticky; top: 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: 0 2px 4px var(--shadow); }
.legal-toc .toc-title { font-size: 1rem; margin-bottom: 0.5rem; color: var(--secondary); }
.legal-toc ol { margin: 0; padding-left: 1.1rem; }
.legal-toc a { text-decoration: none; color: var(--secondary); }
.legal-toc a:hover { color: var(--fg); }

/* Content card */
.legal-content { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 6px var(--shadow); padding: 1.25rem 1.5rem; }
.legal-content h2 { margin: 1.25rem 0 0.5rem; }
.legal-content p, .legal-content ul { margin-bottom: 1rem; }

/* Callouts */
.legal-callout { border-left: 4px solid var(--primary); background: rgba(90,235,204,0.08); padding: 0.75rem 1rem; border-radius: var(--radius); }
.legal-callout.warn { border-left-color: #cf3d3d; background: rgba(207,61,61,0.08); }
.legal-callout.info { border-left-color: var(--primary); }

.legal-disclaimer { color: var(--light-text); font-size: 0.9rem; margin-top: 1.5rem; }

/* Responsive */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: relative; top: auto; }
}