/**
 * Article text styles for blog posts built with Web/tools/blog-post.py.
 * Only applies inside .bmd-article, so older posts keep their own spacing.
 * Selectors start with #blog-content (the Blog Template) and use !important on line-height and
 * letter-spacing, because the template's blog-styles.css does the same.
 * Font is the theme's DIN Pro (regular, 500, bold). Colours from the Elementor kit:
 * text #404042, BMD Teal #00B3BE, light grey #F8F8F8.
 * Spacing and sizes are the named values below, desktop and tablet first, then phone.
 * On Local, the sliders panel (mu-plugins/bmd-article-tuner.php) changes the same names.
 * Added 27 Oct 2026, see Web/Web_Change_Log.md.
 */

body:has(.bmd-article) {
	--bmd-space-below-title: 16px;
	--bmd-space-above-author: 10px;
	--bmd-space-above-line: 31px;
	--bmd-space-below-line: 49px;
	--bmd-text-size: 20px;
	--bmd-line-height: 1.8;
	--bmd-paragraph-gap: 26px;
	--bmd-list-item-gap: 0px;
	--bmd-bullet-list-indent: 10px;
	--bmd-number-list-indent: 10px;
	--bmd-list-marker-gap: 7px;
	--bmd-list-space-around: 17px;
	--bmd-h2-size: 28px;
	--bmd-h2-space-above: 50px;
	--bmd-h2-space-below: 17px;
	--bmd-h3-size: 23px;
	--bmd-h3-space-above: 37px;
	--bmd-h3-space-below: 12px;
	--bmd-h4-size: 20px;
	--bmd-quote-padding-y: 37px;
	--bmd-quote-padding-x: 34px;
	--bmd-quote-space-around: 35px;
	--bmd-quote-text-size: 22px;
	--bmd-quote-weight: 400;
	--bmd-quote-background: #F8F8F8;
	--bmd-quote-edge-colour: #0065BD;
	--bmd-quote-edge-width: 5px;
	--bmd-quote-radius: 0px;
	--bmd-checklist-padding-y: 42px;
	--bmd-checklist-padding-x: 57px;
	--bmd-checklist-space-around: 36px;
	--bmd-checklist-text-size: 18px;
	--bmd-checklist-title-size: 22px;
	--bmd-checklist-title-space-below: 26px;
	--bmd-checklist-item-gap: 0px;
	--bmd-checklist-background: #F8F8F8;
	--bmd-checklist-edge-colour: #00B3BE;
	--bmd-checklist-edge-width: 4px;
	--bmd-checklist-border: 0px;
	--bmd-checklist-radius: 0px;
	--bmd-checklist-number-colour: #404042;
	--bmd-checklist-number-weight: 400;
	--bmd-table-text-size: 17px;
	--bmd-table-cell-padding-y: 13px;
	--bmd-table-cell-padding-x: 18px;
	--bmd-table-space-around: 34px;
	--bmd-table-header-weight: 700;
	--bmd-table-header-background: #FFFFFF;
	--bmd-table-border-colour: #D8D8D8;
	--bmd-media-space-around: 36px;
	--bmd-postnav-text-size: 15px;
	--bmd-postnav-padding-y: 12px;
	--bmd-postnav-padding-x: 20px;
	--bmd-postnav-hover: #F8F8F8;
	--bmd-postnav-arrow-hover: #FF585F;
	--bmd-postnav-radius: 6px;
	--bmd-follow-hover: #E6F0F8;
	--bmd-follow-radius: 6px;
	--bmd-caption-size: 15px;
}

