/* ==========================================================================
   Coding Intel Customizations — the plugin's stylesheet.

   ONE file for every module. It used to be four (circles-council.css,
   webinar-template.css, meeting-template.css, industry-experts.css), each
   with its own copy of the palette under a different prefix — and three
   different, unscoped `.site-inner` rules that only stayed out of each
   other's way because the files never loaded together.

   Colour and type now come from ONE place: the custom properties the theme
   declares in enterprise-pro/style.css (`:root`, "Global variables"),
   `--ci-*` and `--fl-builder-*`. They are used directly, without literal
   fallbacks — the theme is always loaded, and a fallback is just a second
   copy of a value that can drift. To change a colour or a font, change it
   there.

   Every module enqueues this file under the same handle (cic-customizations),
   so it loads once even when two modules are active on the same page.

   Contents:
     1. Tokens (only what the theme has no variable for)
     2. Page chrome — shared by every module
     3. Circles & Council, the /forums/ grid and the Circle home page
     4. Webinars — single post
     5. Meetings — single meeting
     6. Webinars + Meetings — the archive card grid
     7. Industry Experts
   ========================================================================== */


/* ==========================================================================
   1. Tokens

   Deliberately short. Anything that is a colour or a typeface belongs to the
   theme's variables, not here; what is left is surfaces, radii and shadows,
   which the theme has no tokens for.
   ========================================================================== */

:root {
	--cic-surface: #fff;
	--cic-surface-soft: #fafafa;
	--cic-radius: 8px;
	--cic-shadow: 0 0 5px rgba( 0, 0, 0, .2 );
	--cic-shadow-hover: 0 6px 18px rgba( 1, 53, 63, .1 );

	/* Display face of the archive cards. The one typeface in here that is not
	   the theme's, kept so the webinar and meeting listings still look the way
	   they do. */
	--cic-card-title-font: "EB Garamond", serif;
}


/* ==========================================================================
   2. Page chrome — shared by every module

   One set of gutters for all of them. The webinar pages used to have their
   own (`body .site-inner { padding: 40px 20px }`) and the meeting pages a
   verbatim copy of this one; with a single stylesheet only one of the three
   could have won, so they are now the same rule.
   ========================================================================== */

.site-inner {
	padding: 0 16px;
	& > .wrap {
		max-width: 1200px;
		margin: 0 auto;
	}
}

main.content {
	padding-top: 40px;
}
/* Forum archive views keep the same gutters as the landing pages. */
.site-inner:has( article.type-forum ) .content,
.site-inner:has( article.type-topic ) .content {
	padding-top: 40px;
}

.site-inner > .wrap main.content {
	float: none;
}


/* ==========================================================================
   3. Circles & Council, the /forums/ grid and the Circle home page

   The /forums/ card grid these rules were once shared with is gone — 2.0.0
   retired it, and /forums/ now redirects to the landing page — so what is left
   here is the Circles & Council landing templates and the Circle home page.
   ========================================================================== */

/* ==========================================================================
   3a. The card surface

   The one definition of what a card looks like: background, padding, border,
   corners and shadow. Everything in the plugin that is a raised panel opts in
   by joining this selector list, wherever in the file it otherwise lives —
   the landing and forum cards below, the Circle home panels (section 3e), the
   meeting panel (section 5) and the meeting listing cards (section 6).

   The webinar listing cards are deliberately NOT in here: their action bar is
   a full-bleed strip pinned to the bottom of the card, so they need their own
   padding and their own chrome. They are in section 6.

   The corners are square. To round all of them at once, add
   `border-radius: var( --cic-radius )` to this rule — it is the only place
   that needs it.
   ========================================================================== */

.cic-cc__card,
.cic-circle__panel,
.cic-meeting__wrapper,
body.cic-meetings-archive .fl-post-grid-post,
#bbpress-forums fieldset.bbp-form {
	padding: 26px 24px 28px;
	background: var( --cic-surface-soft );
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-top: 4px solid var( --ci-color-primary );
	box-shadow: var( --cic-shadow );
}

/* Tighter on a phone. */
@media only screen and (max-width: 480px) {
	.cic-cc__card,
	.cic-circle__panel,
	.cic-meeting__wrapper,
	body.cic-meetings-archive .fl-post-grid-post {
		padding: 22px 18px 24px;
	}
}

/* No shadow on paper, and never split a card across pages. */
@media print {
	.cic-cc__card,
	.cic-circle__panel,
	.cic-meeting__wrapper,
	body.cic-meetings-archive .fl-post-grid-post {
		box-shadow: none;
		break-inside: avoid;
	}
}


/* ==========================================================================
   3b. Card system — the landing templates and the /forums/ grid
   ========================================================================== */

.cic-cc {
	margin: 30px 0 0;
	color: var( --fl-builder-text-color );
	font-family: var( --ci-subtitle-font-family );
}

/* --- Intro --------------------------------------------------------------- */

.cic-cc__lead {
	max-width: 46em;
	margin: 0 0 32px;
	font-size: 19px;
	line-height: 1.55;
	color: var( --fl-builder-gray-medium-color );
}

/* --- Grid: 1 column on mobile, 3 across on desktop ----------------------- */

.cic-cc__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}

@media only screen and (min-width: 900px) {
	.cic-cc__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 28px;
	}
}

/* --- Card ---------------------------------------------------------------- */

/* Surface (background, padding, border, shadow) comes from section 3a. */
.cic-cc__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: box-shadow .15s ease, transform .15s ease;
}

.cic-cc__card:hover {
	box-shadow: var( --cic-shadow-hover );
	transform: translateY( -2px );
}

/* --- Head ---------------------------------------------------------------- */

.cic-cc__head {
	padding-bottom: 18px;
	border-bottom: 1px solid var( --fl-builder-gray-normal-color );
}

.cic-cc__name {
	margin: 0;
	font-family: var( --ci-title-font-family );
	font-size: 27px;
	font-weight: 600;
	line-height: 1.15;
	color: var( --ci-color-primary );
}

.cic-cc__brand {
	display: block;
	font-family: var( --ci-subtitle-font-family );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.2;
	margin-bottom: 6px;
	color: var( --fl-builder-green-normal );
}

.cic-cc__tagline {
	margin: 10px 0 0;
	font-size: 16px;
	font-style: italic;
	line-height: 1.45;
	color: var( --fl-builder-gray-medium-color );
}

/* Reserve two lines so one- and two-line taglines line up across the row. */
@media only screen and (min-width: 900px) {
	.cic-cc__tagline {
		min-height: 2.9em;
	}
}

/* --- Body ---------------------------------------------------------------- */

.cic-cc__body {
	flex: 1 1 auto;
}

.cic-cc__section {
	margin-top: 22px;
}

.cic-cc__section-title {
	margin: 0 0 10px;
	font-family: var( --ci-subtitle-font-family );
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var( --ci-color-primary );
}

/* Lists use an em-dash marker, matching the source document. The theme injects
   its own bullets on some list items, so they are suppressed explicitly. */
.cic-cc .cic-cc__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.cic-cc .cic-cc__item {
	position: relative;
	margin: 0 0 10px;
	padding-left: 1.55em;
	font-size: 15.5px;
	line-height: 1.5;
	list-style: none !important;
}

.cic-cc .cic-cc__item:last-child {
	margin-bottom: 0;
}

