/**
 * KASA ESPANA — rich text: the administrator's editor and the text it produces.
 *
 * Two sections, one file (the /why-us page needs the first, the admin settings
 * page needs both):
 *   1. `.rte`        — how saved rich text is rendered on the public site.
 *   2. `.rte-editor` — the editing surface and its toolbar in the admin panel.
 *
 * Hand-written on purpose, for the same reason as assets/css/search-map.css:
 * Tailwind is compiled on the developer's machine only, so a class that is not
 * already in app.css does nothing. Rich text is generated by the editor at
 * runtime, so its <h2>/<ul>/<blockquote> can never carry Tailwind classes at all
 * — they have to be styled by tag.
 *
 * Load order: app.css -> this file.
 * Colours match the Tailwind theme: accent #e2ab2c, primary #233039,
 * pearl #f0ede8, cream #fafaf8, night #10181d, night-card #1b262e,
 * sand #b9b3a1, gray-300 #9ca3af.
 * Dark mode follows app.css: `.dark` is a class on <html>, so a plain
 * descendant selector is all that is needed.
 */

/* ============================================================
   1. Rendered rich text
   ============================================================ */

.rte {
    color: rgba(35, 48, 57, .75);
    line-height: 1.75;
}

.dark .rte {
    color: #d1d5db;
}

.rte > *:first-child {
    margin-top: 0;
}

.rte > *:last-child {
    margin-bottom: 0;
}

.rte p {
    margin: 0 0 1.15em;
}

.rte h2,
.rte h3,
.rte h4 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    color: #233039;
    line-height: 1.25;
    margin: 1.9em 0 .6em;
}

.dark .rte h2,
.dark .rte h3,
.dark .rte h4 {
    color: #fff;
}

.rte h2 {
    font-size: 1.75rem;
}

.rte h3 {
    font-size: 1.375rem;
}

.rte h4 {
    font-size: 1.125rem;
    font-family: inherit;
    font-weight: 700;
}

.rte ul,
.rte ol {
    margin: 0 0 1.15em;
    padding-left: 1.5rem;
}

.rte ul {
    list-style: none;
    padding-left: 1.75rem;
}

/* Bulleted lists get the accent square the rest of the site uses for marks */
.rte ul > li {
    position: relative;
}

.rte ul > li::before {
    content: "";
    position: absolute;
    left: -1.15rem;
    top: .68em;
    width: .4rem;
    height: .4rem;
    border-radius: .1rem;
    background: #e2ab2c;
}

.rte ol {
    list-style: decimal;
}

.rte ol > li::marker {
    color: #e2ab2c;
    font-weight: 700;
}

.rte li {
    margin-bottom: .45em;
}

/* Nested lists sit tighter than top-level ones */
.rte li > ul,
.rte li > ol {
    margin: .45em 0 0;
}

.rte a {
    color: #233039;
    text-decoration: underline;
    text-decoration-color: #e2ab2c;
    text-underline-offset: .2em;
    text-decoration-thickness: 2px;
    transition: color .2s;
}

.rte a:hover {
    color: #e2ab2c;
}

.dark .rte a {
    color: #fff;
}

.dark .rte a:hover {
    color: #e2ab2c;
}

.rte strong {
    font-weight: 700;
    color: #233039;
}

.dark .rte strong {
    color: #fff;
}

.rte blockquote {
    margin: 1.6em 0;
    padding: .2em 0 .2em 1.35rem;
    border-left: 3px solid #e2ab2c;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.55;
    color: #233039;
}

.dark .rte blockquote {
    color: #fff;
}

.rte hr {
    margin: 2.2em 0;
    border: 0;
    border-top: 1px solid #f0ede8;
}

.dark .rte hr {
    border-top-color: rgba(255, 255, 255, .1);
}

/* Tables can be wider than the column — let them scroll rather than overflow */
.rte table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 0 0 1.4em;
    border-collapse: collapse;
    font-size: .9375rem;
}

.rte th,
.rte td {
    padding: .6rem .9rem;
    border: 1px solid #f0ede8;
    text-align: left;
    vertical-align: top;
}

.dark .rte th,
.dark .rte td {
    border-color: rgba(255, 255, 255, .12);
}

.rte th {
    background: rgba(226, 171, 44, .1);
    font-weight: 700;
    color: #233039;
}

.dark .rte th {
    color: #fff;
}

/* Alignment set from the toolbar. These four class names are the only ones the
   sanitizer (App\Core\Html) lets through, so they are safe to style by name. */
.rte-left { text-align: left; }
.rte-center { text-align: center; }
.rte-right { text-align: right; }
.rte-justify { text-align: justify; }