@media (max-width: 767px) {
	body:has(.bmd-article) {
		--bmd-space-below-title: 16px;
		--bmd-space-above-author: 9px;
		--bmd-space-above-line: 20px;
		--bmd-space-below-line: 36px;
		--bmd-text-size: 18px;
		--bmd-line-height: 1.6;
		--bmd-paragraph-gap: 22px;
		--bmd-list-item-gap: 9px;
		--bmd-bullet-list-indent: 0px;
		--bmd-number-list-indent: 0px;
		--bmd-list-marker-gap: 4px;
		--bmd-list-space-around: 22px;
		--bmd-h2-size: 24px;
		--bmd-h2-space-above: 43px;
		--bmd-h2-space-below: 14px;
		--bmd-h3-size: 20px;
		--bmd-h3-space-above: 32px;
		--bmd-h3-space-below: 10px;
		--bmd-h4-size: 18px;
		--bmd-quote-padding-y: 18px;
		--bmd-quote-padding-x: 20px;
		--bmd-quote-space-around: 29px;
		--bmd-quote-text-size: 18px;
		--bmd-quote-weight: 400;
		--bmd-quote-background: #F8F8F8;
		--bmd-quote-edge-colour: #0065BD;
		--bmd-quote-edge-width: 4px;
		--bmd-quote-radius: 0px;
		--bmd-checklist-padding-y: 18px;
		--bmd-checklist-padding-x: 20px;
		--bmd-checklist-space-around: 29px;
		--bmd-checklist-text-size: 18px;
		--bmd-checklist-title-size: 18px;
		--bmd-checklist-title-space-below: 22px;
		--bmd-checklist-item-gap: 9px;
		--bmd-checklist-background: #F8F8F8;
		--bmd-checklist-edge-colour: #00B3BE;
		--bmd-checklist-edge-width: 4px;
		--bmd-checklist-border: 0px;
		--bmd-checklist-radius: 0px;
		--bmd-checklist-number-colour: #404042;
		--bmd-checklist-number-weight: 400;
		--bmd-table-text-size: 16px;
		--bmd-table-cell-padding-y: 10px;
		--bmd-table-cell-padding-x: 12px;
		--bmd-table-space-around: 29px;
		--bmd-table-header-weight: 700;
		--bmd-table-header-background: #FFFFFF;
		--bmd-table-border-colour: #D8D8D8;
		--bmd-media-space-around: 32px;
		--bmd-author-bio-padding-x: 24px;
		--bmd-postnav-text-size: 14px;
		--bmd-postnav-padding-y: 10px;
		--bmd-postnav-padding-x: 16px;
		--bmd-postnav-hover: #F8F8F8;
		--bmd-postnav-arrow-hover: #FF585F;
		--bmd-postnav-radius: 6px;
		--bmd-follow-hover: #E6F0F8;
		--bmd-follow-radius: 6px;
		--bmd-caption-size: 14px;
	}
}

#blog-content .elementor-widget-container .bmd-article {
	font-family: "DIN Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: var(--bmd-text-size);
	line-height: var(--bmd-line-height) !important;
	color: #404042;
	/* Line between the author and share row and the start of the article */
	border-top: 1px solid #D8D8D8;
	padding-top: var(--bmd-space-below-line);
}

/* More space between the subheading and the author and share row. That row is its own
   section in the Blog Template (f562108), outside #blog-content, so it is reached through
   body:has() to keep the change to new posts. Padding, not margin: the section above has a
   20px bottom margin that a margin would collapse into. !important beats Elementor's phone rule */
body:has(.bmd-article) .elementor-element-f562108 {
	padding-top: var(--bmd-space-above-author) !important;
}

/* Author row at the foot of the post (template section 6ea8dea): picture, name and bio, Follow
   button. Centred on phones only (Juan, 28 Oct). The template aligns the button right on phones
   and nudges the picture 8px left, so both are undone here */
@media (max-width: 767px) {
	body:has(.bmd-article) .elementor-element-d5e8a54 {
		margin-left: auto;
		margin-right: auto;
	}

	/* The template's -8px sits on the inner container, not the widget */
	body:has(.bmd-article) .elementor-element-d0ab2aa > .elementor-widget-container {
		margin-left: 0 !important;
	}

	body:has(.bmd-article) .elementor-element-d0ab2aa .jet-listing-dynamic-image,
	body:has(.bmd-article) .elementor-element-d0ab2aa .jet-listing-dynamic-image a {
		justify-content: center;
	}

	body:has(.bmd-article) .elementor-element-655d0a8 .elementor-author-box,
	body:has(.bmd-article) .elementor-element-655d0a8 .elementor-author-box__text {
		text-align: center;
		justify-content: center;
	}

	body:has(.bmd-article) .elementor-element-655d0a8 .elementor-author-box__text {
		padding-left: var(--bmd-author-bio-padding-x);
		padding-right: var(--bmd-author-bio-padding-x);
	}

	body:has(.bmd-article) .elementor-element-f21cca7 .elementor-button-wrapper {
		text-align: center !important;
		justify-content: center !important;
	}
}

