.bear-callout {
  position: relative;
  box-sizing: border-box;
  max-width: 300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: rgba(206, 247, 188, 0.15);   /* #CEF7BC @ 15% */
  border: 1px solid rgba(57, 161, 18, 0.10);     /* #39A112 @ 10% */
  border-radius: 6px;
  padding: 16px 20px 16px 26px;
  font-family: "Helvetica", system-ui, sans-serif;
}

.bear-callout * {
  font-family: inherit;
}

.bear-callout::before {
  content: "";
  position: absolute;
  top: -1px;      /* sits over the 1px border */
  bottom: -1px;
  left: -1px;
  width: 6px;
  background-color: rgba(57, 161, 18, 0.80);     /* #39A112 @ 80% */
  border-radius: 6px 0 0 6px;  /* rounded left, straight right */
  z-index: 1;
}

.single .entry-content > * {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.entry-media, .entry-header, .entry-footer {
  max-width: 880px !important;
}

.entry-content a {
  color: #dd4c4f !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content a:hover {
  color: #dd4c4f !important;
  opacity: 0.8;
}

.single .entry-content > .bear-callout {
  max-width: 820px !important;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  .entry-content .bear-callout.has-background {
    background-color: rgba(20, 184, 40, 0.15) !important;  /* #14B828 @ 15% */
    border-color: rgba(20, 184, 40, 0.10) !important;      /* #14B828 @ 10% */
    color: #E0E0E0 !important;
  }

  .entry-content .bear-callout *:not(a) {
    color: #E0E0E0 !important;
  }

  .entry-content .bear-callout::before {
    background-color: #355F3A !important;                  /* ribbon */
  }
}
/* ---------- Dark mode: blog Night Mode toggle ---------- */
.night-mode .entry-content .bear-callout {
  background-color: rgba(20, 184, 40, 0.15) !important;  /* #14B828 @ 15% */
  border-color: rgba(20, 184, 40, 0.10) !important;      /* #14B828 @ 10% */
  color: #E0E0E0 !important;
}

.night-mode .entry-content .bear-callout *:not(a) {
  color: #E0E0E0 !important;
}

.night-mode .entry-content .bear-callout::before {
  background-color: #355F3A !important;                  /* ribbon */
}