/* ============================================================================
   Section review - client, 20. 10. 2026
   ----------------------------------------------------------------------------
   First round: About Us, Client Results, Our Trainers, locations, programmes,
   the default page template and 404. Second round: the homepage (its block is
   at the end, scoped to body.home). Blog, Contact, posts, trainer profiles,
   the sitemap and archives are not part of it. Loaded after ux-fixes.css on
   every page (functions.php); template rules are scoped to their body class.

   - The CTA row between sections (md_ux_section_cta() with bg/flow) is a
     full-bleed band that closes the section above it, instead of a 1170px
     white box glued under a cream band.
   - Neighbouring sections alternate white / cream: no two cream bands meet,
     and no white margin strip sits between two coloured bands.
   - The form band (#cta-form-section) closes every page above the footer, with
     an overlay so its white copy reads on the photo.

   `#ffroot#ffroot` doubles the id on purpose: ux-fixes.css sets the section
   rhythm with `#ffroot #md-main > #md-…` (three ids), and these rules have to
   win over it without !important.
   ========================================================================= */

#ffroot {
	--ffr-pt: 88px;
	--ffr-pb: 96px;
	--ffr-cream: #F7F2EA;
}

@media (max-width: 768px) {
	#ffroot {
		--ffr-pt: 52px;
		--ffr-pb: 56px;
	}
}


/* ---------------------------------------------------- CTA row between bands */

#ffroot .ff-section-cta:is(.ff-section-cta--join, .ff-section-cta--join-end, .ff-section-cta--band) {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-left: max(20px, calc((100% - 1170px) / 2));
	padding-right: max(20px, calc((100% - 1170px) / 2));
}

#ffroot .ff-section-cta--white {
	background: #FFFFFF;
}

#ffroot .ff-section-cta--cream {
	background: var(--ffr-cream);
}

/* Closes the band above: a short gap under its last element... */
#ffroot .ff-section-cta:is(.ff-section-cta--join, .ff-section-cta--join-end) {
	padding-top: 32px;
}

/* ...and the next band of the same colour brings its own top padding. */
#ffroot .ff-section-cta--join {
	padding-bottom: 0;
}

/* The next band is another colour: a full section's room below. */
#ffroot .ff-section-cta--join-end {
	padding-bottom: var(--ffr-pb);
}

#ffroot .ff-section-cta--band {
	padding-top: 64px;
	padding-bottom: 64px;
}

/* The band the row closes loses its bottom padding: the row is its end. */
#ffroot#ffroot #md-main > :has(+ :is(.ff-section-cta--join, .ff-section-cta--join-end)) {
	padding-bottom: 0;
}

/* Results sliders end in their arrows; keep them clear of the row. */
#ffroot#ffroot #md-main > :is(#md-loc-results, #md-mg-results):has(+ .ff-section-cta) {
	padding-bottom: 8px;
}

@media (max-width: 768px) {
	#ffroot .ff-section-cta:is(.ff-section-cta--join, .ff-section-cta--join-end) {
		padding-top: 24px;
	}

	#ffroot .ff-section-cta--band {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}


/* ------------------------------------------------- section rhythm and colour */

/* The white margin above these coloured bands showed as a strip between two
   bands (About: certifications / team; Results: results / team). The band
   before them already ends in its own padding. */
body:is(.page-template-page-about-php, .page-template-page-client-results-php, .page-template-page-location-php, .page-template-page-muscle-gain-php, .page-template-default, .post-type-archive-trainers, .error404) #ffroot#ffroot #md-main > :is(#md-team, #md-goals, #md-mg-started) {
	margin-top: 0;
}

/* The data table ran into the cream band under it (programmes: the results
   table, then "Who is this programme for?"). It follows the white intro, so it
   needs no gap of its own above. */
body:is(.page-template-page-location-php, .page-template-page-muscle-gain-php) #ffroot#ffroot #md-main > #md-data-table {
	margin-top: 0;
	padding-bottom: var(--ffr-pb);
}

/* "How the programme scales" has no bottom padding because the white
   "What's included" follows it; where that section is empty and skipped
   (Pricing), the cream band below would touch its cards. */
#ffroot#ffroot #md-main > #md-mg-scales:not(:has(+ #md-mg-included)) {
	padding-bottom: var(--ffr-pb);
}

/* A table margin from the base styles left an empty strip inside the frame
   under the last row. */
