/* =========================================================
   FORYOU NEWS — ARTICLE EDITOR BLOCKS
   Text boxes, tables, table tools and colour palettes.
   Works with article-editor-blocks.js.

   The text box and table styles here match css/blog.css, so
   the editor, the Preview and the published article look the
   same.
   ========================================================= */


/* =========================================================
   1. TEXT BOXES (CALLOUTS)
   Styles: note (default), tip, important, warning.
   Older articles use info (shown as note) and success
   (shown as tip).
   ========================================================= */

.tiptap-editor .article-callout,
.editor-preview-content .article-callout {
    --callout-accent: #412e03;
    --callout-bg: #f7f4ee;
    --callout-label: #412e03;
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E");

    position: relative;

    clear: both;

    margin: 20px 0;
    padding: 14px 18px 15px 20px;

    background: var(--callout-bg);

    border: 0;
    border-left: 4px solid var(--callout-accent);
    border-radius: 0;

    box-shadow: none;

    color: #2f2f2f;

    font-style: normal;
}


/* Label: the style name, or the writer's own label */
.tiptap-editor .article-callout::before,
.editor-preview-content .article-callout::before {
    content: "Note";

    display: block;

    margin: 0 0 6px;
    padding-left: 22px;

    color: var(--callout-label);

    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


/* Icon beside the label */
.tiptap-editor .article-callout::after,
.editor-preview-content .article-callout::after {
    content: "";

    position: absolute;
    top: 15px;
    left: 20px;

    width: 15px;
    height: 15px;

    background: var(--callout-accent);

    -webkit-mask: var(--callout-icon) center / contain no-repeat;
    mask: var(--callout-icon) center / contain no-repeat;

    pointer-events: none;
}


.tiptap-editor .article-callout p,
.editor-preview-content .article-callout p {
    margin: 0 0 0.6em;

    color: inherit;
}


.tiptap-editor .article-callout > :last-child,
.editor-preview-content .article-callout > :last-child {
    margin-bottom: 0;
}


.tiptap-editor .article-callout[data-callout-type="tip"],
.editor-preview-content .article-callout[data-callout-type="tip"],
.tiptap-editor .article-callout[data-callout-type="success"],
.editor-preview-content .article-callout[data-callout-type="success"] {
    --callout-accent: #2f6b3a;
    --callout-bg: #eff6ef;
    --callout-label: #2f6b3a;
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21.5h4'/%3E%3Cpath d='M12 2.5a6.5 6.5 0 0 0-3.8 11.8c.5.4.8 1 .8 1.6V16h6v-.1c0-.6.3-1.2.8-1.6A6.5 6.5 0 0 0 12 2.5z'/%3E%3C/svg%3E");
}


.tiptap-editor .article-callout[data-callout-type="important"],
.editor-preview-content .article-callout[data-callout-type="important"] {
    --callout-accent: #d89b00;
    --callout-bg: #fdf7e7;
    --callout-label: #7a5600;
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z'/%3E%3C/svg%3E");
}


.tiptap-editor .article-callout[data-callout-type="warning"],
.editor-preview-content .article-callout[data-callout-type="warning"] {
    --callout-accent: #b42318;
    --callout-bg: #fdf0ee;
    --callout-label: #b42318;
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.9 18a2 2 0 0 0 1.7 3h16.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E");
}


.tiptap-editor .article-callout[data-callout-type="tip"]::before,
.editor-preview-content .article-callout[data-callout-type="tip"]::before,
.tiptap-editor .article-callout[data-callout-type="success"]::before,
.editor-preview-content .article-callout[data-callout-type="success"]::before {
    content: "Tip";
}


.tiptap-editor .article-callout[data-callout-type="important"]::before,
.editor-preview-content .article-callout[data-callout-type="important"]::before {
    content: "Important";
}


.tiptap-editor .article-callout[data-callout-type="warning"]::before,
.editor-preview-content .article-callout[data-callout-type="warning"]::before {
    content: "Warning";
}


/* A label typed by the writer replaces the style name */
.tiptap-editor .article-callout[data-callout-title]::before,
.editor-preview-content .article-callout[data-callout-title]::before {
    content: attr(data-callout-title);
}


/* Empty box: a hint where to type */
.tiptap-editor .article-callout > p:only-child:has(> br.ProseMirror-trailingBreak:only-child)::before {
    content: "Type the text for this box...";

    float: left;

    height: 0;

    color: #9aa19b;

    pointer-events: none;
}


/* =========================================================
   2. TABLES
   ========================================================= */

.tiptap-editor .tableWrapper {
    clear: both;

    margin: 20px 0;

    overflow-x: auto;
}


.tiptap-editor table {
    margin: 0;

    table-layout: fixed;
}


.editor-preview-content table {
    margin: 22px 0;
}

.tiptap-editor table,
.editor-preview-content table {
    width: 100%;

    border-collapse: collapse;
    border-spacing: 0;

    border: 1px solid #d8d0bd;

    background: #ffffff;

    font-size: 0.95em;
    line-height: 1.55;
}


.tiptap-editor th,
.editor-preview-content th,
.tiptap-editor td,
.editor-preview-content td {
    padding: 9px 12px;

    border: 1px solid #d8d0bd;

    vertical-align: top;
    text-align: left;
}


.tiptap-editor th,
.editor-preview-content th {
    background: #f4eee0;

    color: #2c1f02;

    font-weight: 700;
}


.tiptap-editor th p,
.editor-preview-content th p,
.tiptap-editor td p,
.editor-preview-content td p {
    margin: 0 0 0.5em;
}


.tiptap-editor th > :last-child,
.editor-preview-content th > :last-child,
.tiptap-editor td > :last-child,
.editor-preview-content td > :last-child {
    margin-bottom: 0;
}


/* Empty cells keep a full line height */
.tiptap-editor th p:empty::before,
.editor-preview-content th p:empty::before,
.tiptap-editor td p:empty::before,
.editor-preview-content td p:empty::before {
    content: "\00a0";
}


.tiptap-editor th,
.tiptap-editor td {
    position: relative;

    min-width: 60px;
}


/* Selected cells (drag across cells, or Shift + click) */
.tiptap-editor .selectedCell::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(216, 155, 0, 0.16);

    pointer-events: none;
}


