/**
 * Dark theme for johnchoquette.com
 * WCAG AA compliant: all text meets 4.5:1 contrast (normal) or 3:1 (large).
 * Colors chosen for readability on dark backgrounds.
 */

/* === CSS variables (override :root) === */
body[data-theme="dark"] {
  --bg: #1b2335;
  --bg-alt: #293445;
  --bg-soft: #3d4a5d;
  --accent: #60a5fa;
  --accent-soft: rgba(96, 165, 250, 0.2);
  --heading-accent: #e2e8f0;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --border-subtle: rgba(148, 163, 184, 0.4);
  --border-strong: rgba(203, 213, 225, 0.5);
  --linkedin-color: #93c5fd;
  --linkedin-color-hover: #bfdbfe;
  --logo-glow: rgba(148, 163, 184, 0.5);
  --stamp-outline: rgba(251, 191, 36, 0.9);
  --stamp-outline-dashed: rgba(251, 191, 36, 0.6);
}

/* === Body & background === */
body[data-theme="dark"] {
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(139, 92, 246, 0.22), transparent 50%),
    radial-gradient(ellipse 70% 60% at 80% 10%, rgba(59, 130, 246, 0.18), transparent 45%),
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(20, 184, 166, 0.14), transparent 50%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(30, 58, 138, 0.12), transparent 70%),
    linear-gradient(180deg, #1b2335 0%, #181e2d 40%, #131c24 85%, #131323 100%);
  color: #f1f5f9;
}

body[data-theme="dark"]::before {
  opacity: 0.12;
  filter: brightness(0.5);
}

