/**
 * Course sales content.
 *
 * Reproduces the Elementor sections' layout without Elementor. Tokens mirror
 * the directory so both share one visual language.
 */

/*
 * Tokens are declared on the section class as well as the wrapper. Sections
 * built as Flatsome blocks render outside .cfd-course entirely, so declaring
 * them only there left every var() in those sections unresolved - which is
 * silent: an unresolved font-family simply inherits, so the heading looked
 * styled while using the wrong face.
 *
 * .cfd-course-page is the article wrapper, and the facilitator bar is a direct
 * child of it rather than of .cfd-course - without it every var() in that bar
 * resolved to its fallback and only looked right by coincidence.
 */
.cfd-course-page,
.cfd-course,
[class*="st-course-"] {
	--cfd-accent: #DC530A;
	--cfd-ink: #1b2422;
	--cfd-muted: #444;
	--cfd-heading-font: 'Philosopher', sans-serif;
	--cfd-measure: 62ch;
	/* Buttons follow the site's square-ish corners, not a pill. */
	--cfd-btn-radius: 8px;
}

.cfd-course {
	max-width: 1180px;
	margin: 0 auto;
}

.cfd-course__section {
	padding: 3rem 0;
}

/* ---------- section 03: text left, image right ---------- */

.cfd-course__s03 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: 3rem;
	align-items: center;
}

.cfd-course .cfd-course__heading {
	font-family: var(--cfd-heading-font);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	line-height: 1.15;
	color: var(--cfd-accent);
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

.cfd-course .cfd-course__sub {
	font-family: var(--cfd-heading-font);
	font-size: 1.15rem;
	line-height: 1.35;
	color: var(--cfd-ink);
	margin: 0 0 0.6rem;
}

.cfd-course .cfd-course__sub--2 {
	color: var(--cfd-muted);
	font-size: 1.05rem;
}

.cfd-course__body {
	color: var(--cfd-ink);
	font-size: 1rem;
	line-height: 1.7;
	max-width: var(--cfd-measure);
}

.cfd-course__body p {
	margin: 0 0 1rem;
}

.cfd-course__body p:last-child {
	margin-bottom: 0;
}

.cfd-course .cfd-course__bullets {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	max-width: var(--cfd-measure);
}

.cfd-course .cfd-course__bullets li {
	position: relative;
	margin: 0;
	padding-left: 1.6rem;
	line-height: 1.5;
	color: var(--cfd-ink);
}

.cfd-course .cfd-course__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cfd-accent);
}

.cfd-course__s03-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
	.cfd-course__s03 {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	/* Image above the text on a phone: the photo sets the mood, and a wall of
	   copy before any visual reads as heavier than it is. */
	.cfd-course__s03-media {
		order: -1;
	}

	.cfd-course__section {
		padding: 2rem 0;
	}
}

/* ---------- Flatsome interop ---------- */

/*
 * Flatsome's text elements wrap their content in <p>. When that content is a
 * wysiwyg field, which already carries its own paragraphs, the browser closes
 * the outer one early and leaves an empty <p> behind - harmless, but it adds
 * stray vertical space. The attribute selector covers every st-course-*
 * section, including ones not built yet, so nobody has to remember this.
 */
[class*="st-course-"] p:empty {
	display: none;
}

/* ---------- repeaters ---------- */

/*
 * Over-specific on purpose: these are ul/li, and themes indent list items
 * inside content. A single-class selector only ties with those, so source
 * order decides - and this stylesheet is enqueued ahead of the theme's.
 */
[class*="st-course-"] .cfd-rituals,
[class*="st-course-"] ul.cfd-rituals {
	list-style: none;
	margin: 0;
	margin-left: 0;
	padding: 0;
	padding-left: 0;
	display: grid;
	/* 3 / 2 / 1 columns, set explicitly rather than with auto-fit so the
	   breakpoints match the rest of the section styling exactly. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem 2rem;
}

@media (max-width: 849px) {
	[class*="st-course-"] .cfd-rituals,
	[class*="st-course-"] ul.cfd-rituals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 1.5rem;
	}
}

@media (max-width: 549px) {
	[class*="st-course-"] .cfd-rituals,
	[class*="st-course-"] ul.cfd-rituals {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
	}
}

[class*="st-course-"] .cfd-ritual,
[class*="st-course-"] ul.cfd-rituals > li.cfd-ritual {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0;
	margin-left: 0;
	padding-left: 0;
	gap: 1rem;
	list-style: none;
}

/* Themes that indent list items usually add a marker too. */
[class*="st-course-"] .cfd-ritual::before,
[class*="st-course-"] .cfd-ritual::marker {
	content: none;
}

.cfd-ritual__media {
	width: 100%;
	max-width: 320px;
}

/*
 * Colours come from Flatsome's palette via --fs-color-success so they follow
 * the theme rather than drifting from it, with our accent as a fallback for
 * any context where the theme variable is not defined.
 */
.cfd-ritual__heading {
	margin: 0 0 1rem;
	font-family: var(--cfd-heading-font, 'Philosopher'), sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fs-color-success, var(--cfd-accent));
}

.cfd-ritual__sub {
	margin: 0 0 1rem;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--cfd-ritual-text, #fff);
}

