/* =============================================================================
   BD Media — native design system for the theme templates.

   WHY THIS FILE EXISTS
   --------------------
   The homepage used to be an Elementor page, so its type was whatever Elementor
   containers happened to carry. Measured on the live site at 1440px before this
   rewrite:

       body                14px / weight 300 / 1.6
       card excerpt        14px / weight 300 / 1.5
       card title          24px / weight 700
       line length         ~93 CHARACTERS PER LINE
       signals note        12px  #98a1ad  ->  2.6:1  (FAILS WCAG AA)
       page                10,590px tall, 2,730 DOM nodes

   93 CPL is the worst number in that table. The readable range is 45-75 with 66
   as the sweet spot; past ~90 the eye loses the start of the next line. It happened
   because a 4-up grid inside a 1240px column leaves ~292px per card, and 14px text
   fills that with 93 characters. Weight 300 on white makes it worse.

   So the fix is not "make the font bigger". It is: fewer columns, a real measure,
   400 not 300, and a colour token for the greys that actually passes AA.

   HOUSE RULES
     - Display type is Barlow (self-hosted, 400/500/600/700/800 + 400i).
   - Body type is Roboto (self-hosted, variable 100-900).
   - No literal hex in a component rule. Everything reads a token, so dark mode
     is one block of token overrides rather than a second stylesheet.
   - Every text colour is checked against its surface at 4.5:1 (3:1 for >=24px).
   ============================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
	/* type */
	--bd-ff-display: 'Barlow', system-ui, sans-serif;
	--bd-ff-body: 'Roboto', system-ui, sans-serif;

	--bd-fs-hero: clamp(30px, 4.2vw, 46px);
	--bd-fs-h2: clamp(22px, 2.4vw, 27px);
	--bd-fs-h3: 20px;
	--bd-fs-title: 19px;
	--bd-fs-body: 17px;
	--bd-fs-excerpt: 16px;
	--bd-fs-meta: 13px;

	--bd-lh-tight: 1.12;
	--bd-lh-head: 1.28;
	--bd-lh-body: 1.7;

	/* The readable line. This is the whole point.
	   NB: `ch` is the width of the "0" glyph, which in Roboto is ~0.55em, so 58ch renders as
	   roughly 64 ACTUAL characters — which is the number the 45-75 guidance is talking about.
	   Measuring it at 68ch gave 76 real characters, still over the top of the range. */
	--bd-measure: 58ch;
	--bd-measure-narrow: 50ch;

	/* colour — light */
	--bd-bg: #ffffff;
	--bd-bg-alt: #f6f7f9;    /* the alternating section band */
	--bd-card: #ffffff;
	--bd-ink: #101828;        /* headings      17.4:1 */
	--bd-body-ink: #333d4d;   /* body copy     11.4:1 */
	--bd-muted: #5a6474;      /* meta          7.0:1  */
	--bd-faint: #6b7280;      /* footnotes     5.1:1  (was #98a1ad = 2.6:1) */
	--bd-line: #e4e7ec;
	--bd-line-soft: #eef0f3;
	--bd-accent: #be1e51;     /* on white 6.1:1 */
	--bd-accent-ink: #a81646;
	/* The estate's dark surface. Already used by bd-header.css and bd-listing.css, so
	   the drawer is the same navy the rest of the site speaks rather than a new colour.
	   White on it measures 14.5:1. */
	--bd-navy: #17202e;
	--bd-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
	--bd-shadow-lift: 0 2px 6px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .10);

	/* rhythm */
	--bd-wrap: 1240px;
	--bd-gutter: 20px;
	--bd-section-y: clamp(40px, 5vw, 64px);
	--bd-radius: 10px;
}

/* ---------------------------------------------------------------- dark mode
   Not a filter, not an invert. A second set of tokens, switched on
   `html[data-bd-theme="dark"]` — the same attribute the reader toggle writes.
   Only tokens change; no component rule is repeated. */
