/* Editor.js Block Layout Styles */

/* Header Styles - Fix for heading font appearance */
.ce-header,
.cdx-header {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.25;
  margin: 1.5rem 0 1rem 0;
  color: inherit;
}

.ce-header h1,
.cdx-header h1 {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.ce-header h2,
.cdx-header h2 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.ce-header h3,
.cdx-header h3 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.ce-header h4,
.cdx-header h4 {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.ce-header h5,
.cdx-header h5 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.ce-header h6,
.cdx-header h6 {
  font-size: 1rem; /* text-base */
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

/* Dark mode support for headers */
.dark .ce-header,
.dark .cdx-header {
  color: #f3f4f6; /* text-gray-100 */
}

/* Header placeholder styling */
.ce-header .ce-header__placeholder,
.cdx-header .cdx-header__placeholder {
  color: #9ca3af; /* text-gray-400 */
  font-weight: 400;
}

.dark .ce-header .ce-header__placeholder,
.dark .cdx-header .cdx-header__placeholder {
  color: #6b7280; /* text-gray-500 */
}

/* Image Layouts */
.ce-block.image-full-width {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
}

.ce-block.image-full-width .cdx-block {
  max-width: none;
}

.ce-block.image-left {
  float: left;
  width: 50%;
  margin-right: 1rem;
  margin-bottom: 1rem;
  clear: left;
}

.ce-block.image-right {
  float: right;
  width: 50%;
  margin-left: 1rem;
  margin-bottom: 1rem;
  clear: right;
}

/* YouTube Layouts */
.ce-block.youtube-full-width {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
}

.ce-block.youtube-full-width .cdx-block {
  max-width: none;
}

.ce-block.youtube-left {
  float: left;
  width: 50%;
  margin-right: 1rem;
  margin-bottom: 1rem;
  clear: left;
}

.ce-block.youtube-right {
  float: right;
  width: 50%;
  margin-left: 1rem;
  margin-bottom: 1rem;
  clear: right;
}

/* Clear floats after floating blocks */
.ce-block.image-left + .ce-block:not(.image-left):not(.image-right),
.ce-block.image-right + .ce-block:not(.image-left):not(.image-right),
.ce-block.youtube-left + .ce-block:not(.youtube-left):not(.youtube-right),
.ce-block.youtube-right + .ce-block:not(.youtube-left):not(.youtube-right) {
  clear: both;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ce-block.image-left,
  .ce-block.image-right,
  .ce-block.youtube-left,
  .ce-block.youtube-right {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
  .ce-block.image-full-width,
  .ce-block.youtube-full-width {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

/* Editor container adjustments */
.codex-editor {
  position: relative;
  overflow: visible;
  z-index: 0;
  /* baseline content padding used by Editor.js content area */
  --editor-content-padding: 16px;
}

.codex-editor .ce-block {
  position: relative;
}

/* Define inner padding for normal blocks so stretched can negate it */
.codex-editor .ce-block__content {
  padding-left: var(--editor-content-padding);
  padding-right: var(--editor-content-padding);
}

/* Allow redactor to be overflowed by stretched content */
.codex-editor .codex-editor__redactor {
  overflow-x: visible !important;
  margin-right: 0 !important; /* Remove right margin permanently */
}

/* NEW STRETCH LOGIC (replaces the 100vw approach) */

/* 1. Make the stretched block wider by applying negative horizontal margins.
      This cancels out the padding of the redactor container. */
.codex-editor .ce-block--stretched,
.codex-editor .cdx-block--stretched,
.codex-editor .ce-youtube-tool--stretched {
    margin-left: calc(-1 * var(--editor-redactor-horizontal-padding));
    margin-right: calc(-1 * var(--editor-redactor-horizontal-padding));
    width: auto; /* Let the browser calculate width based on margins */
}

/* 2. For standard blocks, also remove the inner padding from their content wrapper. */
.codex-editor .ce-block--stretched .ce-block__content {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* 3. For ImageTool, the image itself might be what needs to fill the space.
      The negative margin on the parent (.cdx-block--stretched) should be enough
      if the image inside has `width: 100%`. */
.codex-editor .cdx-block--stretched .image-tool__image-picture,
.codex-editor .ce-youtube-tool--stretched iframe {
    width: 100%;
}

/* Ensure toolbars and dropdowns are visible above inputs */
.codex-editor .ce-toolbar, 
.codex-editor .ce-popover, 
.codex-editor .ce-settings, 
.codex-editor .ce-inline-toolbar {
  z-index: 50;
}

/* Text wrapping around floating blocks */
.ce-block.image-left ~ .ce-block .ce-paragraph,
.ce-block.image-right ~ .ce-block .ce-paragraph,
.ce-block.youtube-left ~ .ce-block .ce-paragraph,
.ce-block.youtube-right ~ .ce-block .ce-paragraph {
  text-align: justify;
  line-height: 1.6;
}