/* Wspólny znak marki Kompas Wiedzy — używany we wszystkich nagłówkach. */
:root { --kw-logo-size: 42px; }

:where(
  .brand-mark,
  .logo-mark,
  .global-brand-mark,
  .m-logo-mark,
  .unified-test-brand-mark,
  .brand > .logo-icon,
  .logo > .logo-icon,
  .m-logo > .logo-icon,
  .unified-test-brand > .logo-icon
) {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 var(--kw-logo-size) !important;
  width: var(--kw-logo-size) !important;
  height: var(--kw-logo-size) !important;
  min-width: var(--kw-logo-size) !important;
  min-height: var(--kw-logo-size) !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #155EEF !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

:where(
  .brand-mark,
  .logo-mark,
  .global-brand-mark,
  .m-logo-mark,
  .unified-test-brand-mark,
  .brand > .logo-icon,
  .logo > .logo-icon,
  .m-logo > .logo-icon,
  .unified-test-brand > .logo-icon
)::after {
  content: "M" !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 25px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  /* Wielkie litery mają niżej położony środek optyczny niż środek linii. */
  transform: translateY(-5px) !important;
}

/* Nazwa serwisu jest zawsze jednym, czytelnym podpisem obok znaku. */
:where(.brand, .logo, .m-logo, .unified-test-brand) {
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  :root { --kw-logo-size: 38px; }

}