.cic-cc .cic-cc__item::before {
	content: "\2014" !important; /* em dash */
	display: block !important;
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	line-height: inherit;
	color: var( --fl-builder-green-normal );
}

.cic-cc .cic-cc__item::after {
	content: none !important;
}

/* --- Foot ---------------------------------------------------------------- */

.cic-cc__foot {
	margin-top: 22px;
}

.cic-cc__closing {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var( --fl-builder-green-soft );
	border-left: 3px solid var( --fl-builder-green-normal );
	border-radius: 0 6px 6px 0;
	font-size: 15.5px;
	font-style: italic;
	line-height: 1.5;
	color: var( --ci-color-primary );
}

/* Button — same tokens the theme uses for its own buttons. */
.cic-cc__btn {
	display: block;
	width: 100%;
	background: var( --ci-btn-bg );
	margin: 0;
	padding: var( --ci-btn-padding );
	font-family: var( --ci-btn-font-family );
	font-size: var( --ci-btn-font-size );
	font-weight: var( --ci-btn-font-weight );
	color: var( --ci-btn-text-color ) !important;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	line-height: 1.2;
	border: 1px solid var( --ci-btn-border );
	border-radius: var( --ci-btn-border-radius );
	overflow: hidden;
	transition: all 200ms linear;
}

.cic-cc__btn:hover,
.cic-cc__btn:focus {
	background: var( --ci-btn-bg-hover );
	color: var( --ci-btn-text-hover ) !important;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Row alignment (progressive enhancement)

   The source is a comparison table, so on desktop each card hands its rows to
   the parent grid with `subgrid`: heads, the three sections and the footers
   line up across all three columns. Browsers without subgrid keep the flex
   layout above, which reads fine as three self-contained cards.

   Padding moves from the card to its children here, otherwise it would offset
   the content from the shared row tracks.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 900px) {
	@supports ( grid-template-rows: subgrid ) {
		.cic-cc__grid {
			/* head + 3 sections + foot */
			grid-template-rows: auto auto auto auto auto;
			row-gap: 0;
		}

		.cic-cc__card {
			display: grid;
			grid-row: span 5;
			grid-template-rows: subgrid;
			padding: 0;
		}

		.cic-cc__body {
			display: contents;
		}

		.cic-cc__head {
			padding: 26px 24px 18px;
		}

		.cic-cc__section {
			padding: 0 24px;
		}

		.cic-cc__foot {
			display: flex;
			flex-direction: column;
			padding: 0 24px 28px;
		}

		.cic-cc__btn {
			margin-top: auto;
		}
	}
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 480px) {
	.cic-cc__lead {
		font-size: 17px;
	}

	.cic-cc__name {
		font-size: 24px;
	}
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
	.cic-cc__grid {
		grid-template-columns: repeat( 3, 1fr );
		gap: 12px;
	}
}

/* ==========================================================================
   Shared-panel layout (.cic-cc--shared)

   Same cards, minus the lines the three groups have in common — those move to
   one panel below the grid. Only the deltas live here; everything above is
   reused as-is.
   ========================================================================== */

/* The cards are one section shorter, so the subgrid span drops from 5 to 4
   (head + 2 sections + foot). Overrides the 5-row rule above. */
@media only screen and (min-width: 900px) {
	@supports ( grid-template-rows: subgrid ) {
		.cic-cc__grid--compact {
			grid-template-rows: auto auto auto auto;
		}

		.cic-cc__grid--compact .cic-cc__card {
			grid-row: span 4;
		}
	}
}

/* --- The shared panel ----------------------------------------------------- */

.cic-cc__shared-panel {
	margin-top: 28px;
	padding: 26px 24px 28px;
	background: var( --fl-builder-green-soft );
	border: 1px solid var( --fl-builder-gray-normal-color );
	/*border-radius: 10px;*/
}

.cic-cc__shared-title {
	margin: 0 0 22px;
	font-family: var( --ci-title-font-family );
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var( --ci-color-primary );
}

.cic-cc__shared-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	& .cic-cc__section-title {
		color: var( --fl-builder-gray-dark-color );
	}
}

@media only screen and (min-width: 900px) {
	.cic-cc__shared-panel {
		padding: 30px 28px 32px;
	}

	.cic-cc__shared-grid {
		/*grid-template-columns: repeat( 3, minmax( 0, 1fr ) );*/
		gap: 28px;
	}
}

.cic-cc__shared-col {
	min-width: 0;
}

/* The panel sits on the soft background, so the em-dash markers need the
   stronger colour to stay legible. */
.cic-cc--shared .cic-cc__shared-panel .cic-cc__item::before {
	color: var( --ci-color-primary );
}

@media only screen and (max-width: 480px) {
	.cic-cc__shared-panel {
		padding: 22px 18px 24px;
	}

	.cic-cc__shared-title {
		font-size: 20px;
	}
}

@media print {
	.cic-cc__shared-grid {
		grid-template-columns: repeat( 3, 1fr );
		gap: 12px;
	}

	.cic-cc__shared-panel {
		break-inside: avoid;
	}
}


/* ==========================================================================
   3c. bbPress — forums, topics and replies

   bbPress ships a float-based table layout: the topic list and the reply list
   are `ul`s whose `li`s are laid out as columns. That is what falls apart on a
   phone, and what keeps these views from looking like the rest of the plugin.

   So the layout is rebuilt here: a topic is a card, a reply is a card, and
   both take their surface from section 3a. Nothing is floated, and nothing is
   sized in a fixed pixel column, so the phone layout is the desktop one with
   the right rail moved underneath.

   Two things the theme does that have to be undone inside the forum:
     - `.entry-content ul > li` gives every `li` a disc bullet and a 40px
       indent (style.css ~1365). bbPress's `li`s are layout, not prose, so the
       lists are reset here and re-enabled only inside real post content.
     - The clearfix `::before` / `::after` on `.entry` and `.entry-content`
       used to be killed wholesale in this section. With the floats gone there
       is nothing to clear, so it is no longer needed — and killing every
       pseudo-element also killed the ones this section now uses.

   Scoped to article.type-forum / article.type-topic, so the rules are inert
   on the landing pages even though the file is loaded there too.
   ========================================================================== */

