/*
 * CTU News 0.3.8 — "The Specimen" idiom for BrainsOnBoard's render-time
 * furniture (.bob-*), the article body and a few site-glue classes. Colours
 * come from the Breakdance global palette so the design shifts as one:
 *   --bde-palette-color-1 Ink        #2A2620
 *   --bde-palette-color-2 Paper      #E9E3D2
 *   --bde-palette-color-3 Text       #5C554A
 *   --bde-palette-color-4 Sap        #4A6B3A
 *   --bde-palette-color-5 Panel      #FDFBF4
 *   --bde-palette-color-6 Hairline   #C4B99C
 *   --bde-palette-color-7 Ochre      #7E5620 (specimen numbers, darkened for AA)
 *   --bde-palette-color-8 Rule light #D6CCB2
 *   --bde-palette-color-9 Label      #665E4B (darkened for AA)
 * BrainsOnBoard itself is never edited; these rules sit after its stylesheets.
 *
 * On !important: BrainsOnBoard's own bob-sources.css / bob-faq.css mark the
 * heading, question, answer and freshness-stamp typography !important (font
 * size, weight, colour, transform, margin). No selector can out-rank a forced
 * declaration, so exactly those properties carry !important here and nothing
 * else does. The list is in the plugin's CSS; re-check it after a plugin update.
 */

/* ---- Article body (PostContent on single posts) -------------------- */

/* The article body is a sheet: Panel fill in a hairline frame on the Paper
   ground. BrainsOnBoard's inset boxes (Sources, FAQ) invert to Paper so they
   still read as boxes on the sheet. */
body.single .bde-rich-text.breakdance-rich-text-styles {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 19px;
	line-height: 1.7;
	color: var(--bde-palette-color-3);
	background: var(--bde-palette-color-5);
	border: 1px solid var(--bde-palette-color-6);
	padding: 44px 56px 40px;
}

body.single .breakdance-rich-text-styles > :first-child {
	margin-top: 0;
}

body.single .breakdance-rich-text-styles > :last-child {
	margin-bottom: 0;
}

body.single .breakdance-rich-text-styles .bob-sources,
body.single .breakdance-rich-text-styles .bob-faq,
body.single .breakdance-rich-text-styles .bob-table-scroll {
	background: var(--bde-palette-color-2);
}

body.single .breakdance-rich-text-styles p,
body.single .breakdance-rich-text-styles ul,
body.single .breakdance-rich-text-styles ol,
body.single .breakdance-rich-text-styles blockquote,
body.single .breakdance-rich-text-styles figure {
	margin: 0 0 1.2em;
}

body.single .breakdance-rich-text-styles h2,
body.single .breakdance-rich-text-styles h3 {
	margin: 1.8em 0 0.5em;
	color: var(--bde-palette-color-1);
}

body.single .breakdance-rich-text-styles ul,
body.single .breakdance-rich-text-styles ol {
	padding-left: 1.3em;
}

body.single .breakdance-rich-text-styles li {
	margin-bottom: 0.35em;
}

body.single .breakdance-rich-text-styles a {
	color: var(--bde-palette-color-4);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	text-decoration-color: var(--bde-palette-color-6);
}

body.single .breakdance-rich-text-styles a:hover {
	color: var(--bde-palette-color-1);
	text-decoration-color: var(--bde-palette-color-1);
}

body.single .breakdance-rich-text-styles strong {
	color: var(--bde-palette-color-1);
	font-weight: 600;
}

body.single .breakdance-rich-text-styles blockquote {
	border-left: 1px solid var(--bde-palette-color-6);
	padding-left: 1.2em;
	font-style: italic;
}

/* Freshness stamp (.bob-updated, priority 9 filter). Plugin forces margin,
   font-size, line-height and colour. */
body.breakdance .bob-updated {
	font-family: 'EB Garamond', Georgia, serif;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.15em;
	font-weight: 500;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--bde-palette-color-9) !important;
	margin: 0 0 1.4em !important;
}

body.breakdance .bob-updated time {
	border-bottom: 1px dotted var(--bde-palette-color-6);
}