/* ============================================================
   2. Editor (admin panel)
   ============================================================ */

.rte-editor {
    border: 1px solid #f0ede8;
    border-radius: .75rem;
    background: #fff;
    overflow: hidden;
}

.dark .rte-editor {
    border-color: rgba(255, 255, 255, .1);
    background: #1b262e;
}

.rte-editor:focus-within {
    border-color: #e2ab2c;
}

/* --- Toolbar --- */

/* Hidden until rich-editor.js mounts: without JavaScript the plain textarea
   below is the whole editor, and a toolbar that does nothing would only mislead. */
.rte-editor__toolbar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    padding: .35rem;
    border-bottom: 1px solid #f0ede8;
    background: #fafaf8;
}

.dark .rte-editor__toolbar {
    border-bottom-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
}

/* On a phone the toolbar would wrap to five rows and push the text out of
   sight, so it scrolls sideways instead — the same thing the guide step nav on
   /buyers does. */
@media (max-width: 639px) {
    .rte--ready .rte-editor__toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .rte-editor__toolbar::-webkit-scrollbar {
        display: none;
    }

    /* Without this the row would squeeze the buttons and the separators to
       nothing instead of overflowing */
    .rte-editor__btn,
    .rte-editor__sep {
        flex: 0 0 auto;
    }
}

.rte-editor__sep {
    width: 1px;
    align-self: stretch;
    margin: .2rem .3rem;
    background: #f0ede8;
}

.dark .rte-editor__sep {
    background: rgba(255, 255, 255, .12);
}

.rte-editor__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .45rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: rgba(35, 48, 57, .7);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.dark .rte-editor__btn {
    color: #d1d5db;
}

.rte-editor__btn:hover {
    background: #f0ede8;
    color: #233039;
}

.dark .rte-editor__btn:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.rte-editor__btn:focus-visible {
    outline: 2px solid #e2ab2c;
    outline-offset: -1px;
}

.rte-editor__btn.is-active {
    background: #e2ab2c;
    color: #233039;
}

.dark .rte-editor__btn.is-active {
    color: #233039;
}

.rte-editor__btn svg {
    width: 1rem;
    height: 1rem;
}

/* The three character buttons read as what they do */
.rte-editor__btn--bold { font-weight: 800; }
.rte-editor__btn--italic { font-style: italic; font-family: Georgia, serif; }
.rte-editor__btn--underline { text-decoration: underline; }
.rte-editor__btn--strike { text-decoration: line-through; }
.rte-editor__btn--serif { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }

/* --- Editing surface --- */

.rte-editor__area {
    display: none;
    position: relative;
    min-height: 16rem;
    max-height: 34rem;
    overflow-y: auto;
    padding: 1rem 1.15rem;
    font-size: .9375rem;
    outline: 0;
}

.rte-editor__area:focus {
    outline: 0;
}

/* Placeholder for an empty document. It is taken out of the flow so it sits on
   the first line instead of pushing the empty paragraph down; the translated
   string comes from the partial's data-placeholder attribute. */
.rte-editor__area--empty::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 1rem;
    left: 1.15rem;
    right: 1.15rem;
    color: rgba(35, 48, 57, .35);
    pointer-events: none;
}

.dark .rte-editor__area--empty::before {
    color: #6b7280;
}

/* The area renders the same rich text the public page will show, one size down */
.rte-editor__area h2 { font-size: 1.5rem; }
.rte-editor__area h3 { font-size: 1.25rem; }
.rte-editor__area blockquote { font-size: 1.0625rem; }

.rte-editor__area a {
    cursor: text;
}

/* --- HTML source view --- */

.rte-editor__source {
    display: block;
    width: 100%;
    min-height: 16rem;
    padding: 1rem 1.15rem;
    border: 0;
    background: transparent;
    color: #233039;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.6;
    resize: vertical;
    outline: 0;
}

.dark .rte-editor__source {
    color: #d1d5db;
}

/* Which surface is visible. Before rich-editor.js runs, `rte--ready` is absent
   and `rte-hidden` has not been put on the textarea, so the page degrades to a
   plain HTML source field that still saves correctly.
   In source mode the script takes `rte-hidden` off the textarea again. */
.rte--ready .rte-editor__toolbar { display: flex; }
.rte--ready .rte-editor__area { display: block; }
.rte--source .rte-editor__area { display: none; }
.rte-hidden { display: none; }

.rte-editor__hint {
    margin-top: .4rem;
    font-size: .6875rem;
    color: rgba(35, 48, 57, .5);
}

.dark .rte-editor__hint {
    color: #9ca3af;
}