/* General Improvements for Dark Mode */
body, .app-container, .markdown-parent {
  background-color: #121212; /* Deep black background for consistency */
  color: #f8f9fa; /* Light grey text for readability */
  margin: 0;
  padding: 0;
}

/* Article Card */
.article-card:hover {
  border: 4px solid darkgreen; /* Green for hover effect */
  border-radius: 0.4rem;
  transition: border-color 0.3s ease; /* Smooth hover transition */
}

/* Dropdown Items */
.dropdown-items, .nav-dropdown-items {
  font-size: 18px; /* Slightly smaller for balance */
  color: #e9ecef; /* Light grey text for contrast */
  font-family: 'Trebuchet MS', sans-serif;
  text-align: center;
}

/* Image Item Styling */
.img-item {
  display: flex;
  justify-content: center;
  font-size: 20px; /* Adjusted for balance */
  font-family: 'Trebuchet MS', sans-serif;
  color: #e9ecef; /* Matches text color */
}

img[src*="#portfolio"] {
  width: 100%; /* Make responsive for better usability */
  max-width: 900px;
  height: auto; /* Maintain aspect ratio */
  justify-content: center;
}

img[src*="#wetlandportfolio"] {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* Card Background and Borders */
.col-12 {
  background-color: #121212; /* Slightly lighter than the body */
  margin: 0;
  padding: 1rem; /* Add spacing for content readability */
  border-radius: 0.5rem; /* Rounded edges for a polished look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Subtle shadow */
}

/* Markdown Styling */
.markdown {
  background-color: #121212; /* Consistent with the app's theme */
  color: #f8f9fa; /* Light grey for readability */
  padding: 1rem; /* Add spacing */
  margin: 0;
  border-radius: 0.25rem; /* Match the theme */
}

.markdown h1, .markdown h2, .markdown h3, 
.markdown h4, .markdown h5, .markdown h6 {
  color: lightgreen; /* Green for headings */
  margin-bottom: 0.5rem; /* Add spacing for readability */
}

/* Paragraphs */
.markdown p {
  background-color: transparent; /* Remove extra backgrounds */
  color: #e9ecef; /* Consistent text color */
  margin-bottom: 1rem;
}

/* Tables */
.markdown table {
  width: 100%;
  border-collapse: collapse;
  background-color: #1e1e1e;
  color: #e9ecef;
  margin-bottom: 1rem;
  /* overflow-x: auto;
  white-space: nowrap; */
}

.markdown th, .markdown td {
  border: 1px solid #343a40; /* Dark border for subtle separation */
  padding: 5px;
  font-size: 14px; /* Improved readability */
  text-align: left;
}

.markdown th {
  background-color: #212529; /* Dark header for contrast */
  color: #f8f9fa;
}

/* Links */
.markdown a {
  color: green; /* Red for hyperlinks */
  text-decoration: none;
}

.markdown a:hover {
  color: red; /* Dark red on hover */
  text-decoration: underline;
}

/* Accessibility Enhancements */
:focus {
  outline: 2px solid #04ff00; /* Green focus outline */
  outline-offset: 2px;
}

/* Smooth Transitions for Interactive Elements */
button, .dropdown-items, .article-card, a {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

a {
  color: green !important;
  text-decoration: none !important;
}

a:hover {
  color: red !important; /* Optional hover effect */
  text-decoration: none !important;
}

/* Center photography images from Markdown */
.markdown img[src*="/photography/"] {
  display: block;         /* ensures we can center with margin auto */
  margin: 20px auto;      /* centers horizontally */
  max-width: 80%;         /* keeps it responsive */
  height: auto;           /* preserves aspect ratio */
  border-radius: 6px;     /* optional: rounded corners */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); /* subtle shadow */
}