/*
 * Components. Each section is self-contained; its tokens sit at the top.
 * Several are only referenced from Beaver Builder content (alert, drawer,
 * timeline, grid-bg, dot-bg, timelist, topics__list, bg-arrow--bb, the
 * square buttons), so check the DB before renaming any of them.
 */

/* alert */
:root {
  --alert-border-radius: var(--radius-base);
  --alert-bg-color-base: light-dark(var(--gray-100), var(--black));
  --alert-color-base: light-dark(var(--gray-600), var(--gray-300));
}

.alert {
  position: relative;
  padding: 16px;
  font-size: 14px;
  background-color: var(--alert-bg-color-base);
  color: var(--alert-color-base);
  border-radius: var(--alert-border-radius);
}

/* background arrows on BB rows. Arrow color is baked into each SVG. */
.bg-arrow--bb .fl-row-content-wrap {
  background-size: 200px;
  background-repeat: no-repeat;
  background-position: top 24px right 24px;

  @media (width <= 720px) {
    background-size: 101px;
    background-position: top 16px right 16px;
  }
}

.bg-arrow--bb--pink .fl-row-content-wrap {
  background-image: url("data: image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_85%22%20data-name%3D%22Path%2085%22%20d%3D%22M939.473%2C49.248V2.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C0H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_86%22%20data-name%3D%22Path%2086%22%20d%3D%22M939.473%2C197.248V150.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C148H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_87%22%20data-name%3D%22Path%2087%22%20d%3D%22M939.473%2C345.248V298.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C296H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-131.65)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_88%22%20data-name%3D%22Path%2088%22%20d%3D%22M939.473%2C493.248V446.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C444H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-197.475)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_92%22%20data-name%3D%22Path%2092%22%20d%3D%22M791.474%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C0H742.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_93%22%20data-name%3D%22Path%2093%22%20d%3D%22M791.474%2C197.248V150.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C148H742.225a2.22%2C2.22%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_94%22%20data-name%3D%22Path%2094%22%20d%3D%22M791.474%2C345.248V298.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C296H742.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689%20-131.65)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_98%22%20data-name%3D%22Path%2098%22%20d%3D%22M643.474%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C641.253%2C0H594.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-507.864)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_99%22%20data-name%3D%22Path%2099%22%20d%3D%22M643.474%2C197.248V150.221A2.221%2C2.221%2C0%2C0%2C0%2C641.253%2C148H594.225a2.22%2C2.22%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-507.864%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5ec4%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_103%22%20data-name%3D%22Path%20103%22%20d%3D%22M495.473%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C493.252%2C0H446.225a2.221%2C2.221%2C0%2C0%2C0-1.571%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-442.038)%22%2F%3E%3C%2Fsvg%3E");
}

.bg-arrow--bb--black .fl-row-content-wrap {
  background-image: url("data: image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_85%22%20data-name%3D%22Path%2085%22%20d%3D%22M939.473%2C49.248V2.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C0H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_86%22%20data-name%3D%22Path%2086%22%20d%3D%22M939.473%2C197.248V150.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C148H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_87%22%20data-name%3D%22Path%2087%22%20d%3D%22M939.473%2C345.248V298.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C296H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-131.65)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_88%22%20data-name%3D%22Path%2088%22%20d%3D%22M939.473%2C493.248V446.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C444H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-197.475)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_92%22%20data-name%3D%22Path%2092%22%20d%3D%22M791.474%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C0H742.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_93%22%20data-name%3D%22Path%2093%22%20d%3D%22M791.474%2C197.248V150.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C148H742.225a2.22%2C2.22%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_94%22%20data-name%3D%22Path%2094%22%20d%3D%22M791.474%2C345.248V298.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C296H742.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689%20-131.65)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_98%22%20data-name%3D%22Path%2098%22%20d%3D%22M643.474%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C641.253%2C0H594.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-507.864)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_99%22%20data-name%3D%22Path%2099%22%20d%3D%22M643.474%2C197.248V150.221A2.221%2C2.221%2C0%2C0%2C0%2C641.253%2C148H594.225a2.22%2C2.22%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-507.864%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23000000%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_103%22%20data-name%3D%22Path%20103%22%20d%3D%22M495.473%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C493.252%2C0H446.225a2.221%2C2.221%2C0%2C0%2C0-1.571%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-442.038)%22%2F%3E%3C%2Fsvg%3E");
}

