/**
 * Global Ads — single-post three-column layout.
 *
 * Lifted from the inline <style> block in template-demotest-layout.php and rescoped.
 * Every selector there was prefixed with body.page-template-template-demotest-layout,
 * which matches nothing on a single post. The scope here is body.ga-single-layout,
 * a class added only when ga_single_layout_active() returns true — so this file can be
 * loaded without affecting any post where the gate is shut.
 *
 * Kept deliberately identical to the test page: same grid ratios, same sticky maths,
 * same breakpoints. Divergence here would mean the review on /test-page/ told us
 * nothing about how posts render.
 */

body.ga-single-layout {
	--cf-page-gap: 20px;

	/*
	 * How far below the viewport top the left column sits once it is stuck. Shared by
	 * its sticky offset and its height calculation, which have to agree.
	 *
	 * 80px was the fixed header (60px) plus 20px of air. Zee asked for 10px more, and he
	 * is right: the first advert sits at 90 because the right column carries 10px of
	 * padding, so at 80 this column read as fractionally high against it. 90 puts the two
	 * level, and the heading's own leading means it looks level with that as well.
	 *
	 * It also takes away the last way this column could move. The layout begins at 80, so
	 * a sticky offset of 90 is below the resting position: the column is pinned at 90 in
	 * the first frame instead of settling into place once the page scrolls.
	 */
	--cf-col-top: 90px;

	/*
	 * The measure for pages that drop a column.
	 *
	 * 1200px because that is what the site already uses: the header nav inner and the
	 * footer inner are both capped there. The main content container is 1280px, which is
	 * why a page never quite lined up with the furniture above and below it. Matching the
	 * header is the one choice that makes a page look deliberate all the way down.
	 *
	 * The home page and single posts are untouched by this and keep their own widths.
	 */
	--cf-wide-max: 1200px;

	/*
	 * The three column proportions.
	 *
	 * Here rather than written into the grid because they are settable: Global Ads →
	 * Settings for the site, and the Page layout box for one page. They are declared as
	 * whole fr values rather than as bare numbers because a var() cannot have a unit
	 * appended to it in a grid template.
	 *
	 * This is what Customizer → Layout → Sidebars → sidebar width used to look like it
	 * controlled. It never did on these pages: GeneratePress sizes the sidebar it draws
	 * itself, and this layout replaces that sidebar rather than styling it.
	 */
	--cf-col-left: 19fr;
	--cf-col-mid: 60fr;
	--cf-col-right: 21fr;
}

/*
 * Signed in, the WordPress admin bar takes the top 32px and pushes the fixed header down
 * with it, so the header ends at 92 rather than 60.
 *
 * Leaving the offset at 80 did two visible things to anyone signed in, and Zee is signed
 * in while reviewing. The column tucked 12px under the header, clipping "On this page".
 * And because the column's resting position is 112 while its stuck position was 80, it
 * jumped 32px the instant the header became fixed, which is the movement in the video.
 *
 * At 112 the resting and stuck positions are identical, so the column does not move at
 * all, and it clears the header by the same 20px as everywhere else.
 */
body.admin-bar.ga-single-layout {
	--cf-col-top: 122px;
}

body.bp-nouveau.wp-singular.ga-single-layout .container.grid-container {
	max-width: 100% !important;
}

body.ga-single-layout .grid-container,
body.ga-single-layout .container.grid-container,
body.ga-single-layout .site,
body.ga-single-layout .site-content,
body.ga-single-layout #content,
body.ga-single-layout #primary,
body.ga-single-layout #main,
body.ga-single-layout .inside-article {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
	box-sizing: border-box;
}

body.ga-single-layout.separate-containers .inside-article,
body.ga-single-layout.separate-containers .comments-area,
body.ga-single-layout.separate-containers .page-header,
body.ga-single-layout.separate-containers .paging-navigation,
body.ga-single-layout.one-container .site-content,
body.ga-single-layout .inside-page-header {
	padding: 20px 20px 0;
}

body.ga-single-layout.footer-bar-align-right .copyright-bar {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	margin-top: 1em;
	float: none !important;
}

.cloudflare-page-layout {
	display: grid;
	grid-template-columns: var(--cf-col-left) var(--cf-col-mid) var(--cf-col-right);
	gap: var(--cf-page-gap);
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0 0 100px;
	box-sizing: border-box;
	align-items: stretch;
}

