/* On-brand dark theme override (roadmap.md #6 — the stock Kinetic
   template's white background read "blah"). Loaded after style.css so
   these rules win without editing the vendored template file directly.
   Palette matches the real app: blue accent (Theme.swift Palette.accent/
   accentDeep), not the template's stock amber. */

:root {
  --tk-bg: #12151a;
  --tk-bg-alt: #171b22;
  --tk-bg-card: #1c212a;
  --tk-border: rgba(255, 255, 255, 0.08);
  --tk-text: #e8eaed;
  --tk-text-dim: #9aa4b2;
  --tk-text-faint: #6b7480;
  --tk-accent: #5b9dd9;
  --tk-accent-deep: #3d7fbf;
}

body,
#container {
  background: var(--tk-bg) !important;
  color: var(--tk-text);
}

/* ---------- Header / Nav ---------- */
header.white-header {
  background: rgba(18, 21, 26, 0.92) !important;
  box-shadow: 0 1px 0 var(--tk-border);
  backdrop-filter: blur(6px);
}
.navbar-default {
  background: transparent !important;
}
.navbar-nav > li > a {
  color: var(--tk-text-dim) !important;
}
.navbar-nav > li > a.active,
.navbar-nav > li > a:hover {
  color: var(--tk-text) !important;
}
.navbar-nav > li > a:before {
  background: var(--tk-accent) !important;
}
a.button-two {
  border-color: var(--tk-accent) !important;
  color: var(--tk-accent) !important;
  background: transparent !important;
}
a.button-two:hover {
  background: var(--tk-accent) !important;
  color: #fff !important;
}

/* ---------- Buttons (site-wide) ---------- */
a.button-one {
  background: var(--tk-accent) !important;
  border-color: var(--tk-accent) !important;
  color: #fff !important;
}
a.button-one:hover {
  background: var(--tk-accent-deep) !important;
  border-color: var(--tk-accent-deep) !important;
}
a.btn-txt,
a.target-link {
  color: var(--tk-text-dim) !important;
}
a.btn-txt i,
a.target-link:hover {
  color: var(--tk-accent) !important;
}

/* ---------- Section titles ---------- */
.title-section span {
  color: var(--tk-accent) !important;
}
.title-section h1 {
  color: var(--tk-text) !important;
}
.title-section p {
  color: var(--tk-text-dim) !important;
}
.title-section.white span {
  color: var(--tk-accent) !important;
}
.title-section.white h1 {
  color: var(--tk-text) !important;
}
.title-section.white p {
  color: var(--tk-text-dim) !important;
}

/* ---------- Hero ---------- */
section#home-section {
  background: var(--tk-bg) !important;
}
section#home-section div.top-block2 p {
  color: var(--tk-accent) !important;
}
section#home-section div.top-block2 h1 {
  color: var(--tk-text) !important;
}
section#home-section div.top-block2 h2 {
  color: var(--tk-text-dim) !important;
  font-weight: 400 !important;
}
/* The stock template's decorative rotated background shapes point at
   Envato stock photos we never copied over (upload/k1.jpg etc, all 404) —
   hide them outright rather than leave stray borders floating. */
.image-rounded,
.image-rounded:after,
.image-rounded:before {
  display: none !important;
}

/* ---------- Features (mascot pose + copy) ---------- */
section#features-section3 {
  background: var(--tk-bg-alt) !important;
}
section#features-section3 .about-box .title-section {
  text-align: left;
  margin-bottom: 30px;
}
section#features-section3 .about-post h2 {
  color: var(--tk-text) !important;
}
section#features-section3 .about-post h2 i {
  color: var(--tk-accent) !important;
}
section#features-section3 .about-post p {
  color: var(--tk-text-dim) !important;
}
section#features-section3 .about-box > p {
  color: var(--tk-text-dim) !important;
}
section#features-section3 .about-box > a {
  color: var(--tk-accent) !important;
}
section#features-section3 .about-box > a i {
  color: var(--tk-accent) !important;
}
section#features-section3 .image-rounded,
section#features-section3 .border-rounded {
  background: none !important;
}

/* ---------- About the name ---------- */
div.about-app-section.third-style {
  background: var(--tk-bg) !important;
}
div.about-app-section .content-holder .title-section h1 {
  color: var(--tk-text) !important;
}
div.about-app-section .content-holder p,
div.about-app-section.third-style .content-holder > p {
  color: var(--tk-text-dim) !important;
}
div.about-app-section.third-style .content-holder > a {
  color: var(--tk-accent) !important;
}
div.about-app-section.third-style .content-holder > a:hover {
  color: var(--tk-accent-deep) !important;
}

/* ---------- Services tracked ---------- */
section#services-section {
  background: var(--tk-bg-alt) !important;
}
section#services-section .about-post {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: 10px;
  padding: 22px 20px;
}
section#services-section .about-post h2 {
  color: var(--tk-text) !important;
}
section#services-section .about-post h2 i {
  color: var(--tk-accent) !important;
}
section#services-section .about-post p {
  color: var(--tk-text-dim) !important;
}
section#services-section .border-rounded {
  background: none !important;
}

/* ---------- Honest status ---------- */
section#status-section.image-background2 {
  background: var(--tk-bg) !important;
}
section#status-section .about-post {
  background: var(--tk-bg-card);
  border: 1px solid var(--tk-border);
  border-radius: 10px;
  padding: 26px 20px;
}
section#status-section .about-post h2 {
  color: var(--tk-text) !important;
}
section#status-section .about-post h2 i {
  color: var(--tk-accent) !important;
}
section#status-section .about-post p {
  color: var(--tk-text-dim) !important;
}

/* ---------- Footer ---------- */
footer.pattern-style {
  background: var(--tk-bg-alt) !important;
  border-top: 1px solid var(--tk-border);
}
footer.pattern-style .title-section span {
  color: var(--tk-accent) !important;
}
footer.pattern-style .title-section h1 {
  color: var(--tk-text) !important;
}
footer.pattern-style .title-section p {
  color: var(--tk-text-dim) !important;
}
footer.pattern-style p.copyright {
  color: var(--tk-text-faint) !important;
}