/* Privacy Policy and Terms of Service (UI-09).

   These two pages are long prose: numbered sections of headings, paragraphs
   and lists with no classes of their own. This file styles that prose and
   nothing else. The shell (navbar, header, footer) is the site's, in Tailwind
   utilities in the templates.

   It used to build on auth-base.css, whose blue page background never painted
   here (a class on <body> beat it), so the title, the date and both links back
   were white on white. It depends on no other stylesheet now. Dark mode is in
   dark-mode.css under "Legal pages". */

.legal-body {
    margin-top: 2.5rem;
    /* A reading column: about 68 characters a line. */
    max-width: 68ch;
    color: #374151;
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* A hairline and room between sections, so a numbered section is easy to find
   again after looking away. */
.legal-section {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid #e5e7eb;
    /* A link to a section should not land under the fixed navbar. */
    scroll-margin-top: 6rem;
}

.legal-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.legal-section h2 {
    margin: 0 0 0.875rem;
    color: #111827;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.legal-section h3 {
    margin: 1.5rem 0 0.5rem;
    color: #1f2937;
    font-size: 1.0625rem;
    font-weight: 600;
}

.legal-section p {
    margin: 0 0 1rem;
}

.legal-section ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.legal-section li {
    margin-bottom: 0.4rem;
    padding-left: 0.25rem;
}

.legal-section li::marker {
    color: #9ca3af;
}

.legal-section li strong {
    color: #111827;
    font-weight: 600;
}

.legal-section > :last-child {
    margin-bottom: 0;
}

/* How to reach the developer, at the end of each page. */
.contact-info {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
}

.contact-info p {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.375rem 0;
    overflow-wrap: anywhere;
}

.contact-info i {
    width: 1.25rem;
    color: #9ca3af;
    text-align: center;
}