/* =============================================================================
   WANDA MM2H - navigation & footer styling
   Footer V1 "Concierge" (layouts 75/671/915) + Mega Menu V2 "Intent Columns"
   Approved by Lee 2026-08-07. Loaded site-wide by wanda-nav.php.

   The footer content is Divi modules whose look is driven ENTIRELY from here
   (classes wf-*), so the layout JSON stays minimal and the client keeps editing
   links in Appearance -> Menus. Selectors carry the `html body` prefix +
   !important where Divi's own module CSS (or the site's zh 18px rule) would
   otherwise win - same proven pattern as wanda-faq.css.
   ============================================================================= */

html body {
  --wn-brand:      #0A558A;
  --wn-brand-deep: #0A3E63;
  --wn-navy:       #062A44;
  --wn-gold:       #BCAC75;
  --wn-line:       #E1EAF2;
}

/* =============================================================================
   FOOTER - shared plumbing
   ============================================================================= */

/* Divi gives every module a 30px bottom margin - the footer does its own spacing */
html body .et-l--footer .et_pb_module { margin-bottom: 0 !important; }

/* section paddings per layer (Divi default is 4% top/bottom) */
html body .et-l--footer .wf-contact.et_pb_section { padding: 26px 0 !important; }
html body .et-l--footer .wf-main.et_pb_section    { padding: 50px 0 44px !important; }
html body .et-l--footer .wf-legal.et_pb_section   { padding: 15px 0 !important; }

/* =============================================================================
   FOOTER layer 1 - the contact strip
   ============================================================================= */

html body .et-l--footer .wf-contact .et_pb_column {
  display: flex !important;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

html body .et-l--footer .wf-contact .et_pb_text:first-child { flex: 1 1 250px; }

html body .et-l--footer .wf-lead strong {
  display: block;
  font-size: 15.5px !important;
  font-weight: 800;
  letter-spacing: -.2px;
  text-transform: uppercase;
  color: #FFFFFF !important;
  line-height: 1.35;
}
html body .et-l--footer .wf-lead span {
  display: block;
  font-size: 12px !important;
  color: #FFFFFF !important;
  opacity: .85;
  margin-top: 4px;
}

/* channels: VALUE prominent on top, muted label under (the mega Talk-column
   pattern), hairline separators between blocks. Mobile+WhatsApp share one
   block - the old strip printed the same number twice. */
html body .et-l--footer .wf-ways {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
}
html body .et-l--footer .wf-ch {
  text-decoration: none !important;
  display: block;
  padding: 2px 24px;
}
html body .et-l--footer .wf-ch:first-child { padding-left: 0; }
html body .et-l--footer .wf-ch + .wf-ch {
  border-left: 1px solid rgba(255,255,255,.22);
}
html body .et-l--footer .wf-ch-v {
  display: block;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .2px;
  color: #FFFFFF !important;
  line-height: 1.3;
}
html body .et-l--footer .wf-ch-l {
  display: block;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #FFFFFF !important;
  opacity: .65;
  margin-top: 3px;
}
html body .et-l--footer a.wf-ch:hover .wf-ch-v { text-decoration: underline; }

/* the Contact pill - house btn-primary, Divi arrow killed */
html body .et-l--footer .wf-contact .et_pb_button_module_wrapper { text-align: right; }
html body #page-container .et-l--footer .wf-contact .et_pb_button {
  background-color: #FFFFFF !important;
  color: var(--wn-brand) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
html body #page-container .et-l--footer .wf-contact .et_pb_button:after,
html body #page-container .et-l--footer .wf-contact .et_pb_button:hover:after {
  content: none !important;
  display: none !important;
}
html body #page-container .et-l--footer .wf-contact .et_pb_button:hover {
  background-color: #FFFFFF !important;
  color: var(--wn-brand) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  padding: 13px 28px !important;
}

/* =============================================================================
   FOOTER layer 2 - brand + menu columns
   ============================================================================= */

html body .et-l--footer .wf-logo {
  font-size: 19px !important;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFFFFF !important;
}
html body .et-l--footer .wf-logo span { color: var(--wn-gold) !important; }

html body .et-l--footer .wf-pos {
  font-size: 12.5px !important;
  line-height: 1.75 !important;
  color: #FFFFFF !important;
  opacity: .78;
  margin-top: 12px;
  max-width: 270px;
}

html body .et-l--footer .wf-lic {
  margin-top: 18px;
  border: 1px solid rgba(188,172,117,.45);
  border-radius: 10px;
  padding: 12px 14px;
  max-width: 270px;
}
html body .et-l--footer .wf-lic strong {
  display: block;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wn-gold) !important;
  margin-bottom: 5px;
}
html body .et-l--footer .wf-lic span {
  display: block;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #FFFFFF !important;
  opacity: .85;
}

