/* Vertical riddim
/*
/* We use only margin-top to set the vertical spacings. The styles below
/* set up the margin for content pairs (e.g. paragraph preceded by a heading).


/* Global Koenig content styles
/* -------------------------------------------------------------------- */
.koenig-editor__editor {
    color: var(--darkgrey);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
}


/* Reset margins */

.koenig-editor__editor p,
.koenig-editor__editor h1,
.koenig-editor__editor h2,
.koenig-editor__editor h3,
.koenig-editor__editor h4,
.koenig-editor__editor h5,
.koenig-editor__editor h6,
.koenig-editor__editor blockquote {
    margin: 1.6rem 0 0;
    min-width: 100%;
}


/* Heading
/* -------------------------------------------------------------------- */

.koenig-editor__editor h1,
.koenig-editor__editor h2,
.koenig-editor__editor h3,
.koenig-editor__editor h4,
.koenig-editor__editor h5,
.koenig-editor__editor h6 {
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
    font-weight: 700;
}

.koenig-editor__editor h1 {
    font-size: 2.8rem;
    line-height: 1.4em;
    letter-spacing: .04rem;
}

.koenig-editor__editor h2 {
    font-size: 2.3rem;
    line-height: 1.6em;
    letter-spacing: .04rem;
}

.koenig-editor__editor h3 {
    font-size: 2.0rem;
    line-height: 1.4em;
    letter-spacing: .04rem;
}

.koenig-editor__editor h4 {
    font-size: 1.9rem;
    line-height: 1.4em;
    letter-spacing: .06rem;
}

.koenig-editor__editor h5 {
    font-size: 1.75rem;
    line-height: 1.6em;
    letter-spacing: .04rem;
}

.koenig-editor__editor h6 {
    font-size: 1.6rem;
    line-height: 1.6em;
    letter-spacing: .06rem;
}


.koenig-editor__editor p + h1,
.koenig-editor__editor p + h2,
.koenig-editor__editor p + h3,
.koenig-editor__editor p + h4,
.koenig-editor__editor p + h5,
.koenig-editor__editor p + h6,

.koenig-editor__editor blockquote + h1,
.koenig-editor__editor blockquote + h2,
.koenig-editor__editor blockquote + h3,
.koenig-editor__editor blockquote + h4,
.koenig-editor__editor blockquote + h5,
.koenig-editor__editor blockquote + h6,

.koenig-editor__editor ul + h1,
.koenig-editor__editor ul + h2,
.koenig-editor__editor ul + h3,
.koenig-editor__editor ul + h4,
.koenig-editor__editor ul + h5,
.koenig-editor__editor ul + h6,

.koenig-editor__editor ol + h1,
.koenig-editor__editor ol + h2,
.koenig-editor__editor ol + h3,
.koenig-editor__editor ol + h4,
.koenig-editor__editor ol + h5,
.koenig-editor__editor ol + h6 {
    margin: 4.8rem 0 0;
}

/* Heading 1 vertical rhythm */

.koenig-editor__editor h1 + h1 {
    margin: 1.4rem 0 0;
}

.koenig-editor__editor h2 + h1,
.koenig-editor__editor h3 + h1 {
    margin: 1.0rem 0 0;
}

