/* Paragraph styles "Eyebrow", "Lead", "Small print" + format "Highlight" (loaded only with paragraphs) */
.is-style-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--wp--preset--color--teal);

  &::before {
    content: "";
    flex: 0 0 30px;
    height: 1.5px;
    background: currentColor;
  }
}

/* an eyebrow sits 16 px above the heading below it (group template) */
:where(.is-layout-flow, .is-layout-constrained, .sg-section__in) > .is-style-eyebrow + :is(h1, h2, h3) {
  margin-block-start: 16px;
}

.is-style-lead {
  color: var(--wp--preset--color--teal);
  font-size: var(--wp--preset--font-size--l) !important;
  line-height: 1.38;
  font-weight: 300;
}

/* "Lead (dark)": larger text in the text colour, normal weight */
.is-style-lead-dark {
  font-size: clamp(17px, 1.6vw, 19px) !important;
  line-height: 1.45;
  color: var(--wp--preset--color--ink);
}

/* additional class "is-measure": readable line length of intro texts (56 characters) */
p.is-measure { max-width: 56ch; }
p.is-measure.is-wide { max-width: 70ch; }
p.is-measure.has-text-align-center { margin-inline: auto; }
.is-style-eyebrow.has-text-align-center { justify-content: center; }

/* "Legend": teal square in front (map legends) */
.is-style-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px !important;

  &::before { content: ""; flex: 0 0 14px; height: 14px; background: #006c67; }
}

/* "Group label": small uppercase label with a coloured dot (groups of a list: Bins, Stationary Containers …).
   Dot colour: additional class is-dot-light / is-dot-dark */
.is-style-dot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);

  &::before { content: ""; flex: 0 0 14px; height: 14px; border-radius: 50%; background: #006c67; }
  &.is-dot-light::before { background: #5fae9c; }
  &.is-dot-dark::before { background: #1d1d1b; }
}

.is-style-small {
  font-size: 13px !important;
  color: var(--wp--custom--muted);
}

.sg-hl {
  font-style: italic;
  font-weight: 700;
  color: var(--wp--preset--color--teal);
}