/* Front (login/landing) page branding to match the "Middle Eastern Social Media
   Organization" design. These elements are injected by yal-landing.js onto the
   React auth screen (.x-auth-wrap) so we don't touch the compiled bundle. */

/* Stack: heading on top, the auth card centered, contribution footer at the
   bottom. The bundle ships .x-auth-wrap as a centered grid; switch it to a
   vertical flex so our injected header/footer sit above/below the card. */
.x-auth-wrap:has(.yal-landing-head) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  min-height: 100vh;
  padding: 1.5rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  box-sizing: border-box;
}

.yal-landing-head {
  text-align: center;
  margin: 0;
  width: 100%;
}

.yal-landing-title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  font-size: clamp(2.5rem, 9vw, 4.6rem);
}

.yal-landing-sub {
  margin: 0.45rem 0 0;
  color: #8b98a5;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.05rem, 3.6vw, 1.7rem);
}

/* "Yaloo.org" logo: white "Y", blue "al", two blue dots for "oo", small grey ".org". */
.x-auth-title .yal-logo-al {
  color: var(--blue, #1d9bf0);
}

.x-auth-title .yal-logo-o {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin: 0 0.03em;
  border-radius: 50%;
  background: var(--blue, #1d9bf0);
  vertical-align: baseline;
  position: relative;
  top: 0.02em;
}

.x-auth-title .yal-logo-org {
  color: #8b98a5;
  font-weight: 700;
  font-size: 0.42em;
  letter-spacing: 0;
  vertical-align: baseline;
}

.yal-landing-foot {
  max-width: 460px;
  width: 100%;
  text-align: center;
  color: #8b98a5;
  font-weight: 700;
  line-height: 1.45;
  font-size: 1.05rem;
  margin: 0;
}

/* Sidebar (logged-in) "Yaloo.org" wordmark replacing the Y badge image.
   Same style as the landing logo, scaled to fit the left nav. */
.x-logo-wrap .yal-sidelogo {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  padding: 2px 4px;
}

.x-logo-wrap .yal-sidelogo .yal-logo-al {
  color: var(--blue, #1d9bf0);
}

.x-logo-wrap .yal-sidelogo .yal-logo-o {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin: 0 0.03em;
  border-radius: 50%;
  background: var(--blue, #1d9bf0);
  position: relative;
  top: 0.02em;
}

.x-logo-wrap .yal-sidelogo .yal-logo-org {
  color: #8b98a5;
  font-weight: 700;
  font-size: 0.42em;
  vertical-align: baseline;
}