/* Previous and Next links at the foot of the post (template widget 5ccd44a): bigger, with room
   around them and a light grey background on hover (Juan, 28 Oct) */
body:has(.bmd-article) .elementor-element-5ccd44a .elementor-post-navigation__link a {
	/* Only as wide as the arrow and label, not half the page. The Next link keeps to the right */
	display: inline-flex;
	width: auto;
	max-width: 100%;
	padding: var(--bmd-postnav-padding-y) var(--bmd-postnav-padding-x);
	transition: background-color 0.2s;
	border-radius: var(--bmd-postnav-radius);
}

body:has(.bmd-article) .elementor-element-5ccd44a .elementor-post-navigation__next {
	text-align: right;
}

body:has(.bmd-article) .elementor-element-5ccd44a .elementor-post-navigation__link a:hover,
body:has(.bmd-article) .elementor-element-5ccd44a .elementor-post-navigation__link a:focus-visible {
	background-color: var(--bmd-postnav-hover);
}

/* Label goes bold on hover. The box grows by a few pixels as it does */
body:has(.bmd-article) .elementor-element-5ccd44a .elementor-post-navigation__link a:hover span,
body:has(.bmd-article) .elementor-element-5ccd44a .elementor-post-navigation__link a:focus-visible span {
	font-weight: bold;
}

body:has(.bmd-article) .elementor-element-5ccd44a .elementor-post-navigation__link a:hover .post-navigation__arrow-wrapper,
body:has(.bmd-article) .elementor-element-5ccd44a .elementor-post-navigation__link a:focus-visible .post-navigation__arrow-wrapper {
	color: var(--bmd-postnav-arrow-hover);
}

body:has(.bmd-article) .elementor-element-5ccd44a .post-navigation__prev--label,
body:has(.bmd-article) .elementor-element-5ccd44a .post-navigation__next--label,
body:has(.bmd-article) .elementor-element-5ccd44a .post-navigation__arrow-wrapper {
	font-size: var(--bmd-postnav-text-size);
}

/* Follow on LinkedIn button in the author row (template widget f21cca7): light background on
   hover, light blue, and bold text (Juan, 28 Oct) */
body:has(.bmd-article) .elementor-element-f21cca7 .elementor-button {
	transition: background-color 0.2s;
	border-radius: var(--bmd-follow-radius) !important;
}

body:has(.bmd-article) .elementor-element-f21cca7 .elementor-button:hover,
body:has(.bmd-article) .elementor-element-f21cca7 .elementor-button:focus-visible {
	background-color: var(--bmd-follow-hover) !important;
}

/* The button's own font (FFDINWebProRegular) isn't loaded on posts, so it showed in a fallback
   sans-serif. DIN Pro instead, regular, and bold on hover */
body:has(.bmd-article) .elementor-element-f21cca7 .elementor-button,
body:has(.bmd-article) .elementor-element-f21cca7 .elementor-button-text {
	font-family: "DIN Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: normal;
}

body:has(.bmd-article) .elementor-element-f21cca7 .elementor-button:hover .elementor-button-text,
body:has(.bmd-article) .elementor-element-f21cca7 .elementor-button:focus-visible .elementor-button-text {
	font-family: "DIN Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
}

/* Space between the title and the subheading. The title is template widget a63ab29 */
body:has(.bmd-article) .elementor-element-a63ab29 {
	margin-bottom: var(--bmd-space-below-title) !important;
}

/* Space between the share icons and the line. The template already leaves 20px there
   (10px under the share row, 10px above the article), so the margin adds or takes the rest */
#blog-content .elementor-widget-container .bmd-article {
	margin-top: calc(var(--bmd-space-above-line) - 20px);
}

#blog-content .elementor-widget-container .bmd-article p,
#blog-content .elementor-widget-container .bmd-article ul,
#blog-content .elementor-widget-container .bmd-article ol {
	margin: 0 0 var(--bmd-paragraph-gap);
	font-size: inherit;
	line-height: inherit !important;
	letter-spacing: normal !important;
}

#blog-content .elementor-widget-container .bmd-article > :first-child {
	margin-top: 0;
}

#blog-content .elementor-widget-container .bmd-article h2,
#blog-content .elementor-widget-container .bmd-article h3,
#blog-content .elementor-widget-container .bmd-article h4 {
	font-family: "DIN Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #404042;
	letter-spacing: normal !important;
}

