/*
 * Styles the plugin's own blocks need in order to look like themselves even if
 * the theme is swapped. Anything the theme should own — colour, type, spacing
 * of the page — is deliberately not here: these are the rules without which the
 * block is broken rather than merely plain.
 */

/* The glossary list is a definition list, and a definition list in a
   right-to-left page needs its indentation on the correct side. */
.tz-glossary,
.tz-glossary dd { margin-inline-start: 0; }

/* A term's English equivalent sits beside Arabic text, so it has to be isolated
   or the bidi algorithm drags surrounding punctuation into the wrong run. */
.tz-term-en { unicode-bidi: isolate; }

/* Link hosts and citation years are the same problem in miniature. */
.tz-link-host,
.tz-out { unicode-bidi: isolate; }

/* Search results and cards receive arbitrary editor content; nothing in them
   should be able to push past the column it was given. */
.tz-glossary dd,
.tz-source-item,
.result { overflow-wrap: anywhere; }

/* The tab panels are real pages, so the one being shown is simply the one the
   server rendered. No display toggling — there is nothing hidden to toggle. */
.tz-panel { min-height: 4rem; }

/* Forms inside a block theme inherit nothing useful by default. */
.tz-forms form { margin: 0; }
.tz-field select { appearance: none; -webkit-appearance: none; }
.tz-field select {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  background-position: right 18px center, right 13px center;
  padding-inline-end: 38px;
}
html[dir="rtl"] .tz-field select {
  background-position: left 13px center, left 18px center;
  padding-inline-end: 16px;
  padding-inline-start: 38px;
}

/* A featured image that was never uploaded. The card keeps its shape rather
   than collapsing and leaving a ragged grid. */
.wp-block-post-featured-image.is-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(42,169,166,.16), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(201,174,122,.18), transparent 60%),
    #EDF1F0;
}