/*
 * Shared styles for the static legal pages — /terms (views/terms.ejs) and
 * /privacy (views/privacy.ejs). Both pages carried a byte-identical <style>
 * block plus identical inline style="…!important" attributes on the page
 * header; SITE-239 pulled them here so the two pages can't drift apart.
 *
 * Loaded after includes/head.ejs, so these rules come later than the theme
 * CSS they override.
 */

/*
 * Page header: the pale grey band behind the page title. The `section` tag is
 * part of the selector on purpose — it has to out-rank
 * `section.dark.page-header` in css/style.css, which the old inline style used
 * to beat.
 */
section.page-header.legal-header {
    background-color: rgba(148, 149, 150, 0.12) !important;
}

/*
 * The page title. Previously a dead 28px rule in the <style> block lost to an
 * inline 20px !important on the element itself — 20px is what actually rendered
 * on both pages, so that is the single rule kept here.
 */
.legal-header h1.header-sub-title {
    font-size: 20px !important;
    color: black !important;
}

/* Section headings throughout the legal copy. */
h2 {
    font-size: 22px !important;
}

/*
 * Sub-section headings (privacy's "Managing Your Settings" group). Scoped to
 * .legal-body so terms.ejs keeps essentials.css's 24px for its own <h3>s;
 * without a rule these would render *larger* than the <h2>s they sit under,
 * since essentials sizes h3 at 24px against h2's 30px. 0-1-1 out-ranks
 * essentials' 0-0-1, so no !important is needed.
 */
.legal-body h3 {
    font-size: 19px;
}

/* Offset anchor jumps so headings aren't hidden under the fixed navbar */
h1[id], h2[id], h3[id] {
    scroll-margin-top: 100px;
}