/* ---- Sources box (.bob-sources) — a framed specimen note ----------- */

body.breakdance .bob-sources {
	position: relative;
	margin: 2.6em 0 0;
	padding: 18px 22px 16px;
	background: var(--bde-palette-color-5);
	border: 1px solid var(--bde-palette-color-6);
}

/* Plugin forces margin, font-size; also sets uppercase + opacity .75, which
   would defeat the small caps and grey the sap. */
body.breakdance .bob-sources .bob-sources__heading {
	font-family: 'EB Garamond', Georgia, serif;
	font-variant-caps: all-small-caps;
	text-transform: none;
	opacity: 1;
	letter-spacing: 0.15em;
	font-weight: 500;
	font-size: 15px !important;
	line-height: 1.4;
	color: var(--bde-palette-color-4);
	margin: 0 0 10px !important;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bde-palette-color-8);
}

body.breakdance .bob-sources__list {
	margin: 0 !important;
	padding-left: 1.5em !important;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--bde-palette-color-3);
}

body.breakdance .bob-sources__item {
	margin: 0 0 5px !important;
}

body.breakdance .bob-sources__item:last-child {
	margin-bottom: 0 !important;
}

body.breakdance .bob-sources__item::marker {
	color: var(--bde-palette-color-7);
}

body.breakdance .bob-sources__item a {
	color: var(--bde-palette-color-4);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	text-decoration-color: var(--bde-palette-color-6);
	overflow-wrap: anywhere;
}

body.breakdance .bob-sources__item a:hover {
	color: var(--bde-palette-color-1);
}

/* ---- FAQ (.bob-faq) — framed, ruled entries ------------------------- */

body.breakdance .bob-faq {
	margin: 2.6em 0 0;
	padding: 18px 22px 8px;
	background: var(--bde-palette-color-5);
	border: 1px solid var(--bde-palette-color-6);
}

/* Plugin forces size, weight, line-height, letter-spacing, transform, colour, margin. */
body.breakdance .bob-faq__heading {
	font-family: 'EB Garamond', Georgia, serif;
	font-variant-caps: all-small-caps;
	text-transform: none !important;
	letter-spacing: 0.15em !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	margin: 0 0 6px !important;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bde-palette-color-8);
	color: var(--bde-palette-color-4) !important;
}

body.breakdance .bob-faq__item {
	border: 0;
	border-bottom: 1px solid var(--bde-palette-color-8);
	border-radius: 0;
	background: transparent;
	margin: 0;
	box-shadow: none;
}

body.breakdance .bob-faq__item:last-child {
	border-bottom: 0;
}

/* Plugin forces size, weight, line-height, colour (and a blue hover colour). */
body.breakdance .bob-faq__q {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--bde-palette-color-1) !important;
	padding: 12px 40px 12px 0;
	cursor: pointer;
	background: transparent;
}

body.breakdance .bob-faq__q:hover {
	color: var(--bde-palette-color-4) !important;
}

body.breakdance .bob-faq__q::after {
	border-right-color: var(--bde-palette-color-4);
	border-bottom-color: var(--bde-palette-color-4);
}

body.breakdance .bob-faq__item:focus-within .bob-faq__q,
body.breakdance .bob-faq__q:focus-visible {
	outline: 2px solid var(--bde-palette-color-4);
	border-radius: 0;
}

body.breakdance .bob-faq__a {
	padding: 0 0 14px;
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--bde-palette-color-3);
}

/* Plugin forces margin, size, line-height, colour on the answer paragraphs. */
body.breakdance .bob-faq__a p {
	margin: 0 !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: var(--bde-palette-color-3) !important;
}

/* ---- CTA strip (.bob-cta via [ctu_bob_cta]) — framed note ----------- */

body.breakdance .bob-cta {
	margin: 2.6em 0 3.2em;
	padding: 22px 24px;
	background: var(--bde-palette-color-5);
	border: 1px solid var(--bde-palette-color-6);
	border-left: 3px solid var(--bde-palette-color-4);
	color: var(--bde-palette-color-1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
}

body.breakdance .bob-cta__text {
	font-family: 'EB Garamond', Georgia, serif;
	font-style: italic;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--bde-palette-color-1);
	margin: 0;
	flex: 1 1 320px;
}