#ffroot .ff-table-scroll > .ff-table {
	margin-bottom: 0;
}

/* The FAQ ended flush on the form band. */
#ffroot#ffroot #md-main > #md-faq:has(+ #cta-form-section) {
	padding-bottom: var(--ffr-pb);
}

/* The trainer gallery's 40px was all that stood between it and the form band;
   the same room above and below the photo strip. */
#ffroot#ffroot #md-main > #md-trainers-gallery:has(+ #cta-form-section) {
	padding-top: 72px;
	padding-bottom: 72px;
}

@media (max-width: 768px) {
	#ffroot#ffroot #md-main > #md-trainers-gallery:has(+ #cta-form-section) {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* About: certifications go white, so the cream team band (with its CTA row)
   stands on its own between two white ones. */
body.page-template-page-about-php #ffroot#ffroot #md-main > #md-about-certified {
	background: #FFFFFF;
}

/* Client Results: the goals band after the cream team band goes white. */
body.page-template-page-client-results-php #ffroot#ffroot #md-main > #md-cr-goals {
	background: #FFFFFF;
}

/* Locations: "How it works" goes white after the cream team band; its step
   cards were white on cream and take a border instead. */
body.page-template-page-location-php #ffroot#ffroot #md-main > #md-loc-howitworks {
	background: #FFFFFF;
}

body.page-template-page-location-php #ffroot #md-loc-howitworks .hiw-step {
	border: 1px solid #E6E0D4;
}


/* Programmes, "How to get started": the white H2 sat straight on the photo,
   whose right half is a bright gym window. */
#ffroot #md-mg-started {
	position: relative;
}

#ffroot #md-mg-started::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(12, 27, 32, 0.72) 0%, rgba(12, 27, 32, 0.5) 55%, rgba(12, 27, 32, 0.6) 100%);
	pointer-events: none;
}

#ffroot #md-mg-started > .band-inner {
	position: relative;
	z-index: 2;
}


/* --------------------------------------------- form band above the footer */

/* White copy straight on the gym photo was hard to read where the photo is
   light (the bar, the window). A dark wash, strongest under the copy. */
#ffroot .ctaf::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(12, 27, 32, 0.88) 0%, rgba(12, 27, 32, 0.72) 45%, rgba(12, 27, 32, 0.4) 100%);
	pointer-events: none;
}

#ffroot .ctaf .ctaf-grid {
	position: relative;
	z-index: 2;
}

#ffroot .ctaf :is(.ctaf-title, .ctaf-text) {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* At 0.55 the logo went grey on the darker wash. */
#ffroot .ctaf .ctaf-logo {
	opacity: 0.85;
}

/* One column below 1200px: the copy sits above the form, so the wash is even. */
@media (max-width: 1199px) {
	#ffroot .ctaf::before {
		background: rgba(12, 27, 32, 0.74);
	}
}


/* ============================================================================
   Homepage - second round
   ========================================================================= */

/* Hero -> team -> results -> coverage -> problems -> clips -> steps -> form
   -> goals -> pricing -> areas -> FAQ -> blog. The white margins above the
   coloured bands (coverage, pricing) and above "Built around your goal" after
   the form band doubled the gap into a 176-184px white strip. */
body.home #ffroot#ffroot #md-main > :is(#md-coverage, #md-goals, #md-pricing) {
	margin-top: 0;
}

/* Steps: the band is white over cream behind the cards; the CTA row after it
   is cream, so the cream runs on under the cards instead of stopping at their
   bottom edge. */
body.home #ffroot #md-steps .steps-band {
	padding-bottom: 0;
}

/* Phones drop the half-and-half band (home-responsive.css); the cream starts
   behind the last card instead of at its bottom edge. */
@media (max-width: 768px) {
	body.home #ffroot #md-steps .steps-band {
		background: linear-gradient(180deg, #FFFFFF calc(100% - 120px), var(--ffr-cream) calc(100% - 120px));
	}
}

/* Pricing: the white title and copy sat straight on a bright beach photo. */
body.home #ffroot #md-pricing {
	position: relative;
}

body.home #ffroot #md-pricing::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(12, 27, 32, 0.72) 0%, rgba(12, 27, 32, 0.5) 100%);
	pointer-events: none;
}

body.home #ffroot #md-pricing > :not(img) {
	position: relative;
	z-index: 2;
}

