/**
 * Front-end styles for HTML produced by the CKEditor 5 admin editors.
 *
 * CKEditor writes a resized image as:
 *   <figure class="image image_resized" style="width:200px;height:229px;">
 *     <img src="...">
 *   </figure>
 *
 * The size lives on the <figure>, not the <img>, so without these rules the image
 * renders at its natural size and spills out of the figure on the live site.
 * CKEditor's own content stylesheet handles this in the editor; this is the minimal
 * equivalent for the public themes.
 */

figure.image {
    display: table;
    margin: 0.9em auto;
    max-width: 100%;
    clear: both;
}

figure.image img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 100%;
    min-width: 50px;
}

figure.image figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 0.6em;
    font-size: 0.85em;
    color: #555;
    text-align: center;
}

/* Alignment styles set by the image toolbar. */
figure.image-style-align-left,
figure.image.image-style-align-left {
    float: left;
    margin-right: 1.5em;
}

figure.image-style-align-right,
figure.image.image-style-align-right {
    float: right;
    margin-left: 1.5em;
}

figure.image-style-align-center,
figure.image.image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}

figure.image-style-side {
    float: right;
    margin-left: 1.5em;
    max-width: 50%;
}

/* Inline images carry the size on the <img> itself. */
span.image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
}

span.image-inline img {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}

/**
 * Inline formatting saved by the editors.
 *
 * Several themes open style.css with a blanket reset:
 *
 *   * { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: top; }
 *
 * The `font` shorthand resets font-style and font-weight along with everything else,
 * so the browser's own "<i> is italic, <strong> is bold" defaults are wiped from every
 * element on the page. Text that was italicised or bolded in the admin then arrives on
 * the live site looking completely flat.
 *
 * These rules put the defaults back. They are matched on the bare tag only: icon fonts
 * are always written as <i class="fa ..."> or <i class="icon-dental-...">, and those
 * must stay upright, so anything carrying a class is left untouched.
 */
i:not([class]),
em:not([class]),
cite:not([class]) {
    font-style: italic;
}

b:not([class]),
strong:not([class]) {
    font-weight: bold;
}

u:not([class]),
ins:not([class]) {
    text-decoration: underline;
}

s:not([class]),
strike:not([class]),
del:not([class]) {
    text-decoration: line-through;
}

/* The same reset flattens sub/sup to `vertical-align: top`, which puts both on the
   same line as the surrounding text. */
sub:not([class]),
sup:not([class]) {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub:not([class]) {
    bottom: -0.25em;
}

sup:not([class]) {
    top: -0.5em;
}