/*!
Theme Name: Wählbar 2021
Theme URI: https://jaytrees.online
Author: Jay Trees
Author URI: https://jaytrees.online
Description: A fully responsive, hand-tailored theme made with love for CO2 Abgabe e.V.
Version: 0.40.15
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: waehlbar-2021
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@font-face {
    font-family: 'Inter';
	font-display: swap;
    src: url('font/inter.ttf');
}

:root {
	--colourText: #1f2d31;

	--colourGreenLight: #e9f2eb;
	--colourGreenDark: #123a3c;
	--colourGreenGradientLight: #195b5b;
	--colourGreenGradientDark: #16222c;
	--colourGreenButton: #369494;

	--colourYellow: #ffbb2d;
	--colourYellowDark: #ff8f26;
	--colourYellowLight: #fcd61e;
	--colourYellowGradient: #ffbf1e;
	--colourYellowGradientImage: linear-gradient(45deg, transparent, var(--colourYellowDark));

    --colourRed: #d40000;
	--colourRedDark: #aa0000;
	--colourRedLight: #ff0000;

	--contentWidth: 1024px;
	--sidebarWidth: 40ch;
	--fullWidth: calc(var(--contentWidth) + 1rem + var(--sidebarWidth));

	--paddingDefaultY: 8vh;
	--paddingDefaultX: 8vw;
	--paddingDefault: var(--paddingDefaultY) var(--paddingDefaultX);

	--radiusDefault: 4px;

	--lineHeightDefault: 1.6;

	--iconChevronDownGreenDark: url('img/icon/chevron-down-green-dark.svg');
	--iconChevronDownYellow: url('img/icon/chevron-down-yellow.svg');

	--fontSizeH1: max(1em, 2.2rem);
	--fontSizeH2: max(1em, 2.0rem);
	--fontSizeH3: max(1em, 1.8rem);
	--fontSizeH4: max(1em, 1.6rem);
	--fontSizeH5: max(1em, 1.4rem);
	--fontSizeH6: max(1em, 1.2rem);

	--shadowDefault: 0 0 4px #ddd;
}

::selection {
    color: var(--colourGreenLight);
    background-color: var(--colourText);
}

html,
body {
    overflow-x: hidden;
}

@media (max-width: 600px) {
	:root {
		--paddingDefaultY: 16px;
		--paddingDefaultX: 16px;
	}
}


/**
 * Headings
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    word-wrap: anywhere;
	line-height: calc( var(--lineHeightDefault) * 0.8 );
}

h1 { font-size: var(--fontSizeH1); }
h2 { font-size: var(--fontSizeH2); }
h3 { font-size: var(--fontSizeH3); }
h4 { font-size: var(--fontSizeH4); }
h5 { font-size: var(--fontSizeH5); }
h6 { font-size: var(--fontSizeH6); }

@media(max-width: 1377px) {
	:root{
		--fontSizeH1: max(1em, 1.5rem);
		--fontSizeH2: max(1em, 1.25rem);
		--fontSizeH3: max(1em, 1.0rem);
		--fontSizeH4: max(1em, 1.0rem);
		--fontSizeH5: max(1em, 1.0rem);
		--fontSizeH6: max(1em, 1.0rem);
	}
}

@media(max-width: 768px) {
	:root{
		--fontSizeH1: max(1em, 1.6rem);
		--fontSizeH2: max(1em, 1.5rem);
		--fontSizeH3: max(1em, 1.4rem);
		--fontSizeH4: max(1em, 1.3rem);
		--fontSizeH5: max(1em, 1.2rem);
		--fontSizeH6: max(1em, 1.1rem);
	}
}

@media(max-width: 512px) {
	:root{
		--fontSizeH1: max(1em, 1.2rem);
		--fontSizeH2: max(1em, 1.18rem);
		--fontSizeH3: max(1em, 1.16rem);
		--fontSizeH4: max(1em, 1.14rem);
		--fontSizeH5: max(1em, 1.12rem);
		--fontSizeH6: max(1em, 1.1rem);
	}
}


/**
 * Inputs
 */
