/*
 * Content block styles: Wagtail equivalents of the WordPress block library
 * styles the old site relied on (columns, galleries, images, cover, etc.).
 */

/* Columns */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: 1.75em;
}
.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
}
.wp-block-column.is-vertically-aligned-top { align-self: flex-start; }
.wp-block-column.is-vertically-aligned-center { align-self: center; }
.wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; }
@media (max-width: 781px) {
  .wp-block-columns { flex-direction: column; }
  .wp-block-column { flex-basis: 100% !important; }
}

/* Headings coloured like the home page links */
.wp-block-heading.yellow, .wp-block-heading.yellow a, #content .entry-content .wp-block-heading.yellow a { color: var(--color-brand-yellow); }
.wp-block-heading.blue, .wp-block-heading.blue a, #content .entry-content .wp-block-heading.blue a { color: var(--color-brand-blue); }
.wp-block-heading.red, .wp-block-heading.red a, #content .entry-content .wp-block-heading.red a { color: var(--color-brand-red); }
.wp-block-heading.green, .wp-block-heading.green a, #content .entry-content .wp-block-heading.green a { color: var(--color-brand-green); }

/* Images */
.wp-block-image { margin: 0 0 1em; }
.wp-block-image img { height: auto; max-width: 100%; vertical-align: bottom; }
.wp-block-image.alignleft { float: left; margin: .5em 1em .5em 0; }
.wp-block-image.alignright { float: right; margin: .5em 0 .5em 1em; }
.wp-block-image.aligncenter { margin-left: auto; margin-right: auto; text-align: center; display: table; }
.wp-block-image.alignwide, .wp-block-image.alignfull { clear: both; }
.wp-block-image.alignfull img, .wp-block-image.alignwide img { width: 100%; }
.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption { margin: .5em 0 1em; font-size: 13px; text-align: center; color: var(--color-text-muted); }
.entry-content::after { content: ""; display: table; clear: both; }

/* Galleries */
.wp-block-gallery { margin: 0 0 1em; }
.wp-block-gallery .blocks-gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-gallery.columns-1 { --gallery-columns: 1; }
.wp-block-gallery.columns-2 { --gallery-columns: 2; }
.wp-block-gallery.columns-3 { --gallery-columns: 3; }
.wp-block-gallery.columns-4 { --gallery-columns: 4; }
.wp-block-gallery.columns-5 { --gallery-columns: 5; }
.wp-block-gallery.columns-6 { --gallery-columns: 6; }
.wp-block-gallery.columns-7 { --gallery-columns: 7; }
.wp-block-gallery.columns-8 { --gallery-columns: 8; }
@media (max-width: 600px) {
  .wp-block-gallery .blocks-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.blocks-gallery-item { margin: 0; position: relative; }
.blocks-gallery-item figure { margin: 0; height: 100%; }
.blocks-gallery-item img { display: block; width: 100%; height: auto; }
.wp-block-gallery.is-cropped .blocks-gallery-item img { height: 100%; object-fit: cover; aspect-ratio: 1; }
.blocks-gallery-item__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2em .5em .5em;
  color: var(--color-white);
  font-size: 13px;
  text-align: center;
  background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0));
}

/* Embeds and video */
.wp-block-embed { margin: 0 0 1em; }
.wp-block-embed__wrapper { position: relative; }
.wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.wp-has-aspect-ratio .wp-block-embed__wrapper iframe,
.wp-has-aspect-ratio .wp-block-embed__wrapper > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-has-aspect-ratio .wp-block-embed__wrapper > div > iframe { width: 100%; height: 100%; }
.wp-block-video { margin: 0 0 1em; }
.wp-block-video video { width: 100%; max-width: 100%; }

/* Quote */
.wp-block-quote cite { display: block; font-size: 14px; font-style: normal; margin-top: .5em; }

/* Buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1.5em; }
.wp-block-buttons.aligncenter { justify-content: center; }
.wp-block-buttons.alignright { justify-content: flex-end; }
.wp-block-button__link {
  display: inline-block;
  padding: .667em 1.333em;
  border-radius: 9999px;
  border: 0;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 1.125em;
  text-decoration: none;
}
.wp-block-button__link:hover, .wp-block-button__link:focus { background: var(--color-accent); color: var(--color-white); border: 0; }

/* Separator */
.wp-block-separator { border: 0; border-bottom: 2px solid currentColor; margin: 1.65em auto; opacity: .4; width: 100px; }
.wp-block-separator.is-style-wide { width: 100%; border-bottom-width: 1px; }
.wp-block-separator.is-style-dots { border: 0; text-align: center; line-height: 1; height: auto; opacity: 1; }
.wp-block-separator.is-style-dots::before { content: "···"; font-size: 1.5em; letter-spacing: 2em; padding-left: 2em; }

/* Cover */
.wp-block-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 0 1.5em;
  padding: 1em;
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}
.wp-block-cover__overlay { position: absolute; inset: 0; background: var(--color-black); }
.wp-block-cover__inner-container { position: relative; z-index: 1; width: 100%; max-width: 900px; }
.wp-block-cover__inner-container,
.wp-block-cover__inner-container a,
.wp-block-cover__inner-container h2,
.wp-block-cover__inner-container h3 { color: var(--color-white); }

/* Media & text */
.wp-block-media-text {
  display: grid;
  grid-template-columns: 50% 1fr;
  align-items: center;
  margin: 0 0 1.5em;
}
.wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.wp-block-media-text__media { margin: 0; }
.wp-block-media-text__media img { width: 100%; height: auto; vertical-align: middle; }
.wp-block-media-text__content { padding: 0 8%; }
@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100% !important; }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { order: 0; }
  .wp-block-media-text__content { padding: 1em 0; }
}

/* Latest posts */
.wp-block-latest-posts { list-style: none; margin: 0 0 1.5em; padding: 0; }
.wp-block-latest-posts li { overflow-wrap: break-word; margin-bottom: 1em; }
.wp-block-latest-posts.is-grid { display: flex; flex-wrap: wrap; gap: 1.25em; }
.wp-block-latest-posts.is-grid li { margin: 0; width: 100%; }
@media (min-width: 600px) {
  .wp-block-latest-posts.columns-2 li { width: calc(50% - .625em); }
  .wp-block-latest-posts.columns-3 li { width: calc(33.333% - .834em); }
}
.wp-block-latest-posts__post-date { display: block; color: var(--color-text-muted); font-size: 13px; }
.wp-block-latest-posts__post-excerpt { margin-top: .5em; }

/* Donorbox */
.donorbox-embed { margin: 0 0 1.5em; }
.donorbox-embed.aligncenter { text-align: center; }
.donorbox-embed iframe { display: inline-block; }

/* Mailchimp signup (replaces Mailchimp's "classic" embed CSS) */
.mailchimp-signup { max-width: 600px; margin-bottom: 1.5em; }
.mailchimp-signup h2 { font-size: 1.6em; margin: 0 0 .5em; }
.mailchimp-signup .indicates-required { text-align: right; font-size: 11px; margin-bottom: .5em; }
.mailchimp-signup .asterisk { color: #e85c41; }
.mailchimp-signup .mc-field-group { margin-bottom: .75em; }
.mailchimp-signup label { display: block; font-size: 14px; }
.mailchimp-signup input[type=text],
.mailchimp-signup input[type=email] {
  display: block;
  width: 100%;
  padding: 8px 0;
  text-indent: 2%;
  border: 1px solid #abb0b2;
  border-radius: 3px;
  margin-top: .25em;
}
.mailchimp-signup .button {
  background: #aaa;
  color: var(--color-white);
  border: 0;
  border-radius: 4px;
  font-size: 15px;
  height: 32px;
  line-height: 32px;
  padding: 0 18px;
  cursor: pointer;
}
.mailchimp-signup .button:hover { background: #777; }

/* Anchors sit below the sticky header when jumped to */
.anchor { display: block; position: relative; top: -120px; visibility: hidden; }