body.breakdance .bob-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body.breakdance .bob-cta__btn {
	font-family: 'EB Garamond', Georgia, serif;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.12em;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	padding: 11px 18px;
	border-radius: 0;
	text-decoration: none;
	border: 1px solid var(--bde-palette-color-4);
	white-space: nowrap;
}

body.breakdance .bob-cta__btn--primary {
	background: var(--bde-palette-color-4);
	color: var(--bde-palette-color-5);
}

body.breakdance .bob-cta__btn--primary:hover {
	background: var(--bde-palette-color-1);
	border-color: var(--bde-palette-color-1);
	color: var(--bde-palette-color-5);
}

body.breakdance .bob-cta__btn--ghost {
	background: transparent;
	color: var(--bde-palette-color-4);
}

body.breakdance .bob-cta__btn--ghost:hover {
	background: var(--bde-palette-color-4);
	color: var(--bde-palette-color-5);
}

/* ---- Tables (.bob-table-scroll) ------------------------------------- */

body.breakdance .bob-table-scroll {
	margin: 0 0 1.4em;
	border: 1px solid var(--bde-palette-color-6);
	background: var(--bde-palette-color-5);
}

body.breakdance .bob-table-scroll table {
	font-size: 16px;
	line-height: 1.5;
}

body.breakdance .bob-table-scroll th {
	background: transparent;
	color: var(--bde-palette-color-1);
	font-variant-caps: all-small-caps;
	letter-spacing: 0.1em;
	font-weight: 500;
	border-bottom: 1px solid var(--bde-palette-color-6);
}

body.breakdance .bob-table-scroll th,
body.breakdance .bob-table-scroll td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--bde-palette-color-8);
}

/* ---- Site glue --------------------------------------------------------- */

.ctu-masthead-sub em {
	font-style: italic;
}

/* The subtitle is decoration, the section menu is function: below 1200px the
   subtitle goes so the menu keeps its room (the builder class only knows the
   registered breakpoints, so this cut-off lives here). */
@media (max-width: 1199px) {
	.ctu-masthead-sub {
		display: none;
	}
}

/* Any post loop laid out as a grid: the column count follows the item count
   when there are fewer items than columns, so two cards fill the row instead
   of leaving a gap. Breakdance sets the count per loop in --bde-posts-per-row;
   these override that variable only for loops with one or two items. At phone
   width every loop is one column anyway. */
body.breakdance .bde-loop.bde-loop-grid:has(> .bde-loop-item:nth-child(2):last-child) {
	--bde-posts-per-row: 2;
}

body.breakdance .bde-loop.bde-loop-grid:has(> .bde-loop-item:only-child) {
	--bde-posts-per-row: 1;
}

/* Front page: the Coca Leaf Stories rail excludes entries already shown
   above it (see ctu_news_exclude_shown_posts). When that leaves nothing,
   the whole section steps aside rather than showing a heading over a gap. */
body.home .ctu-stories:not(:has(.bde-loop-item)) {
	display: none;
}

@media (max-width: 767px) {
	body.breakdance .bde-loop.bde-loop-grid:has(> .bde-loop-item:nth-child(2):last-child),
	body.breakdance .bde-loop.bde-loop-grid:has(> .bde-loop-item:only-child) {
		--bde-posts-per-row: 1;
	}
	body.single .bde-rich-text.breakdance-rich-text-styles {
		padding: 22px 18px 20px;
	}
	body.breakdance .bob-sources,
	body.breakdance .bob-faq {
		padding-left: 16px;
		padding-right: 16px;
	}
	body.breakdance .bob-faq__heading {
		font-size: 15px !important;
	}
	body.breakdance .bob-faq__q {
		font-size: 17px !important;
	}
	body.breakdance .bob-cta {
		padding: 18px 16px;
	}
	body.breakdance .bob-cta__text {
		font-size: 18px;
	}
	body.breakdance .bob-cta__btn {
		white-space: normal;
	}
}