/* ============================================================================
   COMPONENT: BRAND LOGO (Fixed & Blended)
   功能：左上角固定标题，具有自动反色效果 (mix-blend-mode)
   依赖：design-tokens.css (需要 --trigger-offset 等变量)
   ============================================================================ */

/* 1. COMPONENT TOKENS
   局部变量映射，方便微调
*/
:root {
  /* 位置：与菜单按钮(Hamburger)保持水平和垂直对齐 */
  --logo-pos-top: var(--trigger-offset, 24px); /* 如果 trigger-offset 未定义则回退到 24px */
  --logo-pos-left: var(--trigger-offset, 24px);
  
  /* 字体设置 */
  --logo-font-family: var(--font-brand);
  --logo-font-size: var(--type-brand);
  --logo-line-height: 1;
  
  /* 颜色设置 (基于原有的逻辑) */
  --logo-color-light: #ffffff; /* 建议使用纯白以获得最佳混合效果 */
  --logo-color-dark: #000000;  /* 建议使用纯黑 */
  
  /* 层级：必须高于普通内容，但低于全屏菜单 */
  --z-index-logo-base: var(--layer-overlay);
}

/* 2. BLOCK: BRAND LOGO WRAPPER
   作为定位基准
*/
/* 父容器：承担混合任务 */
.brand-logo {
  position: fixed;
  top: var(--logo-pos-top);
  left: var(--logo-pos-left);
  z-index: var(--z-index-logo-base);
  
  max-width: 40vw;
  pointer-events: none;
  
  mix-blend-mode: difference;
}

/* 链接容器：恢复点击事件 */
.brand-logo__link {
  text-decoration: none;
  pointer-events: auto; /* 只有文字本身可以点击跳转 */
  width: max-content;
  max-width: 100%;
  display: block;
  position: relative; /* 为绝对定位的子元素提供锚点 */
}

/* 3. ELEMENT: TEXT LAYERS */

.brand-logo__text {
  font-family: var(--logo-font-family);
  font-size: var(--logo-font-size);
  line-height: var(--logo-line-height);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  padding: 0 var(--space-xs);
  
  color: var(--logo-color-light); /* 确保纯白 */
  z-index: 3;
  mix-blend-mode: difference;
  
  display: block;
  width: max-content;
  max-width: 100%;
  transition: font-size 0.3s ease;
}

/* 5. RESPONSIVE ADJUSTMENTS*/
@media (max-width: 480px) {
  .brand-logo {
    max-width: var(--mobile-title-max);
  }

  .brand-logo__text {
    /* 盒子宽度不会自动压缩字形；窄屏必须同时限制真实字号。 */
    font-size: min(var(--logo-font-size), var(--type-brand-compact));
    padding-inline: var(--space-2xs);
  }
}