/*
 * brand.css — RadarSolutions lockup.
 *
 * Pairs with /js/brand.js. The mark uses currentColor, so placing the lockup on
 * a dark sidebar vs a light header is a matter of setting `color` on an
 * ancestor — there is no second asset to keep in sync.
 */

:root {
  --rs-navy: #0f1e3d;
  --rs-red: #e01f26;
  --rs-ink: #0f1e3d;
}

/*
 * Owns its own stacking. Host containers are usually flex-row, so without this
 * the portal label lands beside the wordmark and overlaps it.
 */
.rs-brand-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0;
  width: 100%;
  min-width: 0;
}

/*
 * Centred variant for standalone pages (sign-in, invitation). The block is
 * width:100% so it can stretch in a sidebar; without this the lockup inside it
 * still hugs the left edge even when the parent centres its children.
 */
.rs-center .rs-brand-block,
.rs-brand-block.rs-center {
  align-items: center !important;
  text-align: center;
}
.rs-center .rs-lockup,
.rs-brand-block.rs-center .rs-lockup { justify-content: center; }
.rs-center .rs-names,
.rs-brand-block.rs-center .rs-names { align-items: center; }

.rs-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  max-width: 100%;
}

.rs-mark-wrap {
  flex: 0 0 auto;
  display: inline-flex;
}

/*
 * The shipped mark is white-on-transparent. On light surfaces it would be
 * invisible, so darken it to the brand navy with a filter rather than shipping
 * a second, divergent copy of the artwork.
 */
.rs-mark {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(9%) sepia(28%) saturate(3200%) hue-rotate(200deg) brightness(95%) contrast(96%);
}

/* On dark surfaces the artwork is already correct — show it untouched. */
.sidebar .rs-mark,
.sidebar-header .rs-mark,
.card-head .rs-mark,
.rs-on-dark .rs-mark { filter: none; }

.rs-names {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rs-wordmark {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.005em;
  line-height: 1.05;
  white-space: nowrap;
}

/*
 * RADAR and SOLUTIONS are one word in two colours — they must be typographically
 * identical. Every metric is pinned here rather than inherited, so a host
 * stylesheet (each portal ships its own .logo-text / sidebar rules) cannot make
 * one half render at a different size or weight than the other.
 *
 * Colour is the ONLY property that differs between the two spans.
 */
.rs-word-a,
.rs-word-b {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
}

.rs-word-a { color: var(--rs-ink); }
.rs-word-b { color: var(--rs-red); }

/* The organisation that signed up sits under the platform brand, never replacing it. */
.rs-org {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.62;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 168px;
}

.rs-portal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 6px;
}

/*
 * Size modifiers. Sidebars use the default; standalone pages where the lockup
 * IS the page's identity (sign-in, invitation) use .rs-lg so the brand carries
 * the card rather than sitting on it like a label.
 */
.rs-lg .rs-mark { width: 42px; height: 42px; }
.rs-lg .rs-wordmark { font-size: 24px; }
.rs-lg .rs-lockup { gap: 13px; }
.rs-lg .rs-org { font-size: 11.5px; margin-top: 4px; }

@media (max-width: 420px) {
  .rs-lg .rs-mark { width: 36px; height: 36px; }
  .rs-lg .rs-wordmark { font-size: 21px; }
}

/*
 * Dark surfaces. The sidebars in all three portals are dark, so the wordmark
 * flips to white while the mark keeps the red for contrast against it.
 */
.sidebar .rs-mark-wrap,
.sidebar-header .rs-mark-wrap,
.rs-on-dark .rs-mark-wrap { color: #fff; }

.sidebar .rs-word-a,
.sidebar-header .rs-word-a,
.rs-on-dark .rs-word-a { color: #fff; }

.sidebar .rs-org,
.sidebar-header .rs-org,
.rs-on-dark .rs-org { color: #fff; opacity: 0.55; }

.sidebar .rs-portal-label,
.sidebar-header .rs-portal-label,
.rs-on-dark .rs-portal-label { color: #fff; opacity: 0.42; }

@media (max-width: 640px) {
  .rs-wordmark { font-size: 14px; }
  .rs-mark { width: 26px; height: 26px; }
  .rs-org { max-width: 130px; }
}