article.type-forum,
article.type-topic {
	margin: 0;
	border: none;

	& :is( .entry-title, .entry-title-link ) {
		margin: var( --ci-title-margin ) !important;
		font-family: var( --ci-title-font-family ) !important;
		font-size: var( --ci-title-font-size ) !important;
		font-weight: var( --ci-title-font-weight ) !important;
		color: var( --ci-title-color ) !important;
	}

	/* --- Base ------------------------------------------------------------ */

	& #bbpress-forums {
		font-family: var( --ci-subtitle-font-family );
		font-size: 16px;
		color: var( --fl-builder-text-color );

		& a {
			color: var( --ci-color-primary );
			&:hover {
				color: var( --fl-builder-green-normal );
			}
		}

		/* bbPress's own lists are layout. Undo the theme's prose list styling. */
		& :is( ul, ol ) {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		& li {
			margin: 0;
		}

		/* …and put it back inside the parts that really are prose. */
		& :is( .bbp-topic-content, .bbp-reply-content ) {
			& :is( ul, ol ) {
				margin: 0 0 20px 24px;
				list-style: revert;
			}
			& li {
				margin-bottom: 8px;
			}
			& > :last-child {
				margin-bottom: 0;
			}
		}

		/* The forum's own content is prose the THEME styles: enterprise-pro
		   gives `#bbpress-forums .cic-forum-content` the same treatment as
		   `.entry-content` (style.css ~1365 and ~1957) — type, headings, links
		   and lists. The reset above out-specifies its list rules, so they are
		   restored here with the theme's own values rather than this file's. */
		& .cic-forum-content {
			& :is( ul, ol ) {
				margin: 0 0 30px 40px;
				list-style: revert;
			}
			& li {
				margin-bottom: 15px;
			}
			& :is( ul, ol ) :is( ul, ol ) {
				margin-bottom: 0;
			}
			& > :last-child {
				margin-bottom: 0;
			}
		}

		& .bbp-replies {
			border: none;
		}

		& li.bbp-body ul.topic {
			padding: 22px 20px 24px;
		}

		& .wp-editor-container {
			border: none;
		}

		& .quicktags-toolbar {
			margin-bottom: 5px;
			border: 1px solid #dcdcde;
		}

	}

	& .bbp-author-avatar {
		display: none;
	}

	/* Float-based columns, from bbPress's default table layout. */
	& :is(
		li.bbp-forum-info,
		li.bbp-forum-freshness,
		li.bbp-topic-title,
		li.bbp-topic-voice-count,
		li.bbp-topic-reply-count,
		li.bbp-topic-freshness,
		div.bbp-reply-author,
		div.bbp-reply-content,
		div.bbp-submit-wrapper
	) {
		float: none;
		width: auto;
	}

	/* --- Breadcrumb + subscription toggle -------------------------------- */

	& #bbpress-forums :is( .bbp-breadcrumb, #subscription-toggle ) {
		font-size: 14px;
		& a {
			color: var( --ci-color-secondary );
			&:hover {
				color: var( --fl-builder-gray-dark-color );
			}
		}
	}

	& #bbpress-forums .bbp-breadcrumb p {
		margin-bottom: 8px;
	}

	& #bbpress-forums #subscription-toggle {
		margin-bottom: 24px;
	}

	/* --- Notices --------------------------------------------------------- */

	& #bbpress-forums div.bbp-template-notice {
		margin: 0 0 24px;
		padding: 5px 18px;
		background: var( --fl-builder-green-soft );
		border: 1px solid var( --fl-builder-gray-normal-color );
		border-left: 4px solid var( --ci-color-primary );
		font-size: 15px;

		& :is( ul, p ) {
			margin: 0;
		}
		& li + li {
			margin-top: 6px;
		}
	}

	/* ----------------------------------------------------------------------
	   Topic list — one card per topic
	   ---------------------------------------------------------------------- */

	/* The column captions and the spacer row belong to the table layout. */
	& .bbp-topics > :is( li.bbp-header, li.bbp-footer ) {
		display: none;
	}

	& .bbp-topics > li.bbp-body {
		display: grid;
		gap: 14px;
		margin-bottom: 32px;
	}

	/* One topic. Placement is explicit because the source order is
	   title / voices / replies / freshness and auto-flow would put the
	   freshness back under the title. */
	& .bbp-topics > li.bbp-body > ul {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: start;
		gap: 4px 20px;
		padding: 18px 20px;
		background: var( --cic-surface-soft );
		border: 1px solid var( --fl-builder-gray-normal-color );
		border-left: 4px solid var( --ci-color-primary );
		box-shadow: var( --cic-shadow );
		transition: box-shadow .15s ease, transform .15s ease;

		&:hover {
			box-shadow: var( --cic-shadow-hover );
			transform: translateY( -1px );
		}
	}

	& li.bbp-topic-title {
		grid-area: 1 / 1 / 3 / 2;
		min-width: 0;
	}

	& li.bbp-topic-voice-count {
		display: none;
	}

	& li.bbp-topic-reply-count {
		grid-area: 1 / 2 / 2 / 3;
		justify-self: end;
		padding: 3px 12px;
		background: #fff !important;
		border: 1px solid var( --fl-builder-gray-normal-color );
		border-radius: 999px;
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		color: var( --ci-color-primary );

		/* A CSS string, so it is English-only and has no singular form. The
		   place to make it translatable is the `bbp_get_topic_reply_count`
		   filter, in PHP. */
		&::after {
			content: " replies";
			font-weight: 400;
			color: var( --fl-builder-gray-medium-color );
		}
	}

	& li.bbp-topic-freshness {
		grid-area: 2 / 2 / 3 / 3;
		justify-self: end;
		text-align: right;
		font-size: 13px;
		color: var( --fl-builder-gray-medium-color );
	}

	& a.bbp-topic-permalink {
		display: inline-block;
		font-family: var( --cic-card-title-font );
		font-size: 21px;
		font-weight: 700;
		line-height: 1.25;
		text-decoration: none;
	}

	& p.bbp-topic-meta {
		margin: 4px 0 0;
		font-size: 13px;
		line-height: 1.5;
		color: var( --fl-builder-gray-medium-color );

		& span + span::before {
			content: " · ";
		}
	}

	& .bbp-topic-freshness p.bbp-topic-meta {
		margin-top: 2px;
	}

	/* ----------------------------------------------------------------------
	   Replies — one card per post

	   bbPress prints the meta strip (`.bbp-reply-header`) and the post body
	   (`.type-topic` / `.type-reply`) as SIBLINGS, so there is no element that
	   wraps both. The two are given the halves of one border instead, which
	   reads as a single card.
	   ---------------------------------------------------------------------- */

	& .bbp-replies > :is( li.bbp-header, li.bbp-footer ) {
		display: none;
	}

	& .bbp-replies > li.bbp-body {
		display: block;
		margin-bottom: 32px;
	}

	& #bbpress-forums div.bbp-reply-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 6px 16px;
		margin: 0;
		padding: 10px 20px;
		background: var( --fl-builder-green-soft );
		border: 1px solid var( --fl-builder-gray-normal-color );
		border-top: 4px solid var( --ci-color-primary );
		border-bottom: 0;
		font-size: 13px;
		color: var( --fl-builder-gray-medium-color );

		& .bbp-meta {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 6px 14px;
			width: 100%;
		}

		& .bbp-reply-permalink {
			margin-left: auto;
			font-variant-numeric: tabular-nums;
		}
	}

	& #bbpress-forums .bbp-replies :is( div.type-topic, div.type-reply ) {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
		margin: 0 0 20px;
		padding: 0;
		background: var( --cic-surface-soft );
		border: 1px solid var( --fl-builder-gray-normal-color );
		border-top: 0;
		box-shadow: var( --cic-shadow );
	}

	/* The author is the first line of the post, not a column beside it. */
	& #bbpress-forums div.bbp-reply-author {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 4px 10px;
		float: none;
		width: auto;
		padding: 16px 20px 0;
		text-align: left;

		& .bbp-author-link {
			font-weight: 700;
			text-decoration: none;
		}

		& .bbp-author-role {
			padding: 2px 9px;
			background: var( --ci-btn-bg-hover );
			border-radius: 999px;
			font-size: 11px;
			font-weight: 600;
			letter-spacing: .04em;
			text-transform: uppercase;
			color: var( --ci-color-primary );
		}

		& .bbp-author-name {
			margin: 0;
		}

		& .bbp-reply-ip {
			display: none;
			flex: 1 0 100%;
			font-size: 11px;
			color: var( --fl-builder-gray-medium-color );
		}
	}

	& #bbpress-forums div.bbp-reply-content {
		margin-left: 0;
		padding: 10px 20px 20px;
		line-height: 1.65;

		& > * {
			font-size: 14px;
		}

		& > :last-child {
			margin-bottom: 0;
		}
	}

	/* Admin links (edit / trash / spam) sit in the meta strip. */
	& #bbpress-forums .bbp-admin-links {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 10px;
		font-size: 12px;

		& a {
			color: var( --fl-builder-gray-medium-color );
			&:hover {
				color: var( --ci-color-secondary );
			}
		}
	}

	/* "Reply" is an action, not a moderation link — it carries the thread, so
	   it reads louder than the edit/trash/spam links it sits with. */
	& #bbpress-forums a.bbp-reply-to-link {
		font-weight: 700;
		color: var( --ci-color-primary );
	}

	& #bbpress-forums a.bbp-cancel-reply-to-link {
		font-weight: 600;
		color: var( --ci-color-secondary );
	}

	/* ----------------------------------------------------------------------
	   Threaded replies

	   With Reply Threading on (Settings › Forums), bbPress swaps the flat loop
	   for BBP_Walker_Reply: `li.bbp-body` gets a `ul.bbp-replies-list`, each
	   `li` holds one reply's two halves, and an answer to it is a nested
	   `ul.bbp-threaded-replies` inside that same `li`.

	   The nesting is what carries the indentation, so one rule covers every
	   level; the rule after it stops the indent compounding past the second.
	   ---------------------------------------------------------------------- */

	& #bbpress-forums ul.bbp-replies-list {
		margin: 0;
		padding: 0;
		list-style: none;

		& > li {
			margin: 0;
		}
	}

	& #bbpress-forums ul.bbp-threaded-replies {
		margin: -4px 0 20px 26px;
		padding: 0 0 0 26px;
		list-style: none;
		/* The thread line: one border down the left of the whole branch. */
		border-left: 2px solid var( --ci-color-primary );

		& > li {
			margin: 0;
		}

		/* The reply that opens a branch sits tight under its parent; the ones
		   after it keep the usual gap. */
		& > li:first-child > .bbp-reply-header {
			margin-top: 0;
		}
	}

	& #bbpress-forums ul.bbp-threaded-replies {
		margin-left: 5px;
		padding: 20px 5px 1px 15px;
		background-color: #66000022;
	}

	& #bbpress-forums ul.bbp-threaded-replies li :last-child {
	}

	/* Deeper than one level, indent less — the line already shows the nesting
	   and the cards still have to be readable on a narrow screen. */
	& #bbpress-forums ul.bbp-threaded-replies ul.bbp-threaded-replies {
	}

	/* A reply being answered: bbPress moves the form into the thread, so it
	   lands inside the nested list and needs to breathe. */
	& #bbpress-forums ul.bbp-threaded-replies div.bbp-reply-form {
		margin-top: 16px;
	}

	/* ----------------------------------------------------------------------
	   Pagination
	   ---------------------------------------------------------------------- */

	& #bbpress-forums div.bbp-pagination {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 20px;
		font-size: 14px;

		& .bbp-pagination-count {
			color: var( --fl-builder-gray-medium-color );
		}

		& .page-numbers {
			display: inline-block;
			padding: 4px 10px;
			margin-left: 4px;
			border: 1px solid var( --fl-builder-gray-normal-color );
			text-decoration: none;

			&.current {
				background: var( --fl-builder-green-soft );
				border-color: var( --ci-color-primary );
				font-weight: 700;
			}
		}
	}

	/* ----------------------------------------------------------------------
	   Forms — new topic, reply, search
	   ---------------------------------------------------------------------- */

	& #bbpress-forums fieldset.bbp-form {
		margin: 0 0 24px;
		padding: 22px 20px 24px;
		background: var( --cic-surface-soft );
		border: 1px solid var( --fl-builder-gray-normal-color );
		border-top: 4px solid var( --ci-color-primary );
		box-shadow: var( --cic-shadow );

		& legend {
			padding: 0 10px;
			font-family: var( --cic-card-title-font );
			font-size: 21px;
			font-weight: 700;
			color: var( --ci-color-primary );
		}

		& label {
			display: block;
			margin-bottom: 6px;
			font-size: 14px;
			font-weight: 600;
			letter-spacing: .02em;
			text-transform: uppercase;
			color: var( --fl-builder-gray-medium-color );
		}

		& p {
			margin-bottom: 16px;
		}

		& p:has( #bbp_topic_subscription ) {
			display: flex;
			gap: 10px;
			align-items: center;
			& label {
				margin: 0;
			}
		}

		/* bbPress writes `<label>…</label><br />` — the label is already a block. */
		& label + br {
			display: none;
		}
	}

	& #bbpress-forums fieldset.bbp-form :is(
		input[type="text"],
		input[type="password"],
		input[type="email"],
		input[type="url"],
		input[type="search"],
		select,
		textarea
	) {
		width: 100%;
		max-width: 100%;
		height: auto;
		padding: 10px 12px;
		font-family: var( --ci-subtitle-font-family );
		font-size: 16px;
		line-height: 1.5;
		color: var( --fl-builder-text-color );
		background: var( --cic-surface );
		border: 1px solid var( --fl-builder-gray-normal-color );

		&:focus {
			border-color: var( --ci-color-primary );
			outline: none;
		}
	}

	& #bbpress-forums fieldset.bbp-form :is(
		input[type="checkbox"]
	) {
		width: 32px !important;
		height: 32px !important;
		margin: 0;
		border: 1px solid var( --fl-builder-gray-normal-color );
		border-radius: 8px !important;
	}

	& #bbpress-forums div.bbp-submit-wrapper {
		display: flex;
		gap: 20px;
		align-items: center;
		margin: 20px 0 0;
		text-align: left;
	}

	/* The form's own notices are quieter than the page ones. */
	& #bbpress-forums fieldset.bbp-form div.bbp-template-notice {
		margin-bottom: 18px;
		font-size: 14px;
	}

	/* --- Buttons: the theme's own tokens --------------------------------- */

	& :is( a.button, button, input[type="button"], input[type="reset"], input[type="submit"] ) {
		background: var( --ci-btn-bg );
		padding: var( --ci-btn-padding );
		font-family: var( --ci-btn-font-family );
		font-weight: var( --ci-btn-font-weight );
		font-size: var( --ci-btn-font-size );
		color: var( --ci-btn-text-color ) !important;
		text-align: center;
		text-transform: none;
		line-height: 1.2;
		border: 1px solid var( --ci-btn-border );
		border-radius: var( --ci-btn-border-radius );
		overflow: hidden;
		transition: all 200ms linear;

		&:hover,
		&:focus {
			background: var( --ci-btn-bg-hover );
			color: var( --ci-btn-text-hover ) !important;
		}
	}

	& .mce-btn button {
		padding: 5px !important;
	}

	& div.quicktags-toolbar {
		padding: 10px 5px !important;
	}

	& .mce-toolbar {
		padding-right: 135px;
	}

	& #wp-bbp_reply_content-editor-tools {
		position: absolute;
		top: 0;
		right: 0;
		padding: 6px 3px;
		& .wp-switch-editor {
			background-color: transparent;
			margin: 2px;
			padding: 5px !important;
			font-size: 11px;
			font-weight: 400;
			text-transform: uppercase;
			border: none;
			&:hover {
				color: #000 !important;
			}
			&[aria-pressed="true"] {
				background-color: var( --ci-color-primary );
				color: #fff !important;
			}
		}
	}

	/* ----------------------------------------------------------------------
	   Phone
	   ---------------------------------------------------------------------- */

	@media only screen and (max-width: 600px) {

		/* The right rail goes under the title instead of beside it. */
		& .bbp-topics > li.bbp-body > ul {
			grid-template-columns: minmax( 0, 1fr );
			gap: 10px;
			padding: 16px;
		}

		& li.bbp-topic-title {
			grid-area: auto;
		}

		& li.bbp-topic-reply-count {
			grid-area: auto;
			justify-self: start;
		}

		& li.bbp-topic-freshness {
			grid-area: auto;
			justify-self: start;
			text-align: left;
		}

		& a.bbp-topic-permalink {
			font-size: 19px;
		}

		/* The thread line stays, the indent shrinks: at this width every step
		   of it comes straight out of the reply's text. */
		& #bbpress-forums ul.bbp-threaded-replies {
			margin-left: 10px;
			padding-left: 12px;
		}

		& #bbpress-forums ul.bbp-threaded-replies ul.bbp-threaded-replies {
			padding-left: 10px;
		}

		& #bbpress-forums div.bbp-reply-header {
			padding: 10px 16px;
		}

		& #bbpress-forums div.bbp-reply-author {
			float: none !important;
			width: auto !important;
			padding: 14px 16px 0;
			& .bbp-author-name {
				margin: 0 !important;
			}
		}

		& #bbpress-forums div.bbp-reply-content {
			margin-left: 0 !important;
			padding: 8px 16px 16px;
		}

		& #bbpress-forums fieldset.bbp-form {
			padding: 18px 16px 20px;
		}

		/* Full-width tap target. */
		& #bbpress-forums div.bbp-submit-wrapper button {
			width: 100%;
		}

		& #bbpress-forums div.bbp-pagination {
			justify-content: flex-start;
		}
	}

	@media print {
		& .bbp-topics > li.bbp-body > ul,
		& #bbpress-forums .bbp-replies :is( div.type-topic, div.type-reply ),
		& #bbpress-forums fieldset.bbp-form {
			box-shadow: none;
			break-inside: avoid;
		}

		& #bbpress-forums :is( #subscription-toggle, .bbp-admin-links, div.bbp-submit-wrapper ) {
			display: none;
		}
	}
}


