@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@400;500;700&display=swap');

/* This is a block theme, so the theme's single-post template usually
   places its own Post Title / Post Author / Post Date blocks above
   the Post Content block — separate from and in addition to the
   styled title this plugin renders itself further down. Hide the
   theme's versions specifically on Training Programme pages using
   Gutenberg's standard core-block class names (these are the same
   across virtually all block themes, not theme-specific markup). */
body.single-training_programme .wp-block-post-title,
body.single-training_programme .wp-block-post-author,
body.single-training_programme .wp-block-post-author-name,
body.single-training_programme .wp-block-post-date,
body.single-training_programme .wp-block-post-terms,
body.single-training_programme .entry-header,
body.single-training_programme .entry-title,
body.single-training_programme .entry-meta,
body.single-training_programme .posted-by,
body.single-training_programme .byline {
	display: none !important;
}

.ptp-programme {
	font-family: 'Yantramanav', Arial, 'Helvetica Neue', sans-serif;
	color: #333333;

	/* NOTE: widening this element is now handled by adding WordPress's
	   own "alignfull" class in the markup (see template.php), which is
	   the theme-native way to break a block out of the normal content
	   column — themes already have correct, tested CSS for it. A manual
	   width:100vw/left:50%/margin-left:-50vw hack was tried here first,
	   but that trick only works when the parent is a simple centered
	   block with no other offsets; in a real nested theme layout it
	   miscalculated and pushed everything to one side. Removed in favor
	   of the safer, theme-supported approach below, plus narrower
	   column minimums so this still looks reasonable even if the theme
	   doesn't support alignfull for some reason. */
}
.ptp-programme *, .ptp-programme *::before, .ptp-programme *::after {
	box-sizing: border-box;
}

/* Guaranteed left/right padding, independent of whether the theme's own
   .wrap class behaves correctly inside an alignfull block (it didn't).
   8% side padding + a max-width cap matches the ratio measured directly
   from the reference screenshot (188px/191px margins on a 2256px-wide
   capture ≈ 8.3% each side). */
.ptp-inner {
	max-width: 87.5rem;
	margin: 0 auto;
	padding: 0 8%;
}

/* ---------- Banner photo strip ---------- */

.ptp-banner-strip {
	display: flex;
	width: 100%;
	overflow: hidden;
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.ptp-banner-photo {
	flex: 1 1 0;
	height: clamp(12rem, 6rem + 16vw, 22rem);
	object-fit: cover;
	display: block;
}
/* A single banner photo reads better as one full-width hero image
   with more height, rather than being stretched into the same thin
   strip shape a 4-photo row uses. */
.ptp-banner-photo:only-child {
	width: 100%;
	height: clamp(14rem, 10rem + 14vw, 26rem);
}

/* ---------- Two-column body ---------- */

.ptp-body {
	display: flex;
	gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	align-items: flex-start;
	flex-wrap: wrap;
}

.ptp-col-left {
	flex: 0 0 clamp(11rem, 9.8571rem + 5.7143vw, 15rem);
}

.ptp-col-right {
	flex: 1 1 18rem;
	min-width: 0;
	position: relative;
}

.ptp-logo {
	position: absolute;
	top: 0;
	right: 0;
	max-height: clamp(4rem, 3.5714rem + 2.1429vw, 5.5rem);
	width: auto;
}
.ptp-col-right.ptp-no-logo .ptp-logo {
	display: none;
}

/* ---------- Enquire button ---------- */

.ptp-enquire-button {
	display: inline-block;
	background: #fa9900;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	padding: 0.9rem 1.75rem;
	border-radius: 0.1875rem;
	font-size: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
}
.ptp-enquire-button:hover {
	background: #e08a00;
	color: #ffffff;
}
.ptp-col-left .ptp-enquire-button {
	display: block;
	text-align: center;
	margin-bottom: 1.875rem;
}

/* ---------- Title ---------- */

.ptp-title {
	margin: 0 0 1.5rem;
	padding-right: 6rem; /* room for the logo when shown */
}
.ptp-title span {
	font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 0.1875rem solid #fa9900;
	padding-bottom: 0.4rem;
	display: inline-block;
}
.ptp-col-right.ptp-no-logo .ptp-title {
	padding-right: 0;
}

/* ---------- Description body copy ---------- */

.ptp-description {
	width: 70%;
	max-width: 70%;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
	line-height: 1.75;
}
.ptp-description p {
	margin: 0 0 1.5rem;
}
.ptp-description ul,
.ptp-description ol {
	margin: 0 0 1.5rem;
	padding-left: 1.5rem;
}
.ptp-description ul li::marker {
	color: #666666;
}
.ptp-description li {
	margin-bottom: 0.4rem;
}
.ptp-description ol {
	counter-reset: ptp-counter;
	list-style: none;
	padding-left: 0;
}
.ptp-description ol li {
	counter-increment: ptp-counter;
	padding-left: 2.25rem;
	position: relative;
}
.ptp-description ol li::before {
	content: counter(ptp-counter) ".";
	position: absolute;
	left: 0;
	font-weight: 400;
	color: #666666;
}

/* ---------- Reviews sidebar ---------- */

.ptp-reviews {
	background: #f2f2f2;
	padding: 1.5rem;
}
.ptp-reviews h4 {
	margin: 0 0 1.25rem;
	text-align: center;
}
.ptp-reviews h4 span {
	font-size: clamp(1rem, 0.9464rem + 0.2679vw, 1.1875rem);
	font-weight: 700;
	border-bottom: 0.1875rem solid #fa9900;
	padding-bottom: 0.3rem;
}
.ptp-review-item {
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #e2e2e2;
}
.ptp-review-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.ptp-review-item p {
	margin: 0;
	font-size: clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);
	line-height: 1.6;
	font-style: italic;
	color: #444444;
}

