:root {
  --a-color: #1a73e8;
  --a-color: #1069DE;
  --a-color: #0B64D9;
  --a-color: #005A9C;
  --a-hover-color: #185abc;
  --a-hover-color: #0026ff;
  --h1-text: #1F64AA;
  --h2-text: #202124;
  --h3-text: #202124;
  --h4-text: #202124;
  --h5-text: #202124;
  --h6-text: #202124;

  --sidenav-width: 330px;
  --sidenav-width: 20.625rem;

  --brand-navy: #1b2a4a;
  --brand-accent: #3d6fd8;
  --border-soft: #e4e7ee;
  /* --page-bg: #F4F8FB; */
  --page-bg: #ebfcfd;

  --body-text: #111;
  --body-text: #1c2333;
  --muted-text: #8892a6;
  --main-content-bg: #E8FCFD;

  /* --sidenav-bg: #F4F8FB; */
  --sidenav-bg: #ebfcfd;
  --sidenav-link-bg: #F6E6C2;
  --sidenav-link-bg-hover: #E9EFF7;
  --sidenav-link-active-bg: #EAF1F5;
  --sidenav-active-bar: #F4942E;
  --sidenav-link-hover: #1F64AA;
  --sidenav-text: #333333;
  --sidenav-link-border: #A9A9A9;
  --sidenav-link-border: #C8C8C8;
  --sidenav-link-border: #d3d3d3;


/* toolbar palette */
  --toolbar-bg: #FDFDFD;
  --toolbar-text: #333333;
  --toolbar-text-hover: var(--sidenav-link-hover);
  --toolbar-icon-color: #333333;
  --toolbar-icon-hover-color: var(--sidenav-link-hover);
  --toolbar-divider-color: #e6e6e6;
  --toolbar-divider-color: #aaaaaa;
  --toolbar-btn-color: #333333;
  --toolbar-btn-bg: #FFB342;
  --toolbar-btn-bg-hover: #FAAE3D;
  --toolbar-search-bg: #f2f2f2;
  --toolbar-search-border: #d9d9d9;
  --toolbar-search-placeholder: #8a8a8a;
  --footer-divider-color: #AAA;
}

html, body {
  height: 100%;
  margin: 0;
}

/* Disable font boosting on mobile browsers */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-height: 1000000px;
}



.main-content > hr {
  width: 100%;
  margin: 1rem 0; /* Resets auto-margins and sets clean vertical spacing */
}