#blog-content .elementor-widget-container .bmd-article h2 {
	font-size: var(--bmd-h2-size);
	font-weight: bold;
	line-height: 1.25 !important;
	margin: var(--bmd-h2-space-above) 0 var(--bmd-h2-space-below);
}

#blog-content .elementor-widget-container .bmd-article h3 {
	font-size: var(--bmd-h3-size);
	font-weight: bold;
	line-height: 1.3 !important;
	margin: var(--bmd-h3-space-above) 0 var(--bmd-h3-space-below);
}

#blog-content .elementor-widget-container .bmd-article h4 {
	font-size: var(--bmd-h4-size);
	font-weight: 500;
	line-height: 1.4 !important;
	margin: 1.4em 0 0.4em;
}

#blog-content .elementor-widget-container .bmd-article strong {
	font-weight: bold;
}

/* No DIN Pro italic is loaded, so emphasis stays upright rather than a slanted fake */
#blog-content .elementor-widget-container .bmd-article em {
	font-style: normal;
	font-weight: 500;
}

#blog-content .elementor-widget-container .bmd-article a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #00B3BE;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

#blog-content .elementor-widget-container .bmd-article a:hover,
#blog-content .elementor-widget-container .bmd-article a:focus {
	color: #00B3BE;
}

/* Lists */
#blog-content .elementor-widget-container .bmd-article ul,
#blog-content .elementor-widget-container .bmd-article ol {
	padding-left: 1.5em;
}

#blog-content .elementor-widget-container .bmd-article ul > li {
	list-style: disc;
}

#blog-content .elementor-widget-container .bmd-article ol > li {
	list-style: decimal;
}

#blog-content .elementor-widget-container .bmd-article li {
	margin: 0 0 var(--bmd-list-item-gap);
	padding-left: var(--bmd-list-marker-gap);
	font-size: inherit;
	line-height: inherit !important;
	letter-spacing: normal !important;
}

#blog-content .elementor-widget-container .bmd-article ul > li::marker {
	color: #00B3BE;
	font-weight: bold;
}

/* Second-level bullets (hollow circles) in the text colour: teal was too faint (Juan, 28 Oct) */
#blog-content .elementor-widget-container .bmd-article li ul > li::marker {
	color: #404042;
}

/* Numbers in the text colour and weight, so they read as part of the text (Juan, 28 Oct) */
#blog-content .elementor-widget-container .bmd-article ol > li::marker {
	color: #404042;
	font-weight: normal;
}

/* Whole-list indent and the space above and below a list. The list's own left padding
   (1.5em, 1.3em on phones) is the room the bullet or number sits in; the indent adds to it.
   Lists inside lists keep no extra indent (rule below) */
#blog-content .elementor-widget-container .bmd-article ul {
	margin: var(--bmd-list-space-around) 0 var(--bmd-list-space-around) var(--bmd-bullet-list-indent);
}

#blog-content .elementor-widget-container .bmd-article ol {
	margin: var(--bmd-list-space-around) 0 var(--bmd-list-space-around) var(--bmd-number-list-indent);
}

#blog-content .elementor-widget-container .bmd-article li > ul,
#blog-content .elementor-widget-container .bmd-article li > ol {
	margin: var(--bmd-list-item-gap) 0 0;
}

#blog-content .elementor-widget-container .bmd-article li li > ul > li,
#blog-content .elementor-widget-container .bmd-article li > ul > li {
	list-style: circle;
}

/* Quote box: a plain > box in the markdown */
#blog-content .elementor-widget-container .bmd-article blockquote {
	font-style: normal;
	font-size: var(--bmd-quote-text-size);
	font-weight: var(--bmd-quote-weight);
	line-height: inherit !important;
	letter-spacing: normal !important;
	background: var(--bmd-quote-background);
	border: 0;
	border-left: var(--bmd-quote-edge-width) solid var(--bmd-quote-edge-colour);
	border-radius: var(--bmd-quote-radius);
	padding: var(--bmd-quote-padding-y) var(--bmd-quote-padding-x);
	margin: var(--bmd-quote-space-around) 0;
	color: #404042;
}

#blog-content .elementor-widget-container .bmd-article blockquote > :last-child {
	margin-bottom: 0;
}

