/* Readability, accessibility, mobile menu and night mode.
   Loaded after twentyeleven.css and phexkinder-custom.css. */

:root {
	--link: #3d6a22;          /* 6.4:1 on white (the old #96c46c only had 2.0:1) */
	--link-hover: #2f5a17;
	--text: #222;
	--text-soft: #595959;
	--panel: #fff;
	--border: #ddd;
	--heading: #111;
	color-scheme: light;
}

/* ---------- Readability ---------- */
body,
input,
textarea {
	color: var(--text);
}

a,
#site-title a:focus,
#site-title a:hover,
#site-title a:active,
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active,
#site-generator a:hover {
	color: var(--link);
}

a:hover,
a:focus,
a:active {
	color: var(--link-hover);
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid #e0a526;
	outline-offset: 2px;
}

.entry-content,
.entry-summary {
	font-size: 17px;
	line-height: 1.75;
}

.entry-content p {
	margin-bottom: 1.25em;
}

.entry-meta,
.entry-meta a,
.widget-title,
.widget_recent_entries .post-date,
.post-date {
	color: var(--text-soft);
}

#site-description {
	color: var(--text-soft);
}

.widget_recent_entries li {
	margin-bottom: 0.6em;
}

.widget_recent_entries .post-date {
	display: block;
	font-size: 12px;
}

.entry-title,
.entry-title a,
#site-title a,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content strong {
	color: var(--heading);
}

.entry-content img,
.entry-content blockquote {
	max-width: 100%;
	height: auto;
}

/* ---------- Menu: keyboard and touch ---------- */
#access ul li:focus-within > ul {
	display: block;
}

#access {
	position: relative;
}

#theme-toggle {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	background: transparent;
	border: 1px solid #555;
	border-radius: 4px;
	color: #eee;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 5px 9px;
}

#theme-toggle:hover {
	background: #333;
}

@media (max-width: 800px) {
	/* Submenus are always open on small screens, so they work without hover. */
	#access ul,
	#access li {
		float: none;
		margin-left: 0;
	}

	#access ul ul {
		display: block;
		float: none;
		position: static;
		width: auto;
		box-shadow: none;
	}

	#theme-toggle {
		top: 10px;
		transform: none;
	}

	#access ul ul a {
		background: transparent;
		border-bottom: 0;
		color: #ccc;
		font-size: 13px;
		padding: 7px 1.2em 7px 2.4em;
		width: auto;
	}

	#access > .menu-menu-1-container > .menu > ul > li > a {
		font-weight: bold;
	}

	#access li:hover > a,
	#access a:focus {
		background: #333;
		color: #fff;
	}

	#access ul ul li:hover > a {
		background: #333;
	}

	.entry-content,
	.entry-summary {
		font-size: 16px;
		line-height: 1.7;
	}
}

/* ---------- Night mode ---------- */
html[data-theme="dark"] {
	--link: #a9d17f;
	--link-hover: #c6e6a4;
	--text: #e6dccb;
	--text-soft: #b9ae9a;
	--panel: #221f1b;
	--border: #3d382f;
	--heading: #f1e8d4;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--link: #a9d17f;
		--link-hover: #c6e6a4;
		--text: #e6dccb;
		--text-soft: #b9ae9a;
		--panel: #221f1b;
		--border: #3d382f;
		--heading: #f1e8d4;
		color-scheme: dark;
	}
}

/* Everything below applies whenever the dark variables are active. */
html[data-theme="dark"] body.custom-background,
html[data-theme="dark"] body {
	background-color: #1f261c;
	background-blend-mode: multiply;
}

html[data-theme="dark"] #page,
html[data-theme="dark"] #branding,
html[data-theme="dark"] #main,
html[data-theme="dark"] #colophon,
html[data-theme="dark"] #site-generator {
	background: var(--panel);
	color: var(--text);
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .hentry,
html[data-theme="dark"] #nav-below,
html[data-theme="dark"] #nav-above,
html[data-theme="dark"] #nav-single,
html[data-theme="dark"] .widget {
	border-color: var(--border);
}

html[data-theme="dark"] #site-description {
	color: var(--text-soft);
}

html[data-theme="dark"] .entry-content blockquote,
html[data-theme="dark"] .entry-content pre,
html[data-theme="dark"] .entry-content code {
	background: #2b2722;
	color: var(--text);
}

html[data-theme="dark"] .entry-content p,
html[data-theme="dark"] .entry-content li,
html[data-theme="dark"] .entry-content td {
	color: var(--text);
}

html[data-theme="dark"] #access ul ul a {
	background: #2b2722;
	border-bottom-color: #3d382f;
	color: var(--text);
}

html[data-theme="dark"] #access li:hover > a,
html[data-theme="dark"] #access a:focus {
	background: #3a352d;
	color: #fff;
}

