/* Blog nav + theme (see an-blog-nav.php). Loads on every page for the menu
   spacing; the header and dark-theme rules are scoped to blog pages. */

/* Gap between the main links (…Prices, Blog) and "Hire Us". */
@media (min-width: 1000px) {
	#header-outer .sf-menu > li.an-nav-hire {
		margin-left: 30px;
	}
}
@media (min-width: 1200px) {
	#header-outer .sf-menu > li.an-nav-hire {
		margin-left: 100px;
	}
}

/* Theme toggle, last item in the menu on blog pages. */
#header-outer .an-theme-toggle-item {
	display: flex;
	align-items: center;
	margin-left: 20px;
}
.an-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.an-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.14);
}
.an-theme-toggle__sun {
	display: none;
}
html[data-an-theme="dark"] .an-theme-toggle__moon {
	display: none;
}
html[data-an-theme="dark"] .an-theme-toggle__sun {
	display: block;
}

/* Blog pages: solid dark header. At the top of the page Salient makes it
   transparent with white links, which are unreadable over the white title
   area of the compact blog header. */
body:is(.single-post, .blog, .archive) #header-outer,
body:is(.single-post, .blog, .archive) #header-outer.at-top {
	background-color: #151322 !important;
}

/* ---- Dark theme (blog pages only) ---- */
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive),
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) #ajax-content-wrap,
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .container-wrap,
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .main-content,
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) #page-header-bg,
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .comment-wrap {
	background-color: #0f0d1a !important;
	color: #e6e6ef;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) :is(h1, h2, h3, h4, h5, h6, .entry-title, .widget h4, .widgettitle, .comment-reply-title, strong, b),
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) article .content-inner :is(h2, h3, strong) {
	color: #ffffff !important;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) :is(p, li, blockquote, label, .logged-in-as, cite, em) {
	color: #e6e6ef !important;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) :is(#single-below-header, #single-below-header span, #single-below-header a, .meta-category a) {
	color: #c9c9d6 !important;
	border-color: #c9c9d6;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) :is(#sidebar a, article .content-inner a, .logged-in-as a):not(.an-blog-cta-btn) {
	color: #8fa0ff !important;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) :is(textarea, input[type="text"], input[type="email"], input[type="url"], input[type="search"], .widget_search input) {
	background-color: #181627 !important;
	color: #ffffff !important;
	border-color: #2d2a42 !important;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) textarea::placeholder {
	color: #8c8ca0;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) article .content-inner figure.an-article-figure img {
	border-color: #2d2a42;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) article .content-inner figure.an-article-figure figcaption {
	color: #a8a8b8 !important;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .an-blog-cta-top {
	background: #181627;
	border-color: #2d2a42;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .an-blog-cta-top__text strong {
	color: #ffffff !important;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .an-blog-cta-top__text span {
	color: #b8b8c8 !important;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .an-blog-cta-top .an-blog-cta-btn--ghost {
	background: transparent;
	color: #ffffff !important;
	border-color: #ffffff;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .comment-wrap input#submit {
	background: #ffffff !important;
	color: #000000 !important;
}
html[data-an-theme="dark"] body:is(.single-post, .blog, .archive) .comment-wrap input#submit:hover {
	background: #3452ff !important;
	color: #ffffff !important;
}

/* Keep each menu label on one line (the row got longer with Blog and the toggle). */
#header-outer nav ul.sf-menu > li > a,
#header-outer nav ul.sf-menu .menu-title-text {
	white-space: nowrap;
}

/* Blog list page in dark: the "Read More" link and the author label keep
   their light-theme dark colors otherwise and disappear. */
html[data-an-theme="dark"] body:is(.blog, .archive) :is(a.more-link, a.more-link span, .grav-wrap + * a, .post-header .meta-author a, .post-header a) {
	color: #ffffff !important;
}