/* =============================================================================
 * MPLB v0.12 — Liveblog editor form: legibility + dark-theme + layout
 * -----------------------------------------------------------------------------
 * Enqueued AFTER mplb-frontend.css (dependent style). Pairs with MPLB_I18n.
 *
 * IMPORTANT: the Complianz cookie-banner plugin injects a very broad rule:
 *   html[data-theme="dark"] [class*="cmplz"] * { color:#F5E8D5 !important; }
 * The Liveblog form ends up inside a cmplz-classed ancestor, so that rule
 * repaints the form's placeholder, author token, etc. beige. We beat it by
 * raising specificity to ID level (html[data-theme] + #wpcom-liveblog-container
 * = wins over [class*=cmplz] *), forcing the form back to legible colors.
 *
 * Theme detector (confirmed): html[data-theme="dark"] = dark.
 * ============================================================================= */

/* --- Headings/labels readable on the light panel in BOTH themes ------------- */
#wpcom-liveblog-container h2,
#wpcom-liveblog-container h3,
#wpcom-liveblog-container h4,
#wpcom-liveblog-container label,
#wpcom-liveblog-container .liveblog-editor-title,
#wpcom-liveblog-container .liveblog-authors,
#wpcom-liveblog-container .liveblog-authors-title,
html[data-theme="dark"] #wpcom-liveblog-container h2,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-editor-title,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-editor-subTitle {
  color: #1a1a1a !important;
}

/* Do NOT recolor text inside the actual editable input / read-side entries. */
#wpcom-liveblog-container .liveblog-entry-text,
#wpcom-liveblog-container .liveblog-entry-text * {
  color: revert !important;
}

/* Editor placeholder (confirmed: .liveblog-lexical-placeholder). Beat Complianz
 * with html[data-theme] + ID specificity. */
#wpcom-liveblog-container .liveblog-lexical-placeholder,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-lexical-placeholder,
html[data-theme="dark"] #wpcom-liveblog-container [data-placeholder]::before {
  color: #6a6a6a !important;
  opacity: 1 !important;
}

/* Author token — confirmed class: .liveblog-select__multi-value__label.
 * Beat Complianz with ID-level specificity in dark theme. */
#wpcom-liveblog-container .liveblog-select__multi-value__label,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__multi-value__label,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__single-value,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__input,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__input input {
  color: #1a1a1a !important;
}

/* --- Tabs: dark button background -> LIGHT text, active tab gets red accent.
 * Also raised to dark-theme ID specificity so Complianz can't repaint them. */
#wpcom-liveblog-container .liveblog-editor-tab,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-editor-tab,
html[data-theme="dark"] #wpcom-liveblog-container .components-tab-panel__tabs button {
  color: #f2f2f2 !important;
  background: #1d1d1d !important;
  border: none !important;
  padding: 6px 14px !important;
}
#wpcom-liveblog-container .liveblog-editor-tab:hover,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-editor-tab:hover {
  background: #2a2a2a !important;
}
#wpcom-liveblog-container .liveblog-editor-tab.active,
#wpcom-liveblog-container .liveblog-editor-tab[aria-selected="true"],
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-editor-tab.active,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-editor-tab[aria-selected="true"] {
  background: #c00 !important;
  color: #fff !important;
}

/* --- Layout: tab row sits flush above the toolbar, calmer vertical rhythm. */
#wpcom-liveblog-container .liveblog-editor-tabs {
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 0 10px !important;
  border-bottom: none !important;
}
#wpcom-liveblog-container .liveblog-editor-title {
  margin: 0 0 14px !important;
}
#wpcom-liveblog-container .liveblog-authors,
#wpcom-liveblog-container .liveblog-editor-subTitle {
  margin: 16px 0 8px !important;
}

/* --- Editor hint (extends the v0.6 single-line tip): readable on both themes. */
.liveblog-editor-container::after {
  color: #888 !important;
  line-height: 1.5;
}

/* --- Items OUTSIDE the light panel follow the SITE theme --------------------- */
html[data-theme="dark"] .liveblog-update-counter,
html[data-theme="dark"] .liveblog-updates-count,
html[data-theme="dark"] #liveblog-update-spinner,
html[data-theme="dark"] .mplb-liveblog-header {
  color: #f2f2f2 !important;
}

