/* dark.css — overrides only */

:root{
  --bg: #0b0c0f;
  --panel: #111318;
  --card: #151821;
  --cardHover: #1a1f2b;
  --text: #e7eaf0;
  --muted: #a6adbb;
  --border: rgba(255,255,255,0.10);
  --border2: rgba(255,255,255,0.14);
  --shadow: 0 10px 25px rgba(0,0,0,0.45);
}

/* Page base */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

a { color: var(--text) !important; }
a:hover { color: #ffffff !important; }

/* Header */
header {
  background: var(--bg) !important;
}

header h2,
header h2 span,
header .kris p {
  color: var(--text) !important;
}

header .kris p { color: var(--muted) !important; }

/* Main container area */
#container {
  background: var(--bg) !important;
  box-shadow: none !important;
}

/* The grid wrapper spacing stays the same, just darken the tiles */
.cbp-item-wrap {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.cbp-item-wrap:hover {
  background: var(--cardHover) !important;
  border-color: var(--border2) !important;
  box-shadow: var(--shadow) !important;
}

/* Titles / descriptions under each image */
.cbp-l-grid-projects-title,
.cbp-l-grid-projects-desc,
.cbp-l-project-title,
.cbp-l-project-desc-title,
.cbp-l-project-details-title {
  color: var(--text) !important;
}

.cbp-l-grid-projects-desc { color: var(--muted) !important; }

/* Separator line between image and text */
.separator {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0), rgba(255,255,255,0.18), rgba(0,0,0,0)),
    linear-gradient(90deg, rgba(0,0,0,0), rgba(255,255,255,0.18), rgba(0,0,0,0)) !important;
  box-shadow: none !important;
}

/* Cubeportfolio hover overlay */
.cbp-caption-activeWrap { background: rgba(0,0,0,0.55) !important; }

/* Nav */
.nav-wrapper { background: var(--bg) !important; }
.nav-wrapper .fixed_menu {
  background: rgba(17,19,24,0.85) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Portfolio menu links */
div#top_nav a {
  color: var(--text) !important;
}
div#top_nav a::before {
  background-color: rgba(255,255,255,0.75) !important;
}

/* Buttons you have */
.button-secondary {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
}
.button-secondary:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Forms (if you ever show them) */
input, textarea, select {
  color: var(--text) !important;
}
::-webkit-input-placeholder { color: rgba(231,234,240,0.55) !important; }
:-moz-placeholder { color: rgba(231,234,240,0.55) !important; }

/* Optional: make the existing dark PNG social icons usable in dark mode:
   invert them so they appear light. */
header .social a {
  filter: invert(1) brightness(1.2);
  opacity: 0.9;
}
header .social a:hover { opacity: 1; }