/*
 Theme Name:        Divi Child | NanoCosmos
 Theme URI:         https://github.com/gorilla-devops/divi-nano
 Description:       A clean child theme for the Divi theme.
 Author:            Gorilla DevOps
 Author URI:        https://gorilladevops.com
 Template:          Divi
 Version:           1.2.28
 Text Domain:       divi-child
 GitHub Theme URI:  https://github.com/gorilla-devops/divi-nano
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Reset & Globals
2.0 - Typography
3.0 - Header
4.0 - Navigation
5.0 - Content
    5.1 - Blog Grid Layout
    5.2 - Blog Slider
    5.3 - Category Buttons
    5.4 - Blog Categories Menu
    5.5 - Blog Image Aspect Ratio
    5.6 - Blurb Positioning
    5.7 - Forms
6.0 - Sidebar
7.0 - Footer
8.0 - Components
    8.1 - CTA Buttons
    8.2 - Inline Buttons
    8.3 - Simpay Checkout
9.0 - Responsive / Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 - Reset & Globals
--------------------------------------------------------------*/

/*--------------------------------------------------------------
2.0 - Typography
--------------------------------------------------------------*/

/*--------------------------------------------------------------
3.0 - Header
--------------------------------------------------------------*/

/* SVG logo dimensions — prevent CLS and ensure visibility */
/* !important required to override Divi deferred CSS: .et_pb_menu__logo img { width:auto } */
.et_pb_menu__logo img[src$=".svg"] {
	width: 170px !important;
	height: auto !important;
	max-width: 170px !important;
}

@media only screen and (max-width: 980px) {
	.et_pb_menu__logo img[src$=".svg"] {
		width: 140px !important;
		height: auto !important;
		max-width: 140px !important;
	}
}

@media only screen and (max-width: 767px) {
	.et_pb_menu__logo img[src$=".svg"] {
		width: 120px !important;
		height: auto !important;
		max-width: 120px !important;
	}
}

/* Header action buttons */
.header-button-1 {
	background-color: #ef7d00;
	text-align: center;
}

.header-button-2 {
	background-color: #0f8dc8;
	text-align: center;
}

/* Button spacing in header row */
.ah-v33-header-v1-row .et_pb_button_module_wrapper {
	white-space: nowrap;
}

/* Close top bar */
#divi-close-bar:hover {
	cursor: pointer;
}

/*--------------------------------------------------------------
4.0 - Navigation
--------------------------------------------------------------*/

/* Custom menu breakpoint */
@media only screen and (max-width: 1460px) {
	.et_pb_menu .et_pb_menu__menu {
		display: none;
	}

	.et_mobile_nav_menu {
		display: block;
	}
}

/* Remove bullet points from submenu and left-align text */
.et_pb_menu .et_mobile_menu li {
	list-style-type: none;
	text-align: left;
}

/* Scrollable mobile menu */
.et_mobile_menu {
	overflow-y: scroll !important;
	max-height: 80vh !important;
}

/*--------------------------------------------------------------
5.0 - Content
--------------------------------------------------------------*/

/*--------------------------------------------------------------
5.1 - Blog Grid Layout
--------------------------------------------------------------*/

.new-blog-design article {
	display: grid;
	grid-template-columns: 48% 48%;
	gap: 4%;
}

.new-blog-design article .post-media {
	width: 100% !important;
	margin: 0 !important;
}

.new-blog-design article .post-media a.entry-featured-image-url {
	height: auto !important;
}

.new-blog-design article .post-media img {
	border-radius: 45px 0 45px 0;
}

.new-blog-design article .post-content {
	display: flex;
	flex-direction: column;
	width: 100% !important;
	margin: 0 !important;
	padding-bottom: 40px;
	position: relative;
}

.new-blog-design article .post-content h3.entry-title {
	order: 1;
	letter-spacing: 0;
}

.new-blog-design article .post-content p.post-meta {
	order: 0;
}

