/**
 * Hub widgets styling. Consumes the --mdcs-*/--text-*/--surface-*/--shadow-*
 * tokens already loaded site-wide on metrologicdcs.com (see
 * home-page-template.md memory) — this file defines zero new colors.
 */

.mdcs-hub-filters {
	display: flex;
	flex-direction: column; /* each .mdcs-hub-filter-row always its own line — never competes for horizontal space with the next row */
	gap: 20px;
	padding-bottom: 20px;
	margin-bottom: 0; /* glued to the grid below — the border-bottom is the only separator, no dead margin */
	border-bottom: 1px solid var(--border-subtle, #C8D0DC);
}

.mdcs-hub-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
    margin-bottom: 25px;
}

.mdcs-hub-filter-group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.mdcs-hub-filter-divider {
	width: 1px;
	height: 22px;
	background: var(--border-subtle, #C8D0DC);
	margin: 0 4px;
	flex-shrink: 0;
}

.mdcs-hub-chip {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: var(--radius-button, 6px);
	cursor: pointer;
	background: var(--surface-card, #fff);
	color: var(--text-heading, #142674);
	border: 1px solid var(--border-subtle, #C8D0DC);
	transition: background var(--motion-fast, 120ms) var(--ease-standard, ease);
}

.mdcs-hub-chip.is-active {
	background: var(--action-primary-bg, #142674);
	color: var(--action-primary-fg, #fff);
	border-color: var(--action-primary-bg, #142674);
}

.mdcs-hub-grid {
	--mdcs-hub-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--mdcs-hub-cols), 1fr);
	gap: 32px 18px; /* row-gap column-gap — rows need more breathing room than columns, cf. Brand Toolkit screenshot */
	align-items: stretch; /* hub.js sets an explicit per-row height on each card; stretch lets that height fill the row cleanly */
}

@media (max-width: 900px) {
	.mdcs-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.mdcs-hub-grid { grid-template-columns: 1fr; gap: 16px; } /* single column — matches hub.js's row-height floor */
}

.mdcs-hub-card {
	position: relative; /* anchors .mdcs-hub-pin, which sits as a sibling of .mdcs-hub-card__link, not nested inside its <a> */
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-subtle, #C8D0DC);
	border-radius: var(--radius-sm, 8px);
	box-shadow: var(--shadow-card, 0 1px 2px rgba(20,38,116,.06), 0 8px 24px rgba(20,38,116,.08));
	transition: transform var(--motion-base, 200ms) var(--ease-standard, ease), box-shadow var(--motion-base, 200ms) var(--ease-standard, ease);
}
.mdcs-hub-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover, 0 2px 4px rgba(20,38,116,.08), 0 16px 40px rgba(20,38,116,.14));
}

/* Pin/save toggle — icon-only on a card (absolute, top-right corner, deliberately
   quiet — ghost by default, only the fill icon + hover/saved state carry meaning
   so it doesn't compete with the card's own content-format icon) or the larger
   labeled variant on Hub Item Header (.mdcs-hub-pin--large, inline). top/right
   match .mdcs-hub-card__link's 24px padding so it sits on the same inset as the
   card icon rather than floating at its own offset.

   Scoped under an ancestor class (.mdcs-hub-card .mdcs-hub-pin, 2 classes) rather
   than the bare .mdcs-hub-pin class: the theme's Elementor kit ships
   '.elementor-kit-7 button { background/font/border/padding/border-radius }'
   (class+element = higher specificity than one class on a plain <button>) which
   otherwise silently wins and redraws the kit's bordered button chrome on top of
   this — same issue already fixed on .mdcs-hub-search__submit and
   .mdcs-hub-item-header__cta-btn. Every property the kit rule sets is reset
   here explicitly, not just the ones this button visually needs, so a future
   kit edit can't reintroduce the border/padding through an untouched property. */
.mdcs-hub-card .mdcs-hub-pin {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--text-muted, #858588);
	font-size: 15px;
	line-height: 1;
	letter-spacing: normal;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity var(--motion-fast, 120ms) var(--ease-standard, ease), background var(--motion-fast, 120ms) var(--ease-standard, ease), color var(--motion-fast, 120ms) var(--ease-standard, ease);
}
.mdcs-hub-card .mdcs-hub-pin:hover { opacity: 1; background: var(--surface-alt, #F6F7F7); color: var(--text-heading, #142674); }
.mdcs-hub-card .mdcs-hub-pin.is-saved { opacity: 1; color: var(--action-primary-bg, #142674); }
.mdcs-hub-card .mdcs-hub-pin:disabled { opacity: 0.3; cursor: default; }

/* Tooltip — only on the icon-only card pin (the labeled Hub Item Header
   button already shows "Save"/"Saved" as visible text, a tooltip there would
   just repeat it). data-tooltip is kept in sync with the saved state by
   hub.js on toggle, not just set once at render time. */
.mdcs-hub-card .mdcs-hub-pin[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	white-space: nowrap;
	background: var(--text-heading, #142674);
	color: #fff;
	font-family: 'Inter', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	padding: 5px 9px;
	border-radius: var(--radius-xs, 4px);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--motion-fast, 120ms) var(--ease-standard, ease), transform var(--motion-fast, 120ms) var(--ease-standard, ease);
	z-index: 5;
}
.mdcs-hub-card .mdcs-hub-pin[data-tooltip]:hover::after,
.mdcs-hub-card .mdcs-hub-pin[data-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* No pill/box here, by request — just the icon + label, same quiet treatment as
   the card pin, sized up for the item header's larger action row. Same kit
   `button` override reasoning as above — already 2 classes, which is enough,
   but every kit-touched property is still reset explicitly for the same reason. */
.mdcs-hub-item-header .mdcs-hub-pin--large {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--text-heading, #142674);
	font-family: 'Inter', Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	letter-spacing: normal;
	opacity: 1;
	gap: 8px;
}
.mdcs-hub-item-header .mdcs-hub-pin--large:hover { background: transparent; color: var(--text-heading, #142674); }
.mdcs-hub-item-header .mdcs-hub-pin--large.is-saved { background: transparent; color: var(--action-primary-bg, #142674); }
.mdcs-hub-item-header .mdcs-hub-pin--large i { font-size: 18px; }

.mdcs-hub-card__link {
	display: block;
	padding: 24px;
	text-decoration: none;
	color: inherit;
}

/* Card media — featured image when the post has one, else the content-format
   icon on a primary-blue box. Negative margin cancels .mdcs-hub-card__link's
   own padding so the image bleeds to the card's edges/top corners; the icon
   fallback uses the same box so both variants occupy identical space. */
.mdcs-hub-card__media {
	margin: -24px -24px 20px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
}
.mdcs-hub-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mdcs-hub-card__media--icon {
	background: var(--action-primary-bg, #142674);
}
.mdcs-hub-card__media--icon i {
	font-size: 32px;
	color: var(--action-primary-fg, #fff);
}

.mdcs-hub-card__title {
	font-family: "Syne", Arial, sans-serif;
	font-size: 20px;
	line-height: 1.3;
	color: var(--text-heading, #142674);
	margin: 14px 0 0;
}

.mdcs-hub-card__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-body, #3b3f44);
	margin: 8px 0 0;
}

.mdcs-hub-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-muted, #858588);
}

.mdcs-hub-empty {
	padding: 32px;
	border: 1px dashed var(--border-subtle, #C8D0DC);
	border-radius: var(--radius-sm, 8px);
	text-align: center;
	color: var(--text-body, #3b3f44);
	grid-column: 1 / -1;
}

/* Hub Spaces Overview — one <section> per space, rendered by the widget itself */
.mdcs-hub-space { padding: 64px 0; }
.mdcs-hub-space__inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.mdcs-hub-space__title {
	font-family: "Syne", Arial, sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: var(--text-heading, #142674);
	margin: 0;
}
.mdcs-hub-space__lead {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-body, #3b3f44);
	max-width: 640px;
	margin: 8px 0 0;
}
.mdcs-hub-space .mdcs-hub-grid { margin-top: 32px; }

@media (max-width: 600px) {
	.mdcs-hub-space { padding: 40px 0; }
	.mdcs-hub-space__inner { padding: 0 20px; }
	.mdcs-hub-space__title { font-size: 24px; }
	.mdcs-hub-space .mdcs-hub-grid { margin-top: 24px; }
	.mdcs-hub-card__link { padding: 20px; }
	.mdcs-hub-card__media { margin: -20px -20px 16px; height: 120px; }
}

/* Hub Archive Header — category/sub-category archive: breadcrumb + icon + title + desc */
.mdcs-hub-archive-header__crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted, #858588);
}
.mdcs-hub-archive-header__crumb a {
	color: var(--text-heading, #142674);
	text-decoration: none;
}
.mdcs-hub-archive-header__crumb-current { color: var(--text-heading, #142674); }
.mdcs-hub-archive-header__row {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 24px;
}
.mdcs-hub-archive-header__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm, 8px);
	background: var(--action-primary-bg, #142674);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 28px;
}
.mdcs-hub-archive-header__title {
	font-family: "Syne", Arial, sans-serif;
	font-size: 36px;
	line-height: 1.1;
	color: var(--text-heading, #142674);
	margin: 0;
}
.mdcs-hub-archive-header__desc {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-body, #3b3f44);
	max-width: 720px;
	margin: 8px 0 0;
}

/* Hub Subcategories */
.mdcs-hub-subcategories { margin-bottom: 32px; }
.mdcs-hub-subcategories__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted, #858588);
	margin-bottom: 16px;
}

/* Hub Search — two separate elements (white field + outlined button), matching
   the maquette's hero row (Sales Hub v2.dc.html: field div + <Button variant="onDark">
   side by side with a gap), not one single bar with the button melted inside it. */
.mdcs-hub-search__form {
	display: flex;
	align-items: stretch;
	gap: 10px;
}
.mdcs-hub-search__field {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--surface-card, #fff);
	border-radius: var(--radius-button, 6px);
	padding: 0 18px;
}
.mdcs-hub-search__field i { color: var(--text-muted, #858588); }
/* Scoped under .mdcs-hub-search (two classes), same reason as the submit button
   below: a generic `input[type="text"]` reset elsewhere on the site outspecifies
   a single class (element+attribute selectors count the same as a class, and
   theirs has more of them) and was silently winning — border, padding, the lot.
   Needed an explicit :focus variant too — the same reset has its own :focus rule
   (outline + outline-offset) that otherwise overflows the rounded field above/below. */
.mdcs-hub-search .mdcs-hub-search__input,
.mdcs-hub-search .mdcs-hub-search__input:focus {
	flex: 1;
	border: none;
	outline: none;
	box-shadow: none;
	background: transparent;
	font-size: 16px;
	padding: 16px 0;
	padding-right: 28px; /* room for .mdcs-hub-search__spinner */
	color: var(--text-body, #3b3f44);
}
/* Scoped under .mdcs-hub-search (two classes) rather than the bare class alone:
   the theme's Elementor kit ships '.elementor-kit-7 button { background/color/border }'
   (class+element = higher specificity than one class) which otherwise silently wins
   over a single-class rule on a plain <button>, no !important involved either side. */
.mdcs-hub-search .mdcs-hub-search__submit {
	flex-shrink: 0;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: var(--radius-button, 6px);
	padding: 0 24px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}
.mdcs-hub-search .mdcs-hub-search__submit:hover { background: rgba(255,255,255,0.08); }
.mdcs-hub-search__results { margin-top: 28px; }

/* Hub Search — live typeahead dropdown. Positioned against .mdcs-hub-search__bar
   (form + dropdown only), NOT the outer .mdcs-hub-search — that also contains the
   always-present .mdcs-hub-search__results (margin-top:28px even when empty),
   which inflated the container's height and pushed `top:100%` way past the form. */
.mdcs-hub-search__bar { position: relative; }
.mdcs-hub-search__suggest {
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-subtle, #C8D0DC);
	border-radius: var(--radius-sm, 8px);
	box-shadow: var(--shadow-card-hover, 0 2px 4px rgba(20,38,116,.08), 0 16px 40px rgba(20,38,116,.14));
	max-height: 360px;
	overflow-y: auto;
}
/* Inline spinner, right-aligned inside the field (not the dropdown) — gray,
   same spot the magnifying-glass icon occupies on the left. Toggled via
   .is-visible in hub.js while a suggest fetch is in flight. */
.mdcs-hub-search__spinner {
	display: none;
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	color: var(--text-muted, #858588);
}
.mdcs-hub-search__spinner.is-visible {
	display: block;
	animation: mdcs-hub-spin 0.7s linear infinite;
}
@keyframes mdcs-hub-spin {
	to { transform: translateY(-50%) rotate(360deg); }
}
.mdcs-hub-search__suggest-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	text-decoration: none;
	color: inherit;
	border-top: 1px solid var(--border-subtle, #ECEEEE);
}
.mdcs-hub-search__suggest-item:first-child { border-top: none; }
.mdcs-hub-search__suggest-item:hover,
.mdcs-hub-search__suggest-item.is-active { background: var(--surface-alt, #F6F7F7); }
.mdcs-hub-search__suggest-item i { font-size: 18px; color: var(--text-heading, #142674); flex-shrink: 0; }
.mdcs-hub-search__suggest-title { flex: 1; font-weight: 600; color: var(--text-heading, #142674); }
.mdcs-hub-search__suggest-type { font-size: 11.5px; font-weight: 600; color: var(--text-muted, #858588); }
.mdcs-hub-search__suggest-empty { padding: 14px 18px; font-size: 13.5px; color: var(--text-muted, #858588); }

/* Hub Files */
.mdcs-hub-files__list {
	border: 1px solid var(--border-subtle, #C8D0DC);
	border-radius: var(--radius-sm, 8px);
	overflow: hidden;
}
.mdcs-hub-files__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	text-decoration: none;
	color: inherit;
	border-top: 1px solid var(--border-subtle, #ECEEEE);
	transition: background var(--motion-fast, 120ms) var(--ease-standard, ease);
}
.mdcs-hub-files__row:first-child { border-top: none; }
.mdcs-hub-files__row:hover { background: var(--surface-alt, #F6F7F7); }
.mdcs-hub-files__row i:first-child { font-size: 22px; color: var(--text-heading, #142674); }
.mdcs-hub-files__row-label { flex: 1; font-weight: 600; color: var(--text-heading, #142674); }
.mdcs-hub-files__row-meta { font-size: 12.5px; color: var(--text-muted, #858588); }
.mdcs-hub-files__row-lang {
	font-size: 11px;
	font-weight: 600;
	border: 1px solid var(--border-subtle, #C8D0DC);
	background: var(--surface-alt, #F6F7F7);
	padding: 3px 8px;
	border-radius: var(--radius-xs, 4px);
}

/* Hub Item Header — single resource: breadcrumb + icon + badges + title + desc + CTA */
.mdcs-hub-item-header__crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted, #858588);
	flex-wrap: wrap;
}
.mdcs-hub-item-header__crumb a { color: var(--text-heading, #142674); text-decoration: none; }
.mdcs-hub-item-header__crumb-current { color: var(--text-heading, #142674); }
.mdcs-hub-item-header__row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-top: 26px;
	flex-wrap: wrap;
}
.mdcs-hub-item-header__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm, 8px);
	background: var(--action-primary-bg, #142674);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 28px;
}
.mdcs-hub-item-header__main { flex: 1 1 480px; min-width: 0; }
.mdcs-hub-item-header__actions { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.mdcs-hub-item-header__badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mdcs-hub-item-header__badge {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-heading, #142674);
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-subtle, #C8D0DC);
	padding: 4px 10px;
	border-radius: var(--radius-xs, 4px);
}
.mdcs-hub-item-header__title {
	font-family: "Syne", Arial, sans-serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.12;
	color: var(--text-heading, #142674);
	margin: 14px 0 0;
}
.mdcs-hub-item-header__desc {
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-body, #3b3f44);
	max-width: 680px;
	margin: 10px 0 0;
}
/* Scoped under the wrapper class (2 classes) rather than the bare button class:
   the theme's Elementor kit ships '.elementor-kit-7 a { color: ... }' (class+element,
   higher specificity than a single class on the <a>) which otherwise silently wins
   over color:#fff here — same issue already fixed on .mdcs-hub-search__submit. */
.mdcs-hub-item-header .mdcs-hub-item-header__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 22px;
	background: var(--action-primary-bg, #142674);
	color: #FFFFFF;
	border: 1px solid var(--action-primary-bg, #142674);
	border-radius: var(--radius-button, 6px);
	font-family: 'Inter', Arial, sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.mdcs-hub-item-header .mdcs-hub-item-header__cta-btn:hover,
.mdcs-hub-item-header .mdcs-hub-item-header__cta-btn:visited,
.mdcs-hub-item-header .mdcs-hub-item-header__cta-btn:focus {
	color: #FFFFFF;
}
.mdcs-hub-item-header .mdcs-hub-item-header__cta-btn i { font-size: 15px; }

/* Item template body — native Elementor Pro "Post Content" widget (theme-post-content),
   Syne semibold for headings / Inter for paragraphs, matching the rest of the Hub. */
.mdcs-hub-item-body h1,
.mdcs-hub-item-body h2,
.mdcs-hub-item-body h3,
.mdcs-hub-item-body h4 {
	font-family: "Syne", Arial, sans-serif;
	font-weight: 600;
	color: var(--text-heading, #142674);
	line-height: 1.25;
}
.mdcs-hub-item-body p,
.mdcs-hub-item-body li {
	font-family: "Inter", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-body, #3b3f44);
}

/* Hub Files */
.mdcs-hub-files__title { font-family: "Syne", Arial, sans-serif; font-weight: 600; font-size: 26px; color: var(--text-heading, #142674); margin: 0; }
.mdcs-hub-files__divider { width: 30px; height: 3px; background: var(--accent-gold, #F1B33E); margin-top: 10px; }
.mdcs-hub-files__list { margin-top: 18px; }

/* Hub Related — same card grid as Hub Grid/Hub Subcategories, own heading */
.mdcs-hub-related { margin-top: 44px; }
.mdcs-hub-related__title { font-family: "Syne", Arial, sans-serif; font-weight: 600; font-size: 26px; color: var(--text-heading, #142674); margin: 0; }
.mdcs-hub-related__divider { width: 30px; height: 3px; background: var(--accent-gold, #F1B33E); margin-top: 10px; }
.mdcs-hub-related__grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

/* Hub Item Meta — single resource sidebar */
.mdcs-hub-item-meta {
	background: var(--surface-alt, #F6F7F7);
	border: 1px solid var(--border-subtle, #C8D0DC);
	border-radius: var(--radius-sm, 8px);
	padding: 24px;
}
.mdcs-hub-item-meta__row + .mdcs-hub-item-meta__row { margin-top: 18px; }
.mdcs-hub-item-meta__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted, #858588);
}
.mdcs-hub-item-meta__values { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mdcs-hub-item-meta__pill {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-heading, #142674);
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-subtle, #C8D0DC);
	padding: 4px 9px;
	border-radius: var(--radius-xs, 4px);
}
.mdcs-hub-item-meta__note {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--border-subtle, #C8D0DC);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--text-muted, #858588);
}

/* Hub TOC — single resource sidebar, auto-built from the Post Content H2/H3
   outline (see widget-hub-toc.php + hub.js initToc). The widget wrapper and
   its Elementor container are forced to 100% height so they inherit the
   sidebar column's full stretched height (flex align-items:stretch cascades
   from the row down to this single child column); without that, both
   wrappers default to auto/content height and the sticky element below would
   have no extra room to travel, stopping immediately instead of tracking
   down to the column's actual bottom (i.e. the end of the main content). */
.elementor-widget-mdcs-hub-toc,
.elementor-widget-mdcs-hub-toc > .elementor-widget-container {
	height: 100%;
}
.mdcs-hub-toc {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: var(--surface-alt, #F6F7F7);
	border: 1px solid var(--border-subtle, #C8D0DC);
	border-radius: var(--radius-sm, 8px);
	padding: 20px;
}
.mdcs-hub-toc__list,
.mdcs-hub-toc__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mdcs-hub-toc__list ul {
	margin-top: 4px;
	margin-left: 14px;
}
.mdcs-hub-toc__item + .mdcs-hub-toc__item {
	margin-top: 4px;
}
.mdcs-hub-toc__link {
	display: block;
	padding: 6px 10px;
	border-radius: var(--radius-xs, 4px);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--text-body, #3b3f44);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: color var(--motion-fast, 120ms) var(--ease-standard, ease), background var(--motion-fast, 120ms) var(--ease-standard, ease), border-color var(--motion-fast, 120ms) var(--ease-standard, ease);
}
.mdcs-hub-toc__list ul .mdcs-hub-toc__link {
	font-size: 13px;
	color: var(--text-muted, #858588);
}
.mdcs-hub-toc__link:hover {
	background: var(--surface-card, #fff);
	color: var(--text-heading, #142674);
}
.mdcs-hub-toc__link.is-active {
	background: var(--surface-card, #fff);
	color: var(--text-heading, #142674);
	border-left-color: var(--action-primary-bg, #142674);
	font-weight: 600;
}

/* Hub External Resources (Hub Media) — N rows, each an embed, a native video
   player or an "Open" box depending on link_type (see widget-hub-media.php). */
.mdcs-hub-media { margin-top: 36px; }
.mdcs-hub-media__title { font-family: "Syne", Arial, sans-serif; font-weight: 600; font-size: 26px; color: var(--text-heading, #142674); margin: 0; }
.mdcs-hub-media__divider { width: 30px; height: 3px; background: var(--accent-gold, #F1B33E); margin-top: 10px; }
.mdcs-hub-media__list { margin-top: 18px; display: flex; flex-direction: column; gap: 20px; }

.mdcs-hub-media__embed { position: relative; aspect-ratio: 16/9; }
.mdcs-hub-media__embed iframe,
.mdcs-hub-media__embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius-sm, 8px);
	background: #000;
}

.mdcs-hub-media__link {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border: 1px solid var(--border-subtle, #C8D0DC);
	border-radius: var(--radius-sm, 8px);
	padding: 22px;
}
.mdcs-hub-media__link i { font-size: 26px; color: var(--text-heading, #142674); flex-shrink: 0; }
.mdcs-hub-media__link-text { flex: 1; min-width: 200px; }
.mdcs-hub-media__link-label { font-size: 15px; font-weight: 600; color: var(--text-heading, #142674); }
.mdcs-hub-media__hint { font-size: 13px; color: var(--text-muted, #858588); margin: 3px 0 0; }
.mdcs-hub-media .mdcs-hub-media__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 36px;
	padding: 0 18px;
	font-weight: 600;
	font-size: 14px;
	color: var(--text-heading, #142674);
	text-decoration: none;
	border: 1px solid var(--border-subtle, #C8D0DC);
	border-radius: var(--radius-button, 6px);
}

.mdcs-hub-media__caption { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted, #858588); margin-top: 8px; }
.mdcs-hub-media__lang {
	font-size: 11px;
	font-weight: 600;
	border: 1px solid var(--border-subtle, #C8D0DC);
	background: var(--surface-alt, #F6F7F7);
	padding: 3px 8px;
	border-radius: var(--radius-xs, 4px);
}


.mdcs-hub-card .ph {
	font-size: 2rem;
}