/* ============================================================
   Legal documents — User Privacy Notice, Accessibility Statement,
   Terms of Use (Views/Legal/Document.cshtml + its body partials).

   Loaded only by that view, through @section Styles.

   COLOUR: tokens only, and brand tokens for anything that carries the
   document's identity (title, section numbers, rules, tints). The
   organisation's theme preset is layered over those tokens per request
   by _NpThemeVars, so the page follows the brand configured in Platform
   Admin — and its dark ramp — without a single literal colour here.

   WEIGHT: the product is one weight (400). Where the reference document
   uses bold, emphasis is carried by the brand colour instead.

   CALLOUTS: tinted, bordered on all four sides. The reference PDF draws
   them with a left accent bar, which the design system bans
   (ui.design-system.md → "No Left-Accent Cards").
   ============================================================ */

/* ---------- The document sheet ---------- */
.np-legal {
    width: calc(100% - 2 * clamp(var(--np-space-3), 4vw, var(--np-space-6)));
    max-width: 920px;
    margin: var(--np-space-3) auto var(--np-space-7);
    padding: clamp(var(--np-space-5), 5vw, var(--np-space-7));
    background: var(--np-color-surface);
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-3);
    box-shadow: var(--np-shadow-2);
    color: var(--np-color-text-primary);
    font-size: var(--np-fs-body);
    line-height: 1.65;
    /* Long unbroken strings (an email address, a URL) wrap instead of pushing
       the sheet wider than a phone. */
    overflow-wrap: anywhere;
}

.np-legal a {
    color: var(--np-color-brand-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.np-legal a:hover,
.np-legal a:focus {
    color: var(--np-color-brand-primary-hover);
}
.np-legal a:focus-visible {
    outline: 2px solid var(--np-color-focus);
    outline-offset: 2px;
    border-radius: var(--np-radius-1);
}

.np-legal strong { color: var(--np-color-brand-primary); }

/* ---------- Document head ---------- */
.np-legal__head {
    padding-bottom: var(--np-space-5);
    margin-bottom: var(--np-space-5);
    border-bottom: 2px solid var(--np-color-brand-accent);
}

.np-legal__productmark {
    display: block;
    width: auto;
    max-width: 100%;
    height: 88px;
    margin: 0 0 var(--np-space-4) calc(-1 * var(--np-space-2));
    object-fit: contain;
    object-position: left center;
}

.np-legal__eyebrow {
    margin: 0 0 var(--np-space-2);
    color: var(--np-color-brand-secondary);
    font-size: var(--np-fs-xsmall);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.np-legal__title {
    margin: 0 0 var(--np-space-3);
    color: var(--np-color-brand-primary);
    font-size: clamp(1.625rem, 3.2vw + 0.75rem, var(--np-fs-h1));
    line-height: 1.2;
}

.np-legal__meta {
    margin: 0;
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-small);
}

/* ---------- At a glance ---------- */
.np-legal__glance { margin-bottom: var(--np-space-6); }

.np-legal__glance-title {
    margin: 0 0 var(--np-space-3);
    color: var(--np-color-brand-primary);
    font-size: var(--np-fs-body);
}

.np-legal__glance-list {
    margin: 0;
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-2);
    overflow: hidden;
}

.np-legal__glance-row {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--np-space-2) var(--np-space-5);
    padding: var(--np-space-3) var(--np-space-4);
    background: var(--np-color-brand-tint-50);
}
.np-legal__glance-row:nth-child(even) { background: var(--np-color-brand-tint-100); }
.np-legal__glance-row + .np-legal__glance-row { border-top: 1px solid var(--np-color-border); }

.np-legal__glance-row dt {
    margin: 0;
    color: var(--np-color-brand-primary);
}
.np-legal__glance-row dd {
    margin: 0;
    min-width: 0;
    color: var(--np-color-text-primary);
}

/* ---------- Numbered sections ----------
   The number sits in a gutter and the body is indented by the same amount, so
   every paragraph aligns under its heading text as in the reference. */
