/* ==========================================================================
   TCF – WordPress additions
   Styles for things that only exist in the WordPress version of the site.
   The original design lives in styles.css.
   ========================================================================== */

/* Spam trap fields on forms */
.tcf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Notes only visible to logged-in editors */
.tcf-editor-hint {
	margin: 0.75rem auto 0;
	padding: 0.5rem 0.85rem;
	max-width: 36rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #6b4e00;
	background: #fff7d6;
	border: 1px dashed #d9b000;
	border-radius: 0.5rem;
	text-align: left;
}

/* LearnPress buy / enrol buttons on course landing pages */
.tcf-lp-buttons,
.tcf-lp-buttons .course-buttons,
.tcf-lp-buttons form {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin: 0;
}

.tcf-lp-buttons .lp-button {
	cursor: pointer;
}

.tcf-lp-buttons .lp-button.loading {
	opacity: 0.7;
	pointer-events: none;
}

.tcf-lp-buttons .learn-press-message,
.tcf-lp-buttons .lp-message {
	color: inherit;
	margin: 0.75rem 0 0;
}

/* Price from LearnPress (sale + original price) */
.tcf-lp-price .origin-price,
[class$="-price"] .origin-price {
	opacity: 0.6;
	text-decoration: line-through;
	font-size: 0.6em;
	margin-right: 0.35em;
}

/* Legal pages: headings come from the editor rather than <section> wrappers */
.policy-body > h2 {
	color: var(--tcf-ink);
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	font-weight: 850;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 2.75rem 0 1rem;
	scroll-margin-top: 120px;
}

.policy-body > h2:first-child {
	margin-top: 0;
}

.policy-body > p,
.policy-body > ul,
.policy-body > ol {
	color: var(--tcf-muted);
	font-size: 1.02rem;
	line-height: 1.75;
	margin-bottom: 1rem;
}

.policy-body > ul,
.policy-body > ol {
	padding-left: 1.25rem;
}

.policy-body li {
	line-height: 1.7;
	margin-bottom: 0.65rem;
}

.policy-body strong {
	color: var(--tcf-ink);
	font-weight: 800;
}

.policy-body a {
	color: var(--tcf-primary-dark);
	font-weight: 750;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Generic pages (LearnPress checkout, courses list, etc.) */
.tcf-page-content > * + * {
	margin-top: 1rem;
}

.tcf-page-content img {
	max-width: 100%;
	height: auto;
}

/* Blog pagination */
.tcf-pagination .page-link {
	color: var(--tcf-primary);
	border-radius: 999px !important;
	margin: 0 0.2rem;
	min-width: 2.6rem;
	text-align: center;
}

.tcf-pagination .page-item.active .page-link {
	background: var(--tcf-primary);
	border-color: var(--tcf-primary);
	color: #fff;
}

/* Blog content from the block editor */
.blog-post-content .wp-block-image img,
.blog-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
}

.blog-post-content .wp-block-quote {
	border-left: 4px solid var(--tcf-primary-light);
	padding-left: 1.25rem;
	font-style: italic;
}

/* Social login slot */
.tcf-social-login {
	display: grid;
	gap: 0.75rem;
}

/* Alerts on login / register */
.login-card .alert {
	border-radius: 0.75rem;
	font-size: 0.95rem;
}

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text,
.wp-element-caption { font-size: 0.9rem; color: #666; margin-top: 0.5rem; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
	width: 1px; word-wrap: normal !important;
}

