/**
 * SparkLift discussion-page Reddit UX styles (JS consolidation, 2026-07-16).
 * Moved byte-faithfully from the inline <style> in Astra Custom Layout post
 * 916 "Spark Discussion Host" (registry item #2). Enqueued only on single
 * bbPress topics by sparklift-core/modules/assets.php.
 */
/* ===== Spark discussion enhancements (single-topic only) ===== */
.single-topic .spark-disc-top{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.single-topic .spark-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#15171a;background:#fff;border:1px solid #e3e3e8;border-radius:999px;padding:8px 16px;cursor:pointer;text-decoration:none}
.single-topic .spark-back:hover{background:#f5f5f7;border-color:#d6d6dc}
.single-topic .spark-post-share{margin-left:auto}
.single-topic .spark-share-btn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:#454b54;background:#fff;border:1px solid #e3e3e8;border-radius:999px;padding:7px 14px;cursor:pointer}
.single-topic .spark-share-btn:hover{background:#FFF3E6;border-color:#FFD9A8;color:#C2410C}
/* top join box */
.single-topic .spark-join-box{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #d6d6dc;border-radius:999px;padding:13px 20px;margin:0 0 18px;color:#8a909a;font-size:15px;cursor:text;background:#fff}
.single-topic .spark-join-box:hover{border-color:#FF8A00}
/* u/ handle */
.single-topic .u-handle{display:block;font-size:12px;font-weight:600;color:#8a909a;line-height:1.1;margin-top:1px}
/* Reddit thread indentation + connector lines */
.single-topic ul.bbp-threaded-replies{margin:0 0 0 22px !important;padding-left:16px !important;border-left:2px solid #ececf1 !important;list-style:none}
.single-topic li[data-depth] > .bbp-reply-header{position:relative}
.single-topic .spark-collapse{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#0079d3;background:none;border:0;cursor:pointer;padding:4px 0;margin:2px 0 2px 2px}
.single-topic .spark-collapse:hover{text-decoration:underline}
.single-topic .spark-reply-share{font-size:12.5px;font-weight:700;color:#878a8c;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:2px 6px}
.single-topic .spark-reply-share:hover{color:#C2410C}
.single-topic .spark-reply-guest{font-size:12.5px;font-weight:700;color:#878a8c;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:2px 6px;margin-right:2px}
.single-topic .spark-reply-guest:hover{color:#FF8A00}
/* ===== kebab "..." menu for the Report control (2026-07-16 UX batch item 23) ===== */
.single-topic .spark-kebab{position:relative;display:inline-flex;vertical-align:middle;margin-left:4px}
.single-topic .spark-kebab-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;height:44px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;color:#878a8c;font-size:20px;font-weight:800;line-height:1}
.single-topic .spark-kebab-btn:hover{background:#f2f2f5;color:#15171a}
.single-topic .spark-kebab-menu{position:fixed;z-index:100001;background:#fff;border:1px solid #e6e6ea;border-radius:12px;box-shadow:0 14px 34px -10px rgba(0,0,0,.28);min-width:190px;max-width:min(280px,92vw);padding:6px;display:none}
.single-topic .spark-kebab.open .spark-kebab-menu{display:block}
.single-topic .spark-kebab-menu a.report-content{display:flex !important;align-items:center;gap:8px;width:100%;min-height:44px;margin:0 !important;padding:10px 14px !important;border:0 !important;background:none !important;border-radius:8px !important;font-size:13.5px !important;font-weight:700 !important;color:#454b54 !important;text-decoration:none !important;white-space:nowrap;line-height:1.3 !important;text-transform:none !important;box-shadow:none !important}
.single-topic .spark-kebab-menu a.report-content:hover{background:#FFF3E6 !important;color:#C2410C !important}
.single-topic .spark-kebab-menu a.report-content::before{content:"\2691";font-size:14px}
/* ===== modals ===== */
.spark-ov{position:fixed;inset:0;z-index:100000;background:rgba(15,17,20,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.spark-ov[hidden]{display:none}
.spark-modal{background:#fff;border-radius:18px;max-width:440px;width:100%;padding:24px;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);max-height:90vh;overflow:auto}
.spark-x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:26px;line-height:1;color:#8a909a;cursor:pointer}
.spark-x:hover{color:#15171a}
.spark-mh{font-size:19px;font-weight:800;color:#15171a;margin:0 0 16px}
.spark-msub{font-size:13.5px;color:#5b626b;margin:-8px 0 16px}
.spark-share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.spark-share-grid .ssh{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e6e6ea;border-radius:12px;font-size:14px;font-weight:700;color:#15171a;text-decoration:none;cursor:pointer}
.spark-share-grid .ssh:hover{background:#f7f7f9;border-color:#d6d6dc}
.spark-share-grid .ssh span{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
.ssh-x span{background:#000}.ssh-fb span{background:#1877f2}.ssh-wa span{background:#25d366}.ssh-tg span{background:#229ed9}.ssh-rd span{background:#ff4500}.ssh-em span{background:#6b7280}
.spark-copy-row{display:flex;gap:8px}
.spark-copy-url{flex:1;border:1px solid #e6e6ea;border-radius:10px;padding:10px 12px;font-size:13px;color:#5b626b;background:#f7f7f9}
.spark-copy-btn{background:#FF8A00;color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:800;font-size:13.5px;cursor:pointer;white-space:nowrap}
.spark-copy-btn:hover{background:#F57C00}
.spark-copy-btn.copied{background:#16a34a}
.spark-login-modal{max-width:420px}
.spark-login-modal .woocommerce-form-register,.spark-login-modal .u-column2{display:none}
.spark-login-modal .woocommerce form.login{border:0;padding:0;margin:0}
.spark-login-modal .woocommerce h2{display:none}
.spark-login-modal .show-password-input{display:none}
.spark-login-modal .woocommerce-form-login__submit{background:#FF8A00 !important;color:#fff !important;border:0 !important;border-radius:10px !important;font-weight:800 !important;padding:11px 20px !important;width:100%}
.spark-login-modal .woocommerce-form-login__rememberme{display:block;margin:10px 0}
.spark-login-modal .woocommerce-form-login__submit:hover{background:#F57C00 !important}
.spark-login-modal input.input-text{width:100%;border:1px solid #d6d6dc;border-radius:10px;padding:11px 13px}
.spark-login-modal .lost_password{font-size:12.5px;margin-top:8px}
.spark-login-modal .spark-reg-cta{margin-top:14px;font-size:13.5px;color:#5b626b;text-align:center}
.spark-login-modal .spark-reg-cta a{color:#FF8A00;font-weight:800}
@media(max-width:600px){.spark-share-grid{grid-template-columns:1fr}}

/* Cookie-consent video notice (Complianz), 2026-09-30: its "accept to watch" button is
 * position:absolute, but the Astra oEmbed wrapper it sits in is forced position:static (site-wide inline CSS, !important), so the
 * button floated to the top of the whole post card and covered the author row for every
 * visitor who had not accepted cookies. Anchor it to the video frame. */
body .ast-oembed-container.cmplz-blocked-content-container { position: relative !important; }

/* Phones (owner 2026-10-13, "make posting work on phones"): the 60px author column (wider in
   practice, it grows to fit "u/<name>") left posts and pasted videos only ~60% of a phone screen
   (a long YouTube video was 163px wide at 320px). Under 600px the author becomes a row at the
   top, Reddit-app style, and the post + player use the full card width. `html` prefix out-weighs
   the Customizer grid rule (same selector, printed later). */
@media (max-width: 600px) {
  html body.single-topic #bbpress-forums div.topic,
  html body.single-topic #bbpress-forums div.reply {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "author" "header" "content";
    row-gap: 8px;
  }
  html body.single-topic #bbpress-forums .bbp-topic-author,
  html body.single-topic #bbpress-forums .bbp-reply-author {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    text-align: left; gap: 4px 8px;
  }
  /* avatar, then name (+ u/handle under it), then the role, all on one row */
  html body.single-topic #bbpress-forums .bbp-topic-author > a.bbp-author-link,
  html body.single-topic #bbpress-forums .bbp-reply-author > a.bbp-author-link {
    display: flex; flex-direction: row; align-items: center; gap: 10px; text-align: left;
  }
  html body.single-topic #bbpress-forums .bbp-author-link > br { display: none; }
  html body.single-topic #bbpress-forums .bbp-author-avatar { flex: 0 0 auto; margin: 0 !important; }
  html body.single-topic #bbpress-forums .bbp-author-role { margin-left: auto; font-size: .8em; }
  html body.single-topic #bbpress-forums :is(.bbp-topic-author, .bbp-reply-author) .tc_display:empty,
  html body.single-topic #bbpress-forums :is(.bbp-topic-author, .bbp-reply-author) .tc_display:has(> ul:empty) { display: none; }
  html body.single-topic #bbpress-forums .bbp-topic-author img.avatar,
  html body.single-topic #bbpress-forums .bbp-reply-author img.avatar { width: 36px !important; height: 36px !important; }
}

/* Reddit-style author on post pages (owner, 2026-10-14: "we don't need the name twice, just
 * u/username and the date"). bbPress prints "clara_calvin" + our "u/clara_calvin": keep only
 * the u/ handle, beside the avatar. The "Participant" role label is noise, so it goes too. */
html body.single-topic #bbpress-forums .bbp-author-name { font-size: 0 !important; }
html body.single-topic #bbpress-forums .bbp-author-name .u-handle { font-size: 15px !important; font-weight: 700 !important; color: #15171a !important; display: inline !important; }
html body.single-topic #bbpress-forums .bbp-author-role { display: none !important; }
html body.single-topic #bbpress-forums .bbp-author-link { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; }
html body.single-topic #bbpress-forums .bbp-author-link > br { display: none !important; }

/* Post page author row on EVERY screen size (2026-10-14: on desktop the avatar was cut off and the
 * like button sat over the name, because only phones got the row layout). Avatar + u/name on top,
 * then the post. */
html body.single-topic #bbpress-forums div.topic,
html body.single-topic #bbpress-forums div.reply {
	grid-template-columns: minmax(0, 1fr) !important;
	grid-template-areas: "author" "header" "content" !important;
	row-gap: 10px !important;
}
html body.single-topic #bbpress-forums :is(.bbp-topic-author, .bbp-reply-author) {
	flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; gap: 8px !important; width: auto !important;
}
html body.single-topic #bbpress-forums :is(.bbp-topic-author, .bbp-reply-author) img.avatar { width: 40px !important; height: 40px !important; }
html body.single-topic #bbpress-forums :is(.bbp-topic-author, .bbp-reply-author) .tc_display:has(> ul:empty) { display: none !important; }