/*
 * Single blog post - visual reproduction of Divi's single.php.
 *
 * Layout values come from Divi's own stylesheet
 * (wp-content/themes/Divi/style-static.min.css):
 *   .container  80% wide, capped at 1080px, 58px of top padding
 *   #left-area  79.125% with a 5.5% right gutter
 *   #sidebar    20.875% with 30px of left padding
 *   the 1px #e2e2e2 rule sits on .container:before at right: 20.875%
 *
 * Typography comes from the Divi customizer settings still in wp_options
 * (et_divi): Noto Sans, body 16px/1.7em weight 300 in #666, headings weight
 * 600 in #333 with h1 at 32px and h2-h6 derived from it the way Divi derives
 * them (x .86, .73, .6, .53, .47).
 */

.eldm-single,
.eldm-single *,
.eldm-single *:before,
.eldm-single *:after {
	box-sizing: border-box;
}

.eldm-single {
	background-color: #fff;
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7em;
	color: #666;
}

/* -------------------------------------------------------------- layout --- */

.eldm-single .eldm-container {
	position: relative;
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding-top: 58px;
	text-align: left;
}

/* Divi's divider between post and sidebar. */
.eldm-single .eldm-container:before {
	content: "";
	position: absolute;
	top: 0;
	right: 20.875%;
	height: 100%;
	width: 1px;
	background-color: #e2e2e2;
}

.eldm-single .eldm-content-area:after {
	content: "";
	display: table;
	clear: both;
}

.eldm-single .eldm-left-area {
	float: left;
	width: 79.125%;
	padding-right: 5.5%;
	padding-bottom: 23px;
}

.eldm-single .eldm-sidebar {
	float: left;
	width: 20.875%;
	padding-left: 30px;
	padding-bottom: 28px;
}

/* ---------------------------------------------------------- typography --- */

.eldm-single p {
	margin: 0;
	padding-bottom: 1em;
}

/* Divi drops the trailing gap after the last paragraph of any block, which is
   what closes the space between the post content and the comment section. */
.eldm-single p:not(.has-background):last-of-type {
	padding-bottom: 0;
}

.eldm-single h1,
.eldm-single h2,
.eldm-single h3,
.eldm-single h4,
.eldm-single h5,
.eldm-single h6 {
	margin: 0;
	padding-bottom: 10px;
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-weight: 600;
	line-height: 1em;
	color: #333;
}

.eldm-single h1 { font-size: 32px; }
.eldm-single h2 { font-size: 27px; }
.eldm-single h3 { font-size: 23px; }
.eldm-single h4 { font-size: 19px; }
.eldm-single h5 { font-size: 16px; }
.eldm-single h6 { font-size: 15px; }

.eldm-single a {
	color: #2ea3f2;
}

.eldm-single img {
	max-width: 100%;
	height: auto;
}

/* Divi strips list styling globally and puts it back inside the post column
   only, which is why the sidebar lists have no bullets and no indent. */
.eldm-single ul,
.eldm-single ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eldm-single .eldm-left-area ul {
	list-style-type: disc;
	padding: 0 0 23px 1em;
	line-height: 26px;
}

.eldm-single .eldm-left-area ol {
	list-style-type: decimal;
	list-style-position: inside;
	padding: 0 0 23px;
	line-height: 26px;
}

.eldm-single .eldm-left-area ul li ul,
.eldm-single .eldm-left-area ul li ol {
	padding: 2px 0 2px 20px;
}

.eldm-single .eldm-left-area ol li ul,
.eldm-single .eldm-left-area ol li ol {
	padding: 2px 0 2px 35px;
}

.eldm-single blockquote {
	margin: 20px 0 30px;
	border-left: 5px solid #2ea3f2;
	padding-left: 20px;
}

.eldm-single blockquote p {
	padding-bottom: 0;
}

.eldm-single .entry-content table:not(.variations) {
	border: 1px solid #eee;
	margin: 0 0 15px;
	text-align: left;
	width: 100%;
	border-collapse: collapse;
}

