/* Questar brand defaults for Divi 5. Kept deliberately small and low-specificity:
   anything set on a module in Divi overrides these, so editors stay in control.
   Palette: ink #0f154a, navy #171d64, deep #005f9f, blue #009ad9, sky #e9f6fd,
   paper #f4f6f9, slate #626f78, text #232746. Small text never uses the brand blue,
   which is too light for WCAG AA at that size: it takes the text blue #0074ad. Slate
   was #73818b until 2026-10-09; darkened for the same reason. */

/* The blue behind white text on buttons styled here (Client login), the same as
   DV_BLUE_DEEP to DV_BLUE_END in tools/divi/lib.php: dark enough for white text to
   pass WCAG AA all the way across. */
:root {
	--qc-blue-gradient: linear-gradient(135deg, #005f9f 0%, #007cb9 100%);
}

/* Buttons with a gradient: paint it under the border too. Divi starts the gradient
   inside the border, so the transparent 1.5px border showed a thin rim of one flat
   blue round the button, most visible along its darker top-left edge. */
.et_pb_button,
.et_pb_contact_submit,
.et_pb_contact_form .et_pb_button {
	background-origin: border-box;
}

/* Line height as a proportion, as on the old site. Divi prints it in em on body, which hands
   small text the body's pixel line height; unitless lets every size scale. */
html body {
	line-height: 1.65;
}

/* Type. Headings use the licensed Helvetica Neue kit; body text is Montserrat (set in the Customizer). */
h1, h2, h3 {
	font-family: "Helvetica Neue LT W05_43 Lt Ex", Archivo, "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	letter-spacing: -.01em;
	line-height: 1.12;
	color: #171d64;
	text-wrap: balance;
}
h1 { font-size: 46px; line-height: 1.1; }
h2 { font-size: clamp(28px, 3vw, 38px); }
h3 {
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
@media (max-width: 700px) {
	h1 { font-size: 34px; }
	h2 { font-size: 28px; }
	h3 { font-size: 18px; }
}
h4 {
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: #171d64;
}

/* Page backdrop (see functions.php): the page's Featured Image under the navy overlay,
   on a layer fixed behind the page. A fixed layer rather than a fixed background,
   because iPhones and iPads ignore background-attachment: fixed. A page without a
   Featured Image is plain navy, so its white headline and menu stay readable. */
body.page {
	background-color: #0f154a;
}
/* On a single media item Divi paints its content area white, which would cover the
   photo; with a backdrop the content area is clear, as it is on pages. */
body.qc-backdrop #main-content {
	background-color: transparent;
}
body.qc-backdrop::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: #0f154a;
	background-image: linear-gradient(160deg, rgba(15, 21, 74, .62) 0%, rgba(15, 21, 74, .42) 60%, rgba(15, 21, 74, .56) 100%), var(--qc-backdrop, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
/* Phones and reduced motion: the photo becomes a 720px band at the top (filling the
   width whatever the photo's shape) and the cards sit on paper below it. */
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
	body.qc-backdrop {
		background-color: #f4f6f9;
	}
	body.qc-backdrop::before {
		position: absolute;
		bottom: auto;
		height: 720px;
	}
}

/* Pillars (blurbs with the class qc-pill): a blue rule beside the title. */
.qc-pill h4,
.qc-pill .et_pb_module_header {
	border-left: 3px solid #009ad9;
	padding-left: 16px;
	padding-bottom: 0;
	margin-bottom: 6px;
}
.qc-pill .et_pb_blurb_description {
	padding-left: 19px;
}

/* Header menu: links 28px apart, the current page underlined in white. */
.et-l--header .et_pb_menu .et-menu > li {
	padding-left: 14px;
	padding-right: 14px;
}
.et-l--header .et_pb_menu .et-menu > li.current-menu-item:not(.qc-menu-button) > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
}
/* "Client login" (the menu item with the CSS class qc-menu-button) shows as the blue
   gradient button, centred in the bar, with no dropdown arrow; its portals open on hover. */
