/* ══════════════════════════════════════════════════════════════════════════
   The legal pages (app/Views/_Shared/legal/) on every public site: the
   policies, Your privacy rights, the newsletter page. Scoped to .erp-legal so
   it sits inside any template; it takes the template's font and text colour
   and draws its lines and fills from currentColor, so it reads on light and
   dark sites alike. Spacing on a 4px scale; line length capped for reading.
   ══════════════════════════════════════════════════════════════════════════ */
/* the tokens are also on a form or callout used outside a legal page (the newsletter form on a home page) */
.erp-legal, .erp-legal-form, .erp-legal-callout {
    --el-line: color-mix(in srgb, currentColor 22%, transparent);
    --el-soft: color-mix(in srgb, currentColor 5%, transparent);
    --el-muted: color-mix(in srgb, currentColor 78%, transparent);
    --el-focus: #0054a6;
    --el-ok: #1b6e3c;
    --el-warn: #8a5300;
}
.erp-legal {
    box-sizing: border-box;
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 16px 64px;
    font-size: 16px;
    line-height: 1.65;
}
[data-bs-theme="dark"] .erp-legal, [data-theme="dark"] .erp-legal { --el-focus: #8ab8ff; --el-ok: #7fd8a1; --el-warn: #ffc56b; }
.erp-legal *, .erp-legal *::before, .erp-legal *::after { box-sizing: border-box; }
.erp-legal :focus-visible { outline: 3px solid var(--el-focus); outline-offset: 2px; border-radius: 2px; }

.erp-legal-head { margin-bottom: 24px; }
.erp-legal-crumb { font-size: 14px; color: var(--el-muted); margin-bottom: 8px; }
.erp-legal-crumb a { color: inherit; }
.erp-legal-title { margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); line-height: 1.2; }
.erp-legal-meta { margin: 0; font-size: 14px; color: var(--el-muted); }

.erp-legal-body { max-width: 72ch; }
.erp-legal-body section { margin-bottom: 32px; scroll-margin-top: 96px; }
.erp-legal-body h2 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
.erp-legal-body p, .erp-legal-body ul, .erp-legal-body ol { margin: 0 0 12px; }
.erp-legal-body ul, .erp-legal-body ol { padding-left: 24px; }
.erp-legal-body li { margin-bottom: 6px; }
.erp-legal-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.erp-legal-points li::marker { font-weight: 700; }

.erp-legal-toc { margin: 0 0 32px; padding: 16px 20px; border: 1px solid var(--el-line); border-radius: 10px; background: var(--el-soft); max-width: 72ch; }
.erp-legal-toc__title { font-size: 16px; margin: 0 0 8px; }
.erp-legal-toc ol { columns: 2 220px; margin: 0; padding-left: 20px; }
.erp-legal-toc li { margin-bottom: 4px; break-inside: avoid; }
.erp-legal-toc a { color: inherit; }

.erp-legal-facts { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 16px; margin: 12px 0; }
.erp-legal-facts dt { font-weight: 600; }
.erp-legal-facts dd { margin: 0; }
@media (max-width: 560px) { .erp-legal-facts { grid-template-columns: 1fr; } .erp-legal-facts dd { margin-bottom: 8px; } }

/* tables scroll inside their own box on a phone; the page never scrolls sideways */
.erp-legal-table-wrap { overflow-x: auto; margin: 12px 0 16px; border: 1px solid var(--el-line); border-radius: 10px; }
.erp-legal-table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.erp-legal-table-wrap th, .erp-legal-table-wrap td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--el-line); }
.erp-legal-table-wrap thead th { background: var(--el-soft); font-weight: 600; }
.erp-legal-table-wrap tbody tr:last-child > * { border-bottom: 0; }
.erp-legal-table-wrap tr.is-off { color: var(--el-muted); }
.erp-legal-table-wrap code { font-size: 14px; word-break: break-word; }
.erp-legal-tag { display: inline-block; margin-top: 4px; padding: 1px 8px; border: 1px solid var(--el-line); border-radius: 999px; font-size: 12px; }

