/* =========================================================
   CODEDESIGN BLOG — DEFAULT CONTENT THEME
   ---------------------------------------------------------
   Loaded inside the page-preview iframe AFTER reset.css and
   reqStyles.css. Targets only .cdb-* classes so there is
   zero conflict with the reset or general site styles.

   Class inventory mirrors what the Tiptap blog editor in
   codedesign-v2 serialises to HTML (PostEditor.jsx +
   every extension's renderHTML). A few backward-compat
   aliases are included for older placeholder data that uses
   classes like "cdb-paragraph" / "cdb-list-bullet".
   ========================================================= */


/* ---------------------------------------------------------
   0. CSS CUSTOM PROPERTIES
   --------------------------------------------------------- */
:root {
  /* Links */
  --cdb-link-color: #4f46e5;
  --cdb-link-hover-color: #4338ca;

  /* Code blocks */
  --cdb-code-bg: #18181b;
  --cdb-code-color: #f4f4f5;

  /* Callout backgrounds and border accents */
  --cdb-callout-info-bg: #eff6ff;
  --cdb-callout-info-border: #3b82f6;
  --cdb-callout-warning-bg: #fffbeb;
  --cdb-callout-warning-border: #f59e0b;
  --cdb-callout-success-bg: #f0fdf4;
  --cdb-callout-success-border: #22c55e;
  --cdb-callout-error-bg: #fef2f2;
  --cdb-callout-error-border: #ef4444;
  --cdb-callout-note-bg: #f9fafb;
  --cdb-callout-note-border: #6b7280;
  --cdb-callout-tip-bg: #faf5ff;
  --cdb-callout-tip-border: #a855f7;
}


/* ---------------------------------------------------------
   1. CONTENT WRAPPER
   --------------------------------------------------------- */
.cdb-content {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}


/* ---------------------------------------------------------
   2. HEADINGS
   Overrides reset.css "h1-h6 { font: inherit }" via higher
   specificity (class selector beats element selector).

   Spacing rule: margin-top is large (separates from previous
   section), margin-bottom is tight (keeps heading visually
   attached to the content it introduces). Ratio ≈ 4:1.
   --------------------------------------------------------- */
.cdb-h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 700;
  color: #18181b;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.cdb-h2 {
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 700;
  color: #18181b;
  margin-top: 2.75rem;
  margin-bottom: 0.625rem;
  letter-spacing: -0.015em;
}

.cdb-h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  color: #18181b;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
}

.cdb-h4 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
  color: #18181b;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.cdb-h5 {
  font-size: 1.125rem;
  line-height: 1.45;
  font-weight: 700;
  color: #18181b;
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
}

.cdb-h6 {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: #18181b;
  margin-top: 1.25rem;
  margin-bottom: 0.375rem;
}


/* ---------------------------------------------------------
   3. PARAGRAPH AND BLOCKQUOTE
   .cdb-paragraph is a backward-compat alias for older data.
   --------------------------------------------------------- */
.cdb-p,
.cdb-paragraph {
  font-size: 1.0625rem;   /* 17px — slightly larger than base for long-form reading */
  line-height: 1.8;
  color: #3f3f46;
  margin-bottom: 1.375rem;
}

.cdb-blockquote {
  border-left: 4px solid #d4d4d8;
  padding: 0.625rem 0 0.625rem 1.5rem;
  font-style: italic;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  color: #52525b;
  font-size: 1.0625rem;
  line-height: 1.75;
}


/* ---------------------------------------------------------
   4. LISTS
   reset.css zeroes list-style on ul/ol — we restore it here
   only on the scoped cdb- classes.
   .cdb-list-bullet / .cdb-list-item: backward-compat aliases.
   --------------------------------------------------------- */
.cdb-ul,
.cdb-list-bullet {
  list-style-type: disc;
  padding-left: 1.75rem;
  margin-top: 1.25rem;
  margin-bottom: 1.375rem;
}

.cdb-ol {
  list-style-type: decimal;
  padding-left: 1.75rem;
  margin-top: 1.25rem;
  margin-bottom: 1.375rem;
}

