/**
 * Widget - Blog Sidebar (DLS-119)
 *
 * Styling lifted from the current hand-built sidebar on the live blog posts
 * (measured off post 24135's generated Elementor CSS), so the rebuilt widget
 * renders identically. This is a bug fix and architecture cleanup, not a
 * redesign — do not "improve" these values without a design decision.
 *
 * Colours come from the Elementor kit's global palette so the sidebar follows
 * the site if the palette changes, with the current hex as a fallback:
 *   accent  #E47B3A  icon circles, card label
 *   primary #3D264F  card button background
 *
 * THE STICKY FIX
 * The old sidebar stacked five individually-sticky Elementor widgets with
 * hand-calculated pixel offsets (100/208/281/317/500), which is why it broke
 * with more than two cards. This replaces all of that with one `position:
 * sticky` rule on a single wrapper: it needs no offset maths and naturally stops
 * at the bottom of its parent column. Kept desktop-only to match the original
 * `sticky_on: desktop` setting.
 */

/* ------------------------------------------------------------------ *
 * Sticky — the Related Content block only (DLS-119 requirement)
 *
 * Per the Jira ticket only the Related Content block travels: the share icons
 * scroll away with the page, and the cards follow the reader and release at the
 * bottom of the column.
 *
 * WHY THE display:contents RULE EXISTS
 * A sticky element can only travel within its containing block. Elementor nests
 * widget output two boxes deep (.elementor-element > .elementor-widget-container
 * > our div), and each of those is only as tall as its contents — so sticking
 * the Related Content block inside them would let it move by the height of the
 * share icons above it and no further. Collapsing those three boxes with
 * display:contents promotes the blocks to children of .elementor-widget-wrap,
 * which stretches to the full column height. The cards then travel the whole
 * column and stop at its bottom edge on their own, with no offset maths — which
 * is the point of replacing the old five-offset approach.
 *
 * Frontend only: inside the Elementor editor these boxes must keep their own
 * layout or the widget cannot be selected or dragged.
 *
 * Desktop only, matching the original `sticky_on: desktop` setting. 1025px is
 * Elementor's desktop breakpoint.
 * ------------------------------------------------------------------ */
@media ( min-width: 1025px ) {

	body:not( .elementor-editor-active ) .supreme-blog-sidebar--is-sticky,
	body:not( .elementor-editor-active ) .supreme-blog-sidebar--is-sticky > .elementor-widget-container,
	body:not( .elementor-editor-active ) .supreme-blog-sidebar--is-sticky > .elementor-widget-container > .supreme-blog-sidebar {
		display: contents;
	}

	/* Promoted to flex items of .elementor-widget-wrap, which expects each child
	   to claim a full row of its own. */
	body:not( .elementor-editor-active ) .supreme-blog-sidebar--is-sticky .supreme-blog-sidebar__share,
	body:not( .elementor-editor-active ) .supreme-blog-sidebar--is-sticky .supreme-blog-sidebar__related,
	body:not( .elementor-editor-active ) .supreme-blog-sidebar--is-sticky .supreme-blog-sidebar__categories {
		flex: 0 0 100%;
		max-width: 100%;
	}

	body:not( .elementor-editor-active ) .supreme-blog-sidebar--is-sticky .supreme-blog-sidebar__related {
		position: sticky;
		top: var( --supreme-blog-sidebar-top, 110px );
		align-self: flex-start;
	}
}

/* ------------------------------------------------------------------ *
 * Social share
 * ------------------------------------------------------------------ */

