/**
 * Shared template styles (M8), loaded on every page after the site's CSS.
 *
 * 1. Rules moved from the style elements the brand and product templates printed
 *    in the page body (not valid there).
 * 2. Headings whose level changed so headings go in order (AUD-05, AUD-10): each
 *    rule gives the element exactly the look it had at its old level.
 */

/* stylelint-disable selector-class-pattern -- the templates' existing class names; M8 does not rename classes. */

/* 1. Related product boxes (brand and product pages). */
.related_outer {
	display: flex;
}

/* Only the brand and product pages' boxes (inside .related_outer); the category
   and archive pages' boxes never had this rule. */
.related_outer .related_boxes {
	display: flex;
	flex-direction: column;
}

.related__h4 {
	flex-grow: 1;
	padding: 0 10px;
}

.related_btn {
	padding: 0 10px !important;
	display: block;
	margin: 40px 0 0 !important;
}

/* 2. Related product names: now H2 or H3 (were H4). */
.related_boxes .related__h4 {
	margin: 10px 0;
	color: #1a1a1a;
	font-family: rubik, sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.2;
}

/* Brand pages (.services_front): the kicker above the title is now a <p> (was
   an H5), the title an H2 (was an H3) and the info box titles H3s (were H6s). */
.services_front .page-sub-title {
	margin: 0 0 8px;
}

.services_front .page-main-title {
	margin: 0 0 8px;
	color: #000;
	font-family: Poppins, sans-serif;
}

.services_front .right_box .eenergy-box-title {
	margin: 0 0 0.8em;
	color: #1a1a1a;
	font-family: Poppins, sans-serif;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Category pages: the kicker above the title is now a <p> (was an H5) and the
   title an H2 (was an H3). The heat pump page's rules in styles.css set the
   kicker's size; the pellet and wood fire pages used the theme's plain H5 and
   H3 sizes (style.css), so those are repeated here. */
.services_heatpump .page-sub-title,
.services_pellet_fire .page-sub-title,
.services_wood_fire .page-sub-title {
	margin: 0 0 8px;
}

.services_pellet_fire .page-sub-title,
.services_wood_fire .page-sub-title {
	color: var(--eenergy-green-text);
	font-family: Poppins, sans-serif;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
}

.services_wood_fire .page-main-title {
	color: #000;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
}

@media (width >= 768px) {
	.services_pellet_fire .page-sub-title,
	.services_wood_fire .page-sub-title {
		font-size: 3.5rem;
	}

	.services_wood_fire .page-main-title {
		font-size: 1.5rem;
	}
}

/* Plain content pages (template-parts/eenergy-generic-page.php): nested lists
   are lettered. Was a style element in page.php, privacy.php and the default
   page template. */
.eenergy-generic-page ol ol {
	list-style-type: lower-alpha;
}

/* About page: the section titles are now H2s (were H3s, after the H1); same
   look as the theme's plain H3 (style.css), not .video_testimonial h2. */
.video_testimonial .eenergy-about__title {
	color: #000;
	font-family: Poppins, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
}

@media (width >= 768px) {
	.video_testimonial .eenergy-about__title {
		font-size: 1.5rem;
	}
}

/* Headings that keep the theme's plain H4 look (style.css) at another level,
   e.g. the servicing page's sub-titles, now H3s after an H2. */
h3.eenergy-h4-look {
	margin: 0 0 0.5rem;
	color: #000;
	font-family: Poppins, sans-serif;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.2;
}

@media (width >= 768px) {
	h3.eenergy-h4-look {
		font-size: 4rem;
	}
}

/* The [green_tick] shortcode (includes/shortcodes.php); was a style element
   the shortcode printed each time it was used. */
.greentick-ul__inner ul {
	list-style: none;
	padding-left: 0;
}

.greentick-ul__inner li {
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
}

.greentick-ul__inner li span {
	display: flex;
}

.greentick-ul__inner li .icon {
	margin-right: 0.75rem;
	font-size: 1.5rem;
	background-image: url("../img/greentick.png");
	height: 40px;
	width: 48px;
}

/* Custom Pages with the contact form: the template printed this unscoped rule
   with the form, so it applied to every H5 on the page. */
.eenergy-custom-form h5 {
	font-size: 2.5rem;
	text-transform: capitalize;
}

/* Its form title is now an H2 (was an H5 after the H1); same look as before. */
.eenergy-custom-form h2.custom-page__h5 {
	margin: 0 0 0.5rem;
	color: var(--eenergy-green-text);
	font-family: Poppins, sans-serif;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: capitalize;
}

/* Testimonials page reviews: the customer's town is now a <p> (was an H6, out
   of order); same look as before. (The "Customer Reviews" heading is an H3
   with .eenergy-h4-look; the name, a <p>, already looked the same.) */
.testimonial-slider p.eenergy-review__city {
	margin-bottom: 0.5rem;
	font-family: Poppins, sans-serif;
	font-size: 1rem;
}

@media (width >= 768px) {
	.testimonial-slider p.eenergy-review__city {
		font-size: 1.5rem;
	}
}

/* Heat pumps archive: the info box titles are now H3s (were H6s), right
   aligned as in .services_heatpump. */
.services_heatpump .right_box .eenergy-box-title {
	margin: 0 0 0.8em;
	color: #1a1a1a;
	font-family: Poppins, sans-serif;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 1.4;
	text-align: right;
	text-transform: uppercase;
}

/* Widget titles: now H2s (were the parent theme's H3s); same look as the
   theme's plain H3 (style.css). */
h2.widget-title {
	margin: 0 0 0.5rem;
	color: #000;
	font-family: Poppins, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
}

@media (width >= 768px) {
	h2.widget-title {
		font-size: 1.5rem;
	}
}