/*
Theme Name: Avada Child - ACCFB Refresh
Template: Avada
Description: Clean child theme for the ACCFB 2026 rebrand. Replaces Avada-Child-Theme, which had the old brand hardcoded into 1,165 lines of CSS. See avada-figma-refresh-strategy.md, Section 3, for the migration rationale.
Author: Kanopi
Author URI: https://www.kanopi.com/
Version: 1.0.0
Text Domain: avada-child-accfb
*/

/* --------------------------------------------------------------------------
   Testimonial – Quote With Photo
   -------------------------------------------------------------------------- */

.testimonial-quote-section .accent-card .fusion-imageframe {
	border: 2px solid #f58221;
	border-radius: 0 32px 0 32px;
	overflow: hidden;
}

.testimonial-quote-section .accent-card .fusion-imageframe img {
	width: 100%;
	height: 414px;
	object-fit: cover;
	display: block;
}

.testimonial-quote-section .text-underline-accent {
	--underline-color: #d16204;
	--underline-thickness: 4px;
	padding-top: 14px;
	padding-bottom: 14px;
	margin-left: 24px;
	color: #d16204;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}

.testimonial-quote-section .fusion_builder_column_3_5 > .fusion-column-wrapper {
	position: relative;
}

.testimonial-quote-section .fusion_builder_column_3_5 > .fusion-column-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.92);
	z-index: 0;
	pointer-events: none;
}