.eldm-single .entry-content thead th,
.eldm-single .entry-content tr th {
	color: #555;
	font-weight: 700;
	padding: 9px 24px;
}

.eldm-single .entry-content tr td {
	border-top: 1px solid #eee;
	padding: 6px 24px;
}

/* ---------------------------------------------------------------- post --- */

/* Divi's .et_pb_post: the gap between the comment form and the footer. */
.eldm-single .eldm-post {
	margin-bottom: 60px;
	padding-bottom: 25px;
	word-wrap: break-word;
}

/* Divi's #left-area .post-meta out-specifies the p:last-of-type rule above,
   so the meta line keeps its gap above the featured image. The selector here
   is deliberately specific enough to do the same. */
.eldm-single .eldm-left-area .eldm-post-meta-wrapper p.post-meta {
	font-size: 14px;
	padding-bottom: 15px;
	/* Divi's .et_pb_post .post-meta adds this on top of the padding. */
	margin-bottom: 6px;
}

.eldm-single .post-meta,
.eldm-single .post-meta a {
	color: #666;
	text-decoration: none;
}

.eldm-single .entry-content {
	padding-top: 30px;
}

.eldm-single .page-links {
	padding-bottom: 1em;
}

/* ------------------------------------------------------------- sidebar --- */

.eldm-single .eldm-sidebar .et_pb_widget {
	width: 100%;
	float: none;
	margin-bottom: 30px;
}

.eldm-single .eldm-sidebar .et_pb_widget:last-child {
	margin-bottom: 0;
}

.eldm-single .et_pb_widget a {
	color: #666;
	text-decoration: none;
}

.eldm-single .et_pb_widget li a:hover {
	color: #82c0c7;
}

.eldm-single .et_pb_widget ul li,
.eldm-single .et_pb_widget ol li {
	margin-bottom: .5em;
}

.eldm-single .et_pb_widget ul li ul li,
.eldm-single .et_pb_widget ol li ol li {
	margin-left: 15px;
}

.eldm-single .et_pb_widget .wp-block-latest-comments__comment {
	line-height: 1.7em;
}

.eldm-single .et_pb_widget .wp-block-search__label {
	display: none;
}

.eldm-single .et_pb_widget .wp-block-search {
	position: relative;
}

.eldm-single .et_pb_widget .wp-block-search__input,
.eldm-single .et_pb_widget .wp-block-search__button {
	padding: .7em;
	height: 40px;
	margin: 0;
	font-size: 14px;
	line-height: normal;
	border: 1px solid #ddd;
	color: #666;
}

.eldm-single .et_pb_widget .wp-block-search__input {
	width: 100%;
	border-radius: 3px;
}

.eldm-single .et_pb_widget .wp-block-search__button {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	background-color: #ddd;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/* ------------------------------------------------------------ comments --- */

.eldm-single #comment-wrap {
	padding-top: 75px;
}

/* The comment list is not a numbered list, unlike the pingback list below it
   and the ordered lists in the post body; the selector has to out-specify the
   list styling those get. */
.eldm-single .eldm-left-area ol.commentlist,
.eldm-single .eldm-left-area .comment .children {
	list-style: none;
	line-height: 1.7em;
	padding: 0;
}

.eldm-single .comment-body {
	position: relative;
	padding: 0 110px 0 100px;
	margin-bottom: 48px;
	min-height: 87px;
}

.eldm-single .comment_avatar {
	position: absolute;
	left: 0;
	top: 7px;
}

.eldm-single .comment_avatar img {
	display: block;
	height: auto;
	max-width: 100%;
	width: auto;
}

.eldm-single .comment_postinfo {
	margin-bottom: 8px;
}

.eldm-single .comment_area .comment-reply-link {
	position: absolute;
	top: 7px;
	right: 0;
	display: block;
	color: #2ea3f2;
}

.eldm-single #trackbacks-title {
	padding-top: 20px;
}

.eldm-single #respond {
	padding-top: 17px;
}

