/* ============================================================================
   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(--text-3xl); /* 或自定义 clamp(2rem, 5.5vw, 3.5rem) */
  --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: fit-content;
  width: -moz-fit-content;
  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: 100%;
  transition: font-size 0.3s ease;
}

/* 5. RESPONSIVE ADJUSTMENTS*/
@media (max-width: 480px) {
  .brand-logo {
    max-width: 80vw; /* 手机上允许更宽 */
  }
}