/* ---------- Footer CTA ---------- */

.ptp-footer-cta {
	margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
	padding: clamp(2.5rem, 2rem + 2.5vw, 4rem) 0;
	background: #f8f8f8;
	text-align: center;
}
.ptp-footer-cta h2 {
	margin: 0 auto 1.5rem;
	font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
	font-weight: 700;
	color: #333333;
}

/* ---------- Expand/collapse accordion ----------
   Rendered by the plugin itself (template.php) when the "Show an
   accordion section" checkbox is ticked and at least one section is
   filled in — toggling is handled by accordion.js (vanilla JS, no
   jQuery dependency). Scoped under .ptp-description since .expand /
   .content / .tab-button are generic names that could otherwise
   collide with other plugins or theme styles site-wide. */

.ptp-description .tab-button {
	margin: 1.5rem 0 1.5rem;
	text-align: right;
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	font-weight: 400;
	color: #1a1a1a;
}
.ptp-description .expand-btn,
.ptp-description .collapse-btn {
	color: #1a1a1a;
	cursor: pointer;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}
.ptp-description .expand-btn:hover,
.ptp-description .collapse-btn:hover {
	color: #fa9900;
}

.ptp-description .expand + .expand {
	margin-top: 1em;
}

.ptp-description .expand > h5 {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 1.1rem 2.75rem 1.1rem 1.25rem;
	font-size: clamp(0.9375rem, 0.9018rem + 0.1786vw, 1.0625rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #ffffff;
	background: #f6c543;
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
.ptp-description .expand > h5:hover {
	background: #e8b52f;
}
.ptp-description .expand > h5:focus-visible {
	outline: 0.125rem solid #1a1a1a;
	outline-offset: 0.125rem;
}

/* +/- indicator built from two overlapping bars — collapsed shows
   both (a "+"), expanded hides the vertical one (leaving just "-"). */
.ptp-description .expand > h5::before,
.ptp-description .expand > h5::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	background: #000000;
}
.ptp-description .expand > h5::after {
	width: 0.75rem;
	height: 0.1875rem;
	margin-top: -0.09375rem;
}
.ptp-description .expand > h5::before {
	width: 0.1875rem;
	height: 0.75rem;
	right: 1.53125rem;
	margin-top: -0.375rem;
}
.ptp-description .expand > h5.expanded {
	border-radius: 0.5rem 0.5rem 0 0;
}
.ptp-description .expand > h5.expanded::before {
	display: none;
}

.ptp-description .expand > .content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.ptp-description .expand > .content > *:first-child {
	margin-top: 1.25rem;
}
/* Nested lists inside accordion content already inherit this plugin's
   normal .ptp-description ul/ol styling (gray markers, fluid sizing,
   etc.) automatically, since they're still descendants of
   .ptp-description — no separate rules needed for them. Just style
   the sub-headings (e.g. "ERGONOMICS", "NUTRITION" inside GENERAL
   HEALTH) so they read as a level below the h5. */
.ptp-description .expand > .content p strong:only-child {
	display: inline-block;
	margin-top: 0.75rem;
	color: #333333;
}
.ptp-description .expand > .content > *:last-child {
	margin-bottom: 1.25rem;
}

/* ---------- Mobile ---------- */

@media (max-width: 56rem) {
	.ptp-banner-strip {
		flex-wrap: wrap;
	}
	.ptp-banner-photo:not(:only-child) {
		width: 50%;
		height: 10rem;
	}
	.ptp-banner-photo:only-child {
		height: 12rem;
	}
	.ptp-col-left {
		flex: 1 1 100%;
	}
	.ptp-logo {
		position: static;
		display: block;
		margin-bottom: 1rem;
	}
	.ptp-title {
		padding-right: 0;
	}
	.ptp-description {
		width: 100%;
		max-width: 100%;
	}
}