/* =====================================================
 * PAGES — dark "streaming" look for Flatsome pages
 * Loaded on every page (functions.php); every rule is
 * scoped to a class the dark pages carry:
 *   .fsb-page        workshop landing blocks (UX Block)
 *   .pba-page-hero   page hero section
 *   .pba-dark-section dark content section
 * ===================================================== */

#main:has(.fsb-page),
#main:has(.pba-dark-section) {
	background: var(--pba-bg);
}


/* -----------------------------------------------------
 * Page hero + section titles
 * ----------------------------------------------------- */

.pba-page-hero {
	position: relative;
}

.pba-page-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	background: linear-gradient(transparent, var(--pba-bg));
	pointer-events: none;
}

.pba-page-hero .section-content {
	position: relative;
	z-index: 1;
}

.pba-section-title {
	color: #fff;
}

.pba-dark-section .pba-eyebrow {
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 3.5px;
	color: var(--pba-cyan);
}

.pba-dark-section .pba-eyebrow::before {
	content: '';
	display: block;
	width: 40px;
	height: 4px;
	margin-bottom: 13px;
	background: var(--pba-pink);
}

.pba-section-title::after {
	content: '';
	display: block;
	width: 70px;
	height: 3px;
	margin-top: 10px;
	background: linear-gradient(90deg, #36cbe9, #ed348f);
}


/* -----------------------------------------------------
 * Workshop landing blocks (.fsb-*)
 * ----------------------------------------------------- */

.fsb-card > .col-inner {
	border: 1px solid rgba(139, 220, 255, 0.2);
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.fsb-page ul li::marker {
	color: var(--pba-cyan);
}

/* Pink button (was .fsb-gold) */
.button.fsb-pink {
	background: var(--pba-pink);
	color: #fff;
	box-shadow: 0 8px 24px rgba(232, 46, 136, 0.2);
}

.button.fsb-pink i {
	color: #fff;
}

/* Keep "ENROLL NOW >" on one line in the narrow hero card */
.button.fsb-pink {
	white-space: nowrap;
}

@media (max-width: 1100px) {

	.button.fsb-pink.is-xlarge {
		font-size: 1.15em;
	}
}

.button.fsb-pink:hover {
	background: var(--pba-pink-hover);
	color: #fff;
	box-shadow: 0 12px 26px rgba(232, 46, 136, 0.35);
}

@media (max-width: 767px) {

	.button.fsb-pink {
		font-size: 18px;
	}
}

/* FAQ */
.fsb-accordion .accordion-item {
	margin-bottom: 10px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	background: #12243b;
}

.fsb-accordion .accordion-title {
	border-top: 0;
	color: #fff;
	font-weight: 700;
}

.fsb-accordion .accordion-title.active,
.fsb-accordion .accordion-title:hover {
	color: var(--pba-cyan);
}

.fsb-accordion .accordion-title .toggle i {
	color: var(--pba-cyan);
}

/* .accordion prefix beats the Customizer's .faq .accordion-inner */
.accordion.fsb-accordion .accordion-inner {
	padding-top: 0;
	background: transparent;
}


/* -----------------------------------------------------
 * Older workshop blocks (.pba-wk): 3D Printing,
 * Embroidery, Photoshop, Sublimation, Souvenir, Signage
 * ----------------------------------------------------- */

.pba-wk .text > h2::after {
	content: '';
	display: block;
	width: 70px;
	height: 3px;
	margin-top: 10px;
	background: linear-gradient(90deg, #36cbe9, #ed348f);
}

.pba-wk .text-center > h2::after,
.pba-wk .text > h2[style*="center"]::after {
	margin-right: auto;
	margin-left: auto;
}


/* -----------------------------------------------------
 * [workshop_schedule] cards inside dark pages
 * ----------------------------------------------------- */

.fsb-page .workshop-schedule-card {
	border: 1px solid rgba(255, 255, 255, 0.13);
	background: #12243b;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.fsb-page .workshop-schedule-card:hover {
	transform: translateY(-6px);
	border-color: rgba(68, 207, 234, 0.6);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.fsb-page .workshop-stock-ribbon {
	background: var(--pba-cyan);
	color: #081321;
}

.fsb-page .workshop-schedule-card .month p {
	background: var(--pba-pink);
	color: #fff;
}

.fsb-page .workshop-schedule-card .date p,
.fsb-page .workshop-schedule-card .button-link {
	background: #12243b;
	color: #fff;
}

.fsb-page .workshop-schedule-card .button-link a {
	background: var(--pba-pink);
	color: #fff;
}

.fsb-page .workshop-schedule-card .button-link a:hover {
	background: var(--pba-pink-hover);
	color: #fff;
}

.fsb-page .workshop-schedule-empty {
	color: var(--pba-muted);
}