/* Keep long menus usable in short embedded previews and landscape phones. */
header .site-menu-panel,
header .jobs-nav-panel {
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* The complete navigation does not fit between 761px and 1024px. */
@media (max-width: 1024px) {
  header .nav { gap: 12px; }
  header .nav .brand { min-width: 0; }
  header .nav .links { flex: 0 0 auto; gap: 0; }
  header .nav .links > a:not(.nav-cta),
  header .nav .links > .jobs-nav { display: none; }
  header .nav .site-menu-panel a { display: block; }
}

@media (max-width: 760px) {
  header .nav .links > .nav-cta { display: none; }
  header .nav .brand { gap: 8px; font-size: clamp(13px, 3.8vw, 16px); }
  header .nav .brand img { width: 40px; height: 40px; flex: 0 0 40px; }
  header .site-menu > summary { min-height: 44px; }
  header .site-menu-panel {
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
  }
}


/* Matching blush-and-champagne finish for the site navigation actions. */
header .nav-cta,header .site-menu>summary{border:2px solid #e5bc7d;box-shadow:inset 0 0 0 2px #fff9,inset 0 2px 0 #fffc,0 7px 18px #130b1036;transition:transform .18s ease,filter .18s ease}
header .nav-cta{background:linear-gradient(145deg,#fff9f4 0%,#fae8df 55%,#f0d3d3 100%);color:#512d38}
header .site-menu>summary{background:linear-gradient(145deg,#fff9f4 0%,#fae8df 55%,#f0d3d3 100%);color:#512d38}
header .nav-cta:hover,header .site-menu>summary:hover{transform:translateY(-2px);filter:brightness(1.03)}
@media(prefers-reduced-motion:reduce){header .nav-cta,header .site-menu>summary{transition:none}header .nav-cta:hover,header .site-menu>summary:hover{transform:none}}
/* Keep all four mobile quick links on a single row, including narrow phones. */
@media (max-width: 760px) {
  .mobile-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: column;
  }
  .mobile-shortcuts > a {
    gap: 3px;
    padding-inline: 0;
    font-size: clamp(.68rem, 3.1vw, .86rem);
    white-space: nowrap;
  }
  .mobile-shortcuts > a svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  .mobile-shortcuts > a span {
    white-space: nowrap;
  }
}

/* Direct article links for the 求職指南與生活 menu. */
header .guide-nav-panel {
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
header .guide-nav-panel a {
  white-space: normal;
  line-height: 1.4;
}
header .guide-nav-panel .guide-index-link {
  color: #7e3148;
  font-weight: 800;
  border-bottom: 1px solid #ead0cb;
  margin-bottom: 3px;
}
header .guide-nav-panel .guide-nav-heading {
  padding: 9px 13px 3px;
  border-top: 1px solid #eddadd;
  color: #9b4d61;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
}
header .site-menu-panel .guide-subnav .guide-sub-list {
  max-height: min(42vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
header .site-menu-panel .guide-subnav .guide-sub-list .guide-nav-heading {
  display: block;
  margin: 5px 0 4px;
  padding: 7px 0 3px;
  border-top: 1px solid #eddadd;
  color: #9b4d61;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .04em;
}
header .site-menu-panel .guide-subnav .guide-sub-list .guide-index-link {
  color: #7e3148;
  font-weight: 800;
}