html[data-bd-theme='dark'] {
	--bd-bg: #12141a;
	--bd-bg-alt: #171a21;
	--bd-card: #1b1f27;
	--bd-ink: #e9ecf1;        /* 14.9:1 on --bd-bg */
	--bd-body-ink: #c2c9d6;   /* 10.1:1 */
	--bd-muted: #98a2b3;      /* 5.4:1  */
	--bd-faint: #8b95a5;      /* 4.6:1  */
	--bd-line: #2a2f3a;
	--bd-line-soft: #232833;
	--bd-accent: #ff5c8d;     /* 5.6:1 on --bd-bg */
	--bd-accent-ink: #ff85aa;
	--bd-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
	--bd-shadow-lift: 0 2px 8px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------- base */

/* The page's own type, not just the content inside it. Elementor's kit sets
   `body { font-size: 14px; font-weight: 300 }`, and that is what a reader inherits for
   anything a component does not size explicitly — including the footer. This file is
   enqueued after the kit, so it wins at equal specificity. */
body {
	font-family: var(--bd-ff-body);
	font-size: var(--bd-fs-body);
	font-weight: 400;
	line-height: var(--bd-lh-body);
	color: var(--bd-body-ink);
	background-color: var(--bd-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.bd-main {
	font-family: var(--bd-ff-body);
	font-size: var(--bd-fs-body);
	line-height: var(--bd-lh-body);
	color: var(--bd-body-ink);
	-webkit-font-smoothing: antialiased;
}

.bd-wrap {
	width: 100%;
	max-width: var(--bd-wrap);
	margin: 0 auto;
	padding: 0 var(--bd-gutter);
}

.bd-section { padding: var(--bd-section-y) 0; }
.bd-section--alt { background: var(--bd-bg-alt); }

/* ---------------------------------------------------------------- headings */
.bd-hero__kicker {
	display: inline-block;
	margin: 0 0 10px;
	font-family: var(--bd-ff-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bd-accent);
}

.bd-hero__title {
	max-width: 22ch;
	margin: 0;
	font-family: var(--bd-ff-display);
	font-size: var(--bd-fs-hero);
	font-weight: 800;
	line-height: var(--bd-lh-tight);
	letter-spacing: -.02em;
	color: var(--bd-ink);
}

.bd-hero__deck {
	max-width: var(--bd-measure);
	margin: 16px 0 0;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.6;
	color: var(--bd-muted);
}

.bd-h2 {
	margin: 0 0 22px;
	font-family: var(--bd-ff-display);
	font-size: var(--bd-fs-h2);
	font-weight: 700;
	line-height: var(--bd-lh-head);
	letter-spacing: -.01em;
	color: var(--bd-ink);
}

.bd-h2 a { color: inherit; text-decoration: none; }
.bd-h2 a:hover { color: var(--bd-accent); }

/* ---------------------------------------------------------------- cards
   3 columns, not 4. At 1240px a 3-up card is ~390px wide, which at a 16px
   excerpt is ~52 characters per line — inside the readable band. A 4-up card is
   292px, which is 93 characters and unreadable. That single change is most of
   the improvement. */
.bd-grid {
	display: grid;
	gap: 28px 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bd-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--bd-card);
	border-radius: var(--bd-radius);
	overflow: hidden;
}

.bd-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bd-line-soft);
}
.bd-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.bd-card:hover .bd-card__media img { transform: scale(1.03); }

.bd-card__body { padding: 16px 2px 4px; }

.bd-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: var(--bd-ff-display);
	font-size: var(--bd-fs-title);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.005em;
	color: var(--bd-ink);
	text-decoration: none;
}
.bd-card__title:hover { color: var(--bd-accent); }

.bd-card__excerpt {
	max-width: var(--bd-measure);
	margin: 10px 0 0;
	font-size: var(--bd-fs-excerpt);
	font-weight: 400;
	line-height: 1.62;
	color: var(--bd-body-ink);
}

.bd-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: var(--bd-fs-meta);
	font-weight: 500;
	line-height: 1.4;
	color: var(--bd-muted);
}
.bd-card__meta time { color: var(--bd-muted); }

/* ---------------------------------------------------------------- chips */
.bd-chip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--bd-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}
.bd-chip:hover { background: var(--bd-accent-ink); color: #fff; }

.bd-note {
	margin: 0;
	font-size: var(--bd-fs-meta);
	line-height: 1.6;
	color: var(--bd-faint);
}

/* ---------------------------------------------------------------- more link */
.bd-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bd-accent);
	text-decoration: none;
}
.bd-more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
	.bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.bd-grid,
	.bd-grid--2,
	.bd-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.bd-hero__deck { margin-top: 12px; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bd-card__media img { transition: none; }
	.bd-card:hover .bdm-h-card__media img { transform: none; }
}

/* =============================================================================
   ARTICLE + FOOTER TYPOGRAPHY

   The homepage was fixed first, which left the two surfaces a reader actually
   spends time on still inconsistent. Measured on the live article at 1440px:

       body copy    17px  w400  BARLOW  @773px  ->  ~91 characters per line
       body h2      24px  w700  ROBOTO
       captions     13px  w400  Barlow  @773px  ->  ~119 characters per line
       footer links 17px  w600  INTER
       footer text  14px  w500  Open Sans

   THREE problems, all visible as "inconsistent":

   1. THE PAIRING IS INVERTED. Body copy renders in Barlow — the DISPLAY face — and
      body headings render in Roboto — the BODY face. Exactly backwards, and the main
      reason the page reads as two different sites stapled together.
   2. THE MEASURE IS TOO WIDE. 773px at 17px is ~91 characters. The readable band is
      45-75. Captions at 13px across the same 773px are ~119, which is not a line.
   3. FOUR FAMILIES ON ONE PAGE. Barlow + Roboto + Inter (footer nav) + Open Sans (one
      copyright line). Inter and Open Sans also cost 96 KB of webfont to download.

   Everything here converges on two faces: Barlow for display, Roboto for reading.
   ============================================================================= */

/* ---- 1. the article body reads in the BODY face, at a readable measure ---- */
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li,
.elementor-widget-theme-post-content blockquote p {
	font-family: var(--bd-ff-body) !important;
	font-size: var(--bd-fs-body) !important;
	font-weight: 400 !important;
	line-height: var(--bd-lh-body) !important;
	color: var(--bd-body-ink) !important;
	max-width: var(--bd-measure) !important;
}

.elementor-widget-theme-post-content {
	font-family: var(--bd-ff-body) !important;
	color: var(--bd-body-ink);
}

