/* ===========================================================
   UNAMIQ - legal pages (privacy, cookies, accessibility)

   Long-form reading. The whole job of this file is to make a
   wall of text comfortable: a narrow measure, clear heading
   hierarchy, and enough space between things that nobody has
   to work to find where a section starts.

   Every colour is a token, as everywhere else.
=========================================================== */

.legal-meta{
    font-family:"Space Mono", monospace;
    font-size:var(--fs-xs);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-faint);
    margin-top:-44px;
    margin-bottom:56px;
}

.legal-body{
    /* ~70 characters a line. Longer than this and people start
       losing their place between lines. */
    max-width:660px;
}

.legal-lede{
    font-size:var(--fs-lg);
    line-height:1.7;
    color:var(--text-strong);

    padding:22px 26px;
    margin-bottom:44px;

    background:var(--card-bg-hover);
    border-left:3px solid var(--accent);
}

.legal-body p{
    font-size:var(--fs-md);
    line-height:1.75;
    color:var(--text-muted);
    margin-bottom:18px;
}

.legal-h2{
    font-size:var(--fs-lg);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;

    margin-top:52px;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border-color);
}

.legal-h3{
    font-size:var(--fs-md);
    font-weight:700;
    letter-spacing:.03em;

    margin-top:32px;
    margin-bottom:10px;
    color:var(--text);
}

.legal-list{
    margin:0 0 20px 0;
    padding-left:22px;
}

.legal-list li{
    font-size:var(--fs-md);
    line-height:1.75;
    color:var(--text-muted);
    margin-bottom:8px;
}

.legal-list li::marker{
    color:var(--accent);
}

.legal-table{
    width:100%;
    border-collapse:collapse;
    margin:0 0 28px;
    font-size:var(--fs-base);
}

.legal-table th,
.legal-table td{
    text-align:left;
    vertical-align:top;
    padding:12px 18px 12px 0;
    border-bottom:1px solid var(--border-color);
}

.legal-table th{
    font-family:"Space Mono", monospace;
    font-size:var(--fs-2xs);
    font-weight:400;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-faint);
}

.legal-table td{
    line-height:1.6;
    color:var(--text-muted);
}

.legal-body a{
    color:var(--accent-ink);
    text-underline-offset:3px;
}

.legal-body code{
    font-family:"Space Mono", monospace;
    font-size:.9em;
    color:var(--accent-ink);
}

.legal-aside{
    margin-top:44px;
    padding-top:22px;
    border-top:1px solid var(--border-color);
}

@media(max-width:600px){

    .legal-meta{ margin-top:-28px; margin-bottom:36px; }
    .legal-lede{ padding:18px 20px; font-size:var(--fs-md); }

    .legal-table,
    .legal-table thead,
    .legal-table tbody,
    .legal-table tr,
    .legal-table th,
    .legal-table td{
        display:block;
        width:100%;
    }

    .legal-table thead{
        /* Hidden visually, still read aloud, because on a phone the
           cells stack and the column headers no longer line up. */
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip-path:inset(50%);
    }

    .legal-table td{
        border-bottom:none;
        padding:4px 0;
    }

    .legal-table tr{
        padding:14px 0;
        border-bottom:1px solid var(--border-color);
    }

}