.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='13' viewBox='0 0 20 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.11111 13C0.7963 13 0.532596 12.896 0.320004 12.688C0.107411 12.48 0.000744572 12.2229 3.83141e-06 11.9167C-0.000736909 11.6104 0.10593 11.3533 0.320004 11.1453C0.534078 10.9373 0.797781 10.8333 1.11111 10.8333H18.8889C19.2037 10.8333 19.4678 10.9373 19.6811 11.1453C19.8944 11.3533 20.0007 11.6104 20 11.9167C19.9993 12.2229 19.8926 12.4803 19.68 12.6891C19.4674 12.8978 19.2037 13.0014 18.8889 13H1.11111ZM1.11111 7.58333C0.7963 7.58333 0.532596 7.47933 0.320004 7.27133C0.107411 7.06333 0.000744572 6.80621 3.83141e-06 6.49999C-0.000736909 6.19377 0.10593 5.93666 0.320004 5.72866C0.534078 5.52066 0.797781 5.41666 1.11111 5.41666H18.8889C19.2037 5.41666 19.4678 5.52066 19.6811 5.72866C19.8944 5.93666 20.0007 6.19377 20 6.49999C19.9993 6.80621 19.8926 7.06369 19.68 7.27241C19.4674 7.48113 19.2037 7.58477 18.8889 7.58333H1.11111ZM1.11111 2.16666C0.7963 2.16666 0.532596 2.06266 0.320004 1.85466C0.107411 1.64666 0.000744572 1.38955 3.83141e-06 1.08333C-0.000736909 0.77711 0.10593 0.52 0.320004 0.312C0.534078 0.104 0.797781 0 1.11111 0H18.8889C19.2037 0 19.4678 0.104 19.6811 0.312C19.8944 0.52 20.0007 0.77711 20 1.08333C19.9993 1.38955 19.8926 1.64703 19.68 1.85575C19.4674 2.06447 19.2037 2.16811 18.8889 2.16666H1.11111Z' fill='black'/%3E%3C/svg%3E");
}
.navbar-toggler:focus .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='13' viewBox='0 0 20 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.11111 13C0.7963 13 0.532596 12.896 0.320004 12.688C0.107411 12.48 0.000744572 12.2229 3.83141e-06 11.9167C-0.000736909 11.6104 0.10593 11.3533 0.320004 11.1453C0.534078 10.9373 0.797781 10.8333 1.11111 10.8333H18.8889C19.2037 10.8333 19.4678 10.9373 19.6811 11.1453C19.8944 11.3533 20.0007 11.6104 20 11.9167C19.9993 12.2229 19.8926 12.4803 19.68 12.6891C19.4674 12.8978 19.2037 13.0014 18.8889 13H1.11111ZM1.11111 7.58333C0.7963 7.58333 0.532596 7.47933 0.320004 7.27133C0.107411 7.06333 0.000744572 6.80621 3.83141e-06 6.49999C-0.000736909 6.19377 0.10593 5.93666 0.320004 5.72866C0.534078 5.52066 0.797781 5.41666 1.11111 5.41666H18.8889C19.2037 5.41666 19.4678 5.52066 19.6811 5.72866C19.8944 5.93666 20.0007 6.19377 20 6.49999C19.9993 6.80621 19.8926 7.06369 19.68 7.27241C19.4674 7.48113 19.2037 7.58477 18.8889 7.58333H1.11111ZM1.11111 2.16666C0.7963 2.16666 0.532596 2.06266 0.320004 1.85466C0.107411 1.64666 0.000744572 1.38955 3.83141e-06 1.08333C-0.000736909 0.77711 0.10593 0.52 0.320004 0.312C0.534078 0.104 0.797781 0 1.11111 0H18.8889C19.2037 0 19.4678 0.104 19.6811 0.312C19.8944 0.52 20.0007 0.77711 20 1.08333C19.9993 1.38955 19.8926 1.64703 19.68 1.85575C19.4674 2.06447 19.2037 2.16811 18.8889 2.16666H1.11111Z' fill='%231F64AA'/%3E%3C/svg%3E");
}

@media print { .navbar-toggler { display: none !important; } }

/* expand/collapse +/- indicator */
.toggle-icon { 
  flex: 0 0 auto;
  width: 1rem;
  text-align: center;
  font-weight: 700;
}

.toggle-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.toggle-icon::before,
.toggle-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.toggle-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 16 14.286' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.857 8.2857h-13.714c-0.30311 0-0.5938-0.12041-0.80812-0.33474-0.21433-0.21432-0.33474-0.50501-0.33474-0.80812 0-0.3031 0.12041-0.59379 0.33474-0.80812 0.21433-0.21433 0.50502-0.33474 0.80812-0.33474h13.714c0.3031 0 0.5938 0.12041 0.8082 0.33474 0.2143 0.21433 0.3347 0.50502 0.3347 0.80812 0 0.30311-0.1204 0.5938-0.3347 0.80812-0.2144 0.21433-0.5051 0.33474-0.8082 0.33474z' style='fill:%231f64aa'/%3E%3C/svg%3E%0A");
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.3s ease-in-out;
  transition-delay: 0.05s;
}