/* Admin bar + sticky navbar */
.admin-bar .navbar.sticky-top { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .navbar.sticky-top { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .navbar.sticky-top { top: 0; }
}

/* "Coming Soon" button while no LearnPress course is linked */
.tcf-coming-soon {
	cursor: default;
	pointer-events: none;
}

/* ==========================================================================
   Formula library
   ========================================================================== */

/* Hero image: landscape works better than the calculator page's portrait */
.tcf-formula-hero-image {
	aspect-ratio: 4 / 3;
}

/* Stage images */
.tcf-formula-stages {
	background: #fff;
}

.tcf-stage-card {
	margin: 0;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(31, 42, 36, 0.08);
	border-radius: var(--tcf-radius);
	box-shadow: 0 1rem 3rem rgba(31, 42, 36, 0.06);
	overflow: hidden;
}

.tcf-stage-open {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
}

.tcf-stage-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.tcf-stage-open:hover .tcf-stage-image,
.tcf-stage-open:focus-visible .tcf-stage-image {
	transform: scale(1.035);
}

.tcf-stage-number {
	position: absolute;
	left: 0.85rem;
	top: 0.85rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--tcf-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tcf-stage-card figcaption {
	padding: 1rem 1.25rem 1.25rem;
	color: var(--tcf-ink);
	font-size: 0.98rem;
	line-height: 1.5;
}

.tcf-stage-modal .modal-content {
	background: #111;
	border: 0;
	border-radius: var(--tcf-radius);
	overflow: hidden;
}

.tcf-stage-modal .carousel-item img {
	max-height: 80vh;
	object-fit: contain;
	background: #111;
}

.tcf-stage-modal-caption {
	padding: 0.85rem 1.25rem;
	color: #fff;
	font-size: 0.95rem;
}

.tcf-stage-close {
	position: absolute;
	right: 1rem;
	top: 1rem;
	z-index: 5;
}

/* Formula table */
.tcf-batch-input {
	max-width: 15rem;
}

.tcf-formula-table thead th {
	background: var(--tcf-primary-light, #f4eaf1);
	color: var(--tcf-ink);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tcf-formula-table td,
.tcf-formula-table th {
	padding: 0.85rem 1rem;
}

.tcf-formula-table tr.tcf-phase-start td {
	border-top: 2px solid rgba(106, 63, 108, 0.25);
}

.tcf-phase {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: rgba(106, 63, 108, 0.1);
	color: var(--tcf-primary-dark);
	font-weight: 800;
}

.tcf-formula-table .tcf-inci {
	font-weight: 600;
	color: var(--tcf-ink);
}

.tcf-formula-table .tcf-weight,
.tcf-formula-table .tcf-weight-total {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tcf-formula-table tfoot th,
.tcf-formula-table tfoot td {
	background: #faf7fb;
	font-weight: 800;
	border-bottom: 0;
}

.tcf-ww {
	font-weight: 600;
	font-size: 0.85em;
	text-transform: uppercase;
}

/* Method */
.tcf-method-list {
	counter-reset: tcf-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcf-method-list li {
	counter-increment: tcf-step;
	position: relative;
	padding: 0.35rem 0 1.1rem 3.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--tcf-ink);
}

.tcf-method-list li::before {
	content: counter(tcf-step);
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	background: var(--tcf-primary);
	color: #fff;
	font-weight: 800;
}

.tcf-formula-results {
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.tcf-notes-content > * + * {
	margin-top: 1rem;
}

.tcf-formula-back {
	text-align: center;
	margin-top: 1rem;
}

/* Listing */
.tcf-formula-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.tcf-formula-filter a {
	padding: 0.55rem 1.25rem;
	border: 1px solid rgba(106, 63, 108, 0.25);
	border-radius: 999px;
	color: var(--tcf-primary-dark);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.tcf-formula-filter a:hover,
.tcf-formula-filter a.is-active {
	background: var(--tcf-primary);
	border-color: var(--tcf-primary);
	color: #fff;
}

.tcf-formula-card-subtitle {
	color: var(--tcf-muted);
	font-size: 0.95rem;
	line-height: 1.55;
	margin-bottom: 1rem;
}

.tcf-formula-card-item .blog-card-image-link {
	aspect-ratio: 16 / 10;
}

@media (max-width: 575.98px) {
	.tcf-method-list li {
		padding-left: 3rem;
	}

	/* Formula table as stacked rows on phones */
	.tcf-formula-table thead {
		display: none;
	}

	.tcf-formula-table,
	.tcf-formula-table tbody,
	.tcf-formula-table tfoot {
		display: block;
	}

	.tcf-formula-table tr {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 0.2rem 0.75rem;
		padding: 0.85rem 1rem;
		border-bottom: 1px solid rgba(31, 42, 36, 0.08);
	}

	.tcf-formula-table td,
	.tcf-formula-table th {
		padding: 0 !important;
		border: 0 !important;
		background: transparent;
	}

	.tcf-formula-table tbody td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
	.tcf-formula-table tbody td:nth-child(3) { grid-column: 2; grid-row: 1; }
	.tcf-formula-table tbody td:nth-child(2) { grid-column: 3; grid-row: 1; text-align: right; font-weight: 700; }
	.tcf-formula-table tbody td:nth-child(2)::after { content: "%"; }
	.tcf-formula-table tbody td:nth-child(4) { grid-column: 2; grid-row: 2; color: var(--tcf-muted); font-size: 0.85rem; opacity: 0.75; }
	.tcf-formula-table tbody td:nth-child(5) { grid-column: 3; grid-row: 2; font-size: 0.85rem; }

	.tcf-formula-table tfoot tr { background: #faf7fb; }
	.tcf-formula-table tfoot th:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
	.tcf-formula-table tfoot th:nth-child(2) { grid-column: 3; grid-row: 1; text-align: right; }
	.tcf-formula-table tfoot td { display: none; }
	.tcf-formula-table tfoot th:nth-child(4) { grid-column: 3; grid-row: 2; font-size: 0.85rem; }

	.tcf-formula-table tr.tcf-phase-start {
		border-top: 2px solid rgba(106, 63, 108, 0.25);
	}
}

/* Formula: YouTube / Instagram links under the hero buttons */
.tcf-formula-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(106, 63, 108, 0.14);
}

.tcf-formula-social-label {
	margin-right: 0.25rem;
	color: var(--tcf-primary-dark);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tcf-social-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid rgba(31, 42, 36, 0.14);
	border-radius: 999px;
	background: #fff;
	color: var(--tcf-ink);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 0.35rem 1rem rgba(31, 42, 36, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tcf-social-btn i {
	font-size: 1.15rem;
}

.tcf-social-youtube i {
	color: #ff0033;
}

.tcf-social-instagram i {
	color: #d62976;
}

.tcf-social-btn:hover,
.tcf-social-btn:focus-visible {
	color: var(--tcf-ink);
	border-color: rgba(106, 63, 108, 0.35);
	box-shadow: 0 0.6rem 1.4rem rgba(31, 42, 36, 0.1);
	transform: translateY(-1px);
}

@media (max-width: 991.98px) {
	.tcf-formula-social {
		justify-content: center;
	}

	.tcf-formula-social-label {
		width: 100%;
		margin-right: 0;
		text-align: center;
	}
}

/* Printing a formula */
@media print {
	.announcement,
	.navbar,
	.footer-section,
	.newsletter-section,
	.tcf-formula-stages,
	.tcf-more-formulas,
	.tcf-formula-back,
	.tcf-formula-hero .btn,
	.tcf-formula-social,
	.tcf-formula-hero-image,
	.tcf-editor-hint,
	#wpadminbar {
		display: none !important;
	}

	.section-padding {
		padding: 1rem 0 !important;
	}

	.calculator-card {
		box-shadow: none !important;
		break-inside: avoid;
	}
}

/* ==========================================================================
   Home page: additional sections (science, approach, ingredients, final CTA)
   ========================================================================== */

/* Closing emphasis line used in the new sections */
.tcf-home-emphasis {
	position: relative;
	margin: 1.75rem 0 0;
	padding: 1.1rem 1.35rem;
	border-left: 4px solid var(--tcf-primary);
	border-radius: 0 var(--tcf-radius) var(--tcf-radius) 0;
	background: rgba(106, 63, 108, 0.07);
	color: var(--tcf-primary-dark);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.5;
}

.tcf-home-emphasis-center {
	border-left: 0;
	border-radius: var(--tcf-radius);
	padding: 1.35rem 1.75rem;
}

/* Section 03 – Cosmetic science without the complications */
.tcf-science-section {
	background: #fff;
}

.tcf-science-image-wrap,
.tcf-ingredients-image-wrap {
	overflow: hidden;
	border-radius: var(--tcf-radius);
	box-shadow: 0 1.5rem 4rem rgba(31, 42, 36, 0.12);
	background: #fff;
}

.tcf-science-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.tcf-science-copy p:not(.tcf-home-emphasis) {
	font-size: 1.08rem;
	line-height: 1.75;
	margin-bottom: 1.1rem;
}

/* Section 05 – Think like a formulator */
.tcf-approach-section {
	background: linear-gradient(135deg, #fbf9fa 0%, #f5eff3 100%);
}

.tcf-approach-intro {
	margin: 0 auto 0.75rem;
	max-width: 46rem;
	line-height: 1.7;
}

.tcf-approach-steps {
	position: relative;
}

.tcf-approach-step {
	position: relative;
	height: 100%;
	padding: 2rem 1.5rem 1.75rem;
	background: #fff;
	border: 1px solid rgba(31, 42, 36, 0.08);
	border-radius: var(--tcf-radius);
	box-shadow: 0 1rem 3rem rgba(31, 42, 36, 0.06);
	text-align: center;
}

.tcf-step-number {
	position: absolute;
	top: 1rem;
	left: 1.25rem;
	color: rgba(106, 63, 108, 0.35);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.tcf-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0.5rem 0 1.25rem;
	border-radius: 999px;
	background: var(--tcf-primary);
	color: #fff;
	font-size: 1.7rem;
}

.tcf-approach-step h3 {
	font-size: 1.35rem;
	margin-bottom: 0.75rem;
}

.tcf-approach-step p {
	margin-bottom: 0;
	line-height: 1.6;
}

/* Arrow between the steps on large screens */
@media (min-width: 992px) {
	.tcf-approach-steps > div:not(:last-child) .tcf-approach-step::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -1.05rem;
		z-index: 2;
		width: 0.9rem;
		height: 0.9rem;
		border-top: 3px solid var(--tcf-primary);
		border-right: 3px solid var(--tcf-primary);
		transform: translateY(-50%) rotate(45deg);
	}
}

/* Section 06 – Natural & synthetic */
.tcf-ingredients-section {
	background: #fff;
}

.tcf-ingredients-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Section 20 – Final call to action */
.tcf-final-cta {
	background:
		radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 26rem),
		linear-gradient(135deg, var(--tcf-primary-dark), var(--tcf-primary));
}

.tcf-final-cta .eyebrow::before {
	background: rgba(255, 255, 255, 0.5);
}

.tcf-final-cta .btn-outline-light:hover {
	color: var(--tcf-primary);
}

.tcf-final-cta .btn-outline-light {
	border: 2px solid rgba(255, 255, 255, 0.9) !important;
	color: #fff !important;
	background: transparent !important;
}

.tcf-final-cta .btn-outline-light:hover,
.tcf-final-cta .btn-outline-light:focus-visible {
	background: #fff !important;
	color: var(--tcf-primary) !important;
}

/* ==========================================================================
   About page: additional sections
   ========================================================================== */

/* Section 04 – Our approach to ingredients (light purple, manifesto) */
.tcf-about-ingredients {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 8% 15%, rgba(157, 94, 160, 0.08), transparent 22rem),
		linear-gradient(135deg, #fbf9fa 0%, #f5eff3 100%);
}

.tcf-about-ingredients-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--tcf-radius);
	box-shadow: 0 1.5rem 4rem rgba(31, 42, 36, 0.14);
}

.tcf-about-ingredients p:not(.eyebrow):not(.lead):not(.tcf-criterion-label):not(.tcf-manifesto-close) {
	line-height: 1.75;
}

.tcf-criteria {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0 1.75rem;
}

.tcf-criterion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0.5rem;
	background: #fff;
	border: 1px solid rgba(106, 63, 108, 0.14);
	border-radius: var(--tcf-radius);
	text-align: center;
}

.tcf-criterion-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: rgba(106, 63, 108, 0.1);
	color: var(--tcf-primary-dark);
	font-size: 1.15rem;
}

.tcf-criterion-label {
	margin: 0;
	color: var(--tcf-ink);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.tcf-manifesto {
	margin-top: 4rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: var(--tcf-radius);
	background:
		radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 22rem),
		linear-gradient(135deg, var(--tcf-primary-dark), var(--tcf-primary));
	color: #fff;
	text-align: center;
	box-shadow: 0 1.5rem 4rem rgba(64, 37, 54, 0.22);
}

.tcf-manifesto-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.tcf-manifesto-list li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 800;
}

.tcf-manifesto-list li::before {
	content: "\f00d";
	font-family: "Font Awesome 7 Pro";
	font-weight: 300;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.95rem;
}

.tcf-manifesto-close {
	margin: 0 auto;
	max-width: 40rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.1rem;
	line-height: 1.6;
}

@media (max-width: 575.98px) {
	.tcf-criteria {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tcf-manifesto-list {
		flex-direction: column;
		align-items: center;
	}
}

/* Section 05 – The TCF learning experience */
.tcf-about-experience {
	background: #fff;
}

.tcf-experience-intro {
	margin: 0 auto 0.75rem;
	max-width: 46rem;
	line-height: 1.7;
}

.tcf-experience-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(31, 42, 36, 0.08);
	border-radius: var(--tcf-radius);
	box-shadow: 0 1rem 3rem rgba(31, 42, 36, 0.06);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tcf-experience-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 1.5rem 3.5rem rgba(31, 42, 36, 0.1);
}

.tcf-experience-image-wrap {
	overflow: hidden;
}

.tcf-experience-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.tcf-experience-body {
	position: relative;
	padding: 2.25rem 1.5rem 1.75rem;
}

.tcf-experience-icon {
	position: absolute;
	top: -1.6rem;
	left: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	border: 3px solid #fff;
	border-radius: 999px;
	background: var(--tcf-primary);
	color: #fff;
	font-size: 1.2rem;
}

.tcf-experience-body h3 {
	font-size: 1.35rem;
	margin-bottom: 0.75rem;
}

.tcf-experience-body p {
	margin-bottom: 0;
	line-height: 1.65;
}

/* Section 09 – Ready to begin (pale lilac, compact) */
.tcf-about-cta {
	padding: 4rem 0;
	background: linear-gradient(180deg, #f5eff3 0%, #faf7fb 100%);
}

.tcf-about-cta-card {
	max-width: 56rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.25rem);
	background: #fff;
	border: 1px solid rgba(106, 63, 108, 0.14);
	border-radius: var(--tcf-radius);
	box-shadow: 0 1rem 3rem rgba(64, 37, 54, 0.07);
}

.tcf-about-cta-text {
	margin: 0 auto 1.75rem;
	max-width: 42rem;
	line-height: 1.7;
}

/* ==========================================================================
   Main menu: current page highlight
   ========================================================================== */

.navbar .nav-link.active,
.navbar .nav-link.active:focus,
.navbar .nav-link.show.active {
	color: var(--tcf-primary) !important;
	font-weight: 800;
}

@media (min-width: 992px) {
	.navbar .navbar-nav .nav-link {
		position: relative;
	}

	/* Short bar under the current item, echoing the eyebrow accents */
	.navbar .navbar-nav .nav-link.active::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -0.15rem;
		width: 1.6rem;
		height: 3px;
		border-radius: 3px;
		background: var(--tcf-primary);
		transform: translateX(-50%);
	}

	/* Keep the bar centred under the text (not the arrow) on the Courses item */
	.navbar .navbar-nav .nav-link.dropdown-toggle.active::before {
		left: calc(50% - 0.5rem);
	}
}

@media (max-width: 991.98px) {
	/* Collapsed (mobile) menu: bar on the left */
	.navbar .navbar-nav .nav-link.active {
		padding-left: 0.85rem;
		border-left: 3px solid var(--tcf-primary);
	}
}

.course-dropdown-menu .dropdown-item.active,
.course-dropdown-menu .dropdown-item:active {
	background: rgba(106, 63, 108, 0.12);
	color: var(--tcf-primary-dark);
}

/* ------------------------------------------------------------------
 * Approximate prices in other currencies (inc/currency.php)
 * ------------------------------------------------------------------ */
.tcf-fx-alt {
	display: block;
	margin-top: 0.35rem;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
	opacity: 0.85;
}
.tcf-fx-alt:empty,
.tcf-fx-alt[hidden] {
	display: none;
}
.tcf-fx-alt del {
	opacity: 0.75;
	margin-right: 0.15rem;
}
.tcf-fx-alt .tcf-fx-amount {
	font-weight: 700;
}
.tcf-fx-alt .tcf-fx-suffix {
	font-size: 0.85em;
	text-transform: none;
}
.tcf-price .tcf-fx-alt {
	display: inline;
	margin: 0 0 0 0.4rem;
	font-size: 0.9em;
}
.tcf-price .tcf-fx-alt[hidden] {
	display: none;
}

/* Header currency menu */
.tcf-fx-menu[hidden] {
	display: none !important;
}
/* Pill so the currency stands out from the page links; text matches them */
.navbar .navbar-nav .tcf-fx-menu .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--tcf-primary);
	background: color-mix(in srgb, var(--tcf-primary) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--tcf-primary) 22%, #fff);
	border-radius: 50rem;
	padding: 0.35rem 0.95rem;
	line-height: 1.4;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.navbar .navbar-nav .tcf-fx-menu .nav-link:hover,