.bg-arrow--bb--yellow .fl-row-content-wrap {
  background-image: url("data: image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_85%22%20data-name%3D%22Path%2085%22%20d%3D%22M939.473%2C49.248V2.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C0H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_86%22%20data-name%3D%22Path%2086%22%20d%3D%22M939.473%2C197.248V150.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C148H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_87%22%20data-name%3D%22Path%2087%22%20d%3D%22M939.473%2C345.248V298.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C296H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-131.65)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_88%22%20data-name%3D%22Path%2088%22%20d%3D%22M939.473%2C493.248V446.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C444H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-197.475)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_92%22%20data-name%3D%22Path%2092%22%20d%3D%22M791.474%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C0H742.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_93%22%20data-name%3D%22Path%2093%22%20d%3D%22M791.474%2C197.248V150.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C148H742.225a2.22%2C2.22%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_94%22%20data-name%3D%22Path%2094%22%20d%3D%22M791.474%2C345.248V298.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C296H742.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689%20-131.65)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_98%22%20data-name%3D%22Path%2098%22%20d%3D%22M643.474%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C641.253%2C0H594.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-507.864)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_99%22%20data-name%3D%22Path%2099%22%20d%3D%22M643.474%2C197.248V150.221A2.221%2C2.221%2C0%2C0%2C0%2C641.253%2C148H594.225a2.22%2C2.22%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-507.864%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ffff00%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_103%22%20data-name%3D%22Path%20103%22%20d%3D%22M495.473%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C493.252%2C0H446.225a2.221%2C2.221%2C0%2C0%2C0-1.571%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-442.038)%22%2F%3E%3C%2Fsvg%3E");
}

.bg-arrow--bb--red .fl-row-content-wrap {
  background-image: url("data: image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_85%22%20data-name%3D%22Path%2085%22%20d%3D%22M939.473%2C49.248V2.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C0H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_86%22%20data-name%3D%22Path%2086%22%20d%3D%22M939.473%2C197.248V150.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C148H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_87%22%20data-name%3D%22Path%2087%22%20d%3D%22M939.473%2C345.248V298.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C296H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-131.65)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_88%22%20data-name%3D%22Path%2088%22%20d%3D%22M939.473%2C493.248V446.221A2.22%2C2.22%2C0%2C0%2C0%2C937.253%2C444H890.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.027%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-639.514%20-197.475)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_92%22%20data-name%3D%22Path%2092%22%20d%3D%22M791.474%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C0H742.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_93%22%20data-name%3D%22Path%2093%22%20d%3D%22M791.474%2C197.248V150.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C148H742.225a2.22%2C2.22%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_94%22%20data-name%3D%22Path%2094%22%20d%3D%22M791.474%2C345.248V298.221A2.221%2C2.221%2C0%2C0%2C0%2C789.253%2C296H742.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-573.689%20-131.65)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_98%22%20data-name%3D%22Path%2098%22%20d%3D%22M643.474%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C641.253%2C0H594.225a2.221%2C2.221%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-507.864)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_99%22%20data-name%3D%22Path%2099%22%20d%3D%22M643.474%2C197.248V150.221A2.221%2C2.221%2C0%2C0%2C0%2C641.253%2C148H594.225a2.22%2C2.22%2C0%2C0%2C0-1.57%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-507.864%20-65.825)%22%2F%3E%3Cpath%20style%3D%22fill%3A%23ff5867%3B%20stroke-width%3A0px%3B%22%20id%3D%22Path_103%22%20data-name%3D%22Path%20103%22%20d%3D%22M495.473%2C49.248V2.221A2.221%2C2.221%2C0%2C0%2C0%2C493.252%2C0H446.225a2.221%2C2.221%2C0%2C0%2C0-1.571%2C3.791l47.028%2C47.027a2.221%2C2.221%2C0%2C0%2C0%2C3.791-1.57%22%20transform%3D%22translate(-442.038)%22%2F%3E%3C%2Fsvg%3E");
}

/* button */
:root {
  --button-font-family: var(--font-family-sans-serif);
  --button-letter-spacing: .33px;
  --button-text-transform: none;
  --button-font-size: 14px;

  --button-radius: var(--radius-base);
  --button-padding-inline: 16px;
  --button-height: 36px;

  --button-transition: all ease .15s;

  /* neutral default. Variant classes reassign these. */
  --button-bg: var(--gray-100);
  --button-bg-hover: var(--gray-200);
  --button-bg-active: var(--gray-300);
  --button-color: var(--gray-700);
  --button-border: none;
}