.toggle-icon::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8571 9.14286H9.14286V14.8571C9.14286 15.1602 9.02245 15.4509 8.80812 15.6653C8.59379 15.8796 8.30311 16 8 16C7.6969 16 7.40621 15.8796 7.19188 15.6653C6.97755 15.4509 6.85714 15.1602 6.85714 14.8571V9.14286H1.14286C0.839753 9.14286 0.549063 9.02245 0.334735 8.80812C0.120408 8.59379 0 8.30311 0 8C0 7.6969 0.120408 7.40621 0.334735 7.19188C0.549063 6.97755 0.839753 6.85714 1.14286 6.85714H6.85714V1.14286C6.85714 0.839753 6.97755 0.549062 7.19188 0.334735C7.40621 0.120407 7.6969 0 8 0C8.30311 0 8.59379 0.120407 8.80812 0.334735C9.02245 0.549062 9.14286 0.839753 9.14286 1.14286V6.85714H14.8571C15.1602 6.85714 15.4509 6.97755 15.6653 7.19188C15.8796 7.40621 16 7.6969 16 8C16 8.30311 15.8796 8.59379 15.6653 8.80812C15.4509 9.02245 15.1602 9.14286 14.8571 9.14286Z' fill='%231F64AA'/%3E%3C/svg%3E%0A");
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.3s ease-in-out;
}

.sidenav-link.collapsed .toggle-icon::before {
  clip-path: inset(50% 0 50% 0);
}

.sidenav-link.collapsed .toggle-icon::after {
  clip-path: inset(0 0 0 0);
}


/* Adjustment when manual font size enlargement in browser */
@media (min-width: 992px) and (max-width: 80em) {
  .toolbar-rest {
    flex:1 1 100%;
  }
  .toolbar-rest > .toolbar-item {
    flex: 0 0 auto;
  }
}

html { font-size: 100%; }
@media (min-width: 360px) {
  html { font-size: 112.5%; }
}
@media (min-width: 992px) {
  html { font-size: 100%; }
}




body {
  background: var(--page-bg);
  color: var(--body-text);
}

body, .eml-text {
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, Helvetica, sans-serif, Roboto, "Segoe UI", "Helvetica Neue", "Noto Sans", "Microsoft JhengHei", "Microsoft YaHei", "Heiti TC", "PMingLiU", "MingLiU";
}

:lang(zh-Hant) {
  font-family: "Microsoft JhengHei", "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Heiti TC", "Noto Sans SC", Arial, "Microsoft YaHei", "PMingLiU", "MingLiU", sans-serif, "Segoe UI", "Helvetica Neue", "Noto Sans", "Segoe UI Symbol";
}

:lang(zh-Hans) {
  font-family: "Microsoft JhengHei", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Heiti TC", "Noto Sans TC", Arial, "Microsoft YaHei", "PMingLiU", "MingLiU", sans-serif, "Segoe UI", "Helvetica Neue", "Noto Sans", "Segoe UI Symbol";
}

a {
  text-underline-offset: 0.25em;
  text-underline-offset: 0.3em;
  color: var(--a-color);
}

a:hover {
  color: var(--a-hover-color);
}

h1 {
  font-size: 2rem;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--h1-text);
}

h2 {
  font-size: 1.3125rem;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.83rem;
  color: var(--h2-text);
  text-underline-offset: 0.25em;
}

h3 {
  font-size: 1.10rem;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--h3-text);
}

h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 1.33rem;
  color: var(--h4-text);
}

h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--h5-text);
}

.tnw {
  white-space: nowrap;
}

.eml .dropdown-menu {
  padding: 0;
}

.eml .dropdown-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.eml .dropdown-menu li:not(:last-child) {
  border-bottom: 2px solid #E9EFF7;
}

.eml a.dropdown-item:hover, .eml a.dropdown-item:focus {
  color: var(--sidenav-link-hover);
}

/*
.eml .dropdown-item.active, .eml .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #1F64AA;
}
*/

.link-list a:not(:has(img)) {
  box-decoration-break: clone;
  text-underline-offset: 0.3em;
  padding: 0.225em 0.1em;
  margin: -0.225em -0.1em;
}