.np-legal__section {
    --np-legal-gutter: 3.25rem;
    /* An in-page "see section N" link lands with the heading clear of the top
       of the viewport rather than flush against it. */
    scroll-margin-top: var(--np-space-4);
}
.np-legal__section + .np-legal__section { margin-top: var(--np-space-5); }

.np-legal__heading {
    display: grid;
    grid-template-columns: var(--np-legal-gutter) minmax(0, 1fr);
    margin: 0 0 var(--np-space-2);
    color: var(--np-color-brand-primary);
    font-size: var(--np-fs-h3);
    line-height: 1.3;
}

.np-legal__body { padding-left: var(--np-legal-gutter); }
.np-legal__body > :last-child { margin-bottom: 0; }

.np-legal__body p { margin: 0 0 var(--np-space-3); }

.np-legal__body ul {
    margin: 0 0 var(--np-space-3);
    padding-left: var(--np-space-5);
}
.np-legal__body li { margin-bottom: var(--np-space-1); }
.np-legal__body li::marker { color: var(--np-color-brand-accent); }

/* ---------- Callouts (address blocks, warnings, quoted confirmations) ---------- */
.np-legal__callout {
    display: block;
    margin: 0 0 var(--np-space-3);
    padding: var(--np-space-3) var(--np-space-4);
    background: var(--np-color-brand-tint-100);
    border: 1px solid var(--np-color-brand-tint-200);
    border-radius: var(--np-radius-2);
    color: var(--np-color-text-primary);
    font-style: normal;
    line-height: 1.75;
}
.np-legal__callout > p { margin: 0; }
.np-legal__callout > p + p { margin-top: var(--np-space-2); }

/* ---------- Tables (lawful basis, retention) ---------- */
.np-legal__table {
    width: 100%;
    margin: 0 0 var(--np-space-4);
    border-collapse: collapse;
    table-layout: fixed;
}
.np-legal__table th,
.np-legal__table td {
    padding: var(--np-space-3) var(--np-space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--np-color-border);
}
.np-legal__table th {
    background: var(--np-color-brand-tint-100);
    color: var(--np-color-brand-primary);
    border-bottom: 2px solid var(--np-color-brand-primary);
}
.np-legal__table th:first-child,
.np-legal__table td:first-child { width: 60%; }

/* ---------- Document foot ---------- */
.np-legal__foot {
    margin-top: var(--np-space-6);
    padding-top: var(--np-space-4);
    border-top: 1px solid var(--np-color-border);
    color: var(--np-color-text-muted);
    font-size: var(--np-fs-xsmall);
}
.np-legal__foot p { margin: 0; }

/* The link for the document being read: stated, not just coloured. */
.np-legal-page .np-landing__footer-links a[aria-current="page"] {
    color: var(--np-color-text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Tablet ---------- */
@media (max-width: 767.98px) {
    .np-legal__productmark { height: 72px; }
    .np-legal__section { --np-legal-gutter: 2.5rem; }
}

/* ---------- Phones ----------
   The gutter is given back to the text: the number runs inline in front of its
   heading, and the at-a-glance rows stack label-over-value so nothing is
   squeezed into a 20-character column. Tables keep their two columns — the
   cells are short phrases and a real table stays a real table for a screen
   reader — at an even split. */
@media (max-width: 575.98px) {
    .np-legal {
        margin-bottom: var(--np-space-5);
        border-radius: var(--np-radius-2);
    }

    .np-legal__productmark { height: 60px; }

    .np-legal__section { --np-legal-gutter: 0rem; }
    .np-legal__heading { display: block; }
    .np-legal__num { margin-right: var(--np-space-2); }

    .np-legal__glance-row { grid-template-columns: minmax(0, 1fr); }

    .np-legal__table th,
    .np-legal__table td { padding: var(--np-space-2); }
    .np-legal__table th:first-child,
    .np-legal__table td:first-child { width: 55%; }
}

/* ---------- Print ----------
   A notice is something people file. Print the document, not the chrome. */
@media print {
    .np-legal-page .np-landing__topbar,
    .np-legal-page .np-landing__footer { display: none; }

    .np-legal {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .np-legal__section,
    .np-legal__callout,
    .np-legal__table tr { break-inside: avoid; }
    .np-legal__heading { break-after: avoid; }
}