/* A legal document for anyone to read (#833), laid out by Pages/Legal/Document.cshtml: Logo2 above a reading column of
   the text as published in Admin. Tokens only, so it follows the system's light or dark setting like the app. */

.legal {
    min-height: 100vh;
    background: var(--hwc-page);
    color: var(--hwc-text);
}

.legal__header {
    padding: 24px 40px;
    border-bottom: 1px solid var(--hwc-hairline);
}

.legal__logo {
    display: block;
    height: 48px;
    width: auto;
}

.legal__main {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 40px 72px;
}

.legal__title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.legal__meta {
    margin: 0 0 32px;
    font-size: 14px;
    color: var(--hwc-text-muted);
}

/* Whatever HTML Admin holds: headings, paragraphs and lists at a reading size. */
.legal__body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--hwc-text-2);
    overflow-wrap: anywhere;
}

.legal__body h1,
.legal__body h2,
.legal__body h3 {
    margin: 32px 0 8px;
    line-height: 1.3;
    color: var(--hwc-text);
}

.legal__body h1 {
    font-size: 24px;
}

.legal__body h2 {
    font-size: 20px;
}

.legal__body h3 {
    font-size: 17px;
}

.legal__body p,
.legal__body ul,
.legal__body ol {
    margin: 0 0 16px;
}

.legal__body a {
    color: var(--hwc-action);
}

@media (max-width: 614px) {
    .legal__header {
        padding: 16px;
    }

    .legal__logo {
        height: 40px;
    }

    .legal__main {
        padding: 24px 16px 48px;
    }

    .legal__title {
        font-size: 26px;
    }
}