/* olocolors: dark mode for Twenty Thirteen + the light/dark switch.
   Dark is the default (<html data-theme="dark">); light mode is the original theme untouched.
   Every dark rule is scoped to html[data-theme="dark"] and to screen, so printing stays light. */

:root {
	--olo-bg: #220e10;        /* page background = the theme's footer color */
	--olo-surface: #2e1719;   /* navbar, headers, inputs */
	--olo-surface-2: #3a1e21; /* hover / focus */
	--olo-border: #4a2a2d;
	--olo-text: #f1ece0;      /* 15.6:1 on --olo-bg */
	--olo-muted: #b9ad9e;     /* 8.4:1 */
	--olo-link: #f26b3a;      /* 6.1:1 */
	--olo-link-visited: #e8957d;
	--olo-link-hover: #ea9629;
}

/* ---- the switch (both modes) ------------------------------------------------ */
/* sits where the search icon was (navbar, far right); the search box moves one slot left */
.site-header .search-form { right: 62px; }
.olo-theme-toggle {
	position: absolute;
	right: 20px;
	top: 4px;
	margin: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 2px solid #d4d0ba;
	border-radius: 50%;
	background: transparent;
	color: #141412;
	box-shadow: none;
	cursor: pointer;
	line-height: 0;
}
.olo-theme-toggle:hover,
.olo-theme-toggle:focus {
	background: #220e10;
	border-color: #220e10;
	color: #fff;
}
.olo-theme-toggle svg { width: 18px; height: 18px; }
.olo-theme-toggle .olo-icon-sun { display: none; }
html[data-theme="dark"] .olo-theme-toggle .olo-icon-sun { display: inline; }
html[data-theme="dark"] .olo-theme-toggle .olo-icon-moon { display: none; }

/* ---- dark mode ---------------------------------------------------------------- */
html[data-theme="dark"] { color-scheme: dark; }

