/*
 * Rich content typography (blog post bodies, product descriptions).
 *
 * Scope: only elements inside .anb-rich-content, the container that prints editor
 * HTML ({!! ... !!}). Every selector weighs exactly one class (element names sit in
 * :where()), so it beats the storefront's bare element resets (h2 { font-size: 36px },
 * ul { list-style: none; padding: 0 }, blockquote { border-left: ... }) wherever they
 * load, while any theme rule written for its own content box (.ar-prose h2,
 * .bk-prose ul ...) still wins. Sizes are in em of the container, so each theme's body size, font and
 * colours carry through. Logical properties keep lists and quotes correct in RTL.
 */
.anb-rich-content {
    overflow-wrap: break-word;
}

.anb-rich-content :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    line-height: 1.35;
    margin: 1.4em 0 .6em;
}
.anb-rich-content :where(h1) { font-size: 1.75em; }
.anb-rich-content :where(h2) { font-size: 1.5em; }
.anb-rich-content :where(h3) { font-size: 1.25em; }
.anb-rich-content :where(h4) { font-size: 1.1em; }
.anb-rich-content :where(h5, h6) { font-size: 1em; }

.anb-rich-content :where(p) {
    margin: 0 0 .85em;
}

.anb-rich-content :where(strong, b) {
    font-weight: 700;
}

.anb-rich-content :where(ul, ol) {
    margin: 0 0 .85em;
    padding-inline-start: 1.6em;
}
.anb-rich-content :where(ul) { list-style: disc; }
.anb-rich-content :where(ol) { list-style: decimal; }
.anb-rich-content :where(ul ul, ol ul) { list-style: circle; }
.anb-rich-content :where(ul ul, ul ol, ol ul, ol ol) { margin: .3em 0 0; }
.anb-rich-content :where(li) {
    display: list-item;
    list-style: inherit;
    margin: 0 0 .35em;
}
/* common.css numbers every `ol li` with its own ::before counter (no list marker); inside
   editor content the native marker above does that, in the right place for RTL too. */
.anb-rich-content :where(ol > li)::before {
    content: none;
}

.anb-rich-content :where(blockquote) {
    display: block;
    margin: 1.2em 0;
    padding: .75em 1.1em;
    border: 0;
    border-inline-start: 4px solid var(--main-color-one, currentColor);
    background: rgba(0, 0, 0, .035);
    border-radius: 0 6px 6px 0;
}
:where([dir="rtl"]) .anb-rich-content :where(blockquote) {
    border-radius: 6px 0 0 6px;
}
.anb-rich-content :where(blockquote > :last-child) {
    margin-bottom: 0;
}

.anb-rich-content :where(pre) {
    overflow-x: auto;
    white-space: pre-wrap;
}

.anb-rich-content :where(img) {
    max-width: 100%;
    height: auto;
}

.anb-rich-content > :where(:first-child) {
    margin-top: 0;
}
.anb-rich-content > :where(:last-child) {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .anb-rich-content :where(h1) { font-size: 1.5em; }
    .anb-rich-content :where(h2) { font-size: 1.35em; }
    .anb-rich-content :where(h3) { font-size: 1.18em; }
}