/**
 * CSS for customizing Gutenberg and the TinyMCE editor
 *
 * This css is only loaded in for the editor in the WordPress admin.
 *
 * Use /css/aux-gutenberg-ui-style.css for customizing how blocks render in Gutenberg.
 * Use /css/aux-wp-admin-style.css for customizing other places in the WordPress admin.
 *
 * Enqueued after https://aux.tamu.edu/{AUX version number}/styles/aux-styles.css
 * Enqueue function: add_editor_style
 * Enqueue file: functions.php
 *
 * In Gutenberg, add_editor_style() copies the styles from the specified stylesheets
 * into .editor-styles-wrapper. These will be inlined before values defined in theme.json.
 * As of March 2025, the WP documentation on this is thin. Better docs at: https://gutenberg.10up.com/reference/Themes/styles/
 *
 * @since 1.0.0
 */

 /* Wrapper for the post title H1 in the Gutenberg editor. Fixing alignment. */
.editor-visual-editor__post-title-wrapper {
  padding-left: 1rem;

  @media screen and (max-width: 1485px) {
    padding-left: 2rem;
  }
}

.pp-current-item-exceptions div.pp-exc-wrap {
  max-height: 100%;
}

.aux-block-label-wrapper {
  position: sticky;
  top: 0;
}

.aux-block-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  position: absolute;
  left: -1.5rem;
  font-size: .875rem;
  line-height: 1rem;
  padding: .75rem .25rem;
  background-color: #444;
  color: white;
  text-transform: none;
  white-space: nowrap;
}

[id^='acf-aux_'].postbox {
  background-color: rgba(210, 210, 210, 0.125);

  .postbox-header {
    &::before {
      content: '';
      height: 2.5rem;
      width: 5rem;
      background-image: url('https://aggieux.tamu.edu/images/aux-storybook-logo.png');
      background-position: center center;
      background-repeat: none;
      background-size: contain;
      display: inline-block;
      position: absolute;
      left: 1rem;
    }

    .hndle {
      padding-left: 6.5rem !important;
    }
  }
}

/*
  Hacky css to hide things we don't want users to see in Gutenberg.
  Tried half a day's worth of PHP and JS solutions before resorting to this.
  Sadly, I don't see a way to target the rich text tool bar options for a specific type of block.
  - Jeremy
*/
/*
  Hide the align text option
*/
.components-toolbar-group:has(button[aria-label="Align text"]) {
  button[aria-label="Align text"] {
    display: none;
  }
}

/*
  Hide the whole toolbar group for paragraph alignment options
  Hide the whole group for paragraphs, since - only on paragraphs - this will be
  an empty group when the alignment button is hidden
*/
.block-editor-block-contextual-toolbar:has(.components-dropdown button[aria-label="Paragraph"]) {
  .components-toolbar-group:has(button[aria-label="Align text"]) {
    display: none;
  }
}

/* For the heading toolbar, hide the "Bold" button */
.block-editor-block-contextual-toolbar:has(.components-dropdown button[aria-label="Heading"]) {
  .components-toolbar-group {
    button[aria-label='Bold'] {
      display: none !important;
    }
  }
}

/* Add a notice to headings that contain bolded text */
.wp-block-heading.rich-text {
  &:has(strong) {
    strong {
      font-weight: normal;
      position: relative;

      &:before,
      &:after {
        position: absolute;
        content: ' ';
        top: 0;
        right: 0;
        left: 0;
      }

      &:after {
        background-color: darkgray;
        height: 2px;
      }

      &:before {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-width: 0px 2px 0 2px;
        border-style: solid;
        border-color: darkgray;
        height: 5px;
        z-index: 2003;
      }
    }

    &.is-selected {
      strong {
        background-color: lightgray;

        &:after {
          background-color: maroon;
        }

        &:before {
          border-color: maroon;
        }
      }
    }

    &:after {
      font-family: "Open Sans", Arial, sans-serif;
      margin-top: .5rem;
      display: block;
      font-size: .875rem;
      color: #667085;
      content: 'Notice: Headings are already styled. The bold (<strong>) tags indicated in the heading above will be ignored.';
      font-weight: normal;
    }
  }
}

.editor-visual-editor {
  background-color: #fff;
}

.is-root-container.is-desktop-preview.wp-block-post-content {
  padding-left: 2rem;
}

/*
  Set max width on Gutenberg editor to mimic the max width on AUX components
  Selectors for H1, native WP blocks, AUX blocks
*/
.editor-visual-editor__post-title-wrapper,
.editor-styles-wrapper .wp-block,
html :where(div[class*='wp-block-aux']) {
  max-width: var(--aux-breakpoint-xl);
  min-width: 350px;
}

.editor-visual-editor__post-title-wrapper,
.block-editor-block-list__layout.is-root-container> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.75rem;
}