@media screen {
	html[data-theme="dark"],
	html[data-theme="dark"] body,
	html[data-theme="dark"] .site,
	html[data-theme="dark"] .post-navigation,
	html[data-theme="dark"] .error404 .page-header,
	html[data-theme="dark"] .attachment .entry-content {
		background-color: var(--olo-bg);
	}
	html[data-theme="dark"] body,
	html[data-theme="dark"] input,
	html[data-theme="dark"] textarea,
	html[data-theme="dark"] .entry-title a,
	html[data-theme="dark"] .nav-menu li a,
	html[data-theme="dark"] .menu-toggle,
	html[data-theme="dark"] .toggled-on .nav-menu li > ul a,
	html[data-theme="dark"] .toggled-on .nav-menu li:hover > a,
	html[data-theme="dark"] .toggled-on .nav-menu .children a,
	html[data-theme="dark"] .comment-reply-title small a,
	html[data-theme="dark"] .wp-caption .wp-caption-text,
	html[data-theme="dark"] .entry-caption,
	html[data-theme="dark"] .gallery-caption,
	html[data-theme="dark"] del {
		color: var(--olo-text);
	}
	html[data-theme="dark"] .site {
		border-left-color: var(--olo-border);
		border-right-color: var(--olo-border);
	}

	/* links */
	html[data-theme="dark"] a,
	html[data-theme="dark"] .entry-meta a,
	html[data-theme="dark"] .entry-meta a:hover,
	html[data-theme="dark"] .entry-content a,
	html[data-theme="dark"] .comment-content a,
	html[data-theme="dark"] .navigation a,
	html[data-theme="dark"] .post-navigation,
	html[data-theme="dark"] .author-link,
	html[data-theme="dark"] .comment-author .fn,
	html[data-theme="dark"] .comment-author .url,
	html[data-theme="dark"] .format-link .entry-title,
	html[data-theme="dark"] .format-link .entry-title a,
	html[data-theme="dark"] .nav-menu .current_page_item > a,
	html[data-theme="dark"] .nav-menu .current_page_ancestor > a,
	html[data-theme="dark"] .nav-menu .current-menu-item > a,
	html[data-theme="dark"] .nav-menu .current-menu-ancestor > a {
		color: var(--olo-link);
	}
	/* visited color only for links in text, not titles / menus / site name */
	html[data-theme="dark"] .entry-content a:visited,
	html[data-theme="dark"] .comment-content a:visited { color: var(--olo-link-visited); }
	html[data-theme="dark"] a:hover,
	html[data-theme="dark"] a:active,
	html[data-theme="dark"] .entry-title a:hover,
	html[data-theme="dark"] .navigation a:hover { color: var(--olo-link-hover); }

	/* secondary text */
	html[data-theme="dark"] .entry-meta,
	html[data-theme="dark"] .comment-meta,
	html[data-theme="dark"] .comment-meta a,
	html[data-theme="dark"] .ping-meta,
	html[data-theme="dark"] .form-allowed-tags,
	html[data-theme="dark"] .form-allowed-tags code { color: var(--olo-muted); }
	html[data-theme="dark"] ::placeholder { color: var(--olo-muted); }

	/* surfaces that were cream / beige / white */
	html[data-theme="dark"] .navbar,
	html[data-theme="dark"] .archive-header,
	html[data-theme="dark"] .page-header,
	html[data-theme="dark"] .paging-navigation,
	html[data-theme="dark"] .error404 .page-wrapper,
	html[data-theme="dark"] .attachment .hentry,
	html[data-theme="dark"] .format-aside,
	html[data-theme="dark"] .format-link,
	html[data-theme="dark"] .comment-respond,
	html[data-theme="dark"] .no-comments,
	html[data-theme="dark"] .page-links a,
	html[data-theme="dark"] .page-links > span,
	html[data-theme="dark"] pre {
		background-color: var(--olo-surface);
		color: var(--olo-text);
	}
	html[data-theme="dark"] .nav-menu li:hover > a,
	html[data-theme="dark"] .nav-menu li a:hover,
	html[data-theme="dark"] .nav-menu li:focus > a,
	html[data-theme="dark"] .nav-menu li a:focus {
		background-color: var(--olo-bg);
		color: #fff;
	}
	html[data-theme="dark"] .nav-menu .sub-menu,
	html[data-theme="dark"] .nav-menu .children { border-color: var(--olo-surface); }

	/* forms (search box) */
	html[data-theme="dark"] input,
	html[data-theme="dark"] textarea,
	html[data-theme="dark"] .site-header .search-field:focus {
		background-color: var(--olo-surface-2);
		border-color: var(--olo-border);
	}
	html[data-theme="dark"] input:focus,
	html[data-theme="dark"] textarea:focus { border-color: var(--olo-muted); }
	html[data-theme="dark"] .site-header .search-field {
		/* the theme's magnifier is a dark PNG; use a light one */
		background-color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1ece0' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E");
	}
	html[data-theme="dark"] .site-header .search-field:focus { background-color: var(--olo-surface-2); }

	/* tables, rules */
	html[data-theme="dark"] table,
	html[data-theme="dark"] td,
	html[data-theme="dark"] fieldset,
	html[data-theme="dark"] hr { border-color: var(--olo-border); }
	html[data-theme="dark"] hr { background-color: var(--olo-border); }
	html[data-theme="dark"] mark,
	html[data-theme="dark"] ins { color: #141412; }

	/* footer: widget area already #220e10; the bottom strip was beige */
	html[data-theme="dark"] .site-footer {
		background-color: var(--olo-bg);
		color: var(--olo-muted);
		border-top: 1px solid var(--olo-border);
	}
	html[data-theme="dark"] .site-footer a { color: var(--olo-muted); }
	html[data-theme="dark"] .site-footer a:hover { color: var(--olo-link-hover); }
	html[data-theme="dark"] .site-footer .widget a { color: var(--olo-link); }
	html[data-theme="dark"] .site-footer .widget a:hover { color: var(--olo-link-hover); }

	/* switch, dark variant */
	html[data-theme="dark"] .olo-theme-toggle {
		border-color: var(--olo-border);
		color: var(--olo-text);
	}
	html[data-theme="dark"] .olo-theme-toggle:hover,
	html[data-theme="dark"] .olo-theme-toggle:focus {
		background: var(--olo-bg);
		border-color: var(--olo-muted);
		color: #fff;
	}
}