input,
optgroup,
select,
textarea {
    background-color: #fff;
}

select {
	position: relative;
	appearance: none;
	width: 100%;
	padding: 6px;

	border: 2px solid var(--colourGreenDark);
	border-radius: var(--radiusDefault);

	background-image: var(--iconChevronDownGreenDark);
	background-repeat: no-repeat;
	background-position: right 0.5em top 50%;
	background-size: 1.5em auto;
}

select:hover,
select:focus {
	border-color: var(--colourGreenGradientLight);
}

textarea {
	width: 100%;
}


/**
 * Typography
 */
body,
button,
input,
select,
optgroup,
textarea {
    color: var(--colourText);

    font-family: 'Inter', sans-serif;
    font-size: 12pt;

    line-height: var(--lineHeightDefault);
    text-rendering: optimizeLegibility;
}
@media (max-width: 375px) {
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
		font-size: 10pt;
	}
}


/**
 * Elements
 */
body {
	background-color: var(--colourGreenLight);
}

p {
    margin: 0 0 1em 0;
}

ul,
ol {
	margin: 0 0 1.5em 1em;
}

table {
	border-collapse: collapse;
}

th,
td {
	vertical-align: top;
}

th {
	text-align: inherit;
}

a,
a:visited {
	color: var(--colourGreenDark);
    cursor: pointer;
    text-decoration: underline;
}

a:hover,
a:focus,
a:active {
	color: var(--colourGreenGradientLight);
    text-decoration: none;
}

figcaption {
	font-size: 8pt;
}


/**
 * Buttons
 */
a.more-link,
.wp-block-button__link,
a.wp-block-button__link:visited,
.button,
a.button:visited,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    display: inline-block;
    max-width: 100%;
    padding: 6px 24px;

    border: 2px solid var(--colourGreenDark);
    border-radius: var(--radiusDefault);
    line-height: calc( var(--lineHeightDefault) * 0.8 );
    text-align: center;
    text-decoration: none;
    cursor: pointer;
	color: var(--colourGreenDark);
	background-color: transparent;

    box-sizing: border-box;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus,
.wp-block-button__link:hover,
a.wp-block-button__link:visited:hover,
a.button:hover,
button:hover,
button[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	color: #fff;
	background-color: var(--colourGreenGradientLight);
	border-color: var(--colourGreenGradientLight);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	width: 100%;
	padding: 6px 1em;
	color: var(--colourGreenDark);
	border: 2px solid var(--colourGreenDark);
	border-radius: var(--radiusDefault);
	box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	outline: none;
	border-color: var(--colourGreenGradientLight);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="range"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
input[type="time"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="color"]:hover,
textarea:hover{
	border-color: var(--colourGreenGradientLight);
}

a.more-link,
input[type="submit"],
button[type="submit"],
.button.primary {
	color: #fff;
	background-color: var(--colourGreenDark);
}

.button.danger,
.button.danger:hover {
	color: #fff;
	background-color: var(--colourRed);
}

.dev-share-buttons a:visited {
	color: #fff;
}

a.button svg.feather,
button svg.feather {
	height: 1.1em;

	vertical-align: middle;
}

@media( max-width: 600px ) {
	.more-link,
	.wp-block-button__link,
	.wp-block-button__link:visited,
	.button,
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		min-width: unset;
		width: 100%;
	}
}


/**
 * Header
 */
.site-header-wrapper {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: repeat( 2, auto );
}

.site-header {
	color: #fff;
	background-color: var(--colourGreenDark);
	border-bottom: 1px solid #d9d9d9;
}

.single-massnahmenpaket .site-header,
.archive .site-header,
.home .site-header {
	padding: 0 var(--paddingDefaultX);
}

