/* Blog article "On this page" (2026-10-15) – markup in com_content/article/blog.php, list built by js/blog-toc.js.
   Outline card with numbered sections, reading progress along the top edge, Share as the card footer (desktop). */
.item-blog {
	--toc-navy: #050038;
	--toc-text: #032D4D;
	--toc-muted: rgba(3, 45, 77, .6);
	--toc-green: #34c759;
	--toc-line: rgba(5, 0, 56, .12);
}
.item-blog .px-toc {
	text-align: left;
	font-family: Inter, "Fallback Font", sans-serif;
	background: #fff;
	border: 1px solid var(--toc-line);
	border-radius: 16px;
	overflow: hidden;
}
.item-blog .px-toc[hidden] { display: none; }

/* Progress line along the top edge */
.item-blog .px-toc-bar { height: 3px; background: rgba(5, 0, 56, .06); }
.item-blog .px-toc-bar i { display: block; width: 0; height: 100%; background: var(--toc-green); transition: width .12s linear; }

/* Heading row: title + "4 / 10" */
.item-blog .px-toc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 10px;
	list-style: none;
}
.item-blog .px-toc-head::-webkit-details-marker { display: none; }
.item-blog .px-toc-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--toc-text);
}
.item-blog .px-toc-count { font-size: 12px; color: var(--toc-muted); white-space: nowrap; }
.item-blog .px-toc-count b { color: var(--toc-green); font-weight: 600; }

/* List */
.item-blog .px-toc-list,
.item-blog .px-toc-list ol { list-style: none; margin: 0; padding: 0; }
.item-blog .px-toc-list { position: relative; padding: 0 10px 12px; }
.item-blog .px-toc-list li { margin: 0; padding: 0; }
.item-blog .px-toc-list a {
	display: flex;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--toc-text);
	font-size: 14px;
	line-height: 1.45;
	text-decoration: none;
	transition: color .15s;
}
.item-blog .px-toc-list a:hover,
.item-blog .px-toc-list a:focus-visible { color: var(--toc-green); }
.item-blog .px-toc-num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: -1px;
	border: 1px solid var(--toc-line);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: var(--toc-muted);
	transition: background-color .15s, border-color .15s, color .15s;
}
.item-blog .px-toc-list a.is-done .px-toc-num { border-color: var(--toc-green); color: var(--toc-green); }
.item-blog .px-toc-list a.is-active,
.item-blog .px-toc-list a.is-parent { color: var(--toc-navy); font-weight: 600; }
.item-blog .px-toc-list a.is-active .px-toc-num,
.item-blog .px-toc-list a.is-parent .px-toc-num { background: var(--toc-green); border-color: var(--toc-green); color: #fff; }
/* h3 */
.item-blog .px-toc-list .px-toc-sub a { padding: 5px 10px 5px 44px; font-size: 13px; color: var(--toc-muted); }
.item-blog .px-toc-list .px-toc-sub a:hover { color: var(--toc-green); }
.item-blog .px-toc-list .px-toc-sub a.is-active { color: var(--toc-green); font-weight: 600; }
.item-blog .px-toc-list > li > ol { padding-bottom: 4px; }

.item-blog .px-toc-target { scroll-margin-top: 24px; }
.item-blog .px-toc-target:focus { outline: none; }

/* ===== Desktop: wider article layout, card in the sticky sidebar, Share as its footer ===== */
@media (min-width: 992px) {
	.item-blog .content-wrap .content-inner { max-width: 1080px; }
	.item-blog .content-wrap .content-inner > .row {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		column-gap: 40px;
		margin-left: 0;
		margin-right: 0;
	}
	.item-blog .content-wrap .content-inner > .row > [class*="col-"] {
		width: auto;
		max-width: none;
		flex: none;
		padding-left: 0;
		padding-right: 0;
	}
	.item-blog .sidebar { text-align: left; }

	.item-blog .sidebar > .px-toc.item { margin-bottom: 0; }
	.item-blog .px-toc-head { cursor: default; }
	.item-blog .px-toc-list {
		max-height: calc(100vh - 250px);
		min-height: 120px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}
	.item-blog .px-toc-list:hover { scrollbar-color: rgba(5, 0, 56, .2) transparent; }
	/* Long articles: only the h3 of the current h2 */
	.item-blog .px-toc-list > li > ol { display: none; }
	.item-blog .px-toc-list > li.is-open > ol { display: block; }

	/* Share: footer of the card, or a small card of its own when there is no TOC */
	.item-blog .sidebar > .px-toc + .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 24px;
		padding: 14px 20px;
		border: 1px solid var(--toc-line);
		border-radius: 16px;
		background: #fff;
	}
	.item-blog .sidebar > .px-toc:not([hidden]) + .item { border-top: 0; border-radius: 0 0 16px 16px; }
	.item-blog .sidebar > .px-toc:not([hidden]) { border-radius: 16px 16px 0 0; }
	.item-blog .sidebar > .px-toc + .item h4, .item-blog .sidebar > .px-toc + .item .px-side-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--toc-text); }
	.item-blog .sidebar > .px-toc + .item .ja-social-share-inner,
	.item-blog .sidebar > .px-toc + .item .ja-button-list { justify-content: flex-end; margin: 0; }
	.item-blog .sidebar .tags { justify-content: flex-start; }
	.item-blog .sidebar .tags > li { margin: 0 8px 0 0; }
}
@media (min-width: 1200px) {
	.item-blog .content-wrap .content-inner > .row { grid-template-columns: 260px minmax(0, 1fr); column-gap: 56px; }
}

