/**
 * ClubFlex Brand System
 * Signet, Badge und responsive Wortmarke aus einer zentralen Bildmaske.
 */

.cf-brand-mark {
  --cf-brand-mark-size: 32px;
  display: inline-block;
  width: var(--cf-brand-mark-size);
  height: var(--cf-brand-mark-size);
  flex: 0 0 var(--cf-brand-mark-size);
  color: #062C55;
  background-color: currentColor;
  -webkit-mask: url("../../img/brand/clubflex-mark-mask.png") center / contain no-repeat;
  mask: url("../../img/brand/clubflex-mark-mask.png") center / contain no-repeat;
}

.cf-brand-mark--xs { --cf-brand-mark-size: 18px; }
.cf-brand-mark--sm { --cf-brand-mark-size: 24px; }
.cf-brand-mark--md { --cf-brand-mark-size: 32px; }
.cf-brand-mark--lg { --cf-brand-mark-size: 44px; }
.cf-brand-mark--xl { --cf-brand-mark-size: 64px; }

.cf-brand-mark--navy { color: #062C55; }
.cf-brand-mark--blue { color: #0B4CB8; }
.cf-brand-mark--cyan { color: #0EA5E9; }
.cf-brand-mark--orange { color: #FF6B19; }
.cf-brand-mark--white { color: #FFFFFF; }

.cf-brand-badge {
  --cf-brand-badge-size: 40px;
  display: inline-grid;
  place-items: center;
  width: var(--cf-brand-badge-size);
  height: var(--cf-brand-badge-size);
  flex: 0 0 var(--cf-brand-badge-size);
  border-radius: 10px;
  background: #0B4CB8;
  box-shadow: 0 8px 22px rgba(11, 76, 184, .22);
}

.cf-brand-badge .cf-brand-mark {
  --cf-brand-mark-size: calc(var(--cf-brand-badge-size) * .68);
  color: #FFFFFF;
}

.cf-brand-badge--sm { --cf-brand-badge-size: 30px; border-radius: 8px; }
.cf-brand-badge--lg { --cf-brand-badge-size: 48px; border-radius: 12px; }
.cf-brand-badge--navy { background: #062C55; }
.cf-brand-badge--blue { background: #0B4CB8; }
.cf-brand-badge--cyan { background: #0EA5E9; }
.cf-brand-badge--orange { background: #FF6B19; }

.cf-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #062C55;
  text-decoration: none;
}

.cf-brand-lockup:hover { text-decoration: none; }

.cf-brand-lockup__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.12;
}

.cf-brand-lockup__name {
  color: currentColor;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.cf-brand-lockup__sub {
  color: #64748B;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.cf-brand-lockup--inverse { color: #FFFFFF; }
.cf-brand-lockup--inverse .cf-brand-lockup__sub { color: rgba(255, 255, 255, .72); }

[data-theme="dark"] .cf-brand-lockup:not(.cf-brand-lockup--inverse),
body.dark-mode .cf-brand-lockup:not(.cf-brand-lockup--inverse) {
  color: #E6F0FF;
}

[data-theme="dark"] .cf-brand-lockup:not(.cf-brand-lockup--inverse) .cf-brand-lockup__sub,
body.dark-mode .cf-brand-lockup:not(.cf-brand-lockup--inverse) .cf-brand-lockup__sub {
  color: #94A3B8;
}

@media (max-width: 520px) {
  .cf-brand-lockup--compact-mobile .cf-brand-lockup__text { display: none; }
}