/* === Manifesto styles === */
.manifesto-summary {
  background-color: var(--off-white);
  border-left: 6px solid var(--soul-gold);
  padding: 1.25rem;
  margin: 2rem 0rem;
/*  font-size: 1.2rem; */
  text-align: left;
  box-shadow: 0rem 2px 8px rgba(0, 0, 0, 0.125);
}
.manifesto-summary h2 {
  display: block;
  font-size: 1.5rem;
  margin: 0.5rem 0rem 1.5rem 0rem;
  text-transform: uppercase;
/*  letter-spacing: 0.05em; */
  color: #2c1e0f;
}
.manifesto-summary li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: left;
}
/* Pseudo-element ::before used for emoji styling; acceptable here since icons are non-essential and invisible to screen readers */
.manifesto-summary li::before {
  content: attr(data-emoji);
  font-family: 'Noto Color Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'EmojiOne Color', 'Android Emoji', sans-serif;
  font-style: normal;
  font-weight: 400;
  flex-shrink: 0;
}

/* === Container queries for body-container === */
/* ===
       NB. These are used as a "workaround" because
        container queries correctly support rem units,
        while media queries do not recognise scaled rems.
=== */

@container body-container (max-width: 37.5rem) {
  .manifesto-summary {
    font-size: 1.1rem;
  }
  .manifesto-summary h2 {
	font-size: 1.25rem;
  }
  .manifesto-summary li {
    font-size: 1rem;
  }
  .manifesto-summary li::before {
    font-size: 1.2rem;
  }
}

@container body-container (max-width: 21.25rem) {
  .manifesto-summary {
	padding: 1rem;
  }
  .manifesto-summary h2 {
	text-transform: none;
	overflow: visible;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: auto-phrase;
	margin-top: 0.5rem;
  }
}

@container body-container (max-width: 20rem) {
  .manifesto-summary li {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@container body-container (max-height: 14.5rem), (max-width: 17rem) {
  .manifesto-summary {
	padding: 0.5rem;
  }
}

@container body-container (max-width: 10rem) {

  .manifesto-summary {
    border-left: none;
  }
  .manifesto-summary {
    font-size: 0.95rem;
  }
  .manifesto-summary h2 {
	font-size: 0.95rem;
  }
  .manifesto-summary li {
    font-size: 0.85rem;
  }
  .manifesto-summary li::before {
    font-size: 0.95rem;
  }

  .manifesto-summary {
	padding: 0.5rem;
  }
}

@container body-container (max-width: 7.5rem) {
  .manifesto-summary h2 {
	font-size: 0.875rem;
  }
  .manifesto-summary li {
    font-size: 0.775rem;
  }
}

@container body-container (max-width: 8.125rem) {
  .manifesto-summary {
	padding: 0.25rem;
  }
}