/* Shared page tabs keep the active label inside the icon's white capsule. */
:root {
  --site-tab-ink: #4A3413;
  --site-tab-muted: #8A7346;
  --site-tab-surface: #FFFFFF;
  --site-tab-track: #F3EADA;
  --site-tab-focus: #9C6320;
  --site-tab-shadow: 0 3px 8px rgb(74 52 19 / 0.08);
  --site-tab-height: 44px;
  --site-tab-icon-size: 18px;
  --site-tab-font-size: 13.5px;
  --site-tab-compact-font-size: 12.5px;
  --site-tab-inline-padding: 18px;
  --site-tab-compact-padding: 10px;
  --site-tab-block-padding: 8px;
  --site-tab-label-gap: 6px;
  --site-tab-gap: 8px;
  --site-tab-track-padding: 4px;
  --site-tab-radius: 999px;
  --site-tab-motion: 200ms;
  --site-tab-focus-width: 2px;
  --site-tab-focus-offset: 2px;
}

.site-tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--site-tab-gap);
  border-radius: var(--site-tab-radius);
}

.site-tabs--surface {
  padding: var(--site-tab-track-padding);
  background: var(--site-tab-track);
}

.site-tabs .site-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--site-tab-label-gap);
  min-width: var(--site-tab-height);
  min-height: var(--site-tab-height);
  padding: var(--site-tab-block-padding) var(--site-tab-inline-padding);
  border-radius: var(--site-tab-radius);
  background: transparent;
  color: var(--site-tab-muted);
  font-family: 'Noto Sans TC', sans-serif;
  font-size: var(--site-tab-font-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  touch-action: manipulation;
  transition: color var(--site-tab-motion) ease, background-color var(--site-tab-motion) ease;
}

.site-tabs .site-tab[aria-current="page"] {
  color: var(--site-tab-ink);
  background: var(--site-tab-surface);
  font-weight: 700;
  box-shadow: var(--site-tab-shadow);
}

.site-tabs .site-tab:hover { color: var(--site-tab-ink); }

.site-tabs .site-tab:focus-visible {
  outline: var(--site-tab-focus-width) solid var(--site-tab-focus);
  outline-offset: var(--site-tab-focus-offset);
}

.site-tabs .site-tab__label { display: block; }
.site-tabs .site-tab__icon { display: none; order: -1; flex: 0 0 var(--site-tab-icon-size); }
.site-tabs .site-tab__icon img { width: var(--site-tab-icon-size); height: var(--site-tab-icon-size); }
[data-site-brand-label] { white-space: nowrap; }

@media (max-width: 768px) {
  .site-tabs .site-tab { padding-inline: var(--site-tab-compact-padding); font-size: var(--site-tab-compact-font-size); }
  .site-tabs .site-tab__label { display: none; }
  .site-tabs .site-tab[aria-current="page"] .site-tab__label { display: block; }
  .site-tabs .site-tab__icon { display: flex; align-items: center; }
}

/* Reserve room for the full selected name on the smallest phones. */
@media (max-width: 389px) {
  [data-site-brand-label] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-tabs .site-tab { transition: none; }
}