/**
 * Gutenberg Editor Helpers
 * - Editor-only visual aids for working with nested blocks and wrappers.
 * - Scoped to the block editor canvas via .editor-styles-wrapper.
 *
 * Conventions:
 * - Keep selectors stable and minimal to avoid fighting core editor styles.
 * - Prefer hover/selected states over always-on heavy chrome.
 */

.wp-admin {
  .editor-styles-wrapper {
    /* ---------------------------
     * Global block affordances
     * --------------------------- */

    .wp-block {
      transition: outline-color 120ms ease, box-shadow 120ms ease;

      /* Optional vertical rhythm in the editor */
      margin-top: 14px;
      margin-bottom: 14px;
    }

    /* Avoid awkward horizontal gaps for full-width blocks */
    .wp-block.alignfull {
      margin-left: 0;
      margin-right: 0;
    }

    /* Hover outline */
    .wp-block:hover {
      outline: 1px dashed rgba(0, 0, 0, 0.22);
      outline-offset: 3px;
    }

    /* Selected + parent-of-selected (super useful for nested InnerBlocks) */
    .wp-block.is-selected,
    .wp-block.has-child-selected {
      outline: 2px solid rgba(0, 124, 186, 0.6);
      outline-offset: 3px;
      box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.15);
    }

    /* Nested blocks: slightly smaller offset so outlines don't get too chunky */
    .wp-block .wp-block:hover,
    .wp-block .wp-block.is-selected,
    .wp-block .wp-block.has-child-selected {
      outline-offset: 2px;
    }

    /* Make keyboard focus visible (helps when tabbing through blocks/controls) */
    :focus-visible {
      outline: 2px solid rgba(0, 124, 186, 0.75);
      outline-offset: 2px;
    }

    /* ---------------------------
     * ACF blocks (optional extra hint)
     * --------------------------- */

    .wp-block[data-type^="acf/"] {
      position: relative;
    }

    .wp-block[data-type^="acf/"].is-selected,
    .wp-block[data-type^="acf/"].has-child-selected {
      box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.25);
    }

    /* ---------------------------
     * Content Container (wrapper) editor UI
     * (uses BEM-style elements/modifier)
     * --------------------------- */

    .content-container--editor {
      position: relative;
    }

    .content-container--editor::before {
      content: "Content Container";
      position: absolute;
      top: -10px;
      left: 10px;
      z-index: 2;

      font-size: 12px;
      line-height: 1;
      padding: 2px 8px;

      border-radius: 999px;
      background: rgba(0, 0, 0, 0.06);
      color: rgba(0, 0, 0, 0.65);

      pointer-events: none;
    }

    .content-container--editor .content-container__editor-inner {
      position: relative;
      min-height: 120px;
      padding: 20px;

      border: 2px dashed rgba(0, 0, 0, 0.25);
      background: rgba(0, 0, 0, 0.03);
      border-radius: 8px;
    }

    .content-container--editor .content-container__placeholder {
      position: absolute;
      inset: 12px;
      z-index: 1;

      display: block;
      padding: 12px 14px;
      border-radius: 6px;

      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(0, 0, 0, 0.12);
      color: rgba(0, 0, 0, 0.65);

      pointer-events: none;
      font-size: 13px;
      line-height: 1.35;
    }

    /* Hide placeholder once any inner blocks exist (best-effort + modern :has enhancement) */
    .content-container--editor:has(.block-editor-inner-blocks .block-editor-block-list__layout:not(:empty)) {
      .content-container__placeholder {
        display: none;
      }
    }
  }
}