.et-l--header .et_pb_menu .et-menu > li.qc-menu-button {
	align-self: center;
	display: flex;
	align-items: center;
	padding-right: 0;
}
.et-l--header .et_pb_menu .et-menu > li.qc-menu-button > a {
	background: var(--qc-blue-gradient);
	color: #ffffff !important;
	font-weight: 600;
	border-radius: 6px;
	padding: 11px 18px !important;
	line-height: 1.17;
	height: auto;
	align-self: center;
	opacity: 1 !important;
}
.et-l--header .et_pb_menu .et-menu > li.qc-menu-button > a::after {
	display: none;
}
.et-l--header .et_pb_menu .et-menu > li.qc-menu-button > a:hover {
	background: #005f9f;
}
/* The menu that opens from the menu button starts at the bottom of the header bar,
   clear of the logo (Divi lines it up with the logo's bottom, 5px higher). */
.et-l--header .et_pb_menu .et_mobile_menu {
	margin-top: 5px;
	/* On a short screen (a phone held sideways) the menu scrolls within itself,
	   so every link stays reachable. */
	max-height: calc(100vh - 130px);
	overflow-y: auto;
}
/* In that menu, "Client login" keeps its button look. */
.et-l--header .et_mobile_menu li.qc-menu-button > a {
	display: inline-block;
	background: var(--qc-blue-gradient);
	color: #ffffff !important;
	font-weight: 600;
	border-radius: 6px;
	padding: 11px 18px !important;
	margin: 8px 0 4px 5%;
}
/* Its two portal links open under the button, lined up with its right edge, so they
   stay on screen when the button sits near the edge of a narrower window. */
.et-l--header .et_pb_menu .et-menu > li.qc-menu-button > .sub-menu {
	left: auto;
	right: 0;
}
/* Dropdowns (under Private Wealth, Business Owners and Media & Insights; set in
   Appearance > Menus by nesting links under a main item). No arrow beside the main
   item, as on the Client Login button and on WealthPoint's menu: Divi's arrow adds
   20px per item, and three of them would push the menu onto a second line at every
   width. Each opens on hover, and also when the main item has keyboard focus. */
.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a:first-child {
	padding-right: 0;
}
.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a::after {
	display: none;
}
.et-l--header .et_pb_menu .et-menu li.menu-item-has-children:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}
/* Dropdown panel (2026-10-09, Zach: "soften the edges ... consistent with the site's
   premium theme"): a navy panel floating 10px below the bar, with 12px corners like
   the cards, a fine light edge instead of Divi's 3px blue line, and a soft shadow.
   It is as wide as its longest link, so "Exit Readiness Assessment" stays on one line.
   Divi shows a dropdown's links as inline blocks (its fixed 240px width is what
   stacked them), so with a fitted width each link is made a block of its own. The
   edge colour matches the Menu module's dropdown line colour in Divi. */
.et-l--header .et_pb_menu .et-menu > li > .sub-menu {
	width: max-content;
	min-width: 220px;
	margin-top: 10px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 12px;
	background: linear-gradient(160deg, #141a58, #0f154a);
	box-shadow: 0 18px 40px rgba(5, 9, 40, 0.45), 0 2px 8px rgba(5, 9, 40, 0.3);
}
/* An invisible strip over the 10px gap, so the pointer can cross from the menu item
   to the panel without the panel closing. */
.et-l--header .et_pb_menu .et-menu > li > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}
.et-l--header .et_pb_menu .et-menu > li > .sub-menu > li {
	display: block;
	padding: 0;
}
.et-l--header .et_pb_menu .et-menu > li > .sub-menu a {
	width: auto;
	white-space: nowrap;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.9) !important;
	opacity: 1 !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.et-l--header .et_pb_menu .et-menu > li > .sub-menu a:hover,
.et-l--header .et_pb_menu .et-menu > li > .sub-menu a:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff !important;
}
/* The menu the menu button opens gets the same soft corners and fine edge. */
.et-l--header .et_pb_menu .et_mobile_menu {
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(5, 9, 40, 0.45);
}
@media (prefers-reduced-motion: reduce) {
	.et-l--header .et_pb_menu .et-menu > li > .sub-menu a {
		transition: none;
	}
}
/* In the menu the menu button opens, a group's links start hidden behind a toggle
   beside the main item (assets/js/menu-button.js adds it): a 44px target with a
   chevron that turns when the group is open. */
