/*
Theme Name: Klaro-Alnus
Template: klaro
Version: 1.0
*/

/*
:root {
	--max-content-width: 1400px;
	--sidebar-width: 300px;
}
*/

html {
}

/* ==========================================================================
   LAYOUT STRUCTURE
   ========================================================================== */

/* .site-header {
  position: sticky;
  top: 0;
  left: 0;
} */

/* Main content layout, including breadcrumbs */ 

.site-main {
	display: block;
}

.sidebar, .has-sidebar .sidebar {
	display: none;
}

.breadcrumbs {
	display: none;
}

.has-breadcrumbs .breadcrumbs {
	display: block;
}

@media (min-width: 901px) {

	.has-sidebar .site-main {
	  display: grid;
	  gap: var(--spacing-xl);
	  grid-template-rows: auto;
	  align-items: start;
	  max-width: var(--max-content-width);
	}
	
	.has-sidebar.sidebar-left .site-main {
	  grid-template-columns: var(--sidebar-width) 1fr;
	}
	
	.has-sidebar.sidebar-right .site-main {
	  grid-template-columns: 1fr var(--sidebar-width);
	}
	
	.has-sidebar.sidebar-left .content-area {
	  display: block;
	  grid-column: 2/2;
	  grid-row: 1/1;
	} 

	.has-sidebar.sidebar-left .sidebar {
	  display: block;
	  grid-column: 1/1;
	  grid-row: 1/1;
	} 

	.has-sidebar.sidebar-right .content-area {
	  display: block;
	  grid-column: 1/1;
	  grid-row: 1/1;
	} 

	.has-sidebar.sidebar-right .sidebar {
	  display: block;
	  grid-column: 2/2;
	  grid-row: 1/1;
	} 

}

@media (max-width: 900px) {

	.has-sidebar.force-sitebar .site-main {
		display: grid !important;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.has-sidebar.force-sidebar .content-area {
		display: block !important;
		grid-row: 1/1;
	}

	.has-sidebar.force-sidebar .sidebar {
		display: block !important;
		grid-row: 2/2;
	}

}

/* ==========================================================================
   SKIP LINKS - Most Important Accessibility Feature
   ========================================================================== */

.skip-link:focus {
  top: 40px;
}

/* --wp-admin--admin-bar--height */

/* ==========================================================================
   MENU BUTTON
   ========================================================================== */

#klaro-alnus-menu-button {
	display: none;
	position: fixed;
	top: 48px;
	right: 24px;
	background-color: black;
	color: white;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	z-index: 1000;
	cursor: pointer;
}

#klaro-alnus-menu-button .dashicons {
	position: relative;
	font-size: 36px;
	top: 0.2em;
	left: 0.2em;
	cursor: pointer;
}

:root:not(.show-menu) #klaro-alnus-menu-button-show {
	display: block;
}

:root:not(.show-menu) #klaro-alnus-menu-button-hide {
	display: none;
}

:root.show-menu #klaro-alnus-menu-button-show {
	display: none;
}

:root.show-menu #klaro-alnus-menu-button-hide {
	display: block;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
	#klaro-alnus-menu-button {
		display: block;
	}
	.main-navigation {
   	position: absolute;
    	left: 0;
   	top: 10em;
		width: 0;
		height: 0;
		z-index: -1000;
		overflow: hidden;
	}
	:root.show-menu .main-navigation {
		width: 100%;
		height: auto;
    	z-index: 1000;
	}
}