/* On a phone the copy runs to the edges, where the ellipse is lightest. */
@media (max-width: 768px) {
	body.home #ffroot #md-pricing::before {
		background: rgba(12, 27, 32, 0.66);
	}
}

/* Areas: the location template's #md-loc-areas, grouped by city (it replaced
   the homepage's own chip list, client 20. 10. 2026). inner.css styles it on
   location pages only and the homepage does not load inner.css, so its rules
   are repeated here. A cream band between the pricing photo and the white
   FAQ, so its chips are white. */
body.home #ffroot #md-loc-areas {
	background: var(--ffr-cream);
}

body.home #ffroot #md-loc-areas .stack1170 {
	box-sizing: border-box;
	width: calc(100% - 40px);
	max-width: 1170px;
	margin: 0 auto;
}

body.home #ffroot #md-loc-areas .areas-head {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 40px;
	align-items: end;
}

body.home #ffroot #md-loc-areas .sec-title--3 {
	margin: 0;
	max-width: 520px;
	font-size: 2.375rem;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.02em;
}

body.home #ffroot #md-loc-areas .areas-lede {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: #3A3A3A;
}

body.home #ffroot #md-loc-areas .areas-city {
	margin: 52px 0 0;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 600;
}

body.home #ffroot #md-loc-areas .areas-city a {
	color: #0C1B20;
	text-decoration: underline;
	text-underline-offset: 4px;
}

body.home #ffroot #md-loc-areas .areas-city a:hover {
	color: #0A6E99;
}

body.home #ffroot #md-loc-areas .areas-chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px 24px;
	margin-top: 20px;
}

body.home #ffroot #md-loc-areas .area-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-radius: 8px;
	background: #FFFFFF;
}

body.home #ffroot #md-loc-areas .list-icon--3 {
	flex: none;
	width: 22px;
	height: 22px;
}

body.home #ffroot #md-loc-areas .area-chip-label {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 1200px) {
	body.home #ffroot #md-loc-areas .areas-head {
		grid-template-columns: 1fr;
		gap: 18px;
		align-items: start;
	}

	body.home #ffroot #md-loc-areas .areas-chips {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	body.home #ffroot #md-loc-areas .sec-title--3 {
		font-size: 1.875rem;
	}

	body.home #ffroot #md-loc-areas .areas-city {
		margin-top: 36px;
	}

	body.home #ffroot #md-loc-areas .areas-chips {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	body.home #ffroot #md-loc-areas .area-chip {
		gap: 8px;
		padding: 12px;
	}

	body.home #ffroot #md-loc-areas .list-icon--3 {
		width: 18px;
		height: 18px;
	}

	body.home #ffroot #md-loc-areas .area-chip-label {
		font-size: 0.875rem;
		line-height: 1.3;
	}
}

/* FAQ -> blog: the FAQ ends in its own padding, not in a white margin above
   the cream blog band. */
body.home #ffroot#ffroot #md-main > #md-faq:has(+ #md-blog) {
	padding-bottom: var(--ffr-pb);
}

body.home #ffroot#ffroot #md-main > #md-blog {
	margin-top: 0;
}


/* ------------------------------------------------------ area chips (site) */
/* The chips are links styled as pills; the in-text link rule (blue,
   underlined, ux-fixes.css "axe fixes") reached them through `li a`. */
#ffroot ul.ff-area-chips li a {
	color: #101010;
	text-decoration: none;
}

#ffroot ul.ff-area-chips li a:hover {
	color: #0A6E99;
}


/* ============================================================================
   Site-wide test - fixes outside the two review rounds
   ========================================================================= */

/* Blog, categories, search: with no pager under the list ("Client stories"
   has one page) the last card's READ MORE touched the form band. */
#ffroot#ffroot #md-main > #md-blog-listing:has(+ #cta-form-section) {
	padding-bottom: var(--ffr-pb);
}

/* Blog, posts, search, archives keep their prefooter after the form band:
   no white strip between the two dark bands, and a wash under the white copy
   (the beach photo is bright behind "Train with us"). */
#ffroot#ffroot #md-main > #cta-form-section + #md-prefooter {
	margin-top: 0;
}

#ffroot #md-prefooter {
	position: relative;
}

#ffroot #md-prefooter::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(12, 27, 32, 0.6);
	pointer-events: none;
}

#ffroot #md-prefooter > .prefoot-inner {
	position: relative;
	z-index: 2;
}

