/*!
Twenty Nineteen Editor Frame Styles

NOTE: This file customizes items that are out of the normal scope of style-editor.css due to the auto-prefixing functionality associated with add_editor_style(). When that file is able to edit the post title and a container similar to .edit-post-layout, these styles should be migrated into style-editor.css. 
*/
/** === Includes === */
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
 * since its edges can look jagged due to lack of antialiasing. In this case, we are several
 * layers of box-shadow to add the border visually, which will render the border smoother. */
/** === Title === */
body.block-editor-page .block-editor .editor-post-title__block:before {
  background: #767676;
  content: "\020";
  display: block;
  height: 2px;
  margin: 1rem 0;
  width: 1em;
}

body.block-editor-page .block-editor .editor-post-title__block:before {
  width: 2.8125em;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 1em;
  position: relative;
  top: 0.5em;
}

body.block-editor-page .block-editor .editor-post-title__block .editor-post-title__input {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 2.8125em;
}

/** === Default Appender === */
body.block-editor-page .block-editor .editor-default-block-appender__content {
  font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
  font-size: 22px;
}

/** === Off-Center Content === */
@media only screen and (min-width: 768px) {
  body.block-editor-page .block-editor .edit-post-layout .editor-writing-flow {
    max-width: 80%;
    margin: 0 10%;
  }
  body.block-editor-page .block-editor .edit-post-layout .editor-post-title__block,
  body.block-editor-page .block-editor .edit-post-layout .editor-default-block-appender,
  body.block-editor-page .block-editor .edit-post-layout .editor-block-list__block {
    margin-left: 0;
    margin-right: 0;
  }
  body.block-editor-page .block-editor .edit-post-layout .editor-block-list__block[data-align="full"] {
    width: calc( 125% + 88px + 28px);
    position: relative;
    left: calc( -12.5% - 46px - 14px);
  }
  body.block-editor-page .block-editor .edit-post-layout .editor-block-list__block[data-align="right"] {
    max-width: 125%;
  }
}
