/* The Night look (tools/divi/night.php; Direction B, chosen 2026-10-12). Colours,
   type, the glass panels (background, border, shadow, backdrop blur) and the layout
   are Divi settings on the modules. This file only holds what Divi has no setting
   for: the cuts along the Questar star's diagonal, the portraits' shape, the news
   cards' night style, the contact lines' night colours, and the page colour on phones. */

/* Phones and reduced motion: the page photo becomes a band at the top, as on every
   page, but a Night page stays night navy below it and the band fades into it. */
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
	body.qc-night-page.qc-backdrop {
		background-color: #0f154a;
	}
	body.qc-night-page.qc-backdrop::before {
		background-image: linear-gradient(180deg, rgba(15, 21, 74, .45) 0%, rgba(15, 21, 74, .6) 62%, #0f154a 100%), var(--qc-backdrop, none);
	}
}

/* The founders' portraits (Image modules with the class qc-night-portrait): taller
   than square, filled, and the top corner cut along the star's diagonal. Natural
   colour, as Zach asked. */
.qc-night-portrait .et_pb_image_wrap,
.qc-night-portrait img {
	display: block;
	width: 100%;
}
.qc-night-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 22%;
	clip-path: polygon(0 0, 72% 0, 100% 24%, 100% 100%, 0 100%);
}

/* A chapter's photograph (a column with the class qc-night-cut): its inner edge cut
   along the star's diagonal; qc-night-cut-flip when the photograph is on the right.
   From tablets down, where the photograph sits on top, its foot is cut instead. */
.qc-night-cut {
	clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
.qc-night-cut-flip {
	clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 980px) {
	.qc-night-cut,
	.qc-night-cut-flip {
		clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
	}
}

/* Phone and email lines (contact.css qc-contact-lines) on the night. */
.qc-night .qc-contact-lines a {
	border-top-color: rgba(255, 255, 255, .14);
	color: #ffffff;
}
.qc-night .qc-contact-lines a[href^="tel:"]::before,
.qc-night .qc-contact-lines a[href^="mailto:"]::before {
	background-color: #8fd3f4;
}
/* The form's sum and send button each stay on one line, wrapping as a pair on phones
   (on the night, and in the Contact page's light contact section). */
.qc-night .et_contact_bottom_container,
.qc-light.qc-night-contact .et_contact_bottom_container {
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}
.qc-night .et_pb_contact_right,
.qc-light.qc-night-contact .et_pb_contact_right {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
}
.qc-night .et_pb_contact_right p,
.qc-night .et_pb_contact_right label,
.qc-light.qc-night-contact .et_pb_contact_right p,
.qc-light.qc-night-contact .et_pb_contact_right label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	white-space: nowrap;
}
.qc-night .et_pb_contact_submit,
.qc-light.qc-night-contact .et_pb_contact_submit {
	margin: 0 !important;
	white-space: nowrap;
}
/* The form's thank-you and messages, readable on the glass. */
.qc-night .et-pb-contact-message,
.qc-night .et-pb-contact-message p,
.qc-night .et_pb_contact_captcha_question {
	color: rgba(255, 255, 255, .9);
}

/* News cards in the night style ([questar_news_cards look="night"], inc/structured.php):
   glass cards, pictures a little muted until the card is hovered, the outlet as a
   small light-blue label over a white headline. */