.eldm-single #reply-title small {
	display: block;
	font-size: 14px;
	font-weight: 400;
}

.eldm-single #commentform {
	padding-bottom: 50px;
}

/* Divi hid the field labels and showed their text inside the field; the
   placeholder that replaces that trick is added in eldm-single-post-view.php.
   The cookies checkbox keeps its label, sitting inline beside the box. */
.eldm-single #commentform label {
	display: none;
}

.eldm-single #commentform .comment-form-cookies-consent label {
	display: inline;
}

.eldm-single #commentform input[type=email],
.eldm-single #commentform input[type=text],
.eldm-single #commentform input[type=url] {
	width: 47%;
}

.eldm-single #commentform textarea {
	width: 100%;
}

.eldm-single #commentform input[type=email],
.eldm-single #commentform input[type=text],
.eldm-single #commentform input[type=url],
.eldm-single #commentform textarea {
	padding: 12px;
	color: #999;
	line-height: 1em;
	background-color: #eee;
	font-size: 18px;
	border-width: 0;
	font-family: inherit;
}

.eldm-single .comment-form-cookies-consent label {
	display: inline;
}

.eldm-single .form-submit {
	text-align: right;
}

.eldm-single .form-submit .et_pb_button {
	display: inline-block;
	cursor: pointer;
	position: relative;
	font-size: 20px;
	font-weight: 500;
	padding: .3em 1em;
	line-height: 1.7em;
	background-color: transparent;
	border: 2px solid;
	border-radius: 3px;
	color: #2ea3f2;
	transition-duration: .2s;
	font-family: inherit;
}

.eldm-single .form-submit .et_pb_button:hover {
	background: rgba(0, 0, 0, .05);
}

/* Divi's button arrow is an ETmodules glyph. That font is a Divi asset the
   Elementor front end no longer loads, so the pseudo element is dropped
   rather than left to render as a stray character on hover. */
.eldm-single .form-submit .et_pb_button:after,
.eldm-single .comment-reply-link:after {
	display: none;
}

/* -------------------------------------------------------------- tablet --- */

/* Divi's .et_pb_post closes up to 42px below 1100px. */
@media only screen and (max-width: 1100px) {

	.eldm-single .eldm-post {
		margin-bottom: 42px;
	}
}

@media only screen and (max-width: 980px) {

	.eldm-single .eldm-container:before {
		display: none;
	}

	.eldm-single .eldm-left-area,
	.eldm-single .eldm-sidebar {
		float: none;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.eldm-single .eldm-sidebar {
		padding-top: 30px;
	}
}

/* --------------------------------------------------------------- phone --- */

@media only screen and (max-width: 767px) {

	.eldm-single .comment-body {
		padding: 0 0 0 100px;
	}

	.eldm-single #commentform input[type=email],
	.eldm-single #commentform input[type=text],
	.eldm-single #commentform input[type=url] {
		width: 100%;
		margin-left: 0;
	}

	/* Divi's phone comment layout: no right gutter, the reply link drops
	   under the comment, and replies indent half as far. */
	.eldm-single #comment-wrap li.comment article {
		padding-right: 0;
	}

	.eldm-single .comment_area .comment-reply-link {
		position: relative;
		float: right;
		top: auto;
		bottom: -10px;
	}

	.eldm-single .eldm-left-area .comment .children {
		margin-left: 50px;
	}
}

/* ------------------------------------------------------------ small phone --- */

@media only screen and (max-width: 479px) {

	/* Divi's .et_pb_post h2 { font-size: 16px; padding-bottom: 0 } - every h2 in
	   the post drops to body size on small phones. Leaving them at 27px made a
	   long post nearly 1000px taller than the live site at 390px. */
	.eldm-single .eldm-post h2 {
		font-size: 16px;
		padding-bottom: 0;
	}

	.eldm-single .comment-body {
		padding: 0 0 0 50px;
	}

	.eldm-single .eldm-left-area .comment .children {
		margin-left: 25px;
	}
}