/* Incept LLC Custom Styles - Dark Mode */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto+Slab:wght@400;500;700&display=swap');

:root {
  --fontTitles: 'Roboto Slab', serif;
  --fontBody: 'Lato', sans-serif;
  --accent: #ffd234;
  --accent-light: #ffe066;
  --accent-dark: #e6bc2e;
  --light: rgba(255, 255, 255, 0.05);
  --textDark: #fff;
  --textMedium: #ccc;
  --textLight: #999;
  --borderLight: rgba(255, 255, 255, 0.1);
}

html {
  background: #1a1a1a;
}

body {
  background: #1a1a1a;
  color: #e0e0e0;
}

.innerbody {
  background: #1a1a1a;
}

section {
  background: #1a1a1a;
  color: #e0e0e0;
}

section.image.alt {
  background: #222;
  border-color: #333;
}

section h1,
section h2,
section h3,
section h4 {
  color: #fff;
}

/* Header font weights */
h1 {
  font-weight: 700;
}

h2 {
  font-weight: 700;
  font-size: 2.2rem;
}

h3 {
  font-weight: 500;
}

h4 {
  font-weight: 500;
}

section p,
section li {
  color: #ccc;
}

blockquote {
  color: #bbb;
  border-left-color: var(--accent);
}

blockquote p {
  color: #bbb;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-light);
}

/* Button styling */
.button {
  background: var(--accent);
  color: #1a1a1a;
}

.button:hover {
  background: var(--accent-light);
  color: #1a1a1a;
}

/* Contact form */
form.form {
  background: transparent;
}

form label,
form label.inborder {
  color: #ccc;
  background: #1a1a1a !important;
}

label.inborder::after,
div.box label.inborder::after {
  background: #1a1a1a !important;
}

input, textarea, select {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #444;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}

/* Box elements */
.box {
  background: #222;
  border-color: #333;
}

/* Remove any gap above header */
.innerbody {
  padding-top: 0;
  margin-top: 0;
}

header {
  margin-top: 0;
}

/* Hide empty/stray paragraphs */
header + p,
section + p {
  display: none;
}

/* Header nav - right justify */
header > .container > div:first-child {
  flex: 0 0 auto !important;
}

header > .container > div.nav {
  flex: 1 1 auto !important;
  text-align: right !important;
}

header > .container > div.nav .navnav > ul {
  justify-content: flex-end !important;
}

/* Hide empty third div */
header > .container > div:nth-child(3) {
  display: none !important;
}

/* Active nav indicator - yellow */
header .navnav > ul > li::after {
  background: var(--accent) !important;
}

/* Mobile menu - dark mode */
header .navnav {
  background: #1a1a1a !important;
}

header .navnav ul {
  background: #1a1a1a !important;
}

header .navnav a {
  color: #fff !important;
}

header .navnav a:hover {
  color: var(--accent) !important;
}

/* Mobile hamburger icon */
header .hamburger span,
header .hamburger span::before,
header .hamburger span::after {
  background: #fff !important;
}

/* Footer */
section.hasbackgroundcolor + footer {
  margin-top: 0 !important;
}

footer {
  background: #111;
  border-top-color: #333;
}

footer.dark {
  background: #111;
}

/* Footer nav - right justify to match header */
footer > div > .container > div:first-child {
  flex: 0 0 auto !important;
}

footer > div > .container > div:nth-child(2) {
  flex: 1 1 auto !important;
  text-align: right !important;
}

footer > div > .container > div:nth-child(2) ul {
  justify-content: flex-end !important;
}

/* Hide empty third div in footer */
footer > div > .container > div:nth-child(3) {
  display: none !important;
}

/* Footer copyright row */
footer .copyright-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

footer .copyright-row > div:first-child {
  text-align: left !important;
}

footer .copyright-row > div:last-child {
  text-align: right !important;
}

footer .copyright-row .buttons.social {
  justify-content: flex-end !important;
}

footer .copyright-row .buttons.social .button.icon {
  background: transparent !important;
  border: none !important;
}

footer .copyright-row .buttons.social .button.icon:hover {
  background: transparent !important;
}

/* Invert black line art images for dark theme */
section.image img,
section.wide img {
  filter: invert(1);
}

/* Vertically center content in two-column sections */
section.image .twocols {
  align-items: center !important;
}

section.image .twocols > div.text,
section.image .twocols > div.image {
  height: auto !important;
  align-self: center !important;
}

/* Contact page - vertically center text alongside form */
section.contact .container.twocols {
  align-items: center !important;
}

section.contact .box {
  border-color: var(--accent) !important;
  border-width: 1px !important;
}