/*
 * min-width: 0 is what makes the column obey the 19/60/21 split it declares.
 *
 * A grid item's automatic minimum is its min-content width, so the longest single
 * word in the table of contents was setting a floor under this track. On a 1025px
 * window that floor was 185.81px against the 184.29px the ratio asks for, and the
 * 1.5px came out of the other two columns. It varied with the article's headings,
 * which means the three columns were never quite the same width from one post to
 * the next.
 *
 * It also has to be right for the player: the docking rail repeats the same grid to
 * place the player, and an empty track cannot be pushed by a long word, so the two
 * disagreed by that same 1.5px. With this they are identical at every width.
 *
 * A word too long for the column now wraps inside it rather than widening it, which
 * is what the overflow-wrap on .cloudflare-toc-link below is for.
 */
aside.cloudflare-left {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 100%;
	min-height: 1px;
	padding: 0;
	box-sizing: border-box;
}

.cloudflare-left-inner {
	position: sticky;
	/*
	 * The sticky offset was 120px, which is twice what it needs to be — the fixed
	 * header (#sticky-navigation) measures exactly 60px. The cost of the extra 60px
	 * was paid at the top of the page: the layout begins around y=73, so the left
	 * column was clamped 47px below the heading it sits beside and the three columns
	 * visibly started at three different heights.
	 *
	 * 80px clears the header by 20px and puts the column top level with the other two.
	 */
	top: var(--cf-col-top);
	width: 100%;
	max-width: 100%;
	/*
	 * Height must be exactly viewport-minus-top so the column bottom lands on the
	 * viewport bottom. Anything larger than the subtracted top value leaves a gap
	 * under the video. Both values come from the same custom property so they cannot
	 * drift apart.
	 */
	height: calc(100vh - var(--cf-col-top));
	max-height: calc(100vh - var(--cf-col-top));
	display: flex;
	flex-direction: column;
	overflow: visible;
	padding: 0;
	box-sizing: border-box;
	z-index: 99;
}

.cloudflare-center-inner {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.cloudflare-toc {
	width: 100%;
	min-height: 0;
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	background: #fff;
	/*
	 * 10px at the top, matching the advert rail exactly.
	 *
	 * This was 16px, which sat the label clearly below the heading, and then 0, which
	 * sat it clearly above. Neither looked level, because box tops and visible text do
	 * not start in the same place: a heading's letters begin roughly 10px below the top
	 * of its box, so aligning the boxes leaves the label looking high.
	 *
	 * 10px is the same correction the advert rail already carries, so all three columns
	 * now begin on the same visual line rather than the same mathematical one.
	 */
	padding: 10px 16px 16px;
	box-sizing: border-box;
}

.cloudflare-toc-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.cloudflare-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cloudflareNav;
}

.cloudflare-toc-link {
	/* See the note on aside.cloudflare-left. */
	overflow-wrap: anywhere;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 8px;
	padding: 8px 10px;
	color: #616161;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.35;
}

.cloudflare-toc-list li.cloudflare-toc-numbered {
	counter-increment: cloudflareNav;
}

.cloudflare-toc-link:before {
	content: '';
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #eef3f8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.cloudflare-toc-numbered .cloudflare-toc-link:before {
	content: counter(cloudflareNav);
}

.cloudflare-toc-sub .cloudflare-toc-link:before {
	content: '\2022';
	background: transparent;
	color: #1976d2;
	font-size: 18px;
	line-height: 1;
}

.cloudflare-toc-link.level-h3,
.cloudflare-toc-link.level-h4,
.cloudflare-toc-link.level-h5,
.cloudflare-toc-link.level-h6 {
	padding-left: 18px;
	font-size: 13px;
}

.cloudflare-toc-link.is-active,
.cloudflare-toc-link:hover {
	background: rgba(25, 118, 210, .08);
	color: #1976d2;
}

.cloudflare-toc-link.is-active:before {
	background: #1976d2;
	color: #fff;
}

.cloudflare-toc-sub .cloudflare-toc-link.is-active:before {
	background: transparent;
	color: #1976d2;
}

