/*
    editor.css - the visual page editor's own styling.

    Kept in its own file rather than site.css: it is only ever loaded on the admin pages, and the public
    site should not pay for it. The editing surface deliberately uses the SAME type and measure as a real
    page so what is typed looks like what will be published.
*/

.ed { border: 1px solid var(--line, #d5d8dd); border-radius: 8px; background: #fff; overflow: hidden; }

.ed__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 6px 8px; background: #f4f6f8; border-bottom: 1px solid var(--line, #d5d8dd);
}
.ed__btn {
    font: inherit; font-size: .82rem; line-height: 1;
    padding: 7px 10px; border: 1px solid #cdd2d8; border-radius: 6px;
    background: #fff; color: #1d2b36; cursor: pointer;
}
.ed__btn:hover { background: #eaf1f7; border-color: #9fb3c4; }
.ed__btn:active { background: #dce8f2; }
.ed__btn--b { font-weight: 800; min-width: 34px; }
.ed__btn--i { font-style: italic; min-width: 34px; }
.ed__btn--src { margin-left: auto; color: #6b7683; font-size: .74rem; }
.ed__btn--src.is-on { background: #0a2f4a; border-color: #0a2f4a; color: #fff; }
.ed__style { font: inherit; font-size: .82rem; padding: 6px 8px; border: 1px solid #cdd2d8; border-radius: 6px; background: #fff; }
.ed__sep { width: 1px; align-self: stretch; margin: 2px 4px; background: #d9dee4; }

.ed__body {
    min-height: 260px; padding: 18px 20px; outline: none;
    font-size: 1rem; line-height: 1.6; color: #24313c;
}
.ed__body:focus-visible { box-shadow: inset 0 0 0 2px #7fa8c9; }
.ed__body > *:first-child { margin-top: 0; }
.ed__body p { margin: 0 0 .9em; }
.ed__body h2 { font-size: 1.35rem; margin: 1.4em 0 .5em; }
.ed__body h3 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
.ed__body ul, .ed__body ol { margin: 0 0 .9em; padding-left: 1.4em; }
.ed__body li { margin: .2em 0; }
.ed__body blockquote {
    margin: 0 0 .9em; padding: .2em 0 .2em 1em; border-left: 3px solid #b9c6d1; color: #45535f;
}
.ed__body img { max-width: 100%; height: auto; border-radius: 6px; }
.ed__body hr { border: 0; border-top: 1px solid #cfd6dd; margin: 1.4em 0; }
/* Not a button: .ed__body a used to beat .btn--primary on specificity, so a button pasted into the
   content rendered navy-on-navy inside the editor - readable on the live page, invisible while editing. */
.ed__body a:not(.btn) { color: #145a86; }
.ed__body table { border-collapse: collapse; width: 100%; margin: 0 0 .9em; }
.ed__body th, .ed__body td { border: 1px solid #d5dae0; padding: 6px 9px; text-align: left; }
.ed__body:empty::before {
    content: attr(data-placeholder); color: #97a2ad;
}

/* The textarea is still the field that posts; it is only visible when HTML view is switched on. */
.ed__source { display: none; width: 100%; border: 0; border-top: 1px solid var(--line, #d5d8dd);
              padding: 14px 16px; font: 13px/1.5 ui-monospace, Consolas, monospace; resize: vertical; }
.ed--source .ed__body { display: none; }
.ed--source .ed__source { display: block; min-height: 300px; }

/* ---------------------------------------------------------------- dialogs */
.ed-modal {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    background: rgba(12, 22, 30, .45); padding: 20px;
}
.ed-modal__box {
    background: #fff; border-radius: 10px; width: min(560px, 100%); max-height: 85vh;
    display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.ed-modal__box h3 { margin: 0; padding: 16px 20px; font-size: 1.05rem; border-bottom: 1px solid #e6e9ed; }
.ed-modal__body { padding: 16px 20px; overflow: auto; }
.ed-modal__foot {
    display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid #e6e9ed; background: #f8fafb;
    border-radius: 0 0 10px 10px;
}
.ed-fld { display: block; margin: 0 0 14px; }
.ed-fld > span { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 4px; }
.ed-fld input, .ed-fld select { width: 100%; font: inherit; padding: 8px 10px;
                                border: 1px solid #cdd2d8; border-radius: 6px; }
.ed-fld small { display: block; color: #6b7683; font-size: .78rem; margin-top: 4px; }
.ed-fld.is-bad input { border-color: #b4453c; background: #fdf4f3; }

.ed-upload { display: block; margin: 0 0 14px; }
.ed-upload > span { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 4px; }
.ed-upload small { display: block; color: #6b7683; font-size: .78rem; margin-top: 4px; }
.ed-note { color: #6b7683; font-size: .85rem; margin: 0 0 10px; }
.ed-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ed-photo { padding: 0; border: 1px solid #cdd2d8; border-radius: 6px; background: #fff;
            cursor: pointer; overflow: hidden; aspect-ratio: 4 / 3; }
.ed-photo:hover { border-color: #7fa8c9; box-shadow: 0 0 0 2px #dcebf6; }
.ed-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
    .ed__bar { gap: 3px; padding: 5px; }
    .ed__btn { padding: 6px 8px; font-size: .78rem; }
    .ed__btn--src { margin-left: 0; }
}