/* =============================================================
   File: assets/css/legal.css
   Privacy Policy and Terms of Use. Loaded after site.css.

   Document pages, not brochure pages: a near-black masthead, a
   warm ivory document field, one champagne hairline, and a
   measure held to ~820px. No photography. Includes the print
   stylesheet.
   ============================================================= */

@font-face {
    font-family: "EB Garamond Fallback";
    src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"), local("DejaVu Serif");
    size-adjust: 92.5%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

.page-legal {
    --serif: "EB Garamond", "EB Garamond Fallback", "Iowan Old Style", Georgia, serif;
    --lg-title: clamp(2.125rem, 0.9rem + 1.5vw, 2.75rem);   /* 44 / 38 / 34 */
    --lg-h2:    clamp(1.375rem, 0.9rem + 0.5vw, 1.625rem);  /* 26 / 24 / 22 */
    --lg-doc:   820px;                                       /* 760–900px measure */
}

.lg-wrap {
    width: 100%;
    max-width: calc(var(--lg-doc) + 2 * var(--edge));
    margin-inline: auto;
    padding-inline: var(--edge);
}


/* ############################################################
   MASTHEAD
   ############################################################ */

.lg-head {
    background: var(--black);
    color: var(--white);
    padding: calc(var(--header-h) + var(--s8)) 0 var(--s8);
    border-bottom: 1px solid var(--line-gold);
}
.lg-head .gold-rule { margin: var(--s4) 0 var(--s5); width: 32px; }

.lg-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--lg-title);
    line-height: 1.12;
    letter-spacing: -0.01em;
}
.lg-subtext {
    margin-top: var(--s4);
    max-width: 34em;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--white-soft);
}
.lg-updated {
    margin-top: var(--s5);
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--gold);
}


/* ############################################################
   DOCUMENT
   ############################################################ */

.lg-doc { background: var(--ivory); color: var(--ink); padding: var(--s9) 0 var(--s10); }

/* A quiet contents list — never a sidebar. */
.lg-contents {
    padding-bottom: var(--s6);
    margin-bottom: var(--s7);
    border-bottom: 1px solid var(--stone);
}
.lg-contents-label {
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--bronze);
}
.lg-contents ol {
    margin-top: var(--s4);
    columns: 2;
    column-gap: var(--s7);
}
.lg-contents a {
    display: flex;
    align-items: center;
    min-height: 44px;              /* standalone links are full targets */
    padding: 4px 0;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-soft);
    transition: color var(--dur) var(--ease);
}
.lg-contents a:hover { color: var(--bronze); }

.lg-body h2 {
    margin-top: var(--s8);
    padding-top: var(--s5);
    border-top: 1px solid var(--stone);
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--lg-h2);
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--ink);
    scroll-margin-top: calc(var(--header-compact) + var(--s4));
}
.lg-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.lg-body p, .lg-body li {
    font-size: var(--fs-body);            /* 16.3px desktop */
    line-height: 1.75;
    color: var(--ink-soft);
}
.lg-body p { margin-top: var(--s4); }
.lg-body ul { margin-top: var(--s4); padding-left: var(--s5); list-style: none; }
.lg-body li { position: relative; margin-top: var(--s2); }
.lg-body li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--s5) + 6px);
    top: 0.75em;
    width: 10px; height: 1px;
    background: var(--bronze);
    opacity: 0.7;
}
/* Inline links carry a real underline, so they do not rely on colour. */
.lg-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--bronze);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.lg-body a:hover { color: var(--bronze); }

/* ############################################################
   RESPONSIVE
   ############################################################ */

@media (max-width: 1080px) {
    .lg-head { padding: calc(var(--header-h) + var(--s7)) 0 var(--s7); }
    .lg-doc { padding: var(--s8) 0 var(--s9); }
}

@media (max-width: 700px) {
    .page-legal { --edge: 24px; }
    .lg-contents ol { columns: 1; }
    .lg-body h2 { margin-top: var(--s7); }
    .lg-subtext { max-width: none; }
}

@media (max-width: 374px) { .page-legal { --edge: 24px; } }


/* ############################################################
   PRINT — black on white, no navigation, no decoration
   ############################################################ */

@media print {
    .site-header, .nav, .nav-toggle, .header-access, .skip,
    .lg-contents, .site-footer .footer-nav, .footer-base { display: none !important; }

    html, body, .lg-head, .lg-doc, .site-footer {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
    .lg-head { padding: 0 0 12pt; border-bottom: 1pt solid #000; }
    .lg-doc { padding: 12pt 0 0; }
    .lg-wrap { max-width: 100%; padding-inline: 0; }

    .label, .lg-updated { color: #000 !important; }
    .gold-rule { background: #000 !important; }
    .lg-title { font-size: 22pt; }
    .lg-body h2 { font-size: 13pt; border-top: 0.5pt solid #999; page-break-after: avoid; }
    .lg-body p, .lg-body li, .lg-subtext { font-size: 10.5pt; line-height: 1.5; color: #000 !important; }
    .lg-body li::before { background: #000 !important; }
    .lg-body a { color: #000 !important; box-shadow: none !important; text-decoration: underline; }

    /* Keep the Group's contact details on the printed document. */
    .site-footer { border-top: 1pt solid #000; padding: 12pt 0 0; }
    .footer-main { display: block; }
    .footer-main .medallion { display: none; }
    .footer-office address, .footer-contact li { color: #000 !important; font-size: 9.5pt; }
    .footer-contact svg { display: none; }
    p, li, h2 { orphans: 3; widows: 3; }
}