/* ==========================================================================
   CBON Site Header — 全站統一品牌橫額組件
   貓 logo 放在「CBon」與「top」中間，代替「.」：CBon(logo)top

   用法：在每頁頂部品牌區放入 .cbon-brand 結構：

   <a href="https://cbon.top/" class="cbon-brand" aria-label="CBON 首頁">
     <span class="cbon-brand__word">CBon</span>
     <img class="cbon-brand__logo" src="images/cb-cat-logo.png" alt="" width="36" height="36">
     <span class="cbon-brand__tld">top</span>
   </a>

   深色/彩色背景上加 .cbon-brand--on-dark。
   依賴 design-tokens.css 變數（全部附 fallback，單獨載入亦不會壞）。
   ========================================================================== */

.cbon-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1;
    flex: none;
}

.cbon-brand__logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--cbon-accent-100, #ffedd5);
    object-fit: cover;
    flex: none;
    display: block;
}

.cbon-brand__word,
.cbon-brand__tld {
    font-family: var(--cbon-font-sans, -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif);
    font-size: 1.3rem;
    font-weight: var(--cbon-weight-black, 800);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* !important：部分舊頁對 .logo-area h1 下了 color/text-fill !important
   （曾令舊標題白字隱形），品牌字必須直接鎖死，保證全站一致 */
.cbon-brand__word {
    color: var(--cbon-text, #0b1020) !important;
    -webkit-text-fill-color: var(--cbon-text, #0b1020) !important;
}

.cbon-brand__tld {
    color: var(--cbon-accent, #ff6b35) !important;
    -webkit-text-fill-color: var(--cbon-accent, #ff6b35) !important;
}

/* 深色 / 彩色（橙漸層等）背景版本 */
.cbon-brand--on-dark .cbon-brand__word {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.cbon-brand--on-dark .cbon-brand__tld {
    color: #ffd9c2 !important;
    -webkit-text-fill-color: #ffd9c2 !important;
}

.cbon-brand--on-dark .cbon-brand__logo {
    border-color: rgba(255, 255, 255, 0.55);
}

/* 包住 brand 的 h1（保留原有語意，不放大字級、不留 margin） */
h1.cbon-brand-h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: inherit;
    display: inline-flex;
    line-height: 1;
    background: none;
    -webkit-text-fill-color: currentColor;
}