/* Mixily Do / Don't block — front-end + editor styles */

.mixily-dodont {
  margin: 2rem 0;
  overflow: hidden; /* clearfix for the floated icon */
}

/* Icon floats left, replacing the drop cap */
.mixily-dodont__icon {
  float: left;
  width: 52px;
  height: 52px;
  margin-right: 14px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--ink, #1A1410);
}

.mixily-dodont__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Label sits to the right of the icon, on the same line */
.mixily-dodont__label {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
  line-height: 52px; /* vertically centre against the icon height */
}

.mixily-dodont.is-do .mixily-dodont__label {
  color: #2a7d4f;
}

.mixily-dodont.is-dont .mixily-dodont__label {
  color: var(--primary, oklch(64% 0.18 35));
}

/* Body text — wraps to the right of the floated icon */
.mixily-dodont__text {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft, #3D332A);
  margin: 0;
}

/* Kill the theme drop-cap that fires on p:first-of-type inside .post-body */
.mixily-dodont__text::first-letter {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-variation-settings: normal !important;
}

@media (max-width: 600px) {
  .mixily-dodont__text { font-size: 16px; }
}