/* Blocksy header as a sticky, full-height left sidebar.
   Load after the parent theme's styles. */

:root {
	--ct-sidebar-width: 320px;
	--ct-sidebar-bg: #fff;
	--ct-sidebar-border: rgba( 0, 0, 0, 0.08 );
}

@media ( min-width: 1000px ) {

	#main-container {
		display: grid;
		grid-template-columns: var( --ct-sidebar-width ) minmax( 0, 1fr );
		align-items: start; /* stretch would leave the sidebar nothing to stick against */
	}

	/* Sidebar spans every row of the grid; the sticky element is the header inside it */
	.ct-sidebar-header {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	/* Everything else Blocksy prints into #main-container — main, the footer,
	   hero output from blocksy:content:before — goes to column 2 */
	#main-container > *:not( .ct-sidebar-header ) {
		grid-column: 2;
		min-width: 0; /* stops wide tables from blowing out the column */
	}

	.ct-sidebar-header .site-header {
		position: sticky;
		top: 0;
		height: 100dvh;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var( --ct-sidebar-bg );
		border-right: 1px solid var( --ct-sidebar-border );
	}

	/* Blocksy's rows are horizontal bars with fixed heights — unwind that.
	   Selectors follow Blocksy's data attributes; check yours in devtools if
	   your header type differs. */
	.ct-sidebar-header [data-row] {
		--height: auto;
		--sticky-height: auto;
		height: auto;
		min-height: 0;
	}

	.ct-sidebar-header [data-row] > .ct-container,
	.ct-sidebar-header [data-row] > .ct-container-fluid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		width: 100%;
		max-width: none;
		padding: 1.5rem;
	}

	.ct-sidebar-header [data-column] {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
		width: 100%;
		margin: 0;
	}

	/* The middle row grows so the last row sits at the bottom of the column */
	.ct-sidebar-header [data-row="middle"] {
		flex: 1 1 auto;
	}

	/* Nav: stack the top level, and let submenus fly out to the right */
	.ct-sidebar-header .header-menu-1 > ul,
	.ct-sidebar-header .header-menu-2 > ul,
	.ct-sidebar-header ul.menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.ct-sidebar-header ul.menu > li {
		width: 100%;
	}

	.ct-sidebar-header ul.menu > li > a {
		justify-content: space-between;
		width: 100%;
	}

	.ct-sidebar-header .menu-item-has-children > .sub-menu {
		top: 0;
		left: 100%;
		transform: none;
	}

	/* Logo and search fill the width rather than centring in a bar */
	.ct-sidebar-header .site-branding,
	.ct-sidebar-header .site-logo-container {
		margin: 0;
		text-align: left;
	}

	.ct-sidebar-header .ct-header-search,
	.ct-sidebar-header .ct-header-cart,
	.ct-sidebar-header .ct-header-socials {
		align-self: flex-start;
	}
}

/* Below 1000px Blocksy's own mobile header takes over — single column, nothing sticks */
@media ( max-width: 999px ) {
	.ct-sidebar-header .site-header {
		position: static;
		height: auto;
	}
}