.toolbar-item a {
  /* padding: 0 0.15em; */
}

/* 
@media (min-width: 992px){
.main-content {
    border-radius: 30px;
  }
}
 */

.page-heading {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 2px solid #E9EFF7;
  border-bottom: 2px solid #CBD1E3;
  border-bottom: 2px solid #5BA0E6;
  border-bottom: 2px solid #B0C4DE;
  border-bottom: 2px solid #5BA0E6;
  border-bottom: 2px solid #7eb3e8;
  border-bottom: 2px solid #a0c6ee;
  border-bottom: 2px solid #b0d0f1;
}

/* WCAG 2.4.1 Bypass Blocks — visually hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: #fff;
  color: var(--brand-navy);
  background: #C13E17;
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--sidenav-link-hover);
}

.skip-link:focus {
  left: .75rem;
  top: .75rem;
  box-shadow: 0 0 0.2rem 0.3rem var(--sidenav-link-hover);
}

.skip-link:hover {
  color: #fff;
}

/* ============================================================
   OUTER WRAPPER
   Mobile  = flex column, min-height: 100vh so main-content can
             grow to fill the device height.
   Desktop = CSS Grid; .main-collapse becomes display: contents
             so its children (toolbar / side-nav) drop straight
             into named grid areas. Same one set of markup for
             toolbar, banner and nav links in both modes.
============================================================ */
.page-grid {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 0;
}

/* ---------- Banner (always full width) ---------- */
.site-hero {
  width: 100%;
  color: #fff;
  text-align: center;
  flex: 0 0 auto;
  padding: 0;
}

@media (min-width: 992px) {
  .site-hero {
    margin-bottom: 20px;
  }
}

.site-hero img {
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .site-hero img {
     border-radius: 0 0 30px 30px;
  }
}

/* ---------- Brand / hamburger row (mobile only) ----------
  Hamburger now first (left), brand second (right).        */
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  padding: .6rem 1rem;
  flex: 0 0 auto;
}

.brand-row .navbar-brand {
  font-weight: 700;
  color: var(--brand-navy);
  margin: 0;
  order: 2;
}

.navbar-toggler {
  border-color: var(--border-soft);
  order: 1;
}

/* ---------- Collapse wrapper (mobile: toggled by Bootstrap JS) ---------- */
.main-collapse {
  background: #fff;
  flex: 0 0 auto;
}

/* toolbar row — the extra row shown ABOVE the 4 menu items on mobile */
.toolbar-row {
  background: var(--toolbar-bg);
  padding: .75rem 1rem;
}

/* Mobile: button (own full row) -> toolbar-rest (own full row, itself
   split into a search row + a flowing "rest of items" row).
   Desktop: button and toolbar-rest both try to sit on the SAME row;
   toolbar-rest (search + the other 5 items, as one unit) wraps to its
   own new line only once it no longer fits beside the button — it
   does not fall apart item-by-item. Search rejoins the flowing group
   on desktop instead of keeping its own row.                          */

.toolbar-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  gap: 0.5rem;
}

.toolbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-icon {
  display: inline-block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1rem;
  height: 1rem;
  margin-right: .8rem;
}

.toolbar-item-button {
  flex: 0 0 100%;
  width: 100%;
  justify-content: flex-start;
}

@media (min-width: 992px) {
  .toolbar-item-button {
    flex: 0 0 auto;
    width: auto;
    margin-right: 1rem;
  }
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: .3rem 1rem .25rem;
  background: var(--toolbar-btn-bg);
  color: var(--toolbar-btn-color);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  white-space: normal;
  border-radius: 10px;
  width: auto;
}

@media (min-width: 992px) {
  :lang(en) .toolbar-btn {
    max-width: 15rem;
  }
}

.toolbar-btn:hover, .toolbar-btn:focus {
  background: var(--toolbar-btn-bg-hover);
  color: var(--toolbar-btn-color);
  text-decoration: none;
}