.koenig-editor__editor h4 + h1,
.koenig-editor__editor h5 + h1 {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h6 + h1 {
    margin: 0.6rem 0 0;
}

.koenig-editor__editor div + h1 {
    margin: 4.8rem 0 0;
}


/* Heading 2 */

.koenig-editor__editor h1 + h2 {
    margin: 1.6rem 0 0;
}

.koenig-editor__editor h2 + h2,
.koenig-editor__editor h3 + h2,
.koenig-editor__editor h4 + h2,
.koenig-editor__editor h5 + h2 {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h6 + h2 {
    margin: 0.4rem 0 0;
}

.koenig-editor__editor div + h2 {
    margin: 3.2rem 0 0;
}


/* Heading 3 - 6 (share common styles) */

.koenig-editor__editor h1 + h3,
.koenig-editor__editor h2 + h3,

.koenig-editor__editor h1 + h4,
.koenig-editor__editor h2 + h4,

.koenig-editor__editor h1 + h5,
.koenig-editor__editor h2 + h5,

.koenig-editor__editor h1 + h6,
.koenig-editor__editor h2 + h6 {
    margin: 1.2rem 0 0;
}

.koenig-editor__editor h3 + h4 {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h3 + h3,
.koenig-editor__editor h4 + h3,
.koenig-editor__editor h5 + h3,

.koenig-editor__editor h4 + h4,
.koenig-editor__editor h5 + h4,

.koenig-editor__editor h3 + h5,
.koenig-editor__editor h4 + h5,
.koenig-editor__editor h5 + h5,

.koenig-editor__editor h3 + h6,
.koenig-editor__editor h4 + h6 {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h5 + h6 {
    margin: 0.4rem 0 0;
}

.koenig-editor__editor h6 + h3,
.koenig-editor__editor h6 + h4,
.koenig-editor__editor h6 + h5,
.koenig-editor__editor h6 + h6 {
    margin: 0.4rem 0 0;
}

.koenig-editor__editor div + h3,
.koenig-editor__editor div + h4,
.koenig-editor__editor div + h5,
.koenig-editor__editor div + h6 {
    margin: 2.4rem 0 0;
}


/* Paragraph
/* -------------------------------------------------------------------- */

.koenig-editor__editor p,
.koenig-editor__editor blockquote,
.koenig-editor__editor ul:not(.kg-action-bar),
.koenig-editor__editor ol
 {
    font-family: georgia,serif;
    font-weight: 300;
    letter-spacing: .02rem;
    line-height: 1.6em;
    font-size: 2rem;
}

.koenig-editor__editor h1 + p {
    margin: 1.2rem 0 0;
}

.koenig-editor__editor h2 + p {
    margin: 0.8rem 0 0;
}

.koenig-editor__editor h3 + p,
.koenig-editor__editor h4 + p,
.koenig-editor__editor h5 + p,
.koenig-editor__editor h6 + p {
    margin: .8rem 0 0;
}

.koenig-editor__editor p + p,
.koenig-editor__editor blockquote + p,
.koenig-editor__editor ul + p,
.koenig-editor__editor ol + p
 {
    margin: 3.2rem 0 0;
}

.koenig-editor__editor div + p { /* Mobiledoc cards can be addressed by their wrapper div element */
    margin: 2.8rem 0 0;
}


/* Lists
/* -------------------------------------------------------------------- */

.koenig-editor__editor ul:not(.kg-action-bar),
.koenig-editor__editor ol {
    padding: 0;
    min-width: 100%;
}

.koenig-editor__editor ul:not(.kg-action-bar) li {
    margin: 1.6rem 0 0 2.4rem;
    padding: 0 0 0 0.6rem;
    line-height: 3.2rem;
}

.koenig-editor__editor ul:not(.kg-action-bar) li:first-child {
    margin: 0 0 0 2.4rem;
}

.koenig-editor__editor ol li {
    margin: 1.6rem 0 0 2.2rem;
    padding: 0 0 0 0.8rem;
    line-height: 3.2rem;
}

.koenig-editor__editor ol li:first-child {
    margin: 0 0 0 2.2rem;
}

.koenig-editor__editor p + ul:not(.kg-action-bar),
.koenig-editor__editor p + ol,
.koenig-editor__editor ul:not(.kg-action-bar) + ul:not(.kg-action-bar),
.koenig-editor__editor ul:not(.kg-action-bar) + ol,
.koenig-editor__editor ol + ul:not(.kg-action-bar),
.koenig-editor__editor ol + ol,
.koenig-editor__editor blockquote + ul:not(.kg-action-bar),
.koenig-editor__editor blockquote + ol {
    margin: 3.2rem 0 0;
}

.koenig-editor__editor h1 + ul:not(.kg-action-bar),
.koenig-editor__editor h1 + ol,
.koenig-editor__editor h2 + ul:not(.kg-action-bar),
.koenig-editor__editor h2 + ol {
    margin: .8rem 0 0;
}

.koenig-editor__editor h3 + ul:not(.kg-action-bar),
.koenig-editor__editor h3 + ol,
.koenig-editor__editor h4 + ul:not(.kg-action-bar),
.koenig-editor__editor h4 + ol,
.koenig-editor__editor h5 + ul:not(.kg-action-bar),
.koenig-editor__editor h5 + ol,
.koenig-editor__editor h6 + ul:not(.kg-action-bar),
.koenig-editor__editor h6 + ol {
    margin: .4rem 0 0;
}

.koenig-editor__editor div + ul:not(.kg-action-bar),
.koenig-editor__editor div + ol {
    margin: 2.8rem 0 0;
}


/* Cards in general
/* -------------------------------------------------------------------- */

.koenig-editor__editor > div {
    line-height: 0;
    min-width: 100%;
}

.koenig-editor__editor > div + div {
    margin: 3.2rem 0 0;
}

.koenig-editor__editor > p + div,
.koenig-editor__editor > blockquote + div,
.koenig-editor__editor > ul + div,
.koenig-editor__editor > ol + div {
    margin: 3.2rem 0 0;
}

.koenig-editor__editor > h1 + div {
    margin: 2.8rem 0 0;
}

.koenig-editor__editor > h2 + div,
.koenig-editor__editor > h3 + div,
.koenig-editor__editor > h4 + div,
.koenig-editor__editor > h5 + div,
.koenig-editor__editor > h6 + div {
    margin: 1.6rem 0 0;
}

.koenig-editor__editor hr {
    margin: 0;
}


/* Links
/* -------------------------------------------------------------------- */

.koenig-editor__editor a {
    color: var(--darkgrey);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 var(--blue);
}


/* Blockquote
/* -------------------------------------------------------------------- */

.koenig-editor__editor blockquote p {
    margin: 0;
}

.koenig-editor__editor blockquote {
    border-left: 0.25rem solid var(--blue);
    padding-left: 2.0rem;
    font-style: italic;
}

.koenig-editor__editor h1 + blockquote,
.koenig-editor__editor h2 + blockquote {
    margin: .8rem 0 0;
}

.koenig-editor__editor h3 + blockquote,
.koenig-editor__editor h4 + blockquote,
.koenig-editor__editor h5 + blockquote,
.koenig-editor__editor h6 + blockquote {
    margin: .4rem 0 0;
}

.koenig-editor__editor p + blockquote,
.koenig-editor__editor blockquote + blockquote {
    margin: 3.2rem 0 0;
}


/* Mobiledoc cards can be selected by their wrapper div element */
.koenig-editor__editor div + blockquote {
    margin: 2.8rem 0 0;
}


/* Code
/* ------------------------------------------------------------------ */
.koenig-card-html--editor .CodeMirror,
.koenig-editor__editor code,
.koenig-editor__editor pre {
    font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
    background: color-mod(var(--lightgrey) lightness(+4%));
    border: 1px solid var(--lightgrey);
}

.koenig-editor__editor code {
    border-radius: 2px;
    color: var(--pink);
    font-size: 1.65rem;
    line-height: 1em;
    padding: .4rem .4rem .2rem;
    vertical-align: middle;
    white-space: pre-wrap;
}

.koenig-editor__editor pre code {
    border: none;
    font-size: 1.6rem;
    color: var(--pink);
    padding: 0;
}

.koenig-editor__editor pre {
    margin: 0;
    line-height: 1.4em;
    padding: .8rem .8rem .4rem;
    border-radius: .4rem;
    font-size: 1.6rem;
    overflow: auto;
    white-space: pre;
    width: 100%;
    color: var(--darkgrey);
}


/* Markdown
/* --------------------------------------------------------------- */

/*
  Resetting the default top margin of the redered markdown content. This is
  needed because the top margin is applied to the card itself. It's the 2nd
  child because there's an SVG at the first place.
  NOTE: this is not too elegant.
*/

.koenig-card-markdown-rendered > :nth-child(2) {
    margin: 0;
}

.koenig-card-markdown-rendered hr {
    margin: 3.2rem 0 0;
}

.koenig-card-markdown-rendered hr + p {
    margin: 3.2rem 0 0;
}

.koenig-editor .gh-markdown-editor pre {
    border: none;
    background: none;
    white-space: normal;
}

.koenig-editor .gh-markdown-editor a {
    box-shadow: none;
}


/* HTML editor
/* --------------------------------------------------------------- */

.koenig-card-html-rendered > :nth-child(2) {
    margin: 0;
}

.koenig-card-html--editor pre {
    border: none;
    background: none;
    white-space: pre-line;
    padding: 0 .8rem;
    line-height: 1.4em;
}

.koenig-card-html--editor .CodeMirror {
    border: none;
    margin: 0 -8px;
}

.koenig-card-html--editor .CodeMirror-linenumber {
    padding: 12px 3px 0 5px;
    color: var(--midlightgrey-l2);
}

.koenig-card-html--editor .CodeMirror-gutters {
    border: none;
    background: none;
}


/* Table
/* --------------------------------------------------------------- */

.koenig-editor__editor table {
    font-size: 1.75rem;
    margin: 0;
    font-family: georgia,serif;
    letter-spacing: .02rem;
    line-height: 1.6em;
}

.koenig-editor__editor table tr td,
.koenig-editor__editor table tr th {
    vertical-align: top;
    border-bottom: 1px solid var(--lightgrey);
}
