/* =====================================================================
   ToxCMS — Mycotox theme styles
   Brand primitives that mirror the original index.html, plus the inline
   editing UI (pencils + highlights) used when an admin is in edit mode.
   ===================================================================== */

:root {
    --tox-primary: #9E0031;
    --tox-primary-dark: #800020;
    --tox-primary-darker: #4A0010;
    --tox-ink: #0f172a;
}

body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    width: 100%;
}

/* ---- Signature brand helpers (verbatim from the source design) ---- */
.crimson-gradient {
    background: linear-gradient(135deg, #800020 0%, #9E0031 50%, #4A0010 100%);
}
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(158, 0, 49, 0.1);
}
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.5); border-radius: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #9E0031; border-radius: 4px; }

/* Rich-text content coming out of the editor needs sensible defaults
   because Tailwind's preflight strips list/heading styling. */
.tox-prose { color: #334155; line-height: 1.75; font-size: 1rem; }
.tox-prose p { margin: 0 0 1rem; }
.tox-prose h2 { font-size: 1.875rem; font-weight: 800; color: #0f172a; margin: 1.5rem 0 0.75rem; letter-spacing: -0.01em; }
.tox-prose h3 { font-size: 1.5rem;  font-weight: 700; color: #0f172a; margin: 1.25rem 0 0.5rem; }
.tox-prose h4 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 1rem 0 0.5rem; }
.tox-prose ul, .tox-prose ol { margin: 0 0 1rem 1.5rem; }
.tox-prose ul { list-style: disc; }
.tox-prose ol { list-style: decimal; }
.tox-prose li { margin: 0.35rem 0; }
.tox-prose a { color: var(--tox-primary); text-decoration: underline; }
.tox-prose a:hover { color: var(--tox-primary-dark); }
.tox-prose strong, .tox-prose b { font-weight: 700; color: #1e293b; }
.tox-prose blockquote { border-left: 4px solid var(--tox-primary); padding-left: 1rem; margin: 1rem 0; color: #475569; font-style: italic; }

/* =====================================================================
   INLINE EDIT MODE
   Only loaded/active when a logged-in admin appends ?edit=1.
   ===================================================================== */

/* Top edit bar */
.tox-editbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1rem;
    background: #0f172a;
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.tox-editbar .tox-dot { width:.5rem; height:.5rem; border-radius:9999px; background:#34d399; box-shadow:0 0 0 4px rgba(52,211,153,.2); }
.tox-editbar .tox-spacer { flex: 1; }
.tox-editbar button, .tox-editbar a.tox-btn {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.4rem .8rem; border-radius:9999px; border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06); color:#fff; cursor:pointer; font-weight:700; font-size:.78rem;
    text-decoration:none; transition: all .15s ease;
}
.tox-editbar button:hover, .tox-editbar a.tox-btn:hover { background: rgba(255,255,255,.16); }
.tox-editbar .tox-btn-primary { background: var(--tox-primary); border-color: var(--tox-primary); }
.tox-editbar .tox-btn-primary:hover { filter: brightness(1.1); }
.tox-editbar .tox-status { font-weight:600; opacity:.8; font-size:.75rem; }

/* Floating "Edit page" launcher shown to logged-in users not yet editing */
.tox-edit-launch {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1.1rem; border-radius:9999px;
    background: var(--tox-primary); color:#fff; font-weight:800; font-size:.85rem;
    box-shadow: 0 10px 30px rgba(158,0,49,.4); text-decoration:none;
    transition: transform .15s ease, filter .15s ease;
}
.tox-edit-launch:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* Editable settings (phone, banner, footer text, …) */
.tox-edit-mode [data-tox-setting] {
    position: relative;
    outline: 2px dashed rgba(158,0,49,.5);
    outline-offset: 3px;
    border-radius: 4px;
    cursor: text;
    transition: outline-color .15s ease, background .15s ease;
}
.tox-edit-mode [data-tox-setting]:hover { outline-color: var(--tox-primary); background: rgba(158,0,49,.05); }
.tox-edit-mode [data-tox-setting]::after {
    content: "✏️";
    position: absolute; top: -10px; right: -10px;
    font-size: .7rem; line-height: 1;
    background: var(--tox-primary); color:#fff;
    padding: 3px 4px; border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    pointer-events: none;
}
.tox-edit-mode [data-tox-setting][contenteditable="true"] {
    outline: 2px solid var(--tox-primary);
    background: #fff;
    color: var(--tox-ink);
    box-shadow: 0 0 0 4px rgba(158,0,49,.12);
}

/* Editable blocks wrapper (markup is emitted by Blocks::renderOne) */
.tox-edit-mode .tox-editable-block {
    position: relative;
    outline: 2px dashed rgba(158,0,49,.35);
    outline-offset: 6px;
    border-radius: 8px;
    margin: .25rem 0;
    transition: outline-color .15s ease;
}
.tox-edit-mode .tox-editable-block:hover { outline-color: var(--tox-primary); }
.tox-edit-mode .tox-block-toolbar {
    position: absolute; top: -14px; left: 12px; z-index: 30;
    display: none; align-items: center; gap: 2px;
    background: #0f172a; color:#fff; padding: 3px 6px; border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3); font-size:.75rem;
}
.tox-edit-mode .tox-editable-block:hover > .tox-block-toolbar,
.tox-edit-mode .tox-editable-block.tox-active > .tox-block-toolbar { display: inline-flex; }
.tox-block-toolbar .tox-block-name { font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; opacity:.75; padding:0 .35rem; }
.tox-block-toolbar .tox-edit-btn {
    background: transparent; border: none; color:#fff; cursor:pointer;
    width: 24px; height: 24px; border-radius: 9999px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center; font-size:.8rem;
}
.tox-block-toolbar .tox-edit-btn:hover { background: rgba(255,255,255,.18); }
.tox-block-toolbar .tox-del:hover { background: #ef4444; }

/* Inline-editable fields inside blocks */
.tox-edit-mode [data-tox-field] {
    outline: 1px dashed transparent;
    transition: outline-color .15s ease, background .15s ease;
    border-radius: 3px;
}
.tox-edit-mode [data-tox-field]:hover { outline-color: rgba(158,0,49,.45); background: rgba(158,0,49,.04); }
.tox-edit-mode [data-tox-field][contenteditable="true"] {
    outline: 2px solid var(--tox-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(158,0,49,.12);
}

/* Tiny floating formatting toolbar for rich-text editing */
.tox-rt-toolbar {
    position: absolute; z-index: 70; display: none;
    gap: 2px; padding: 4px; background:#0f172a; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.tox-rt-toolbar.tox-show { display: inline-flex; }
.tox-rt-toolbar button {
    width: 30px; height: 30px; border:none; background:transparent; color:#fff;
    border-radius: 6px; cursor:pointer; font-weight:800; font-size:.8rem;
}
.tox-rt-toolbar button:hover { background: rgba(255,255,255,.18); }

/* Add-block picker modal */
.tox-modal-backdrop {
    position: fixed; inset: 0; z-index: 80; display:none;
    align-items: center; justify-content: center;
    background: rgba(15,23,42,.6); padding: 1rem;
}
.tox-modal-backdrop.tox-show { display: flex; }
.tox-modal {
    width: 100%; max-width: 560px; background:#fff; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden;
}
.tox-modal header { padding: 1rem 1.25rem; border-bottom:1px solid #e2e8f0; font-weight: 800; color:#0f172a; display:flex; align-items:center; justify-content:space-between; }
.tox-modal header button { background:transparent; border:none; font-size:1.25rem; cursor:pointer; color:#64748b; }
.tox-block-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:.6rem; padding: 1.25rem; }
.tox-block-grid button {
    text-align:left; padding:.85rem 1rem; border:1px solid #e2e8f0; border-radius:10px;
    background:#f8fafc; cursor:pointer; transition: all .15s ease;
}
.tox-block-grid button:hover { border-color: var(--tox-primary); background:#fff; box-shadow:0 4px 14px rgba(158,0,49,.12); }
.tox-block-grid b { display:block; color:#0f172a; font-size:.9rem; }
.tox-block-grid span { color:#64748b; font-size:.75rem; }

@media (max-width: 480px) {
    .tox-block-grid { grid-template-columns: 1fr; }
    .tox-editbar { flex-wrap: wrap; }
}

/* Toast feedback */
.tox-toast {
    position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(20px);
    z-index: 90; background:#0f172a; color:#fff; padding:.7rem 1.1rem; border-radius: 9999px;
    font-size:.85rem; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.3);
    opacity: 0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
}
.tox-toast.tox-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tox-toast.tox-error { background:#b91c1c; }