/* ==========================================================================
   3d. Single forum — the forum's own content

   Printed by CIC_Circles::append_forum_content(), right after the bbPress
   info notice on /forums/forum/<slug>/.

   It is not a card: it is the forum's own prose, and it reads like any other
   post content on the site. The theme already styles it that way — it lists
   `#bbpress-forums .cic-forum-content` alongside `.entry-content` for type,
   headings, links and lists — so all that is left here is the space around
   the block.
   ========================================================================== */

.cic-forum-content {
	margin: 24px 0 45px;
}

.cic-forum-content ~ .entry-title {
	margin-bottom: 30px;
}

.cic-forum-content > :first-child {
	margin-top: 0;
}

.cic-forum-content > :last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   3e. Circle home page — the `circle` post type

   Rendered by CIC_Circles::render() at /circles/<slug>/. The four panels reuse
   the card system above (same white card, same border, same button), laid out
   two across on desktop: Resources and New topic on the left, the next meeting
   and Search on the right — the order they appear in the markup.
   ========================================================================== */

.cic-circle {
	font-family: var( --ci-subtitle-font-family );
	color: var( --fl-builder-text-color );
}

.cic-circle__name {
	margin: 0 0 8px;
}

.cic-circle__summary {
	max-width: 820px;
	margin: 0 0 28px;
}

