/* =============================
   SETTINGS
   =============================*/

[data-theme="dark"] { 
	--wp--preset--color--white: #000000 !important;
	--wp--preset--color--black: #ffffff !important;
	--wp--preset--color--one: #FF3838 !important;
	--wp--preset--color--two: #212121 !important;
	--wp--preset--color--three: #FF2E4D !important;
}

[data-font="system-font"] {
	font-family: var(--wp--preset--font-family--system-font);
}

/* =============================
   MAIN
   =============================*/


header {
	margin: 0 auto !important;
	text-align: center;
}

header .items-justified-right {
	justify-content: center;
}


header .wp-block-navigation a:hover, header .wp-block-site-title a:hover, header .current-menu-item a {
	text-decoration: underline !important;
	color: var(--wp--preset--color--one) !important;
}

main a:hover, footer a:hover {
	background-color: var(--wp--preset--color--one);
	color: #ffffff !important;
	text-decoration: none;
}

.container {
	margin: auto 10px;
}

.wp-block-navigation__responsive-container-open {
	margin: 1em 0 0 0;
}


h1, .is-style-block-head {
	background-color: var(--wp--preset--color--one);
	color: #ffffff !important;
	padding: 10px;
	box-shadow: 10px 10px var(--wp--preset--color--black);
	transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	display: inline-block;
}

a.leichte-sprache-link {
	color: var(--wp--preset--color--black);
	font-weight: 700;
}

a.leichte-sprache-link:hover {
	color: var(--wp--preset--color--one);
}

:focus-visible, .switch:focus-within {
	outline-style: solid;
  	outline-width: 3px;
  	outline-offset: -3px;
  	outline-color: var(--wp--preset--color--three);
}

.wp-block-post-title {
	margin-top: 0;
}

/* =============================
   PROJEKT FILTER
   =============================*/

.show {
  display: block !important;
}

#projekt-filter {
	overflow-x: auto;
	white-space: nowrap;
	padding: 2em 0;
}

.filter-button {
	font-family: var(--wp--preset--font-family--atkinson-hyperlegible);
	color: #ffffff;
	background-color: var(--wp--preset--color--one);
	border: 0;
	box-shadow: 6px 6px 0 var(--wp--preset--color--black);
	position: relative;
	padding-top: calc(0.3em + 2px);
	padding-right: calc(1.3em + 2px);
	padding-bottom: calc(0.3em + 2px);
	padding-left: calc(1.3em + 2px);
	border-radius: 9999px;
	cursor: pointer;
	display: inline-block;
	font-size: var(--wp--preset--font-size--normal);
	margin: 0 5px 0 0;
	font-weight: 700;
}

.filter-button.active, .filter-button:hover {
	box-shadow: 2px 2px 0 var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--three);
	left: 4px;
	top: 4px;
}

/* =============================
   CUSTOM CLASSES
   =============================*/

.is-style-inline-block {
	display: inline-block;
}

/* =============================
   BUTTONS
   =============================*/

.wp-block-button__link {
	box-shadow: 6px 6px 0 var(--wp--preset--color--black);
	position: relative;
}

.wp-block-button__link:hover {
	box-shadow: 2px 2px 0 var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--three);
	left: 4px;
	top: 4px;
}

.is-style-outline .wp-block-button__link:hover {
	color: #000000 !important;
}


/* =============================
   DARKMODE SWITCH
   =============================*/

#post-comments {
	display: none;
}

#post-comments.visible {
	display: block;
}


/* =============================
   DARKMODE SWITCH
   =============================*/

.theme-settings-container {
	flex-direction: row-reverse;
	display: flex;
	align-items: center;
}   

#theme-settings-button {
	border: 0;
	font-size: var(--wp--preset--font-size--normal);
	background-color: var(--wp--preset--color--one);
	color: #ffffff;
	padding: 10px;
	align-self: flex-start;
}

#theme-settings-button svg {
	width: 20px;
	fill: #ffffff;
}

#theme-settings {
	font-size: var(--wp--preset--font-size--small);
	display: none;
	margin: 0;
}

#theme-settings.visible {
	display: flex;
}

.switch {
	display: flex;
	align-self: center;
	margin: 0 5px 0 5px;
}

.switch input { 
  	opacity: 0;
  	width: 0;
  	height: 0;
  	position: absolute;
}

.slider {
	position: relative;
  	display: inline-block;
  	width: 34px;
  	height: 20px;
  	background-color: #ccc;
  	-webkit-transition: .4s;
  	transition: .4s;
  	border-radius: 34px;
}

.slider:before {
  	position: absolute;
  	content: "";
  	height: 14px;
  	width: 14px;
  	left: 3px;
  	bottom: 3px;
  	background-color: white;
  	-webkit-transition: .4s;
  	transition: .4s;
  	border-radius: 50%;
}

.slider-title {
	padding-left: 5px;
}

input:checked + .slider {
  	background-color: #2196F3;
}

input:focus + .slider {
  	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  	-webkit-transform: translateX(14px);
  	-ms-transform: translateX(14px);
  	transform: translateX(14px);
}

button {
	border: 0;
	cursor: pointer;
}


/* =============================
   FORM
   =============================*/

label {
	//display: none;

}

input[type=text], input[type=email], input[type=number], input[type=url], textarea, select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}

input[type=submit] {
  width: 100%;
  color: #ffffff;
  background-color: var(--wp--preset--color--one);
  padding: 1em;
  margin: 1em 0;
  border: none;
  border-radius: 50px;
  font-size: 100%;
  cursor: pointer;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  box-shadow: 6px 6px var(--wp--preset--color--black);
  position: relative;
}

input[type=submit]:hover {
  background-color: var(--wp--preset--color--three);
  color: #ffffff;
  box-shadow: 2px 2px 0 var(--wp--preset--color--black);
	left: 4px;
	top: 4px;
}

/* ======================================================================
   TABLET VIEW - COLUMNS
   ======================================================================*/

@media (min-width:600px) and (max-width:1024px) {

	header.main-header .wp-block-columns {
		flex-wrap: wrap;
		text-align: center;
	}

	header.main-header .wp-block-column {
		flex-basis:  calc(50% - var(--wp--style--block-gap, 2em)/2) !important;
	}

	header.main-header .wp-block-column:first-child, header.main-header .wp-block-column:nth-child(3) {
		margin-left: 0 !important;
	}

	header .wp-block-navigation__container {
		justify-content: center;
	}
}

/* ======================================================================
   MIN 1280px
   ======================================================================*/

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

	header {
		text-align: left;
	} 

	.container {
		width: 800px;
		margin: auto;
	}

	.main-header, .main-footer {
		width: 1024px;
	}

	.alignfull {
		margin-left: -112px;
    	width: 1024px;
	}


/* ======================================================================
   MIN 1280px
   ======================================================================*/

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

	.theme-settings-container {
		margin-right: -50px;
	}   

	.main-header, .main-footer {
		width: 1280px;
	}

	.alignfull {
		margin-left: -240px;
    	width: 1280px;
	}

}