/**
 * Blog Review & Publish — read-only preview + editor styles.
 *
 * Page chrome (body bg, topbar, container, business header) comes from the shared
 * transcript-viewer base (sitestaffr-tv-*). Only the review card, the shared
 * post typography (.sitestaffr-blog-content, used by BOTH the preview and the
 * editor so editing matches the result), and the controls live here.
 * Brand colors per CLAUDE.md.
 *
 * @since 1.28.0
 */

/* ---- Notices ---- */
.sitestaffr-br-notice { background: #fff; border-left: 4px solid #1FB6CC; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.sitestaffr-br-success { border-left-color: #10b981; }
.sitestaffr-br-error { border-left-color: #dc2626; }
.sitestaffr-br-notice a { color: #00838F; font-weight: 600; margin-left: 8px; }

/* ---- Card (shared by preview + edit) ---- */
.sitestaffr-br-card { background: #fff; border-radius: 12px; padding: 28px 32px; box-shadow: 0 4px 16px rgba(0, 131, 143, 0.08); margin-bottom: 16px; }

/* ---- Read-only preview ---- */
.sitestaffr-br-preview-image { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 24px; }
.sitestaffr-br-preview-title { font-size: 2rem; line-height: 1.25; color: #1d2327; margin: 0 0 20px; font-weight: 700; }

/* ---- Shared post typography (preview body + editor) ---- */
.sitestaffr-blog-content { font-size: 1.05rem; line-height: 1.75; color: #2c3338; }
.sitestaffr-blog-content > *:first-child { margin-top: 0; }
.sitestaffr-blog-content > *:last-child { margin-bottom: 0; }
.sitestaffr-blog-content p { margin: 0 0 1.2em; }
.sitestaffr-blog-content h2 { font-size: 1.5rem; line-height: 1.3; color: #00838F; margin: 1.8em 0 0.6em; font-weight: 700; }
.sitestaffr-blog-content h3 { font-size: 1.2rem; line-height: 1.35; color: #004D40; margin: 1.5em 0 0.5em; font-weight: 700; }
.sitestaffr-blog-content ul, .sitestaffr-blog-content ol { margin: 0 0 1.2em; padding-left: 1.6em; }
.sitestaffr-blog-content li { margin: 0 0 0.5em; padding-left: 0.2em; }
.sitestaffr-blog-content a { color: #1FB6CC; text-decoration: underline; }
.sitestaffr-blog-content blockquote { margin: 1.4em 0; padding: 8px 18px; border-left: 4px solid #1FB6CC; background: #E0F7FA; border-radius: 0 8px 8px 0; color: #004D40; }
.sitestaffr-blog-content img { max-width: 100%; height: auto; border-radius: 8px; }
.sitestaffr-blog-content strong { font-weight: 700; }
.sitestaffr-blog-content dl { margin: 1.5em 0; }
.sitestaffr-blog-content dt { font-weight: 600; font-size: 1.05em; margin: 1.4em 0 0.4em; }
.sitestaffr-blog-content dt:first-child { margin-top: 0; }
.sitestaffr-blog-content dd { margin: 0 0 1.2em; padding: 0 0 1.2em; border-bottom: 1px solid rgba(0,0,0,0.08); }
.sitestaffr-blog-content dd:last-child { border-bottom: none; padding-bottom: 0; }

/* ---- SEO summary (read-only) ---- */
.sitestaffr-br-seo-summary { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
.sitestaffr-br-seo-summary p { margin: 0 0 8px; color: #50575e; font-size: 0.92rem; }
.sitestaffr-br-seo-key { display: inline-block; min-width: 130px; font-weight: 600; color: #004D40; }

/* ---- Edit controls ---- */
.sitestaffr-br-label { display: block; font-weight: 600; color: #004D40; margin: 18px 0 6px; }
.sitestaffr-br-label:first-child { margin-top: 0; }
.sitestaffr-br-title { width: 100%; font-size: 1.2rem; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; }
/* SEO title uses a normal type size so a long, suffixed title is readable end-to-end
   in the single-line field (the large 1.2rem post-title size cut it off mid-string). */
.sitestaffr-br-seo-input { font-size: 0.95rem; }
.sitestaffr-br-thumb { max-width: 240px; height: auto; border-radius: 8px; display: block; margin-bottom: 8px; }
.sitestaffr-br-file { display: block; margin-top: 4px; }
.sitestaffr-br-hint { margin: 6px 0 0; font-size: 0.8rem; color: #6b7280; }
.sitestaffr-br-meta { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; font-size: 0.95rem; }

/* Body editor: WordPress's bundled TinyMCE mounts onto the textarea; the bare
   textarea is the styled fallback if the editor can't load on this front-end page. */
.sitestaffr-br-body { display: block; width: 100%; min-height: 480px; padding: 14px 16px; border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; font-size: 0.9rem; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.sitestaffr-br-body:focus { outline: 2px solid #1FB6CC; outline-offset: -2px; }
/* The wp.editor wrapper carries no admin CSS on the front end — give it a clean frame. */
.sitestaffr-br-card .wp-editor-wrap { margin-top: 0; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.sitestaffr-br-card .wp-editor-tools { padding: 6px 6px 0; background: #f6f7f7; }
.sitestaffr-br-card .wp-switch-editor { background: #fff; border: 1px solid #cbd5e1; border-bottom: none; color: #00838F; border-radius: 6px 6px 0 0; padding: 4px 10px; margin: 0 2px -1px 0; cursor: pointer; font-size: 0.8rem; }
.sitestaffr-br-card .wp-editor-container textarea.wp-editor-area { border: none; }

/* ---- Contextual action bar ----
   Mobile / mid widths (<1240px): the actions live in a dropdown folded INTO the
   sticky logo bar, opened by an "Actions" toggle beside the logo — one clean
   sticky nav, never overlapping the page content. Wide desktop (>=1240px): the
   same bar floats as a slim card parked in the right margin. Only the current
   mode's actions render (preview: Publish / Edit / Discard; edit: Save / Cancel),
   so the bar never shows every option at once. */

/* Keep the logo bar sticky on every width so it can host the Actions dropdown
   (the shared transcript-viewer base drops it to static on small screens). */
.sitestaffr-tv-topbar { position: sticky; top: 0; z-index: 40; }

/* Actions toggle (mobile/mid only — hidden on desktop). */
.sitestaffr-br-menu-toggle { display: inline-flex; align-items: center; gap: 9px; background: #E0F7FA; color: #00838F; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.sitestaffr-br-menu-toggle:hover { background: #c7eef3; }
.sitestaffr-br-menu-icon, .sitestaffr-br-menu-icon::before, .sitestaffr-br-menu-icon::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.sitestaffr-br-menu-icon { position: relative; }
.sitestaffr-br-menu-icon::before, .sitestaffr-br-menu-icon::after { content: ""; position: absolute; left: 0; }
.sitestaffr-br-menu-icon::before { top: -5px; }
.sitestaffr-br-menu-icon::after { top: 5px; }

/* Dropdown shell inside the sticky bar. */
.sitestaffr-br-actionbar { border-top: 1px solid #e5e7eb; background: #fff; box-shadow: 0 6px 14px rgba(0, 131, 143, 0.08); }
.sitestaffr-br-actionbar[hidden] { display: none; }
.sitestaffr-br-actionbar-inner { max-width: 800px; margin: 0 auto; padding: 12px 20px; }
.sitestaffr-br-actiongroup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The inactive mode's group must stay hidden — display:flex above defeats a bare
   [hidden] attribute, so re-assert it with matching specificity. */
.sitestaffr-br-actiongroup[hidden] { display: none; }
.sitestaffr-br-mode { font-weight: 700; color: #004D40; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; margin-right: auto; }

.sitestaffr-br-btn { border: none; border-radius: 8px; padding: 9px 18px; font-weight: 600; cursor: pointer; font-size: 0.9rem; line-height: 1.2; transition: background 0.15s ease, color 0.15s ease; }
.sitestaffr-br-publish { background: #1FB6CC; color: #fff; }
.sitestaffr-br-publish:hover { background: #00838F; }
.sitestaffr-br-save { background: #10b981; color: #fff; }
.sitestaffr-br-save:hover { background: #059669; }
.sitestaffr-br-secondary { background: #E0F7FA; color: #00838F; }
.sitestaffr-br-secondary:hover { background: #c7eef3; }
.sitestaffr-br-discard { background: transparent; color: #b91c1c; padding-left: 8px; padding-right: 8px; }
.sitestaffr-br-discard:hover { color: #dc2626; text-decoration: underline; }

.sitestaffr-br-footer { text-align: center; color: #6b7280; font-size: 0.8rem; margin-top: 24px; }

/* Wide desktop: hide the toggle and float the bar as a slim vertical sidebar in
   the right margin (the 800px content column is centered, leaving room aside).
   It is always shown here regardless of the mobile collapsed [hidden] state. */
@media (min-width: 1240px) {
	.sitestaffr-br-menu-toggle { display: none; }
	.sitestaffr-br-actionbar, .sitestaffr-br-actionbar[hidden] { display: block; position: fixed; top: 96px; left: calc(50% + 416px); width: 184px; border-top: none; box-shadow: none; }
	.sitestaffr-br-actionbar-inner { max-width: none; margin: 0; padding: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 131, 143, 0.14); }
	.sitestaffr-br-actiongroup { flex-direction: column; align-items: stretch; gap: 10px; }
	.sitestaffr-br-mode { margin: 0 0 4px; }
	.sitestaffr-br-btn { width: 100%; }
	.sitestaffr-br-discard { text-align: center; }
}

@media (max-width: 600px) {
	.sitestaffr-br-card { padding: 20px 18px; }
	.sitestaffr-br-preview-title { font-size: 1.5rem; }
	.sitestaffr-br-actionbar-inner { padding: 10px 14px; }
	.sitestaffr-br-btn { padding: 9px 14px; font-size: 0.85rem; }
}
