/* Common Block Styles */
.pronto-block {
  position: relative;
}

/* Alignment Styles */
.pronto-block.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.pronto-block.alignfull:not(.group-container .pronto-block) {
  max-width: 100%;
  width: 100%;
}

.pronto-block.alignleft {
  float: left;
  margin-right: 20px;
}

.pronto-block.alignright {
  float: right;
  margin-left: 20px;
}

.pronto-block.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/*
 * WYSIWYG "Style" dropdown option - see prontoblocks_wysiwyg_style_formats()
 * in prontoblocks.php. Applied directly to a <ul> from within any WYSIWYG
 * Content field's Style dropdown. Plain CSS multi-column flow (not grid),
 * since it lays out the existing <li> markers/stacking natively without
 * needing to restructure the list. Loaded via enqueue_block_assets, so this
 * also renders correctly inside the block editor's iframed canvas.
 */
ul.two-column-list {
  columns: 2;
  column-gap: var(--wp--preset--spacing--6, 2rem);
}

ul.two-column-list > li {
  break-inside: avoid;
}

@media (width < 600px) {
  ul.two-column-list {
    columns: 1;
  }
}

/*
 * WYSIWYG "Style" dropdown option ("2 Column Name List") - same two-column
 * flow as "2 Column List" above but keeps the plain bullets, for long
 * alphabetical lists of names (e.g. Webb Every Year). Fills the left column
 * first, so the list still reads in order top-to-bottom, left-to-right.
 */
ul.two-column-names {
  columns: 2;
  column-gap: var(--wp--preset--spacing--8, 3rem);
}

ul.two-column-names > li {
  break-inside: avoid;
}

@media (width < 600px) {
  ul.two-column-names {
    columns: 1;
  }
}

/*
 * WYSIWYG "Style" dropdown option ("Fine Print") - applied to a whole
 * paragraph. Uses opacity rather than a fixed color so it reads as "muted"
 * against whatever text color the surrounding block/theme context sets,
 * instead of fighting it (or clashing with a theme.json palette this
 * plugin doesn't otherwise reference here).
 */
p.fine-print {
  font-size: 0.8125em;
  opacity: 0.7;
}