/* ==========================================================================
   Auth Header — template-parts/auth-header.php
   rem base: 10px (html { font-size: 62.5%; })
   1rem = 10px | 0.1rem = 1px
   ========================================================================== */

/* Wrapper
   ========================================================================== */

.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Branding
   ========================================================================== */

.auth-header__branding {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.auth-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 1.6rem;
}

.auth-header__logo svg,
.auth-header__logo .dashicons {
  width: 3.2rem;
  height: 3.2rem;
  color: var(--color-primary-foreground, #fff);
}

.auth-header__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a1a);
  letter-spacing: -0.02em;
  margin: 0;
}

.auth-header__tagline {
  font-size: 1.4rem;
  color: var(--color-muted-foreground, #737373);
  margin: 0.8rem 0 0;
  line-height: 1.5;
}

/* Feature Pills
   ========================================================================== */

.auth-header__pills {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.auth-header__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  border-radius: 9999px;
  background: var(--color-primary-10, rgba(34, 197, 94, 0.1));
  color: hsl(152 55% 30%);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
}

.auth-header__pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-header__pill-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.auth-header__pill-text {
  white-space: nowrap;
}