/* --- Locked state --------------------------------------------------------- */

.cic-circle__locked {
	background: var( --fl-builder-green-soft );
	margin: 0 0 24px;
	padding: 26px 24px 28px;
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-top: 4px solid var( --ci-color-primary );
	/*border-radius: 10px;*/
}

.cic-circle__locked-message > :first-child {
	margin-top: 0;
}

.cic-circle__locked-message > :last-child {
	margin-bottom: 0;
}

.cic-circle__locked-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* The buttons sit side by side here, unlike the full-width card buttons. */
.cic-circle__locked-actions .cic-cc__btn {
	display: inline-block;
	width: auto;
}

.cic-circle__btn--quiet {
	background: transparent;
	border-color: var( --fl-builder-gray-normal-color );
	font-weight: 500;
}

/* --- Panel grid ----------------------------------------------------------- */

.cic-circle__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

@media only screen and (min-width: 900px) {
	.cic-circle__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 28px;
	}
}

/* Surface comes from section 3a. */
.cic-circle__panel {
	display: grid;
	align-content: start;
	min-width: 0;
	height: 100%;
}

.cic-circle__panel-title {
	margin: 0 0 18px;
	padding-bottom: 14px;
	font-family: var( --ci-title-font-family );
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --ci-color-primary );
	border-bottom: 1px solid var( --fl-builder-gray-normal-color );
}

/* --- List ----------------------------------------------------------------- */

/* The theme injects its own bullets through li::before, so they are turned off
   here the same way the landing lists do it. */
.cic-circle .cic-circle__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cic-circle .cic-circle__list-item {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var( --fl-builder-gray-normal-color );
	list-style: none;
}

.cic-circle .cic-circle__list-item:first-child {
	padding-top: 0;
}

.cic-circle .cic-circle__list-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.cic-circle .cic-circle__list-item::before,
.cic-circle .cic-circle__list-item::after {
	display: none !important;
}

.cic-circle__list-link {
	display: block;
	font-size: 16px;
	font-weight: 600 !important;
	color: var( --fl-builder-gray-dark-color ) !important;
	line-height: 1.4;
	&:hover {
		color: var( --fl-builder-green-normal ) !important;
	}
}

/* --- Resources ------------------------------------------------------------ */

.cic-circle__resource-note {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.45;
	color: var( --fl-builder-gray-medium-color );
}

/* --- Next meeting --------------------------------------------------------- */

.cic-circle__meeting-title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --ci-color-primary );
}

.cic-circle__meeting-date {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.5;
}

.cic-circle__meeting-empty {
	margin: 0;
	color: var( --fl-builder-gray-medium-color );
	font-style: italic;
}

/* The button is pinned to the bottom so the two panels in a row line up. */
.cic-circle__panel > .cic-cc__btn:last-child {
	margin-top: auto;
}

/* --- New topic form ------------------------------------------------------- */

.cic-circle__topic-form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.cic-circle__field {
	margin: 0 0 16px;
}

.cic-circle__field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var( --fl-builder-gray-medium-color );
}

