/* ================================
   🖼️ Image Styling
=================================== */
.md-content img {
  border: 2px solid #777 !important; /* medium-dark tone */
  border-radius: 8px !important;
  padding: 6px !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(8, 8, 8, 0.3) !important; /* balanced depth */
  transition: transform 0.2s ease;
}

.md-content img:hover {
  transform: scale(1.01);
}

/* ================================
   📝 Note Box Base Styles
=================================== */
.note-box,
.info-box,
.warning-box,
.success-box {
  border-left: 5px solid;
  padding: 12px 16px;
  margin: 15px 0;
  border-radius: 6px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  color: var(--md-typeset-color);
}

/* ---------- Note Box ---------- */
.note-box {
  background-color: rgba(33, 150, 243, 0.3); /* deeper blue tone */
  border-left-color: #1976d2;
}
.note-box strong {
  color: var(--md-primary-fg-color);
}
.note-box:hover {
  background-color: rgba(33, 150, 243, 0.5); /* custom hover */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ---------- Info Box ---------- */
.info-box {
  background-color: rgba(3, 169, 244, 0.18); /* slightly lighter cyan */
  border-left-color: #03a9f4;
}
.info-box strong {
  color: #0288d1;
}
.info-box:hover {
  background-color: rgba(3, 169, 244, 0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ---------- Warning Box ---------- */
.warning-box {
  background-color: rgba(255, 202, 40, 0.25);
  border-left-color: #ffb300;
}
.warning-box strong {
  color: #b45309;
}
.warning-box:hover {
  background-color: rgba(255, 202, 40, 0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ---------- Success Box ---------- */
.success-box {
  background-color: rgba(76, 175, 80, 0.25);
  border-left-color: #4caf50;
}
.success-box strong {
  color: #2e7d32;
}
.success-box:hover {
  background-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ================================
   🌙 Dark Mode Adjustments
=================================== */
[data-md-color-scheme="slate"] .note-box {
  background-color: rgba(33, 150, 243, 0.35);
  border-left-color: #64b5f6;
}
[data-md-color-scheme="slate"] .note-box:hover {
  background-color: rgba(33, 150, 243, 0.6);
}

[data-md-color-scheme="slate"] .info-box {
  background-color: rgba(3, 169, 244, 0.35);
  border-left-color: #29b6f6;
}
[data-md-color-scheme="slate"] .info-box:hover {
  background-color: rgba(3, 169, 244, 0.6);
}

[data-md-color-scheme="slate"] .warning-box {
  background-color: rgba(255, 214, 102, 0.35);
  border-left-color: #ffd54f;
}
[data-md-color-scheme="slate"] .warning-box:hover {
  background-color: rgba(255, 214, 102, 0.6);
}

[data-md-color-scheme="slate"] .success-box {
  background-color: rgba(129, 199, 132, 0.35);
  border-left-color: #81c784;
}
[data-md-color-scheme="slate"] .success-box:hover {
  background-color: rgba(129, 199, 132, 0.6);
}

/* ================================
   🧾 Bullet List Alignment
=================================== */
.note-box ul,
.info-box ul,
.warning-box ul,
.success-box ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

/* ================================
   🧾 Hilight Over Link
=================================== */
.note-box a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
  font-weight: 500;
}
.note-box a:hover {
  text-decoration: underline;
}