/* column heading */
html body .et-l--footer h6.wf-h {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--wn-gold) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* the Divi Menu module, restyled from a horizontal nav into a footer list.
   The module ships a WHITE background by default - kill it or the column
   renders as a blank white box with white links inside. */
html body .et-l--footer .wf-main .et_pb_menu,
html body .et-l--footer .wf-main .et_pb_menu .et_pb_menu_inner_container {
  background-color: transparent !important;
  box-shadow: none !important;
}
html body .et-l--footer .wf-main .et_pb_menu .et_mobile_nav_menu { display: none !important; }
html body .et-l--footer .wf-main .et_pb_menu,
html body .et-l--footer .wf-main .et_pb_menu__wrap,
html body .et-l--footer .wf-main .et_pb_menu__menu { display: block !important; }
html body .et-l--footer .wf-main .et_pb_menu ul.et-menu {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body .et-l--footer .wf-main .et_pb_menu ul.et-menu > li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  word-wrap: normal;
}
/* the module carries et_pb_text_align_right-tablet/-phone by default - the
   footer lists stay left-aligned at every width */
html body .et-l--footer .wf-main .et_pb_menu,
html body .et-l--footer .wf-main .et_pb_menu ul.et-menu,
html body .et-l--footer .wf-main .et_pb_menu ul.et-menu > li {
  text-align: left !important;
}
html body .et-l--footer .wf-main .et_pb_menu ul.et-menu > li > a {
  display: block !important;
  padding: 5.5px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #FFFFFF !important;
  opacity: .82;
  text-decoration: none !important;
  transition: opacity .15s ease, padding-left .15s ease;
}
html body .et-l--footer .wf-main .et_pb_menu ul.et-menu > li > a:hover {
  opacity: 1;
  padding-left: 4px !important;
}

/* =============================================================================
   FOOTER layer 3 - legal bar
   ============================================================================= */

html body .et-l--footer .wf-legal-in {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
}
html body .et-l--footer .wf-co {
  font-size: 11.5px !important;
  color: #FFFFFF !important;
  opacity: .6;
  flex: 1 1 320px;
  text-align: left !important;
}
html body .et-l--footer .wf-legal .et_pb_text_inner { text-align: left !important; }
html body .et-l--footer .wf-ll a {
  font-size: 11.5px !important;
  color: #FFFFFF !important;
  opacity: .6;
  text-decoration: none !important;
  margin-right: 14px;
}
html body .et-l--footer .wf-ll a:hover { opacity: 1; }
html body .et-l--footer .wf-langs {
  display: inline-flex;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 3px;
}
html body .et-l--footer .wf-langs a.wf-lang {
  font-size: 11px !important;
  color: #FFFFFF !important;
  opacity: .7;
  text-decoration: none !important;
  padding: 4px 12px;
  border-radius: 999px;
}
html body .et-l--footer .wf-langs a.wf-lang:hover { opacity: 1; }
html body .et-l--footer .wf-langs a.wf-on {
  background: rgba(255,255,255,.14);
  opacity: 1;
}

/* =============================================================================
   FOOTER responsive
   ============================================================================= */

@media (max-width: 980px) {
  /* Divi stacks the 1_4 columns; tighten the stack */
  html body .et-l--footer .wf-main.et_pb_section { padding: 40px 0 30px !important; }
  html body .et-l--footer .wf-main .et_pb_column { margin-bottom: 26px !important; }
  html body .et-l--footer .wf-main .et_pb_column:last-child { margin-bottom: 0 !important; }
  html body .et-l--footer .wf-contact .et_pb_button_module_wrapper { text-align: left; }
}

@media (max-width: 560px) {
  /* stacked blocks - a wrapped border-left reads as a stray line */
  html body .et-l--footer .wf-ways { gap: 0; display: block; }
  html body .et-l--footer .wf-ch { padding: 7px 0; }
  html body .et-l--footer .wf-ch + .wf-ch { border-left: 0; }
  html body .et-l--footer .wf-legal-in { gap: 10px; }
  html body .et-l--footer .wf-co { flex-basis: 100%; }
}

/* =============================================================================
   MEGA MENU - "Intent Columns" (Max Mega Menu on the primary menus)
   MMM's compiled CSS runs at two-ID strength (#mega-menu-wrap-... #mega-menu-...),
   so every rule here carries the same two IDs. All three languages share the
   wrap id mega-menu-wrap-primary-menu (Polylang swaps the menu, not the location).
   ============================================================================= */