/* === Header === */
body[data-theme="dark"] .site-header {
  background: #1b2335;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

body[data-theme="dark"] .logo {
  color: #f1f5f9;
}

body[data-theme="dark"] .tagline {
  color: #94a3b8;
}

body[data-theme="dark"] .nav,
body[data-theme="dark"] .nav a {
  color: #e2e8f0;
}

body[data-theme="dark"] .nav a:hover {
  color: #f1f5f9;
}

body[data-theme="dark"] .nav-toggle-bar {
  background: #e2e8f0;
}

body[data-theme="dark"] .nav a::after {
  background: linear-gradient(to right, #60a5fa, #a78bfa);
}

body[data-theme="dark"] .nav-contact {
  color: #f1f5f9;
}

body[data-theme="dark"] .nav a.nav-linkedin {
  color: #e2e8f0;
}

body[data-theme="dark"] .nav a.nav-linkedin:hover {
  color: #93c5fd;
}

/* Mobile nav dropdown - only when nav is in dropdown mode */
@media (max-width: 1100px) {
  body[data-theme="dark"] .nav {
    background: #293445;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  }

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

  body[data-theme="dark"] .nav a:hover {
    background: transparent;
    color: #f1f5f9;
  }
}

/* === Hero === */
body[data-theme="dark"] .hero-text h2 {
  color: #f1f5f9;
}

body[data-theme="dark"] .hero-welcome {
  color: #fbbf24;
}

body[data-theme="dark"] .hero-subtitle {
  color: #e2e8f0;
}

body[data-theme="dark"] .hero-intro {
  color: #e2e8f0;
}

body[data-theme="dark"] .hero-image {
  border: none;
  padding: 4px;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #14b8a6 100%);
}

body[data-theme="dark"] .btn.primary {
  background: #1b2335;
  border: 2px solid #ffffff;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(27, 35, 53, 0.4);
}

body[data-theme="dark"] .btn.primary:hover {
  background: #ffffff;
  border: 2px solid #fbbf24;
  color: #000000;
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.25);
}

body[data-theme="dark"] .btn.ghost {
  background: rgba(41, 52, 69, 0.8);
  color: #f1f5f9;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

body[data-theme="dark"] .btn.ghost:hover {
  background: rgba(62, 76, 95, 0.9);
  color: #f1f5f9;
}

/* Hero stamp - dark variant with light text */
body[data-theme="dark"] .hero-stamp {
  background: #293445;
  border-color: var(--stamp-outline);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .hero-stamp::after {
  background: radial-gradient(
    ellipse 50% 30% at 28% 18%,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 70%
  );
}

body[data-theme="dark"] .hero-stamp__top,
body[data-theme="dark"] .hero-stamp__focus {
  color: #fbbf24;
}

body[data-theme="dark"] .hero-stamp__icon,
body[data-theme="dark"] .hero-stamp__icon svg,
body[data-theme="dark"] .hero-stamp__icon svg path {
  fill: #fbbf24;
  color: #fbbf24;
}

body[data-theme="dark"] .hero-stamp__ring-text text {
  fill: #fbbf24;
}

/* === Section headers === */
body[data-theme="dark"] .section-header h2 {
  color: #f1f5f9;
}

body[data-theme="dark"] .section-header p {
  color: #e2e8f0;
}

body[data-theme="dark"] .subsection-heading {
  color: #e2e8f0;
}

/* === Cards === */
body[data-theme="dark"] .card {
  background: rgba(41, 52, 69, 0.85);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(148, 163, 184, 0.1);
  color: #f1f5f9;
}

body[data-theme="dark"] .card h3,
body[data-theme="dark"] .card h4 {
  color: #e2e8f0;
}

body[data-theme="dark"] .skill-card-icon {
  color: #fbbf24;
}

body[data-theme="dark"] .card p {
  color: #cbd5e1;
}

body[data-theme="dark"] .certification-link {
  color: #93c5fd;
}

body[data-theme="dark"] .certification-link:hover {
  color: #bfdbfe;
}

/* Certification logos - invert for dark bg */
body[data-theme="dark"] .certification-logo--nng,
body[data-theme="dark"] .certification-logo--ixdf,
body[data-theme="dark"] .certification-logo--emerson {
  filter: brightness(0) invert(1) opacity(0.9);
}

/* === Skill stamp === */
body[data-theme="dark"] .skill-stamp {
  background: #1e293b;
  border-color: var(--stamp-outline);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .skill-stamp__icon,
body[data-theme="dark"] .skill-stamp__icon svg,
body[data-theme="dark"] .skill-stamp__icon svg path,
body[data-theme="dark"] .skill-stamp__focus,
body[data-theme="dark"] .skill-stamp__ring-text text {
  fill: #fbbf24;
  color: #fbbf24;
}

/* === Inspiration card === */
body[data-theme="dark"] .inspiration-card {
  background: rgba(41, 52, 69, 0.85);
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(148, 163, 184, 0.1);
}

body[data-theme="dark"] .inspiration-card .inspiration-quote,
body[data-theme="dark"] .inspiration-card .inspiration-quote::before {
  color: #e2e8f0;
}

body[data-theme="dark"] .inspiration-card .inspiration-quote::before {
  color: #fbbf24;
}

body[data-theme="dark"] .inspiration-card .inspiration-name {
  color: #e2e8f0;
}

body[data-theme="dark"] .inspiration-card .inspiration-copy p {
  color: #cbd5e1;
}

body[data-theme="dark"] .inspiration-quote {
  color: #e2e8f0;
}

body[data-theme="dark"] .inspiration-quote::before {
  color: #e2e8f0;
}

body[data-theme="dark"] .inspiration-name {
  color: #e2e8f0;
}

body[data-theme="dark"] .inspiration-copy p {
  color: #cbd5e1;
}

/* Inspiration stamp */
body[data-theme="dark"] .inspiration-stamp {
  background: #293445;
  border-color: rgba(34, 197, 94, 0.7);
}

body[data-theme="dark"] .inspiration-stamp__icon,
body[data-theme="dark"] .inspiration-stamp__icon svg,
body[data-theme="dark"] .inspiration-stamp__icon svg path,
body[data-theme="dark"] .inspiration-stamp__icon svg circle {
  color: #4ade80;
  fill: #4ade80;
  stroke: #4ade80;
}

body[data-theme="dark"] .inspiration-stamp__icon svg circle.compass-center {
  fill: #293445;
}

/* === Testimonials === */
body[data-theme="dark"] #testimonials .testimonials-item .inspiration-name {
  color: #e2e8f0;
}

body[data-theme="dark"] #testimonials .testimonials-item .testimonial-content p:not(.inspiration-name) {
  color: #cbd5e1;
}

/* Testimonial logos - light for dark bg */
body[data-theme="dark"] .testimonial-logo {
  filter: brightness(0) invert(1) opacity(0.85);
}

/* === Brand logos (Partners) === */
body[data-theme="dark"] .brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 12px var(--logo-glow));
  opacity: 0.9;
}

body[data-theme="dark"] .brand-name {
  color: #f1f5f9;
}

body[data-theme="dark"] .brand-item--current .brand-current-tenure,
body[data-theme="dark"] .brand-item--current .brand-current-icon {
  color: #fbbf24;
}

body[data-theme="dark"] .brand-item--current .brand-hover-content .brand-name {
  color: #ffffff;
}

body[data-theme="dark"] .brand-item--current .brand-current-icon svg path,
body[data-theme="dark"] .brand-item--current .brand-current-icon svg circle {
  stroke: #fbbf24;
}

/* === Contact section === */
body[data-theme="dark"] .contact-copy h3 {
  color: #f1f5f9;
}

body[data-theme="dark"] .contact-copy p,
body[data-theme="dark"] .contact-highlights,
body[data-theme="dark"] .contact-note {
  color: #e2e8f0;
}

body[data-theme="dark"] .contact-form-wrapper::before {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 70%
  );
}

body[data-theme="dark"] .contact-form-icon {
  background: #1b2335;
  border: 2px solid #ffffff;
}

