/* ════════════════════════════════════════════════════════════════════
   Rivels content styles — shared by the published page (post.php,
   product.php), the editor canvas and the editor's live preview.
   Change a rule here and all three change together.
   ════════════════════════════════════════════════════════════════════ */
.rv-content {
  --rv-text: rgba(255, 255, 255, 0.86);
  --rv-muted: rgba(255, 255, 255, 0.6);
  --rv-heading: #ffffff;
  --rv-accent: #fd307a;
  --rv-accent-2: #7dd3fc;
  --rv-surface: rgba(255, 255, 255, 0.04);
  --rv-border: rgba(255, 255, 255, 0.12);
  --rv-radius: 12px;
  --rv-gap: 1.5rem;
  color: var(--rv-text);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.075rem;
  line-height: 1.8;
  overflow-wrap: break-word;
}
.rv-content::after { content: ''; display: table; clear: both; }
.rv-content > * + * { margin-top: var(--rv-gap); }
.rv-content > :first-child { margin-top: 0; }

/* ── Text ─────────────────────────────────────────────────────────── */
.rv-content h1, .rv-content h2, .rv-content h3, .rv-content h4, .rv-content h5, .rv-content h6 {
  font-family: 'Zen Dots', 'Montserrat', sans-serif;
  color: var(--rv-heading);
  line-height: 1.3;
  font-weight: 400;
  margin: 2.2rem 0 0.9rem;
  scroll-margin-top: 100px;
}
.rv-content h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); }
.rv-content h3 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); }
.rv-content h4 { font-size: 1.15rem; }
.rv-content h5, .rv-content h6 { font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
.rv-content .rb-heading + * { margin-top: 0.4rem; }
.rv-content p { margin: 0 0 1.1em; }
.rv-content p:last-child { margin-bottom: 0; }
.rv-content a { color: var(--rv-accent); text-decoration: underline; text-underline-offset: 3px; }
.rv-content a:hover { color: #ff5b98; }
.rv-content strong, .rv-content b { color: #fff; font-weight: 700; }
.rv-content mark { background: rgba(253, 48, 122, 0.25); color: #fff; padding: 0 0.2em; border-radius: 3px; }
.rv-content ul, .rv-content ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.rv-content li { margin: 0.3em 0; }
.rv-content li::marker { color: var(--rv-accent); }
.rv-content code { background: rgba(255, 255, 255, 0.08); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.9em; }
.rv-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rv-content th, .rv-content td { border: 1px solid var(--rv-border); padding: 0.6rem 0.8rem; text-align: left; }
.rv-content th { background: var(--rv-surface); color: #fff; }
.rv-content img { max-width: 100%; height: auto; }

.rb-text--small { font-size: 0.92rem; }
.rb-text--large { font-size: 1.25rem; line-height: 1.7; }
.rb-text--lead { font-size: 1.3rem; line-height: 1.65; color: #fff; font-weight: 500; }
.rb-text--dropcap > p:first-child::first-letter {
  float: left; font-family: 'Zen Dots', sans-serif; font-size: 3.4em; line-height: 0.9;
  padding: 0.08em 0.12em 0 0; color: var(--rv-accent);
}

/* ── Alignment (images, videos) ───────────────────────────────────── */
.rv-content .rb-image, .rv-content .rb-video { margin-left: 0; margin-right: 0; }
.rb-image, .rb-video { width: var(--rb-w, 100%); max-width: 100%; }
.rb-align-center { margin-left: auto !important; margin-right: auto !important; }
.rb-align-right { margin-left: auto !important; }
.rb-align-left { margin-right: auto !important; }
/* Left/right images smaller than full width wrap text around them, like a magazine */
.rb-image.rb-float.rb-align-left { float: left; margin: 0.35rem 1.6rem 1rem 0 !important; }
.rb-image.rb-float.rb-align-right { float: right; margin: 0.35rem 0 1rem 1.6rem !important; }
.rb-align-wide { width: min(100vw - 2rem, 1100px) !important; max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
.rb-align-full { width: 100vw !important; max-width: none; position: relative; left: 50%; transform: translateX(-50%); border-radius: 0 !important; }
.rb-align-full img, .rb-align-full .rb-embed, .rb-align-full video { border-radius: 0 !important; }

/* ── Image ────────────────────────────────────────────────────────── */
.rb-image img { display: block; width: 100%; height: auto; }
.rb-rounded img, .rb-rounded .rb-embed, .rb-rounded video { border-radius: var(--rv-radius); }
.rb-image.rb-rounded img { border-radius: var(--rv-radius); }
.rb-shadow img { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.rv-content figcaption { font-size: 0.85rem; color: var(--rv-muted); text-align: center; margin-top: 0.6rem; line-height: 1.5; }

/* Old editor's image styles, kept so imported posts look the same */
.rb-circle img, img.img-circle { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50% !important; }
.rb-frame img, img.img-border { padding: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--rv-border); }
img.img-rounded { border-radius: var(--rv-radius); }
img.img-shadow { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
img.img-float-left { float: left; margin: 0.35rem 1.6rem 1rem 0; max-width: 50%; }
img.img-float-right { float: right; margin: 0.35rem 0 1rem 1.6rem; max-width: 50%; }

/* ── Downloads ────────────────────────────────────────────────────── */
.rv-content a.rb-file__card { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--rv-border); border-radius: var(--rv-radius); background: var(--rv-surface); text-decoration: none; color: var(--rv-text); transition: border-color 0.2s, transform 0.2s; }
.rv-content a.rb-file__card:hover { border-color: var(--rv-accent); transform: translateY(-2px); color: var(--rv-text); }
.rb-file__icon { width: 52px; height: 60px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #fd307a, #7c3aed); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.04em; }
.rb-file__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.rb-file__info strong { color: #fff; overflow-wrap: anywhere; }
.rb-file__info small { color: var(--rv-muted); font-size: 0.8rem; }
.rb-file__btn { flex-shrink: 0; background: var(--rv-accent); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 0.55rem 1.1rem; border-radius: 30px; }
.rb-file-btn small { font-weight: 500; opacity: 0.85; }
@media (max-width: 520px) { .rv-content a.rb-file__card { flex-wrap: wrap; } .rb-file__btn { width: 100%; text-align: center; } }

/* ── Video ────────────────────────────────────────────────────────── */
.rb-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--rv-radius); overflow: hidden; }
.rb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rb-video-file { display: block; width: 100%; height: auto; background: #000; border-radius: var(--rv-radius); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.rb-buttons { display: flex; flex-wrap: wrap; align-items: center; }
.rb-buttons--justify > .rb-btn { flex: 1 1 0; }
.rv-content a.rb-btn, a.rb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  background: var(--btn-bg, #fd307a); color: var(--btn-fg, #fff);
  border: 2px solid var(--btn-border, var(--btn-bg, #fd307a)); border-radius: var(--btn-radius, 30px);
  font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
a.rb-btn:hover { color: var(--btn-fg, #fff); transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
a.rb-btn:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 3px; }
.rb-btn--sm { padding: 0.5rem 1rem; font-size: 0.82rem; }
.rb-btn--md { padding: 0.8rem 1.6rem; font-size: 0.95rem; }
.rb-btn--lg { padding: 1rem 2.1rem; font-size: 1.05rem; }
.rb-btn--xl { padding: 1.2rem 2.6rem; font-size: 1.2rem; }
.rb-btn--full { flex: 1 1 100%; }

/* ── Gallery ──────────────────────────────────────────────────────── */
.rb-gallery { display: grid; grid-template-columns: repeat(var(--rb-cols, 3), minmax(0, 1fr)); gap: var(--rb-gap, 12px); }
.rb-gallery figure { margin: 0; }
.rb-gallery img { display: block; width: 100%; height: auto; }
.rb-gallery--crop img { aspect-ratio: 1 / 1; object-fit: cover; }
.rb-gallery.rb-rounded img { border-radius: 10px; }

/* ── Image + text / columns ───────────────────────────────────────── */
.rb-mediatext { display: grid; grid-template-columns: var(--rb-media, 50%) 1fr; gap: 2rem; align-items: center; }
.rb-mediatext--right { grid-template-columns: 1fr var(--rb-media, 50%); }
.rb-mediatext--right .rb-mediatext__media { order: 2; }
.rb-valign-top { align-items: start; } .rb-valign-bottom { align-items: end; }
.rb-mediatext__media { margin: 0; }
.rb-mediatext__media img { display: block; width: 100%; height: auto; }
.rb-mediatext.rb-rounded img { border-radius: var(--rv-radius); }
.rb-mediatext__body > :first-child { margin-top: 0; }
.rb-columns { display: grid; grid-template-columns: repeat(var(--rb-cols, 2), minmax(0, 1fr)); gap: var(--rb-gap, 24px); }
.rb-columns--boxed .rb-col { background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); padding: 1.25rem 1.4rem; }
.rb-col > :first-child { margin-top: 0; }

/* ── Quote / callout / TOC / code / divider ───────────────────────── */
.rb-quote { margin-left: 0; margin-right: 0; padding: 0.4rem 0 0.4rem 1.4rem; border-left: 4px solid var(--rv-accent); font-style: italic; color: #fff; }
.rb-quote p { margin: 0; }
.rb-quote cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.88rem; color: var(--rv-muted); }
.rb-quote cite::before { content: '— '; }
.rb-quote--large { border-left: 0; padding: 1rem 0; text-align: center; font-family: 'Zen Dots', sans-serif; font-style: normal; font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.45; }
.rb-quote--large::before { content: '“'; display: block; font-size: 3rem; line-height: 1; color: var(--rv-accent); }
.rb-callout { display: flex; gap: 0.9rem; padding: 1rem 1.2rem; border-radius: var(--rv-radius); border: 1px solid; }
.rb-callout__icon { font-size: 1.3rem; line-height: 1.6; }
.rb-callout__body > :first-child { margin-top: 0; } .rb-callout__body > :last-child { margin-bottom: 0; }
.rb-callout--info    { background: rgba(125, 211, 252, 0.08); border-color: rgba(125, 211, 252, 0.35); }
.rb-callout--success { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.35); }
.rb-callout--warning { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.4); }
.rb-callout--danger  { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.4); }
.rb-callout--brand   { background: rgba(253, 48, 122, 0.1); border-color: rgba(253, 48, 122, 0.45); }
.rb-toc { background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); padding: 1.1rem 1.4rem; }
.rb-toc__title { font-weight: 700; color: #fff; margin: 0 0 0.5rem !important; }
.rb-toc ol { margin: 0; padding-left: 1.2em; }
.rb-toc li { margin: 0.2em 0; }
.rb-toc a { text-decoration: none; }
.rb-toc__l3 { margin-left: 1rem !important; font-size: 0.95em; }
.rb-toc__l4, .rb-toc__l5, .rb-toc__l6 { margin-left: 2rem !important; font-size: 0.9em; }
.rb-toc__empty { color: var(--rv-muted); font-size: 0.9rem; margin: 0; }
.rb-code { background: #0f131c; border: 1px solid var(--rv-border); border-radius: 10px; padding: 1rem 1.2rem; overflow-x: auto; font-size: 0.9rem; line-height: 1.6; }
.rb-code code { background: none; padding: 0; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; color: #e5e7eb; }
.rb-divider { border: 0; height: 0; width: var(--rb-w, 100%); margin-left: auto; margin-right: auto; border-top: 1px solid var(--rv-border); }
.rb-divider--dashed { border-top-style: dashed; } .rb-divider--dotted { border-top: 3px dotted var(--rv-border); }
.rb-divider--gradient { border: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--rv-accent), transparent); }
.rv-content .rb-space-sm { margin-top: 0.8rem; margin-bottom: 0.8rem; }
.rv-content .rb-space-lg { margin-top: 3rem; margin-bottom: 3rem; }
.rv-content .rb-spacer { margin: 0; }
.rv-content .rb-spacer + * { margin-top: 0; }

/* ── Phones: stack everything ─────────────────────────────────────── */
@media (max-width: 640px) {
  .rv-content { font-size: 1rem; }
  .rb-image.rb-align-left, .rb-image.rb-align-right { float: none !important; width: 100% !important; margin: 0 !important; }
  .rv-content > .rb-image.rb-align-left, .rv-content > .rb-image.rb-align-right { margin-top: var(--rv-gap) !important; }
  .rb-video { width: 100% !important; }
  .rb-mediatext, .rb-mediatext--right { grid-template-columns: 1fr; gap: 1rem; }
  .rb-mediatext--right .rb-mediatext__media { order: 0; }
  .rb-columns { grid-template-columns: 1fr; }
  .rb-gallery { grid-template-columns: repeat(min(var(--rb-cols, 3), 2), minmax(0, 1fr)); }
  .rb-buttons--justify { flex-direction: column; align-items: stretch; }
  .rb-align-wide { width: 100% !important; left: 0; transform: none; }
}