.new-blog-design article .post-content .post-data {
	order: 2;
}

.new-blog-design article .post-content .post-data p {
	line-height: 1.4 !important;
	font-size: 1.2rem;
}

.new-blog-design article .post-content span.post-categories a.el_category_term {
	padding: 0 3% !important;
	color: #0f8dc8;
	font-weight: 700;
}

.new-blog-design article .post-content span.post-categories a.el_category_term:hover {
	background: #ef7d00;
	color: #fff;
}

.new-blog-design article span.published {
	color: #ef7d00;
	font-size: 16px;
	font-weight: 600;
	position: absolute;
	bottom: 0;
	left: 0;
}

.new-blog-design article span.published::before {
	content: "";
	display: inline-block;
	height: 15px;
	width: 1.2px;
	background: #ef7d00;
	position: relative;
	margin-right: 5px;
	top: 2px;
}

@media only screen and (max-width: 1180px) {
	.new-blog-design article {
		grid-template-columns: 100%;
		gap: 4%;
	}

	.new-blog-design article .post-media {
		overflow: visible;
	}
}

@media only screen and (max-width: 767px) {
	.new-blog-design article .post-content span.post-categories a.el_category_term {
		padding: 0 2% !important;
		color: #0f8dc8;
		font-weight: 700;
		font-size: 14px;
	}
}

/*--------------------------------------------------------------
5.2 - Blog Slider
--------------------------------------------------------------*/

.new-blog-design-slider article .post-categories a.el_category_term {
	padding: 0 3% !important;
	font-weight: 700;
}

.new-blog-design-slider article .post-categories a.el_category_term:hover {
	background: #ef7d00 !important;
	color: #fff !important;
}

.new-blog-design-slider article .post-data p {
	line-height: 1.4 !important;
}

.new-blog-design-slider article h2.entry-title {
	border: none !important;
	margin: 0;
}

.new-blog-design-slider article p.post-meta span.et-pb-icon {
	display: none;
}

.new-blog-design-slider article p.post-meta span.published {
	border-left: 1.5px solid #ef7d00;
	padding-left: 5px;
}

.new-blog-design-slider article .post-content {
	padding-bottom: 12px !important;
}

/* Post navigation */
.nav-next {
	float: right;
	text-align: right;
}

/* Single post email signup */
.single-post-email label {
	line-height: 20px !important;
}

/*--------------------------------------------------------------
5.3 - Category Buttons
--------------------------------------------------------------*/

/* Category buttons in blog modules */
.et_pb_blog_extras_0 .et_pb_post.et_pb_post_extra .post-categories a,
.et_pb_blog_extras_0 .et_pb_post_extra.et_pb_no_thumb .post-categories a,
.new-blog-design-slider .post-categories a,
.new-blog-design article .post-content span.post-categories a {
	border-radius: 40px !important;
	border: 1px solid #f48220 !important;
	padding: 0 2% !important;
}

/* Filterable category buttons on blog pages */
.el-dbe-filterable-categories a {
	border-radius: 20px !important;
	border: 1px solid #f48220 !important;
}

/* Blog extras box extended style */
.box_extended .post-content,
.box_extended .post-media {
	border-radius: 50px;
}

/*--------------------------------------------------------------
5.4 - Blog Categories Menu
--------------------------------------------------------------*/

ul#menu-blog-categories {
	list-style: none;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	border-width: 0 !important;
	border-color: #f48220 !important;
	padding: 4px 12px;
	font-size: 16px;
}

ul#menu-blog-categories a {
	width: 100%;
	justify-content: flex-start;
	align-items: center;
}

ul#menu-blog-categories a span {
	width: 100%;
	color: #777;
}

ul#menu-blog-categories a span.et-pb-icon {
	width: auto;
	color: #ef7d00;
	font-size: 36px !important;
}

ul#menu-blog-categories ul.sub-menu {
	list-style: none;
	padding-bottom: 20px;
}

