/* Pikravetka Editorial Articles v1.4 — automatic article TOC */

.pea-article-layout {
	display: grid;
	grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 54px);
	align-items: start;
	position: relative;
}

/*
 * The sticky element is inside the article grid, not fixed to the viewport.
 * Because its containing grid ends with the article, the TOC stops there too
 * and cannot cover "Aktualni članki" or other content below the article.
 */
.pea-article-layout__toc {
	min-width: 0;
	align-self: stretch;
}

.pea-auto-toc {
	position: sticky;
	top: var(--pea-toc-top, 110px);
	max-height: calc(100vh - var(--pea-toc-top, 110px) - 28px);
	overflow: auto;
	padding: 16px 16px 15px;
	border: 1px solid rgba(86, 143, 115, .22);
	border-radius: 14px;
	background: #f7faf8;
	scrollbar-width: thin;
	z-index: 2;
}

.admin-bar .pea-auto-toc {
	top: calc(var(--pea-toc-top, 110px) + 32px);
	max-height: calc(100vh - var(--pea-toc-top, 110px) - 60px);
}

.pea-auto-toc__title {
	display: block;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.35;
	color: #294536;
}

.pea-auto-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pea-auto-toc__item {
	margin: 0;
	padding: 0;
	border-left: 2px solid transparent;
}

.pea-auto-toc__item + .pea-auto-toc__item {
	margin-top: 3px;
}

.pea-auto-toc__item a {
	display: block;
	padding: 6px 8px;
	border-radius: 8px;
	color: #66736c;
	text-decoration: none !important;
	font-size: 12px;
	line-height: 1.4;
	transition: background .18s ease, color .18s ease;
}

.pea-auto-toc__item--h3 a {
	padding-left: 20px;
	font-size: 11px;
}

.pea-auto-toc__item a:hover,
.pea-auto-toc__item a.is-active {
	background: #eaf4ed;
	color: #365e4a;
}

.pea-auto-toc__item:has(a.is-active) {
	border-left-color: #568f73;
}

.pea-article-layout__content {
	min-width: 0;
}

/* Prevent anchored headings from hiding behind a sticky site header. */
.pea-article-layout__content h2[id],
.pea-article-layout__content h3[id] {
	scroll-margin-top: 125px;
}

.pea-auto-toc__mobile-head {
	display: none;
}

@media (max-width: 900px) {
	.pea-article-layout {
		display: block;
	}

	.pea-article-layout__toc {
		margin-bottom: 24px;
	}

	.pea-auto-toc {
		position: relative;
		top: auto;
		max-height: none;
		overflow: visible;
		padding: 0;
		background: #f7faf8;
	}

	.pea-auto-toc__mobile-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 14px 16px;
		cursor: pointer;
	}

	.pea-auto-toc__mobile-head strong {
		font-size: 14px;
		color: #294536;
	}

	.pea-auto-toc__toggle {
		display: inline-grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		border-radius: 9px;
		background: #eaf4ed;
		color: #365e4a;
		cursor: pointer;
	}

	.pea-auto-toc__toggle span {
		transition: transform .2s ease;
	}

	.pea-auto-toc.is-open .pea-auto-toc__toggle span {
		transform: rotate(180deg);
	}

	.pea-auto-toc__inner {
		display: none;
		padding: 0 12px 14px;
	}

	.pea-auto-toc.is-open .pea-auto-toc__inner {
		display: block;
	}

	.pea-auto-toc__title {
		display: none;
	}
}

@media (max-width: 782px) {
	.admin-bar .pea-auto-toc {
		top: auto;
		max-height: none;
	}
}


/* =========================================================
   v1.5 — category breadcrumbs
   ========================================================= */

/*
 * Kadence normally shows only one category above the post title.
 * On Pikravetka single posts we replace that with the full hierarchy.
 */
.single-post .entry-header .entry-taxonomies {
	display: none;
}

.pea-category-breadcrumbs {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.5;
}

.pea-category-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pea-category-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.pea-category-breadcrumbs li:not(:last-child)::after {
	content: "→";
	margin-left: 5px;
	color: #97a59d;
}

.pea-category-breadcrumbs a {
	color: #568f73 !important;
	text-decoration: none !important;
	font-weight: 700;
	letter-spacing: .01em;
}