/* ---- 2. article headings use the DISPLAY face (the inversion, undone) ---- */
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4 {
	font-family: var(--bd-ff-display) !important;
	font-weight: 700 !important;
	line-height: var(--bd-lh-head) !important;
	letter-spacing: -.01em !important;
	color: var(--bd-ink) !important;
	max-width: var(--bd-measure) !important;
}
.elementor-widget-theme-post-content h2 { font-size: clamp(22px, 2.2vw, 27px) !important; }
.elementor-widget-theme-post-content h3 { font-size: var(--bd-fs-h3) !important; }

/* ---- 3. captions and sources are the worst measure on the page ----
   13px across 773px is ~119 characters. Upped to 14px and capped, so a caption reads
   as a caption rather than as a line that fell off the paragraph above it. */
.bdm-cap,
.elementor-widget-theme-post-content figcaption,
.elementor-widget-theme-post-content .bdm-cap {
	font-family: var(--bd-ff-body) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: var(--bd-muted) !important;
	max-width: var(--bd-measure) !important;
}

/* tables keep the body face too */
.elementor-widget-theme-post-content table,
.elementor-widget-theme-post-content td,
.elementor-widget-theme-post-content th {
	font-family: var(--bd-ff-body) !important;
}

/* ---- 4. the footer, which was the last place still speaking in another font ----
   Three nav widgets set `font-family: Inter` and the copyright sets `Open Sans`. Both
   are now the house faces, which is also what lets `bd-fonts.css` stop shipping those
   two families (-96 KB). */
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu .elementor-item,
.elementor-location-footer .elementor-widget-nav-menu a {
	font-family: var(--bd-ff-display) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
}

.elementor-location-footer p,
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
	font-family: var(--bd-ff-body) !important;
}

/* the footer's two "Editor Picks / POPULAR POSTS" headings were Inter 17px/800 uppercase */
.elementor-location-footer .elementor-heading-title {
	font-family: var(--bd-ff-display) !important;
	font-weight: 800 !important;
	letter-spacing: .04em !important;
}
.elementor-location-footer .elementor-posts .elementor-post__title,
.elementor-location-footer .elementor-posts a {
	font-family: var(--bd-ff-display) !important;
	font-weight: 600 !important;
	line-height: 1.42 !important;
}

/* ---- dark mode for the article + footer surfaces ---- */
html[data-bd-theme='dark'] .elementor-widget-theme-post-content p,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content li,
html[data-bd-theme='dark'] .bdm-cap,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content figcaption {
	color: var(--bd-body-ink) !important;
}
html[data-bd-theme='dark'] .elementor-widget-theme-post-content h2,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content h3 {
	color: var(--bd-ink) !important;
}
/* =============================================================================
   NATIVE HEADER — replaces Elementor Pro template 3220

   Henry, 2026-10-03: "rebuild the whole menu, dont patch".

   What this replaces, and why patching was the wrong tool: template 3220 held nav-menu x3
   and search x3 with Elementor printing the SAME widget id for every instance, so every
   page shipped eight duplicate ids (menu-1-, menu-2-, search-, results- each twice). Its
   mobile drawer was a narrow white column with a floating masthead; its ::before logo
   duplicated the header at scroll 0 and was the only logo once stuck; and fixing any of it
   meant out-specifying generated CSS with `!important` — a fight bdm-header.css was already
   having. See header.php for the markup and the full rationale.

   ONE header, ONE nav, ONE logo, ONE search. The drawer is a real dialog. No JavaScript:
   the drawer is a hidden checkbox plus a label, and the submenus are native details/summary.

   DARK MODE: every colour here reads a token from the top of this file, so the drawer and the
   header flip with the rest of the site instead of needing their own overrides.
   ============================================================================= */

/* ---------------------------------------------------------------- header shell */
.bd-hdr {
	background: var(--bd-bg);
	border-bottom: 1px solid var(--bd-line);
	position: relative;
	z-index: 80;
}

/* ---------------------------------------------------------------- row 1: masthead */
.bd-hdr__top-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	padding: 11px 0;
}

.bd-hdr__meta { min-width: 0; }

.bdm-dateline {
	margin: 0;
	font-family: var(--bd-ff-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bd-accent);
}

.bdm-tagline {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--bd-muted);
}

.bd-hdr__logo { justify-self: center; display: block; }
.bd-hdr__logo-img { display: block; width: 236px; height: auto; }
.bd-hdr__wordmark {
	font-family: var(--bd-ff-display);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--bd-ink);
}

.bd-hdr__cta {
	justify-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	min-width: 0;
}

