/* Dreem Bridge article styles
 * Auto-loaded on posts published via Command (have _dreem_bridge_origin = command meta).
 * Selectors are scoped to .dreem-article so they don't affect the rest of the site.
 * COLORS are left to the theme — we only style structural chrome (spacing, sizes,
 * borders on chrome elements). Themes invest a lot in heading color/typography, and
 * forcing our colors makes Command-published posts look out of place. The rule of
 * thumb: only set color where the underlying element has NO theme styling (our
 * custom blocks like dreem-faqs, dreem-gbp-cta) — never on h1/h2/h3/strong/etc.
 */

.dreem-article { font-size: 16px; line-height: 1.65; }
.dreem-article p { margin: 0 0 1em; }
.dreem-article h1, .dreem-article h2, .dreem-article h3, .dreem-article h4 { font-family: inherit; }
.dreem-article h2 { margin: 1.8em 0 0.6em; scroll-margin-top: 20px; line-height: 1.3; }
.dreem-article h3 { margin: 1.4em 0 0.5em; }
.dreem-article ul, .dreem-article ol { margin: 0 0 1em 1.5em; padding: 0 0 0 0.5em; }
.dreem-article ul { list-style: disc outside; }
.dreem-article ol { list-style: decimal outside; }
.dreem-article li { margin: 0.4em 0; }
.dreem-article hr { border: 0; border-top: 0.5px solid #e5e5e5; margin: 2em 0; }

/* tel: links — preserve theme color but mark them with a dotted underline so they look tappable */
.dreem-article a.dreem-tel { white-space: nowrap; border-bottom: 1px dotted currentColor; text-decoration: none; }

.dreem-article figure.dreem-inline-img { margin: 1.8em 0; padding: 0; }
.dreem-article figure.dreem-inline-img img { width: 100%; height: auto; border-radius: 8px; border: 0.5px solid #e5e5e5; display: block; }
.dreem-article figure.dreem-inline-img figcaption { font-size: 12px; color: #888; margin-top: 6px; text-align: center; font-style: italic; }

/* Pull quote — override theme blockquote styles aggressively (red/blue borders). */
.dreem-article blockquote.dreem-pullquote {
  background: transparent !important;
  border: none !important;
  border-top: 0.5px solid #e5e5e5 !important;
  border-bottom: 0.5px solid #e5e5e5 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 18px 24px 18px 48px;
  margin: 1.8em 0;
  color: #1a1a1a;
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  text-align: center;
  position: relative;
  border-radius: 0;
  box-shadow: none;
}
.dreem-article blockquote.dreem-pullquote::before {
  content: '"';
  position: absolute;
  left: 16px;
  top: 6px;
  font-size: 48px;
  color: #00bad6;
  line-height: 1;
  font-family: Georgia, serif;
  font-style: normal;
}
.dreem-article blockquote.dreem-pullquote p { margin: 0; font-style: italic; }

.dreem-article table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; }
.dreem-article th, .dreem-article td { padding: 10px 14px; border: 0.5px solid #e5e5e5; text-align: left; vertical-align: top; }
.dreem-article th { background: #fafafa; font-weight: 600; }
.dreem-article tr:nth-child(even) td { background: #fafafa; }
.dreem-article script { display: none !important; }

.dreem-article .dreem-tldr { background: linear-gradient(to right, #f0fafc, #fafafa); border-left: 3px solid #00bad6; padding: 14px 18px; margin: 0 0 1.5em; border-radius: 4px; }
.dreem-article .dreem-tldr-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #00bad6; text-transform: uppercase; margin-bottom: 6px; }
.dreem-article .dreem-tldr p { margin: 0; font-size: 14px; color: #333; line-height: 1.55; }

.dreem-article .dreem-byline { font-size: 13px; color: #888; margin: 0 0 1.2em; padding-bottom: 0.8em; border-bottom: 0.5px solid #e5e5e5; }
.dreem-article .dreem-byline strong { color: #1a1a1a; font-weight: 500; }
.dreem-article .dreem-byline-date, .dreem-article .dreem-byline-read, .dreem-article .dreem-byline-updated { color: #888; }
.dreem-article .dreem-byline-updated { color: #00bad6; font-weight: 500; }

/* TOC — strip theme's default list markers; chevron icons stay cyan. */
.dreem-article .dreem-toc { background: #fafafa; border: 0.5px solid #e5e5e5; border-radius: 8px; padding: 16px 20px; margin: 0 0 2em; font-size: 14px; }
.dreem-article .dreem-toc-title { font-weight: 500; margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: #888; }
.dreem-article .dreem-toc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.dreem-article .dreem-toc li { list-style: none !important; margin: 6px 0 !important; padding: 0 !important; display: flex !important; align-items: center; gap: 8px; background: none !important; }
.dreem-article .dreem-toc li::before, .dreem-article .dreem-toc li::marker { content: none !important; display: none !important; }
.dreem-article .dreem-toc-icon { color: #00bad6; flex-shrink: 0; width: 14px; height: 14px; }

.dreem-article .dreem-faqs { margin: 2.5em 0 0; padding-top: 1.5em; border-top: 0.5px solid #e5e5e5; }
.dreem-article .dreem-faqs h2 { margin-top: 0; }
.dreem-article .dreem-faq-item { border: 0.5px solid #e5e5e5; border-radius: 8px; margin: 0 0 10px; background: #fff; padding: 0; }
.dreem-article .dreem-faq-item[open] { border-color: #00bad6; }
.dreem-article .dreem-faq-item summary { cursor: pointer; padding: 14px 18px; font-weight: 500; font-size: 15px; list-style: none !important; position: relative; padding-right: 40px; background: none !important; color: #1a1a1a; }
.dreem-article .dreem-faq-item summary::-webkit-details-marker { display: none !important; }
.dreem-article .dreem-faq-item summary::marker { display: none !important; content: none !important; }
.dreem-article .dreem-faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #00bad6; font-weight: 400; }
.dreem-article .dreem-faq-item[open] summary::after { content: "−"; }
.dreem-article .dreem-faq-answer { padding: 0 18px 14px; color: #444; font-size: 14px; line-height: 1.6; }
.dreem-article .dreem-faq-answer p { margin: 0; }

.dreem-article .dreem-author-bio { margin: 2.5em 0 0; padding: 18px 22px; background: #fafafa; border: 0.5px solid #e5e5e5; border-radius: 8px; }
.dreem-article .dreem-author-bio-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #888; text-transform: uppercase; margin-bottom: 12px; }
.dreem-article .dreem-author-bio-inner { display: flex; gap: 16px; align-items: flex-start; }
.dreem-article .dreem-author-bio-img { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 0.5px solid #e5e5e5; }
.dreem-article .dreem-author-bio-text { flex: 1; }
.dreem-article .dreem-author-bio-name { font-size: 16px; font-weight: 600; color: #0f0f10; margin: 0 0 4px; }
.dreem-article .dreem-author-bio-description { font-size: 13px; color: #555; line-height: 1.6; margin: 0 0 8px; }
.dreem-article .dreem-author-bio-link { font-size: 12px; font-weight: 500; display: inline-block; }

.dreem-article .dreem-gbp-cta { margin: 2em 0 0; padding: 18px 22px; background: linear-gradient(to right, #fafafa, #f0fafc); border: 0.5px solid #e5e5e5; border-left: 3px solid #00bad6; border-radius: 6px; text-align: center; }
.dreem-article .dreem-gbp-stars { margin-bottom: 6px; line-height: 1; }
.dreem-article .dreem-stars-svg { display: inline-flex; align-items: center; gap: 2px; }
.dreem-article .dreem-stars-svg svg { display: block; }
.dreem-article .dreem-gbp-rating { font-size: 14px; color: #444; margin-bottom: 10px; }
.dreem-article .dreem-gbp-link { display: inline-block; font-size: 13px; font-weight: 600; }
.dreem-article .dreem-gbp-quotes { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.dreem-article .dreem-gbp-quote {
  background: rgba(255,255,255,0.6) !important;
  border-left: 2px solid #fbbf24 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-right: 0 !important;
  padding: 10px 14px;
  margin: 0;
  border-radius: 4px;
  text-align: left;
}
.dreem-article .dreem-gbp-quote p { font-size: 13px; color: #444; font-style: italic; margin: 0 0 6px; line-height: 1.5; }
.dreem-article .dreem-gbp-quote cite { font-size: 11px; color: #888; font-style: normal; }
.dreem-article .dreem-gbp-quote::before { content: none !important; }

.dreem-article .dreem-related { margin: 2.5em 0 0; padding-top: 1.5em; border-top: 0.5px solid #e5e5e5; }
.dreem-article .dreem-related h2 { margin-top: 0; }
.dreem-article .dreem-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dreem-article .dreem-related-card { display: block; border: 0.5px solid #e5e5e5; border-radius: 8px; overflow: hidden; background: #fff; text-decoration: none !important; color: inherit !important; transition: all 0.15s ease; }
.dreem-article .dreem-related-card:hover { border-color: #00bad6; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,186,214,0.08); }
.dreem-article .dreem-related-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: #fafafa; }
.dreem-article .dreem-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; border: none; margin: 0; }
.dreem-article .dreem-related-body { padding: 12px 14px; }
.dreem-article .dreem-related-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #00bad6; margin-bottom: 6px; }
.dreem-article .dreem-related-title { font-size: 15px; font-weight: 600; color: #0f0f10; line-height: 1.35; margin: 0 0 6px; }
.dreem-article .dreem-related-excerpt { font-size: 12px; color: #666; line-height: 1.5; }
@media (max-width: 640px) {
  .dreem-article .dreem-related-grid { grid-template-columns: 1fr; }
}

.dreem-article .dreem-transparency { margin: 2em 0 0; padding: 14px 18px; background: #fafafa; border: 0.5px solid #e5e5e5; border-radius: 6px; }
.dreem-article .dreem-transparency-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #888; text-transform: uppercase; margin-bottom: 6px; }
.dreem-article .dreem-transparency p { margin: 0; font-size: 12px; color: #666; line-height: 1.6; font-style: italic; }

/* Featured image rendered by the bridge plugin */
.dreem-article .dreem-featured-img { margin: 0 0 1.8em; padding: 0; }
.dreem-article .dreem-featured-img img { width: 100%; height: auto; border-radius: 8px; border: 0.5px solid #e5e5e5; display: block; margin: 0; }