/*
 * Breadcrumb.
 *
 * The trail is captured and re-emitted inside .cloudflare-breadcrumbs in the centre
 * column, and the wrapper below carries the typography copied from the test page.
 *
 * An earlier revision also reset a nested grid on the trail element itself, back when
 * single.php rendered it above the layout. The SEO plugin in use now emits plain inline
 * spans with no wrapping element, so there is nothing left to reset and that rule has
 * been removed. Measured on /cfa-exam-day-checklist/: the wrapper and its first child
 * both start at 404px, which is correct.
 */

.cloudflare-breadcrumbs {
	font-size: 14px;
	margin-bottom: 28px;
	color: #666;
	text-align: left;
}

.cloudflare-breadcrumbs a {
	color: #1976d2;
	text-decoration: none;
	font-weight: 600;
}

.cloudflare-breadcrumbs p {
	font-size: 14px;
	color: #666;
	margin: 0;
}

/*
 * Title.
 *
 * text-align is set explicitly. The theme centres single-post titles — that is what the
 * full-width header banner wanted — and without this the h1 inherits that and sits
 * centred while everything below it is left aligned. The test page's h1 is left aligned;
 * measured there at 42px / weight 400 / margin-bottom 20px, which is what the theme
 * already gives, so only the alignment needs stating.
 */
body.ga-single-layout h1.cloudflare-title {
	margin-bottom: 20px;
	/*
	 * !important is load-bearing here, not laziness.
	 *
	 * Something in the site's own CSS centres every h1 on single posts with
	 * !important. Proved empirically: appending a bare <h1> to document.body on a
	 * single post computes text-align:center, while the same test on the test page
	 * (a Page, not a post) computes start — which is why the test page's title is
	 * left aligned and this one was not. A plain .cloudflare-title{text-align:left}
	 * rule matched the element and still lost, which only happens against !important.
	 *
	 * I could not locate the offending rule: a full walk of all 69 stylesheets found
	 * no matching text-align:center declaration, and there are no adopted stylesheets.
	 * Rather than guess at the source and risk changing a global, the override is
	 * scoped as tightly as possible — the layout's body class plus the element and its
	 * own class — so it cannot affect any h1 outside this template.
	 */
	text-align: left !important;
}

/*
 * The entry header is left in the markup so GeneratePress's generate_before_entry_title
 * and generate_after_entry_title hooks still fire for anything attached to them, but it
 * has nothing left to show: the title is rendered below as .cloudflare-title and the
 * byline as .cloudflare-meta. Without this it printed a second, differently formatted
 * byline ("04 Aug 2026by Zee Tan") above the title, which the test page does not have.
 */
body.ga-single-layout .cloudflare-content > .inside-article > .entry-header {
	display: none;
}

/*
 * Featured image band.
 *
 * The height used to be fixed at 300px with object-fit: cover, copied from the test page
 * where it was measured at 850x300. On an 850px column that crops a 2:1 photograph to
 * 2.83:1, which is 125px of a 425px image thrown away, top and bottom, on every article.
 * Zee spotted it and asked whether the new column was the cause. It was.
 *
 * This is the same mistake as the advert slots: a box built for one shape, quietly cutting
 * everything that is not that shape. The image now keeps its own proportions. Space is
 * still reserved before it loads, because the markup carries the real width and height and
 * the browser works the ratio out from those, so nothing jumps as the page settles.
 */
.cloudflare-featured-image {
	width: 100%;
	height: auto;
	margin: 0 0 18px;
	padding: 0;
}

.cloudflare-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Belt and braces against a second copy of the same image: if GeneratePress's own
 * post image is ever enabled for single posts it renders into this same article.
 */
body.ga-single-layout .cloudflare-content .post-image {
	display: none;
}

@media (max-width: 600px) {
	/*
	 * Nothing to shorten any more: the image keeps its own proportions, so on a narrow
	 * screen it is already as tall as its own shape makes it and no taller.
	 */
	.cloudflare-featured-image {
		height: auto;
	}
}

.cloudflare-meta {
	font-size: 15px;
	margin-bottom: 12px;
	color: #555;
}

.cloudflare-meta a {
	color: #1976d2;
	text-decoration: none;
	font-weight: 600;
}

