/**
 * Logo Component Styles
 *
 * Brands:  rbsg (Robert Bosch Stiftung) | rba (Robert Bosch Academy)
 * Surfaces: white | trust | attitude | academy
 * Sizes:   xs (32px) | s (40px) | m (46px) | l (64px) | xl (80px)
 * States:  default | hover | active (pressed)
 */

/* ── Size tokens ─────────────────────────────────────────── */
/* Default: responsive — grows with viewport.                 */
/* Explicit `logo--size-*` overrides responsive scaling.      */
.logo {
  --lc-height: 32px; /* mobile */
  --lc-bm-ratio: 0.8375; /* Bildmarke width = height × 0.8375 at any size */

  --lc-height-s: 40px;
  --lc-height-m: 46px;
  --lc-height-l: 64px;
  --lc-height-xl: 80px;
}


@media (min-width: 768px) {
  .logo { --lc-height: var(--lc-height-s); } /* tablet */
}

@media (min-width: 1200px) {
  .logo { --lc-height: var(--lc-height-m); } /* desktop */
}

/* Explicit size overrides — declared after responsive rules, win via cascade */
.logo--size-xs { --lc-height: var(--lc-height); }
.logo--size-s  { --lc-height: var(--lc-height-s); }
.logo--size-m  { --lc-height: var(--lc-height-m); }
.logo--size-l  { --lc-height: var(--lc-height-l) ; }
.logo--size-xl { --lc-height: var(--lc-height-xl); }

/* ── Color tokens: default (light surfaces) ──────────────── */
.logo {
  --lc-color:        var(--trust, #550a2d);
  --lc-color-hover:  var(--accent, #fa263a);
  --lc-color-active: var(--accent-500, #c81e2e);
}

/* ── Surface auto-detection from ancestor context (specificity 0,2,0) ── */
/* Logo adapts automatically when placed inside a surface component.      */
.surface--trust .logo {
  --lc-color:        var(--white, #ffffff);
  --lc-color-hover:  var(--attitude, #ffa0fa);
  --lc-color-active: var(--attitude-500, #cc80c8);
}

.surface--attitude .logo,
.surface--academy .logo,
.surface--ambience_light .logo,
.surface--ambience_dark .logo {
  --lc-color:        var(--trust, #550a2d);
  --lc-color-hover:  var(--trust-500, #440824);
  --lc-color-active: var(--trust-500, #440824);
}

/* RBA brand: academy-gold hover on light ancestor surfaces */
.surface--white .logo--brand-rba,
.surface--ambience_light .logo--brand-rba,
.surface--ambience_dark .logo--brand-rba,
.surface--academy .logo--brand-rba {
  --lc-color-hover:  var(--academy-300, #c0a57b);
  --lc-color-active: var(--academy-200, #d4c0a1);
}

/* ── Explicit surface override (same specificity 0,2,0, later in cascade) ── */
/* Pass the `surface` prop to force a specific color regardless of context.   */
.logo.logo--surface-white {
  --lc-color:        var(--trust, #550a2d);
  --lc-color-hover:  var(--accent, #fa263a);
  --lc-color-active: var(--accent-500, #c81e2e);
}

.logo.logo--surface-trust {
  --lc-color:        var(--white, #ffffff);
  --lc-color-hover:  var(--attitude, #ffa0fa);
  --lc-color-active: var(--attitude-500, #cc80c8);
}

.logo.logo--surface-attitude,
.logo.logo--surface-academy {
  --lc-color:        var(--trust, #550a2d);
  --lc-color-hover:  var(--trust-500, #440824);
  --lc-color-active: var(--trust-500, #440824);
}

/* RBA explicit overrides: academy-gold hover on light explicit surfaces */
.logo--brand-rba.logo--surface-white,
.logo--brand-rba.logo--surface-academy {
  --lc-color-hover:  var(--academy-300, #c0a57b);
  --lc-color-active: var(--academy-200, #d4c0a1);
}

/* ── Base layout ─────────────────────────────────────────── */
.logo {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

/* ── SVG base ────────────────────────────────────────────── */
.logo svg {
  display: block;
  height: var(--lc-height);
  width: auto;
  fill: var(--lc-color);
  transition: fill 0.2s ease;
  flex-shrink: 0;
}

.logo svg {
  /* Show only the left portion (the brand mark) */
  clip-path: inset(0 calc(100% - calc(var(--lc-height) * var(--lc-bm-ratio))) 0 0);
}

@media (min-width: 768px) {
  .logo svg {
    clip-path: none;
  }
}

.logo--with-text svg {
  clip-path: none;
}

/* ── Bildmarke-only: clip the wordmark away ──────────────── */
.logo--only {
  width: calc(var(--lc-height) * var(--lc-bm-ratio));
}

.logo--only svg {
  /* Show only the left portion (the brand mark) */
  clip-path: inset(0 calc(100% - calc(var(--lc-height) * var(--lc-bm-ratio))) 0 0);
}

/* ── Hover / focus states (link only) ────────────────────── */
a.logo:hover svg,
a.logo:focus-visible svg {
  fill: var(--lc-color-hover);
}

a.logo:active svg {
  fill: var(--lc-color-active);
}



/* ── RBA SVG width correction ────────────────────────────── */
/* academy.svg viewBox is 200×46; set explicit width so all size tiers scale
   proportionally instead of relying on the SVG's width/height attributes. */
.logo--brand-rba svg {
  width: calc(var(--lc-height) * (200 / 46));
}

/* ── Focus ring for accessibility ────────────────────────── */
a.logo:focus-visible {
  outline: var(--border-width-bold, 4px) solid var(--lc-color-hover);
  outline-offset: 4px;
  border-radius: var(--border-radius-m, 4px);
}