/* the wrap goes static so the panel can span the full fixed header */
html body #mega-menu-wrap-primary-menu {
  position: static !important;
  background: transparent !important;
}

/* ---- top-level bar: match the site's Divi menu look ---- */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #313131 !important;
  background: transparent !important;
  text-transform: none !important;
  line-height: 40px !important;
  height: 40px !important;
  padding: 0 13px !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:hover,
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-current-menu-item > a.mega-menu-link,
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-current-menu-ancestor > a.mega-menu-link {
  color: #0A558A !important;
  background: transparent !important;
}

/* Contact = the action pill (menu-cta class on the item; Apply stays plain) */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.menu-cta > a.mega-menu-link {
  background: #0A558A !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  height: auto !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  margin: 0 0 0 8px;
  transition: background .2s ease, transform .2s ease;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.menu-cta > a.mega-menu-link:hover {
  background: #0A3E63 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* ---- the mega panel: full-bleed white sheet under the header.
   Every positioned ancestor between the panel and #main-header goes static, so
   the absolute panel anchors to the fixed full-width header itself - left:0 /
   right:0 then spans the real viewport with no 100vw/scrollbar drift.
   (The first margin-left:-50vw attempt anchored to Divi's centered .container
   and shifted the whole panel ~190px right, clipping the Talk column.) ---- */
/* Desktop only: on mobile the panel is an in-flow stacked list and Divi's
   absolutely-positioned .logo_container needs .container to stay relative
   (statically-anchored it spans the viewport and causes horizontal scroll -
   found at 430px, 2026-08-07). */
@media (min-width: 981px) {
  html body #main-header .container,
  html body #et-top-navigation,
  html body #top-menu-nav,
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu,
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu { position: static !important; }
}

html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu {
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  width: auto !important;
  max-width: none !important;
  background: #FFFFFF !important;
  border-top: 1px solid #E1EAF2 !important;
  box-shadow: 0 30px 60px rgba(6,42,68,.16) !important;
  padding: 30px max(34px, calc((100vw - 1180px) / 2)) 34px !important;
  display: flex !important;          /* equal-height intent columns */
  align-items: stretch;
}

/* ---- intent columns ---- */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
  float: none !important;
  flex: 1 1 0;
  width: auto !important;
  padding: 0 28px 0 0 !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item + li.mega-menu-item {
  border-left: 1px solid #E1EAF2;
  padding-left: 28px !important;
}

/* column head = gold eyebrow + muted sub-line */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  height: auto !important;
  line-height: 1.4 !important;
}
/* gold-eyebrow treatment is for COLUMN HEADS ONLY (direct panel children) -
   a bare .mega-menu-title rule leaks onto every third-level link that carries
   a description (the Talk column's phone/email rendered gold caps, 2026-08-07) */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link .mega-menu-title {
  display: block;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #BCAC75 !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link .mega-menu-description {
  display: block;
  font-size: 11.5px !important;
  font-style: normal !important;
  color: #6E6E6E !important;
  margin-top: 3px;
}

/* third-level rows that carry a description (the Talk column's channels):
   value on top, small muted label under it */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu .mega-menu-title {
  display: block;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #313131 !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu .mega-menu-description {
  display: block;
  font-size: 10.5px !important;
  font-style: normal !important;
  color: #6E6E6E !important;
  margin-top: 1px;
}

/* third-level links */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #313131 !important;
  background: transparent !important;
  padding: 7px 0 !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: color .15s ease, padding-left .15s ease;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
  color: #0A558A !important;
  padding-left: 5px !important;
}

/* How to Apply carries the START HERE flag (href-targeted, no meta needed) */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu a.mega-menu-link[href*="mm2h-application"] {
  color: #0A558A !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu a.mega-menu-link[href*="mm2h-application"]::after {
  content: 'START HERE';
  display: inline-block;
  line-height: 1;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FFFFFF;
  background: #BCAC75;
  border-radius: 999px;
  padding: 3px 8px;
  margin-left: 8px;
  vertical-align: 1px;
}
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu a.mega-menu-link[href*="mm2h-application"]::after { content: '从这里开始'; }
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu a.mega-menu-link[href*="mm2h-application"]::after { content: '從這裡開始'; }