.cdb-li,
.cdb-list-item {
  color: #3f3f46;
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.cdb-li:last-child,
.cdb-list-item:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   5. HORIZONTAL RULE
   --------------------------------------------------------- */
.cdb-hr {
  border: none;
  border-top: 1px solid #e4e4e7;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.cdb-hr--dotted {
  border-top-style: dotted;
  border-top-color: #d4d4d8;
}

.cdb-hr--text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: none;
  border-top: none;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.cdb-hr--text::before,
.cdb-hr--text::after {
  content: '';
  flex: 1;
  border-top: 1px solid #e4e4e7;
}


/* ---------------------------------------------------------
   6. CHECKLIST
   --------------------------------------------------------- */
.cdb-checklist {
  list-style: none;
  padding-left: 0;
  margin-top: 1.25rem;
  margin-bottom: 1.375rem;
}

.cdb-checklist__item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.cdb-checklist__item:last-child {
  margin-bottom: 0;
}

/* Text-alignment variants driven by inline style on inner paragraph */
.cdb-checklist__item:has([style*="text-align: left"]) {
  justify-content: flex-start;
}

.cdb-checklist__item:has([style*="text-align: center"]) {
  justify-content: center;
}

.cdb-checklist__item:has([style*="text-align: right"]) {
  justify-content: flex-end;
}

.cdb-checklist__item:has([style*="text-align: center"]) .cdb-checklist__label,
.cdb-checklist__item:has([style*="text-align: right"]) .cdb-checklist__label {
  flex: 0 1 auto;
}

.cdb-checklist__checkbox {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border: 2px solid #d4d4d8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  user-select: none;
  box-sizing: border-box;
}

.cdb-checklist__item--done .cdb-checklist__checkbox {
  background-color: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

.cdb-checklist__label {
  min-width: 0;
  flex: 1 1 0%;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  color: #3f3f46;
}

.cdb-checklist__label .cdb-p {
  margin: 0;
  line-height: 1.75rem;
}

.cdb-checklist__item--done .cdb-checklist__label {
  text-decoration: line-through;
  color: #71717a;
}


/* ---------------------------------------------------------
   7. CODE BLOCK
   --------------------------------------------------------- */
.cdb-code-block {
  background-color: var(--cdb-code-bg, #18181b);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.cdb-code-block pre {
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 0;
}

.cdb-code-block code {
  font-size: 0.875rem;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
    'DejaVu Sans Mono', monospace;
  color: var(--cdb-code-color, #f4f4f5);
  line-height: 1.75;
}

/* Inline code inside prose */
.cdb-content code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
    'DejaVu Sans Mono', monospace;
  font-size: 0.875em;
  background-color: #f4f4f5;
  color: #18181b;
  padding: 0.1em 0.375em;
  border-radius: 0.25rem;
}

/* Don't double-style code inside a code block */
.cdb-code-block .cdb-content code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}


/* ---------------------------------------------------------
   8. TABLE
   reset.css sets border-collapse:collapse — that's fine, we
   own the wrapper and cell classes. Do NOT touch table overflow
   behaviour (owned by .cdb-table-wrapper).
   --------------------------------------------------------- */
.cdb-table-wrapper {
  overflow-x: auto;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  position: relative;
}

.cdb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

/* Both class-based aliases and raw element selectors — Tiptap's CustomTableCell /
   CustomTableHeader extensions do not inject class names onto <td>/<th>, so we
   must target raw elements inside .cdb-table as well. */
.cdb-table__row,
.cdb-table tr {
  border-bottom: 1px solid #e4e4e7;
}

.cdb-table__cell,
.cdb-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  color: #3f3f46;
  border: 1px solid #e4e4e7;
  line-height: 1.6;
  position: relative;
  vertical-align: top;
}

.cdb-table__header-cell,
.cdb-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #18181b;
  background-color: #fafafa;
  border: 1px solid #e4e4e7;
  line-height: 1.6;
  position: relative;
  vertical-align: top;
}