.toolbar-print a, .toolbar-sitemap a, .toolbar-langs a, .toolbar-dropdown-toggle.a, .toolbar-textsize a {
  /* padding: 0 0.2em; */
  padding: 0;
}

/* ---- toolbar-rest: search + the other 5 items, treated as ONE
   wrapping unit. Full width on mobile (its own row below the button).
   On desktop it shares the row with the button, but flex-shrink: 0
   means it is never squeezed — if its natural (unshrunk) width
   doesn't fit next to the button, it wraps to a new line in full,
   leaving the button standing alone.                                 */

.toolbar-rest {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

@media (min-width: 992px) {
  .toolbar-rest {
    flex: 1 0 auto; /* grow into extra space, but never shrink below natural content width */
    align-items: center;
  }
}

/* items inside toolbar-rest: natural size and left-aligned on mobile
   (so anything that wraps to a second/third line — Site Map onward —
   packs to the left instead of stretching); fill available space on
   desktop, as before */

.toolbar-rest > .toolbar-item {
  flex: 0 0 auto;
  padding: .3rem 0; /* vertical only — horizontal spacing comes from the divider's own margin */
}
@media (min-width: 992px) {
  .toolbar-rest > .toolbar-item { flex: 1 1 auto; }
}

/* generic divider element placed between items, with equal
   leading/trailing space on both sides so every item is separated the
   same way regardless of its own content. align-self: center keeps it
   vertically centered against the neighbouring link text within the
   shared flex line. */

.toolbar-divider {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  min-width: 1px;
  height: 16px;
  /* margin: 0; */
  margin: 0 16px;
  background: var(--toolbar-divider-color);
}

/* the search/print divider only makes sense once search rejoins the
   flowing row on desktop; on mobile search has its own full row
   within toolbar-rest, so this divider stays hidden */

.toolbar-divider-search-print {
  display: none;
}
@media (min-width: 992px) {
  .toolbar-divider {
    margin: 0;
  }
  .toolbar-divider-search-print {
    display: block;
	margin-left: 20px;
  }
}

@media (min-width: 1200px) {
  .toolbar-divider-search-print {
	margin-left: 28px;
  }
}

/* plain text links: no padding on the linked text itself. Print this
   page, Site Map and Text Size all use this class, and underline on
   hover/focus. */

.toolbar-link {
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  color: var(--toolbar-text);
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.toolbar-link:hover, .toolbar-link:focus, 
.toolbar-btn:hover, .toolbar-btn:focus {
  color: var(--toolbar-text-hover);
  text-decoration: underline;
}

/* search form — no decorative icon on the item itself; full width of
   its own row within toolbar-rest on mobile, natural width once
   merged into the flowing desktop row */

.toolbar-item.toolbar-search { 
  flex: 0 0 100%;
  width: 100%;
  background-color: var(--toolbar-search-bg);
  padding: .25rem .5rem;
  border-radius: 10px;
	margin-bottom: .5rem;
}

.toolbar-search-form {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.toolbar-search-input {
  flex: 1 1 auto;
  min-width: 70px;
  width: 100%;
  background: var(--toolbar-search-bg);
  /* border: 1px solid var(--toolbar-search-border); */
  border: none;
  color: var(--toolbar-text); font-size: 1rem;
  padding: .3rem .55rem;
}
.toolbar-search-input::placeholder {
   color: var(--toolbar-search-placeholder);
}
.toolbar-search-submit {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  padding: .2rem;
  color: var(--toolbar-icon-color);
  cursor: pointer;
  line-height: 0;
}
.toolbar-search-submit:hover, .toolbar-search-submit:focus {
  color: var(--toolbar-icon-hover-color);
}
.toolbar-search-submit svg {
  width: 15px;
  height: 15px;
}
@media (min-width: 992px) {
  .toolbar-item.toolbar-search {
    flex: 1 1 auto;
    width: auto;
    margin-bottom: 0;
  }
  .toolbar-search-form {
    width: auto;
  }
  .toolbar-search-input {
    width: auto;
  }
}

.toolbar-langs {
  gap: 1rem;
}
.toolbar-langs a {
  color: var(--toolbar-text);
  font-size: 1rem;
  text-decoration: none;
}
.toolbar-langs a:hover, .toolbar-langs a:focus {
  color: var(--toolbar-text-hover);
  text-decoration: underline;
}
.toolbar-langs .lang-sep {
  color: var(--toolbar-divider-color);
}

:lang(en) #lang-toggle-eng {
  display: none;
}
:lang(zh-Hant) #lang-toggle-chi {
  display: none;
}
:lang(zh-Hans) #lang-toggle-sim {
  display: none;
}

