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

html {
	background: white;
}

body {
	margin: 0;
}

/*
 * Full-bleed home chrome. The full-width blue header and the sidebar/content
 * sit in stacked layout sections. Two theme constraints are removed here:
 *   1. The sections' default padding (16px each side) — vertical padding left a
 *      gap between the header and the sidebar; horizontal padding inset the body.
 *   2. The theme content-width cap (max-width 1800px + auto side margins) on
 *      .columns-content, which stopped the body spanning the full page width.
 * Result: the blue header and the body (sidebar + content) run edge to edge.
 * The header's own inner content keeps its max-width via the component CSS.
 * !important is required to beat the section/theme's own rules.
 */
community_layout-section.comm-section-container {
	padding: 0 !important;
}

community_layout-section.comm-section-container .columns-content {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Shell chrome — grey "ground". The body section that holds the sidebar and
 * content sits on a pale grey ground (#eff3fb), matching the reference; the
 * floating white content card itself is styled in lwrPageLayout.css
 * (.layout__content), since every shell page composes its sidebar + content
 * split internally via c-lwr-page-layout rather than as separate Builder
 * columns. Scoped to :has(c-lwr-page-layout) so only shell pages are affected.
 */
community_layout-section.comm-section-container:has(c-lwr-page-layout) {
	background: #eff3fb !important;
}

/*
 * Full-height shell body (Home and Plain layouts, every viewport width). The
 * c-mpp-theme-layout shell is a min-height:100vh flex column and hands its
 * free height to the page through one flex-grow chain, so the grey ground and
 * the white card reach the bottom of the viewport on a short page while a long
 * page still grows and the document scrolls as normal (min-height, never a
 * fixed height, so nothing clips or scrolls inside itself).
 *
 * Link by link: the slotted router container grows; the inline data-provider
 * wrappers between it and the page break the chain, so they are collapsed with
 * display:contents; then the content container, the body section, its column
 * row and the column each grow. Inside the column only the child that holds
 * the page shell grows — the other components dropped in the same column
 * (c:managingPharmacist on My Claims, for one) keep their own height instead
 * of taking a share of the free space. Every element between the column and
 * c-lwr-page-layout is a column flex container that grows, which also covers
 * the page component hosts (c:mppClaimsPage and the rest) whose own CSS never
 * sets a display; lwrPageLayout.css finishes the chain to the white card.
 * The hidden SEO region is pulled out of flow so it reserves no height at the
 * bottom. The framework styles .column-content and the column's flex with
 * scoped selectors that outrank these, hence !important on those two.
 *
 * These rules were anchored on <main> until the shell moved to the custom
 * c-mpp-theme-layout, which has no <main>; from then they matched nothing and
 * short pages showed the white page background under the grey ground.
 * Scoped to :has(c-lwr-page-layout), so only the shell pages are affected.
 */
@media (min-width: 769px) {
	community_byo-scoped-header-and-footer.full-height {
		min-height: 100vh !important;
	}
}

c-mpp-theme-layout:has(c-lwr-page-layout) webruntime-router-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

c-mpp-theme-layout:has(c-lwr-page-layout) dxp_data_provider-user-data-provider,
c-mpp-theme-layout:has(c-lwr-page-layout)
	dxp_data_provider-user-record-data-provider,
c-mpp-theme-layout:has(c-lwr-page-layout) dxp_data_provider-data-proxy,
c-mpp-theme-layout:has(c-lwr-page-layout)
	dxp_data_provider-decision-data-provider,
c-mpp-theme-layout:has(c-lwr-page-layout) community_layout-slds-flexible-layout,
c-mpp-theme-layout:has(c-lwr-page-layout) experience-data-layer-object {
	display: contents;
}

c-mpp-theme-layout:has(c-lwr-page-layout) community_layout-hidden-region {
	position: absolute !important;
}

c-mpp-theme-layout:has(c-lwr-page-layout) .content-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

community_layout-section.comm-section-container:has(c-lwr-page-layout) {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}

community_layout-section:has(c-lwr-page-layout) .columns-content {
	flex: 1 1 auto;
	min-height: 0;
}

community_layout-column:has(c-lwr-page-layout) {
	flex-grow: 1 !important;
}

community_layout-column:has(c-lwr-page-layout) > .column-content {
	flex: 1 1 auto !important;
	min-height: 0;
}

community_layout-column:has(c-lwr-page-layout)
	> .column-content
	> :not(:has(c-lwr-page-layout)) {
	flex: 0 0 auto;
}

community_layout-column:has(c-lwr-page-layout)
	> .column-content
	:has(c-lwr-page-layout) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/*
 * /pro embedded Pro portal. The page body is one absolute-fill iframe host
 * (c-new-pharma-programs-frame) dropped in a Builder column, anchored to the
 * viewport-contained content region c-mpp-pro-theme-layout provides. The
 * framework's section wrapper (.columns-content) is itself position:relative
 * with no height, so without help the absolute host collapses to 0 against
 * it. Collapse the inline data-provider wrappers with display:contents and
 * run height down the section chain, so the host's containing block becomes
 * the full content region. Scoped under c-mpp-pro-theme-layout, which only
 * the Pro page uses; applies at every width — the framed app owns its own
 * responsive behaviour.
 */
c-mpp-pro-theme-layout webruntime-router-container,
c-mpp-pro-theme-layout dxp_data_provider-user-data-provider,
c-mpp-pro-theme-layout dxp_data_provider-data-proxy,
c-mpp-pro-theme-layout dxp_data_provider-decision-data-provider,
c-mpp-pro-theme-layout community_layout-slds-flexible-layout,
c-mpp-pro-theme-layout experience-data-layer-object {
	display: contents;
}

c-mpp-pro-theme-layout community_layout-hidden-region {
	position: absolute !important;
}

c-mpp-pro-theme-layout .content-container,
c-mpp-pro-theme-layout community_layout-section.comm-section-container,
c-mpp-pro-theme-layout community_layout-section .columns-content {
	height: 100%;
}