/* ── Theme toggle button ── */
.navbar {
  position: relative;
}

.theme-toggle {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 1px solid #ccc;
  border-radius: 999px;
  cursor: pointer;
  width: auto;
  height: 2rem;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #666;
  font-family: 'Georgia', serif;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  background-color: rgba(128, 128, 128, 0.12);
  border-color: #999;
}

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

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

[data-theme="dark"] .theme-toggle {
  border-color: #555;
  color: #f0f0ee;
}

/* ── Dark mode — CSS variable overrides (experience + projects) ── */
[data-theme="dark"] {
  --surface: #111;
  --paper: rgba(24, 24, 24, 0.97);
  --text: #f0f0ee;
  --muted: #999;
  --soft: #bbb;
  --line: #f0f0ee;
  --edge: #2e2e2e;
  --accent: #f0f0ee;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* ── Dark mode — index.css hardcoded overrides ── */
[data-theme="dark"] body {
  background-color: #111;
  color: #f0f0ee;
}

[data-theme="dark"] .navbar {
  background-color: #111;
}

[data-theme="dark"] .nav-links a {
  color: #999;
}

[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a[aria-current="page"] {
  color: #f0f0ee;
}

[data-theme="dark"] .nav-links a::after {
  background-color: #f0f0ee;
}

/* ── index.css content overrides ── */
[data-theme="dark"] .intro p,
[data-theme="dark"] .content-list li {
  color: #bbb;
}

[data-theme="dark"] .content-list li strong {
  color: #f0f0ee;
}

[data-theme="dark"] .content-list a {
  color: #bbb;
  border-bottom-color: rgba(200, 200, 200, 0.35);
}

[data-theme="dark"] .content-list a:hover {
  color: #f0f0ee;
  border-bottom-color: #f0f0ee;
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .index-section h2 {
  color: #f0f0ee;
}

[data-theme="dark"] .cv-footer p {
  color: #888;
}

/* ── cv.css hardcoded overrides ── */
[data-theme="dark"] .cv-header h1,
[data-theme="dark"] .cv-section h2,
[data-theme="dark"] .cv-entry h3 {
  color: #f0f0ee;
}

[data-theme="dark"] .cv-detail,
[data-theme="dark"] .course-line {
  color: #bbb;
}

[data-theme="dark"] .course-line strong {
  color: #f0f0ee;
}

[data-theme="dark"] .cv-footer {
  border-top-color: #2e2e2e;
}

/* ── timeline node background fix ── */
[data-theme="dark"] .timeline-node,
[data-theme="dark"] .project-node {
  background-color: #111;
  box-shadow: 0 0 0 8px rgba(17, 17, 17, 0.95);
}

/* ── project/experience card overrides ── */
[data-theme="dark"] .timeline-card,
[data-theme="dark"] .project-card {
  background-color: #222;
  border-color: #444;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* suppress the white glare overlay on cards in dark mode */
[data-theme="dark"] .timeline-card::before,
[data-theme="dark"] .project-card::before {
  display: none;
}

/* card text inside dark cards */
[data-theme="dark"] .project-copy,
[data-theme="dark"] .timeline-copy {
  color: #c0c0c0;
}

[data-theme="dark"] .project-stack,
[data-theme="dark"] .timeline-meta {
  color: #999;
}

[data-theme="dark"] .project-title-group h3,
[data-theme="dark"] .timeline-header h2 {
  color: #f0f0ee;
}

[data-theme="dark"] .section-label,
[data-theme="dark"] .project-label,
[data-theme="dark"] .project-type,
[data-theme="dark"] .timeline-label {
  color: #888;
}

/* domain heading h2 */
[data-theme="dark"] .domain-heading h2 {
  color: #f0f0ee;
}

/* ── Working Link (primary) button — white pill, dark text ── */
[data-theme="dark"] .project-link:not(.project-link-secondary) {
  background-color: #f0f0ee;
  color: #111 !important;
  border: 1px solid #f0f0ee;
}

[data-theme="dark"] .project-link:not(.project-link-secondary):hover {
  background-color: #fff;
  opacity: 1;
  transform: translateY(-1px);
}

/* ── Source Code (secondary) button — visible border + text ── */
[data-theme="dark"] .project-link-secondary {
  background-color: transparent;
  color: #e8e8e8;
  border: 1px solid #666;
}

[data-theme="dark"] .project-link-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #aaa;
}

[data-theme="dark"] .certificate-link {
  background-color: rgba(28, 28, 28, 0.95);
  border-color: #2e2e2e;
  color: #f0f0ee;
}

[data-theme="dark"] .certificate-link:hover {
  background-color: #222;
  border-color: #555;
}