.pea-category-breadcrumbs a:hover {
	color: #365e4a !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* The deepest/current category is still clickable, but visually a little stronger. */
.pea-category-breadcrumbs li:last-child a {
	color: #294536 !important;
}

@media (max-width: 600px) {
	.pea-category-breadcrumbs {
		font-size: 11px;
		margin-bottom: 10px;
	}
}


/* =========================================================
   v1.6 — desktop TOC mora biti lijevo od teksta članka
   ========================================================= */

/*
 * Kadence često ograniči širinu samog article contenta.
 * Zato širimo samo unutarnji TOC+content grid, ali zadržavamo tekst
 * na ugodnoj širini. Kazalo ostaje lijevo, sadržaj desno.
 */
@media (min-width: 901px) {
	.single-post .pea-article-layout {
		display: grid !important;
		grid-template-columns: 230px minmax(0, 860px) !important;
		gap: 42px !important;
		align-items: start !important;
		width: min(1132px, calc(100vw - 48px)) !important;
		max-width: none !important;
		margin-left: 50% !important;
		transform: translateX(-50%) !important;
		position: relative !important;
	}

	.single-post .pea-article-layout__toc {
		grid-column: 1 !important;
		min-width: 0 !important;
		width: 230px !important;
		align-self: stretch !important;
	}

	.single-post .pea-article-layout__content {
		grid-column: 2 !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 860px !important;
	}

	.single-post .pea-auto-toc {
		position: sticky !important;
		top: var(--pea-toc-top, 110px) !important;
		width: 100% !important;
		max-height: calc(100vh - var(--pea-toc-top, 110px) - 28px) !important;
		overflow: auto !important;
		z-index: 2 !important;
	}

	/* Prevent theme/content styles from forcing children back into one column. */
	.single-post .pea-article-layout > * {
		float: none !important;
		clear: none !important;
	}

	/* Keep normal article elements inside the right-hand column. */
	.single-post .pea-article-layout__content > * {
		max-width: 100% !important;
	}

	/* Images remain inside the article column. */
	.single-post .pea-article-layout__content img {
		max-width: 100% !important;
		height: auto !important;
	}
}

/* Slightly narrower desktop/tablet fallback. */
@media (min-width: 901px) and (max-width: 1180px) {
	.single-post .pea-article-layout {
		grid-template-columns: 200px minmax(0, 1fr) !important;
		gap: 28px !important;
		width: calc(100vw - 36px) !important;
	}

	.single-post .pea-article-layout__toc {
		width: 200px !important;
	}
}

/* Mobile/tablet: TOC remains above article as collapsible block. */
@media (max-width: 900px) {
	.single-post .pea-article-layout {
		display: block !important;
		width: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
		transform: none !important;
	}

	.single-post .pea-article-layout__toc,
	.single-post .pea-article-layout__content {
		width: 100% !important;
		max-width: none !important;
	}
}


/* =========================================================
   v1.8 — FIX: TOC lijevo + sticky uz tekst
   ========================================================= */

/*
 * Flex layout is used deliberately here instead of CSS Grid because some
 * Kadence single-post content rules can interfere with grid children.
 * The aside stretches for the full article height, while .pea-auto-toc itself
 * stays sticky. This keeps the TOC beside the text while scrolling and makes
 * it stop naturally at the end of the article.
 */
@media (min-width: 901px) {
	body.single-post .entry-content .pea-article-layout {
		display: flex !important;
		flex-direction: row !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 42px !important;

		width: min(1132px, calc(100vw - 48px)) !important;
		max-width: none !important;

		margin-left: 50% !important;
		margin-right: 0 !important;
		transform: translateX(-50%) !important;

		overflow: visible !important;
		position: relative !important;
	}

	body.single-post .entry-content .pea-article-layout__toc {
		display: block !important;
		flex: 0 0 230px !important;
		width: 230px !important;
		min-width: 230px !important;
		max-width: 230px !important;

		align-self: stretch !important;
		position: relative !important;
		overflow: visible !important;

		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		clear: none !important;
	}

	body.single-post .entry-content .pea-article-layout__content {
		display: block !important;
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 860px !important;

		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		clear: none !important;
	}

	body.single-post .entry-content .pea-auto-toc {
		display: block !important;
		position: sticky !important;
		top: 110px !important;
		left: auto !important;
		right: auto !important;

		width: 230px !important;
		max-width: 230px !important;
		max-height: calc(100vh - 138px) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;

		margin: 0 !important;
		z-index: 10 !important;
	}

	body.admin-bar.single-post .entry-content .pea-auto-toc {
		top: 142px !important;
		max-height: calc(100vh - 170px) !important;
	}

	/* Neutralize broad Kadence entry-content child margins inside our layout. */
	body.single-post .entry-content .pea-article-layout__content > * {
		margin-left: 0;
		margin-right: 0;
		max-width: 100% !important;
	}

	body.single-post .entry-content .pea-article-layout__content img {
		max-width: 100% !important;
		height: auto !important;
	}
}

@media (min-width: 901px) and (max-width: 1180px) {
	body.single-post .entry-content .pea-article-layout {
		gap: 28px !important;
		width: calc(100vw - 32px) !important;
	}

	body.single-post .entry-content .pea-article-layout__toc {
		flex-basis: 200px !important;
		width: 200px !important;
		min-width: 200px !important;
		max-width: 200px !important;
	}

	body.single-post .entry-content .pea-auto-toc {
		width: 200px !important;
		max-width: 200px !important;
	}
}

/* Phone/tablet: collapsible TOC above the article. */
@media (max-width: 900px) {
	body.single-post .entry-content .pea-article-layout {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		transform: none !important;
	}

	body.single-post .entry-content .pea-article-layout__toc,
	body.single-post .entry-content .pea-article-layout__content {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	body.single-post .entry-content .pea-auto-toc {
		position: relative !important;
		top: auto !important;
		width: 100% !important;
		max-width: none !important;
		max-height: none !important;
		overflow: visible !important;
	}
}