/* Share icons: flat outline squares */
.item-blog .sidebar .ja-button-list { gap: 6px; }
.item-blog .sidebar .ja-button-list li { margin: 0; }
.item-blog .sidebar .ja-button-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	background: #fff !important;
	border: 1px solid var(--toc-line);
	border-radius: 8px;
	color: var(--toc-text);
	transition: border-color .15s, color .15s;
}
.item-blog .sidebar .ja-button-list a svg { width: 14px; height: 14px; fill: currentColor; }
.item-blog .sidebar .ja-button-list a:hover,
.item-blog .sidebar .ja-button-list a:focus-visible { border-color: var(--toc-green); color: var(--toc-green); }

/* ===== Below 992px: collapsible card above the article ===== */
.item-blog .px-toc.is-inline { margin: 0 0 24px; border-radius: 12px; }
.item-blog .px-toc.is-inline .px-toc-head { align-items: center; padding: 14px 16px; cursor: pointer; }
.item-blog .px-toc.is-inline .px-toc-head::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-left: 4px;
	border-right: 2px solid var(--toc-navy);
	border-bottom: 2px solid var(--toc-navy);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s;
}
.item-blog .px-toc.is-inline .px-toc-count { margin-left: auto; }
.item-blog .px-toc.is-inline .px-toc-box[open] .px-toc-head::after { transform: translateY(2px) rotate(-135deg); }
.item-blog .px-toc.is-inline .px-toc-list { padding: 0 6px 10px; }

/* Below 992px: Share as a compact card (same look as the TOC card under it) */
@media (max-width: 991.98px) {
	/* Tablets: one column like phones (the 3-column sidebar was too narrow for Share) */
	.item-blog .content-wrap .content-inner > .row > .col-sm-3,
	.item-blog .content-wrap .content-inner > .row > .col-sm-9 { flex: 0 0 100%; max-width: 100%; }
	.item-blog .sidebar { position: static; }
	.item-blog .sidebar > .item:has(.ja-share-button) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 16px;
		padding: 10px 16px;
		border: 1px solid var(--toc-line);
		border-radius: 12px;
		text-align: left;
	}
	.item-blog .sidebar > .item:has(.ja-share-button) h4, .item-blog .sidebar > .item:has(.ja-share-button) .px-side-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--toc-text); }
	.item-blog .sidebar > .item:has(.ja-share-button) .ja-social-share-inner,
	.item-blog .sidebar > .item:has(.ja-share-button) .ja-button-list { justify-content: flex-end; margin: 0; }
}

/* sidebar labels "Share" / "Tags" are not headings (they sat between the H1 and the article's H2s): p.h4.px-side-title (2026-10-17) */
.item-blog .sidebar .px-side-title { margin: 8px 0; }