.cic-circle__field input[type="text"],
.cic-circle__field textarea,
.cic-circle__search input[type="search"] {
	width: 100%;
	padding: 10px 12px;
	font-family: var( --ci-subtitle-font-family );
	font-size: 16px;
	line-height: 1.5;
	color: var( --fl-builder-text-color );
	background: var( --cic-surface );
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-radius: 8px;
}
.cic-circle__field textarea {
	height: 100px;
}

.cic-circle__field input[type="text"]:focus,
.cic-circle__field textarea:focus,
.cic-circle__search input[type="search"]:focus {
	border-color: var( --ci-color-primary );
	outline: none;
}

.cic-circle__field textarea {
	resize: vertical;
}

.cic-circle__field--submit {
	margin: auto 0 0;
}

/* --- The bbPress editor, inside the panel --------------------------------- */

/* `bbp_the_content()` prints a wp_editor: its own wrapper, toolbar and iframe.
   It only needs to be told to stay inside the panel — the chrome is WordPress's
   and matches the one in the forum. */
.cic-circle__field--editor .bbp-the-content-wrapper,
.cic-circle__field--editor .wp-editor-wrap {
	max-width: 100%;
}

.cic-circle__field--editor .wp-editor-wrap {
	margin-top: -25px;
}

.cic-circle__field--editor .wp-editor-container {
	border: 1px solid var( --fl-builder-gray-normal-color );
}

.cic-circle__field--editor .wp-editor-area {
	box-sizing: border-box;
	width: 100%;
	font-family: var( --ci-subtitle-font-family );
	font-size: 16px;
	line-height: 1.5;
	border: 0;
}

/* The Visual / Text tabs read as chrome, not as headings. */
.cic-circle__field--editor .wp-editor-tabs .wp-switch-editor {
	margin: 0;
	border-radius: 0;
}

/* The quicktags bar wraps rather than pushing the panel wide. */
.cic-circle__field--editor .quicktags-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.cic-circle__topic-notice {
	margin: 0;
	color: var( --fl-builder-gray-medium-color );
	font-style: italic;
}

/* bbPress prints its errors into this panel through bbp_template_notices. */
.cic-circle__topic-form .bbp-template-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	font-size: 15px;
	background: var( --fl-builder-green-soft );
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-radius: 8px;
}

.cic-circle__topic-form .bbp-template-notice ul {
	margin: 0;
	padding-left: 18px;
}

/* --- Search --------------------------------------------------------------- */

.cic-circle__search {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
}

.cic-circle__search input[type="search"] {
	flex: 1 1 200px;
	min-width: 0;
}

.cic-circle__search-submit {
	flex: 0 0 auto;
	padding: 10px 20px;
	font-family: var( --ci-btn-font-family );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var( --ci-btn-text-color );
	background: var( --ci-btn-bg );
	border: 1px solid var( --ci-btn-border );
	border-radius: var( --ci-btn-border-radius );
	cursor: pointer;
	transition: all 200ms linear;
}

.cic-circle__search-submit:hover,
.cic-circle__search-submit:focus {
	background: var( --ci-btn-bg-hover );
}

.cic-circle__results {
	margin: 0 0 22px;
}

/* The panel is swapped in place by circle-search.js; this is the only sign the
   request is in flight, so it stays subtle and does not move anything. */
.cic-circle__search.is-searching .cic-circle__search-submit {
	opacity: .6;
	cursor: progress;
}

.cic-circle__results[aria-busy="true"] {
	opacity: .55;
	transition: opacity .12s ease;
}

.cic-circle__results-count,
.cic-circle__results-empty {
	margin: 0 0 12px;
	font-size: 14px;
	color: var( --fl-builder-gray-medium-color );
}

.cic-circle__result-meta {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var( --fl-builder-gray-medium-color );
}

.cic-circle__result-excerpt {
	display: block;
	margin-top: 4px;
	font-size: 14.5px;
	line-height: 1.5;
}

.cic-circle__result-pages {
	margin-top: 14px;
	font-size: 14px;
}

.cic-circle__result-pages .page-numbers {
	display: inline-block;
	padding: 4px 9px;
	margin-right: 4px;
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-radius: 6px;
	text-decoration: none;
}

.cic-circle__result-pages .page-numbers.current {
	background: var( --fl-builder-green-soft );
	border-color: var( --ci-color-primary );
	font-weight: 700;
}

/* --- Latest topics -------------------------------------------------------- */

/* Shown in the search panel when nothing has been searched for, so the panel
   has something to offer before it is used. */
.cic-circle__recent {
	margin: 0 0 22px;
}