/* Drag the column edge to change its width */
.tiptap-editor .column-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    bottom: -1px;
    z-index: 2;

    width: 4px;

    background: #d89b00;

    pointer-events: none;
}


.tiptap-editor.resize-cursor,
.tiptap-editor .resize-cursor {
    cursor: col-resize;
}


/* =========================================================
   3. FLOATING TOOLBARS (TEXT BOX + TABLE)
   Same look as the image toolbar.
   ========================================================= */

.editor-block-toolbar {
    position: fixed;
    z-index: 950;

    display: flex;
    align-items: center;
    gap: 2px;

    max-width: calc(100vw - 16px);
    padding: 4px;

    overflow-x: auto;

    background: #111512;

    border-radius: 8px;

    box-shadow:
        0 10px 26px rgba(16, 24, 20, 0.25),
        0 2px 6px rgba(16, 24, 20, 0.15);

    scrollbar-width: none;
}


.editor-block-toolbar::-webkit-scrollbar {
    display: none;
}


.editor-block-toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;

    flex: 0 0 auto;
}


.editor-block-toolbar-label {
    flex: 0 0 auto;

    padding: 0 6px 0 8px;

    color: #8f978f;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    white-space: nowrap;
}


.editor-block-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 30px;
    padding: 0 9px;

    flex: 0 0 auto;

    background: transparent;

    border: 0;
    border-radius: 5px;

    color: #e9ece9;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    transition:
        background 0.12s ease,
        color 0.12s ease;
}


.editor-block-toolbar button.is-icon {
    width: 30px;
    padding: 0;

    justify-content: center;
}