.erp-legal-missing { background: #fff3bf; color: #3d2e00; padding: 0 4px; border-radius: 3px; border: 1px dashed #8a5300; }

.erp-legal-callout { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 24px; padding: 16px; border: 1px solid var(--el-line); border-left-width: 4px; border-radius: 10px; background: var(--el-soft); max-width: 72ch; }
.erp-legal-callout svg { flex: none; margin-top: 2px; }
.erp-legal-callout p { margin: 0 0 8px; }
.erp-legal-callout p:last-child, .erp-legal-callout ul:last-child { margin-bottom: 0; }
.erp-legal-callout__title { font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.erp-legal-callout--prepared { border-left-color: var(--el-focus); }
.erp-legal-callout--draft, .erp-legal-callout--warn { border-left-color: var(--el-warn); }
.erp-legal-callout--draft svg, .erp-legal-callout--warn svg { color: var(--el-warn); }
.erp-legal-callout--ok { border-left-color: var(--el-ok); }
.erp-legal-callout--ok svg { color: var(--el-ok); }
.erp-legal-callout:focus { outline: none; }
.erp-legal-callout:focus-visible { outline: 3px solid var(--el-focus); outline-offset: 2px; }

.erp-legal-related { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--el-line); max-width: 72ch; }
.erp-legal-related__title { font-size: 16px; margin: 0 0 8px; }
.erp-legal-related ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.erp-legal-related a { color: inherit; }

/* ── forms ───────────────────────────────────────────────────────────────── */
.erp-legal-form { max-width: 560px; margin: 24px 0; padding: 24px; border: 1px solid var(--el-line); border-radius: 12px; background: var(--el-soft); }
.erp-legal-form h2 { font-size: 20px; margin: 0 0 16px; }
.erp-legal-field { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.erp-legal-label { display: block; font-weight: 600; margin-bottom: 6px; padding: 0; }
.erp-legal-required, .erp-legal-optional { font-weight: 400; font-size: 14px; color: var(--el-muted); }
.erp-legal-input {
    display: block; width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: inherit;
    background: transparent; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: 8px;
}
textarea.erp-legal-input { min-height: 120px; resize: vertical; }
.erp-legal-input:hover { border-color: currentColor; }
.erp-legal-input:focus-visible { outline: 3px solid var(--el-focus); outline-offset: 1px; }
.erp-legal-input[aria-invalid="true"] { border-color: #c92a2a; border-width: 2px; }
.erp-legal-hint { margin: 6px 0 0; font-size: 14px; color: var(--el-muted); }
.erp-legal-error { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: #b42318; }
[data-bs-theme="dark"] .erp-legal-error, [data-theme="dark"] .erp-legal-error { color: #ff8a80; }
.erp-legal-error::before { content: "\26A0\FE0E  "; }
.erp-legal-choice { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 0; cursor: pointer; }
.erp-legal-choice input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--el-focus); }
.erp-legal-form__error { margin: 0 0 16px; padding: 10px 12px; border: 1px solid #c92a2a; border-left-width: 4px; border-radius: 8px; font-weight: 600; }

.erp-legal-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
    font: inherit; font-weight: 600; color: inherit; background: transparent; cursor: pointer;
    border: 2px solid currentColor; border-radius: 8px;
}
.erp-legal-btn--primary { background: #0054a6; border-color: #0054a6; color: #ffffff; }
@media (hover: hover) {
    .erp-legal-btn:hover { background: var(--el-soft); }
    .erp-legal-btn--primary:hover { background: #00427f; border-color: #00427f; }
}
.erp-legal-btn:disabled, .erp-legal-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.erp-legal-btn:focus-visible { outline: 3px solid var(--el-focus); outline-offset: 2px; }

.erp-legal-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* the footer's legal links, on the templates that print them as a list */
.erp-legal-footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

@media (prefers-reduced-motion: reduce) { .erp-legal * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .erp-legal-related, .erp-legal-toc, .erp-legal-form { display: none; } }