/* GitHub-style alert notices */
.page__content .notice--primary,
.page__content .notice--connect,
.page__content .notice--info,
.page__content .notice--warning,
.page__content .notice--danger,
.page__content .notice--important {
  background-color: transparent !important;
  box-shadow: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 6px 6px 0 !important;
  margin: 1.5em 0 !important;
  padding: 0.75em 1em !important;
  font-size: 0.95em !important;
}
.page__content .notice--primary {
  border-left: 4px solid #1f6feb !important;
}
.page__content .notice--connect {
  border-left: 4px solid #f6ff91 !important;
}
.page__content .notice--info {
  border-left: 4px solid #238636 !important;
}
.page__content .notice--important {
  border-left: 4px solid #8957e5 !important;
}
.page__content .notice--warning {
  border-left: 4px solid #da3633  !important;
}
.page__content .notice--danger {
  border-left: 4px solid #9e6a03 !important;
}

/* The colored "NOTE / TIP / etc." header line */
.notice--primary::before,
.notice--connect::before,
.notice--info::before,
.notice--warning::before,
.notice--danger::before,
.notice--important::before {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
  font-size: 0.9em;
  letter-spacing: 0.01em;
}

/* Blue — NOTE */
.notice--primary {
  background-color: transparent !important;
  box-shadow: none !important;
}
.notice--primary::before {
  content: "ℹ️  Note";
  color: #1f6feb;
}

/* Yellow — CONNECT */
.notice--connect {
  background-color: transparent !important;
  box-shadow: none !important;
}
.notice--connect::before {
  content: "💡  Want to connect?";
  color: #f6ff91;
}

/* Green — TIP */
.notice--info {
  background-color: transparent !important;
  box-shadow: none !important;
}
.notice--info::before {
  content: "💡  Tip";
  color: #238636;
}

/* Purple — IMPORTANT */
.notice--important {
  background-color: transparent !important;
  box-shadow: none !important;
}
.notice--important::before {
  content: "❗  Important";
  color: #8957e5;
}

/* Red — WARNING */
.notice--warning {
  background-color: transparent !important;
  box-shadow: none !important;
}
.notice--warning::before {
  content: "🛑  Caution";
  color: #da3633;
}

/* Dark Yellow — CAUTION */
.notice--danger {
  background-color: transparent !important;
  box-shadow: none !important;
}
.notice--danger::before {
  content: "⚠️  Warning";
  color: #9e6a03;
}

/* Clean up paragraph spacing inside notices */
.notice--primary p,
.notice--connect p,
.notice--info p,
.notice--warning p,
.notice--danger p,
.notice--important p {
  margin: 0;
}

.notice--primary p + p,
.notice--connect p + p,
.notice--info p + p,
.notice--warning p + p,
.notice--danger p + p,
.notice--important p + p {
  margin-top: 0.5em;
}