/* Dark Theme for Beautiful Jekyll Website */

/* Toggle Button next to Logo */
.theme-toggle {
  background: none !important;
  border: 2px solid var(--link-col);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
  color: var(--link-col) !important;
  padding: 0 !important;
  margin-left: 15px;
  vertical-align: middle;
}

.theme-toggle:hover {
  background: var(--link-col) !important;
  color: var(--page-col) !important;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --page-col: #2C1810;           /* Dark brown background */
  --text-col: #F5E8C7;          /* Light beige text */
  --link-col: #FF8A4C;          /* Bright orange links */
  --hover-col: #FF6B2B;         /* Brighter orange hover */
  --navbar-col: #3A2418;        /* Darker navbar */
  --navbar-text-col: #F5E8C7;   /* Light navbar text */
  --navbar-border-col: #5A3825; /* Darker border */
  --footer-col: #3A2418;        /* Dark footer */
  --footer-text-col: #D6C6A9;   /* Muted footer text */
  --footer-link-col: #F5E8C7;   /* Light footer links */
  --footer-hover-col: #FF8A4C;  /* Orange footer hover */
}

/* Apply dark theme colors */
[data-theme="dark"] body {
  background-color: var(--page-col);
  color: var(--text-col);
}

/* Headers */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-col);
}

/* Paragraphs and general text */
[data-theme="dark"] p,
[data-theme="dark"] div,
[data-theme="dark"] span,
[data-theme="dark"] li {
  color: var(--text-col);
}

/* Lists */
[data-theme="dark"] ul,
[data-theme="dark"] ol {
  color: var(--text-col);
}

/* Emphasis and strong text */
[data-theme="dark"] em,
[data-theme="dark"] i {
  color: var(--footer-text-col);
}

[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: var(--text-col);
  font-weight: bold;
}

/* Horizontal rules */
[data-theme="dark"] hr {
  border-color: var(--navbar-border-col);
  background-color: var(--navbar-border-col);
}

/* Page content containers */
[data-theme="dark"] .container,
[data-theme="dark"] .container-md,
[data-theme="dark"] .main-content {
  color: var(--text-col);
}

[data-theme="dark"] .navbar-custom {
  background-color: var(--navbar-col);
  border-bottom-color: var(--navbar-border-col);
}

[data-theme="dark"] .navbar-custom .navbar-brand,
[data-theme="dark"] .navbar-custom .navbar-nav .nav-link {
  color: var(--navbar-text-col);
}

[data-theme="dark"] .navbar-custom .navbar-nav .nav-link:hover {
  color: var(--link-col);
}

[data-theme="dark"] a {
  color: var(--link-col);
}

[data-theme="dark"] a:hover {
  color: var(--hover-col);
}

/* Dark theme for cards and content blocks */
[data-theme="dark"] .event {
  background: rgba(58, 36, 24, 0.8);
  border-color: var(--navbar-border-col);
  color: var(--text-col);
}