.editor-block-toolbar button svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.editor-block-toolbar button:hover {
    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;
}


.editor-block-toolbar button.is-active {
    background: #d89b00;

    color: #111512;
}


.editor-block-toolbar button.is-danger:hover {
    background: #b42318;

    color: #ffffff;
}


.editor-block-toolbar button:disabled {
    opacity: 0.4;

    pointer-events: none;
}


.editor-block-toolbar button:focus-visible,
.editor-block-toolbar input:focus-visible {
    outline: 2px solid #d89b00;
    outline-offset: 1px;
}


.editor-block-toolbar-divider {
    width: 1px;
    height: 20px;
    margin: 0 3px;

    flex: 0 0 auto;

    background: rgba(255, 255, 255, 0.2);
}


.editor-block-dot {
    display: inline-block;

    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
}


.editor-block-toolbar button.is-active .editor-block-dot {
    border-color: #111512;
}


.editor-block-field {
    display: flex;

    flex: 0 0 auto;
}


.editor-block-field input {
    width: 140px;
    height: 28px;
    padding: 0 8px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 5px;

    color: #ffffff;

    font-size: 12px;
}


.editor-block-field input::placeholder {
    color: #9aa19b;
}


.editor-block-field input:focus {
    outline: none;

    border-color: #d89b00;

    background: rgba(255, 255, 255, 0.12);
}


.editor-visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   4. TABLE SIZE PICKER
   ========================================================= */