/*
 * The text box is narrower than the column, so it needs centring in its own
 * right - relying on the parent's align-items alone leaves it vulnerable to
 * any theme rule that stretches or floats a block child.
 */
[class*="st-course-"] .cfd-ritual__text {
	max-width: 34ch;
	margin-inline: auto;
	color: var(--cfd-ritual-text, #fff);
	text-align: center;
}

[class*="st-course-"] .cfd-ritual__text p {
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}

/* Inherit, so wysiwyg content does not fall back to the theme's body colour. */
.cfd-ritual__text p,
.cfd-ritual__text li,
.cfd-ritual__text strong,
.cfd-ritual__text em {
	color: inherit;
}

.cfd-ritual__text p:last-child {
	margin-bottom: 0;
}

.cfd-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.cfd-bullet {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
}

.cfd-bullet__icon {
	flex: 0 0 auto;
	width: 34px;
	height: auto;
	margin-top: 0.1rem;
}

.cfd-bullet__text {
	line-height: 1.5;
}

/*
 * <details> rather than a scripted accordion: it opens without JavaScript, is
 * keyboard accessible by default, and browser find-in-page can reach the
 * answers.
 */
.cfd-faq__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.cfd-faq__q {
	cursor: pointer;
	padding: 0.9rem 0;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.cfd-faq__q::-webkit-details-marker {
	display: none;
}

.cfd-faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--cfd-accent);
}

.cfd-faq__item[open] .cfd-faq__q::after {
	content: "\2212";
}

.cfd-faq__a {
	padding: 0 0 1rem;
}

.cfd-faq__a p:last-child {
	margin-bottom: 0;
}


/* ---------- imagery ---------- */

/*
 * Square-cropped circles throughout. Applied via a padded box with the image
 * absolutely positioned rather than height:100%, because themes set
 * `img { height: auto }`, which silently defeats a plain aspect-ratio.
 *
 * Opt a single image out with class="st-course-image--wide" - the section 01
 * header banner is the obvious case, since cropping it to a circle would lose
 * most of it.
 */
[class*="st-course-"] .cfd-ritual__media,
[class*="st-course-"] .st-course-image,
[class*="st-course-"] img.st-course-image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	margin-inline: auto;
}

[class*="st-course-"] .cfd-ritual__media img,
[class*="st-course-"] img.st-course-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	display: block;
	margin: 0;
	max-width: none;
}

/*
 * Section 01 is the header banner: it keeps its own proportions and square
 * corners. Handled here rather than by a class on the block, so it holds even
 * if the block is rebuilt. The --wide class does the same for any other image.
 */
.st-course-section-01 .st-course-image,
.st-course-section-01 img.st-course-image,
[class*="st-course-"] .st-course-image--wide,
[class*="st-course-"] img.st-course-image--wide {
	position: static;
	aspect-ratio: auto;
	border-radius: 0;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: initial;
	overflow: visible;
}

/* ---------- temporarily hidden sections ---------- */

/*
 * Sections 07 and 11 are hidden on the current live pages, so they stay hidden
 * here for parity. Hidden rather than removed deliberately: the content is
 * real - "Why Freedom?", its sub-heading and body, and half a dozen benefit
 * bullets - so this is a presentation decision that may well be revisited.
 *
 * Note this only hides them; the markup is still rendered and still in the
 * page source. To stop them rendering at all, drop their block IDs from the
 * [cfd_course_sections blocks="..."] list instead.
 */
/*
 * Element-qualified and marked important because this stylesheet loads early -
 * fourth, ahead of the theme's own - so a same-specificity rule appearing later
 * would win on source order alone. A deliberate on/off switch should not be
 * decided by enqueue order.
 */
section.st-course-section-07,
section.st-course-section-11,
.st-course-section-07,
.st-course-section-11 {
	display: none !important;
}

/* ---------- facilitator context on a course page ---------- */

.cfd-course-facilitator {
	background: #eaf5f6;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cfd-course-facilitator__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.cfd-course-facilitator__portrait img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.cfd-course-facilitator__detail {
	flex: 1 1 260px;
	min-width: 0;
}

.cfd-course-facilitator__lead {
	margin: 0;
	font-weight: 400;
	font-family: var(--cfd-heading-font, 'Philosopher'), sans-serif;
	font-size: 1.5rem;
}

.cfd-course-facilitator__meta {
	margin: 0.15rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	font-size: 0.88rem;
	color: var(--cfd-muted, #444);
}

.cfd-course-facilitator__price {
	font-weight: 700;
	color: var(--cfd-ink, #1b2422);
}

.cfd-course-facilitator__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

.cfd-course-facilitator .cfd-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.1rem;
	border-radius: var(--cfd-btn-radius, 8px);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	margin: 0;
}

.cfd-course-facilitator .cfd-btn--primary {
	background: var(--cfd-accent, #DC530A);
	color: #fff;
}

.cfd-course-facilitator__profile {
	font-size: 0.88rem;
	font-weight: 600;
}

.cfd-course-notice {
	max-width: 1180px;
	margin: 2rem auto;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--cfd-accent, #DC530A);
	background: var(--cfd-placeholder, #eef3f1);
}

@media (max-width: 700px) {
	.cfd-course-facilitator__actions {
		margin-left: 0;
		width: 100%;
	}
}