/* Legal documents and the /legal index (ET-14755). Figma: Privacy Policy page 28788:82391.

   Shared by pages/legal-document.html and pages/legal-index.html, which is why the title block and
   the measure live here rather than in either one.

   `.legal-body` deliberately does NOT extend the site's shared `.prose`. That class still carries
   study, the one page that has not been redesigned, and it is still written against the old
   `--spacing` scale. Restyling it here would have restyled that page in the same commit. When it
   is redesigned the two should merge and this block shrinks to the layout. */

/* The frames draw a 360px wash behind the header and the title. */
.legal-doc__wash {
    --page-wash-height: 360px;
}

/* 864 is the grid's 8-of-12, centred -- which at 1600 lands on the frames' 368px margins exactly.
   The title block and the prose share it so the heading sits over the text it introduces. */
.legal-doc__measure {
    max-width: var(--grid-xl-col-8);
    margin-inline: auto;
}

.legal-doc__title {
    padding-block: var(--space-48) var(--space-32);
}

.legal-doc__headline {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-heading-xl-size);
    font-weight: var(--heading-weight-xl);
    line-height: var(--type-heading-xl-line);
    letter-spacing: var(--type-heading-xl-track);
    color: var(--black);
}

.legal-doc__updated {
    margin: var(--space-12) 0 0;
    font-size: var(--type-body-md-size);
    line-height: var(--type-body-md-line);
    color: var(--black-80);
}

.legal-doc__content {
    padding-block: var(--space-16) var(--space-96);
}

/* ---------- The document body ---------- */

.legal-body {
    font-size: var(--type-body-xl-size);
    line-height: var(--type-body-xl-line);
    color: var(--black-80);
}

/* Headings are Geist; the body is Inter. Both step themselves at 834 through the shared type
   layer, so there is no breakpoint here. */
.legal-body h2,
.legal-body h3,
.legal-body h4 {
    font-family: var(--font-heading);
    color: var(--black);
}

.legal-body h2 {
    margin: var(--space-64) 0 var(--space-24);
    font-size: var(--type-heading-lg-size);
    font-weight: var(--heading-weight-lg);
    line-height: var(--type-heading-lg-line);
    letter-spacing: var(--type-heading-lg-track);
}

/* The first heading opens the document, so it does not also push it down. */
.legal-body > h2:first-child {
    margin-top: 0;
}

.legal-body h3 {
    margin: var(--space-40) 0 var(--space-16);
    font-size: var(--type-heading-sm-size);
    font-weight: var(--heading-weight-sm);
    line-height: var(--type-heading-sm-line);
    letter-spacing: var(--type-heading-sm-track);
}

.legal-body h4 {
    margin: var(--space-32) 0 var(--space-12);
    font-size: var(--type-heading-xs-size);
    font-weight: var(--heading-weight-xs);
    line-height: var(--type-heading-xs-line);
    letter-spacing: var(--type-heading-xs-track);
}

.legal-body p {
    margin: 0 0 var(--space-16);
}

.legal-body strong {
    font-weight: var(--body-weight-bold);
    color: var(--black);
}

.legal-body a {
    color: var(--brand-teal-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-body a:hover {
    text-decoration: none;
}

.legal-body ul,
.legal-body ol {
    margin: 0 0 var(--space-16);
    padding-inline-start: var(--space-24);
}

.legal-body li {
    margin-bottom: var(--space-8);
}

/* The four blockquotes in the Privacy Policy are cross-references and an "Important Note", not
   quotations -- they read as callouts, which is what the teal tint in the frames is for. */
.legal-body blockquote {
    margin: var(--space-24) 0;
    padding: var(--space-16) var(--space-24);
    border-inline-start: 2px solid var(--brand-teal-500);
    border-radius: 0 var(--radius-8) var(--radius-8) 0;
    background: var(--brand-teal-50);
}

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

/* ---------- The table of contents on this page ----------
   The component sticks inside a column by default, because most hosts will give it one. These
   frames do not: they float it in the right margin, outside the 1312 grid and hard against the
   viewport, where no grid column reaches. Fixed is the only way to sit there.

   That makes the page responsible for retiring it, which a sticky rail would have done by itself
   when its column ran out. The script already sets .is-past for both layouts -- the component's own
   desktop rule opts out of hiding precisely so a page like this one can opt back in. */
@media (min-width: 1200px) {
    .legal-doc__content .toc {
        position: fixed;
        top: var(--toc-top);
        right: var(--space-16);
        margin: 0;
    }

    /* The whole component, not just the trigger: an open card left behind would otherwise hang
       over the final CTA. */
    .legal-doc__content .toc.is-past {
        visibility: hidden;
        opacity: 0;
    }
}

/* ---------- The index ---------- */

.legal-index {
    padding-block: var(--space-16) var(--space-96);
}

/* margin-block, not margin: the list also carries .legal-doc__measure, whose `margin-inline: auto`
   is what centres it against the title above. A shorthand `margin: 0` here sits later in the file
   and silently won the inline axis, which left the cards flush left while the title stayed centred. */
.legal-index__list {
    display: grid;
    gap: var(--space-16);
    margin-block: 0;
    padding: 0;
    list-style: none;
}

.legal-index__card {
    display: block;
    padding: var(--space-24);
    border: 1px solid var(--black-12);
    border-radius: var(--radius-12);
    background: var(--white);
    text-decoration: none;
    transition: border-color 200ms ease;
}

/* A blue stroke rather than a shadow: the whole card is one link, and the site already reads this
   blue as interactive -- it is the outline button's edge and the focus ring. Only the colour
   changes, so nothing reflows on hover. */
/* text-decoration is restated because the global `a:hover { text-decoration: underline }` outranks
   the card's own `text-decoration: none` -- a:hover is 0-1-1 against the class's 0-1-0 -- which
   underlined the whole card, description and date included, the moment it was pointed at. */
.legal-index__card:hover {
    border-color: var(--brand-blue-500);
    text-decoration: none;
}

/* Keyboard parity, in the site's ring idiom -- the same treatment .case-study uses, and for the
   same reason: the whole surface is the link, so the ring belongs to the card, not the title. */
.legal-index__card:focus-visible {
    outline: 2px solid var(--brand-blue-500);
    outline-offset: 2px;
}

.legal-index__card:hover .legal-index__title {
    color: var(--brand-blue-500);
}

.legal-index__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-heading-sm-size);
    font-weight: var(--heading-weight-sm);
    line-height: var(--type-heading-sm-line);
    letter-spacing: var(--type-heading-sm-track);
    color: var(--black);
    transition: color 200ms ease;
}

.legal-index__description {
    margin: var(--space-8) 0 0;
    font-size: var(--type-body-md-size);
    line-height: var(--type-body-md-line);
    color: var(--black-80);
}

.legal-index__updated {
    margin: var(--space-12) 0 0;
    font-size: var(--type-body-sm-size);
    line-height: var(--type-body-sm-line);
    color: var(--black-40);
}

@media (prefers-reduced-motion: reduce) {
    .legal-index__card,
    .legal-index__title {
        transition: none;
    }
}