/* ==========================================================================
   Dark Mode Styles
   ========================================================================== */

/* --- Variables --- */

body.dark-mode {
  --bg-color: #1a1a1a;
  --container-bg: #2c2c2c;
  --text-color: #f0f0f0; 
  --text-color-dark: #0f151b; 
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  --primary-color: #7cdfaf;
  --secondary-color: #4a7c91;
  --tertiary-color: #a19f8c;
  --accent-color: #ffcf56;
}

/* --- Layout --- */

body.dark-mode header {
  background-color: #ffcf56;
}

body.dark-mode main .container h2 {
  color: var(--primary-color);
}

/* Header components */

body.dark-mode .logo,
body.dark-mode header .dark-mode-container ion-icon {
  color: #1a1a1a;
}

body.dark-mode .logo {
  background-color: transparent;
  border-color: #1a1a1a;
}

/* Navigation Menu */

body.dark-mode .menu {
  background-color: #3e3d3be8;
}

body.dark-mode .menu-link.active {
  color:rgb(0, 0, 0);
  background-color: var(--accent-color);
}

/* --- About Me Section --- */

body.dark-mode #about-me .about-me-content {
  background-color: var(--primary-color);
  border: 1.8px solid #f1f1f1;
}


body.dark-mode #about-me .about-me-content p {
  color: var(--text-color-dark);
}

body.dark-mode #about-me .about-me-image {
  background-color: var(--accent-color);
  border: 1.8px solid #f2f2f2;
}

body.dark-mode #about-me .btn.btn-primary {
  color: #1a1a1a;
}

body.dark-mode #about-me .btn.btn-secondary {
  background-color: #444;
  color: #f0f0f0;
}

.dark-mode .social-links a ion-icon {
  color: #212529;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Timeline Section */

body.dark-mode .timeline-date {
  color: var(--text-color-dark);
}

body.dark-mode .timeline-content a {
  color: var(--primary-color);
}

body.dark-mode .timeline-content a::after {
  background-color: var(--primary-color);
}

body.dark-mode .timeline-content a:hover {
  color: var(--accent-color);
}

body.dark-mode .timeline-content a:hover::after {
  background-color: var(--accent-color);
}

/* Contact Form */

body.dark-mode #contact-form input,
body.dark-mode #contact-form textarea {
  background-color: #3a3a3a;
  color: var(--text-color);
  border-color: transparent;
}

body.dark-mode #contact-form input:focus,
body.dark-mode #contact-form textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(255, 207, 86, 0.3);
}

body.dark-mode #contact-form button:hover {
  background-color: var(--primary-color);
  color: var(--text-color-dark);
  transform: translateY(-2px);
}

/* --- Footer --- */ 

body.dark-mode footer {
  background-color: #2c2c2c;
  color: #f0f0f0;
}

/* --- Media Queries --- */

@media (max-width: 1320px) {

  body.dark-mode .menu {
    background-color: var(--accent-color);
  }

  body.dark-mode .menu a,
  body.dark-mode .menu-link:hover,
  body.dark-mode .menu-link.active {
    color: #1a1a1a;
  }
}