/* ==========================================================================
   Ekam — Header Position: Left / Right sidebar mode
   Applies only above the mobile breakpoint; on small screens the theme
   always falls back to the standard top mobile header/menu regardless of
   this setting.
   ========================================================================== */

@media only screen and (min-width: 701px) {

	:root {
		--ekam-sidebar-header-width: 260px;
	}

	body.ekam-header-left .site-header,
	body.ekam-header-right .site-header {
		position: fixed;
		top: 0;
		bottom: 0;
		width: var(--ekam-sidebar-header-width);
		height: 100vh;
		overflow-y: auto;
		display: block;
	}

	body.ekam-header-left .site-header {
		left: 0;
		right: auto;
	}

	body.ekam-header-right .site-header {
		right: 0;
		left: auto;
	}

	/* The header's inner row switches from a horizontal bar to a vertical
	   stack: logo on top, navigation below it. */
	body.ekam-header-left .nav-container,
	body.ekam-header-right .nav-container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: 100%;
		width: 100%;
		max-width: 100%;
		padding: 20px 16px;
		box-sizing: border-box;
	}

	body.ekam-header-left .ekam-logo,
	body.ekam-header-right .ekam-logo {
		margin-bottom: 24px;
	}

	body.ekam-header-left .ekam-nav,
	body.ekam-header-right .ekam-nav {
		width: 100% !important;
	}

	/* Primary menu becomes a vertical list instead of a horizontal row. */
	body.ekam-header-left .site-nav .nav-bar,
	body.ekam-header-right .site-nav .nav-bar {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	body.ekam-header-left .site-nav .nav-bar > li,
	body.ekam-header-right .site-nav .nav-bar > li {
		width: 100%;
		float: none;
	}

	body.ekam-header-left .site-nav .nav-bar > li > a,
	body.ekam-header-right .site-nav .nav-bar > li > a {
		display: block;
		width: 100%;
	}

	/* Submenus drop down as an indented block instead of a floating popup. */
	body.ekam-header-left .site-nav .dropdown-menu,
	body.ekam-header-right .site-nav .dropdown-menu {
		position: static;
		width: 100%;
		box-shadow: none;
	}

	/* Push the page content out of the sidebar's way. The behind-site-header
	   spacer used for the top sticky-header layout isn't needed here. */
	body.ekam-header-left .behind-site-header,
	body.ekam-header-right .behind-site-header {
		display: none !important;
	}

	body.ekam-header-left #page,
	body.ekam-header-right #page {
		overflow-x: hidden;
	}

	body.ekam-header-left .box-view {
		margin-left: var(--ekam-sidebar-header-width);
	}

	body.ekam-header-right .box-view {
		margin-right: var(--ekam-sidebar-header-width);
	}

	/* The top announcement bar still spans the remaining width, next to
	   the sidebar, rather than under/over it. */
	body.ekam-header-left .top-bar {
		margin-left: var(--ekam-sidebar-header-width);
	}

	body.ekam-header-right .top-bar {
		margin-right: var(--ekam-sidebar-header-width);
	}
}