/* =============================================================================
 * Read-side entry spacing — give each published entry room to breathe.
 * Real classes (Liveblog 1.12.x app.js): liveblog-entry-main / -aside /
 * -content, liveblog-meta-time, liveblog-meta-author(-avatar/-name).
 * Goal: timestamp, author row and body are clearly separated (cf. article head).
 * ============================================================================= */

#wpcom-liveblog-container .liveblog-entry {
  padding: 22px 0 24px !important;
}

/* Timestamp on its own line, with space below before the author row. */
#wpcom-liveblog-container .liveblog-meta-time {
  display: block;
  margin: 0 0 10px !important;
}

/* Author row: avatar + name aligned, breathing room above the body. */
#wpcom-liveblog-container .liveblog-meta-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px !important;
}
#wpcom-liveblog-container .liveblog-meta-author-avatar img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
}
#wpcom-liveblog-container .liveblog-meta-author-name {
  line-height: 1.2;
}

/* Entry body: separated from the meta above. */
#wpcom-liveblog-container .liveblog-entry-content {
  margin-top: 4px;
}
#wpcom-liveblog-container .liveblog-entry-main {
  display: block;
}

/* =============================================================================
 * v0.13.2: delete-confirm modal — force legible colors in dark theme.
 * The modal is portal'd into <body> and lands inside a [class*="cmplz"] ancestor,
 * so Complianz's `html[data-theme="dark"] [class*="cmplz"] * { color:#F5E8D5 }`
 * repaints the modal text light on its white panel -> invisible. Class-level
 * !important beats the universal-selector rule (class > *), no ID available here.
 * ========================================================================== */
.mplb-delete-modal {
  background: #fff !important;
}
.mplb-delete-modal p,
html[data-theme="dark"] .mplb-delete-modal p {
  color: #111 !important;
}
/* Cancel button: light panel, dark legible text. */
.mplb-delete-modal .liveblog-btn,
.mplb-delete-modal .liveblog-btn-cancel,
html[data-theme="dark"] .mplb-delete-modal .liveblog-btn,
html[data-theme="dark"] .mplb-delete-modal .liveblog-btn-cancel {
  background: transparent !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
}
/* Delete (destructive) button: solid red, white text. */
.mplb-delete-modal .liveblog-btn-delete,
html[data-theme="dark"] .mplb-delete-modal .liveblog-btn-delete {
  background: #c00 !important;
  color: #fff !important;
  border: 1px solid #c00 !important;
}

/* v0.12.4: dark-theme editor input legibility — Lexical + HTML tab.
 * Liveblog build/app.css hardcodes background:#fff; on dark theme inherited
 * text color is near-white -> invisible. Force dark bg + light text with
 * html[data-theme] + ID specificity (same pattern as the rest of this file). */
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-lexical-editor,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-lexical-editor-inner,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-html-editor,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-html-editor textarea {
    background: #1c1c1e;
    color: #F5E8D5;
    border-color: #444;
}
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-lexical-editor [contenteditable="true"] {
    color: #F5E8D5;
}

/* v0.12.4: client request — Arial for all liveblog quotes (editor + stream).
 * Theme cascade pushes NAMU-1930 into blockquotes; direct rule wins. */
#wpcom-liveblog-container blockquote,
#wpcom-liveblog-container blockquote p {
    font-family: Arial, Helvetica, sans-serif;
}

/* v0.12.4: dark-theme author dropdown — react-select menu stays white with
 * near-white option text. Dark menu + light text, ID specificity as usual. */
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__menu,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__menu-list {
    background: #1c1c1e;
}
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__option {
    color: #F5E8D5;
    background: #1c1c1e;
}
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__option--is-focused,
html[data-theme="dark"] #wpcom-liveblog-container .liveblog-select__option--is-selected {
    background: #333;
    color: #fff;
}

/* v0.14.4: dark-theme blockquote — mplb-frontend.css hardcodes a light
 * #fafafa box while the theme turns text white (var(--ink)) in dark mode,
 * so quotes became white-on-white. Match the theme's dark input tone. */
html[data-theme="dark"] #wpcom-liveblog-container blockquote {
    background: #141414;
    color: var(--ink);
}