.testimonial-quote-section .fusion_builder_column_3_5 > .fusion-column-wrapper > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 1024px) {
	.testimonial-quote-section .accent-card {
		max-width: 320px;
	}

	.testimonial-quote-section .accent-card .fusion-imageframe img {
		height: 270px;
	}

	.testimonial-quote-section .fusion-builder-row-inner
		.fusion-column-wrapper.fusion-content-layout-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.testimonial-quote-section .fusion-button {
		width: 100%;
		text-align: center;
	}

	.testimonial-quote-section .text-underline-accent {
		margin-left: 0 !important;
		margin-top: 16px;
		display: block !important;
		width: 100%;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   CTA Banner with Icons
   -------------------------------------------------------------------------- */

.cta-icons-section .fusion-button.button-custom {
	background: transparent !important;
	border: 2px solid #282828 !important;
	border-radius: 32px !important;
}

.cta-icons-section .fusion-button.button-custom span {
	color: #282828 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

.cta-icons-section .fusion-button.button-custom:hover {
	background: rgba(0, 0, 0, 0.15) !important;
	border-color: #282828 !important;
}

.cta-icons-section .fusion-button.button-custom:hover span {
	color: #282828 !important;
}

.cta-icons-row {
	display: flex;
	align-items: center;
	gap: 64px;
	justify-content: center;
}

.cta-icons-row img {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 50%;
}

@media (max-width: 1024px) {
	.cta-icons-section .fusion-title {
		font-size: 24px !important;
		letter-spacing: -0.24px !important;
	}

	.cta-icons-section .fusion-text p {
		font-size: 16px !important;
		letter-spacing: -0.16px !important;
	}
}

@media (max-width: 767px) {
	.cta-icons-row {
		gap: 52px;
		justify-content: flex-start;
	}

	.cta-icons-row img {
		width: 72px;
		height: 72px;
	}
}

/* --------------------------------------------------------------------------
   What to Expect — Logistics & Access
   -------------------------------------------------------------------------- */

.what-to-expect-section .wte-icons {
	display: flex;
	align-items: center;
	gap: 24px;
}

.what-to-expect-section .wte-icon {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.what-to-expect-section .wte-icon--dollar {
	background: transparent;
}

.what-to-expect-section .wte-icon--dollar img {
	width: 78px;
	height: 78px;
	display: block;
}

.what-to-expect-section .wte-icon--location {
	background: #dd1219;
}

.what-to-expect-section .wte-icon--location img {
	width: 50px;
	height: 50px;
	display: block;
}

.what-to-expect-section .wte-icon--ages {
	background: var(--awb-color7);
}

.what-to-expect-section .wte-icon--ages span {
	font-family: 'Figtree', sans-serif;
	font-weight: 500;
	font-size: 26px;
	line-height: 22px;
	color: #000;
}

.what-to-expect-section .wte-icon--delivery {
	background: var(--awb-color1);
}

.what-to-expect-section .wte-icon--delivery img {
	width: 45px;
	height: 45px;
	display: block;
}

.what-to-expect-section .wte-info-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.what-to-expect-section .wte-info-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.what-to-expect-section .post-content h3.wte-info-heading,
.what-to-expect-section h3.wte-info-heading {
	font-family: 'Figtree', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 22px;
	letter-spacing: -0.24px;
	color: var(--awb-color1);
	margin: 0;
}

.what-to-expect-section .wte-heading-underline {
	text-decoration: underline;
}

.what-to-expect-section .wte-info-item p {
	font-family: 'Figtree', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: -0.18px;
	color: #fcfcfc;
	margin: 0;
}

.what-to-expect-section .wte-info-item a {
	color: #fcfcfc;
	text-decoration: underline;
}

.what-to-expect-section .wte-info-item a:hover {
	color: var(--awb-color1);
}

@media (max-width: 1024px) {
	.what-to-expect-section .fusion-title {
		font-size: 24px !important;
		letter-spacing: -0.24px !important;
	}

	.what-to-expect-section .wte-icons {
		flex-wrap: wrap;
		width: 180px;
	}

	.what-to-expect-section .wte-info-heading {
		font-size: 20px;
		letter-spacing: -0.2px;
	}

	.what-to-expect-section .wte-info-item p {
		font-size: 16px;
		letter-spacing: -0.16px;
	}
}

/* --------------------------------------------------------------------------
   FAQ Cards (2-column accordion grid)
   -------------------------------------------------------------------------- */

.faq-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.faq-cards-grid .panel-group {
	column-count: 2;
	column-gap: 20px;
}

.faq-cards-grid .fusion-panel.fusion-toggle-boxed-mode {
	border-radius: 0 32px 32px 32px !important;
	break-inside: avoid-column;
	margin-bottom: 24px !important;
}

.faq-cards-grid .fusion-panel:hover,
.faq-cards-grid .fusion-panel.hover {
	background-color: #ffffff !important;
}

.faq-cards-grid .panel-title a:hover,
.faq-cards-grid .panel-title a.hover {
	color: #000000 !important;
}

.faq-cards-grid.fusion-faq-shortcode .fusion-accordian .fusion-toggle-icon-unboxed .panel-title a:not(.active):hover .fa-fusion-box,
.faq-cards-grid.fusion-faq-shortcode .fusion-accordian .fusion-toggle-icon-unboxed .panel-title a:not(.active).hover .fa-fusion-box {
	color: #000000 !important;
}

@media (max-width: 767px) {
	.faq-cards-grid .panel-group {
		column-count: 1;
	}
	.fusion-accordian .panel-title .fusion-toggle-heading {
		margin-right: 0px!important
	}
	
	.fusion-accordian .fusion-panel.fusion-toggle-no-divider.fusion-toggle-boxed-mode .panel-title a {
		padding: 0;
	}
}

/* --------------------------------------------------------------------------
   What to Expect — Logistics & Access

   Structure is native Fusion Builder elements (fusion_title, fusion_text,
   fusion_imageframe) so content editors can swap icons and copy directly in
   the builder UI. These rules only handle what native params can't: the
   icon circle backgrounds (for icons whose own asset doesn't bake one in),
   the heading underline, and link color inside the last text item.
   -------------------------------------------------------------------------- */
.what-to-expect-section {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(20px, calc((100vw - 1200px) / 2)) !important;
	padding-right: max(20px, calc((100vw - 1200px) / 2)) !important;
}

.what-to-expect-section .fusion-builder-row-inner {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 25px;
}

.what-to-expect-section .fusion-builder-row-inner > .fusion_builder_column_inner {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.what-to-expect-section .wte-icon-frame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.what-to-expect-section .wte-icon-frame img {
	display: block;
	width: 78px;
	height: 78px;
}

.what-to-expect-section .wte-icon-frame--delivery {
	background: var(--awb-color1);
}

.what-to-expect-section .wte-icon-frame--delivery img {
	width: 45px;
	height: 45px;
	object-fit: contain;
}

.what-to-expect-section .wte-underline-heading .fusion-title-heading {
	text-decoration: underline;
}

.what-to-expect-section .wte-info-item-text a {
	color: #fcfcfc;
	text-decoration: none;
}

.what-to-expect-section .wte-info-item-text a:hover {
	color: var(--awb-color1);
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.what-to-expect-section .fusion-title {
		font-size: 24px !important;
		letter-spacing: -0.24px !important;
	}

	.what-to-expect-section .wte-icon-frame {
		width: 72px;
		height: 72px;
	}

	.what-to-expect-section .wte-icon-frame img {
		width: 72px;
		height: 72px;
	}

	.what-to-expect-section .wte-icon-frame--delivery img {
		width: 42px;
		height: 42px;
	}
}

@media (max-width: 767px) {
	/* Avada sets max-width:100% !important inline on this row, which no external
	   !important can beat. Grid sidesteps that fight entirely: it fixes the
	   column count directly instead of relying on the row's total width to
	   force a wrap after 2 icons. */
	.what-to-expect-section .fusion-builder-row-inner {
		display: grid !important;
		grid-template-columns: repeat(2, max-content);
		gap: 25px;
	}
}

/* --------------------------------------------------------------------------
   Sign Up & Manage Shifts


   Structure is native Fusion Builder elements — each card is a plain
   fusion_builder_column_inner using Avada's own `link` param to make the
   whole card clickable, no fusion_code involved. These rules only handle
   what native params can't: the fixed card width/gap (Avada's row_inner
   carries an inline max-width:100% !important that no external !important
   can beat, same issue documented in the What to Expect section above), and
   the decorative veggie-pattern background (presentational, not editable
   content, so CSS here rather than a native background param — Avada's
   container background options don't expose an opacity control, and this
   needs to be faded to ~15% same as the Hero Alt pattern).
   -------------------------------------------------------------------------- */


.sign-up-shifts-section {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(20px, calc((100vw - 1200px) / 2)) !important;
	padding-right: max(20px, calc((100vw - 1200px) / 2)) !important;
	position: relative;
}


.sign-up-shifts-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url(https://accfbsandbox.wpenginepowered.com/wp-content/uploads/2026/09/ACCFB-Veggie-Pattern.png) repeat;
	background-size: 900px auto;
	opacity: 0.15;
	pointer-events: none;
}


.sign-up-shifts-section > .fusion-builder-row {
	position: relative;
}


.sign-up-shifts-section .fusion-builder-row-inner {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center;
	gap: 24px;
}

.sign-up-shifts-section .fusion-builder-row-inner > .fusion_builder_column_inner {
	flex: 0 0 333px !important;
	width: 333px !important;
	max-width: 333px !important;
	margin: 0 !important;
}


.sign-up-shifts-section .sign-up-shifts-card {
	height: 268px;
}


.sign-up-shifts-section .sign-up-shifts-card .fusion-column-wrapper {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.sign-up-shifts-section .sign-up-shifts-card:hover .fusion-column-wrapper,
.sign-up-shifts-section .sign-up-shifts-card:focus-within .fusion-column-wrapper {
	border-color: var(--awb-color1) !important;
	box-shadow: 4px 4px 27px 0px rgba(0, 0, 0, 0.2);
}

.sign-up-shifts-section .sign-up-shifts-card a.fusion-column-anchor:focus {
	outline: 3px solid var(--awb-color6);
	outline-offset: 2px;
}


.sign-up-shifts-section .sign-up-shifts-card .fusion-column-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.sign-up-shifts-section .sign-up-shifts-icon img {
	width: 96px;
	height: 96px;
	display: block;
}


@media (max-width: 767px) {
	.sign-up-shifts-section .fusion-builder-row-inner > .fusion_builder_column_inner {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Full-bleed container preset -- breaks out of Site Width template to viewport edge */
.full-bleed-container {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(20px, calc((100vw - 1200px) / 2)) !important;
	padding-right: max(20px, calc((100vw - 1200px) / 2)) !important;
}

@media (min-width: 1024px) {
    .d-none {
        display: none !important;
    }
}