@charset "utf-8";

.in-page-content-edit__editable-area {
  cursor: text;
}

.in-page-content-edit.pre-heading .in-page-content-edit__editable-area {
  margin: 0;
}

.in-page-content-edit__editable-area:hover,
.in-page-content-edit__editor {
  background-color: var(--color-highlight-halo);
}

/* `section > :first-child`/`:last-child` (goji.css) collapse the top/bottom
   margins of a section's edge children. An `editable_content` block wraps its
   content in `.in-page-content-edit`, so those bare-tag rules land on the
   wrapper and miss the heading/paragraph inside. Reach through to the editable
   area too. Visitor mode renders the bare tag and is unaffected. */
section:not(.fullscreen)
  > .in-page-content-edit:first-child
  .in-page-content-edit__editable-area {
  margin-top: 0;
}

section:not(.fullscreen)
  > .in-page-content-edit:last-child
  .in-page-content-edit__editable-area {
  margin-bottom: 0;
}

/* Mirror adjacent-sibling typography rules from goji.css across the editor
   wrapper. Without these, pairs like editable pre-heading + editable h1 and
   editable h1 + editable p fall back to default heading/paragraph margins. */
.in-page-content-edit.pre-heading
  + :is(
    .in-page-content-edit--h1,
    .in-page-content-edit--h2,
    .in-page-content-edit--h3,
    .in-page-content-edit--h4,
    .in-page-content-edit--h5,
    .in-page-content-edit--h6
  )
  > .in-page-content-edit__editable-area {
  margin-top: var(--gutter-thin);
}

:is(
    .in-page-content-edit--h1,
    .in-page-content-edit--h2,
    .in-page-content-edit--h3,
    .in-page-content-edit--h4,
    .in-page-content-edit--h5,
    .in-page-content-edit--h6
  )
  + .in-page-content-edit--p
  > .in-page-content-edit__editable-area {
  margin-top: 0;
}

.in-page-content-edit.modified .in-page-content-edit__editable-area:hover,
.in-page-content-edit.modified .in-page-content-edit__editor {
  background-color: var(--color-warning-light);
}