/* Other Languages dropdown (the toggle itself is not underlined; the menu items are) */
.toolbar-dropdown {
  position: relative;
}
.toolbar-dropdown a {
  text-decoration: none;
}
.toolbar-dropdown-toggle {
  background: none; 
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  color: var(--toolbar-text);
  font-size: 1rem;
  cursor: pointer;
}
.toolbar-dropdown-toggle:hover, .toolbar-dropdown-toggle:focus {
  color: var(--toolbar-text-hover);
}

.toolbar-chevron {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: .35rem;
  background-image: url("data:image/svg+xml,%3Csvg style='fill: none' version='1.1' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 5.5038 5 5 5-5' style='stroke-linecap: round;stroke-linejoin: round;stroke-width: 1.5;stroke: %23616161'/%3E%3C/svg%3E");
  transition: transform .15s ease;
}

.toolbar-dropdown-toggle:hover .toolbar-chevron,
.toolbar-dropdown-toggle:focus .toolbar-chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F64AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.toolbar-dropdown.show .toolbar-chevron {
  transform: rotate(180deg);
}

.toolbar-dropdown-menu {
  font-size: 1rem;
  min-width: 9rem;
  padding: .3rem 0;
}

.toolbar-dropdown-menu .dropdown-item {
  font-size: 1rem;
  padding: .6rem 1rem .4rem;
}

.toolbar-dropdown-menu .dropdown-item:hover,
.toolbar-dropdown-menu .dropdown-item:focus {
  text-decoration: underline;
}

/* hide "Print this page" (and its divider) below the desktop breakpoint */
@media (max-width: 991.98px) {
  .toolbar-print, .toolbar-divider-print {
    display: none;
  }
}

/* ---------- side navigation ---------- */
.sidenav-row {
  background: var(--sidenav-bg);
}

.sidenav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidenav-item {
  position: relative;
}

/* item separators, same technique as the first set of codes */
.sidenav-item + .sidenav-item {
  border-top: 2px solid var(--sidenav-link-border);
}

.sidenav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  min-height: 3rem;
  padding: .5rem 1.5rem .5rem 1.85rem;
  background: var(--sidenav-link-bg);
  color: var(--sidenav-text);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

:lang(zh) .sidenav-link, :lang(zh) .submenu-links a {
  font-size: 1rem;
}


.sidenav-link:hover,
.sidenav-link:focus {
  color: var(--sidenav-link-hover);
  background: var(--sidenav-link-bg-hover);
  text-decoration: none;
  /* elevate above the next sidenav-item's border-top, which otherwise
     paints over the bottom edge of this link's hover/focus indicator
     since it belongs to a later sibling in normal document flow */
  z-index: 2;
}

.sidenav-link:focus {
  /* Custom colored outline removed — a plain (e.g. mouse-click) focus
     no longer shows one. Keyboard-triggered focus still gets a clear
     indicator below, via :focus-visible. */
  outline: none;
}

.sidenav-link:focus-visible {
  /* Restores the browser's own native focus ring (rather than our
     custom color) specifically for keyboard navigation. */
  outline: revert;
  z-index: 2;
}

.sidenav-link.active {
  background: var(--sidenav-link-active-bg);
}