.editor-table-picker {
    position: fixed;
    z-index: 1250;

    width: 262px;
    padding: 12px;

    background: #ffffff;

    border: 1px solid var(--editor-border, #dfe3df);
    border-radius: 8px;

    box-shadow:
        0 12px 28px rgba(16, 24, 20, 0.14),
        0 2px 5px rgba(16, 24, 20, 0.06);

    color: var(--editor-text, #202522);

    font-size: 12px;
}


.editor-table-picker-title {
    margin: 0 0 9px;

    font-size: 12px;
    font-weight: 700;
}


.editor-table-picker-grid {
    display: grid;
    gap: 3px;
}


.editor-table-picker-cell {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;

    background: #ffffff;

    border: 1px solid #d8d0bd;
    border-radius: 2px;

    cursor: pointer;
}


.editor-table-picker-cell.is-on {
    background: #fdf1cf;

    border-color: #d89b00;
}


.editor-table-picker-cell:focus-visible {
    outline: 2px solid #412e03;
    outline-offset: 1px;
}


.editor-table-picker-size {
    margin: 8px 0 10px;

    color: var(--editor-text-soft, #59615b);

    font-size: 12px;
    font-weight: 600;
}


.editor-table-picker-custom {
    display: flex;
    align-items: flex-end;
    gap: 8px;

    padding-top: 10px;

    border-top: 1px solid var(--editor-border-light, #e9ece9);
}


.editor-table-picker-custom label {
    display: grid;
    gap: 3px;

    color: var(--editor-text-muted, #7b837d);

    font-size: 11px;
    font-weight: 600;
}


.editor-table-picker-custom input {
    width: 64px;
    height: 30px;
    padding: 0 6px;

    border: 1px solid var(--editor-border-dark, #cfd4cf);
    border-radius: 5px;

    color: var(--editor-text, #202522);

    font-size: 13px;
}


.editor-table-picker-custom input:focus {
    outline: none;

    border-color: #d89b00;

    box-shadow: 0 0 0 3px rgba(216, 155, 0, 0.18);
}


.editor-table-picker-insert {
    height: 30px;
    margin-left: auto;
    padding: 0 12px;

    background: #412e03;

    border: 1px solid #412e03;
    border-radius: 5px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
}


.editor-table-picker-insert:hover {
    background: #2c1f02;
}


.editor-table-picker-check {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 10px;

    color: var(--editor-text-soft, #59615b);

    font-size: 12px;

    cursor: pointer;
}


.editor-table-picker-check input {
    width: 15px;
    height: 15px;
    margin: 0;

    accent-color: #412e03;
}


/* =========================================================
   5. COLOUR PALETTES (TEXT COLOUR + HIGHLIGHT)
   Built into the existing dropdowns by
   article-editor-blocks.js.
   ========================================================= */

.editor-toolbar-dropdown.editor-palette-dropdown {
    width: 264px;
    min-width: 0;
    padding: 10px;
}


.editor-palette-heading {
    margin: 10px 0 5px;

    color: var(--editor-text-muted, #7b837d);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.editor-palette > .editor-palette-heading:first-child {
    margin-top: 0;
}


.editor-palette-row {
    display: grid;
    grid-template-columns: repeat(10, 20px);
    gap: 4px;

    margin-bottom: 4px;
}


.editor-toolbar-dropdown .editor-palette button.editor-palette-swatch {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    min-height: 0;
    padding: 0;

    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 3px;

    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}


.editor-toolbar-dropdown .editor-palette button.editor-palette-swatch.is-light {
    border-color: #cfd4cf;
}


.editor-toolbar-dropdown .editor-palette button.editor-palette-swatch:hover {
    z-index: 1;

    transform: scale(1.15);

    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #412e03;
}


.editor-toolbar-dropdown .editor-palette button.editor-palette-swatch:focus-visible {
    outline: 2px solid #412e03;
    outline-offset: 1px;
}


.editor-palette-swatch svg {
    display: none;

    width: 13px;
    height: 13px;

    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}


.editor-palette-swatch.is-light svg {
    stroke: #111512;
}


.editor-palette-swatch.is-selected svg {
    display: block;
}


.editor-palette-custom {
    margin-top: 6px;
    padding-top: 2px;

    border-top: 1px solid var(--editor-border-light, #e9ece9);
}


.editor-palette-custom-row {
    display: flex;
    align-items: center;
    gap: 6px;
}


.editor-palette-picker {
    display: inline-flex;

    flex: 0 0 auto;

    cursor: pointer;
}


.editor-palette-picker input[type="color"] {
    width: 32px;
    height: 30px;
    padding: 2px;

    background: #ffffff;

    border: 1px solid var(--editor-border-dark, #cfd4cf);
    border-radius: 5px;

    cursor: pointer;
}


.editor-palette-hex {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 8px;

    border: 1px solid var(--editor-border-dark, #cfd4cf);
    border-radius: 5px;

    color: var(--editor-text, #202522);

    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;

    text-transform: lowercase;
}


.editor-palette-hex:focus {
    outline: none;

    border-color: #d89b00;

    box-shadow: 0 0 0 3px rgba(216, 155, 0, 0.18);
}


.editor-toolbar-dropdown .editor-palette button.editor-palette-apply {
    width: auto;
    height: 30px;
    min-height: 0;
    padding: 0 12px;

    flex: 0 0 auto;
    justify-content: center;

    background: #412e03;

    border: 1px solid #412e03;
    border-radius: 5px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
}


.editor-toolbar-dropdown .editor-palette button.editor-palette-apply:hover {
    background: #2c1f02;

    color: #ffffff;
}


.editor-palette-error {
    margin: 6px 0 0;

    color: #b42318;

    font-size: 11px;
}


/* "Remove colour" under the palette */
.editor-palette-dropdown > .editor-dropdown-divider {
    margin: 8px 0 5px;
}


/* =========================================================
   6. PHONES
   ========================================================= */

@media (max-width: 680px) {

    /* "Text box" title is dropped; Row / Column stay so the
       Delete buttons are clear */
    .editor-callout-toolbar .editor-block-toolbar-label {
        display: none;
    }


    .editor-block-field input {
        width: 110px;
    }


    .tiptap-editor .article-callout,
    .editor-preview-content .article-callout {
        padding: 12px 14px 13px 16px;
    }


    .tiptap-editor .article-callout::after,
    .editor-preview-content .article-callout::after {
        top: 13px;
        left: 16px;
    }

}