/**
 * MyChooz Aesthetic - Sidebar
 * Grid layout + sticky sidebar + TOC + fixed mini panel
 * @version 0.1.1
 */

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT (≥ 1200px)
   Content 720px centered + sidebar 200px absolute right
   Min viewport: 720 + 24 gap + 200 sidebar + margins = ~1200px
   ═══════════════════════════════════════════════════════════════════ */

.mca-sidebar,
.mca-sidebar-left {
	display: none;
}

/* <1200px: у wrapper нет max-width/margin, поэтому main.mca-sheet внутри
   получает margin-collapse с родителем. Явный margin-top на wrapper даёт
   стабильный gap от хедера на всех viewport. */
.single-with-sidebar {
	margin-top: 24px;
}

@media (min-width: 1200px) {
	.single-with-sidebar {
		position: relative;
		max-width: var(--mca-content-width);
		width: calc(100% - 48px);
		margin: 24px auto;
	}

	.single-with-sidebar > main {
		max-width: none;
		width: 100%;
	}

	.single-with-sidebar > .comments-section {
		max-width: none;
		width: 100%;
		margin-inline: 0;
	}

	.mca-sidebar {
		display: block;
		position: absolute;
		top: -24px;
		bottom: 0;
		left: calc(100% + 24px);
		width: 200px;
	}

	.mca-sidebar-left {
		display: block;
		position: absolute;
		top: -24px;
		bottom: 0;
		right: calc(100% + 24px);
		width: 44px;
	}

	.mca-sidebar-left__sticky {
		position: sticky;
		top: 24px;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* Кнопки впритык: общий бордер не двоится */
	.mca-sidebar-left .mca-like + .mca-dislike {
		margin-top: -1px;
	}

	.admin-bar .mca-sidebar-left__sticky {
		top: 56px;
	}

	.mca-sidebar__sticky {
		position: sticky;
		top: 24px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.admin-bar .mca-sidebar__sticky {
		top: 56px;
	}

	/* Reposition panel near sidebar on desktop */
	.mca-sidebar-panel {
		right: auto;
		left: calc(50% + 384px);
	}
}

/* ═══════════════════════════════════════════════════════════════════
   TOC — Table of Contents
   ═══════════════════════════════════════════════════════════════════ */

.mca-toc {
	padding: 12px;
	background: var(--wp--preset--color--content);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	opacity: 0.5;
	transition: opacity var(--wp--custom--transition--fast);
}

.mca-toc:hover {
	opacity: 1;
}

.mca-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mca-toc__link {
	display: block;
	padding: 4px 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast);
}

.mca-toc__link--sub {
	padding-left: 24px;
	font-size: 12px;
}

.mca-toc__link:hover {
	color: var(--wp--preset--color--text);
}

.mca-toc__link.is-active {
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   LEFT SIDEBAR — VOTE (like + dislike, MyChooz panel-style 44×44 + count chip)
   Карточные .mca-like / .mca-dislike не трогаем — здесь scoped через родителя.
   ═══════════════════════════════════════════════════════════════════ */

.mca-sidebar-left .mca-like,
.mca-sidebar-left .mca-dislike {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background: color-mix(in srgb, var(--wp--preset--color--content) 85%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	cursor: pointer;
	transition: all var(--wp--custom--transition--fast);
}

.mca-sidebar-left .mca-vote__icon {
	width: 16px;
	height: 16px;
	stroke-width: 2;
	flex-shrink: 0;
}

.mca-sidebar-left .mca-like__count,
.mca-sidebar-left .mca-dislike__count {
	font-size: 11px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.mca-sidebar-left .mca-like:active,
.mca-sidebar-left .mca-dislike:active { transform: scale(0.96); }

.mca-sidebar-left .mca-like:focus,
.mca-sidebar-left .mca-dislike:focus { outline: none; }

/* ── Like ── */
.mca-sidebar-left .mca-like:hover,
.mca-sidebar-left .mca-like--liked {
	color: #e71d1d;
	border-color: #e71d1d;
}

.mca-sidebar-left .mca-like--liked .mca-vote__icon { fill: #e71d1d; }
.mca-sidebar-left .mca-like--liked .mca-like__count { color: #e71d1d; font-weight: 600; }

.mca-sidebar-left .mca-like:focus-visible {
	outline: 2px solid #e71d1d;
	outline-offset: 2px;
}

/* ── Dislike ── */
.mca-sidebar-left .mca-dislike:hover,
.mca-sidebar-left .mca-dislike--disliked {
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
}

.mca-sidebar-left .mca-dislike--disliked .mca-vote__icon { fill: var(--wp--preset--color--text); }
.mca-sidebar-left .mca-dislike--disliked .mca-dislike__count { color: var(--wp--preset--color--text); font-weight: 600; }

.mca-sidebar-left .mca-dislike:focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   FIXED MINI PANEL (mobile + tablets, < 1200px)
   ═══════════════════════════════════════════════════════════════════ */

.mca-sidebar-panel {
	position: fixed;
	bottom: 24px;
	right: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 100;
}

.mca-sidebar-panel__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	background: color-mix(in srgb, var(--wp--preset--color--content) 85%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	cursor: pointer;
	transition: all var(--wp--custom--transition--fast);
	padding: 0;
}

.mca-sidebar-panel__btn:hover {
	background: color-mix(in srgb, var(--wp--preset--color--content) 95%, transparent);
	color: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
}

.mca-sidebar-panel__btn:focus {
	outline: none;
}

.mca-sidebar-panel__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mca-sidebar-panel__btn:active {
	background: var(--wp--preset--color--content);
}

.mca-sidebar-panel__count {
	font-size: 11px;
	font-weight: 500;
}