/*****************************************************************************************************
* Editing Module: Block CSS
*
* Used for the frontend and the block editor. The block rules are scoped to
* ':is(#editor, .editor-styles-wrapper, .bub-editor-content)', which matches the entry
* content on the frontend ('bub-editor-content', see editing-setup.php) and the editor
* canvas, with or without iframe. '#editor' is the editor root outside an iframe and
* keeps the ID-level specificity these rules had before, since ':is()' takes the
* specificity of its most specific selector.
******************************************************************************************************/

/*
Core Blocks: Common
---------------------------------------------------------------------------------------------------- */

/* Core Blocks: Colors
--------------------------------------------- */

/* General Color Styles */

mark[style*="background-color"]:not([style*="background-color:rgba(0, 0, 0, 0)"]) {
  font-size: 0.95em;
  padding: 0.1em 0.2em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* bub Default Colors */

.has-black-background-color {
  background-color: #151515;
}
.has-black-color {
  color: #151515;
}

.has-grey-dark-background-color {
  background-color: #777;
}
.has-grey-dark-color {
  color: #777;
}

.has-grey-middle-background-color {
  background-color: #aaa;
}
.has-grey-middle-color {
  color: #aaa;
}

.has-grey-light-background-color {
  background-color: #eee;
}
.has-grey-light-color {
  color: #eee;
}

.has-white-background-color {
  background-color: #fff;
}
.has-white-color {
  color: #fff;
}


/* Core Blocks: Font Sizes
--------------------------------------------- */

/* Note: The same values as the presets in 'editing-config.php', which WordPress
   outputs as preset classes of their own. */

.has-bub-small-font-size {
  font-size: 0.85em;
}

.has-bub-medium-font-size {
  font-size: 1em;
}

.has-bub-large-font-size {
  font-size: 1.25em;
}

.has-bub-xlarge-font-size {
  font-size: 1.5em;
}


/*
Core Blocks: Specific
---------------------------------------------------------------------------------------------------- */

/* Audio
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-audio {
  background: #ddd;
  padding: 7px;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-audio audio {
  display: block;
}


/* Blockquote
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-quote {
  border-left: 0.25em solid;
  margin: 1.75em 0 1.75em;
  padding: 0 0 0 1em;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-quote.has-text-align-right {
  border-left: none;
  border-right: 0.25em solid;
  padding: 0 1em 0 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-quote.has-text-align-center {
  border: none;
  padding: 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-quote.is-style-plain {
  border: none;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-quote.is-style-large p {
  font-size: 1.2em;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-quote cite {
  font-size: 0.8em;
  font-style: normal;
}


/* Button
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-buttons {
  margin: 1.3em 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-button {
  font-size: 0.9em;
}

/* Square, in spaced capitals: solid in ink, the outline style with a thin line.
   The editor does not load setup.css, so the colors carry its values as
   fallbacks. */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-button__link {
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 15px 22px;
  text-decoration: none;
  text-transform: uppercase;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content)
  .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
  background: var(--theme2-background-def, #1b1a18);
  color: var(--theme2-color-def, #fff);
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content)
  .wp-block-button.is-style-outline .wp-block-button__link {
  background: none;
  border: 1px solid currentColor;
  color: var(--body-color-def, #1b1a18);
  padding: 14px 21px;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-button__link:hover {
  opacity: 0.85;
}

/* Keep the white text of filled buttons against the link hover color in 'text.css'.
   Outline buttons and buttons with a text color keep their own color. */

:is(#editor, .editor-styles-wrapper, .bub-editor-content)
  .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color):hover {
  color: #fff;
}


/* Details
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-details {
  margin-bottom: 0.75em;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-details summary {
  display: list-item;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-details summary br {
  display: none;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-details p {
  margin: 0.7em 0 0;
}


/* File
--------------------------------------------- */

/* The link and the button in a row that wraps without an indent. */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-file {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 1em;
  gap: 10px 0.9em;
  margin: 1.3em 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content)
  .wp-block-file a[id^="wp-block-file--media"] {
  font-size: 1em;
}

/* The button as the solid buttons of the theme, square, in spaced capitals. The
   editor does not load setup.css, so the colors carry its values as fallbacks. */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-file__button {
  background: var(--theme2-background-def, #1b1a18);
  border-radius: 0;
  color: var(--theme2-color-def, #fff);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-left: 0;
  padding: 12px 18px;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content)
  .wp-block-file__button:not(.has-text-color):hover {
  color: #fff;
  opacity: 0.85;
}

/* HTML
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-html textarea {
  display: block;
}


/* Image
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-image figcaption {
  font-size: 0.9em;
  margin-top: 0.2em;
}


/* Preformatted (Code, Verse)
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content)
  :is(.wp-block-preformatted, .wp-block-code, .wp-block-verse) {
  font-family: monospace, serif;
}


/* Pullquote
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-pullquote {
  margin: 1.3em 0;
  padding: 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-pullquote blockquote {
  margin: 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-pullquote p {
  margin: 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-pullquote cite {
  display: block;
  font-size: 0.75em;
}


/* Separator
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-separator {
  background-color: #ccc;
  border: none;
  height: 1px;
  margin: 1em 0 0.85em;
}


/* Video
--------------------------------------------- */

:is(#editor, .editor-styles-wrapper, .bub-editor-content)
  .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  line-height: 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-embed.is-type-video iframe {
  margin: 0;
}

:is(#editor, .editor-styles-wrapper, .bub-editor-content) .wp-block-embed.is-type-video figcaption {
  font-size: 0.9em;
  margin: 0.2em 0 0; 
}