/* Checklist box: a > box whose first line is [!checklist]. The coloured edge is an inset shadow,
   so it sits inside the optional light grey border on all sides */
#blog-content .elementor-widget-container .bmd-article blockquote.bmd-checklist {
	font-size: var(--bmd-checklist-text-size);
	font-weight: normal;
	background: var(--bmd-checklist-background);
	border: var(--bmd-checklist-border) solid #D8D8D8;
	border-radius: var(--bmd-checklist-radius);
	box-shadow: inset var(--bmd-checklist-edge-width) 0 0 var(--bmd-checklist-edge-colour);
	padding: var(--bmd-checklist-padding-y) var(--bmd-checklist-padding-x);
	padding-left: calc(var(--bmd-checklist-padding-x) + var(--bmd-checklist-edge-width));
	margin: var(--bmd-checklist-space-around) 0;
}

/* The box's first line is its title */
#blog-content .elementor-widget-container .bmd-article blockquote.bmd-checklist > p:first-child {
	font-size: var(--bmd-checklist-title-size);
	line-height: 1.4 !important;
	margin-bottom: var(--bmd-checklist-title-space-below);
}

#blog-content .elementor-widget-container .bmd-article blockquote.bmd-checklist li {
	margin-bottom: var(--bmd-checklist-item-gap);
}

#blog-content .elementor-widget-container .bmd-article blockquote.bmd-checklist li > ul,
#blog-content .elementor-widget-container .bmd-article blockquote.bmd-checklist li > ol {
	margin-top: var(--bmd-checklist-item-gap);
}

#blog-content .elementor-widget-container .bmd-article blockquote.bmd-checklist ol > li::marker {
	color: var(--bmd-checklist-number-colour);
	font-weight: var(--bmd-checklist-number-weight);
}

/* Tables: a markdown table. Thin grey lines on every cell, bold header row, no stripes.
   The wrapper scrolls sideways on phones when a table is wider than the screen */
#blog-content .elementor-widget-container .bmd-article .bmd-table {
	margin: var(--bmd-table-space-around) 0;
	overflow-x: auto;
}

#blog-content .elementor-widget-container .bmd-article .bmd-table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 0;
	font-size: var(--bmd-table-text-size);
}

#blog-content .elementor-widget-container .bmd-article .bmd-table th,
#blog-content .elementor-widget-container .bmd-article .bmd-table td {
	font-family: "DIN Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: inherit;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	color: #404042;
	text-align: left;
	vertical-align: top;
	border: 1px solid var(--bmd-table-border-colour);
	padding: var(--bmd-table-cell-padding-y) var(--bmd-table-cell-padding-x);
	background: transparent;
}

#blog-content .elementor-widget-container .bmd-article .bmd-table th {
	font-weight: var(--bmd-table-header-weight);
	background: var(--bmd-table-header-background);
}

#blog-content .elementor-widget-container .bmd-article .bmd-table tr,
#blog-content .elementor-widget-container .bmd-article .bmd-table tbody > tr:nth-child(odd) > td {
	background: transparent;
}

/* Images, with an optional caption. The first image in a post is the banner */
#blog-content .elementor-widget-container .bmd-article .bmd-figure {
	margin: var(--bmd-media-space-around) 0;
}

#blog-content .elementor-widget-container .bmd-article .bmd-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

#blog-content .elementor-widget-container .bmd-article .bmd-figure figcaption {
	margin-top: 10px;
	font-family: "DIN Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	text-align: left;
	font-size: var(--bmd-caption-size);
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	color: #818181;
}

/* YouTube player: full text width at 16:9. WordPress gives the iframe a fixed width and height */
#blog-content .elementor-widget-container .bmd-article .bmd-video {
	margin: var(--bmd-media-space-around) 0;
}

#blog-content .elementor-widget-container .bmd-article .bmd-video p {
	margin: 0;
}

#blog-content .elementor-widget-container .bmd-article .bmd-video iframe {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	border: 0;
}

#blog-content .elementor-widget-container .bmd-article > .bmd-figure:first-child,
#blog-content .elementor-widget-container .bmd-article > .bmd-video:first-child {
	margin-top: 0;
}

@media (max-width: 767px) {
	#blog-content .elementor-widget-container .bmd-article ul,
	#blog-content .elementor-widget-container .bmd-article ol {
		padding-left: 1.3em;
	}
}