/* Questions and next steps (the section with the CSS class qc-owner-questions; built
   by tools/divi/layouts/owner-questions.php). Only what Divi's own settings cannot
   express: colours, type, the dots, the sky card, the tiles and every gap are set on
   the modules in Divi. Low specificity on purpose, so a setting made in Divi wins. */

/* Divi's theme puts 10px of padding under every heading and has no setting for it.
   The old build had none; the gaps under the headings are set on the modules. */
.qc-owner-questions .et_pb_heading_container h2,
.qc-owner-questions .et_pb_heading_container h3 {
	padding-bottom: 0;
}

/* brand.css balances the line breaks of every h3; the old build balanced only h1 and
   h2, so the next-steps headline breaks where it used to. */
.qc-owner-questions .et_pb_heading_container h3 {
	text-wrap: wrap;
}

/* Each question (an item of the Icon List with the class qc-questions): 14px above and
   below, a thin grey rule under it, the dot 14px from the text (the old .questions li).
   Set here rather than on each item so a question added in Divi looks like the rest. */
.qc-questions.et_pb_icon_list .et_pb_icon_list_item {
	--horizontal-gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid #e3e6e8;
}

/* The dot sits level with the first line of a long question, not halfway down it
   (its size, colours and 4px top margin are the list's Icon settings in Divi). */
.qc-questions .et_pb_icon_list_item .et-pb-icon {
	align-self: flex-start;
}

/* The old grid split the questions and the next steps 1.1 : 1 (with the 56px gap).
   Divi's column widths come in 24ths, so on desktop this restores the old split;
   tablets and phones stack as before. The Business owners row with no next-steps
   card (class qc-oq-contents: headline left, questions right) keeps Divi's widths. */
@media (min-width: 981px) {
	.qc-owner-questions > .et_pb_row:not(.qc-oq-contents) > .et_pb_column:first-child { width: calc((100% - 56px) * 1.1 / 2.1) !important; }
	.qc-owner-questions > .et_pb_row:not(.qc-oq-contents) > .et_pb_column:last-child { width: calc((100% - 56px) / 2.1) !important; }
}

/* The questions as links (the Text module with the CSS class qc-question-links, on
   Business owners): the same dot, rule and spacing as the Icon List above, so the two
   look alike. Each whole line is the link; hovering underlines it in the brand blue.
   Set here so a question added in Divi (a new line in the list) gets them too. */
.qc-question-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.qc-question-links li {
	position: relative;
	margin: 0;
	padding: 14px 0 14px 30px;
	border-bottom: 1px solid #e3e6e8;
}
.qc-question-links li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid #009ad9;
	border-radius: 50%;
	background: #e9f6fd;
}
.qc-question-links a {
	display: block;
	text-decoration: none;
}
.qc-question-links a:hover {
	text-decoration: underline;
	text-decoration-color: #009ad9;
	text-underline-offset: 4px;
}