/* ==========================================================================
   RUTO@27 — the brand mark.

   Shared by the public site, the admin console and the auth pages, so it lives
   in its own file rather than inside style.css (which admin pages don't load).
   Pair it with logo.php, which emits the markup.
   ========================================================================== */

.brandmark {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  font-size: var(--bm-size, 1.85rem);
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  flex: 0 0 auto;
}

.brandmark .bm-ruto { color: var(--bm-ink, #0C1A33); }
.brandmark .bm-27   { color: var(--bm-gold, #C9A24A); }

/* The "@" carries the flag swoosh curling under its right shoulder. */
.brandmark .bm-at {
  position: relative;
  color: var(--bm-ink, #0C1A33);
  display: inline-block;
  margin: 0 -.02em;
}
.brandmark .bm-swoosh {
  position: absolute;
  left: 6%;
  bottom: -6%;
  width: 108%;
  height: 108%;
  pointer-events: none;
}

.brandmark--light { --bm-ink: #fff; }
.brandmark--dark  { --bm-ink: #0C1A33; }

/* ---- Stacked lock-up: wordmark + tagline + slogan ---- */
.brandblock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.brandblock .bm-tagline {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bm-sub, rgba(12, 26, 51, .72));
  white-space: nowrap;
}
.brandblock .bm-tagline i { color: var(--bm-gold, #C9A24A); font-style: normal; }

.brandblock .bm-rule {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  color: var(--bm-gold, #C9A24A);
}
.brandblock .bm-rule b { flex: 1; height: 1px; background: rgba(201, 162, 74, .7); }
.brandblock .bm-rule svg { width: 11px; height: 11px; flex: 0 0 auto; }

.brandblock .bm-slogan {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bm-sub, rgba(12, 26, 51, .72));
  white-space: nowrap;
}
.brandblock.brandmark--light { --bm-sub: rgba(255, 255, 255, .78); }

/* The mark SVG, when used on its own */
.logo-mark { display: block; flex: 0 0 auto; }