/* v2 styles: global page rules (owner W2-G-A).
 * Loaded after static/css/styles.css only when DP_NEW_STYLE is on (base.html).
 * The prototype's product/styles.css is byte-identical to the platform's, so this
 * file carries the global rules the concept-c skin changes, scoped under .dp-v2.
 * Colours and fonts come from the --dp-* tokens (styles/_dp-tokens.scss). */

.dp-v2 body {
    font-family: var(--dp-font);
    background: var(--dp-bg);
    color: var(--dp-fg);
}

.dp-v2 .content-wrapper {
    background: var(--dp-bg);
    color: var(--dp-fg);
}

/* One page-title style on every page (round 5, R5-2): the fund Disclosures /
   Portfolio title, 16.8px semibold upper-case in the ink colour. The theme's
   .dp-page-title (1.28rem/700) is overridden here; the dashboards', report
   builder's, data export's, reports list's and EIF analytics' own h1s join it. */
.dp-v2 .dp-page-title,
.dp-v2 .fd-dash h1,
.dp-v2 .dx-head h1,
.dp-v2 .reports-head h1,
.dp-v2 #eif-title,
.dp-v2 .esg-report-builder #builder-title {
    margin: 0;
    font-size: 16.8px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dp-fg);
}

/* The older page headings join it too: the `h2.h4.text-primary` title of the
   settings, admin and form pages (Branding, Locations, competitor reports, ...)
   and the Source pages' transparent header. They keep their own margins. */
.dp-v2 h2.h4.text-primary,
.dp-v2 .dp-source-page .dp-transparent-header h2 {
    font-size: 16.8px;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dp-fg) !important;
}

/* Page subtitle under the page title: black 12px, 5.6px below the title, as the
   prototype's header subtitle on every page (overrides the theme's muted .dp-page-subtitle). */
.dp-v2 .dp-page-subtitle {
    margin-top: .35rem;
    color: var(--dp-fg);
    font-size: 12px;
}

.dp-v2 .footer p {
    font-family: var(--dp-font);
    font-size: var(--dp-font-size);
}

.dp-v2 #dp-flash-message {
    border-radius: var(--dp-radius);
}

/* ---- Klaro cookie banner and modal ----------------------------------------
 * Klaro (klaro.min.css + klaro.local.css, both v1) styles itself through CSS
 * variables on `.klaro`; remap them to the v2 tokens. Its accept button and
 * links already take var(--primary) from klaro.local.css. */
.dp-v2 .klaro {
    --font-family: var(--dp-font);
    --font-size: var(--dp-font-size);
    --border-radius: var(--dp-radius);
    --dark1: var(--dp-card);
    --dark2: var(--dp-muted);
    --dark3: var(--dp-muted-fg);
    --light1: var(--dp-fg);
    --light2: var(--dp-border);
    --light3: var(--dp-muted-fg);
    --button-text-color: var(--dp-fg);
}

.dp-v2 .klaro .cookie-notice:not(.cookie-modal-notice) {
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    box-shadow: var(--dp-shadow-md);
    color: var(--dp-fg);
}

.dp-v2 .klaro .cookie-notice p,
.dp-v2 .klaro .cookie-modal p,
.dp-v2 .klaro .cookie-modal .cm-modal .cm-header h1,
.dp-v2 .klaro .cookie-modal .cm-modal .cm-header h1.title {
    color: var(--dp-fg);
}

.dp-v2 .klaro .cookie-modal .cm-list-description,
.dp-v2 .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out,
.dp-v2 .klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required,
.dp-v2 .klaro .cookie-modal .cm-list-title + .cm-required,
.dp-v2 .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
    color: var(--dp-muted-fg);
}

.dp-v2 .klaro .cookie-modal .cm-modal.cm-klaro {
    border: 1px solid var(--dp-border);
    box-shadow: var(--dp-shadow-md);
}

.dp-v2 .klaro .cookie-modal .cm-btn,
.dp-v2 .klaro .context-notice .cm-btn,
.dp-v2 .klaro .cookie-notice .cm-btn {
    min-height: 32px;
    padding: 6px 12px;
    border-radius: var(--dp-radius);
    font-weight: 500;
    color: var(--dp-fg);
    background-color: var(--dp-muted);
}

/* Accept = primary (fill comes from klaro.local.css, !important). */
.dp-v2 .klaro .cookie-modal .cm-btn.cm-btn-success,
.dp-v2 .klaro .context-notice .cm-btn.cm-btn-success,
.dp-v2 .klaro .cookie-notice .cm-btn.cm-btn-success,
.dp-v2 .klaro .cookie-modal .cm-btn.cm-btn-info,
.dp-v2 .klaro .context-notice .cm-btn.cm-btn-info,
.dp-v2 .klaro .cookie-notice .cm-btn.cm-btn-info {
    color: var(--bs-white);
}

/* Klaro switches: the off track used --dark2 (the near-white muted surface), invisible on the white modal. */
.dp-v2 .klaro .cookie-modal .cm-list-label .slider {
    background-color: var(--dp-muted-fg);
}

/* E1: headings are ink (black). styles.css colours `.container h2/h3` and the
 * auto-form headings with the brand colour at (0,1,1), above Bootstrap's
 * --bs-heading-color; these rules sit at (0,2,1), below the report builder's
 * !important teal titles. */
.dp-v2 .container :is(h2, h3),
.dp-v2 .eva-form-container :is(h1, h2, h3, h4, h5) {
    color: var(--dp-fg);
}