header.page-header,
.site-header-wrapper {
	max-width: var(--contentWidth);
	margin: 0 auto;
	padding: 2rem var(--paddingDefaultX);
	box-sizing: content-box;
}

.home .site-header-wrapper {
	padding-left: 0;
	padding-right: 0;
}


@media (max-width: 1024px) {
	.site-header-wrapper {
		padding-left: var(--paddingDefaultX);
		padding-right: var(--paddingDefaultX);
	}
}

@media (max-width: 600px) {
	.site-header-wrapper {
		grid-template-columns: auto max-content;
		padding: var(--paddingDefaultY) var(--paddingDefaultX);
	}

	.site-header-wrapper .main-navigation {
		grid-column: 2 / 3;
	}
	.site-header-wrapper .main-navigation.toggled {
		grid-column: 1 / 2;
	}
}


/**
 * Header: Title
 */
.site-title {
	margin: 1.5em 0 0;
	font-size: calc(64px - var(--lineHeightDefault) * 1em - 0.2em);
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-branding {
	display: grid;
	gap: 0.2em 0.8em;
	grid-template-columns: max-content auto;
	grid-template-rows: repeat(3, auto);
	align-items: center;
}

.site-branding > :nth-child(1) {
	grid-row: 1 / 3;
}

.site-branding > :nth-child(3) {
	grid-column: 2 / 3;
}

.site-branding img {
	display: block;
	width: auto;
	max-height: 64px;
}

.site-branding p {
	margin: 0;
}

@media (max-width: 768px) {
	.site-branding {
		display: block;
	}

	.site-branding > :nth-child(1) {
		display: none;
	}
}


/**
 * Header: Social
 */
.site-social-menu-header {
	grid-column: 2 / 3;

	justify-self: flex-end;
}

.site-footer-menu ul,
.site-social-menu ul,
.site-social-menu-header ul {
	margin: 0;
	padding: 0;

	list-style-type: none;
}

.site-footer-menu ul li,
.site-social-menu ul li,
.site-social-menu-header ul li {
	display: inline-block;
}

.site-social-menu ul li a[href],
.site-social-menu-header ul li a[href] {
	display: block;
	width: 2em;

	white-space: nowrap;
	visibility: hidden;
}

.site-social-menu-header ul li a[href] {
	width: 1em;
}

.site-social-menu ul li a[href]::before,
.site-social-menu-header ul li a[href]::before {
	content: '';

	display: inline-block;
	width: 2em;
	height: 2em;

	background-repeat: no-repeat;
	background-size: contain;

	vertical-align: middle;
	visibility: visible;
}

.site-social-menu-header ul li a[href]::before {
	width: 1em;
	height: 1em;
}

.site-social-menu ul li a[href*="instagram"]::before,
.site-social-menu-header ul li a[href*="instagram"]::before {
	background-image: url( 'img/icon/instagram.svg' );
}

.site-social-menu ul li a[href*="facebook"]::before,
.site-social-menu-header ul li a[href*="facebook"]::before {
	background-image: url( 'img/icon/facebook.svg' );
}

.site-social-menu ul li a[href*="twitter"]::before,
.site-social-menu-header ul li a[href*="twitter"]::before {
	background-image: url( 'img/icon/twitter.svg' );
}

.site-social-menu ul li a[href*="linkedin"]::before,
.site-social-menu-header ul li a[href*="linkedin"]::before {
	background-image: url( 'img/icon/linkedin.svg' );
}


/**
 * Header
 */
@media (max-width: 600px) {
	.site-title {
		font-size: 1.2em;
		line-height: 1.8;
	}

	.site-social-menu-header {
		grid-column: auto;

		align-self: flex-end;
	}

	.site-branding {
		grid-row: 1 / 3;
	}
}


/**
 * Main Navigation
 */
.main-navigation {
	grid-column: 1 / 2;
}

.main-navigation a {
	text-align: left;
	text-decoration: underline;
	color: var(--colourGreenLight);
}

.main-navigation ul {
	flex-wrap: wrap;
}

.main-navigation ul li {
	margin-right: 1em;
}

.main-navigation ul.sub-menu li,
.main-navigation ul li:last-of-type {
	margin-right: 0;
	padding-right: 0;
	border-right: none;
}

.main-navigation ul .sub-menu {
	transition: top 0.4s ease, opacity 0.4s ease;
	top: 120%;

	background-color: var(--colourGreenLight);
	opacity: 0;
}

.main-navigation ul .sub-menu a {
	text-decoration: none;
}

.main-navigation ul .sub-menu .current-menu-item a,
.main-navigation ul .sub-menu a:hover {
	color: #fff;
	background-color: var(--colourGreenGradientLight);
}
@media (max-width: 600px) {
	.main-navigation ul .sub-menu .current-menu-item a,
	.main-navigation ul .sub-menu a:hover {
		color: var(--colourYellow);
		background-color: transparent;
	}
}

.main-navigation ul li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: calc( 0.8em * var(--lineHeightDefault) );
	height: calc( 0.8em * var(--lineHeightDefault) );
	margin-left: 0.6ch;
	vertical-align: middle;

	background-image: url( 'img/icon/chevron-down-green-white.svg' );
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.main-navigation ul li.menu-item-has-children:hover .sub-menu {
	top: 100%;
	left: -10px;
	opacity: 1;
}

.main-navigation ul ul a {
	width: 100%;
	padding: 4px 12px;

	color: var(--colourGreenDark);
	box-sizing: border-box;
}

.main-navigation ul li.current-menu-parent > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li a:hover {
	color: #fff;
	text-decoration: none;
}

.main-navigation ul ul li.current-menu-item a,
.main-navigation ul ul li a:hover {
	color: var(--colourText);
}

.main-navigation li.current-menu-item a::before,
.main-navigation a:hover::before {
	opacity: 1;
}

.main-navigation .menu-toggle {
	min-width: auto;
	padding: 0;
	margin: 0;
	background-color: transparent;
	border: none;
	text-align: right;
	color: #fff;
}

.menu-main-container {
	margin-top: var(--paddingDefault);
}

@media screen and (min-width: 1025px) {
	.main-navigation ul ul {
		width: 256px;
		max-height: 60vh;

		overflow: hidden;
		border-radius: 4px;

		background-color: var(--colourGreenLight);
	}

	.menu-main-container {
		margin-top: var(--paddingDefault);

		text-align: right;
	}
}

@media screen and (min-width: 37.5em) {
	.main-navigation ul ul {
		flex-direction: column;
	}
}

@media (max-width: 600px) {
	.main-navigation ul ul {
		position: static;

		float: none;

		box-shadow: none;
	}

	.main-navigation ul ul a {
		color: #fff;
	}

	.main-navigation ul .sub-menu {
		background-color: transparent;
	}

	.main-navigation ul li.menu-item-has-children .sub-menu {
		opacity: 1;
	}

	.main-navigation ul ul li.current-menu-item a {
		background-color: var(--colourGreenDark);
	}

}


/**
 * Main Content
 */
article.massnahmenpaket,
article.event_listing,
article.post,
article.page,
.site-main .post-navigation,
.site-main .post-navigation + a,
.comments-area {
	position: relative;
	display: block;
	max-width: var(--contentWidth);
	margin: var(--paddingDefaultY) auto;
	padding: var(--paddingDefault);
	box-sizing: content-box;

	background-color: #fff;
	box-shadow: var(--shadowDefault);
}
@media (max-width: 375px) {
	/* iPhone SE */
	article.massnahmenpaket,
	article.event_listing,
	article.post,
	article.page,
	.site-main .post-navigation,
	.site-main .post-navigation + a,
	.comments-area {
		margin-top: 0;
	}
}
/* News */
article.post-922 {
	background-color: transparent;
	box-shadow: none;
	padding: 0;
}
/* Massnahmenpaket */
article.massnahmenpaket .number {
	position: absolute;
	top: 0;
	right: 0;
	padding: var(--paddingDefaultY) 1em 1em 1em;

	font-weight: bold;
	text-align: center;

	border-radius: 0 0 0 var(--radiusDefault);
	color: #fff;
	background-color: var(--colourGreenDark);
	z-index: 0;
	box-sizing: content-box;
}
article.massnahmenpaket h1 + .number {
	line-height: var(--fontSizeH1);
	font-size: calc(var(--fontSizeH1) * var(--lineHeightDefault));
}

article.massnahmenpaket h2 + .number {
	line-height: var(--fontSizeH2);
	font-size: calc(var(--fontSizeH2) * var(--lineHeightDefault));
}
article.massnahmenpaket .entry-title {
	margin-right: calc(2em + 1ch);
}

.entry-header,
.post-thumbnail {
	max-width: var(--fullWidth);
	margin: 0 auto;
}

.page-content,
.entry-wrapper,
.entry-content,
.entry-summary,
.entry-footer {
	margin: 1.5em 0 0;
}

.home .site-wrapper {
	padding: 0;
}

@media(max-width: 600px) {
	.site-wrapper {
		padding: 0;
	}

	.entry-content {
		margin: 0;
	}
}

@media(max-width: 512px) {
	.archive .site-header,
	.single-massnahmenpaket .site-header-wrapper,
	.single-massnahmenpaket .site-wrapper,
	.archive .site-wrapper {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

.widget-area {
	width: var(--sidebarWidth);
}

@media(max-width: 1377px) {
	.widget-area {
		width: 100%;
		max-width: var(--sidebarWidth);
	}
}


/**
 * Front Page
 */
.front-page article {
	margin-top: 0;
}
.front-page.site-wrapper {
	max-width: unset;
	margin: 0;
}

.front-page .site-main {
	padding: 0;
}

.front-page article {
	max-width: 100%;
	padding: 0;

	background-color: transparent;
	box-shadow: none;
}

.front-page .post-thumbnail,
.front-page .entry-header {
	max-width: var(--contentWidth);
	padding: 2rem var(--paddingDefaultX) 0 var(--paddingDefaultX);
	box-sizing: content-box;
}


/**
 * Groups
 */
.wp-block-group {
	padding: var(--paddingDefault);

	background-color: var(--colourGreenLight);
}

.wp-block-group:nth-of-type(even) {
	color: #fff;
	background-color: var(--colourGreenGradientLight);
}

.wp-block-group:first-of-type {
	padding-top: 0;
}

.wp-block-group p:last-of-type {
	margin-bottom: 0;
}

.wp-block-group .wp-block-group__inner-container {
	max-width: var(--contentWidth);
	margin: 0 auto;
}

.wp-block-group.fullwidth .wp-block-group__inner-container {
	max-width: 100%;
}

.wp-block-group .wp-block-group__inner-container .wp-block-button__link {
	color: #fff;
	background-color: var(--colourGreenDark);
}

.wp-block-group figure {
	margin: 0;
}


/**
 * Footer
 */
.site-footer {
	padding: 0 var(--paddingDefaultX);

	color: #fff;
	background-color: var(--colourGreenDark);
}

.site-info,
.site-footer-menu,
.site-social-menu {
	width: var(--contentWidth);
	max-width: 100%;
	margin: auto;

	padding: 1rem 0;
	box-sizing: border-box;
}

.site-footer a {
	color: inherit;
}


/**
 * Misc
 */
.disabled,
[disabled] {
    opacity: 0.4;

	cursor: default;
}

.uppercase {
	text-transform: uppercase;
}

.alignleft {
	float: none;
}