/* University of Alberta Green & Gold Theme - Compatible with existing theme.js */
:root {
  --uofa-green: #007C41;
  --uofa-gold: #FFDB05;
  --uofa-light-green: #f2f7f5;
}

/* ---------- LIGHT MODE STYLES ---------- */
/* Remove yellow boxes from navigation */
.navbar {
  background-color: #ffffff !important;
  border-top: 4px solid var(--uofa-gold) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Fix navigation links */
.navbar .nav-item, 
.navbar .nav-link {
  background-color: transparent !important;
  color: var(--uofa-green) !important;
  font-weight: 500;
}

/* Fix active/hover states */
.navbar .nav-item.active .nav-link,
.navbar .nav-link:hover {
  background-color: transparent !important;
  color: var(--uofa-green) !important;
  font-weight: bold;
  text-decoration: underline;
}

/* Remove yellow background from About button */
.navbar .nav-item:first-child,
.navbar .nav-item:first-child .nav-link {
  background-color: transparent !important;
}

/* Headings and links in green for light mode */
h1, h2, h3, h4, h5, h6 {
  color: var(--uofa-green) !important;
}

a, a:visited {
  color: var(--uofa-green) !important;
}

a:hover {
  color: #005c31 !important;
}

/* Profile image styling */
.profile img {
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
}

/* Make sure bio texts are visible */
.profile .address p,
p:contains("Master's Student") {
  display: block !important;
  color: #000000 !important;
}

/* Ensure visibility of content */
.about-content,
.about p,
.page-content,
.profile-description {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent hiding of news and posts */
.news, 
#news, 
.news-table-wrapper,
.latest-posts,
#latest-posts,
.posts {
  display: block !important;
}

/* Explicitly show paragraphs */
p {
  display: block !important;
  visibility: visible !important;
}

/* ---------- DARK MODE STYLES ---------- */
/* Works with the data-theme attribute set by theme.js */
html[data-theme="dark"] {
  --global-bg-color: #121212;
  --global-text-color: #f0f0f0;
  --global-theme-color: var(--uofa-gold);
  background-color: #121212 !important;
}

/* Dark mode navbar */
html[data-theme="dark"] .navbar {
  background-color: #1a1a1a !important; 
  border-top: 4px solid var(--uofa-gold) !important;
  border-bottom: 1px solid #333 !important;
}

/* Dark mode navigation links */
html[data-theme="dark"] .navbar .nav-link {
  color: var(--uofa-gold) !important;
}

html[data-theme="dark"] .navbar .nav-item.active .nav-link,
html[data-theme="dark"] .navbar .nav-link:hover {
  color: var(--uofa-gold) !important;
  text-decoration: underline;
}

/* Dark mode headings */
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6 {
  color: var(--uofa-gold) !important;
}

/* Dark mode links */
html[data-theme="dark"] a, 
html[data-theme="dark"] a:visited {
  color: var(--uofa-gold) !important;
}

html[data-theme="dark"] a:hover {
  color: #ffd000 !important;
}

/* Dark mode text */
html[data-theme="dark"] p, 
html[data-theme="dark"] .profile p, 
html[data-theme="dark"] .profile .address p,
html[data-theme="dark"] .container {
  color: #f0f0f0 !important;
}

/* Dark mode profile */
html[data-theme="dark"] .profile img {
  border: 1px solid #444 !important;
}

/* Ensure dark mode toggle button is visible */
#light-toggle {
  opacity: 1 !important;
  cursor: pointer !important;
  color: var(--uofa-green) !important;
}

html[data-theme="dark"] #light-toggle {
  color: var(--uofa-gold) !important;
}

/* Fix specific icon visibility for light/dark toggle */
#light-toggle i {
  opacity: 1 !important;
}