.supreme-blog-sidebar__share {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.supreme-blog-sidebar__share-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 46x45 circle, 21px glyph — matches the ElementsKit icons being replaced.
 *
 * Doubled-up class selectors here are deliberate. The Elementor kit ships
 * `.elementor-kit-6 a { color: #000000 }`, which outranks a single class, so the
 * LinkedIn and X anchors inherited black while the copy-link <button> stayed
 * white. Two classes beat it, and the SVG fill is set explicitly rather than
 * relying on currentColor so the glyphs cannot be recoloured the same way. */
.supreme-blog-sidebar__share .supreme-blog-sidebar__share-link,
.supreme-blog-sidebar__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 45px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var( --e-global-color-accent, #E47B3A );
	color: #FFFFFF;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

.supreme-blog-sidebar__share .supreme-blog-sidebar__share-link:hover,
.supreme-blog-sidebar__share .supreme-blog-sidebar__share-link:focus-visible {
	background-color: #FFFFFF;
	color: #000000;
}

.supreme-blog-sidebar__share .supreme-blog-sidebar__share-link svg {
	width: 21px;
	height: 21px;
	fill: #FFFFFF;
}

.supreme-blog-sidebar__share .supreme-blog-sidebar__share-link:hover svg,
.supreme-blog-sidebar__share .supreme-blog-sidebar__share-link:focus-visible svg {
	fill: #000000;
}

/* ------------------------------------------------------------------ *
 * Related content
 * ------------------------------------------------------------------ */

/* 47px clear of the share icons above. Holds in both layouts: as a normal block
   there is no margin above to collapse with, and when sticky is active the
   blocks are flex items, where margins never collapse. */
.supreme-blog-sidebar__related {
	margin-top: 47px;
}

/* The 10px below the heading and the card's own 10px top margin are adjacent
   block siblings, so they collapse to a single 10px gap rather than stacking. */
.supreme-blog-sidebar__related-heading {
	margin: 0 0 10px;
	font-family: "Lato", sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: #0c0c0c;
}

.supreme-blog-sidebar__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 20px 0;
	background-color: #FFFFFF;
	box-shadow: 0 0 10px 0 rgba( 0, 0, 0, 0.5 );
}

/* A card with no image is one column, so it leaves no empty half. */
.supreme-blog-sidebar__card--no-media {
	grid-template-columns: 1fr;
}

/* 10px cell padding reproduces Elementor's default column gap. */
.supreme-blog-sidebar__card-media,
.supreme-blog-sidebar__card-body {
	padding: 10px;
}

.supreme-blog-sidebar__card-media img {
	display: block;
	width: 100%;
	height: auto;
}

.supreme-blog-sidebar__card-label {
	margin: 0;
	padding-bottom: 10px;
	font-family: "Lato", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	color: var( --e-global-color-accent, #E47B3A );
}

.supreme-blog-sidebar__card-title {
	margin: 0;
	font-family: "Lato", sans-serif;
	font-size: 19px;
	font-weight: 600;
}

/* Rides on .elementor-button so the site's own button rules still apply; only
   the per-element overrides from the original card button are repeated here.
   Uppercase is forced because the live buttons read "LEARN MORE" while editors
   type "Learn More" into the ACF field. */
.supreme-blog-sidebar__card-button.elementor-button {
	margin-top: 40px;
	background-color: var( --e-global-color-primary, #3D264F );
	font-family: "Lato", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	fill: #FFFFFF;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Categories menu
 *
 * Typography and colours are taken from the old hidden block (heading Lato
 * 22px/900, items Lato 16px/300, 10px vertical padding, current item #f40045).
 * The list is stacked rather than the original's horizontal layout: that block
 * carried hide flags on every breakpoint, so it had no visible baseline to
 * match, and a stacked list is what a 30%-wide sidebar column can actually fit.
 * ------------------------------------------------------------------ */

.supreme-blog-sidebar__categories {
	margin-top: 70px;
}

.supreme-blog-sidebar__categories-heading {
	margin: 0;
	font-family: "Lato", sans-serif;
	font-size: 22px;
	font-weight: 900;
	color: #0c0c0c;
}

.supreme-blog-sidebar__categories-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.supreme-blog-sidebar__categories-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The menu nests its links under one parent, so sub-levels render inline
   rather than as a hover dropdown. */
.supreme-blog-sidebar__categories-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.supreme-blog-sidebar__categories-menu a {
	display: block;
	padding: 10px 0;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #0c0c0c;
	text-decoration: none;
	transition: color 0.3s;
}

.supreme-blog-sidebar__categories-menu a:hover,
.supreme-blog-sidebar__categories-menu a:focus-visible {
	color: var( --e-global-color-accent, #E47B3A );
}

.supreme-blog-sidebar__categories-menu .current-menu-item > a {
	color: #f40045;
}

/* ------------------------------------------------------------------ *
 * Editor-only placeholder
 * ------------------------------------------------------------------ */

.supreme-blog-sidebar__notice {
	padding: 12px 14px;
	border: 1px dashed #c3c4c7;
	background-color: #f5f5f5;
	font-family: "Lato", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #50575e;
}

/* ------------------------------------------------------------------ *
 * 1024px and below — share icons sit in a row, aligned left.
 * ------------------------------------------------------------------ */

@media ( max-width: 1024px ) {

	.supreme-blog-sidebar__share {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
}

/* ------------------------------------------------------------------ *
 * Header byline — [supreme_blog_display_author]
 *
 * Replaces the Elementor Author Box that used to sit under the title.
 * That widget could only hold one fixed author, so the template printed
 * the same name on every post; the byline is per-post ACF content now.
 * Typography follows the author box it replaces: Lato 16px, name at 600
 * and role at 400.
 * ------------------------------------------------------------------ */

.supreme-blog-byline {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* aspect-ratio rather than a fixed height: the headshots are square, so this
   keeps the circle while reserving the space before the image loads. Without
   it the lazy-loaded photo has no height until it arrives and shunts the
   article down as it does. */
/* The element selector is needed, not just the class: Elementor's
   .elementor img sets border-radius: 0 and at (0,1,1) outranks a lone class,
   so the avatar rendered square. It only looked round on most posts because
   those headshots are pre-cropped transparent PNGs; the JPEG ones showed it. */
.supreme-blog-byline img.supreme-blog-byline__photo {
	flex: 0 0 auto;
	width: 100px;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
}

.supreme-blog-byline__text {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.supreme-blog-byline__name {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #54595F;
}

.supreme-blog-byline__role {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/* ------------------------------------------------------------------ *
 * Article body on phones
 *
 * The body clips horizontal overflow rather than scrolling, so anything
 * wider than the column was silently cut off at the right edge instead
 * of being reachable. Measured on the live posts at 320px: the worst
 * case ran 154px past the screen.
 * ------------------------------------------------------------------ */

@media ( max-width: 767px ) {

	/* 40px of list indent costs an eighth of the readable width on a 320px
	   screen. 16px keeps the numbering clear and gives the rest back. */
	.single-post .elementor-widget-theme-post-content ol,
	.single-post .elementor-widget-theme-post-content ul {
		padding-inline-start: 16px;
	}

	/* Reference DOIs and URLs are single unbreakable tokens wider than the
	   column at any indent, so the browser has nowhere to break them unless
	   it is told it may break mid-token. Reducing the indent alone leaves
	   the longest of them 130px over. */
	.single-post .elementor-widget-theme-post-content .elementor-widget-container {
		overflow-wrap: break-word;
	}

	/* One post carries a methodology table wider than a phone screen.
	   Scrolling it inside its own box beats clipping the last column. */
	.single-post .elementor-widget-theme-post-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}