/* Logo */

.logo {
  grid-area: logo;
  z-index: var(--z-index-logo);
  height: auto;
  width: auto;
  padding: calc(var(--logo-size) / 6);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-round);
  box-shadow: var(--box-shadow);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-m);
}

.logo figure {
  position: relative;
}

.logo img {
  width: auto;
  height: var(--logo-size);
  object-fit: contain;
}

/* Badge */

.badge {
  font-weight: var(--font-weight-bolder);
  font-size: var(--font-size-large);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: var(--space-gap-large);
  background: var(--gradient-badge);
  color: var(--color-white);
  width: fit-content;
  height: fit-content;
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius-round);
  page-break-inside: avoid;
  break-inside: avoid;
  letter-spacing: 0.02em;
  box-shadow: var(--box-shadow);
  white-space: nowrap;
  text-align: center;
  margin: var(--space-xl);
  overflow: visible;
  -webkit-hyphens: none;
  hyphens: none;
}

.stack,
.badge.stack {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.badge>* {
  white-space: nowrap;
}

p:has(>.badge:first-child:last-child) {
  display: flex;
  justify-content: center;
}

.badge img,
main.page>section>article .badge img,
main.single>section>article .badge img {
  height: 3em;
  width: auto;
  padding: 0;
  margin: 0;
  object-fit: contain;
  display: block;
  float: none;
  clear: both;
}

main.page>section>article .badge img:hover,
main.single>section>article .badge img:hover {
  transform: none;
}

.badge mark {
  color: var(--main-fg);
}

/* Checkmark Badge */

.logo .badge {
  position: absolute;
  top: -80%;
  left: 40%;
  padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-xs);
  border-radius: 0 var(--radius-round) var(--radius-round) 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  z-index: var(--z-index-logo-badge);
  box-shadow: none;
}

.logo .badge+.badge {
  padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-m);
  border-radius: var(--radius-round) 0 var(--radius-round) var(--radius-round);
  transform: rotate(45deg) translateY(98%) translateX(-100%);
  transform-origin: bottom left;
}