.qc-news-night .ncard,
.qc-news-night .ncard.feature {
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(3, 6, 30, .35);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	color: rgba(255, 255, 255, .8);
	transition: border-color .25s ease, transform .25s ease;
}
.qc-news-night .ncard:hover {
	border-color: rgba(143, 211, 244, .45);
	transform: translateY(-2px);
}
.qc-news-night .ncard .pic img {
	filter: saturate(.55) brightness(.9);
	transition: filter .35s ease, transform .5s ease;
}
.qc-news-night .ncard:hover .pic img {
	filter: none;
	transform: scale(1.03);
}
/* A badge keeps its own colours (news.css is-badge). */
.qc-news-night .ncard .pic.is-badge img {
	filter: none;
}
.qc-news-night .ncard .outlet {
	order: 0;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8fd3f4;
}
.qc-news-night .ncard .topic {
	margin: 8px 0 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.42;
	color: #ffffff;
}
.qc-news-night .ncard .by {
	color: rgba(255, 255, 255, .64);
}
.qc-news-night .ncard .by b {
	color: #ffffff;
}
.qc-news-night .ncard .textlink {
	color: #ffffff;
}
.qc-news-night .ncard .textlink svg {
	color: #8fd3f4;
}
.qc-news-night .ncard.feature .badge {
	border: 1px solid rgba(143, 211, 244, .3);
	background: rgba(143, 211, 244, .12);
	color: #8fd3f4;
}
.qc-news-night .ncard.feature h3 {
	color: #ffffff;
}
.qc-news-night .ncard.feature .fine {
	border-top-color: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .6);
}
.qc-news-night .ncard .pic .tile {
	background: linear-gradient(160deg, #131b5c 0%, #0f154a 100%);
}
.qc-news-night .news-more .outlets {
	color: rgba(255, 255, 255, .62);
}

/* Questions that link to the part of the page answering them (question-line.php on
   Business owners): white, with a fine light-blue underline; light blue on hover. */
.qc-night-questions a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(143, 211, 244, .5);
	text-underline-offset: 7px;
	transition: color .2s ease;
}
.qc-night-questions a:hover {
	color: #8fd3f4 !important;
}

/* The team as glass cards on the night ([questar_team_grid] in a Night section). */
.qc-night .qc-structured .person {
	border-color: rgba(255, 255, 255, .13);
	border-radius: 14px;
	background: rgba(255, 255, 255, .055);
	box-shadow: 0 24px 60px rgba(3, 6, 30, .35);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	transition: border-color .25s ease, transform .25s ease;
}
.qc-night .qc-structured .person:hover {
	border-color: rgba(143, 211, 244, .45);
	box-shadow: 0 24px 60px rgba(3, 6, 30, .35);
	transform: translateY(-2px);
}
.qc-night .qc-structured .person .name {
	color: #ffffff;
}
.qc-night .qc-structured .person .name a:hover {
	color: #8fd3f4;
}
.qc-night .qc-structured .person .creds {
	color: rgba(255, 255, 255, .64);
}
.qc-night .qc-structured .person .role {
	color: rgba(255, 255, 255, .8);
}
.qc-night .qc-structured .person .contact a {
	background: rgba(233, 246, 253, .95);
}
.qc-night .qc-structured .person .contact a:hover {
	background: #8fd3f4;
}

/* A bio's credentials and role ([questar_bio_lede]) under the name in the Night head. */
.qc-night .qc-bio-lede {
	max-width: 40em;
	margin: 18px 0 0;
	text-align: left;
}

/* The templates in the Night look (bios, Media & Insights, page not found) are not
   pages, so WordPress gives them no page background: night navy, as on the pages, so
   the menu stays readable even before the photo loads. */
body.single-qcp_team,
body.single-qcp_media,
body.post-type-archive-qcp_media,
body.tax-qcp_media_type,
body.error404 {
	background-color: #0f154a;
}

/* The advisor card's email, phone and podcast icons (bo-hero.css qc-bo-contact) in the
   light blue of the night. */
.qc-night .qc-bo-contact a::before {
	background-color: #8fd3f4;
}

/* What is inside the guide (guide.css qc-guide-list): light-blue rings on the glass. */
.qc-night .qc-guide-list li::before {
	background: transparent;
	border-color: #8fd3f4;
}

/* The questions in a light reading section (layouts/night/owners.php qc_night_faq):
   open rows on hairlines. The plus beside a closed question is Divi's own (its colour
   and size are the Accordion's Toggle Icon settings); Divi shows no icon on the open
   question, so it gets the matching minus here. */
.qc-faq-open .et_pb_toggle_title {
	padding-right: 44px;
}
.qc-faq-open.et_pb_accordion .et_pb_toggle_open > .et_pb_toggle_title:before {
	display: block;
	content: "\E04F";
	color: #005f9f;
	font-size: 18px;
}