/*
	Biffin Boy's dark theme + light/dark toggle.
	Load after main.css. Dark overrides only apply under html[data-theme="dark"]
	(set by assets/js/theme.js); light mode is main.css untouched.

	Palette
	  page      #16181a    surface   #1f2224    raised   #2a2e30
	  line      #34393c    hover     #3a403d
	  text      #d6d9d7    strong    #eceeed    muted    #a3aba6
	  link      #6fcadb    accent    #b1ddab (site green)   button  #3d6b37
*/

/* ---------- Toggle button (both themes) ---------- */

.theme-toggle,
.theme-toggle:hover,
.theme-toggle:active {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25em;
	height: 2.25em;
	padding: 0;
	margin: 0;
	border: solid 2px #c1cac5;
	border-radius: 50%;
	background: transparent;
	color: #6b7770;
	font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols 2", "Apple Symbols", sans-serif;
	font-size: 1em;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	vertical-align: middle;
}

.theme-toggle:hover {
	background: #e7eae8;
}

.theme-toggle:focus-visible {
	outline: solid 3px #5f9c58;
	outline-offset: 2px;
}

.theme-toggle-icon {
	font-size: 1.2em;
	line-height: 1;
}

.theme-toggle .theme-icon-sun {
	display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
	display: inline;
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
	display: none;
}

/* Visually hidden text label (still read by screen readers). */
.theme-toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Desktop nav: pin to the right so the existing nav items don't move. */
#nav li.theme-toggle-item,
#nav li.theme-toggle-item:hover {
	position: absolute;
	right: 1.25em;
	top: 0;
	margin: 0;
	height: 3.25em;
	display: flex;
	align-items: center;
}

/* Undo the template's "#nav li span" link styling for the toggle's inner spans. */
#nav li.theme-toggle-item .theme-toggle span,
#nav li.theme-toggle-item:hover .theme-toggle span {
	position: static;
	top: 0;
	display: inline;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	-moz-transition: none;
	-webkit-transition: none;
	-ms-transition: none;
	transition: none;
}

#nav li.theme-toggle-item .theme-toggle .theme-icon-sun,
html[data-theme="dark"] #nav li.theme-toggle-item .theme-toggle .theme-icon-moon {
	display: none;
}

html[data-theme="dark"] #nav li.theme-toggle-item .theme-toggle .theme-icon-sun {
	display: inline;
}

#nav li.theme-toggle-item .theme-toggle .theme-toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Mobile title bar copy (added by theme.js; the title bar only shows <= 980px). */
#titleBar .theme-toggle-titlebar,
#titleBar .theme-toggle-titlebar:hover {
	position: absolute;
	right: 8px;
	top: 5px;
	width: 34px;
	height: 34px;
	z-index: 1002;
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	background: transparent;
}

#titleBar .theme-toggle-titlebar:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ---------- Dark theme ---------- */

html[data-theme="dark"] {
	color-scheme: dark;
	background: #16181a;
}

html[data-theme="dark"] body {
	background: #16181a;
}

html[data-theme="dark"] body,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	color: #d6d9d7;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] b,
html[data-theme="dark"] strong {
	color: #eceeed;
}

html[data-theme="dark"] a {
	color: #6fcadb;
}

html[data-theme="dark"] header > p,
html[data-theme="dark"] ul.meta {
	color: #a3aba6;
}

html[data-theme="dark"] h2.major {
	border-top-color: #34393c;
}

html[data-theme="dark"] h2.major span {
	background: #1f2224;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] ul.divided > li,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] table.default tr {
	border-top-color: #34393c;
}

html[data-theme="dark"] blockquote {
	border-left-color: #34393c;
}

html[data-theme="dark"] ul.menu li {
	border-left-color: #34393c;
}

html[data-theme="dark"] pre,
html[data-theme="dark"] code {
	color: #d6d9d7;
}

html[data-theme="dark"] code {
	background: #2a2e30;
}

html[data-theme="dark"] .rounded-grey {
	background-color: #2a2e30;
	color: #d6d9d7;
}

/* Buttons */
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="reset"],
html[data-theme="dark"] button,
html[data-theme="dark"] .button {
	background: #3d6b37;
	color: #fff;
}

html[data-theme="dark"] input[type="button"]:hover,
html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="dark"] input[type="reset"]:hover,
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .button:hover {
	background: #4a7d44;
}

html[data-theme="dark"] input[type="button"]:active,
html[data-theme="dark"] input[type="submit"]:active,
html[data-theme="dark"] input[type="reset"]:active,
html[data-theme="dark"] button:active,
html[data-theme="dark"] .button:active {
	background: #335c2e;
}

html[data-theme="dark"] input[type="button"].alt,
html[data-theme="dark"] input[type="submit"].alt,
html[data-theme="dark"] input[type="reset"].alt,
html[data-theme="dark"] button.alt,
html[data-theme="dark"] .button.alt {
	background: #3a403d;
	color: #eceeed;
}

html[data-theme="dark"] input[type="button"].alt:hover,
html[data-theme="dark"] input[type="submit"].alt:hover,
html[data-theme="dark"] input[type="reset"].alt:hover,
html[data-theme="dark"] button.alt:hover,
html[data-theme="dark"] .button.alt:hover {
	background: #464d49;
}

