/* Consistent margin-bottom for headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 16px; /* Mobile default */
}

/* Consistent margin-bottom for paragraphs and other block elements */
p, ul, ol, blockquote, div.mce-content-body > div {
    margin-bottom: 8px; /* Mobile default */
}

/* Remove margin from P tags that only contain editor buttons */
p:has(.editor-button):only-child,
p .editor-button:only-child {
    margin-bottom: 0;
}

/* Ensure editor buttons have proper spacing */
.editor-button {
    display: inline-block;
    margin-bottom: 8px;
}

/* Remove margin from paragraphs that contain only a button */
p:has(.editor-button):not(:has(text)):not(:has(*:not(.editor-button))) {
    margin-bottom: 0;
}

/* Desktop specific margins */
@media (min-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 24px;
    }

    p, ul, ol, blockquote, div.mce-content-body > div {
        margin-bottom: 16px;
    }

    .editor-button {
        margin-bottom: 16px;
    }
}