/*
 * Your global styles here
 */
html,
body {
    height: 100%;
}

html {
    background: #F5F6F7;
}

body {
    margin: 0;
}

/*
 * Site font: Roobert, declared via @font-face in the head markup (static
 * resource PortalFonts). The theme's BaseFont stays at its default,
 * var(--dxp-g-root-font-family), because the branding set rejects a font stack
 * (no commas allowed) — so the stack is set on the platform variable it reads
 * instead. Every theme text style and the portal LWCs follow it through
 * --dxp-s-html-font-family.
 */
:root {
    --dxp-g-root-font-family: Roobert, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/*
 * Auth pages: the theme pins the footer to the bottom of the viewport
 * (showThemeFooterAtBottom), so a short form leaves a large empty gap above the
 * footer. The standard Salesforce self-register form is short, so center it
 * vertically in that space. Scoped via :has() to the main region so
 * inner/dashboard pages keep their normal top-aligned flow.
 */
main:has(community_login-self-register) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #F5F6F7;
}

/*
 * The custom auth pages (login, forgot password, check email) are top-aligned
 * instead of centered — they fill the width and read better anchored to the top
 * of the page rather than floating in the middle of the viewport. Each component
 * paints its own card, so nothing else is needed here.
 */
main:has(c-portal-login),
main:has(c-portal-forgot-password),
main:has(c-portal-check-email) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #F5F6F7;
}

/*
 * Give the standard self-register form a solid card surface. The portal's page
 * background is the branding default (#F5F6F7), and the standard Salesforce
 * component is transparent, so the form blends into the page. An explicit card
 * makes it read as a distinct surface (and darkens consistently under a
 * dark-mode browser extension instead of showing a mismatched shade).
 */
community_login-self-register {
    display: block;
    background: #F5F6F7;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 32px;
}

/* Match the auth content wrapper to the same surface color. */
.content-container {
    background: #F5F6F7;
}

/*
 * The scoped theme layout paints its header and footer a slightly different
 * shade (#EFF0F2) than the branding page background (#F5F6F7). The gap is
 * invisible in light mode, but a dark-mode browser extension maps the two
 * shades to different darks and bands the header/footer against the content.
 * Pin them to the page background so the whole page reads as one surface and
 * darkens uniformly. !important is required to beat the theme's own scoped
 * (two-class) selector, whose lwc-* hash we can't target reliably.
 */
.community_byo-scoped-header-and-footer__header-content,
.community_byo-scoped-header-and-footer__footer-content {
    background-color: #F5F6F7 !important;
}