/* Ported from the prototype's old layout/legal.css — the TOC-pill rules only. The rest of
   that file (.legal-header, .legal-content, .legal-table, etc.) stays template-owned
   (docs/PLAN.md §8/§12), not part of this block. template-legal.php renders this block
   directly as its own top-level section, between .legal-header and .legal-content, not
   nested inside either one — matching the prototype's own structure exactly. An earlier
   version of the template left this block inside the page's own content, nested inside
   .legal-content's own container; that was a real bug (narrower white band, wrong spacing
   above/below it, the content list's own li+li margin reaching this list's items too, and
   an inherited line-height making every pill 1px taller than the prototype's), not a style
   choice — see template-legal.php's own comment for the full explanation. */
.legal-toc {
    padding: 32px 0;
    background-color: rgba(var(--white), 1);
}

.legal-toc .legal-toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    max-width: none;
    list-style: none;
}

.legal-toc-list a {
    display: block;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--charcoal), 1);
    text-decoration: none;
    border: 1px solid rgba(var(--terra-green), 0.15);
    border-radius: 999px;
}

.legal-toc-list a:hover,
.legal-toc-list a:focus {
    color: rgba(var(--terra-green), 1);
    text-decoration: none;
    border-color: rgba(var(--terra-green), 0.4);
}

/* sm */
@media (max-width: 575.98px) {
    .legal-toc {
        padding: 24px 0;
    }
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end —
   see the full comment on .wp-block-tt360-section in components/section.css. tt360/legal-toc
   sits at the root level of a page's content (it owns its own background/padding directly,
   unlike tt360/testimonial etc.), so it's reached by Gutenberg's own root-container
   constraint, the same situation as tt360/section/hero/closing-band/role-showcase. This
   block has no competing max-width of its own, so it needs "none" restated, not a real
   value. */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-legal-toc {
    max-width: none;
}