.sidenav-link, .submenu-links a {
  border-left: 6px solid transparent;
}

.sidenav-link.active, .submenu-links a.active  {
  border-left: 6px solid var(--sidenav-active-bar);
}



.link-main { display: flex; align-items: center; gap: .6rem; min-width: 0; }

/* ---- icon classes, combined with .link-text ----
 .nav-icon        = reserves the space for the icon (generic, shared)
 .nav-icon-*       = supplies the actual glyph as an encoded SVG
                        background-image, ready in CSS (no markup needed)
   Hover/focus swap in a second, differently-coloured encoded SVG so the
   icon recolours together with the text.                                */

.link-text {
  line-height: 1.5;
  padding-top: .1875rem;
}

:lang(zh) .link-text {
  padding-top: .15625rem;
}

.nav-icon {
  display: inline-block;
  padding-left: 2.5rem;      /* reserved space for the icon */
  padding-left: 2.75rem;      /* reserved space for the icon */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 26px 26px;
  min-height: 26px;           /* ensures the box is tall enough that
                               .link-text's overflow: hidden doesn't
                                 clip the top/bottom of the icon */
  background-size: 1.625rem 1.625rem;
  min-height: 1.625rem;
}

/* submenu item separators */
.submenu-links li + li { 
  border-top: 1px solid var(--border-soft);
}

/* submenu — margin removed on the collapse element itself: margin on a
   collapsing element isn't included in Bootstrap's measured scrollHeight,
   which is what caused the visible jump/shift once the expand transition
   finished and height switched to "auto". Padding is used instead, since
   padding IS part of the measured box and animates cleanly. */
.submenu-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.submenu-links a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  /* padding: .6rem 1rem .6rem 2.6rem; */
  padding: .6rem 3rem .4rem 4.6rem;
  background-color: rgba(246,230,194,.55);
  color: var(--sidenav-text);
  font-size: .875rem;
  /* font-weight: 500; */
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 992px) {
  .sidenav-link { min-height: 4rem; }
  .submenu-links a { min-height: 3.8125rem; }
}

.submenu-links a:hover,
.submenu-links a:focus {
  color: var(--sidenav-link-hover);
  background: rgba(255,255,255,.8);
  text-decoration: none;
  /* elevate above adjacent borders (the next submenu item's border-top,
     or the following top-level sidenav-item's border-top once this is
     the last submenu link) — same reasoning as .sidenav-link above */
  z-index: 2;
}
.submenu-links a:focus { outline: none; }
.submenu-links a:focus-visible { outline: revert; position: relative }

@media (min-width: 992px) {
  .sidenav-link { min-height: 4rem; }
}

/* ---------- Main content ---------- */
.main-content {
  padding: 1.25rem;
  background: var(--main-content-bg);
  flex: 1 1 auto; /* mobile: grow to fill remaining viewport height */
  display: flex;
  flex-direction: column;
}

.main-content .placeholder-block {
  border: 1px dashed var(--border-soft);
  border-radius: .5rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted-text);
  margin-bottom: 1rem;
}

/* ---------- main-content footer ----------
   Sits at the left edge of the content column and is pushed down to
   the bottom of main-content via margin-top: auto (main-content is a
   flex column) — this is a flow-based push, not position: fixed, so
   the footer scrolls with the page and only sits at the very bottom
   when the content above it is shorter than the available height. */

.main-footer {
  padding-top: 60px;
  margin-top: auto;
}

.footer-text-section {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.5rem;
  padding-top: .25rem;
  font-size: .875rem;
  color: var(--muted-text);
  padding-bottom: 10px;
}

