/* Shoo Sar Night Mode */

/* ---- Header switch ---- */
.ssnm-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	line-height: 0;
}
.ssnm-toggle:focus-visible .ssnm-track {
	outline: 2px solid #5fbe7d;
	outline-offset: 2px;
}
.ssnm-track {
	position: relative;
	display: block;
	width: 58px;
	height: 30px;
	border-radius: 30px;
	background: #e7eaf0;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
	transition: background-color .35s ease;
	direction: ltr;
}
.ssnm-track svg {
	position: absolute;
	top: 7px;
	width: 16px;
	height: 16px;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity .3s ease, transform .45s ease;
}
.ssnm-sun {
	left: 8px;
	stroke: #f5a623;
}
.ssnm-sun circle {
	fill: #f5a623;
}
.ssnm-moon {
	right: 8px;
	stroke: #9aa3b2;
	fill: #9aa3b2 !important;
	opacity: .55;
}
.ssnm-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
	transform: translateX(28px);
	transition: transform .35s cubic-bezier(.4, 1.4, .5, 1), background-color .35s ease;
}
.ssnm-toggle:hover .ssnm-knob {
	box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.king-night .ssnm-track {
	background: #23262d;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
.king-night .ssnm-knob {
	transform: translateX(0);
	background: #5fbe7d;
}
.king-night .ssnm-sun {
	opacity: .45;
	transform: rotate(-45deg);
}
.king-night .ssnm-moon {
	opacity: 1;
	stroke: #f1f3f7;
	fill: #f1f3f7 !important;
	transform: rotate(-12deg);
}
.ssnm-toggle.ssnm-floating {
	position: fixed;
	bottom: 16px;
	left: 16px;
	z-index: 9999;
}

/* ---- Smooth change between modes ---- */
body,
.king-header,
article.hentry,
.site-footer {
	transition: background-color .3s ease, color .3s ease;
}

/* ---- Night mode: fixes and additions on top of the King theme's night styles ---- */

/* The site has one logo for both modes, so keep it visible at night. */
@media screen and (min-width: 501px) {
	html.king-night .site-branding a.king-logo {
		display: block;
	}
}
html.king-night .site-branding a.mobile-king-logo img {
	display: block;
}

/* Softer than pure black: easier on the eyes for long reading. */
html.king-night body {
	background-color: #101216;
	color: #e6e8ec;
}
html.king-night article.hentry {
	background-color: #191c22;
}
html.king-night .entry-content,
html.king-night .page .entry-content,
html.king-night .single-post .entry-content {
	color: #dfe2e7;
}
html.king-night .entry-content h2,
html.king-night .entry-content h3,
html.king-night .entry-title,
html.king-night .entry-title a {
	color: #f3f4f6;
}

/* Contact form */
html.king-night .wpforms-container input[type="text"],
html.king-night .wpforms-container input[type="email"],
html.king-night .wpforms-container textarea {
	background-color: #191c22;
	color: #e6e8ec;
	border: 1px solid #2c3038;
}
html.king-night .wpforms-container label {
	color: #e6e8ec;
}

/* Source credit box */
html.king-night .single-post .entry-content .post-source {
	background: rgba(95, 190, 125, .12);
}

/* One palette for the main surfaces at night */
html.king-night .king-header,
html.king-night .king-search-top .active {
	background-color: #101216;
}
html.king-night .post-page .hentry,
html.king-night .page-site-main,
html.king-night .site-main .page,
html.king-night .site-main-middle {
	background-color: #191c22;
}
html.king-night .site-footer,
html.king-night .fatfooter {
	background-color: #0c0e11;
}
html.king-night .widget-title,
html.king-night .widgettitle,
html.king-night .widget .wp-block-group__inner-container > h2 {
	background-color: #191c22;
	border-color: #2c3038;
}
html.king-night .king-leftmenu {
	background-color: #101216;
}
html.king-night .post-nav-np {
	background-color: #191c22;
}
html.king-night .entry-footer .tags-links a {
	border-color: #2c3038;
	color: #c9cdd4;
}

/* Sidebar blocks at night (search box, latest articles, categories) */
html.king-night .wp-block-latest-posts li {
	background: #191c22;
}
html.king-night .first-sidebar ul li a,
html.king-night .wp-block-latest-posts a {
	color: #c9cdd4;
}
html.king-night .first-sidebar ul li a:hover,
html.king-night .wp-block-latest-posts a:hover {
	color: #5fbe7d;
}
html.king-night .first-sidebar ul li {
	border-bottom-color: rgba(255, 255, 255, .06);
}
html.king-night .first-sidebar .widget,
html.king-night .first-sidebar .wp-block-search,
html.king-night .first-sidebar form[role="search"] {
	background-color: transparent;
}
html.king-night .first-sidebar .wp-block-search__inside-wrapper,
html.king-night .first-sidebar .widget_block:first-child {
	background-color: #191c22;
	border-radius: 14px;
}
html.king-night .wp-block-search__input {
	background-color: #101216;
	color: #e6e8ec;
	border: 1px solid #2c3038;
}
/* Light mode: readable hover colour in the sidebar instead of the theme's red */
.first-sidebar ul li a:hover {
	color: #3d9a5b;
}

/* ---- Header layout 7 (logo at the side, sections on a second row) ---- */
/* The grey strip above the header is not used. */
.king-top-header.top-header-07 {
	display: none;
}
.king-h07-menu .menu-item a,
.king-h07-menu .page_item a {
	color: #404b55;
	font-size: 15px;
	font-weight: 600;
}
.king-h07-menu .menu-item a:hover {
	color: #3d9a5b;
}
.king-bottom-header .king-head-nav .king-head-nav-a:hover {
	color: #3d9a5b;
}
html.king-night .king-bottom-header {
	background-color: #101216;
	box-shadow: inset 0 1px #23262d, inset 0 -1px #23262d;
}
html.king-night .king-bottom-header .king-head-nav .king-head-nav-a,
html.king-night .king-h07-menu .menu-item a {
	color: #dfe2e7;
}
html.king-night .king-bottom-header .king-head-nav .king-head-nav-a:hover,
html.king-night .king-h07-menu .menu-item a:hover {
	color: #5fbe7d;
}
html.king-night .king-leftmenu-toggle-v2:before,
html.king-night .king-leftmenu-toggle-v2:after,
html.king-night .leftmenu-toggle-line {
	background-color: #c9cdd4;
}
html.king-night .header-search-field,
html.king-night .king-search-top .king-search {
	background-color: #191c22;
	color: #e6e8ec;
}