/* public/css/legal.css
   ---------------------------------------------------------------------------
   LEGAL AND CORPORATE PAGES — shared template.

   Namespaced .lg-* / .sm-*, and the body carries .page-legal.

   Readability is the entire design objective. These are documents people read
   under obligation, often on a phone, sometimes looking for one clause. So:
   one column, a generous measure, real paragraph spacing, and no decorative
   hero competing with the text.
   --------------------------------------------------------------------------- */

.page-legal {
    --l-navy:  #0B1626;
    --l-ink: var(--cx-ink);
    --l-muted: var(--cx-muted);   /* 6.7:1 on white */
    --l-gold:  #8A6E12;   /* the darker gold — #C9A227 on white is only 2.4:1 */
    --l-line: var(--cx-line);
    --l-soft:  #F7F8FA;
    --l-font: var(--cx-sans);

    background: #fff;
    font-family: var(--l-font);
}

/* tl.css applies Manrope and uppercase to every heading globally; neutralised in scope. */
.page-legal h1, .page-legal h2, .page-legal h3 {
    font-family: var(--l-font); text-transform: none; letter-spacing: normal;
}

/* 76ch measure. Wider than this and the eye loses its place returning to the next line,
   which matters more here than anywhere else on the site. */
.lg-wrap { max-width: 76ch; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 2rem); }

/* ── Hero: compact on purpose ─────────────────────────────────────────────── */

.lg-hero { background: var(--l-navy); color: #F4F6F9;
    padding: clamp(1.8rem, 3.4vw, 2.6rem) 0; }
.lg-eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: #D9B65A; margin: 0 0 .45rem; }
.lg-h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.2;
    letter-spacing: -.015em; margin: 0 0 .5rem; text-wrap: balance; }
.lg-summary { font-size: .95rem; line-height: 1.6; color: rgba(244,246,249,.8);
    margin: 0 0 .7rem; text-wrap: pretty; }
.lg-updated { font-size: .76rem; color: rgba(244,246,249,.55); margin: 0; }

/* ── Body ─────────────────────────────────────────────────────────────────── */

.lg-body { padding: clamp(1.8rem, 3.4vw, 2.8rem) 0 clamp(2.4rem, 4vw, 3.6rem); }

/* Approval notice. Amber rather than red: this is "not yet approved", not "danger", and
   red would read as an error on the page. Deliberately prominent — an unapproved legal
   document must not be able to look approved. */
.lg-review, .lg-notice {
    border-radius: var(--cx-radius-lg); padding: 1rem 1.2rem; margin: 0 0 1.8rem;
    font-size: .88rem; line-height: 1.6;
}
.lg-review { background: #FFF8E8; border: 1px solid #E8D69A; border-left: 3px solid #B98900; color: #5A4300; }
.lg-review strong { display: block; margin-bottom: .3rem; font-size: .78rem;
    letter-spacing: .08em; text-transform: uppercase; }
.lg-review p, .lg-notice p { margin: 0; }
.lg-notice { background: var(--l-soft); border: 1px solid var(--l-line); color: var(--l-muted); }

.lg-toc { background: var(--l-soft); border: 1px solid var(--l-line); border-radius: var(--cx-radius-lg);
    padding: 1.1rem 1.3rem; margin: 0 0 2rem; }
.lg-toc-h { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--l-muted); margin: 0 0 .6rem; }
.lg-toc ol { margin: 0; padding-left: 1.2rem; }
.lg-toc li { margin-bottom: .35rem; }
.lg-toc a { font-size: .88rem; color: var(--l-ink); text-decoration: none; }
.lg-toc a:hover { color: var(--l-gold); text-decoration: underline; }

.lg-section { margin-bottom: 2rem; }
/* scroll-margin so an in-page anchor does not land the heading under the sticky header. */
.lg-section { scroll-margin-top: 100px; }
.lg-section h2 { font-size: 1.05rem; font-weight: 600; color: var(--l-ink);
    letter-spacing: -.008em; margin: 0 0 .6rem; text-wrap: balance; }
.lg-section p { font-size: .95rem; line-height: 1.75; color: var(--l-muted); margin: 0 0 .9rem; }
.lg-section p:last-child { margin-bottom: 0; }
.lg-section a { color: var(--l-gold); }
.lg-section a:hover { text-decoration: underline; }

.lg-foot { border-top: 1px solid var(--l-line); padding-top: 1.2rem; margin-top: 2.4rem; }
.lg-foot p { font-size: .88rem; color: var(--l-muted); margin: 0; }
.lg-foot a { color: var(--l-gold); font-weight: 600; }

/* ── Sitemap ──────────────────────────────────────────────────────────────── */

/* Wider than the reading measure: this is a directory to scan, not prose to read. */
.page-sitemap .lg-wrap { max-width: var(--cx-container); }
.sm-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem 2rem; align-items: start; }
.sm-group { min-width: 0; }
.sm-h { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--l-ink);
    padding-bottom: .5rem; border-bottom: 1px solid var(--l-line); margin: 0 0 .7rem; }
.sm-count { font-size: .68rem; font-weight: 600; color: var(--l-gold);
    background: rgba(201,162,39,.1); border-radius: var(--cx-radius-xs); padding: .1rem .35rem; }
.sm-list { list-style: none; margin: 0; padding: 0;
    /* Long groups (57 jurisdictions, every Guide) become columns rather than a column
       a metre tall. */
    columns: 1; }
.sm-list li { margin-bottom: .4rem; break-inside: avoid; }
.sm-list a { font-size: .86rem; line-height: 1.4; color: var(--l-muted); text-decoration: none; }
.sm-list a:hover { color: var(--l-gold); text-decoration: underline; }

@media (min-width: 900px) {
    /* Only the biggest groups need splitting, and only where there is room. */
    .sm-group:has(.sm-list li:nth-child(15)) { grid-column: span 2; }
    .sm-group:has(.sm-list li:nth-child(15)) .sm-list { columns: 2; column-gap: 2rem; }
}

/* Clause numbers and lists — added for the Coutts legal documents.

   The number sits inside the <h2> rather than as a CSS counter on the section, because a
   document may carry an explicit anchor (Terms of Business clause 22 is linked from the
   footer as #complaints) and counters cannot be referenced from a link. */
.lg-num { color: var(--l-gold); font-variant-numeric: tabular-nums; margin-right: .35rem; }

.lg-ul { margin: 0 0 .9rem; padding-left: 1.15rem; }
.lg-ul li { font-size: .95rem; line-height: 1.7; color: var(--l-muted); margin-bottom: .35rem; }
.lg-ul li::marker { color: var(--l-gold); }
.lg-ul a { color: var(--l-gold); }

/* ---- Contents -------------------------------------------------------------
   THE STICKY RULE THAT USED TO LIVE HERE HAS BEEN REMOVED. It read:

       @media (min-width: 1200px) { .lg-toc { position: sticky; top: 100px; } }

   and its own comment said "sticky where there is room beside the text" -- but
   there is no beside. .lg-wrap is a single 76ch column and .lg-toc is a <nav> in
   normal flow directly above the clauses. The two-column layout the rule assumed
   was never built.

   What it produced on a wide screen: the containing block is .lg-wrap, which spans
   the whole document, so the contents box pinned at top:100px and STAYED pinned for
   the entire length of the page. It carries an opaque background (--l-soft), and on
   Terms of Business the list of twenty-two clauses is taller than the viewport --
   so it covered the text scrolling underneath it and could never be scrolled past.

   The page was scrolling all along. The contents box was sitting on top of it.

   The contents belongs in flow, above the document, at every width. */