/*
 * arx-content.local.css - presentation for classes the Article WYSIWYG editor emits into saved content.
 *
 * The editor's own stylesheet (/lib/article/css/arx-content.css) styles content INSIDE the editor,
 * but it also restyles bare elements (p, h2, figure, img, links, tables) and defines :root color
 * variables - loading it site-wide would override each theme's typography/colors. So this file
 * intentionally contains ONLY the editor's layout/alignment CLASSES (align-*, outset-*) plus the
 * minimal figure/figcaption rules those classes depend on.
 *
 * Every rule is scoped under section[data-section] - the section regions a template declares are the
 * ONLY place edited content is rendered (they sit inside the theme, never around it). This keeps
 * these rules from touching any theme chrome even if a class name coincides.
 *
 * Rules copied from arx-content.css so on-site rendering matches the editor. Keep in sync if the
 * editor's outset offset (24px) or these classes change.
 */

/* Figure media alignment baseline (editor wraps images in <figure>). */
section[data-section] figure > img,
section[data-section] figure > iframe,
section[data-section] figure > pre,
section[data-section] figure > div {
    vertical-align: middle;
}

section[data-section] figure figcaption {
    display: block;
    font-style: normal;
    margin-top: 0.25em;
    font-size: 12px;
    line-height: 1.5;
}

/* Alignment classes */
section[data-section] .align-left {
    text-align: left;
}

section[data-section] .align-center {
    text-align: center;
}

section[data-section] .align-center img {
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
}

section[data-section] .align-center figcaption {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

section[data-section] .align-right {
    text-align: right;
}

section[data-section] .align-right img {
    margin-left: auto;
}

section[data-section] .align-right figcaption {
    text-align: right;
    margin-left: auto;
}

section[data-section] .align-justify {
    text-align: justify;
}

/* Outset (full-bleed) classes. The editor pulls content outward by a 24px offset. */
section[data-section] .outset-right {
    position: relative;
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
    transform: translateX(24px) translate3d(0, 0, 0);
    left: calc(24px * -1);
}

section[data-section] .outset-left {
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
    transform: translateX(calc(24px * -1)) translate3d(0, 0, 0);
}

section[data-section] .outset-both {
    position: relative;
    width: calc(100% + 24px + 24px);
    max-width: calc(100% + 24px + 24px);
    transform: translateX(-50%) translate3d(0, 0, 0);
    left: 50%;
}