.button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  padding: 0 var(--button-padding-inline);
  border: var(--button-border);
  border-radius: var(--button-radius);
  background-color: var(--button-bg);
  color: var(--button-color);
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--button-letter-spacing);
  text-align: center;
  text-decoration: none;
  text-transform: var(--button-text-transform);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: var(--button-transition);

  &:hover {
    background-color: var(--button-bg-hover);
  }

  &:active {
    background-color: var(--button-bg-active);
    transform: scale(.99);
  }
}

.button--primary {
  --button-bg: var(--blurple);
  --button-bg-hover: var(--blurple-dark);
  --button-bg-active: var(--blurple-darker);
  --button-color: var(--white);
}

.button--black {
  --button-bg: var(--black);
  --button-bg-hover: var(--gray-800);
  --button-bg-active: var(--gray-700);
  --button-color: var(--white);
}

/* outlined square icon buttons (BB content) */
.button--square-green,
.button--square-pink {
  height: 52px;
  width: 52px;
  border: var(--border-base);
  font-size: 20px;
  border-radius: var(--button-radius);
  color: black;
  flex: 0 0 auto;

  &:hover {
    outline: var(--border-base);
    cursor: pointer;
  }

  &:active {
    outline: 2px solid var(--black);
    outline-offset: 0px;
  }
}

.button--square-green { background-color: var(--green); }
.button--square-pink { background-color: var(--pink); }

/* BB's global styles paint bare buttons inside .fl-builder-content,
   including descendants via `button *`. Take both back for .button. */
.fl-builder-content .button,
.fl-builder-content .button * {
  color: var(--button-color) !important;
}

.fl-builder-content .button {
  background-color: var(--button-bg) !important;

  &:hover,
  &:hover * {
    color: var(--button-color) !important;
  }

  &:hover {
    background-color: var(--button-bg-hover) !important;
  }

  &:active {
    background-color: var(--button-bg-active) !important;
  }
}

/* card */
:root {
  --card-border-radius: var(--radius-large);
  --card-border: var(--border-base);
  --card-bg-color: light-dark(var(--true-white), var(--gray-900));
}

.card,
.card--blog {
  display: flex;
  flex-direction: column;
  border: var(--card-border);
  border-radius: var(--card-border-radius);
  background-color: var(--card-bg-color);
}

.card {
  padding: 16px;
  margin-bottom: 24px;
}

.card--shadow {
  box-shadow: var(--shadow-base);
}

.card--blog {
  cursor: pointer;
  transition: var(--transition-default);

  &:hover {
    box-shadow: var(--shadow-soft-2);
  }
}

.card--blog__img {
  margin-bottom: 8px;

  img {
    border-radius: var(--card-border-radius);
  }
}

.card__body {
  flex-grow: 1;
  grid-area: body;
}

/* list */
.list--unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* drawer (BB content) */
:root {
  --drawer-bg-color: light-dark(var(--white), var(--black));
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 440px;
  height: 100vh;
  border-left: var(--border-base);
  background-color: var(--drawer-bg-color);
  box-shadow: 0px -8px 12px rgb(0 0 0 / 0);
  transform: translateX(440px);
  transition: transform ease-in .15s;
  z-index: 100;
}

/* timeline (BB content) */
.timeline {
  position: relative;
  padding-top: 16px;
  padding-left: 40px;
  overflow-y: auto;

  &::before {
    position: absolute;
    content: "";
    border-left: 2px dashed var(--gray-300);
    height: calc(100% - 16px);
    width: 2px;
  }
}

/* table */
:root {
  --table-thead-bg-color: light-dark(var(--gray-100), var(--gray-900));
  --table-border: 1px solid light-dark(var(--gray-300), var(--gray-900));
  --table-thead-border: var(--border-base);
  --table-tr-hover-bg-color: light-dark(var(--gray-000), var(--black));
}

.table {
  width: 100%;
  border-collapse: collapse;

  th,
  td {
    padding-block: 12px;
  }

  tbody tr {
    width: 100%;
    border-bottom: var(--table-border);
    transition: var(--transition-default);

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: var(--table-tr-hover-bg-color);
    }
  }

  thead {
    th {
      font-weight: var(--font-weight-semibold);
    }

    tr {
      background-color: var(--table-thead-bg-color);
      border-bottom: var(--table-thead-border);
    }
  }
}