.et-l--header .et_mobile_menu li.qc-sub-collapsible {
	position: relative;
}
.et-l--header .et_mobile_menu li.qc-sub-collapsible > a {
	padding-right: 52px !important;
}
.et-l--header .et_mobile_menu li.qc-sub-collapsible > .sub-menu {
	display: none !important;
}
.et-l--header .et_mobile_menu li.qc-sub-collapsible.qc-sub-open > .sub-menu {
	display: block !important;
}
.et-l--header .et_mobile_menu .qc-sub-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}
.et-l--header .et_mobile_menu .qc-sub-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform 0.2s ease;
}
.et-l--header .et_mobile_menu li.qc-sub-open > .qc-sub-toggle::before {
	transform: translate(-50%, -30%) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
	.et-l--header .et_mobile_menu .qc-sub-toggle::before {
		transition: none;
	}
}
/* The full menu needs about 1202px since its labels went to title case and "In the
   news" became "Media & Insights" (2026-10-09; it needed about 1180px before). Below
   that it would wrap onto a second line, so the header shows the menu button instead,
   with Divi's own rules for 980px and down (the old site switched at 1100px). The
   switch is at 1240px, leaving room for fonts that render a little wider on other
   computers. If links are added to the menu or made longer, this width must grow
   with them: narrow the window and raise 1239.98px to a little above the point where
   the links start to wrap. */
@media (min-width: 981px) and (max-width: 1239.98px) {
	.et-l--header .et_pb_menu .et_pb_menu__menu {
		display: none;
	}
	.et-l--header .et_pb_menu .et_mobile_nav_menu {
		float: none;
		margin: 0 6px;
		display: flex;
		align-items: center;
	}
	.et-l--header .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
		justify-content: flex-end;
	}
	.et-l--header .et_pb_menu .et_mobile_menu {
		top: 100%;
		padding: 5%;
	}
	.et-l--header .et_pb_menu .et_mobile_menu,
	.et-l--header .et_pb_menu .et_mobile_menu ul {
		list-style: none !important;
		text-align: left;
	}
	.et-l--header .et_pb_menu .et_mobile_menu ul {
		padding: 0;
	}
}

/* Keyboard focus: a two-tone ring (white inside deep blue) on every link, button and
   field, so it shows on white cards and on the navy header, cards and footer alike.
   The transparent outline is what Windows high-contrast mode draws instead. */
:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #005f9f !important;
}

/* Footer (the section with the CSS class qc-footer). On Divi's archive pages (the
   Media & Insights list) Divi adds "#et-boc .et-l a" style rules that would turn the
   footer's links deep blue and its headings navy on the navy footer, so the colour
   rules below are repeated with that prefix. */
.qc-footer,
.qc-footer p,
.et-db #et-boc .et-l .qc-footer p {
	color: rgba(255, 255, 255, .78);
	font-size: 14px;
	line-height: 1.6;
}
.qc-footer h3,
.et-db #et-boc .et-l .qc-footer h3 {
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 12px;
	padding: 0;
}
.qc-footer ul {
	list-style: none;
	margin: 0;
	padding: 0 !important;
}
.qc-footer li {
	margin: 0 0 8px;
}
.qc-footer a,
.et-db #et-boc .et-l .qc-footer a {
	color: rgba(255, 255, 255, .78);
}
.qc-footer a:hover,
.et-db #et-boc .et-l .qc-footer a:hover {
	color: #ffffff;
}
.qc-footer .qc-logins a {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 6px;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 500;
	margin: 6px 10px 0 0;
}
.qc-footer .qc-partner {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 18px;
}
.qc-footer .qc-partner img {
	height: 30px;
	width: auto;
	border-radius: 4px;
}
.qc-footer .qc-legal,
.qc-footer .qc-legal p,
.et-db #et-boc .et-l .qc-footer .qc-legal p {
	color: rgba(255, 255, 255, .55);
	font-size: 12.5px;
}
.qc-footer .qc-legal a {
	margin-right: 28px;
}