.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: min(820px, calc(100% - 40px)) !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 */
}

/*Bear button setting*/
.wp-block-button.bear-btn .wp-block-button__link {
  width: auto;
  min-width: 220px;     /* desktop width */
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 16px;      /* stops the theme from resizing it */
}

@media (max-width: 600px) {
  .wp-block-button.bear-btn .wp-block-button__link {
    min-width: 0;
    width: 100%;        /* full width on phones; or use e.g. 80% */
  }
}

/* Bear buttons: red background, white text */
.wp-block-button__link,
.wp-block-button__link:link,
.wp-block-button__link:visited,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active,
.wp-block-button__link * {
  background-color: #dd4c4f !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Slightly darker on hover */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: #c94346 !important;
}

/* Dark mode: softer red, still white text */
@media (prefers-color-scheme: dark) {
  .wp-block-button__link,
  .wp-block-button__link:link,
  .wp-block-button__link:visited {
    background-color: #b8484b !important;
  }
  .wp-block-button__link:hover,
  .wp-block-button__link:focus {
    background-color: #a63f42 !important;
  }
}