/* ==========================================================================
   Content Blocks - Main Stylesheet

   The individual block styles (blocks/*.css) are loaded separately, each
   with its own cache-busting query string - see _init.php. They used to be
   pulled in here via @import, but an @import'd URL has no query string of
   its own, so with .htaccess caching CSS for a year, edits to a block file
   were invisible until a hard-refresh. Load this file last so these
   container rules still win the cascade over the individual block styles.
   ========================================================================== */

/* ==========================================================================
   Content Blocks Container
   ========================================================================== */

.content-blocks {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Contain floated content (e.g. align_left/align_right images from CKEditor
   body fields) within this block so it never bleeds into the next block. */
.content-blocks::before,
.content-blocks::after {
  content: '';
  display: table;
}

.content-blocks::after {
  clear: both;
}

.basic-page__content + .content-blocks,
.basic-page__children + .content-blocks {
  margin-top: 0;
}

/* Blocks with background use padding, not margin, so they can sit adjacent */
.content-blocks--has-background {
  margin-top: 0;
  margin-bottom: 0;
}

/* Text block followed by buttons block - reduce spacing */
.content-blocks--text-content + .content-blocks--buttons {
  margin-top: 1.5rem;
}

.content-blocks--text-content:has(+ .content-blocks--buttons) {
  margin-bottom: 1.5rem;
}

.content-blocks--has-border {
  border-bottom: 1px solid var(--color-gray-300);
}

/* Basic page context - narrower content area */
#content-container .content-blocks {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#content-container .content-blocks:first-child {
  margin-top: 0;
}

#content-container .content-blocks:last-child {
  margin-bottom: 0;
}

/* Override legacy .text-content line-height from app.css */
.text-content p,
.text-content li {
  line-height: var(--line-height-base);
}

/* The block/container wrapping a .text-content area already provides the
   gap to whatever comes next (via margin or padding) - a trailing margin
   on its last element (heading, paragraph, list...) would just stack a
   second, redundant gap on top of that. Applies regardless of element
   type, unlike the narrower p:last-child fix this replaces. */
.text-content > :last-child {
  margin-bottom: 0;
}