.bd-hdr__sub {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 7px;
	background: var(--bd-accent);
	color: #fff;
	font-family: var(--bd-ff-display);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.bd-hdr__sub:hover { background: var(--bd-accent-ink); color: #fff; }

.bdm-utility {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--bd-muted);
	white-space: nowrap;
}
.bdm-utility a { color: var(--bd-muted); text-decoration: none; }
.bdm-utility a:hover { color: var(--bd-accent); text-decoration: underline; }
.bdm-utility span { margin: 0 6px; color: var(--bd-line); }

/* ---------------------------------------------------------------- row 2: nav + search */
.bd-hdr__nav {
	background: var(--bd-bg);
	border-top: 1px solid var(--bd-line);
	position: sticky;
	top: 0;
	z-index: 70;
}
/* the WP admin bar is 32px from 783px up, 46px below that */
body.admin-bar .bd-hdr__nav { top: 32px; }

.bd-hdr__nav-in {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 48px;
}

/* ---------------------------------------------------------------- the nav */
.bd-nav { flex: 1 1 auto; min-width: 0; }
.bd-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bd-nav__item { position: relative; }

.bd-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 13px 13px;
	border-bottom: 2px solid transparent;
	font-family: var(--bd-ff-display);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--bd-ink);
	text-decoration: none;
	white-space: nowrap;
}
.bd-nav__link:hover,
.bd-nav__link:focus-visible { color: var(--bd-accent); border-bottom-color: var(--bd-accent); }
.bd-nav__caret { opacity: .5; transition: transform .18s ease; }
.bd-nav__item--has-sub:hover .bd-nav__caret,
.bd-nav__item--has-sub:focus-within .bd-nav__caret { transform: rotate(180deg); opacity: .9; }

/* the dropdown: keyboard-reachable via :focus-within, not hover-only */
.bd-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 75;
	min-width: 224px;
	margin: 0;
	padding: 7px 0;
	list-style: none;
	background: var(--bd-card);
	border: 1px solid var(--bd-line);
	border-radius: 9px;
	box-shadow: var(--bd-shadow-lift);
	display: none;
}
.bd-nav__item--has-sub:hover .bd-nav__sub,
.bd-nav__item--has-sub:focus-within .bd-nav__sub { display: block; }

.bd-nav__sub a {
	display: block;
	padding: 9px 16px;
	font-size: 15px;
	line-height: 1.35;
	color: var(--bd-body-ink);
	text-decoration: none;
}
.bd-nav__sub a:hover,
.bd-nav__sub a:focus-visible { background: var(--bd-accent); color: #fff; }

/* ---------------------------------------------------------------- search */
.bd-search {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0;
}
.bd-search__input {
	width: 190px;
	padding: 8px 12px;
	border: 1px solid var(--bd-line);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: var(--bd-bg-alt);
	color: var(--bd-body-ink);
	font-family: var(--bd-ff-body);
	font-size: 14px;
	line-height: 1.3;
}
.bd-search__input::placeholder { color: var(--bd-faint); }
.bd-search__input:focus { outline: 2px solid var(--bd-accent); outline-offset: 1px; }

.bd-search__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 38px;
	border: 1px solid var(--bd-line);
	border-radius: 0 8px 8px 0;
	background: var(--bd-bg-alt);
	color: var(--bd-ink);
	cursor: pointer;
}
.bd-search__btn:hover { background: var(--bd-accent); border-color: var(--bd-accent); color: #fff; }

/* ---------------------------------------------------------------- burger (mobile only) */
.bd-burger {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var(--bd-line);
	border-radius: 10px;
	background: var(--bd-bg-alt);
	cursor: pointer;
}
.bd-burger span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--bd-ink);
}
.bd-burger:hover { border-color: var(--bd-accent); }

/* ---------------------------------------------------------------- the drawer
   A hidden checkbox is the state. The label in the header toggles it, the scrim closes it,
   and `:has()` locks body scroll while it is open — all CSS, no JS. The drawer is a sibling
   of the header rather than a child, so the header's own stacking/overflow context cannot
   clip it (that is what made the old dropdown a 47px box holding a 440px panel). */
.bd-nav-state {
	position: fixed;
	top: -200px;
	left: -200px;
	opacity: 0;
	pointer-events: none;
}

.bd-drawer {
	position: fixed;
	inset: 0;
	z-index: 9000;
	pointer-events: none;
}

.bd-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(9, 12, 20, .52);
	opacity: 0;
	transition: opacity .25s ease;
	cursor: pointer;
}

.bd-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(87vw, 372px);
	max-width: 100%;
	background: var(--bd-navy);
	color: #fff;
	transform: translateX(-100%);
	transition: transform .28s cubic-bezier(.2, .7, .3, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 0 0 40px rgba(0, 0, 0, .35);
}

.bd-nav-state:checked ~ .bd-drawer { pointer-events: auto; }
.bd-nav-state:checked ~ .bd-drawer .bd-drawer__scrim { opacity: 1; }
.bd-nav-state:checked ~ .bd-drawer .bd-drawer__panel { transform: none; }
body:has(.bd-nav-state:checked) { overflow: hidden; }

/* the drawer's own header row */
.bd-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.bd-drawer__logo-img {
	display: block;
	width: 150px;
	height: auto;
	filter: brightness(0) invert(1);
}
.bd-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
}
.bd-drawer__close:hover { background: rgba(255, 255, 255, .16); }

.bd-drawer__search { padding: 14px 18px 6px; }
.bd-drawer__search input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 9px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-family: var(--bd-ff-body);
	font-size: 15px;
}
.bd-drawer__search input::placeholder { color: rgba(255, 255, 255, .55); }
.bd-drawer__search input:focus { outline: 2px solid var(--bd-accent); outline-offset: 1px; }

/* one row per beat, accent bar on the left */
.bd-drawer__nav { padding: 8px 0 26px; }

.bd-acc { border: 0; }