.navbar .navbar-nav .tcf-fx-menu .nav-link.show {
	background: color-mix(in srgb, var(--tcf-primary) 18%, #fff);
	border-color: color-mix(in srgb, var(--tcf-primary) 35%, #fff);
	color: var(--tcf-primary);
}
.navbar .navbar-nav .tcf-fx-menu .nav-link::before {
	display: none;
}
.navbar .navbar-nav .tcf-fx-menu .nav-link::after {
	margin-left: 0;
}
@media (min-width: 992px) {
	.navbar .navbar-nav .tcf-fx-menu {
		margin-left: 0.5rem;
	}
}
@media (max-width: 991.98px) {
	.navbar .navbar-nav .tcf-fx-menu {
		padding: 0.4rem 0;
	}
}
/* Uses the Courses dropdown styling (.course-dropdown-menu); just narrower */
.tcf-fx-menu .dropdown-menu.course-dropdown-menu {
	min-width: 16rem;
}
.tcf-fx-menu .dropdown-item {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
}
.tcf-fx-menu .tcf-fx-code {
	min-width: 2.6rem;
}
.tcf-fx-menu .tcf-fx-name {
	font-size: 0.875rem;
	opacity: 0.8;
}
.tcf-fx-menu-note {
	white-space: normal;
	max-width: 15rem;
}

/* LearnPress checkout note */
.tcf-fx-checkout-note {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--tcf-primary, #5B3B60);
	background: rgba(91, 59, 96, 0.07);
	border-radius: 0.5rem;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------
 * Menu focus and selection colours: TCF purple instead of Bootstrap blue
 * ------------------------------------------------------------------ */
:root {
	--bs-focus-ring-color: color-mix(in srgb, var(--tcf-primary) 25%, transparent);
}
.navbar .nav-link:focus-visible,
.navbar .navbar-toggler:focus {
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--tcf-primary) 25%, transparent);
	border-radius: 0.375rem;
	outline: 0;
}
.dropdown-menu {
	--bs-dropdown-link-active-bg: var(--tcf-primary);
	--bs-dropdown-link-active-color: #fff;
	--bs-dropdown-link-hover-bg: color-mix(in srgb, var(--tcf-primary) 8%, transparent);
}
.dropdown-menu .dropdown-item:focus-visible {
	outline: 2px solid var(--tcf-primary);
	outline-offset: -2px;
}

/* ------------------------------------------------------------------
 * LearnPress lesson screen: "Complete" button centred in the footer bar
 * between Prev and Next (inc/learnpress.php)
 * ------------------------------------------------------------------ */
#popup-footer:has(.tcf-lesson-complete) {
	min-height: 62px;
}
#popup-footer .tcf-lesson-complete {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	margin: 0;
	white-space: nowrap;
}
#popup-footer .tcf-lesson-complete form,
#popup-footer .tcf-lesson-complete .lp-button {
	margin: 0;
}
/* The "You have completed this lesson at…" note doesn't fit in the bar;
   the disabled "Completed" button and the tick in the curriculum show it. */
