/* Shared light/dark theme overrides + toggle control for melverick.com */

.nav-actions,
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.theme-toggle {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line2, var(--line-soft, rgba(142, 186, 215, 0.18)));
  border-radius: 0;
  background: transparent;
  color: var(--ink, #f7fbff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  border-color: var(--teal, #19d5c6);
  color: var(--teal2, var(--teal-bright, #63fff1));
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--teal2, var(--teal-bright, #63fff1));
  outline-offset: 3px;
}

.theme-toggle-icon {
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  /* sun (default for dark theme — click to go light) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E") center / contain no-repeat;
}

html[data-theme="light"] .theme-toggle-icon {
  /* moon when in light mode — click to go dark */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14.5A8.5 8.5 0 0 1 9.5 3 7 7 0 1 0 21 14.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14.5A8.5 8.5 0 0 1 9.5 3 7 7 0 1 0 21 14.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Light theme: CSS variables (home + blog naming) ---- */
html[data-theme="light"] {
  color-scheme: light;
  --ink: #0d1824;
  --muted: #4a5d70;
  --quiet: #465b70;
  --bg: #f4f7fb;
  --bg2: #eef2f7;
  --bg-deep: #e8eef5;
  --panel: #ffffff;
  --panel2: #f7fafc;
  --panel-soft: #f7fafc;
  --line: rgba(15, 40, 60, 0.14);
  --line2: rgba(15, 40, 60, 0.08);
  --line-soft: rgba(15, 40, 60, 0.08);
  --teal: #006b63;
  --teal2: #006b63;
  --teal-bright: #006b63;
  --orange: #a33f00;
  --orange2: #873500;
  --orange-soft: #873500;
}

/* Home page body/nav hardcodes */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 78% 4%, rgba(15, 158, 148, 0.08), transparent 28rem),
    linear-gradient(180deg, var(--bg-deep), var(--bg) 44%, #eef3f8) !important;
  color: var(--ink);
}

html[data-theme="light"] .nav {
  background: rgba(244, 247, 251, 0.9) !important;
}

html[data-theme="light"] .mark,
html[data-theme="light"] .brand-mark {
  background: #ffffff !important;
  border-color: rgba(15, 158, 148, 0.45) !important;
  color: var(--teal) !important;
}

html[data-theme="light"] .nav-links,
html[data-theme="light"] .nav-links a {
  color: #334455 !important;
}

html[data-theme="light"] .nav-links a:hover {
  color: var(--teal) !important;
}

/* Blog / shared SiteFooter hardcodes */
html[data-theme="light"] .site-header {
  background: rgba(244, 247, 251, 0.92) !important;
}

html[data-theme="light"] .site-header nav a {
  color: #334455 !important;
}

html[data-theme="light"] .site-header nav a:hover,
html[data-theme="light"] .site-header nav a[aria-current="page"] {
  color: var(--teal-bright) !important;
}

html[data-theme="light"] .site-footer {
  background: rgba(232, 238, 245, 0.95) !important;
}

html[data-theme="light"] .footer-inner nav a {
  color: #3a4d5f !important;
}

html[data-theme="light"] .hero-lead,
html[data-theme="light"] .workforce-lead,
html[data-theme="light"] .article-dek,
html[data-theme="light"] .post-card p,
html[data-theme="light"] .prose {
  color: #3a4d5f !important;
}

html[data-theme="light"] .prose > :first-child,
html[data-theme="light"] .prose h2,
html[data-theme="light"] .prose h3,
html[data-theme="light"] .prose strong,
html[data-theme="light"] .prose blockquote {
  color: var(--ink) !important;
}

html[data-theme="light"] .editorial-note,
html[data-theme="light"] .post-card.featured,
html[data-theme="light"] .article-next,
html[data-theme="light"] .workforce-principle {
  background: linear-gradient(145deg, rgba(15, 158, 148, 0.06), rgba(232, 106, 12, 0.05)), #ffffff !important;
}

html[data-theme="light"] .category-card,
html[data-theme="light"] .workforce-directory li {
  background: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="light"] .category-card:hover {
  background: rgba(15, 158, 148, 0.08) !important;
}

html[data-theme="light"] .workforce-chart {
  background: #ffffff !important;
  box-shadow: 0 20px 50px rgba(15, 40, 60, 0.08) !important;
}

html[data-theme="light"] .prose a,
html[data-theme="light"] .article-meta a,
html[data-theme="light"] .article-rail a {
  color: var(--teal-bright) !important;
}

/* Home page panels / cards that use translucent dark fills */
html[data-theme="light"] .card,
html[data-theme="light"] .post,
html[data-theme="light"] .person,
html[data-theme="light"] .panel,
html[data-theme="light"] .gist-feature,
html[data-theme="light"] .cta {
  background-color: rgba(255, 255, 255, 0.85);
}

/* Light-theme contrast corrections for dark-theme hardcodes. */
html[data-theme="light"] .lead,
html[data-theme="light"] .profile-card p,
html[data-theme="light"] .gist-main > p {
  color: var(--muted) !important;
}

html[data-theme="light"] .context p:last-child,
html[data-theme="light"] .gist-principles li,
html[data-theme="light"] .gist-files code {
  color: var(--ink) !important;
}

html[data-theme="light"] .profile-card,
html[data-theme="light"] .gist-files {
  background: #ffffff !important;
}

html[data-theme="light"] .footer-inner a {
  color: #334455 !important;
}

html[data-theme="light"] .btn.primary,
html[data-theme="light"] .button.primary,
html[data-theme="light"] .skip-link {
  color: #ffffff !important;
}

html[data-theme="light"] .skip {
  color: var(--ink) !important;
}

html[data-theme="light"] .skip:focus {
  color: #ffffff !important;
}

/* This caption stays on a deliberately dark image overlay in both themes. */
html[data-theme="light"] .caption {
  color: #75fff4 !important;
}

@media (max-width: 620px) {
  .theme-toggle {
    width: 44px;
    height: 44px;
  }
  .nav-actions,
  .header-actions {
    gap: 6px;
  }
}