/*--------------------------------------------------------------
5.5 - Blog Image Aspect Ratio
--------------------------------------------------------------*/

@media only screen and (min-width: 867px) {
	.pa-blog-image-1-1 .entry-featured-image-url img {
		max-width: 80%;
	}

	.pa-blog-image-1-1 .entry-featured-image-url {
		padding-top: 16%;
		padding-bottom: 20%;
		padding-left: 25%;
		display: block;
	}
}

/*--------------------------------------------------------------
5.6 - Blurb Positioning
--------------------------------------------------------------*/

.custom_post .et_pb_blurb_position_left .et_pb_blurb_container,
.custom_post .et_pb_blurb_position_right .et_pb_blurb_container {
	vertical-align: middle;
	position: relative;
	top: 4px;
}

.custom_post_mobile .et_pb_blurb_position_left .et_pb_blurb_container,
.custom_post_mobile .et_pb_blurb_position_right .et_pb_blurb_container {
	vertical-align: middle;
	position: relative;
	top: 2px;
}

/*--------------------------------------------------------------
5.7 - Forms
--------------------------------------------------------------*/

/* Hide form title (needed for Automator, hidden on frontend) */
.et_pb_contact_main_title {
	display: none;
}

/* Form success message */
.et-pb-contact-message p {
	text-align: center;
	color: #fff !important;
}

/* Contact form dropdown arrow */
.et_pb_contact_field[data-type=select]::after {
	border-top-color: #fff;
}

/*--------------------------------------------------------------
6.0 - Sidebar
--------------------------------------------------------------*/

/*--------------------------------------------------------------
7.0 - Footer
--------------------------------------------------------------*/

/* 2-column tablet layout */
@media all and (min-width: 768px) and (max-width: 980px) {
	html .et-db .two-col-tab .et_pb_column {
		width: 47.25% !important;
	}

	.two-col-tab .et_pb_column:nth-last-child(-n+2) {
		margin-bottom: 0;
	}

	html .et-db .two-col-tab .et_pb_column:not(:nth-child(2n)) {
		margin-right: 5.5% !important;
	}
}

/* 2-column mobile layout */
@media all and (max-width: 767px) {
	html .et-db .two-col-mob .et_pb_column {
		width: 47.25% !important;
	}

	html .et-db .two-col-mob .et_pb_column:nth-last-child(-n+2) {
		margin-bottom: 0;
	}

	html .et-db .two-col-mob .et_pb_column:not(:nth-child(2n)) {
		margin-right: 5.5% !important;
	}
}

/*--------------------------------------------------------------
8.0 - Components
--------------------------------------------------------------*/

/*--------------------------------------------------------------
8.1 - CTA Buttons
--------------------------------------------------------------*/

.cta-button1,
.cta-button2 {
	border-radius: 40px;
	background: #f48220;
	transition: all 0.3s 0s;
}

.cta-button1 a,
.cta-button2 a {
	padding: 15px 32px;
	color: white !important;
}

.cta-button1:hover,
.cta-button2:hover {
	transform: scale(1.1);
	transition: all 0.2s 0s;
}

@media (max-width: 980px) {
	.cta-button1,
	.cta-button2 {
		line-height: 1.2;
		text-align: center;
	}
}

/*--------------------------------------------------------------
8.2 - Inline Buttons
--------------------------------------------------------------*/

/* Place button modules next to each other in the same column */
.pa-inline-buttons .et_pb_button_module_wrapper {
	display: inline-block;
}

/*--------------------------------------------------------------
8.3 - Simpay Checkout
--------------------------------------------------------------*/

.simpay-checkout-btn {
	background-color: #f48220 !important;
}

.simpay-checkout-btn:hover {
	background-color: #f48220 !important;
}

/*--------------------------------------------------------------
9.0 - Responsive / Media Queries
--------------------------------------------------------------*/