[data-theme="dark"] .events-container {
  background: linear-gradient(135deg, #3A2418 0%, #2C1810 100%);
  border-color: var(--navbar-border-col);
}

[data-theme="dark"] .event h3 {
  color: var(--text-col);
  border-bottom-color: var(--link-col);
}

[data-theme="dark"] .event p {
  color: var(--footer-text-col);
}

[data-theme="dark"] .event ul li {
  color: var(--text-col);
}

[data-theme="dark"] .event ul li strong {
  color: var(--link-col);
}

/* Footer dark theme */
[data-theme="dark"] .footer {
  background-color: var(--footer-col);
  border-top-color: var(--navbar-border-col);
}

[data-theme="dark"] .footer,
[data-theme="dark"] .footer p,
[data-theme="dark"] .footer .list-inline-item a {
  color: var(--footer-text-col);
}

[data-theme="dark"] .footer .list-inline-item a:hover {
  color: var(--footer-hover-col);
}

/* Post and content styling */
[data-theme="dark"] .post-preview {
  border-bottom-color: var(--navbar-border-col);
}

[data-theme="dark"] .post-title {
  color: var(--text-col);
}

[data-theme="dark"] .post-subtitle {
  color: var(--footer-text-col);
}

[data-theme="dark"] .post-meta {
  color: var(--footer-text-col);
}

/* Page content styling */
[data-theme="dark"] .page-heading,
[data-theme="dark"] .page-heading h1,
[data-theme="dark"] .page-heading .page-subheading {
  color: var(--text-col) !important;
}

[data-theme="dark"] .post-heading,
[data-theme="dark"] .post-heading h1,
[data-theme="dark"] .post-heading h2 {
  color: var(--text-col) !important;
}

[data-theme="dark"] .post-subheading,
[data-theme="dark"] .page-subheading {
  color: var(--footer-text-col) !important;
}

/* Header section styling */
[data-theme="dark"] .header-section,
[data-theme="dark"] .intro-header {
  color: var(--text-col);
}

[data-theme="dark"] .intro-header h1,
[data-theme="dark"] .intro-header h2,
[data-theme="dark"] .intro-header .page-subheading,
[data-theme="dark"] .intro-header .post-subheading {
  color: var(--text-col) !important;
}

/* Ensure all markdown content is styled */
[data-theme="dark"] .markdown-content,
[data-theme="dark"] .page-content,
[data-theme="dark"] .post-content {
  color: var(--text-col);
}

[data-theme="dark"] .markdown-content h1,
[data-theme="dark"] .markdown-content h2,
[data-theme="dark"] .markdown-content h3,
[data-theme="dark"] .page-content h1,
[data-theme="dark"] .page-content h2,
[data-theme="dark"] .page-content h3,
[data-theme="dark"] .post-content h1,
[data-theme="dark"] .post-content h2,
[data-theme="dark"] .post-content h3 {
  color: var(--text-col);
}

/* Code blocks and pre elements */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: #1a1a1a;
  color: #f8f8f2;
  border-color: var(--navbar-border-col);
}

/* Tables */
[data-theme="dark"] table {
  color: var(--text-col);
}

[data-theme="dark"] table th,
[data-theme="dark"] table td {
  border-color: var(--navbar-border-col);
}

[data-theme="dark"] table thead th {
  background-color: var(--navbar-col);
}

/* Blockquotes */
[data-theme="dark"] blockquote {
  border-left-color: var(--link-col);
  color: var(--footer-text-col);
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Universal dark mode text override - ensures all text is visible */
[data-theme="dark"] p,
[data-theme="dark"] div:not(.footer):not(.navbar-custom),
[data-theme="dark"] span:not(.fa):not(.fab):not(.fas):not(.far),
[data-theme="dark"] li {
  color: var(--text-col) !important;
}

/* But preserve specific link colors */
[data-theme="dark"] a {
  color: var(--link-col) !important;
}

[data-theme="dark"] a:hover {
  color: var(--hover-col) !important;
}

/* And preserve navbar colors */
[data-theme="dark"] .navbar-custom .navbar-brand,
[data-theme="dark"] .navbar-custom .navbar-nav .nav-link {
  color: var(--navbar-text-col) !important;
}

/* And footer colors */
[data-theme="dark"] .footer,
[data-theme="dark"] .footer p,
[data-theme="dark"] .footer .list-inline-item a {
  color: var(--footer-text-col) !important;
}

/* Social media icons - preserve their original colors and visibility */
[data-theme="dark"] .footer .list-inline-item a[href*="mailto"],
[data-theme="dark"] .footer .list-inline-item a[href*="linkedin"],
[data-theme="dark"] .footer .list-inline-item a[href*="github"],
[data-theme="dark"] .footer .list-inline-item a[href*="scholar"],
[data-theme="dark"] .footer .list-inline-item a[href*="chess"],
[data-theme="dark"] .footer .list-inline-item a[href*="twitter"],
[data-theme="dark"] .footer .list-inline-item a[href*="facebook"],
[data-theme="dark"] .footer .list-inline-item a[href*="instagram"] {
  color: var(--footer-text-col) !important;
  opacity: 0.9;
}

[data-theme="dark"] .footer .list-inline-item a:hover {
  color: var(--link-col) !important;
  opacity: 1;
}

/* Font Awesome icons in footer */
[data-theme="dark"] .footer .fa,
[data-theme="dark"] .footer .fab,
[data-theme="dark"] .footer .fas,
[data-theme="dark"] .footer .far {
  color: inherit !important;
}

/* Social network links specific styling */
[data-theme="dark"] .social-links a,
[data-theme="dark"] .list-inline-item a {
  color: var(--footer-text-col) !important;
  text-decoration: none;
}

[data-theme="dark"] .social-links a:hover,
[data-theme="dark"] .list-inline-item a:hover {
  color: var(--link-col) !important;
}