/*
 * IDOC global styles (deployed as DigitalExperience site/idoc1.sfdc_cms__styles/styles_css).
 * When editing: update content.json -> sfdc_cms:media.source.size to this file's byte length,
 * deploy, then sf community publish --name "idoc".
 */
html,
body {
    height: 100%;
}

html {
    background: white;
}

body {
    margin: 0;
}

/* IDOC brand tokens (IDOC Brand Guide 2026-08). Read by component CSS and HTML blocks. */
:root {
    --idoc-navy: #051E3C;
    --idoc-blue: #1A3865;
    --idoc-accent: #EB9922;
    --idoc-white: #FFFFFF;
}

/*
 * Salesforce's login-family components (loginForm, forgotPassword, checkEmail) and some SLDS
 * containers set font-family from --dxp-g-root-font-family / --dxp-g-heading-font-family,
 * which default to the system stack, not the Theme panel's Base Font. Point both at the
 * Theme's base font so every element on the site uses Quasimoda.
 */
:root {
    --dxp-g-root-font-family: var(--dxp-s-html-font-family), sans-serif;
    --dxp-g-heading-font-family: var(--dxp-s-html-font-family), sans-serif;
}

/*
 * Headings typed into Flow Display Text (and any lightning-formatted-rich-text) carry
 * SLDS's own .slds-rich-text-editor__output h1..h6 sizes, which outrank the dxp text
 * classes. These selectors (0,2,1) hand size and line height back to Theme > Text.
 */
.slds-rich-text-editor__output h1.dxp-text-heading-xlarge,
.slds-rich-text-editor__output h2.dxp-text-heading-xlarge {
    font-size: var(--dxp-s-text-heading-extra-large-font-size);
    line-height: var(--dxp-s-text-heading-extra-large-line-height);
}

.slds-rich-text-editor__output h1.dxp-text-heading-large,
.slds-rich-text-editor__output h2.dxp-text-heading-large,
.slds-rich-text-editor__output h3.dxp-text-heading-large {
    font-size: var(--dxp-s-text-heading-large-font-size);
    line-height: var(--dxp-s-text-heading-large-line-height);
}

.slds-rich-text-editor__output h2.dxp-text-heading-medium,
.slds-rich-text-editor__output h3.dxp-text-heading-medium,
.slds-rich-text-editor__output h4.dxp-text-heading-medium {
    font-size: var(--dxp-s-text-heading-medium-font-size);
    line-height: var(--dxp-s-text-heading-medium-line-height);
}

/*
 * Login-family flow screens: spacing.
 *
 * Flow runtime ships every screen row (.flowruntime-column) at margin 0 and SLDS
 * zeroes <p> margins inside .slds-rich-text-editor__output, so headings, body copy
 * and buttons render flush against each other. Flow Builder exposes no spacing
 * control, so the gaps are set here.
 *
 * Scoped by data-component-id, which Experience Builder derives from the last four
 * hex characters of each flow placement's component UUID:
 *   flow-172e  /idoc/SelfRegister   (view "register")
 *   flow-a824  /idoc/thank-you      (view "Thank_You")
 *   flow-2d4c  /idoc/SubmitRegistration
 *   flow-b4b5  /idoc/contact-us     (view "Contact_Us")
 * My Profile's flow is intentionally excluded.
 *
 * WARNING: deleting and re-adding the Flow component in Builder mints a new UUID and
 * silently breaks these selectors. If a login page loses its spacing, re-read the
 * component id from the page DOM and update the list below.
 *
 * These selectors reach into the flow runtime because it uses synthetic shadow DOM,
 * where document-level CSS is not scoped away.
 */
[data-component-id="flow-172e"] .flowruntimeBody,
[data-component-id="flow-a824"] .flowruntimeBody,
[data-component-id="flow-2d4c"] .flowruntimeBody,
[data-component-id="flow-b4b5"] .flowruntimeBody {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Gap between stacked screen rows. The sibling combinator keeps nested section
   columns (side-by-side regions) at zero so they are not pushed apart. */
[data-component-id="flow-172e"] .flowruntime-column + .flowruntime-column,
[data-component-id="flow-a824"] .flowruntime-column + .flowruntime-column,
[data-component-id="flow-2d4c"] .flowruntime-column + .flowruntime-column,
[data-component-id="flow-b4b5"] .flowruntime-column + .flowruntime-column {
    margin-top: 24px;
}

/* The call-to-action row gets more room than a plain row. */
[data-component-id="flow-172e"] .flowruntime-column + .flowruntime-column:has(.bar),
[data-component-id="flow-a824"] .flowruntime-column + .flowruntime-column:has(.bar),
[data-component-id="flow-2d4c"] .flowruntime-column + .flowruntime-column:has(.bar),
[data-component-id="flow-b4b5"] .flowruntime-column + .flowruntime-column:has(.bar) {
    margin-top: 40px;
}

/* Paragraphs inside a single Display Text field. */
[data-component-id="flow-172e"] .slds-rich-text-editor__output p + p,
[data-component-id="flow-a824"] .slds-rich-text-editor__output p + p,
[data-component-id="flow-2d4c"] .slds-rich-text-editor__output p + p,
[data-component-id="flow-b4b5"] .slds-rich-text-editor__output p + p {
    margin-top: 16px;
}

/*
 * /idoc/SubmitRegistration carries its heading in a Builder Text Block above the
 * flow instead of inside a flow Display Text field. Without these two offsets the
 * heading sits 19px higher and its body copy 36px lower than on the sibling login
 * pages. Values chosen so both land where the in-flow headings do.
 */
/* Doubled attribute selector (0,2,0) to outrank the Builder-generated
   .dxpStyle_f654f885-... rule, which sets margin-top: 24px from a later
   inline <style> block and would otherwise win on cascade order. */
[data-component-id="textBlock-a37a"][data-component-id] {
    margin-top: 44px;
}

[data-component-id="flow-2d4c"] .flowruntimeBody {
    margin-top: 0;
}

/* Directory CTA rows (Peer Resources / Transaction Exchange HTML blocks): the
   prompt + button grid stacks on phones instead of squeezing the prompt into a
   ~135px column against the left edge. Inline grid style needs the !important. */
@media (max-width: 640px) {
    .idoc-cta-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
        text-align: center;
        padding: 0 16px;
    }
}