/* ── site-nav.css ────────────────────────────────────────────────
   全站共用「品牌列」尺寸：LOGO 高度 + 導覽列高度
   基準頁：操作說明 /help.html
   使用頁：index.html、article-reward.html、pwa-guide.html、help.html
   只負責 LOGO 與導覽列高度，其餘樣式由各頁原本的 CSS 決定。
   ─────────────────────────────────────────────────────────────── */
:root{
    --site-nav-h: 72px;   /* 導覽列高度 */
    --site-logo-h: 52px;  /* LOGO 高度 */
}

/* LOGO 容器：一律 flex + 垂直置中，避免 inline 基線把高度撐歪 */
.nav-logo,
.nav-logo a,
.brand,
.reward-brand{
    display: flex;
    align-items: center;
}

/* LOGO 圖片：統一高度，寬度等比（logo.png 為正方形） */
.nav-logo img,
.brand img,
.reward-brand img{
    display: block;
    height: var(--site-logo-h);
    width: auto;
    max-width: none;
    object-fit: contain;
    transform: none;   /* 各頁若有為舊尺寸加的位移，一律歸零以維持垂直置中 */
}

/* 導覽列內層 */
.nav-inner,
.reward-nav__inner{
    min-height: var(--site-nav-h);
}

@media (max-width: 768px){
    :root{ --site-nav-h: 60px; --site-logo-h: 40px; }
}

@media (max-width: 560px){
    :root{ --site-logo-h: 36px; }
}