/* ===== Responsive header logo guardrails ===== */
:root{
  /* 依你的頁首高度微調這個值 */
  --logo-max-height: 60px;
}

@media (min-width: 768px){
  :root{ --logo-max-height: 68px; }
}
@media (min-width: 1200px){
  :root{ --logo-max-height: 90px; }
}

/* 讓品牌區成為彈性容器，並且不讓內容溢出 */
.site-branding{
  display: flex;
  align-items: center;
  overflow: hidden;     /* 重要：避免圖片超出欄位去覆蓋右側元素 */
  line-height: 0;       /* 移除 img 周圍空白 */
  max-width: 100%;
}

/* 連結容器不撐滿，保持在欄位內 */
.site-branding > a{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

/* 關鍵：限制圖片大小，避免覆蓋周邊元素 */
#headerLogo{
  display: block;
  max-width: 100%;      /* 不超過父層欄位寬度 */
  height: auto;         /* 保持比例 */
  width: auto;
  max-height: var(--logo-max-height);  /* 不超過頁首高度 */
  object-fit: contain;  /* 長寬比怪也不會被拉扯 */
}

/* SVG 有時無內建尺寸，給定高度以免暴衝 */
#headerLogo[src$=".svg"]{
  height: var(--logo-max-height);
  width: auto;
}

/* 保險起見：左側欄位也不要讓內容外溢（避免截走點擊） */
.row.align-items-center .col-5.col-md-3.col-lg-2{
  overflow: hidden;
}