@import url("/assets/brand/wood-mark.css");

/* /travel/ is the shared geometry. Original mark colour/motion rules are
   deliberately left to each section's existing stylesheet. */
html body .nb-header {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #e7e7e3;
  background: #fff;
  color: #172b36;
  z-index: 80;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
html body .nb-header .nb-header-inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding: 0 clamp(22px, 5.2vw, 84px);
}
html body .nb-header .nb-header-row {
  position: relative;
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 28px;
}
html body .nb-header .nb-identity {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 72px;
  white-space: nowrap;
}
html body .nb-header .nb-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px !important;
  width: max-content;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #172b36;
  text-decoration: none;
  letter-spacing: normal;
}
html body .nb-header .nb-identity .site-brand-group { display: flex; align-items: center; margin: 0; padding: 0; }
html body .nb-header .nb-identity .parent-site-link { display: none; }
html body .nb-header .nb-brand :is(.mark-wrap,.publisher-mark-wrap,.mark,.site-mark,.brandmark,.publisher-mark,.publisher-stamp,.learning-site-brand__mark,.tools-shell-mark,.notebook-brand-mark) {
  box-sizing: border-box;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  flex: 0 0 34px;
  margin: 0;
  padding: 0;
}
html body .nb-header .nb-brand :is(.mark-shadow,.publisher-mark-shadow) { width: 34px; height: 34px; }
/* Bright travel yellow. The global navigation keeps its original palette.
   Colour only: original transforms, shadows and transition timings remain. */