/* ---- Talk to Wanda column: tinted card, pill on the contact link ---- */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item:last-of-type {
  background: #F7F9FC;
  border-left: 0 !important;
  border-radius: 12px;
  padding: 18px 20px !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item:last-of-type ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  font-size: 12.5px !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item:last-of-type ul.mega-sub-menu li.mega-menu-item:last-child > a.mega-menu-link {
  display: inline-block !important;
  background: #0A558A !important;
  color: #FFFFFF !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  margin-top: 10px;
  line-height: 1 !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item:last-of-type ul.mega-sub-menu li.mega-menu-item:last-child > a.mega-menu-link:hover {
  background: #0A3E63 !important;
  padding-left: 22px !important;
}

/* flyout submenus (Services / Links) - quiet white card */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-flyout ul.mega-sub-menu {
  background: #FFFFFF !important;
  border: 1px solid #E1EAF2 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 40px rgba(6,42,68,.14) !important;
  padding: 8px 0 !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #313131 !important;
  background: transparent !important;
  padding: 8px 18px !important;
  height: auto !important;
  line-height: 1.5 !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
  color: #0A558A !important;
  background: #F7F9FC !important;
}

/* Divi's own mobile hamburger retires - MMM owns navigation at every width */
html body #et_mobile_nav_menu,
html body .mobile_menu_bar { display: none !important; }

/* keyboard focus - visible ring on menu links, the pill and footer links
   (neither Divi nor MMM ships a usable :focus-visible style) */
html body #mega-menu-wrap-primary-menu a.mega-menu-link:focus-visible,
html body #mega-menu-wrap-primary-menu .mega-menu-toggle button:focus-visible,
html body .et-l--footer a:focus-visible {
  outline: 2px solid #0A558A !important;
  outline-offset: 2px;
  border-radius: 4px;
}
html body #mega-menu-wrap-primary-menu > li.menu-cta > a.mega-menu-link:focus-visible {
  outline-color: #BCAC75 !important;
}

/* ---- MMM mobile (<=980, matches Divi's own breakpoint) ---- */
@media (max-width: 980px) {
  html body #mega-menu-wrap-primary-menu .mega-menu-toggle {
    background: transparent !important;
  }
  /* the drawer spans the full viewport under the header (it shrink-wrapped to
     258px inside the nav container - found at 430px, 2026-08-07) */
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu.mega-menu-open,
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  html body #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated-inner,
  html body #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated-inner::before,
  html body #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated-inner::after {
    background: #0A558A !important;
  }
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu {
    background: #FFFFFF !important;
    box-shadow: 0 24px 44px rgba(6,42,68,.18);
  }
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
    line-height: 46px !important;
    height: 46px !important;
    color: #313131 !important;
  }
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.menu-cta > a.mega-menu-link {
    margin: 8px 18px !important;
    display: inline-block !important;
    height: auto !important;
    line-height: 1 !important;
  }
  /* panel becomes a plain stacked list on mobile - every desktop panel trick
     (flex columns, full-bleed absolute positioning) must be unwound here */
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 18px 14px !important;
    box-shadow: none !important;
    border-top: 0 !important;
  }
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
    display: block !important;
    flex: none;
    width: 100% !important;
  }
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item,
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item + li.mega-menu-item {
    border-left: 0 !important;
    padding: 10px 0 0 !important;
  }
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item:last-of-type {
    padding: 14px 16px !important;
    margin-top: 6px;
  }
}

/* =============================================================================
   LANGUAGE SWITCHER - compact dropdown (Lee, 2026-08-07: keep the top bar
   clean). Trigger = a small bordered pill showing the SHORT current-language
   label (EN / 简体 / 繁體, via ::before - the Polylang item text is the full
   name); the flyout lists full names with the current one highlighted.
   ============================================================================= */