.cloudflare-content h1,
.cloudflare-content h2,
.cloudflare-content h3,
.cloudflare-content h4,
.cloudflare-content h5,
.cloudflare-content h6 {
	scroll-margin-top: 150px;
}

.cloudflare-right {
	box-sizing: border-box;
	padding-right: 20px;
}

.cloudflare-right-inner {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	/*
	 * 40px here started the advert rail well below the article heading, and 10px was an
	 * attempt to keep a little air above the first creative: a heading's box begins
	 * slightly above the visible top of its letters, so matching box tops exactly was
	 * meant to read as the advert sitting high.
	 *
	 * Read the other way by the person reviewing the page, as two columns that do not
	 * line up, which is the reading that counts and the one that can be checked. The
	 * rail now starts level with the article to the pixel. The current site still has
	 * the 10px, so this is a deliberate change rather than a repair.
	 */
	padding-top: 0;
	box-sizing: border-box;
}

.cloudflare-right-inner img {
	max-width: 100%;
	height: auto;
}

.cloudflare-mobile-nav {
	display: none;
	position: sticky;
	top: 60px;
	z-index: 5000;
	background: #fff;
	padding: 12px 15px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.cloudflare-mobile-nav select {
	width: 100%;
	padding: 12px;
	border-radius: 0;
	border: 1px solid #ddd;
	background: #fff;
}

/*
 * The player is a fixed rail, and it is a fixed rail in the first frame the browser
 * paints.
 *
 * What it used to be: an ordinary block at the bottom of the sticky left column, which
 * JavaScript measured on DOMContentLoaded and promoted to `position: fixed`, handing
 * CSS the column's left edge and width as custom properties.
 *
 * Two things were wrong with that, and both of them were visible.
 *
 * The measurement ran before the grid had been laid out, so the "left column" measured
 * the full width of the page: 1692px on a 1707px viewport. The player was pinned to
 * that, which is a black box the width of the window and 951px tall, anchored to the
 * bottom of the screen. At `load` the script measured a second time, got the real
 * 314px, and the player collapsed into the corner. That collapse is everything that has
 * been reported about this player: the flicker, the zoom in from the right, the
 * "it loads expanded". It was never an animation. It was a wrong number being
 * corrected in front of the reader.
 *
 * The same bad measurement was written into --ga-dock-reserve as the column's
 * padding-bottom, and that one was never corrected: 952px of padding inside a 711px
 * column leaves the table of contents no height at all, so "On this page" has been
 * rendering as an empty box on every article.
 *
 * What it is now: a fixed rail that repeats the layout's own grid. Same track
 * definition, same gap, and the same width, because a fixed element spanning left:0 to
 * right:0 measures exactly what .cloudflare-page-layout measures (verified equal at
 * 1692px), so track one of the rail is the left column. The player sits in it, so its
 * position and width come from the same CSS the columns come from. They are correct before the first paint, they stay correct
 * through any resize without a listener, and they follow the column ratios if those are
 * ever changed in Global Ads -> Settings.
 *
 * Nothing measures anything, nothing changes after load, and there is no state left to
 * get wrong.
 */
.cloudflare-dock-rail {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: grid;
	grid-template-columns: var(--cf-col-left) var(--cf-col-mid) var(--cf-col-right);
	gap: var(--cf-page-gap, 20px);
	/*
	 * The rail spans the window but only the player is a target. Without this the two
	 * empty tracks would lie over the article and the advert column and swallow every
	 * click along the bottom of the screen.
	 */
	pointer-events: none;
}

/* Pages that drop the advert column narrow and centre, so the rail narrows with them. */
.cloudflare-dock-rail--no-right {
	grid-template-columns: 300px minmax(0, 1fr);
	max-width: var(--cf-wide-max);
	margin-left: auto;
	margin-right: auto;
}

.cloudflare-dock-slot {
	grid-column: 1;
	min-width: 0;
	pointer-events: auto;
}

/*
 * Hold the player's height open at the bottom of the left column.
 *
 * The player is fixed, so it is out of the column's flow and the table of contents
 * would otherwise run on underneath it. This spacer is in that column, so it is the
 * player's width, and it is the player's 16:9 shape, so it is the player's height. No
 * measurement, nothing to go stale. It replaces the --ga-dock-reserve custom property,
 * which is what emptied the table of contents.
 */
.cloudflare-video-reserve {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.cloudflare-floating-video {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	background: #000;
	border-radius: 0;
	overflow: visible;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
	/*
	 * There is no transition here, deliberately.
	 *
	 * There used to be `transition: width .25s ease, max-width .25s ease`, put there for
	 * the expand control. It also fired on something nobody intended: the player's width
	 * is its column's width, so every step of a window resize started a quarter second
	 * width animation and the player visibly lagged behind the column it belongs to.
	 *
	 * Expanding is a deliberate press on a button, and it is not worth one more way for
	 * this player to appear to move on its own. It now resizes in the same frame as the
	 * press, and it is completely still at every other moment.
	 */
}

.cloudflare-floating-video.is-expanded {
	width: clamp(540px, 32vw, 830px);
	max-width: 830px;
}

.cloudflare-floating-video-inner {
	position: relative;
	width: 100%;
	margin: 0;
	padding-top: 56.25%;
	background: #000;
	overflow: hidden;
}

.cloudflare-floating-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.cloudflare-video-toggle {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	border: 0;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	/* 44px. This is a control a reader presses on its own, and at 34 it was under the
	   floor on every article page. */
	width: 44px;
	height: 44px;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cloudflare-unmute-overlay {
	display: none !important;
}

.cloudflare-video-cta {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 6;
	background-color: #008f5c;
	color: #fff;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border-radius: 0;
	transition:
		background-color .2s ease,
		color .2s ease;
}

/* The last orange hover on the site.
   -------------------------------------------------------------------------
   The round that turned every button's hover to the darker green missed this
   one, because it worked from the list of components that were named rather
   than from a sweep of everything button shaped. This is the "Check it out!"
   button sitting on the video, and it appears on the CFA, FRM and CPA hubs, so
   it is not an obscure corner.

   The request was for the darker green "anywhere else that applies", and an
   orange button two inches from a green one is exactly what that meant. */
.cloudflare-video-cta:hover {
	background-color: #005e3f;
	color: #fff;
}

.cloudflare-banner-stack .bloga {
	margin-bottom: 14px;
}

.cloudflare-banner-stack img {
	width: 100%;
	height: auto;
	display: block;
}

body.ga-single-layout .inside-navigation.grid-container.grid-parent {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

body.ga-single-layout #generate-slideout-menu {
	z-index: 99999 !important;
}

@media (max-width: 1280px) {
	.cloudflare-center-inner {
		max-width: 820px;
	}

	/*
	 * The left column used to take a separate 100px offset here. The header is the
	 * same 60px at this width as at any other, so there was nothing for the extra
	 * 40px to clear, and having a second set of numbers meant the sticky offset and
	 * the height calculation had to be kept in step in two places. Both now come from
	 * --cf-col-top and this breakpoint only adjusts the centre column.
	 */
}

@media (max-width: 1024px) {
	.cloudflare-page-layout {
		display: block;
		width: 100%;
		max-width: 100%;
		padding: 0 15px 190px;
	}

	.cloudflare-center-inner {
		max-width: 850px;
		padding-top: 24px;
	}

	.cloudflare-left,
	.cloudflare-left-inner {
		display: none !important;
	}

	.cloudflare-right {
		margin-top: 30px;
		padding-right: 0;
	}

	.cloudflare-right-inner {
		padding-top: 0;
	}

	.cloudflare-mobile-nav {
		display: block;
	}

	.cloudflare-dock-rail,
	.cloudflare-video-reserve,
	.cloudflare-floating-video {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.cloudflare-dock-rail,
	.cloudflare-video-reserve,
	.cloudflare-floating-video {
		display: none !important;
	}
}

/* ===========================================================================
 * Two-column variant — pages that run without the left column.
 *
 * Applied via ga_layout_hide_left(); see inc/global-ads-layout.php for which
 * pages get it and why.
 *
 * The point is to land on the same geometry as the home page rather than merely
 * deleting a column. The three-column layout is full-bleed — it measured 1692px
 * on a 1707px viewport — so a page using it sat edge to edge with a narrow 850px
 * column of text stranded in the middle and the adverts pushed out to the far
 * right. On a grid page that reads as broken even before the column count is
 * considered.
 *
 * The home page is a 1280px container holding 868px of content and a 372px
 * sidebar. These rules reproduce that: same outer width, same rail width, so the
 * two pages line up when you click between them.
 * ======================================================================== */

.cloudflare-page-layout--no-left {
	/*
	 * Rail fixed at 372px to match the home page sidebar exactly. The creatives are
	 * fixed-size (600x200 and 360x120), so a rail that changes width with the
	 * viewport rescales every advert on the page; pinning it keeps them sharp.
	 */
	grid-template-columns: minmax(0, 1fr) 372px;
	max-width: var(--cf-wide-max);
	margin-left: auto;
	margin-right: auto;
}

/*
 * The 850px cap exists to hold a comfortable measure for article text inside a
 * wide centre column. Here the column is already the article width, so the cap
 * only leaves the content narrower than the space it was given.
 */
.cloudflare-page-layout--no-left .cloudflare-center-inner {
	max-width: none;
}

/*
 * Without the advert rail. The left column keeps a fixed 300px rather than a share of the
 * row, because a table of contents does not benefit from getting wider and the reading
 * column does.
 */
.cloudflare-page-layout--no-right {
	grid-template-columns: 300px minmax(0, 1fr);
	max-width: var(--cf-wide-max);
	margin-left: auto;
	margin-right: auto;
}

.cloudflare-page-layout--no-right .cloudflare-center-inner {
	max-width: none;
}

/*
 * Neither column: one block, centred on the page, at the same measure as everything else.
 *
 * This was 900px, which was too tight. On /offers/ the content is a grid of coupon cards
 * rather than prose, so a narrow measure wasted half the screen and squeezed the cards
 * for no reading benefit. Text inside stays left aligned; it is the container that is
 * centred, not the words.
 */
.cloudflare-page-layout--no-left.cloudflare-page-layout--no-right {
	display: block;
	max-width: var(--cf-wide-max);
	margin-left: auto;
	margin-right: auto;
}

.cloudflare-page-layout--no-left.cloudflare-page-layout--no-right .cloudflare-center-inner {
	max-width: none;
}

/*
 * A gutter for the layouts that have no left column. Marked cf-min-gutter.
 *
 * Above 1024 the layout carries no horizontal padding, and the three variants below rely on
 * max-width plus auto margins to inset themselves. That only produces an inset once the window is
 * wider than the max-width, so between about 1025 and 1230 there is nothing at all: the heading and
 * the cards sit hard against both edges of the window. It is most of a landscape iPad, and any
 * browser window that is not maximised.
 *
 * It does not show on the three column layout because the left column occupies that space, which is
 * why it only became visible when the contents column was switched off on the listing and category
 * pages.
 *
 * Width rather than padding, so the content keeps its full measure once the max-width binds instead
 * of losing 30px to padding inside it.
 */
@media (min-width: 1025px) {

	.cloudflare-page-layout--no-left,
	.cloudflare-page-layout--no-right,
	.cloudflare-page-layout--no-left.cloudflare-page-layout--no-right {
		width: min(100% - 30px, var(--cf-wide-max));
	}
}

@media (max-width: 1024px) {
	/*
	 * Below this width the layout is already a single stacked column, so the
	 * two-column geometry has nothing to describe and the container cap would
	 * fight the parent theme's own padding.
	 */
	.cloudflare-page-layout--no-left,
	.cloudflare-page-layout--no-right,
	.cloudflare-page-layout--no-left.cloudflare-page-layout--no-right {
		max-width: 100%;
	}

	/* One stacked column at this width, so the two-column track list has nothing to say. */
	.cloudflare-page-layout--no-right {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Header and footer on pages that drop a column.
 *
 * The rule near the top of this file forces every GeneratePress container to full width
 * with !important, so the three-column layout can run edge to edge. On a page that is
 * capped at 1200px that override is wrong: it left the footer at 1637px under 1200px of
 * content, which is the misalignment that reads as "the header is a different size".
 *
 * ga-layout-constrained is added in inc/global-ads-page-options.php to exactly those
 * pages, so the furniture is put back to the same measure as the content and the page
 * lines up from top to bottom.
 * ------------------------------------------------------------------------ */

body.ga-single-layout.ga-layout-constrained .inside-navigation,
body.ga-single-layout.ga-layout-constrained .inside-site-info,
body.ga-single-layout.ga-layout-constrained .footer-widgets-container,
body.ga-single-layout.ga-layout-constrained .inside-top-bar {
	max-width: var(--cf-wide-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}


/* ga-list-meta
 *
 * Spacing for the article list meta line, so author, date and comment count read as three
 * things rather than one run-on string. The date is printed as a bare link with nothing
 * after it, so without this the next item touches it.
 *
 * Whether the comment count appears at all is decided in PHP, in ga_list_meta_items(), so
 * there is nothing here that tries to guess it from the markup.
 */


/* ga-list-meta-bullet
 *
 * The comment count arrives with a bullet in front of it, as a bare text node inside the
 * span and outside the link: " &bull; <a>9</a>". It is not GeneratePress. Its prefix filter
 * returns nothing here (that is what removed the "by" in front of the author) and it is not
 * a pseudo element, not in the child theme, and not anywhere in the database. Whatever adds
 * it, the FRM lists Zee asked us to match do not show it, so it is hidden rather than hunted.
 *
 * Zeroing the font size on the span removes the loose text node without touching the link,
 * which gets the size back. 14px is the size the meta line is set to elsewhere.
 */
body:not(.single) .entry-meta .comments-link {
	font-size: 0;
}

body:not(.single) .entry-meta .comments-link a {
	font-size: 14px;
}

/* ga-list-meta-dots
 *
 * Grace asked for the dots back: [author] . [date] . [comments, if any], with spacing.
 *
 * The all articles lists already had them and always did. They are drawn as an ::after on
 * each item, using U+2219, which is why the pipe separators in that markup are hidden. My
 * first attempt at this put a dot on those pipes as well and gave that list two dots
 * between every field. Those lists are now left completely alone.
 *
 * What was missing was the same treatment on the category pages, so this puts it there,
 * same glyph, same size, so the two kinds of list finally read identically.
 *
 * The date only gets a dot after it when something follows it. Grace said she would accept
 * a stray dot on an article with no comments but would rather not have one, and :not(:last-child)
 * gives her the version she wanted, because the comment count is the only thing that can
 * follow the date and it is dropped entirely when there are none.
 */
/* The two rules that used to sit here, drawing the dot after the author and after
   a link with something following it, have moved to assets/css/theme.css.

   They were invisible on search results, because this file is only enqueued when
   the global ads layout is active and that is false on a search page. The rule in
   theme.css that switches the carried-over separator off is not conditional, so
   search results had the dot removed and nothing putting it back.

   Do not add them back here as well. A second copy is exactly what gave the exam
   lists two dots between every field, which the note above records. */

/* ga-no-sidebar-full-width
 *
 * A page set to no left column and no right column should actually be full width.
 *
 * It was not. GeneratePress caps .entry-content at its readability width, 800px, whatever
 * the layout around it is doing, so a page with both columns switched off still had its
 * text in an 800px ribbon inside a 1200px shell. The Offers page looked correct only
 * because somebody had pasted a snippet of CSS on to that one page to cancel the cap, so
 * Zee was comparing a page with a hidden override against a page without one and quite
 * reasonably concluded the settings were broken. They were identical. The override was not.
 *
 * Making it part of the layout means the setting now does what its name says on every page,
 * and the per page snippet on Offers becomes redundant rather than load bearing.
 *
 * Articles keep the readability width, because 800px of text in the middle column is
 * deliberate there.
 *
 * The exam article lists are in the same position and were missed. Their content is a grid of
 * cards rather than a column of prose, so a reading measure does nothing for it, and capping it
 * left the cards narrower than the heading and the green signup box above them: 800 against 808
 * at 1440, and 800 against 994 at 1024, where the difference is impossible not to see. The old
 * site caps the measure on articles and nowhere else, so the listing matches it now.
 */
.cloudflare-page-layout--no-left.cloudflare-page-layout--no-right .entry-content,
.cloudflare-page-layout--no-left.cloudflare-page-layout--no-right .entry-meta,
.cloudflare-page-layout--no-left.cloudflare-page-layout--no-right .comments-area,
body.ga-layout-feed .entry-content,
body.ga-layout-feed .entry-meta,
body.ga-layout-feed .comments-area {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}