html body .nb-header[data-notebook-header="travel"] .nb-brand:is(:hover,:focus-visible,:active)
:is(.mark,.site-mark,.brandmark,.publisher-mark,.publisher-stamp) {
  background-color: #ffd43b;
  border-color: #ffd43b;
  color: #172b36;
}
html body .nb-header .nb-brand small { display: none; }
html body .nb-header .nb-brand .nb-brand-name em { display: none; }
html body .nb-header .nb-brand .nb-brand-name {
  display: block !important;
  margin: 0;
  padding: 0;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.75 !important;
  letter-spacing: .015em !important;
  color: #172b36;
  white-space: nowrap;
}
html body .nb-header .nb-brand-divider {
  width: 1px;
  height: 21px;
  background: #cdd4d7;
  flex: 0 0 1px;
}
html body .nb-header .nb-section {
  margin: 0;
  padding: 0;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  color: #243b46;
  text-decoration: none;
}
html body .nb-header .nb-section:hover { color: #b76555; }
html body .nb-header .nb-global {
  position: static;
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 28px;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0 0 0 auto !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: none;
  opacity: 1;
  visibility: visible;
}
html body .nb-header .nb-global > a {
  display: block;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 9px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--nb-nav-color);
  font: 600 13px/1.75 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
}
html body .nb-header .nb-global > a[href="/n2/"] { --nb-nav-color: var(--jp,#214f77); }
html body .nb-header .nb-global > a[href="/learning/"] { --nb-nav-color: var(--learn,#2f776c); }
html body .nb-header .nb-global > a[href="/travel/"] { --nb-nav-color: var(--travel,#b27b00); }
html body .nb-header .nb-global > a[href="/others/"] { --nb-nav-color: var(--tool,var(--tools,#343b3a)); }
html body .nb-header .nb-global > a:is(:hover,:focus-visible,[aria-current="page"]) { border-bottom-color: currentColor; }
html body .nb-header .nb-global:not(.nav):not(.site-links) > a:is(:hover,:focus-visible) { filter: brightness(.82); }
html body .nb-header .nb-global > a::after { display: none !important; }
html body .nb-header .nb-brand > span:last-child { display: block !important; }
html body .nb-header .nb-header-actions { display: none; align-items: center; gap: 10px; flex: 0 0 auto; }
html body .nb-header .nb-theme { display: flex; align-items: center; gap: 0; }
html body .nb-header .nb-theme .theme-wrap { margin: 0; }
html body .nb-header .nb-menu { display: none; }
html body .nb-header .nb-legacy-menu { display: none !important; }
html body .nb-header .nb-local {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  min-width: 0;
  padding: 10px 0 13px;
  border-top: 1px solid #edf0f0;
  color: #455a60;
  font-size: 12px;
}
html body .nb-header .nb-local :is(.nb-local-nav,.learning-site-context,.grammar-header-copy,.reading-id) {
  position: static;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 22px;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: none;
  opacity: 1;
  visibility: visible;
}
html body .nb-header .nb-local .nb-local-nav a {
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #455a60;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
html body .nb-header .nb-local .nb-local-nav { display: flex !important; }
html body .nb-header .nb-regional {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-left: auto;
  min-width: 0;
}
html body .nb-header .nb-regional .nb-local-nav {
  position: static;
  display: flex !important;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  opacity: 1;
  visibility: visible;
}
html body .nb-header .nb-regional .nb-local-nav a {
  display: inline-flex !important;
  margin: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #455a60;
  font: 600 12px/1.75 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
html body .nb-header .nb-regional .nb-local-nav a:is(:hover,:focus-visible,[aria-current="page"],.current) { color: #172b36; text-decoration: underline; text-underline-offset: 6px; }
html body .nb-header .nb-regional :is(.search-btn,.header-search) { flex: 0 0 auto; margin: 0; white-space: nowrap; }
html body .nb-header .nb-local .nb-local-nav a:is(:hover,[aria-current="page"],.current) { color: #172b36; border-bottom-color: #b76555; }
html body .nb-header :is(.nb-brand,.nb-section,.nb-global a,.nb-local a,.nb-menu):focus-visible { outline: 2px solid #1e7580; outline-offset: 4px; }
@media (max-width: 1110px) {
  html body .nb-header .nb-brand .nb-brand-name { font-size: 12px !important; }
  html body .nb-header .nb-header-row { gap: 20px; }
  html body .nb-header .nb-global { gap: 20px; }
  html body .nb-header .nb-regional { gap: 16px; }
  html body .nb-header .nb-regional .nb-local-nav { gap: 6px 16px; }
}
@media (max-width: 1000px) {
  html body .nb-header:has(.nb-regional) .nb-header-row { flex-wrap: wrap; }
  html body .nb-header .nb-regional { order: 3; flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; margin: 0; padding: 0 0 14px; }
  html body .nb-header .nb-regional .nb-local-nav { justify-content: flex-start; }
  html body .nb-header.nb-menu-ready .nb-regional { display: none; }
  html body .nb-header.nb-menu-ready .nb-regional.nb-menu-open { display: flex; }
  html body .nb-header:has(.nb-regional) .nb-header-actions { display: flex; margin-left: auto; }
  html body .nb-header.nb-menu-ready:has(.nb-regional) .nb-menu { display: flex; }
}
html body .nb-header .nb-menu {
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 36px; height: 36px; margin: 0; padding: 7px; border: 0; border-radius: 0;
  background: transparent; color: #172b36; cursor: pointer;
}
html body .nb-header .nb-menu span { display: block; width: 18px; height: 1.5px; background: currentColor; }
@media (max-width: 700px) {
  html body .nb-header .nb-header-inner { padding-inline: 20px; }
  html body .nb-header .nb-header-row { min-height: 64px; gap: 12px; flex-wrap: wrap; }
  html body .nb-header .nb-identity { gap: 9px; min-height: 64px; }
  html body .nb-header .nb-section { font-size: 20px; }
  html body .nb-header .nb-header-actions,
  html body .nb-header .nb-header-actions:has(> .nb-menu:only-child) { display: flex; margin-left: auto; }
  html body .nb-header .nb-global { order: 3; width: 100%; margin: 0 !important; padding: 0 0 12px; justify-content: space-between; }
  html body .nb-header.nb-menu-ready .nb-global { display: none !important; }
  html body .nb-header.nb-menu-ready .nb-global.nb-menu-open { display: flex !important; }
  html body .nb-header.nb-menu-ready .nb-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #172b36;
    cursor: pointer;
  }
  html body .nb-header .nb-menu span { display: block; width: 18px; height: 1.5px; background: currentColor; }
  html body .nb-header .nb-local { gap: 8px 16px; padding-block: 9px 11px; }
  html body .nb-header .nb-local .nb-local-nav { gap: 5px 18px; }
  html body .nb-header .nb-local .learning-site-context { justify-content: space-between; gap: 8px 18px; }
}
@media (max-width: 570px) {
  html body .nb-header .nb-brand :is(.mark-wrap,.publisher-mark-wrap,.mark,.site-mark,.brandmark,.publisher-mark,.publisher-stamp,.learning-site-brand__mark,.tools-shell-mark,.notebook-brand-mark) {
    width: 29px !important; height: 29px !important; min-width: 29px; flex-basis: 29px;
  }
  html body .nb-header .nb-brand :is(.mark-shadow,.publisher-mark-shadow) { width: 29px; height: 29px; }
  html body .nb-header .nb-brand .nb-brand-name { font-size: 11px !important; letter-spacing: -.03em !important; }
  html body .nb-header .nb-identity { gap: 6px; }
  html body .nb-header .nb-section { font-size: 18px; }
  html body .nb-header .nb-header-actions { gap: 4px; }
}
@media print { html body .nb-header { display: none; } }