/* ---------------------------------------------------------
   9. IMAGE
   Width modifiers are the content-column breakout system.
   --regular constrains to a readable prose width,
   --wide breaks slightly wider, --full goes edge-to-edge.
   The extension serialises to <figure class="cdb-image cdb-image--{size}">.
   --------------------------------------------------------- */
.cdb-image {
  display: block;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cdb-image--regular {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.cdb-image--wide {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.cdb-image--full {
  width: 100%;
  max-width: none;
}

.cdb-image__img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
}

.cdb-image__caption {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  text-align: center;
  color: #71717a;
  font-style: italic;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   10. GALLERY
   The extension serialises to:
     Grid:     <div class="cdb-gallery cdb-gallery--grid">
                 <img class="cdb-gallery__image"> …
               </div>
     Carousel: <div class="cdb-gallery cdb-gallery--carousel">
                 <img class="cdb-gallery__image"> …
               </div>
   Images are direct children — no wrapper div. Both class
   aliases (__image / __img) are kept for backward compat.
   --------------------------------------------------------- */
.cdb-gallery {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Grid layout */
.cdb-gallery--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.875rem;
}

.cdb-gallery--grid .cdb-gallery__image,
.cdb-gallery--grid .cdb-gallery__img {
  width: 100%;
  height: 12rem;       /* matches editor's h-48 (192 px) */
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

/* Carousel layout */
.cdb-gallery--carousel {
  display: flex;
  overflow-x: auto;
  gap: 0.875rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar across browsers */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge */
}

.cdb-gallery--carousel::-webkit-scrollbar {
  display: none;               /* Chrome / Safari */
}

.cdb-gallery--carousel .cdb-gallery__image,
.cdb-gallery--carousel .cdb-gallery__img {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 80%;
  max-width: 36rem;
  height: 24rem;       /* matches editor's h-96 (384 px) */
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}

/* Base image styles (applied in both modes via the rules above;
   kept here as a safe fallback for non-layout-modified markup) */
.cdb-gallery__image,
.cdb-gallery__img {
  border-radius: 0.5rem;
  display: block;
}

.cdb-gallery__caption {
  font-size: 0.8125rem;
  color: #a1a1aa;
  text-align: center;
  margin-top: 0.375rem;
  font-style: italic;
}


/* ---------------------------------------------------------
   11. VIDEO EMBED
   The 56.25% padding-bottom gives a 16:9 aspect ratio.
   Sizes: regular (42rem) | wide (56rem) | full (100%)

   HTML structure (new format — iframe preserved by backend):
     <figure class="cdb-video cdb-video--{size}"
             data-url="…" data-platform="youtube">
       <div class="cdb-video__wrapper">
         <iframe class="cdb-video__iframe" src="…embed-url…" …></iframe>
       </div>
       <figcaption class="cdb-video__caption">…</figcaption>
     </figure>

   Legacy format (pre-iframe-support) — still parsed by the extension:
     <figure class="cdb-video cdb-video--{size}" data-url="…">
       <a class="cdb-video__source" href="…"></a>  ← hidden, URL fallback
       <div class="cdb-video__wrapper">…</div>
     </figure>
   --------------------------------------------------------- */
.cdb-video {
  display: block;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cdb-video--regular {
  max-width: 42rem;   /* ~672px — inline with prose text column */
  margin-left: auto;
  margin-right: auto;
}

.cdb-video--wide {
  max-width: 56rem;   /* ~896px — slightly wider than text */
  margin-left: auto;
  margin-right: auto;
}

.cdb-video--full {
  width: 100%;
  max-width: none;
}

/* Error state: rendered when the stored embed URL could not be resolved */
.cdb-video--error {
  padding: 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  color: #991b1b;
  font-size: 0.875rem;
}

/* Legacy hidden anchor — URL-preservation fallback for old saved content.
   Keep display:none so it is never visible in any rendering context. */
.cdb-video__source {
  display: none !important;
}

.cdb-video__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #f4f4f5;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.cdb-video__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.cdb-video__caption {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  text-align: center;
  color: #52525b;
  font-style: italic;
  line-height: 1.5;
}


/* ---------------------------------------------------------
   12. CALLOUT BLOCKS
   Structure (flex row) is here since nocode-frontend has no
   "core CSS" file equivalent. Visual values come from the
   CSS custom properties so themes can override them.
   --------------------------------------------------------- */
.cdb-callout {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: 1.75rem;
}

.cdb-callout__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.cdb-callout__body {
  flex: 1;
  min-width: 0;
}

.cdb-callout__body .cdb-p,
.cdb-callout__body .cdb-paragraph {
  margin-bottom: 0;
}

.cdb-callout--info {
  background-color: var(--cdb-callout-info-bg, #eff6ff);
  border-left: 4px solid var(--cdb-callout-info-border, #3b82f6);
}

.cdb-callout--warning {
  background-color: var(--cdb-callout-warning-bg, #fffbeb);
  border-left: 4px solid var(--cdb-callout-warning-border, #f59e0b);
}

.cdb-callout--success {
  background-color: var(--cdb-callout-success-bg, #f0fdf4);
  border-left: 4px solid var(--cdb-callout-success-border, #22c55e);
}

.cdb-callout--error {
  background-color: var(--cdb-callout-error-bg, #fef2f2);
  border-left: 4px solid var(--cdb-callout-error-border, #ef4444);
}

.cdb-callout--note {
  background-color: var(--cdb-callout-note-bg, #f9fafb);
  border-left: 4px solid var(--cdb-callout-note-border, #6b7280);
}

.cdb-callout--tip {
  background-color: var(--cdb-callout-tip-bg, #faf5ff);
  border-left: 4px solid var(--cdb-callout-tip-border, #a855f7);
}


/* ---------------------------------------------------------
   13. BOOKMARK CARD
   The element is an <a> tag. reset.css resets its colour and
   text-decoration, so we restore those explicitly here.
   --------------------------------------------------------- */
.cdb-bookmark {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.5rem;
  background-color: #fff;
  text-decoration: none;
  color: inherit;
  margin-top: 0.25rem;
  margin-bottom: 1.75rem;
  transition: box-shadow 0.15s ease;
  box-sizing: border-box;
}

.cdb-bookmark:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-color: #d4d4d8;
}

.cdb-bookmark__image {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border-radius: 0.375rem;
  flex-shrink: 0;
}

.cdb-bookmark__body {
  flex: 1;
  min-width: 0;
}

.cdb-bookmark__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #18181b;
  margin-bottom: 0.375rem;
  line-height: 1.4;
}

.cdb-bookmark__description {
  font-size: 0.875rem;
  color: #52525b;
  margin-bottom: 0.625rem;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cdb-bookmark__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cdb-bookmark__favicon {
  width: 1rem;
  height: 1rem;
  display: block;
}

.cdb-bookmark__domain {
  font-size: 0.8125rem;
  color: #a1a1aa;
}


/* ---------------------------------------------------------
   14. TABLE OF CONTENTS
   Indentation per heading level is handled here.
   --------------------------------------------------------- */
.cdb-toc {
  background-color: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.cdb-toc__title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.75rem;
}

.cdb-toc__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.cdb-toc__item {
  margin-bottom: 0.375rem;
}

.cdb-toc__item--h2 { padding-left: 0; }
.cdb-toc__item--h3 { padding-left: 1rem; }
.cdb-toc__item--h4 { padding-left: 2rem; }
.cdb-toc__item--h5 { padding-left: 3rem; }
.cdb-toc__item--h6 { padding-left: 4rem; }

.cdb-toc__link {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cdb-link-color, #4f46e5);
  text-decoration: none;
}

.cdb-toc__link:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   15. COLUMNS
   Grid structure lives here; responsive collapse at ≤768px.
   --------------------------------------------------------- */
.cdb-columns {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cdb-columns--2      { grid-template-columns: 1fr 1fr; }
.cdb-columns--3      { grid-template-columns: 1fr 1fr 1fr; }
.cdb-columns--wide-left  { grid-template-columns: 2fr 1fr; }
.cdb-columns--wide-right { grid-template-columns: 1fr 2fr; }

.cdb-column {
  min-width: 0;
}

@media (max-width: 768px) {
  .cdb-columns--2,
  .cdb-columns--3,
  .cdb-columns--wide-left,
  .cdb-columns--wide-right {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------
   16. BUTTON / CTA
   --------------------------------------------------------- */
.cdb-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cdb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 0.375rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.cdb-button--small  { padding: 0.375rem 0.875rem; font-size: 0.875rem; }
.cdb-button--medium { padding: 0.5rem  1.125rem;  font-size: 1rem;     }
.cdb-button--large  { padding: 0.625rem 1.5rem;   font-size: 1.0625rem; }

.cdb-button--primary              { background-color: #18181b; color: #fff;    border-color: #18181b; }
.cdb-button--primary:hover        { background-color: #27272a;                 border-color: #27272a; }

.cdb-button--secondary            { background-color: #f4f4f5; color: #18181b; border-color: #f4f4f5; }
.cdb-button--secondary:hover      { background-color: #e4e4e7;                 border-color: #e4e4e7; }

.cdb-button--outline              { background-color: transparent; color: #18181b; border-color: #18181b; }
.cdb-button--outline:hover        { background-color: #18181b;     color: #fff; }


/* ---------------------------------------------------------
   17. EMBEDS
   The EmbedBlock extension now stores a real <iframe> inside
   the wrapper (same as VideoEmbed). The wrapper uses the same
   16:9 padding-bottom trick so social / code / form embeds
   render at a consistent aspect ratio out of the box.

   HTML structure:
     <div class="cdb-embed cdb-embed--{platform}"
          data-url="…" data-platform="twitter">
       <div class="cdb-embed__wrapper">
         <iframe class="cdb-embed__iframe" src="…embed-url…" …></iframe>
       </div>
     </div>
   --------------------------------------------------------- */
.cdb-embed {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cdb-embed__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #f4f4f5;
  padding-bottom: 56.25%; /* 16:9 — overridable per platform below */
}

.cdb-embed__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Platform-specific aspect ratio overrides.
   Forms / docs tend to need more vertical space. */
.cdb-embed--airtable .cdb-embed__wrapper,
.cdb-embed--tally    .cdb-embed__wrapper,
.cdb-embed--typeform .cdb-embed__wrapper {
  padding-bottom: 75%; /* 4:3 — taller for forms */
}

.cdb-embed--googledocs .cdb-embed__wrapper,
.cdb-embed--office365  .cdb-embed__wrapper,
.cdb-embed--slideshare .cdb-embed__wrapper,
.cdb-embed--pitch      .cdb-embed__wrapper {
  padding-bottom: 62.5%; /* slightly taller for slide decks */
}


/* ---------------------------------------------------------
   18. HTML / MARKDOWN BLOCKS
   --------------------------------------------------------- */
.cdb-html-block,
.cdb-md-block {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cdb-md-block__preview {
  padding: 1.25rem 1.5rem;
}


/* ---------------------------------------------------------
   19. INLINE MARKS
   Scoped to .cdb-content to avoid leaking into non-blog
   elements on the same page.
   .cdb-text-bold / .cdb-text-italic / .cdb-link: backward-
   compat classes found in older placeholder data.
   --------------------------------------------------------- */
.cdb-content strong,
.cdb-text-bold {
  font-weight: 700;
}

.cdb-content em,
.cdb-text-italic {
  font-style: italic;
}

.cdb-content u {
  text-decoration: underline;
}

.cdb-content s {
  text-decoration: line-through;
}

/* reset.css sets a { color: inherit; text-decoration: none }
   — class selector wins on specificity, restoring link style. */
.cdb-content a,
.cdb-link {
  color: var(--cdb-link-color, #4f46e5);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cdb-content a:hover,
.cdb-link:hover {
  color: var(--cdb-link-hover-color, #4338ca);
}


/* =============================================================================
   BUILDER CANVAS — CONFLICT RESOLUTION (do not remove)

   The builder injects canvas text fixes (see src/host/Builder/canvasTextFix.css
   and CANVAS_TEXT_FIX in src/common/_redux/_constants/builder.constants.js).
   Rules like:

     :not(.content-editor) h1 … h6, p { line-height: inherit; margin: 0.1rem 0; }

   have higher specificity than a lone .cdb-h3 / .cdb-p, so blog typography in
   the canvas looked wrong (tiny margins, inherited line-height). The iframe
   preview was unaffected because this is builder-only.

   Blog post HTML is wrapped in .cd-blog-editor-post-content-wrapper. Scoping
   the same spacing/line-height here as .cd-blog-editor-post-content-wrapper
   .cdb-* raises specificity above the canvas fix so theme values win.

   Only the properties that the canvas overrides are repeated below — keep in
   sync with sections 2–3 when those sections change.
   ============================================================================= */

.cd-blog-editor-post-content-wrapper .cdb-h1 {
  line-height: 1.2;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}

.cd-blog-editor-post-content-wrapper .cdb-h2 {
  line-height: 1.25;
  margin-top: 2.75rem;
  margin-bottom: 0.625rem;
}

.cd-blog-editor-post-content-wrapper .cdb-h3 {
  line-height: 1.3;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
}

.cd-blog-editor-post-content-wrapper .cdb-h4 {
  line-height: 1.4;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.cd-blog-editor-post-content-wrapper .cdb-h5 {
  line-height: 1.45;
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
}

.cd-blog-editor-post-content-wrapper .cdb-h6 {
  line-height: 1.5;
  margin-top: 1.25rem;
  margin-bottom: 0.375rem;
}

.cd-blog-editor-post-content-wrapper .cdb-p,
.cd-blog-editor-post-content-wrapper .cdb-paragraph {
  line-height: 1.8;
  /* Canvas uses margin shorthand; set full vertical margin so top isn’t stuck at 0.1rem */
  margin-top: 0;
  margin-bottom: 1.375rem;
  white-space: normal;
}

/* Image size modifiers — repeated with higher specificity so the canvas reset
   (which can override max-width/margin on block elements) doesn't win. */
.cd-blog-editor-post-content-wrapper .cdb-image {
  display: block;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cd-blog-editor-post-content-wrapper .cdb-image--regular {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.cd-blog-editor-post-content-wrapper .cdb-image--wide {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.cd-blog-editor-post-content-wrapper .cdb-image--full {
  width: 100%;
  max-width: none;
}

/* Video size modifiers — higher specificity for canvas context. */
.cd-blog-editor-post-content-wrapper .cdb-video {
  display: block;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cd-blog-editor-post-content-wrapper .cdb-video--regular {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.cd-blog-editor-post-content-wrapper .cdb-video--wide {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.cd-blog-editor-post-content-wrapper .cdb-video--full {
  width: 100%;
  max-width: none;
}

.cd-blog-editor-post-content-wrapper .cdb-video--error {
  padding: 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  color: #991b1b;
  font-size: 0.875rem;
}

/* Embed block modifiers — same canvas-specificity pattern. */
.cd-blog-editor-post-content-wrapper .cdb-embed {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.cd-blog-editor-post-content-wrapper .cdb-embed__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #f4f4f5;
  padding-bottom: 56.25%;
}

.cd-blog-editor-post-content-wrapper .cdb-embed__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.cd-blog-editor-post-content-wrapper .cdb-embed--airtable .cdb-embed__wrapper,
.cd-blog-editor-post-content-wrapper .cdb-embed--tally    .cdb-embed__wrapper,
.cd-blog-editor-post-content-wrapper .cdb-embed--typeform .cdb-embed__wrapper {
  padding-bottom: 75%;
}

.cd-blog-editor-post-content-wrapper .cdb-embed--googledocs .cdb-embed__wrapper,
.cd-blog-editor-post-content-wrapper .cdb-embed--office365  .cdb-embed__wrapper,
.cd-blog-editor-post-content-wrapper .cdb-embed--slideshare .cdb-embed__wrapper,
.cd-blog-editor-post-content-wrapper .cdb-embed--pitch      .cdb-embed__wrapper {
  padding-bottom: 62.5%;
}