html[data-theme="dark"] input[type="button"].alt:active,
html[data-theme="dark"] input[type="submit"].alt:active,
html[data-theme="dark"] input[type="reset"].alt:active,
html[data-theme="dark"] button.alt:active,
html[data-theme="dark"] .button.alt:active {
	background: #2f3432;
}

/* Toggle in dark mode */
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .theme-toggle:active {
	background: transparent;
	border-color: #4d5451;
	color: #f3d97a;
}

html[data-theme="dark"] .theme-toggle:hover {
	background: #2a2e30;
}

html[data-theme="dark"] #titleBar .theme-toggle-titlebar {
	border-color: rgba(255, 255, 255, 0.35);
	background: transparent;
}

/* Lists */
html[data-theme="dark"] ul.contact li a {
	background: #3a403d;
}

/* Font Awesome glyphs on the contact tiles (e.g. if an icon class is used) */
html[data-theme="dark"] ul.contact li a:before {
	color: #eceeed;
}

html[data-theme="dark"] ul.special li a:before {
	background: #3a403d;
	color: #eceeed;
}

html[data-theme="dark"] ul.special li:hover a:before {
	background: #4a5a57;
}

/* Forms */
html[data-theme="dark"] form label {
	color: #d6d9d7;
}

html[data-theme="dark"] form input[type="text"],
html[data-theme="dark"] form input[type="email"],
html[data-theme="dark"] form input[type="password"],
html[data-theme="dark"] form select,
html[data-theme="dark"] form textarea {
	background: #16181a;
	border-color: #34393c;
	color: #d6d9d7;
}

html[data-theme="dark"] form input[type="text"]:focus,
html[data-theme="dark"] form input[type="email"]:focus,
html[data-theme="dark"] form input[type="password"]:focus,
html[data-theme="dark"] form select:focus,
html[data-theme="dark"] form textarea:focus {
	border-color: #5f9c58;
}

html[data-theme="dark"] form ::-webkit-input-placeholder { color: #8d948f !important; }
html[data-theme="dark"] form :-moz-placeholder { color: #8d948f !important; }
html[data-theme="dark"] form ::-moz-placeholder { color: #8d948f !important; }
html[data-theme="dark"] form :-ms-input-placeholder { color: #8d948f !important; }

/* Tables */
html[data-theme="dark"] table.default th {
	color: #eceeed;
}

html[data-theme="dark"] table.default thead {
	background: #2a2e30;
	color: #eceeed;
}

/* Header */
html[data-theme="dark"] #header {
	background: #1f2224;
}

html[data-theme="dark"] #header .logo {
	border-top-color: #34393c;
}

html[data-theme="dark"] #header .logo div {
	background: #1f2224;
}

html[data-theme="dark"] #header .logo p {
	color: #a3aba6;
}

/* Nav (desktop) */
html[data-theme="dark"] #nav {
	background-color: rgba(31, 34, 36, 0.95);
	box-shadow: 0 1px 0 #2a2e30;
}

html[data-theme="dark"] #nav li a,
html[data-theme="dark"] #nav li span {
	color: #c9cecb;
}

html[data-theme="dark"] #nav li:hover a,
html[data-theme="dark"] #nav li:hover span,
html[data-theme="dark"] #nav li.active a,
html[data-theme="dark"] #nav li.active span {
	background: #3a403d;
	color: #fff;
}

html[data-theme="dark"] #nav li.current a {
	background: #3d6b37;
	color: #fff;
}

/* Dropdown menus (dropotron) */
html[data-theme="dark"] .dropotron {
	background: #2a2e30;
	color: #eceeed;
	box-shadow: 0 1em 2em 0 rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .dropotron li > a,
html[data-theme="dark"] .dropotron li > span {
	color: #d6d9d7;
}

html[data-theme="dark"] .dropotron li:hover > a,
html[data-theme="dark"] .dropotron li:hover > span,
html[data-theme="dark"] .dropotron li.active > a,
html[data-theme="dark"] .dropotron li.active > span {
	color: #fff;
	background: #3a403d;
}

html[data-theme="dark"] .dropotron.level-0:before {
	border-bottom-color: #2a2e30;
}

/* Banner (already dark in main.css; just lift the low-contrast text) */
html[data-theme="dark"] #banner .content p {
	color: #9aa39e;
}

/* Main */
html[data-theme="dark"] #main {
	background: #1f2224;
	border-top-color: #3d6b37;
	border-bottom-color: #2a2e30;
}

/* Footer */
html[data-theme="dark"] #footer h2.major span {
	background: #16181a;
}

html[data-theme="dark"] #copyright {
	background: #1f2224;
	color: #a3aba6;
}

html[data-theme="dark"] #copyright .menu li {
	border-color: #34393c;
}

/* Mobile title bar and nav panel (already dark in main.css; align with palette) */
html[data-theme="dark"] #titleBar {
	background-color: rgba(22, 24, 26, 0.92);
}

html[data-theme="dark"] #titleBar .toggle:before {
	background: #3d6b37;
	color: #fff;
}

html[data-theme="dark"] #navPanel {
	background-color: #1f2224;
}

html[data-theme="dark"] #navPanel .link {
	color: #b9c0bc;
	border-top-color: #34393c;
}

html[data-theme="dark"] #navPanel .depth-0 {
	color: #eceeed;
}