.cic-circle__recent-label {
	margin: 0 0 22px;
	font-family: var( --ci-subtitle-font-family );
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --fl-builder-gray-medium-color );
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 480px) {
	.cic-circle__locked {
		padding: 22px 18px 24px;
	}

	.cic-circle__panel-title {
		font-size: 20px;
	}

	.cic-circle__locked-actions .cic-cc__btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Print — the forms are not useful on paper.
   -------------------------------------------------------------------------- */

@media print {
	.cic-circle__grid {
		display: block;
	}

	.cic-circle__topic-form,
	.cic-circle__search,
	.cic-circle__result-pages {
		display: none;
	}
}


/* ==========================================================================
   4. Webinars — single post

   Rendered by CIC_Webinars_Template (templates/webinar-layout.php).
   ========================================================================== */

.cic-color-primary { color: var( --ci-color-primary ); }

/* ==========================================================================
   Wrapper
   ========================================================================== */

.cic-webinar {
	font-family: var( --ci-subtitle-font-family );
	color: var( --fl-builder-text-color );
	margin: 0 auto 40px;

	& .nf-form-cont {
		margin-top: -15px;
	}

	& :is( .nf-response-msg, .nf-error-unique_field ) {
		background-color: var( --ci-btn-bg-hover );
		margin: 40px 0 30px;
		padding: 20px;
		color: var( --fl-builder-gray-dark-color );
		& * {
			font-weight: 700;
		}
		& p {
			margin-bottom: 10px;
		}
		& :last-child {
			margin-bottom: 0;
		}
		& a {
			color: var( --ci-color-primary );
			text-decoration: underline;
			&:hover {
				color: var( --fl-builder-green-normal );
			}
		}
		&.nf-error-unique_field {
			margin-top: 0;
			color: red;
			& a {
				color: red;
				&:hover {
					color: var( --fl-builder-green-normal );
				}
			}
		}
	}

	& .nf-form-cont:has( .nf-error-unique_field ) {
		& .submit-container {
			display: none;
		}
	}

}

.cic-webinar__title {
	margin-bottom: 0;
	color: var( --fl-builder-green-normal );
}

/* ==========================================================================
   Meta bar  (date / presenter)
   ========================================================================== */

.cic-webinar__meta-bar {}

/* ==========================================================================
   Tab navigation
   ========================================================================== */

.cic-webinar__tab-nav-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cic-webinar__tab-nav {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.cic-webinar .cic-webinar__tab-nav li {
	flex-grow: 1;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

/* Suppress theme-injected list bullets on the tab items */
.cic-webinar .cic-webinar__tab-nav li::before {
	content: "" !important;
	display: none !important;
}

.cic-tab-btn {
	display: block;
	width: 100%;
	padding: 15px;
	font-family: var( --ci-subtitle-font-family );
	font-weight: 400;
	font-size: 20px;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1;
	color: var( --ci-color-primary );
	background: var( --ci-btn-bg-hover );
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s, background 0.2s;
	border-radius: 0;
}

.cic-tab-btn:hover {
	color: var( --cic-surface );
	background: var( --fl-builder-green-normal );
}

.cic-tab-btn--active {
	color: var( --cic-surface );
	background: var( --ci-color-primary );
}

.cic-tab-btn--active:hover {
	color: var( --cic-surface );
	background: var( --ci-color-primary );
}

/* ==========================================================================
   Tab panels
   ========================================================================== */

.cic-webinar__panels {
	padding: 26px 24px 28px;
	background: var(--cic-surface-soft);
	border: 1px solid var(--fl-builder-gray-normal-color);
	border-top: 4px solid var(--ci-color-primary);
	box-shadow: var(--cic-shadow);
}

.cic-panel {
	display: none;
	min-height: 280px;
}

.cic-panel--active {
	display: block;
}

/* ==========================================================================
   Panel content
   ========================================================================== */

.cic-panel__summary {
	font-size: 17px;
	line-height: 1.7;
	color: var( --fl-builder-text-color );
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var( --fl-builder-gray-normal-color );
}

.cic-panel__wysiwyg {
	font-size: 16px;
	line-height: 1.75;
}

.cic-panel__wysiwyg h2,
.cic-panel__wysiwyg h3,
.cic-panel__wysiwyg h4 {
	color: var( --ci-color-primary );
	margin-top: 28px;
	margin-bottom: 10px;
}

.cic-panel__wysiwyg ul,
.cic-panel__wysiwyg ol {
	margin-left: 24px;
}

.cic-panel__wysiwyg ul li,
.cic-panel__wysiwyg ol li {
	margin-bottom: 8px;
}

/* ==========================================================================
   Vimeo responsive embed
   ========================================================================== */

.cic-vimeo-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	margin: 28px 0;
	background: #000;
	border-radius: var( --cic-radius );
}

.cic-vimeo-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Ninja Form wrapper
   ========================================================================== */

.cic-ninja-form {
	margin-top: 32px;
	padding: 28px;
	background: var( --fl-builder-green-soft );
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-radius: var( --cic-radius );
}


/* ==========================================================================
   Handouts list
   ========================================================================== */

#cic-panel-handouts {
	& p {
		margin: 0 !important;
	}
}

.cic-handouts-list {
	list-style: none !important;
	margin: 0 0 0 25px !important;
	padding: 0;
	& .cic-handout-item {
		margin: 15px 0 0 !important;
		border: none !important;
		/*list-style: none !important;*/
	}
	& .cic-handout-link {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0;
		color: var( --ci-color-primary );
		text-decoration: none;
		transition: color 0.15s, padding-left 0.15s;
		&:hover {
			padding-left: 14px;
			color: var( --fl-builder-green-normal );
			text-decoration: underline;
		}
		& .dashicons {
			flex-shrink: 0;
			font-size: 20px;
			width: 20px;
			height: 20px;
		}
	}
}

/* ==========================================================================
   Login CTA
   ========================================================================== */

.cic-login-cta {
	padding: 32px;
	background: var( --fl-builder-green-soft );
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-left: 4px solid var( --ci-color-primary );
	border-radius: var( --cic-radius );
	text-align: center;
}

.cic-login-cta__message {
	font-size: 16px;
	font-weight: 600;
	color: var( --ci-color-primary );
	margin-bottom: 20px;
}

.cic-login-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.cic-btn {
	display: inline-block;
	padding: 12px 28px;
	font-family: var( --ci-subtitle-font-family );
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: var( --cic-radius );
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	line-height: 1;
	border: 2px solid transparent;
}

.cic-btn--primary {
	background: var( --ci-color-primary );
	color: var( --cic-surface );
	border-color: var( --ci-color-primary );
}

.cic-btn--primary:hover {
	background: var( --fl-builder-green-normal );
	border-color: var( --fl-builder-green-normal );
	color: var( --cic-surface );
	text-decoration: none;
}

.cic-btn--outline {
	background: transparent;
	color: var( --ci-color-primary );
	border-color: var( --ci-color-primary );
}

.cic-btn--outline:hover {
	background: var( --ci-color-primary );
	color: var( --cic-surface );
	text-decoration: none;
}

/* ==========================================================================
   CEU Credit
   ========================================================================== */

.cic-ceu-expires {
	display: inline-block;
	margin: 20px 0 0;
	padding: 10px 18px;
	background: var( --fl-builder-green-soft );
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-radius: var( --cic-radius );
	font-size: 15px;
	color: var( --fl-builder-text-color );
}

.cic-quiz-wrapper {
	/*margin-top: 32px;*/
}

/* ==========================================================================
   Misc
   ========================================================================== */

.cic-empty-notice {
	color: var( --fl-builder-gray-medium-color );
	font-style: italic;
	padding: 0 0 24px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
	.cic-tab-btn {
		padding: 11px 14px;
		font-size: 13px;
		letter-spacing: 0;
	}

	.cic-login-cta {
		padding: 24px 16px;
	}

	.cic-ninja-form {
		padding: 20px 14px;
	}

	.cic-login-cta__actions {
		flex-direction: column;
		align-items: center;
	}

	.cic-btn {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 400px) {
	.cic-webinar__meta-bar {
		flex-direction: column;
		gap: 10px;
	}
}

/* ==========================================================================
   Registration closed notice
   ========================================================================== */

.cic-registration-closed {
	margin: 16px 0;
	padding: 14px 18px;
	background: var( --fl-builder-green-soft );
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-radius: var( --cic-radius );
	color: var( --fl-builder-text-color );
}


/* ==========================================================================
   5. Meetings — single meeting

   Rendered by CIC_Meetings (templates/meeting-layout.php). The panel reuses
   the card look from section 3.
   ========================================================================== */

.cic-meeting {
	font-family: var( --ci-subtitle-font-family );
	color: var( --fl-builder-text-color );
	margin: 0 auto 40px;

}

/* Surface comes from section 3a. */
.cic-meeting__wrapper {

	&:last-child {
		margin-bottom: 0;
	}

}

/* ==========================================================================
   Date + summary
   ========================================================================== */

.cic-meeting__date {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 600;
	color: var( --fl-builder-green-normal );
}

.cic-meeting__summary {
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var( --fl-builder-gray-normal-color );

	& p:last-child {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Registration form (Ninja Forms)
   ========================================================================== */

.cic-meeting__register {

	& :is( .nf-response-msg, .nf-error-unique_field ) {
		background-color: var( --ci-btn-bg-hover );
		margin: 30px 0;
		padding: 20px;
		color: var( --fl-builder-gray-dark-color );

		& * {
			font-weight: 700;
		}
		& p {
			margin-bottom: 10px;
		}
		& :last-child {
			margin-bottom: 0;
		}
		& a {
			color: var( --ci-color-primary );
			text-decoration: underline;

			&:hover {
				color: var( --fl-builder-green-normal );
			}
		}
	}

	& .nf-error-unique_field {
		margin-top: 0;
		color: red;

		& a {
			color: red;
		}
	}

	& .nf-form-cont:has( .nf-error-unique_field ) .submit-container {
		display: none;
	}
}

/* ==========================================================================
   Notices (no access / registration closed)
   ========================================================================== */

.cic-meeting__notice,
.cic-meeting__closed {
	margin: 0 0 32px;
	padding: 24px 28px;
	background: var( --fl-builder-green-soft );
	border: 1px solid var( --fl-builder-gray-normal-color );
	border-left: 4px solid var( --ci-color-primary );
	border-radius: var( --cic-radius );

	& p:last-child {
		margin-bottom: 0;
	}

	& a {
		color: var( --ci-color-primary );
		font-weight: 600;
		text-decoration: underline;

		&:hover {
			color: var( --fl-builder-green-normal );
		}
	}
}

.cic-meeting__notice {
	font-size: 16px;
}

/* ==========================================================================
   Content
   ========================================================================== */

.cic-meeting__content {
	font-size: 16px;
	line-height: 1.75;

	& :is( h2, h3, h4 ) {
		color: var( --ci-color-primary );
		margin-top: 28px;
		margin-bottom: 10px;
	}

	& :is( ul, ol ) {
		margin-left: 24px;
	}

	& li {
		margin-bottom: 8px;
	}
}

/* ==========================================================================
   Vimeo (16:9)
   ========================================================================== */

.cic-meeting__video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 28px 0;
	overflow: hidden;
	background: #000;
	border-radius: var( --cic-radius );

	& iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
	.cic-meeting__notice,
	.cic-meeting__closed {
		padding: 20px 16px;
	}
}


/* ==========================================================================
   6. Webinars + Meetings — the archive card grid

   A replica of the Beaver Builder post-grid used on /content-type/webinars/,
   shared by both listings. The meeting cards take their surface from section
   3a, like every other panel in the plugin. The webinar cards do not: their
   action bar is a full-bleed strip pinned to the bottom of the card, so they
   keep their own padding and their own chrome, below.
   ========================================================================== */

/* 3-column grid; non-entry children (archive title, pagination) span full width. */
body.cic-webinars-archive .content,
body.cic-meetings-archive .content {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 30px;
	align-items: stretch;
}

body.cic-meetings-archive .content {
	width: 100%;
	padding-bottom: 90px;
}

body.cic-meetings-archive .cic-meetings-archive__title {
	margin: 0 0 15px;
}

body.cic-webinars-archive .content > *:not(.entry),
body.cic-meetings-archive .content > *:not(.entry) {
	grid-column: 1 / -1;
}

/* Neutralize the default Genesis entry chrome — the card provides the styling. */
body.cic-webinars-archive .content .entry,
body.cic-meetings-archive .content .entry {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

body.cic-webinars-archive .content .entry .entry-content,
body.cic-meetings-archive .content .entry .entry-content {
	height: 100%;

	&::before {
		display: none;
	}
}

/* --- The card ------------------------------------------------------------ */

body.cic-webinars-archive .fl-post-grid-post,
body.cic-meetings-archive .fl-post-grid-post {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

body.cic-webinars-archive .fl-post-grid-post {
	background: var( --ci-btn-bg-hover );
	box-shadow: 1px 1px 2px #000;
}

/* Surface comes from section 3a; only the hover is specific to the listing. */
body.cic-meetings-archive .fl-post-grid-post:hover {
	box-shadow: var( --cic-shadow-hover );
	transform: translateY( -2px );
}

/* The webinar cards keep room at the bottom for their absolutely positioned
   action bar; the meeting cards do not need it. */
body.cic-webinars-archive .fl-post-grid-text {
	padding: 20px 20px 58px;
}

/* --- Card typography ------------------------------------------------------ */

body.cic-webinars-archive .fl-post-grid-title,
body.cic-meetings-archive .fl-post-grid-title {
	margin: 0 0 10px;
	font-family: var( --cic-card-title-font );
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2em;
}

body.cic-webinars-archive .fl-post-grid-title a,
body.cic-meetings-archive .fl-post-grid-title a {
	color: var( --ci-color-primary );
	font-weight: 700;
	text-decoration: none;
}

body.cic-webinars-archive .fl-post-grid-content,
body.cic-webinars-archive .fl-post-grid-content p,
body.cic-meetings-archive .fl-post-grid-content,
body.cic-meetings-archive .fl-post-grid-content p {
	font-family: var( --ci-subtitle-font-family );
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4em;
}

/* --- Action bar ----------------------------------------------------------- */

body.cic-webinars-archive .fl-post-grid-more,
body.cic-meetings-archive .fl-post-grid-more {
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
	text-decoration: none;
}

/* Webinars: a flat bar pinned to the bottom of the card. */
body.cic-webinars-archive .fl-post-grid-more {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 10px 5px;
	background: var( --ci-color-primary );
	color: var( --cic-surface );
}

body.cic-webinars-archive .fl-post-grid-more:hover {
	opacity: .9;
	color: var( --cic-surface );
}

/* Meetings: the theme's own button. */
body.cic-meetings-archive .fl-post-grid-more {
	background: var( --ci-btn-bg );
	padding: var( --ci-btn-padding );
	font-family: var( --ci-btn-font-family );
	font-size: var( --ci-btn-font-size );
	font-weight: var( --ci-btn-font-weight );
	color: var( --ci-btn-text-color ) !important;
	text-transform: none;
	line-height: 1.2;
	border: 1px solid var( --ci-btn-border );
	border-radius: var( --ci-btn-border-radius );
	overflow: hidden;
	transition: all 200ms linear;
}

body.cic-meetings-archive .fl-post-grid-more:hover {
	background: var( --ci-btn-bg-hover );
	color: var( --ci-btn-text-hover ) !important;
	text-decoration: none;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 992px) {
	body.cic-webinars-archive .content,
	body.cic-meetings-archive .content {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (max-width: 600px) {
	body.cic-webinars-archive .content,
	body.cic-meetings-archive .content {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   7. Industry Experts

   Rendered by CIC_Industry_Experts (templates/industry-experts.php).
   ========================================================================== */

/**
 * Industry Experts — grid layout.
 * Mobile: 1 column. Desktop (>= 768px): 2 columns.
 */

.cic-experts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin: 30px 0 0;
}

@media only screen and (min-width: 768px) {
	.cic-experts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 40px;
	}
}

.cic-expert {
	min-width: 0;
}

/* Clear the floated photo so the next expert never wraps around it. */
.cic-expert::after {
	content: "";
	display: table;
	clear: both;
}

.cic-expert__photo {
	float: left;
	width: 150px;
	height: auto;
	margin: 4px 20px 12px 0;
	border-radius: 4px;
}

@media only screen and (max-width: 480px) {
	.cic-expert__photo {
		width: 110px;
		margin-right: 16px;
	}
}

.cic-expert__name {
	margin: 0 0 4px;
	font-size: 22px;
	line-height: 1.3;
}

.cic-expert__titles {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --fl-builder-gray-medium-color );
}

.cic-expert__summary {
	margin-bottom: 14px;
	font-size: 16px;
	line-height: 1.6;
}

.cic-expert__summary p:last-child {
	margin-bottom: 0;
}

.cic-expert__list {
	clear: both;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --fl-builder-border-color );
}

.cic-expert__item {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var( --fl-builder-border-color );
	font-size: 15px;
	line-height: 1.45;
}

.cic-expert__item-title {
	display: block;
	font-weight: 600;
}

.cic-expert__item-date {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var( --fl-builder-gray-medium-color );
}