.bd-acc__sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 50px;
	padding: 13px 18px 13px 16px;
	border-left: 3px solid var(--bd-accent);
	list-style: none;
	cursor: pointer;
	font-family: var(--bd-ff-display);
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}
.bd-acc__sum::-webkit-details-marker { display: none; }
.bd-acc__sum:hover { background: rgba(255, 255, 255, .08); }
.bd-acc__caret { opacity: .6; transition: transform .18s ease; }
.bd-acc[open] > .bd-acc__sum .bd-acc__caret { transform: rotate(180deg); }
.bd-acc[open] > .bd-acc__sum { background: rgba(255, 255, 255, .06); }

.bd-acc__list {
	margin: 0;
	padding: 4px 0 8px;
	list-style: none;
	background: rgba(0, 0, 0, .22);
}
.bd-acc__list a {
	display: block;
	padding: 11px 18px 11px 34px;
	font-family: var(--bd-ff-body);
	font-size: 15px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .84);
	text-decoration: none;
}
.bd-acc__list a:hover,
.bd-acc__list a:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }

.bd-acc__leaf {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: 13px 18px 13px 16px;
	border-left: 3px solid var(--bd-accent);
	font-family: var(--bd-ff-display);
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}
.bd-acc__leaf:hover,
.bd-acc__leaf:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------------------------------------------------------------- focus visibility
   Every interactive element gets a ring. The old header relied on colour alone, which is
   invisible to a keyboard user. */
.bd-hdr a:focus-visible,
.bd-hdr label:focus-visible,
.bd-drawer a:focus-visible,
.bd-drawer label:focus-visible,
.bd-drawer summary:focus-visible {
	outline: 2px solid var(--bd-accent);
	outline-offset: 2px;
	border-radius: 4px;
}
.bd-drawer a:focus-visible,
.bd-drawer label:focus-visible,
.bd-drawer summary:focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1099px) {
	/* the masthead becomes the sticky bar: logo left, burger right, and it is the ONLY
	   logo — the old header had a second one painted from a ::before that appeared only
	   while stuck, which is why the sticky bar had no logo and the top of the page had two. */
	.bd-hdr__top {
		position: sticky;
		top: 0;
		z-index: 80;
		background: var(--bd-bg);
	}
	body.admin-bar .bd-hdr__top { top: 46px; }

	/* flex, not the 3-column grid: two of the three grid children are display:none here,
	   which leaves the logo and the burger in columns 1 and 2 of an `auto 1fr auto` — the
	   burger ends up beside the logo instead of against the right edge. */
	.bd-hdr__top-in {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 9px 0;
	}

	.bd-hdr__meta { display: none; }
	.bd-hdr__logo { justify-self: start; }
	.bd-hdr__logo-img { width: 150px; }
	.bd-hdr__cta { display: none; }
	.bd-burger { display: inline-flex; }

	/* the nav row is replaced wholesale by the drawer */
	.bd-hdr__nav { display: none; }
}