/* Contact: the cream form band and the cream team band met over a white
   margin strip. The team goes white with its CTA row closing it, and the
   goals band under it goes cream. */
body.page-template-page-contact-php #ffroot#ffroot #md-main > #md-team {
	margin-top: 0;
	background: #FFFFFF;
}

body.page-template-page-contact-php #ffroot#ffroot #md-main > #md-contact-goals {
	background: var(--ffr-cream);
}

/* Contact hero: under its last line sat the paragraph's 12px, the "More"
   block's 80px (56 on phones) and the section's own 110px (70) - 202px of
   cream against the 88px the next band opens with. One section padding, as
   everywhere else. */
body.page-template-page-contact-php #ffroot#ffroot #md-main > #md-contact-hero {
	padding-bottom: var(--ffr-pb);
}

body.page-template-page-contact-php #ffroot #md-contact-hero > :last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

body.page-template-page-contact-php #ffroot #md-contact-hero > :last-child > :last-child {
	margin-bottom: 0;
}


/* ============================================================================
   Third round - header, trainer slider, hero photo on phones
   ========================================================================= */

/* Hero photo on phones: below 900px the desktop photo is hidden because the
   phone photo takes over (md_ux_hero_pictures()). A page with no phone photo
   has only the desktop <picture>, so it showed no photo at all (About on a
   phone: an empty dark block above the title). */
@media (max-width: 899px) {
	#ffroot section.ff-hero:not(:has(> .ff-hero-pic--m)) > picture > img.ff-hero-img--d {
		display: block;
	}
}

/* Burger: two bars drawn from the button's centre, so the open state is a
   true X. The rotation offsets (+-4px) were set for a 6px gap and 2.5px bars;
   phones have 8px and 2px, so the bars crossed off-centre. */
@media (max-width: 991px) {
	#ffroot #masthead .burger {
		position: relative;
		flex: none;
		width: 44px;
		height: 44px;
		max-height: 44px;
		margin-right: -8px;
		padding: 0;
	}

	#ffroot #masthead .burger span {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 26px;
		height: 2px;
		margin: 0 0 0 -13px;
		border-radius: 2px;
		transition: transform 200ms var(--ff-ease, ease);
	}

	#ffroot #masthead .burger span:first-child {
		transform: translateY(-5px);
	}

	#ffroot #masthead .burger span:last-child {
		transform: translateY(3px);
	}

	#ffroot #masthead .burger[aria-expanded="true"] span:first-child {
		transform: translateY(-1px) rotate(45deg);
	}

	#ffroot #masthead .burger[aria-expanded="true"] span:last-child {
		transform: translateY(-1px) rotate(-45deg);
	}

	/* The WhatsApp number keeps its size and never runs under the burger. */
	#ffroot #masthead .phoneblk {
		flex: none;
	}
}

/* 375-420px phones: logo, number and burger did not fit in one row (361px of
   content in 335), so the number ran under the burger. A smaller logo, tighter
   gaps and a 13px number fit them; below 375 the number is hidden already. */
@media (max-width: 420px) {
	#ffroot #masthead.hdr {
		gap: 12px;
	}

	#ffroot #masthead .logo {
		height: 26px;
		max-height: 26px;
	}

	#ffroot #masthead .logo img,
	#ffroot #masthead img.logo {
		height: 26px;
		width: auto;
	}

	#ffroot #masthead .phoneblk {
		gap: 6px;
	}

	#ffroot #masthead .phoneblk img {
		width: 28px;
		height: 28px;
	}

	#ffroot #masthead .phoneblk .el-div-38 {
		font-size: 13px;
	}
}

/* Trainer cards as a slider on phones: a narrower card so the next coach
   shows more (76% instead of 84%), and four skills per closed card - the
   rest open with See More, as on desktop. The cards stretch to the tallest
   one, so one card with seven skills made every card that tall. */
@media (max-width: 599px) {
	#ffroot .trainers-grid > .trainer-card:not([hidden]) {
		flex-basis: 76%;
	}
}

@media (max-width: 899px) {
	#ffroot .trainers-grid .trainer-card:has(.trainer-more[aria-expanded="false"]) .trainer-skills > :is(.tr-skill, .trainer-skill):nth-child(n+5) {
		display: none;
	}
}

/* Trainer profiles, "Get in shape with …": white copy straight on the
   trainer's photo, often a white T-shirt or a bright gym wall behind the
   words. A wash, darkest under the centred copy. */