html[data-theme="dark"] .entry-content img {
	opacity: 0.92;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) body.custom-background,
	html:not([data-theme="light"]) body {
		background-color: #1f261c;
		background-blend-mode: multiply;
	}

	html:not([data-theme="light"]) #page,
	html:not([data-theme="light"]) #branding,
	html:not([data-theme="light"]) #main,
	html:not([data-theme="light"]) #colophon,
	html:not([data-theme="light"]) #site-generator {
		background: var(--panel);
		color: var(--text);
	}

	html:not([data-theme="light"]) hr,
	html:not([data-theme="light"]) .hentry,
	html:not([data-theme="light"]) #nav-below,
	html:not([data-theme="light"]) #nav-above,
	html:not([data-theme="light"]) #nav-single,
	html:not([data-theme="light"]) .widget {
		border-color: var(--border);
	}

	html:not([data-theme="light"]) #site-description {
		color: var(--text-soft);
	}

	html:not([data-theme="light"]) .entry-content blockquote,
	html:not([data-theme="light"]) .entry-content pre,
	html:not([data-theme="light"]) .entry-content code {
		background: #2b2722;
		color: var(--text);
	}

	html:not([data-theme="light"]) .entry-content p,
	html:not([data-theme="light"]) .entry-content li,
	html:not([data-theme="light"]) .entry-content td {
		color: var(--text);
	}

	html:not([data-theme="light"]) #access ul ul a {
		background: #2b2722;
		border-bottom-color: #3d382f;
		color: var(--text);
	}

	html:not([data-theme="light"]) #access li:hover > a,
	html:not([data-theme="light"]) #access a:focus {
		background: #3a352d;
		color: #fff;
	}

	html:not([data-theme="light"]) .entry-content img {
		opacity: 0.92;
	}
}

/* ---------- Menu buttons (groups) ---------- */
#access .submenu-toggle {
	background: transparent;
	border: 0;
	color: #eee;
	cursor: pointer;
	display: block;
	font: inherit;
	line-height: 3.333em;
	margin: 0;
	padding: 0 1.2125em;
	text-align: left;
	text-decoration: none;
}

#access .submenu-toggle .caret {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	display: inline-block;
	margin-left: 7px;
	vertical-align: middle;
}

#access li:hover > .submenu-toggle,
#access li.is-open > .submenu-toggle,
#access .submenu-toggle:focus {
	background: linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}

#access li.is-open > ul {
	display: block;
}

#access .current-menu-ancestor > .submenu-toggle,
#access a[aria-current="page"] {
	font-weight: bold;
}

@media (max-width: 800px) {
	/* Submenus are always open here, so the group buttons act as headings. */
	#access .submenu-toggle {
		cursor: default;
		font-weight: bold;
		pointer-events: none;
	}

	#access .submenu-toggle .caret {
		display: none;
	}

	#access li:hover > .submenu-toggle,
	#access .submenu-toggle:focus {
		background: transparent;
		color: #eee;
	}
}

html[data-theme="dark"] #access li:hover > .submenu-toggle,
html[data-theme="dark"] #access li.is-open > .submenu-toggle,
html[data-theme="dark"] #access .submenu-toggle:focus {
	background: #3a352d;
	color: #fff;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) #access li:hover > .submenu-toggle,
	html:not([data-theme="light"]) #access li.is-open > .submenu-toggle,
	html:not([data-theme="light"]) #access .submenu-toggle:focus {
		background: #3a352d;
		color: #fff;
	}
}

/* ---------- Search (Pagefind UI on /suche/ and the header box) ---------- */
#search {
	--pagefind-ui-scale: 0.95;
	--pagefind-ui-primary: var(--link);
	--pagefind-ui-text: var(--text);
	--pagefind-ui-background: var(--panel);
	--pagefind-ui-border: var(--border);
	--pagefind-ui-tag: var(--border);
	--pagefind-ui-border-width: 1px;
	--pagefind-ui-border-radius: 4px;
	--pagefind-ui-font: inherit;
}

#search mark {
	background: #f6e08a;
	color: #222;
}

#search .pagefind-ui__result-link {
	color: var(--link);
}

/* Header search box: a rounded field with a magnifier that grows when focused. */
#branding #searchform #s {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	float: none;
	width: 11em;
	height: 2.4em;
	margin: 0;
	padding: 0 1em 0 2.7em;
	border: 1px solid #c4c4c4;
	border-radius: 999px;
	background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 0.95em 50% / 1.1em;
	color: var(--text);
	font: inherit;
	font-size: 14px;
	box-shadow: none;
	transition: width 0.25s ease, border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

#branding #searchform #s::placeholder {
	color: var(--text-soft);
	opacity: 1;
}

#branding #searchform #s:hover {
	border-color: #8f8f8f;
}

#branding #searchform #s:focus {
	width: 17em;
	border-color: var(--link);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(61, 106, 34, 0.22);
	outline: none;
}

#branding #searchform #s::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

html[data-theme="dark"] #branding #searchform #s,
html[data-theme="dark"] #search input {
	background-color: #2b2722;
	color: var(--text);
}

html[data-theme="dark"] #branding #searchform #s {
	border-color: #4d463b;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9ae9a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
}

html[data-theme="dark"] #branding #searchform #s:hover {
	border-color: #6b6354;
}

html[data-theme="dark"] #branding #searchform #s:focus {
	border-color: var(--link);
	background-color: #322e27;
	box-shadow: 0 0 0 3px rgba(169, 209, 127, 0.28);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) #branding #searchform #s,
	html:not([data-theme="light"]) #search input {
		background-color: #2b2722;
		color: var(--text);
	}

	html:not([data-theme="light"]) #branding #searchform #s {
		border-color: #4d463b;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9ae9a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
	}

	html:not([data-theme="light"]) #branding #searchform #s:hover {
		border-color: #6b6354;
	}

	html:not([data-theme="light"]) #branding #searchform #s:focus {
		border-color: var(--link);
		background-color: #322e27;
		box-shadow: 0 0 0 3px rgba(169, 209, 127, 0.28);
	}
}

@media (prefers-reduced-motion: reduce) {
	#branding #searchform #s {
		transition: none;
	}
}

#search .pagefind-ui__search-clear {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--link);
}

#search .pagefind-ui__button {
	background: transparent;
	border: 1px solid var(--border);
	box-shadow: none;
	color: var(--link);
}