/*-------------------------------------------------------------------
EDITOR STYLES  -  Driving Safety Sites

Plain CSS - no build step. Loaded on the front end AND inside the block
editor via add_editor_style(). variables.css is registered alongside it
there, or every var() in the editor would resolve to nothing.
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
HTML TAGS
-------------------------------------------------------------------*/

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-normal);
    font-weight: normal;
    line-height: var(--line-height-normal);
}
p {
    margin-bottom: var(--margin-bottom-large);
    padding: 0;
}
ul,
ol {
    margin-bottom: var(--margin-bottom-large);
}
img {
    border: none;
}
.mark,
mark {
    padding: 0;
    background-color: transparent;
}

/*-------------------------------------------------------------------
HEADINGS
-------------------------------------------------------------------*/

h1 {
    display: block;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-h1);
    font-weight: 800;
    font-style: normal;
    line-height: var(--line-height-h1);
    text-transform: uppercase;
    margin-bottom: var(--margin-bottom-large);
}
@media (max-width: 575.98px) {
    h1 {
        font-size: var(--font-size-h1-narrow);
        line-height: var(--line-height-h1-narrow);
    }
}
h2 {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-h2);
    font-weight: 400;
    line-height: var(--line-height-h2);
    text-transform: none;
    margin-bottom: var(--margin-bottom-large);
}
h2:first-of-type {
    margin-top: 0;
}
h3 {
    font-size: var(--font-size-h3);
    font-weight: bold;
    line-height: normal;
    margin-bottom: var(--margin-bottom-large);
    padding: 0;
}
/* Split from a single h4,h5,h6 rule so each is independently settable. */
h4 {
    font-size: var(--font-size-h4);
    font-weight: bold;
    margin-bottom: var(--margin-bottom-large);
    padding: 0;
}
h5 {
    font-size: var(--font-size-h5);
    font-weight: bold;
    margin-bottom: var(--margin-bottom-large);
    padding: 0;
}
h6 {
    font-size: var(--font-size-h6);
    font-weight: bold;
    margin-bottom: var(--margin-bottom-large);
    padding: 0;
}

/*-------------------------------------------------------------------
OTHER
-------------------------------------------------------------------*/

.captions {
    font-size: var(--font-size-caption);
    line-height: 1.25rem;
}
.highlight {
    color: var(--color-alternate);
}

/*-------------------------------------------------------------------
WORDPRESS ELEMENTS
-------------------------------------------------------------------*/

.wp-block-image figcaption {
    font-size: var(--font-size-small);
    font-style: italic;
}