body.single-trainers #ffroot #md-tn-banner .banner-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse 60% 70% at 50% 50%, rgba(12, 27, 32, 0.55) 0%, rgba(12, 27, 32, 0) 100%),
		rgba(12, 27, 32, 0.45);
	pointer-events: none;
}

body.single-trainers #ffroot #md-tn-banner .banner-inner {
	z-index: 2;
}

body.single-trainers #ffroot #md-tn-banner :is(.sec-title, .banner-text) {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}


/* ============================================================================
   Blog post: article + sidebar (section/bs-sidebar.php)
   ----------------------------------------------------------------------------
   The article and the sidebar share the full 1170px column. The sidebar is
   the height of the article (grid row), so its sticky CTA travels with the
   reader and stops where the article ends - above the FAQ.
   ========================================================================= */

body.single-post #ffroot .bs-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 64px;
}

/* ux-fixes.css caps the article at 740px and centres it for a full-width
   column; in the grid it fills its own column. */
body.single-post #ffroot .bs-layout > .bs-content {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* The fixed header must not cover a heading the TOC jumps to. */
body.single-post #ffroot .bs-content :is(h2, h3)[id] {
	scroll-margin-top: 110px;
}

body.single-post #ffroot .bs-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

body.single-post #ffroot .bs-side-card {
	box-sizing: border-box;
	padding: 24px;
	border-radius: 12px;
	background: #F9F5ED;
}

body.single-post #ffroot .bs-side-title {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0C1B20;
}

/* On this page */
body.single-post #ffroot .bs-toc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
}

body.single-post #ffroot .bs-toc > summary::-webkit-details-marker {
	display: none;
}

body.single-post #ffroot .bs-toc > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 200ms ease;
}

body.single-post #ffroot .bs-toc[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

body.single-post #ffroot .bs-toc-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bs-toc;
}

body.single-post #ffroot .bs-toc-list li {
	margin: 0;
	padding: 0;
	counter-increment: bs-toc;
}

body.single-post #ffroot .bs-toc-list li::before {
	content: none;
}

body.single-post #ffroot a.bs-toc-link {
	display: grid;
	grid-template-columns: 28px 1fr;
	padding: 8px 10px 8px 0;
	border-left: 2px solid transparent;
	font-size: 15px;
	line-height: 1.45;
	color: #3A3A3A;
	text-decoration: none;
	transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

body.single-post #ffroot a.bs-toc-link::before {
	content: counter(bs-toc, decimal-leading-zero);
	padding-left: 10px;
	font-size: 12px;
	line-height: 1.9;
	font-weight: 600;
	color: #8A8A8A;
}

body.single-post #ffroot a.bs-toc-link:hover {
	color: #0C1B20;
}

body.single-post #ffroot a.bs-toc-link.is-active {
	border-left-color: #4FBFEA;
	background: #FFFFFF;
	color: #0C1B20;
	font-weight: 600;
}

body.single-post #ffroot a.bs-toc-link.is-active::before {
	color: #0A6E99;
}

/* Blog categories */
body.single-post #ffroot .bs-cats-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-post #ffroot .bs-cats-list li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #E6E0D4;
}

body.single-post #ffroot .bs-cats-list li:first-child {
	border-top: 0;
}

body.single-post #ffroot .bs-cats-list li::before {
	content: none;
}

body.single-post #ffroot a.bs-cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	font-size: 15px;
	line-height: 1.4;
	color: #101010;
	text-decoration: none;
}

body.single-post #ffroot a.bs-cat-link:hover,
body.single-post #ffroot a.bs-cat-link.is-current {
	color: #0A6E99;
}

body.single-post #ffroot a.bs-cat-link.is-current {
	font-weight: 600;
}

body.single-post #ffroot .bs-cat-count {
	flex: none;
	min-width: 28px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	color: #3A3A3A;
}

/* The CTA floater */
body.single-post #ffroot .bs-side-sticky {
	position: sticky;
	top: 100px;
}

body.single-post #ffroot .bs-side-cta {
	padding: 28px 24px 22px;
	background: #0C1B20;
	color: #FFFFFF;
	text-align: center;
}

body.single-post #ffroot .bs-side-cta-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4FBFEA;
}

body.single-post #ffroot .bs-side-cta-title {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	text-wrap: balance;
}

