/* Modern Theme Definitions */
:root {
  --bg-color: #f5f7fa;
  --text-color: #333333;
  --card-bg: #ffffff;
  --primary-color: #006699;
  --primary-hover: #004d73;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.15), 0 6px 6px rgba(0,0,0,0.1);
  --transition-speed: 0.3s;
}

[data-theme="dark"] {
  --bg-color: #1a1a2e;
  --text-color: #e2e8f0;
  --card-bg: #16213e;
  --primary-color: #4da8da;
  --primary-hover: #73c2fb;
  --border-color: #2a3650;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.6), 0 6px 6px rgba(0,0,0,0.4);
}

body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Fix for existing background image on body/wrapper */
body, #wrapper {
  background-image: none !important;
  background-color: var(--bg-color) !important;
}

/* Modern Card Styles (Item Box) */
.item-box {
  background-color: var(--card-bg) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed) !important;
  overflow: hidden;
  margin-bottom: 30px;
}

.item-box:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg) !important;
}

.item-box figure {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}

.item-box-desc {
  padding: 20px !important;
  color: var(--text-color);
  background-color: var(--card-bg) !important;
}

.item-box-desc h4 {
  color: var(--text-color) !important;
  font-weight: 700;
  margin-bottom: 10px;
}

.item-box-desc h5 {
  color: var(--primary-color) !important;
  font-weight: 600;
}

.item-box-desc p {
  color: var(--text-color) !important;
  opacity: 0.85;
}

.item-box-desc hr, .item-box-desc div[style*="background-color: silver"] {
  background-color: var(--border-color) !important;
}

/* Headers and Titles */
.white-row {
  background-color: transparent !important;
}

.white-row h2 {
  color: var(--text-color) !important;
}

.white-row h2 strong.styleColor {
  color: var(--primary-color) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  border-radius: 6px;
  transition: all var(--transition-speed);
}

.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* Theme Toggle Button */
#theme-toggle {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4em;
  cursor: pointer;
  padding: 0 10px;
  transition: color 0.3s;
}

#theme-toggle:hover {
  color: #ddd;
}

@media (min-width: 768px) {
  #theme-toggle {
    margin-top: -5px;
  }
}

/* Top Navigation Adaptation for Dark Mode */
[data-theme="dark"] #topNav, [data-theme="dark"] header#topHead {
  background-color: #111a2a;
}
[data-theme="dark"] .nav-main > ul > li > a {
  color: #e2e8f0;
}
[data-theme="dark"] .dropdown-menu {
  background-color: #1a1a2e;
  border-color: #2a3650;
}
[data-theme="dark"] .dropdown-menu > li > a {
  color: #e2e8f0;
}
[data-theme="dark"] .dropdown-menu > li > a:hover {
  background-color: #2a3650;
}

/* Modernize Revolution Slider Captions */
.image-caption .inner {
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 30px !important;
  border-radius: 15px;
  backdrop-filter: blur(5px);
}