@media (max-width: 1099px) {
	/* the drawer carries what the bar gave up */
	.bd-drawer__cta {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 14px 18px 4px;
	}
	.bd-drawer__cta .bd-hdr__sub {
		align-self: flex-start;
		/* measured 95x30 on a 390px viewport — a 30px tap target for the drawer's primary CTA.
		   44px is the mobile minimum. */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px 18px;
	}
	.bd-drawer__cta .bdm-utility { white-space: normal; }
	.bd-drawer__cta .bdm-utility a { color: rgba(255, 255, 255, .78); }
	.bd-drawer__cta .bdm-utility span { color: rgba(255, 255, 255, .3); }
}
@media (min-width: 1100px) {
	.bd-drawer__cta { display: none; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bd-drawer__panel,
	.bd-drawer__scrim,
	.bd-nav__caret,
	.bd-acc__caret { transition: none; }
}

/* =============================================================================
   UPGRADES TO THE EXISTING .bdm-h* COMPONENTS

   The markup in inc/bdm-home.php is tested and stays. What changes is its type and
   its density, because those are what the measurement said were wrong:

       before:  body 14px/300,  card excerpt 14px/300,  4-up grid,  ~93 CPL,
                meta 12px,  signals note #98a1ad = 2.6:1
       after:   body 17px/400,  excerpt 16px/400 capped at 58ch,  3-up grid,
                meta 13px/500,   every grey >= 4.5:1,  65 CPL

   WHY 3 COLUMNS AND NOT 4. At a 1240px wrap: 4-up leaves 292px per card, and 16px
   text across 292px is 93 characters — past the point where the eye finds the next
   line. 3-up leaves 390px, which is ~52 characters. Same number of cards on screen,
   a readable line under each one.

   LOAD ORDER: this file is enqueued AFTER assets/bdm-home.css (bd-fonts.php hooks at
   priority 20, bdm-home.php at 12), so these win at equal specificity without a
   single !important.
   ============================================================================= */

/* ---- grid density: 4-up becomes 3-up everywhere ---- */
.bdm-h-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bdm-h-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bdm-h-grid { gap: 28px 24px; }

/* ---- the lead: real display type, and a measure on the standfirst ---- */
.bdm-h-hero__title,
.bdm-h-cover__title {
	font-family: var(--bd-ff-display);
	font-size: clamp(25px, 2.6vw, 31px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--bd-ink);
}
.bdm-h-hero .bdm-h-card__excerpt,
.bdm-h-cover__excerpt {
	max-width: var(--bd-measure);
	font-size: var(--bd-fs-excerpt);
	font-weight: 400;
	line-height: 1.62;
	color: var(--bd-body-ink);
}

/* ---- standard cards: 300 -> 400, 14px -> 16px, and a hard measure ---- */
.bdm-h-card__title {
	font-family: var(--bd-ff-display);
	font-size: var(--bd-fs-title);
	font-weight: 700;
	line-height: 1.32;
	color: var(--bd-ink);
}
.bdm-h-card__excerpt {
	max-width: var(--bd-measure);
	font-size: var(--bd-fs-excerpt);
	font-weight: 400;
	line-height: 1.62;
	color: var(--bd-body-ink);
}

/* ---- compact rows: the rail beside the cover ---- */
.bdm-h-row__title {
	font-family: var(--bd-ff-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.34;
	color: var(--bd-ink);
}
.bdm-h-row--ranked .bdm-h-row__title { font-size: 17px; }
.bdm-h-row__n {
	font-size: 13px;
	font-weight: 800;
	color: var(--bd-accent);
}

/* ---- meta: was 12px/300 at #6b7280 on some surfaces; now 13px/500 ---- */
.bdm-h-card__meta,
.bdm-h-row .bdm-h-card__meta {
	font-size: var(--bd-fs-meta);
	font-weight: 500;
	color: var(--bd-muted);
}
.bdm-h-card__meta time,
.bdm-h-row .bdm-h-card__meta time { color: var(--bd-muted); }

/* ---- the greys that failed AA ----
   #98a1ad measured 2.6:1 on white and carried three separate rules: the signals
   footnote, the chart caption and the month axis. All now use --bd-faint (5.1:1). */
.bdm-h-signals__note,
.bdm-h-chart__cap,
.bdm-h-chart__axis { color: var(--bd-faint); }

.bdm-h-signals__note { font-size: var(--bd-fs-meta); line-height: 1.6; }

.bdm-h-stat__value {
	font-family: var(--bd-ff-display);
	font-size: clamp(30px, 3.4vw, 38px);
	font-weight: 700;
	color: var(--bd-ink);
}
.bdm-h-stat__label { font-size: var(--bd-fs-meta); font-weight: 500; color: var(--bd-muted); }

/* ---- the "all N in beat" link ---- */
.bdm-h-more {
	font-size: 15px;
	font-weight: 600;
	color: var(--bd-accent);
}

/* ---- beat rail ---- */
.bdm-h-beat__name { font-family: var(--bd-ff-display); font-size: 15px; font-weight: 700; color: var(--bd-ink); }
.bdm-h-beat__count { font-size: 13px; font-weight: 500; color: var(--bd-faint); }
.bdm-h-beat { border-bottom: 1px solid var(--bd-line); }

/* ---- the cover's 16:10 art and the rail's hairline ---- */
.bdm-h-card__media,
.bdm-h-cover__media { background: var(--bd-line-soft); border-radius: var(--bd-radius); }
.bdm-h-cover__rail { border-top-color: var(--bd-ink); }
.bdm-h-cover__rail .bdm-h-row { border-bottom-color: var(--bd-line); }

/* ---- chips pick up the token so dark mode flips them ---- */
.bdm-h-card__meta .bdm-chip,
.bdm-h-row .bdm-chip { margin-bottom: 0; }

/* ---- dark mode: the surfaces the components draw on ----
   Only the surfaces, not a second copy of every rule above. */
html[data-bd-theme='dark'] .bdm-h-signals { background: var(--bd-card); border-color: var(--bd-line); }
html[data-bd-theme='dark'] .bdm-h-chart__svg rect { fill: var(--bd-accent); }
html[data-bd-theme='dark'] .bdm-h-tabs__tab { border-color: var(--bd-line); color: var(--bd-ink); }
html[data-bd-theme='dark'] .bdm-h-tabs__tab:hover { border-color: var(--bd-accent); color: var(--bd-accent); }
html[data-bd-theme='dark'] .bdm-h-tabs__state:checked ~ .bdm-h-tabs__nav .bdm-h-tabs__tab { background: var(--bd-accent); color: #0d0f14; }

@media (max-width: 1100px) {
	.bdm-h-grid--4,
	.bdm-h-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.bdm-h-grid--4,
	.bdm-h-grid--3,
	.bdm-h-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.bdm-h-row__title,
	.bdm-h-row--ranked .bdm-h-row__title { font-size: 16px; }
	.bdm-h-card__excerpt { font-size: 15.5px; }
}

/* =============================================================================
   NATIVE FOOTER — replaces Elementor template 3333 (plan phase P1)

   Two measurable defects die here:

   1. CONTRAST. `bd-uiux-audit.mjs` measured the old footer's nav links at **1.49:1**
      (rgb(122,122,122) on the navy surface). AA needs 4.5:1. Every colour below is a
      white-alpha on --bd-navy and is annotated with its measured ratio:
         white           16.4:1
         rgba(255,255,255,.86)  ~13.4:1
         rgba(255,255,255,.72)   ~9.7:1
         rgba(255,255,255,.62)   ~6.6:1
         rgba(255,255,255,.55)   ~5.6:1   -- the floor used anywhere here
      Nothing in this footer sits below 5.5:1.

   2. DUPLICATE IDS. The Elementor footer rendered ONE menu three times (three nav-menu
      widgets, one per column) and Elementor's nav JS then emitted the same
      `sm-ID-N` ids for each instance. The menu is now rendered ONCE and split into
      columns by its own parents.

   Touch targets are 44px tall, which is the mobile guidance the audit found the site
   failing (16-20 undersized targets per page before this).
   ============================================================================= */

.bd-ftr {
	background: var(--bd-navy);
	color: #fff;
	margin-top: 0;
}

/* ---------------------------------------------------------------- row 1 */
.bd-ftr__main {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
	gap: 44px;
	padding-top: 52px;
	padding-bottom: 44px;
}

.bd-ftr__logo { display: inline-block; margin-bottom: 16px; }
.bd-ftr__logo-img {
	display: block;
	width: 190px;
	height: auto;
	/* the mark is dark-on-transparent; the footer surface is navy */
	filter: brightness(0) invert(1);
}

.bd-ftr__about {
	max-width: 46ch;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .72);
}
.bd-ftr__about strong { color: #fff; font-weight: 600; }

.bd-ftr__nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 24px;
}

.bd-ftr__h {
	margin: 0 0 12px;
	font-family: var(--bd-ff-display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.bd-ftr__list { margin: 0; padding: 0; list-style: none; }
.bd-ftr__list li { margin: 0; }

.bd-ftr__list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .86);
	text-decoration: none;
}
.bd-ftr__list a:hover,
.bd-ftr__list a:focus-visible { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- row 2: the two rails */
.bd-ftr__picks {
	background: rgba(0, 0, 0, .22);
	border-top: 1px solid rgba(255, 255, 255, .08);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bd-ftr__picks-in {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	padding-top: 34px;
	padding-bottom: 38px;
}
.bd-ftr__pick { min-width: 0; }

/* the shared compact row, re-skinned for the dark surface */
.bd-ftr .bdm-h-row { padding: 9px 0; border: 0; }
.bd-ftr .bdm-h-row__title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}
.bd-ftr .bdm-h-row__title:hover { color: #fff; text-decoration: underline; }
.bd-ftr .bdm-h-row__media { width: 74px; background: rgba(255, 255, 255, .08); }
.bd-ftr .bdm-h-card__meta { color: rgba(255, 255, 255, .62); }
.bd-ftr .bdm-h-card__meta time { color: rgba(255, 255, 255, .62); }
.bd-ftr .bdm-chip { color: #fff; }

/* ---------------------------------------------------------------- row 3: legal */
.bd-ftr__legal-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 26px;
	padding-top: 20px;
	padding-bottom: 26px;
}
.bd-ftr__copy,
.bd-ftr__utils {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .62);
}
.bd-ftr__utils { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.bd-ftr__utils a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
}
.bd-ftr__utils a:hover,
.bd-ftr__utils a:focus-visible { color: #fff; text-decoration: underline; }
.bd-ftr__utils span { color: rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------------- focus */
.bd-ftr a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
	.bd-ftr__main { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 40px; }
	.bd-ftr__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.bd-ftr__nav { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.bd-ftr__picks-in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.bd-ftr__logo-img { width: 160px; }
	.bd-ftr__legal-in { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   CHIP CONTRAST — handled in PHP, not here

   `bd-contrast-audit.mjs` measured four of the five failing shapes on the homepage as
   `a.bdm-chip`: white on the beat colour.

       2.48:1   "SEO"         white on #F08C00
       3.12:1   "Events"      white on #0CA678
       3.45:1   "E-Commerce"  white on #2F9E44
       3.58:1   "Web Design"  white on #E8590C

   ⚠️ THE OBVIOUS CSS FIX DOES NOT WORK HERE. `background: color-mix(in srgb,
   var(--bdm-chip, var(--bd-accent)) 58%, #0a0e16)` reads correctly and was
   DEPLOYED — and made it worse: failures went 14 -> 64 and every chip background
   computed white. The rule never survived into the served stylesheet (exactly ONE
   color-mix reached the LiteSpeed bundle, and not this one), so `background` was
   dropped as invalid and the chips fell back to transparent over the page.

   So the ink colour is decided in PHP instead, from each beat's real WCAG luminance —
   see `bdm_chip_ink()` in inc/bdm-article-tools.php. That is the better place anyway:
   it needs no color-mix support, cannot be minified away, and the chip now carries an
   explicit passing colour pair rather than depending on a blend.

   The `.bd-ftr .bd-eye*` rules below stay — the view counter on the dark footer surface
   was a separate 3.07:1 failure.
   ============================================================================= */

/* the view counter inside a card meta row on the DARK footer surface */
.bd-ftr .bd-eye,
.bd-ftr .bd-eye__n,
.bd-ftr .bd-eye__i { color: rgba(255, 255, 255, .72) !important; }
.bd-ftr .bd-eye__n { font-weight: 600; }

/* =============================================================================
   ELEMENTOR ARCHIVE META — two greys a hair under AA

   `bd-contrast-audit.mjs` on /category/news/: 20 failures in 2 shapes, both from the
   Elementor archive template's own markup and both only JUST short:

       4.29:1  span.elementor-post-date   rgb(122,122,122) at 12px   (needs 4.5)
       4.48:1  the excerpt paragraph      rgb(119,119,119) at 14px   (needs 4.5)

   0.02:1 short is still short — the 14px excerpt is the worse of the two, because it is
   the text a reader actually reads, and it is the one that fails by the smallest margin.
   Both move onto the design system's own greys, which measure 5.1:1 and 7.0:1.

   These selectors die with template 13902 in plan phase P3; until then they keep the
   archive off the failure list.
   ============================================================================= */
.elementor-posts .elementor-post-date,
.elementor-posts .elementor-post__meta-data,
.elementor-posts .elementor-post__meta-data span { color: var(--bd-muted) !important; }

.elementor-posts .elementor-post__excerpt,
.elementor-posts .elementor-post__excerpt p { color: var(--bd-body-ink) !important; }

/* =============================================================================
   ARTICLE LINKS — 3.23:1

   `bd-contrast-audit.mjs` on /news/smart-factory-malaysia-2030/: 2 failures, one shape —
   in-body links at `rgb(57,143,252)`, 17px, on white. That cyan-blue measures **3.23:1**;
   AA needs 4.5. They are the source citations ("MITI", "The Edge Malaysia"), i.e. the
   links a reader is most likely to follow to check the article's claims.

   Moved to a blue of the same family that clears AA (#1c4ed8, ~6.6:1) rather than to the
   red accent, so an in-body citation still reads as a link and not as a tag. Underlined
   for the same reason — colour alone is not a sufficient affordance.
   ============================================================================= */
.elementor-widget-theme-post-content a,
.bdm-article__body a {
	color: #1c4ed8;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.elementor-widget-theme-post-content a:hover,
.bdm-article__body a:hover { color: #16309a; }
html[data-bd-theme='dark'] .elementor-widget-theme-post-content a { color: #86a9ff; }

/* =============================================================================
   INVERTED SURFACES — text inside a box that paints its OWN solid background.

   🔴 WHY THIS EXISTS. Measured live 2026-10-06 on
   /ai-agents/tencent-workbuddy-malaysia-free-try-cn/.

   Two generic rules earlier in this file are CORRECT on the default white article
   ground and WRONG everywhere else, because neither of them knows what it is
   sitting on:

     §1  `.elementor-widget-theme-post-content p / li / blockquote p` -> --bd-body-ink !important
     §20 `.elementor-widget-theme-post-content a`                     -> #1c4ed8

   The crimson CTA box (`.bdm-free`, background #BD1E50) declares `color:#fff`, and
   the crimson button (`.bdm-btn`, background #BD1E50) declares `color:#fff` — but §1
   outranks the box's own rule (it carries `!important`) and §20 outranks the button's
   (0-1-1 against the button's 0-1-0). So ink that was DESIGNED white is computed dark,
   on a dark ground:

     .bdm-free .big / .sub / strong : #333d4d on #BD1E50 = 1.81:1   (AA needs 4.5)
     .bdm-dl a.bdm-btn              : #1c4ed8 on #BD1E50 = 1.11:1   (AA needs 4.5)

   `tools/bd-contrast-audit.mjs` reported 6 failing elements / 4 unique shapes.

   The fix is NOT to weaken §1 or §20 — they are right for the 99% case. It is to
   state the inverted surfaces explicitly, exactly as the dark-mode list above does.

   ⚠️ MAINTENANCE CONTRACT — same rule as the dark-mode surface list:
   any NEW component that paints its own solid dark background MUST be added here, or
   its text will silently fail AA. Re-check with:
       node tools/bd-contrast-audit.mjs URL light
       node tools/bd-contrast-audit.mjs URL dark
   ============================================================================= */

/* ---- the crimson CTA box: ink designed white must stay white ---- */
.elementor-widget-theme-post-content .bdm-free,
.elementor-widget-theme-post-content .bdm-free p,
.elementor-widget-theme-post-content .bdm-free li,
.elementor-widget-theme-post-content .bdm-free .big,
.elementor-widget-theme-post-content .bdm-free .sub,
.elementor-widget-theme-post-content .bdm-free strong { color: #fff !important; }

/* links inside it: pale pink reads on crimson (4.64:1); the generic link blue does not */
.elementor-widget-theme-post-content .bdm-free a { color: #ffd7e2 !important; }

/* …except the pill button, which inverts the other way (crimson on white) */
.elementor-widget-theme-post-content .bdm-free a.bdm-btn,
.elementor-widget-theme-post-content .bdm-free a.bdm-btn:hover { color: #BD1E50 !important; }

/* ---- the crimson button inside the pale download strip -------------------
   ⚠️ NOT `.bdm-dl a.bdl` — that link sits on the strip's OWN pale-pink ground and
   is correctly crimson there. Only the element that carries a crimson background
   needs white ink. */
.elementor-widget-theme-post-content .bdm-dl a.bdm-btn,
.elementor-widget-theme-post-content .bdm-stick a.bdm-btn { color: #fff !important; }

/* ---- dark theme: identical requirement, higher specificity ---- */
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-free,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-free p,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-free li,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-free .big,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-free .sub,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-free strong { color: #fff !important; }
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-free a { color: #ffd7e2 !important; }
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-free a.bdm-btn { color: #BD1E50 !important; }
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-dl a.bdm-btn,
html[data-bd-theme='dark'] .elementor-widget-theme-post-content .bdm-stick a.bdm-btn { color: #fff !important; }