/* ==========================================================================
   BFCM Automation Guide Styles
   ========================================================================== */

/* --- Navigation Overrides --- */
#nav {
	background: white;
}

#nav .container .logo .logoDark {
	opacity: 1 !important;
	animation: none !important;
	-webkit-animation: none !important;
}

#nav .container .logo .logoLight {
	opacity: 0 !important;
	animation: none !important;
	-webkit-animation: none !important;
}

#nav .container .content .links li a {
	color: #112867;
}

#nav .container #toggleMobileNav .icon:before,
#nav .container #toggleMobileNav .icon:after,
#nav .container #toggleMobileNav .icon span {
	background: #3E4A57;
}

/* --- Hero Section --- */
#hero.section {
	margin-top: 70px;
	padding-bottom: 80px;
}

#hero.bfcm-automation-guide-hero {
	background-image: url('../images/bfcm-automation-guide/hero.webp'), radial-gradient(circle at 50% 20%, #1621B9 0%, #112867 60%);
	background-size: 2200px auto, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	min-height: 681px;
	width: 100%;
}

/* Fallback for browsers that don't support WebP */
.no-webp #hero.bfcm-automation-guide-hero {
	background-image: url('../images/bfcm-automation-guide/hero.png'), radial-gradient(circle at 50% 20%, #1621B9 0%, #112867 60%);
}

/* High-resolution displays (2x) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#hero.bfcm-automation-guide-hero {
		background-image: url('../images/bfcm-automation-guide/hero-2x.webp'), radial-gradient(circle at 50% 20%, #1621B9 0%, #112867 60%);
	}
	
	.no-webp #hero.bfcm-automation-guide-hero {
		background-image: url('../images/bfcm-automation-guide/hero-2x.png'), radial-gradient(circle at 50% 20%, #1621B9 0%, #112867 60%);
	}
}

article#hero .container {
	padding-top: 60px;
	padding-bottom: 60px;
}

#hero p:not(.logoPack p) {
	color: #FFF;
	font-size: 30px;
	line-height: 42px;
}

/* Hero Button Groups */
#hero.section .btn-group {
	justify-content: start;
}

/* Hero Button Styles */
#hero .bfcm-hero-button {
	background: transparent;
	color:white;
}
#hero .bfcm-hero-button img {
	margin-right: revert;
	margin-left: 5px;
}

#hero .bfcm-hero-button img.arrow:last-child {
	display: none;
}

#hero .bfcm-hero-button:hover {
	background: white;
	color: #112867;
	transition: background 0.3s ease, border-color 0.3s ease;
}

#hero .bfcm-hero-button:hover img.arrow:first-child {
	display: none;
}

#hero .bfcm-hero-button:hover img.arrow:last-child {
	display: inline;
	transform: translateX(5px);
}

/* --- Left Border List Component --- */
.left-border-list .left-border-list-item {
	margin-bottom: 25px;
	border-left: 4px solid #94BBFF;
	padding-left: 20px;
}

.left-border-list .left-border-list-item h3 {
	font-size: 22px;
	padding-bottom: 5px;
}

.left-border-list .left-border-list-item p {
	font-size: 18px;
	color: #94BBFF;
	font-weight: 600;
}

/* --- Template Workflow Title --- */
.template-wf-title {
	padding-top: 20px;
}

.template-wf-title span {
	background: #A7F1EB;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: 600;
	color: #112867;
	font-size: 14px;
	margin-bottom: 15px;
	display: inline-flex;
}

.template-wf-title h3 {
	font-size: 24px;
}

/* --- Workflow Setup Section --- */
.wf-setup-section {
	background: #E2EEFB;
	padding: 30px;
	border-radius: 8px;
}

.wf-setup-section h4 {
	font-size: 22px;
	margin-bottom: 15px;
	color: #112867;
}

.wf-setup-section p,
.wf-setup-section ul li {
	color: #112867;
	font-size: 18px;
}

.inner-wf-setup-section {
	background: white;
	border-radius: 8px;
	padding: 30px;
	margin-bottom: 36px;
}

.inner-wf-setup-section p:not(:first-child) {
	margin-bottom: 10px;
}

/* --- Bonus Section --- */
.bonus-section h4 {
	display: flex;
	align-items: center;
	color: #112867;
}

.bonus-section h4 img {
	margin-right: 10px;
}

.bonus-section p {
	color: #112867;
	font-size: 18px;
}

.bonus-section .bonus-content {
	background: #F8F8FB;
	border-radius: 12px;
	padding: 30px;
}

.bonus-content + .bonus-content {
	margin-top: 15px;
}

.background-light-grey-w-border .bonus-section .bonus-content {
	background: #FFFFFF;
}

/* --- Workflow Article --- */
.workflow-article h2 {
	font-size: 42px;
}

/* --- Utility Classes --- */
p.no-bottom-space {
	margin-bottom: 0;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media all and (max-width: 768px) {
	/* Hero Adjustments */
	#hero.bfcm-automation-guide-hero {
		min-height: 607px;
		margin-top: 60px;
		background-size: 1400px auto, cover;
		padding-top: 0;
		padding-bottom: 25px;
		background-position: top;
	}

	article#hero .container {
		padding-top: revert;
		padding-bottom: revert;
	}

	#hero .container .columns.center-vertical.card-columns {
		padding-top: 50px;
	}

	#hero .columns .column.is-4 {
		display: none;
	}

	#hero p:not(.logoPack p) {
		font-size: 22px;
		line-height: 28px;
		font-weight: 600;
	}

	/* Workflow Article */
	.workflow-article h2 {
		font-size: 32px;
	}

	/* Template Title */
	.template-wf-title h3 {
		font-size: 22px;
	}

	/* Workflow Setup Section */
	.wf-setup-section {
		padding: 20px;
	}

	.wf-setup-section h4 {
		font-size: 20px;
	}

	.wf-setup-section p,
	.wf-setup-section ul li {
		font-size: 16px;
	}

	.inner-wf-setup-section {
		padding: 20px;
	}

	/* Bonus Section */
	.bonus-section h4 {
		justify-content: center;
	}

	.bonus-section p {
		font-size: 16px;
	}

	.bonus-section + .bonus-section {
		margin-top: 20px;
	}
}