.footer-nav {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.footer-divider {
  flex: 0 0 auto;
  width: 1px;
  min-width: 1px;
  height: 16px;
  background: var(--footer-divider-color);
}

.footer-link {
  color: var(--body-text);
  text-decoration: none;
}

.footer-link:hover, .footer-link:focus {
  color: var(--sidenav-link-hover);
  text-decoration: underline;
}

.footer-copyright { color: var(--body-text); }
.text-revision-date { color: var(--body-text); }

/* ---------- promotional banners (injected by JS) ---------- */
.promo-section-mobile,
.promo-section-desktop {
  margin: 1.5rem 0;
  margin: 2rem 0 .5rem;
}
.promo-social,
.promo-standard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}
.promo-social + .promo-standard {
  margin-top: 1rem;
  margin-top: 0;
}
.promo-social span {
  font-size: 16px;
  font-weight: 400;
  color: var(--body-text);
}
.promo-social img, promo-standard img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .promo-standard img {
    width: 120px;
  }
}

/* ---------- publicity image gallery ---------- */
.publicity-image {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.25rem 0;
}
.gallery-link {
  display: inline-block;
  /* line-height: 0;  avoids the small inline-image gap under the thumbnail */
}
.gallery-link img {
  max-width: 100%;
  height: auto;   /* thumbnails share a fixed width; height varies with each image's own aspect ratio */
  display: block;
}
.gallery-link:hover img,
.gallery-link:focus img {
  outline: 3px solid var(--a-color);
  outline-offset: 2px;
}

/* Publicity image gallery fullsize image modal */
#galleryModal .modal-body {
  text-align: center;
  /* min-height is set/removed dynamically per image via JS — see the
     gallery script: it's calculated from the real fullsize dimensions
     before the modal opens, then cleared once the image has finished
     loading and is occupying that exact space on its own. */
}

#galleryModal .modal-body img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991.98px) {
  /* 90% of the dynamic viewport width on mobile — dvw tracks the
     real visible viewport as mobile browser chrome shows/hides,
     with vw kept as a fallback for browsers without dvw support */
  #galleryModal .modal-dialog {
    width: 90vw;
    width: 90dvw;
    max-width: 90vw;
    max-width: 90dvw;
  }
}

#galleryModal .modal-dialog {
  max-width: 960px;
}

@media (max-width: 575.98px) {
  /* Below 576px, Bootstrap's own base rule sets margin: 0.5rem (fixed,
     not auto) on .modal-dialog — fine for its default width: auto
     (which just fills the remaining space symmetrically), but once
     we give the dialog an explicit width above, that fixed margin no
     longer centers it: the leftover space all lands on one side.
     Switching to left/right auto restores true centering. */
  #galleryModal .modal-dialog {
    margin-left: auto;
    margin-right: auto;
  }
}

#galleryModal .modal-header {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-bottom: none;
  gap: 2rem;
}

#galleryModal .modal-header h4 {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
  color: var(--body-text);
}

#galleryModal .modal-header .close {
  padding: .2rem .15rem;
  margin: -.2rem -.2rem -.2rem auto;
}

/* ============================================================
   DESKTOP (≥992px) — re-flow the SAME markup with CSS Grid
   ============================================================ */
@media (min-width: 992px) {

  .brand-row { display: none; }

  .page-grid {
    display: grid;
    grid-template-columns: var(--sidenav-width) 1fr;
    grid-template-rows: auto auto 1fr; /* 3rd row fills remaining device height */
    grid-template-areas: 
      "toolbar toolbar"
      "banner  banner"
      "sidenav content";

    min-height: 100vh;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 0;
  }

  .site-hero { grid-area: banner; }

  .main-collapse {
    display: contents !important;
  }

  .toolbar-row { grid-area: toolbar; }
  /* .toolbar-links { padding: 0 1rem; } */
  .toolbar-links {
    padding: 0 0 0 1rem;
    align-items: center;
	max-width: 1180px;
	margin-left: auto;
  }

  .toolbar-row {
    width: 100%;
  }

  .sidenav-row {
    grid-area: sidenav;
    /* grid row (1fr, min-height: 100vh) stretches this to match
       main-content's height, and both extend to fill the device */
  }

  .main-content {
    grid-area: content;
    padding: 60px 40px 20px 40px;
  }
}