/* tag */
:root {
  --tag-bg-color: light-dark(var(--gray-100), var(--black));
  --tag-color: light-dark(var(--gray-600), var(--gray-200));
  --tag-border-color: light-dark(var(--gray-300), var(--gray-400));
  --tag-radius: var(--radius-base);
  --tag-font-size: var(--font-size-sm);
}

.tag {
  display: inline-flex;
  padding: 4px 8px;
  margin-bottom: 8px;
  margin-right: 4px;
  background-color: var(--tag-bg-color);
  color: var(--tag-color);
  border-radius: var(--tag-radius);
  font-size: var(--tag-font-size);
  border: 1px solid var(--tag-border-color);
  line-height: 1;
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}

/* type */
.text--eyebrow {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--button-letter-spacing);
  text-transform: uppercase;
}

/* pagination (markup from pagination() in inc/template-functions.php) */
:root {
  --font-size-pagination: var(--font-size-med);
  --bg-inactive-pagination-hover: light-dark(var(--gray-200), var(--red-darker));
}

.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 64px;
  font-size: var(--font-size-pagination);
  font-family: var(--font-family-mono);

  span,
  a {
    display: block;
  }

  .page-of {
    margin-right: 24px;
  }

  .current,
  .inactive {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    margin-block: 0;
    margin-right: 4px;
    border-radius: 50px;
  }

  .current {
    font-weight: var(--font-weight-bold);
  }

  .inactive:hover {
    background-color: var(--bg-inactive-pagination-hover);
  }
}

/* grid background (BB content) */
.grid-bg {
  --grid-color: var(--true-black);
  --grid-bg-color: transparent;
  --grid-size: 30px;

  background-color: var(--grid-bg-color);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center;
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}

.grid-bg--ghost {
  --grid-color: var(--gray-200);
  --grid-bg-color: transparent;
}

.grid-bg--large {
  --grid-size: 80px;
}

.grid-bg--small {
  --grid-size: 10px;
}

.grid-bg--green {
  --grid-color: var(--green);
  --grid-bg-color: var(--green-lightest);
}

/* dot background (BB content) */
.dot-bg {
  --dot-color: var(--gray-300);
  --dot-bg-color: var(--white);
  --dot-size: 1px;
  --dot-space: 10px;
  background:
    linear-gradient(90deg, var(--dot-bg-color) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
    linear-gradient(var(--dot-bg-color) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
    var(--dot-color);
}

.dot-bg--black {
  --dot-color: var(--gray-800);
  --dot-bg-color: var(--gray-900);
}

/* cookie consent (markup and JS in footer.php) */
.consent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-size: 12px;
  border-radius: var(--radius-base);
  background-color: var(--true-white);
  border: var(--border-base);
  box-shadow: var(--shadow-base);
  color: var(--gray-900);
  width: 100%;
  max-width: 350px;
  z-index: 100;
  overflow: hidden;

  a {
    color: var(--true-black);
    text-decoration: underline;
  }

  @media (width <= 720px) {
    box-shadow: none;
    max-width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }
}

.consent__choice {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  font-weight: var(--font-weight-medium);
  flex: 1 1 auto;
  width: 86px;
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    background-color: var(--green);
  }
}

.consent__choices {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  border-left: var(--border-base);
}

.consent__description {
  padding: 16px;
}

/* topics list (BB post grid) */
.topics__list .fl-post-grid-text {
  padding: 0;

  a {
    display: block;
    padding: var(--space-14) var(--space-12) var(--space-12);

    &::after {
      display: inline-block;
      font-family: var(--font-family-icon);
      content: "\EA6C";
      color: var(--pink);
      opacity: 0;
      position: absolute;
      transform: translate(0px, 0px);
      transition: var(--transition-default);
    }

    &:hover {
      background-color: var(--gray-100);

      &::after {
        transform: translate(8px, 0px);
        opacity: 1;
      }
    }
  }
}

/* numbered steps (BB content) */
.timelist {
  position: relative;
}

.timelist__desc {
  color: var(--gray-500);
}

.timelist__title {
  padding-top: 8px;
  font-size: 20px;
  margin-bottom: 8px;
}

.timelist__count {
  --timelist__count-size: 40px;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  width: var(--timelist__count-size);
  height: var(--timelist__count-size);
  border-radius: var(--timelist__count-size);
  background: var(--gray-200);
  color: var(--true-black);
}

.timelist__row {
  display: flex;
  margin-bottom: 48px;
  gap: 24px;
}

.timelist__row--active {
  .timelist__count {
    background-color: var(--green);
  }

  .timelist__title {
    color: var(--green-darker);
  }
}