#popup-footer .tcf-lesson-complete .learn-press-message {
	display: none;
}
@media (max-width: 575.98px) {
	#popup-footer .tcf-lesson-complete .lp-button {
		padding-left: 1rem;
		padding-right: 1rem;
		font-size: 0.85rem;
	}
	/* Room for the button between the arrows */
	#popup-footer .course-item-nav .prev a,
	#popup-footer .course-item-nav .next a {
		font-size: 0;
		gap: 0;
	}
}

/* Home hero: with animations turned off in the visitor's system settings
   ("reduce motion"), the animation script doesn't run, so show the hero image
   straight away. More specific than the page's animation rule, which would
   otherwise keep it at opacity 0. */
@media (prefers-reduced-motion: reduce) {
	section.hero-section[data-hero-sequence].tcf-hero-animating [data-hero-image] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Home hero intro already seen (Customizer → Colours & header → Home page intro animation): show the finished hero at once */
html.tcf-hero-static .hero-section.tcf-hero-animating [data-hero-copy],
html.tcf-hero-static .hero-section.tcf-hero-animating [data-hero-actions],
html.tcf-hero-static section.hero-section[data-hero-sequence].tcf-hero-animating [data-hero-image],
html.tcf-hero-static [data-proof-bar].tcf-proof-animating,
html.tcf-hero-static [data-proof-bar].tcf-proof-animating [data-proof-item] {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	transition: none !important;
	animation: none !important;
	pointer-events: auto !important;
}
html.tcf-hero-static .hero-section.is-typing [data-hero-type-text]::after {
	display: none !important;
}

/* Login page: "Create an account" button under Sign in */
.login-register-cta {
	margin-top: 1.25rem;
	text-align: center;
}
.login-register-cta-text {
	margin: 0 0 0.6rem;
	font-size: 0.92rem;
	color: var(--bs-secondary-color, #6c757d);
}

/* My TCF (LearnPress profile): solid white side menu */
body.learnpress-profile #learn-press-profile #profile-sidebar,
body.learnpress-profile #learn-press-profile #profile-nav,
body.learnpress-profile #learn-press-profile .lp-profile-nav-tabs,
body.learnpress-profile #learn-press-profile .lp-profile-nav-tabs li:not(.active) {
	background-color: #fff;
}
body.learnpress-profile #learn-press-profile .lp-profile-nav-tabs li:not(.active):hover {
	background-color: #f5eff6;
}

/* My TCF: information notices ("No quizzes found" …) in light purple */
body.learnpress-profile #learn-press-profile .learn-press-message.info,
body.learnpress-profile #learn-press-profile .learn-press-message:not(.error):not(.warning):not(.success) {
	background: #f5eff6;
	border: 1px solid #dccbe0;
	color: #4a2c4c;
}
body.learnpress-profile #learn-press-profile .learn-press-message.info::before,
body.learnpress-profile #learn-press-profile .learn-press-message:not(.error):not(.warning):not(.success)::before {
	color: #6a3f6c;
}

/*
 * One button size across the site's pages: every in-page button matches the
 * large buttons in the home page hero (.btn-lg). Header, menu and footer
 * buttons, and the LearnPress learning / My TCF / checkout screens, keep
 * their own sizes.
 */
body:not(.tcf-lms) main .btn:not(.btn-lg):not(.btn-close):not(.btn-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0.5rem 1.1rem !important;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	border-width: 2px;
}
body:not(.tcf-lms) main .btn.register-submit-btn,
body:not(.tcf-lms) main .btn.register-login-btn {
	min-height: 50px;
}