/* KCC sidebars (2026-10-16): AdSense units in both sidebars + the left widget area.
   Loaded by inc/kcc-sidebars.php. Everything is scoped to body.kcc-sidebar-ads, which the theme adds only
   on pages that really show the right sidebar (posts, pages, archives, search), never on the home. */

/* The unit: a small label and the responsive ad. Reserved height stops the sidebar from jumping when the
   ad arrives; a unit Google does not fill disappears completely. Never sticky. */
.kcc-ad {
	box-sizing: border-box;
	width: 100%;
	max-width: 300px;
	min-height: 270px;
	margin: 0 auto 35px;
	text-align: center;
	overflow: hidden;
}
.kcc-ad-label {
	margin: 0 0 4px;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8f7f8b;
}
.kcc-ad .adsbygoogle {
	display: block;
	min-height: 250px;
}
.kcc-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
	display: none;
}

/* The ad comes last in the markup (so the widget colour cycling and the search-first rules keep working)
   and is shown first in the column. */
body.kcc-sidebar-ads #secondary,
body.kcc-sidebar-ads #sidebar-left {
	display: flex;
	flex-direction: column;
}
body.kcc-sidebar-ads #secondary > *,
body.kcc-sidebar-ads #sidebar-left > * {
	min-width: 0;
}
body.kcc-sidebar-ads #secondary > .kcc-ad,
body.kcc-sidebar-ads #sidebar-left > .kcc-ad {
	order: -1;
}
body.kcc-sidebar-ads #sidebar-left .widget:not(:last-child) {
	margin-bottom: 35px;
}

/* Under the content, tablet landscape: the left column drops below the main column. */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
	body.kcc-sidebar-ads #sidebar-left {
		float: left;
		clear: left;
		box-sizing: border-box;
		width: 70%;
		padding-right: 30px;
		margin-top: 30px;
	}
}

/* Under the content, below 1024px: everything is one column, the theme already stacks it. */
@media screen and (max-width: 1023px) {
	body.kcc-sidebar-ads #sidebar-left {
		margin-top: 30px;
	}
}

/* Three columns from 1200px: left 300px | content (centred, takes the rest) | right 300px. */
@media screen and (min-width: 1200px) {
	body.kcc-sidebar-ads .site-content > .wrapper.section-gap {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr) 300px;
		column-gap: 30px;
		align-items: start;
		width: 96%;
		max-width: 1700px;
	}
	body.kcc-sidebar-ads .site-content > .wrapper.section-gap::before,
	body.kcc-sidebar-ads .site-content > .wrapper.section-gap::after {
		display: none;
	}
	body.kcc-sidebar-ads #sidebar-left {
		grid-column: 1;
		grid-row: 1;
	}
	body.kcc-sidebar-ads #primary {
		grid-column: 2;
		grid-row: 1;
		float: none;
		width: auto;
		min-width: 0;
		padding: 0;
	}
	body.kcc-sidebar-ads #secondary {
		grid-column: 3;
		grid-row: 1;
		float: none;
		width: auto;
	}
}