body.single-post #ffroot .bs-side-cta-text {
	margin: 12px 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: #C9D2D5;
}

body.single-post #ffroot .bs-side-cta .ff-btn {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	justify-content: center;
}

body.single-post #ffroot .bs-side-cta .ff-btn + .ff-btn {
	margin-top: 10px;
}

body.single-post #ffroot .bs-side-cta-fine {
	margin: 14px 0 0;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: #9AA7AB;
}

@media (max-width: 1200px) {
	body.single-post #ffroot .bs-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 40px;
	}
}

/* Tablets and phones: one column. The contents list sits above the article,
   closed (bs-toc.js); categories and the floater give way to the sticky
   Call / WhatsApp bar these widths already have. */
@media (max-width: 991px) {
	body.single-post #ffroot .bs-layout {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	body.single-post #ffroot .bs-sidebar {
		order: -1;
		margin-bottom: 32px;
	}

	body.single-post #ffroot .bs-sidebar > :not(.bs-toc) {
		display: none;
	}

	body.single-post #ffroot .bs-toc {
		padding: 18px 20px;
	}

	body.single-post #ffroot .bs-toc > summary {
		margin: 0;
	}

	body.single-post #ffroot .bs-toc[open] > summary {
		margin-bottom: 12px;
	}

	body.single-post #ffroot .bs-content :is(h2, h3)[id] {
		scroll-margin-top: 90px;
	}
}

/* A long post (16 headings) would push the categories and the floater a
   screen down: the list scrolls inside its card instead. */
@media (min-width: 992px) {
	body.single-post #ffroot .bs-toc-list {
		max-height: 420px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* "… on WhatsApp +" outline buttons: the "+" glyph sat ~2px under the middle
   of the uppercase label (its own 20px line box, the font's low plus). The
   glyph is hidden and an 11px plus is drawn in its place, centred on the
   label. */
#ffroot :is(.panel-cta, a.areas-note-link) .cta-plus {
	position: relative;
	display: inline-block;
	flex: none;
	width: 11px;
	height: 11px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: inherit;
}

#ffroot :is(.panel-cta, a.areas-note-link) .cta-plus::before,
#ffroot :is(.panel-cta, a.areas-note-link) .cta-plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 11px;
	height: 1.5px;
	margin: -0.75px 0 0 -5.5px;
	border-radius: 1px;
	background: currentColor;
}

#ffroot :is(.panel-cta, a.areas-note-link) .cta-plus::after {
	transform: rotate(90deg);
}

/* The floater stuck 24px under the fixed header (76px), which with the
   header's shadow read as glued to it: 48px of air on desktops and laptops.
   Logged in, the header sits under the 32px admin bar
   (--wp-admin--admin-bar--height, design-fixes.css), so the floater moves
   down with it - without that it was 16px from the menu. */
@media (min-width: 992px) {
	body.single-post #ffroot .bs-side-sticky {
		top: calc(124px + var(--wp-admin--admin-bar--height, 0px));
	}

	body.single-post #ffroot .bs-content :is(h2, h3)[id] {
		scroll-margin-top: calc(124px + var(--wp-admin--admin-bar--height, 0px));
	}
}


/* Homepage: with no CTA row under the results slider, the slider (no bottom
   padding of its own) needs a section's room above the dark coverage band. */
body.home #ffroot#ffroot #md-main > #md-results:not(:has(+ .ff-section-cta)) {
	padding-bottom: var(--ffr-pb);
}

/* Posts: the byline now sits under the hero (as on the programme pages) and
   the meta row is gone. The byline's 72px bottom margin plus the article's
   100px top padding left 172px; one section gap (88px) instead. The article's
   first block (the featured image) lines up with the top of the sidebar. */
body.single-post #ffroot#ffroot #md-main > #md-byline + #md-blog-single {
	padding-top: 16px;
}

body.single-post #ffroot .bs-layout > .bs-content > :first-child {
	margin-top: 0;
}

@media (max-width: 768px) {
	body.single-post #ffroot#ffroot #md-main > #md-byline + #md-blog-single {
		padding-top: 0;
	}
}

/* Homepage trainer cards: four skills per closed card on every screen, not
   only in the phone slider (client, 20. 10. 2026); See More opens the rest. */
body.home #ffroot #md-team .trainer-card:has(.trainer-more[aria-expanded="false"]) .trainer-skills > .tr-skill:nth-child(n+5) {
	display: none;
}