/* $Id: 8704786ca70b82bf94a6e7b48d69056d328ed388 $ */

/* ============================================================================
   FULL-WIDTH LAYOUT DELTA — load AFTER layout.bs5.css (never on its own).

   layout.bs5.css is the contained (gutter'd) base layout. This file holds ONLY
   the rules that turn it into the full-bleed layout: the section backgrounds
   (HEADER / .main / FOOTER / bands) bleed edge-to-edge, and each section
   re-centers its content with an inner .container. Everything shared lives in
   layout.bs5.css — keep this file lean.

   Loaded by templates/pageHeader.bs5.cfm when variables.UseFullWidthLayout is
   true. Contained consumers (Employer header, vipDetails) load layout.bs5.css
   alone and are unaffected. Because this file loads after the base, plain
   (non-media) rules here override the base's responsive gutters via source
   order — no need to repeat every breakpoint.
   ============================================================================ */

/* Canvas takes the footer color so short pages bleed the footer to the bottom
   of the viewport; BODY stays white so the header->footer box (incl. the
   margin-collapse gap above .main) is filled white and no dark strip shows. */
HTML {
	background-color: #333;              /* footer color */
}
BODY {
	background-color: #fff;                /* base: #CCC */
}

/* Content is centered/capped by an inner .container per section; the section
   backgrounds bleed full width, so the page .container drops its white fill and
   its 0 side padding becomes a small 20px gutter. */
.container {
	background-color: transparent;         /* base: white */
	padding-left: 20px;                    /* base: 0 */
	padding-right: 20px;                   /* base: 0 */
}

/* Drop the contained 50px side gutters so sections bleed full width. Source
   order also neutralizes the base's 20px gutters at the <=767 / <=559 stops. */
HEADER,
.main,
#footer_divider,
FOOTER {
	padding-left: 0;
	padding-right: 0;
}

HEADER {
	padding-top: 0;                        /* base: 8px */
	padding-bottom: 0;                     /* base: 10px */
	background-color: #fff;
}

.main {
	background-color: #fff;
}

/* Banner bleeds full width; its content is re-centered by an inner .container. */
.main .banner {
	margin-left: 0;                        /* base: -50px bleed */
	margin-right: 0;
}
.main .banner > .container {
	position: relative;
	height: 100%;
}
.main .bannerSlogan {
	right: auto;                           /* base: 50px */
}
/* Override the base's unconditional 145px for the full-width banner, then restore
   the base's 95px on phones. Done as override + <=559 re-assert (rather than a
   >=560 guard) so the 559-560px fractional gap can't fall through to 145px. */
.main > .banner:first-child {
	height: 100px;                         /* base: 145px */
}
@media (max-width: 559px) {
	.main > .banner:first-child {
		height: 95px;                      /* match base phone height */
	}
}

/* Full-width bands bleed edge-to-edge; content centered by an inner .container. */
.main > .full-width {
	margin-left: 0;                        /* base: -50px bleed */
	margin-right: 0;
	padding-left: 0;                       /* base: 50px */
	padding-right: 0;
	overflow: hidden;
}
.main .blackbg {
	background-color: #000;
	color: #fff;
}

/* Flex child (col-xl beside the col-xl-auto sidebar): allow it to shrink below
   its content's min-content width so the xl sidebar lines up beside it. */
.main .content {
	min-width: 0;
}

/* Full-bleed band; content centered by an inner .container. */
.grid-inverted {
	margin-left: 0;                        /* base: -50px bleed */
	margin-right: 0;
	padding-left: 0;                       /* base: 50px */
	padding-right: 0;
}

/* Sidebar is a fixed 300px column beside fluid content at xl (>=1200px). Below
   xl it stacks full-width and the base's float rules flow its tiles. */
@media (min-width: 1200px) {
	.main .sidebar {
		width: calc(300px + var(--bs-gutter-x));
	}
}