html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  position: relative !important;   /* the flyout anchors to the trigger */
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link {
  display: inline-flex !important;
  align-items: center;
  font-size: 0 !important;         /* hides the full language name */
  line-height: 1 !important;
  height: auto !important;
  color: #313131 !important;
  background: transparent !important;
  border: 1px solid #D5DEE7 !important;
  border-radius: 999px !important;
  padding: 8px 10px 8px 14px !important;
  margin-left: 8px;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link::before {
  content: 'EN';
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1;
}
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link::before { content: '简体'; }
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link::before { content: '繁體'; }
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link:hover {
  border-color: #9DB9CE !important;
  color: #0A558A !important;
}
/* the caret needs its own size - it sits inside the font-size:0 trigger */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link span.mega-indicator {
  margin-left: 5px;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link span.mega-indicator:after {
  font-size: 10px !important;
}

/* the flyout: compact card, right-aligned so it never overflows the viewport */
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > ul.mega-sub-menu {
  top: calc(100% + 6px) !important;   /* MMM's align-bottom-left class parks it at header top otherwise */
  left: auto !important;
  right: 0 !important;
  width: 170px !important;
  min-width: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E1EAF2 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 40px rgba(6,42,68,.14) !important;
  padding: 6px !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-pll-parent-menu-item li.mega-lang-item > a.mega-menu-link {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #313131 !important;
  background: transparent !important;
  padding: 9px 12px !important;
  height: auto !important;
  line-height: 1.4 !important;
  border-radius: 7px !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-pll-parent-menu-item li.mega-lang-item > a.mega-menu-link:hover {
  color: #0A558A !important;
  background: #F7F9FC !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-pll-parent-menu-item li.mega-current-lang > a.mega-menu-link {
  color: #0A558A !important;
  background: #EBF3FA !important;
  font-weight: 700 !important;
}
html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-pll-parent-menu-item li.mega-current-lang > a.mega-menu-link::after {
  content: '✓';
  float: right;
  font-size: 11px;
}

@media (max-width: 980px) {
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item {
    display: block !important;
    padding: 12px 18px 16px !important;
    position: static !important;
  }
  /* in the drawer the three languages just show inline - no nested tap needed */
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link { display: none !important; }
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > ul.mega-sub-menu {
    position: static !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    padding: 3px !important;
    gap: 2px;
  }
  html body #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-pll-parent-menu-item li.mega-lang-item > a.mega-menu-link {
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }
}

/* =============================================================================
   CHINESE TYPE SCALE for the nav (Lee, 2026-08-07: zh at EN sizes is hard to
   read). :lang(sc)/:lang(tc) match the site's sc-CN/tc-CN tags. Same ladder
   philosophy as the page styleguide - each role gets its zh size, no blanket.
   ============================================================================= */

/* top bar */
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link,
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
  font-size: 14.5px !important;
}
/* mega column heads + sub-lines */
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link .mega-menu-title,
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link .mega-menu-title {
  font-size: 12.5px !important;
  letter-spacing: 1.5px !important;
}
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link .mega-menu-description,
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link .mega-menu-description {
  font-size: 13px !important;
}
/* mega third-level links */
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link,
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  font-size: 15px !important;
  padding: 8px 0 !important;
}
/* talk column rows */
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu .mega-menu-title,
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu .mega-menu-title {
  font-size: 14px !important;
}
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu .mega-menu-description,
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu ul.mega-sub-menu ul.mega-sub-menu .mega-menu-description {
  font-size: 12px !important;
}
/* flyout dropdowns (Services) */
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  font-size: 14.5px !important;
}
/* the language segments keep their own sizes (labels are language names) */

/* footer zh ladder */
html body:lang(sc) .et-l--footer .wf-main .et_pb_menu ul.et-menu > li > a,
html body:lang(tc) .et-l--footer .wf-main .et_pb_menu ul.et-menu > li > a {
  font-size: 14px !important;
  padding: 6px 0 !important;
}
html body:lang(sc) .et-l--footer h6.wf-h,
html body:lang(tc) .et-l--footer h6.wf-h {
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
}
html body:lang(sc) .et-l--footer .wf-lead strong,
html body:lang(tc) .et-l--footer .wf-lead strong { font-size: 16.5px !important; }
html body:lang(sc) .et-l--footer .wf-lead span,
html body:lang(tc) .et-l--footer .wf-lead span { font-size: 13px !important; }
html body:lang(sc) .et-l--footer .wf-ch-l,
html body:lang(tc) .et-l--footer .wf-ch-l { font-size: 11px !important; }
html body:lang(sc) .et-l--footer .wf-ch-v,
html body:lang(tc) .et-l--footer .wf-ch-v { font-size: 14.5px !important; }
html body:lang(sc) .et-l--footer .wf-pos,
html body:lang(tc) .et-l--footer .wf-pos { font-size: 13.5px !important; line-height: 1.85 !important; }
html body:lang(sc) .et-l--footer .wf-lic span,
html body:lang(tc) .et-l--footer .wf-lic span { font-size: 13px !important; }
html body:lang(sc) .et-l--footer .wf-lic strong,
html body:lang(tc) .et-l--footer .wf-lic strong { font-size: 12px !important; }
html body:lang(sc) .et-l--footer .wf-co, html body:lang(tc) .et-l--footer .wf-co,
html body:lang(sc) .et-l--footer .wf-ll a, html body:lang(tc) .et-l--footer .wf-ll a {
  font-size: 12.5px !important;
}

/* the zh top-bar size rule (:lang, later block) out-ranks the trigger's
   font-size:0 - restate it per language or the full name renders twice */
html body:lang(sc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link,
html body:lang(tc) #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-pll-parent-menu-item > a.mega-menu-link {
  font-size: 0 !important;
}