body[data-theme="dark"] .contact-form-icon .coffee-icon path,
body[data-theme="dark"] .contact-form-icon .coffee-icon line {
  stroke: #ffffff;
}

body[data-theme="dark"] .contact-form {
  background: rgba(41, 52, 69, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
  color: #f1f5f9;
}

body[data-theme="dark"] .field label {
  color: #94a3b8;
}

body[data-theme="dark"] .field input,
body[data-theme="dark"] .field textarea {
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.5);
  color: #1b2335;
}

body[data-theme="dark"] .field input::placeholder,
body[data-theme="dark"] .field textarea::placeholder {
  color: #64748b;
}

body[data-theme="dark"] .field input:focus,
body[data-theme="dark"] .field textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.5);
  background: #ffffff;
}

body[data-theme="dark"] .form-note {
  color: #94a3b8;
}

body[data-theme="dark"] .form-message--success {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.5);
}

body[data-theme="dark"] .form-message--error {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.5);
}

body[data-theme="dark"] .top-link {
  color: #94a3b8;
}

body[data-theme="dark"] .top-link:hover {
  color: #f1f5f9;
}

/* === Footer === */
body[data-theme="dark"] .site-footer {
  background: linear-gradient(to top, #1b2335, #131323);
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

body[data-theme="dark"] .footer-content,
body[data-theme="dark"] .footer-content p {
  color: #94a3b8;
}

body[data-theme="dark"] .icon.fa-linkedin {
  color: #93c5fd;
}

body[data-theme="dark"] .icon.fa-linkedin:hover {
  color: #bfdbfe;
}

/* === Formbutton floating modal (dark theme) - match in-page contact form === */
body[data-theme="dark"] #formbutton-modal {
  background: rgba(41, 52, 69, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
  color: #f1f5f9;
}

/* Dark + minimal cards: match transparent contact form */
body[data-theme="dark"][data-cards="minimal"] #formbutton-modal {
  background: transparent;
  border: none;
  box-shadow: none;
}

body[data-theme="dark"] #formbutton-body {
  background: transparent;
}

body[data-theme="dark"] #formbutton-form label {
  color: #94a3b8;
}

body[data-theme="dark"] #formbutton-form input:not([type="submit"]):not([type="reset"]),
body[data-theme="dark"] #formbutton-form textarea {
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.5);
  color: #1b2335;
}

body[data-theme="dark"] #formbutton-form input::placeholder,
body[data-theme="dark"] #formbutton-form textarea::placeholder {
  color: #64748b;
}

body[data-theme="dark"] #formbutton-form input:focus:not([type="radio"]):not([type="checkbox"]),
body[data-theme="dark"] #formbutton-form textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.5);
  background: #ffffff;
}

body[data-theme="dark"] #formbutton-form [type="submit"] {
  background: #1b2335;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 20px rgba(27, 35, 53, 0.4);
}

body[data-theme="dark"] #formbutton-form [type="submit"]:hover {
  background: #ffffff;
  border: 2px solid #fbbf24;
  color: #1b2335;
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.25);
}

body[data-theme="dark"] #formbutton-formStatus {
  background: rgba(41, 52, 69, 0.98);
}

body[data-theme="dark"] #formbutton-description {
  background: transparent;
}

body[data-theme="dark"] #formbutton-title {
  background: #1b2335;
}

/* === Formbutton floating button (dark theme) - match CTA === */
body[data-theme="dark"] #formbutton-button {
  background: #1b2335 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 6px 20px rgba(27, 35, 53, 0.4) !important;
}

@media (min-width: 721px) and (hover: hover) {
  body[data-theme="dark"] #formbutton-button:hover {
    background: #ffffff !important;
    border: 2px solid #fbbf24 !important;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.25) !important;
  }
  body[data-theme="dark"] #formbutton-button:hover path,
  body[data-theme="dark"] #formbutton-button:hover line {
    stroke: #000000 !important;
  }
}

/* === Hero card (if used) === */
body[data-theme="dark"] .hero-card {
  background: rgba(41, 52, 69, 0.9);
  border-color: rgba(96, 165, 250, 0.3);
  color: #f1f5f9;
}

body[data-theme="dark"] .hero-card h3 {
  color: #e2e8f0;
}

body[data-theme="dark"] .hero-card ul,
body[data-theme="dark"] .hero-note {
  color: #cbd5e1;
}

/* === Minimal cards (data-cards="minimal") - grid layout kept, card styling removed === */
body[data-theme="dark"][data-cards="minimal"] .card,
body[data-theme="dark"][data-cards="minimal"] .card--full-width {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0.5rem 0 1rem;
}

body[data-theme="dark"][data-cards="minimal"] .inspiration-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

body[data-theme="dark"][data-cards="minimal"] .contact-form {
  background: transparent;
  border: none;
  box-shadow: none;
}