/* =========================
   Mobile menu search
========================= */
.mobile-menu-search {
  width:80%;
  padding:16px 20px 12px;
  background:none;
  box-sizing:border-box;
  border-bottom:1px solid var(--wdg-color-white-gray);
  margin:0 0 10px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.mobile-menu-search .search-form {
  display:flex;
  width:100%;
  gap:8px;
}
.mobile-menu-search .search-field {
  flex:1 1 auto;
  padding:12px 14px;
  border-radius:25px;
  border:1px solid var(--wdg-color-white-gray);
  font-size:16px;
  background:#fff;
  color:#222;
  outline:none;
  transition:border-color .2s;
}
.mobile-menu-search .search-field:focus {
  border-color:var(--wdg-color-primary, #0032a0);
  background:var(--wdg-color-white-gray);
}
.mobile-menu-search .search-submit {
  background:var(--wdg-color-primary, #0032a0);
  border-radius:50%;
  border:none;
  width:28px;
  height:28px;
  right:3px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s;
}
.mobile-menu-search .search-submit:hover {
  background:var(--wdg-color-primary, #0051d6);
}
.mobile-menu-search .search-submit img {
  width:16px;
  height:16px;
  filter:invert(1);
  display:block;
}
@media(min-width:769px){
  .mobile-menu-search{display:none !important;}
}

/* =========================
   Header search toggle + inline search
========================= */
.search-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}
.search-toggle .icon-search {
  display:block;
  width:22px;
  height:22px;

}

.search-toggle .icon-search:hover {
  color: inherit;

}


.search-toggle:focus-visible {
  outline:2px solid currentColor;
  outline-offset:2px;
}

.search-inline {
  position:fixed;
  left:0;
  right:0;
  top:0;
  margin:0;
  padding:24px min(5vw,64px);
  background:var(--wdg-color-white);
  border-bottom:1px solid var(--wdg-color-white-gray);
  box-shadow:0 8px 20px var(--wdg-color-tonal-black-08);
  display:none;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  z-index:999;
}
.search-inline.is-open {
  display:block;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.search-inline .search-field {
  width:100%;
  padding:14px 52px 14px 16px;
  border:1px solid var(--wdg-color-primary, #0032a0);
  border-radius:3px;
  font-size:18px;
  line-height:1.4;
  background:var(--wdg-color-white);
  color:var(--wdg-color-primary);
}
.search-inline .search-field::placeholder { color:var(--wdg-color-tonal-black-60); }
.search-inline .search-submit {
  position:absolute;
  right:64px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:none;
  cursor:pointer;
}
.search-inline .search-submit img {
  width:20px;
  height:20px;
}
.search-inline .search-close {
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:none;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
@media(max-width:992px){
  .search-inline{padding:16px;}
  .search-inline .search-field{font-size:16px;}
  .bottom-navigation{display:block;}
}

/* =========================
   Fixed masthead
========================= */
#masthead.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:999;
  transition:background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
#masthead.site-header.is-solid {
  background-color:var(--wdg-color-white) !important;
  color:var(--wdg-color-primary, #0032a0);
  box-shadow:0 2px 8px var(--wdg-color-tonal-black-10);
}
#masthead.site-header.is-transparent {
  background-color:var(--wdg-color-transparent);
  color:var(--wdg-color-white);
  box-shadow:none;
}
body.has-fixed-masthead { padding-top:96px; }
@media(max-width:768px){
  body.has-fixed-masthead{padding-top:72px;}
}

body.admin-bar #masthead.site-header { top:32px; }
@media(max-width:782px){
  body.admin-bar #masthead.site-header{top:46px;}
}

body.admin-bar .mobile-menu-overlay { top:32px; }
@media(max-width:782px){
  body.admin-bar .mobile-menu-overlay{top:46px;}
}

body.admin-bar.adminbar-hidden #masthead.site-header { top:0 !important; }
body.admin-bar.adminbar-hidden .mobile-menu-overlay { top:0 !important; }

/* Transparent home header overlay */
.home #masthead.site-header.is-transparent .top-navigation,
.front-page #masthead.site-header.is-transparent .top-navigation {
  position:relative;
  z-index:1;
}
.home #masthead.site-header.is-transparent .top-navigation::before,
.front-page #masthead.site-header.is-transparent .top-navigation::before {
  content:"";
  position:sticky;
  inset:0;
  background:var(--wdg-color-tonal-black-15);
  -webkit-backdrop-filter:blur(30px);
  backdrop-filter:blur(30px);
  pointer-events:none;
  z-index:0;
}
.home #masthead.site-header.is-transparent .top-navigation>*,
.front-page #masthead.site-header.is-transparent .top-navigation>* {
  position:relative;
  z-index:1;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .home #masthead.site-header.is-transparent,
  .front-page #masthead.site-header.is-transparent {
    background-color:var(--wdg-color-tonal-black-30);
  }
}

/* =========================
   Next-51³Ô¹ÏÍø masthead layout
========================= */
#masthead.site-header.site-header--next {
  --wdg-masthead-utility-height: 0px;
  --wdg-masthead-primary-height: 80px;
  --wdg-masthead-height: var(--wdg-masthead-primary-height);
}

/* Publish the masthead total height on <Body><h1><a href="/">51³Ô¹ÏÍø</a></h1><script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(bp, s);
})();
</script> so siblings of #masthead
   (e.g. the marquee hero #hero-marquee-header used by Advance Page
   templates/advance-page.php) can read it for their negative-margin pull
   under the fixed header. Without this the var resolves to the :root
   fallback in assets/scss/global/_masthead.scss, which is much larger
   than the actual 80px header. */
body { --wdg-masthead-height: 80px; }

/* =========================
   Horizontal in-masthead Sticky TOC (Marquee pages only)
   - Scales the primary row to 80% of 80px (= 64px) so logos / actions /
     padding shrink with it.
   - Adds the second row's height (48px) on top.
   - Mobile (max-width:768px) reverts to the regular single-row 80px
     masthead. The .masthead__toc-bar is hidden by SCSS at the same bp.
========================= */
#masthead.site-header.site-header--next.masthead--has-toc-bar {
  --wdg-masthead-primary-height: 64px;
  --wdg-masthead-toc-bar-height: 48px;
  --wdg-masthead-height: calc(var(--wdg-masthead-primary-height) + var(--wdg-masthead-toc-bar-height));
}
#masthead.site-header.site-header--next.masthead--has-toc-bar .masthead__actions {
  --masthead-btn-height: 28.8px;
}
body.has-masthead-toc-bar {
  --wdg-masthead-height: 112px;
  /* Mirror the fixed 48px the masthead element uses for its toc-bar
     height (set above on #masthead.masthead--has-toc-bar). The :root
     fallback in _masthead.scss is a clamp(40px, 10vw, 56px) which would
     otherwise resolve larger than 48 on wide viewports and produce an
     8px gap between the masthead bottom and body content when scrolled. */
  --wdg-masthead-toc-bar-height: 48px;
}

/* Body padding-top is driven by the inline IIFE in header.php: it
   sets body.style.paddingTop = header.offsetHeight + 'px' on every
   masthead state change. When .masthead--scrolled is active, the
   primary row is display:none so the masthead's offsetHeight is just
   the toc-bar height, and the body padding follows automatically.
   No CSS override needed here (would only fight the inline style). */

@media(max-width:768px){
  #masthead.site-header.site-header--next.masthead--has-toc-bar {
    --wdg-masthead-primary-height: 80px;
    --wdg-masthead-toc-bar-height: 0px;
    --wdg-masthead-height: var(--wdg-masthead-primary-height);
  }
  #masthead.site-header.site-header--next.masthead--has-toc-bar .masthead__actions {
    --masthead-btn-height: 32px;
  }
  body.has-masthead-toc-bar { --wdg-masthead-height: 80px; }
}
#masthead.site-header.site-header--next .masthead__primary {
  display:flex;
  align-items:center;
  min-height:var(--wdg-masthead-primary-height);
  position:relative;
}
/* Scrolled state on Marquee + toc-bar pages: primary row is fully
   removed from layout so the masthead collapses to just the toc-bar.
   Higher specificity than the rule above to win the cascade. The mobile
   media query below restores display:flex so this only applies above
   the md breakpoint (where the toc-bar actually shows). */
#masthead.site-header.site-header--next.masthead--has-toc-bar.masthead--scrolled .masthead__primary {
  display:none;
}
@media(max-width:1024px){
  #masthead.site-header.site-header--next.masthead--has-toc-bar.masthead--scrolled .masthead__primary {
    display:flex;
  }
}
#masthead.site-header.site-header--next .masthead__inner {
  display:flex;
  align-items:center;
  gap:24px;
  width:100%;
  position:relative;
  z-index:1;
  height:100%;
}
#masthead.site-header.site-header--next .site-identity {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  padding-left: clamp(16px, 2vw, 48px);
  height:100%;
}
#masthead.site-header.site-header--next .site-identity a {
  display:flex;
  align-items:center;
  height:100%;
}
#masthead.site-header.site-header--next .masthead__menu {
  flex:1 1 auto;
  /* Without this the flex min-width:auto floor keeps the menu at its
     content width, so at laptop widths the items bled under the
     .masthead__actions CTA buttons instead of compressing. */
  min-width:0;
}
#masthead.site-header.site-header--next .masthead__actions {
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  padding-right: clamp(16px, 2vw, 48px);
  justify-content:right;
  /* Content-sized and non-shrinking: the CTA buttons must never be
     squeezed or overlapped by the menu (was a fixed 250px column that
     the menu could overflow into). */
  width:auto;
  flex:0 0 auto;
}
#masthead.site-header.site-header--next .masthead__items--depth-0 {
  align-items:center;
  margin:0;
  box-sizing: border-box;
  /* center + explicit gap: items sit in the middle of the leftover width
     between the logo and the CTA buttons instead of hugging the logo.
     The marquee-submenu toc-bar reuses these classes, but its ul is
     width:max-content inside a scrolling column, so justify-content has
     no effect there. */
  justify-content:center;
  gap: clamp(16px, 2.5vw, 40px);
}
#masthead.site-header.site-header--next .masthead__item {
  flex:0 0 auto;
  height:100%;
  font-weight:500;
}
/* Main-row items may shrink so long labels wrap to two lines instead of
   pushing the row past the CTA buttons. Scoped to .masthead__primary so
   the toc-bar items (which scroll horizontally and stay nowrap) keep the
   flex:0 0 auto rule above. */
#masthead.site-header.site-header--next .masthead__primary .masthead__item {
  flex:0 1 auto;
  min-width:0;
}
/* Marquee-submenu toc-bar: with real gaps (rule above) a long product
   submenu + CTA button can exceed the row at laptop widths. Tighten the
   bar's own spacing, let the menu column shrink and scroll horizontally
   (scrollbar hidden) instead of overlapping the CTA, and size the CTA
   column to its content instead of the main row's fixed 250px. */
#masthead.site-header.site-header--next .masthead__toc-bar .masthead__items--depth-0 {
  gap: clamp(8px, 1.1vw, 22px);
  flex-wrap: nowrap;
  width: max-content;
}
#masthead.site-header.site-header--next .masthead__toc-bar .masthead__link--depth-0 {
  font-size: var(--wdg-font-size-small, 0.875rem);
  white-space: nowrap;
}
#masthead.site-header.site-header--next .masthead__toc-bar .masthead__menu--toc {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#masthead.site-header.site-header--next .masthead__toc-bar .masthead__menu--toc::-webkit-scrollbar {
  display: none;
}
#masthead.site-header.site-header--next .masthead__toc-bar .masthead__actions--toc {
  width: auto;
  flex: 0 0 auto;
}
/* Tight mode (set by the identity-width IIFE in header.php when the
   submenu items would bleed off the right edge): drop the toc-bar's
   width-locked identity column — submenu logo included — and pull the
   items back to the left edge with the standard page inset. */
#masthead.site-header.site-header--next.masthead--toc-tight .masthead__toc-bar .site-identity--toc {
  display: none;
}
#masthead.site-header.site-header--next.masthead--toc-tight .masthead__toc-bar .masthead__items--depth-0 {
  padding-inline-start: clamp(16px, 2vw, 48px);
}
#masthead.site-header.site-header--next .masthead__link--depth-0 {
  padding:0;
  height:100%;
}

#masthead.site-header.is-transparent .masthead__link,
#masthead.site-header.is-transparent .masthead__link svg {
  color:var(--wdg-color-white);
  fill:var(--wdg-color-white);
}
#masthead.site-header.is-solid .masthead__link,
#masthead.site-header.is-solid .masthead__link svg {
  color:var(--wdg-color-primary, #0032a0);
  fill:var(--wdg-color-primary);
}
#masthead.site-header.site-header--next.masthead--unpinned,
#masthead.site-header.site-header--next.masthead--pinned {
  transform:translateY(0) !important;
}
.home #masthead.site-header.site-header--next.is-transparent .masthead__primary::before,
.front-page #masthead.site-header.site-header--next.is-transparent .masthead__primary::before,
.has-frosted-masthead #masthead.site-header.site-header--next.is-transparent .masthead__primary::before,
.has-masthead-toc-bar #masthead.site-header.site-header--next.is-transparent .masthead__toc-bar::before {
  content:"";
  position:absolute;
  inset:0;
  background:var(--wdg-color-tonal-black-40);
  -webkit-backdrop-filter:blur(30px);
  backdrop-filter:blur(30px);
  pointer-events:none;
  z-index:0;
}
/* The toc-bar's content (logo + links) must sit above the ::before blur layer. */
.has-masthead-toc-bar #masthead.site-header.site-header--next .masthead__toc-bar {
  position:relative;
}
.has-masthead-toc-bar #masthead.site-header.site-header--next .masthead__toc-bar > * {
  position:relative;
  z-index:1;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .home #masthead.site-header.site-header--next.is-transparent,
  .front-page #masthead.site-header.site-header--next.is-transparent,
  .has-frosted-masthead #masthead.site-header.site-header--next.is-transparent {
    background-color:var(--wdg-color-tonal-black-30);
  }
}

/* =========================
   Mega menu dropdown colors
========================= */
#masthead.site-header.is-transparent .masthead__dropdown--mega,
#masthead.site-header.is-solid .masthead__dropdown--mega {
  color:var(--wdg-color-white);
}
#masthead.site-header.is-transparent .masthead__dropdown--mega .masthead__link,
#masthead.site-header.is-solid .masthead__dropdown--mega .masthead__link {
  color:inherit;
}
#masthead.site-header.is-transparent .masthead__dropdown--mega .masthead__link svg,
#masthead.site-header.is-solid .masthead__dropdown--mega .masthead__link svg {
  fill:currentColor;
}
#masthead.site-header.is-transparent .masthead__dropdown--mega .masthead__link:hover,
#masthead.site-header.is-transparent .masthead__dropdown--mega .masthead__link:focus,
#masthead.site-header.is-transparent .masthead__dropdown--mega .masthead__link:focus-visible,
#masthead.site-header.is-solid .masthead__dropdown--mega .masthead__link:hover,
#masthead.site-header.is-solid .masthead__dropdown--mega .masthead__link:focus,
#masthead.site-header.is-solid .masthead__dropdown--mega .masthead__link:focus-visible {
  color:var(--wdg-color-link);
}

/* =========================

/* =========================
   Header profile container
========================= */
.header-profile-container {
  display:flex;
  flex-direction:row;
  gap:28px;
  justify-content:center;
  align-items:stretch;
  max-width:1200px;
  margin:0 auto;
  width:100%;
  text-align:left;
}

/* Hide desktop nav on mobile */
@media(max-width:768px){
  .top-navigation,
  .bottom-navigation {
    display:none !important;
  }
}

/* =========================
   Mobile menu overlay
========================= */
.mobile-menu-toggle {
  background:none;
  border:none;
  cursor:pointer;
}
.mobile-menu-toggle img { width:24px; height:auto; }

/* No percentage padding here: `padding:2.5% 0` resolved against the
   .site-identity WIDTH, which inflated the wrapping <a>'s intrinsic
   width to border-box-height x aspect-ratio (~540px) while object-fit
   shrank the visible logo to ~348px — leaving ~190px of invisible dead
   space between the logo and the first masthead menu item. A plain
   %-height with no padding keeps the element width equal to the
   rendered logo width. */
.site-logo.small,
.site-logo.large {
  height:60%;
  width:auto;
  padding:0;
  box-sizing:border-box;
  display:block;
  object-fit:contain;
}

.mobile-menu-overlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background:var(--wdg-color-white);
  z-index:9999;
  overflow-x:hidden;
}
.mobile-menu-overlay[aria-hidden=false] { display:block; }

.mobile-menu-title {
  color:var(--wdg-color-primary, #0032a0);
  text-align:center;
  margin:1rem 0;
  font-size:1.3em;
}
.mobile-menu-close {
  position:absolute;
  top:1rem;
  right:1rem;
  background:none;
  border:none;
  cursor:pointer;
}
.mobile-menu-close img { width:20px; height:auto; }

.mobile-nav-links,
.mobile-bottom-links,
.mobile-bottom-list,
.column-list,
.sub-link-list {
  list-style:none;
  margin:0;
  padding:0;
}

.mobile-nav-links li,
.mobile-bottom-links li { border-bottom:1px solid #ddd; }

.mobile-nav-links a,
.mobile-bottom-links a {
  display:block;
  padding:1rem;
  text-decoration:none;
  color:var(--wdg-color-primary, #0056b3);
  font-size:1.2em;
}
.mobile-nav-links a:hover,
.mobile-bottom-links a:hover { background:var(--wdg-color-white-gray); }

/* =========================
   Mobile nav accordion (same data as masthead mega menu)
========================= */
.mobile-nav { padding:0 0 2rem; }
.mobile-nav-links--root { border-top:1px solid var(--wdg-color-white-gray); }
.mobile-nav-item { border-bottom:1px solid var(--wdg-color-white-gray); }
.mobile-nav-item:last-child { border-bottom:none; }

.mobile-nav-details { margin:0; }
.mobile-nav-details[open] .mobile-nav-icon { transform:rotate(180deg); }
.mobile-nav-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:1rem 1rem;
  list-style:none;
  cursor:pointer;
  font-size:1.1em;
  font-weight:600;
  color:var(--wdg-color-primary, #0032a0);
  background:none;
  border:none;
  text-align:left;
}
.mobile-nav-summary::-webkit-details-marker,
.mobile-nav-summary::marker { display:none; }
.mobile-nav-summary:hover { background:var(--wdg-color-white-gray); }
.mobile-nav-summary:focus { outline:2px solid var(--wdg-color-primary, #0032a0); outline-offset:2px; }

.mobile-nav-icon {
  flex-shrink:0;
  width:12px;
  height:12px;
  margin-left:0.5rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
}

.mobile-nav-panel { padding:0 0 0.5rem; }
.mobile-nav-links--children {
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--wdg-color-white-gray);
}
.mobile-nav-links--children .mobile-nav-item {
  border-bottom:1px solid var(--wdg-color-white-gray);
  padding-left:0;
  display:flex;
  align-items:center;
}
.mobile-nav-links--children .mobile-nav-item::before {
  content:"";
  flex-shrink:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background: var(--wdg-color-primary, #0056b3);
  margin-left:1.25rem;
  margin-right:0.75rem;
}
.mobile-nav-links--children .mobile-nav-link,
.mobile-nav-links--children .mobile-nav-label {
  padding:0.75rem 1rem 0.75rem 0;
  font-size:1.05em;
  font-weight:400;
  flex:1;
}
.mobile-nav-links--grandchildren {
  margin:0;
  padding:0 0 0 1rem;
  list-style:none;
  border-left:1px solid var(--wdg-color-white-gray);
  margin-left:1.25rem;
}
.mobile-nav-links--grandchildren .mobile-nav-item { border-bottom:none; padding-left:0; }
.mobile-nav-links--grandchildren .mobile-nav-item::before { display:none; }
.mobile-nav-links--grandchildren .mobile-nav-link,
.mobile-nav-links--grandchildren .mobile-nav-label {
  padding:0.5rem 0.75rem;
  font-size:1em;
}
.mobile-nav-label {
  display:block;
  padding:1rem;
  color:var(--wdg-color-primary, #0032a0);
  font-size:1.1em;
  font-weight:600;
}
.mobile-nav-label--child,
.mobile-nav-label--grandchild { font-weight:400; }
.mobile-nav-link--parent { font-weight:600; }

.mobile-nav-mega-content {
  padding:1rem 1.25rem;
  border-top:1px solid var(--wdg-color-white-gray);
  margin-top:0.5rem;
}
.mobile-nav-mega-content .wp-block-columns { flex-direction:column; }
.mobile-nav-mega-content .wp-block-column { margin-bottom:1rem; }
.mobile-nav-mega-content a { color:var(--wdg-color-primary, #0056b3); text-decoration:none; padding:0.25rem 0; display:inline-block; }
.mobile-nav-mega-content a:hover { text-decoration:underline; background:transparent; }
.mobile-nav-mega-content p { margin:0 0 0.5rem; font-size:0.95em; color:#222; }

.mobile-bottom-item {
  border-bottom:1px solid var(--wdg-color-white-gray);
  background:var(--wdg-color-white-gray);
  border-left:solid 5px var(--wdg-color-teal, #00a9e0);
}
.bottom-item-link {
  display:block;
  padding:1rem;
  text-decoration:none;
  color:var(--wdg-color-primary, #0056b3);
  font-size:1.2em;
}
.bottom-item-link:hover { background:var(--wdg-color-white-gray); }

.bottom-item-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:none;
  border:none;
  padding:1rem;
  font-size:1.2em;
  color:var(--wdg-color-primary, #0032a0);
  cursor:pointer;
  text-align:left;
}
.bottom-item-button:hover { background:var(--wdg-color-white-gray); }

.chevron-icon { width:16px; height:auto; opacity:.8; }

/* Sliding sub-panel (mobile) */
.bottom-sub-panel {
  position:absolute;
  top:0;
  left:100%;
  width:100%;
  height:100%;
  background:var(--wdg-color-white);
  overflow-y:auto;
  transition:left .3s ease;
  z-index:10000;
  display:flex;
  flex-direction:column;
}
.bottom-sub-panel.active { left:0; }

.sub-panel-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--wdg-color-primary, #0032a0);
  color:var(--wdg-color-white);
  padding:.5rem 1rem;
}
.sub-panel-close {
  background:none;
  border:none;
  cursor:pointer;
  filter:grayscale(100) brightness(100);
}
.sub-panel-close img { width:20px; filter:invert(1); }

.sub-panel-title { margin-top:1rem; font-size:1.6em; }
.sub-panel-content { flex:1; }

/* =========================
   Sub menu columns + links
========================= */
.sub-menu-columns {
  display:flex;
  gap:2rem;
  width:100%;
  margin:0 auto;
  padding:0 1rem;
}
.sub-menu-col {
  flex:1;
  min-width:200px;
}
.sub-menu-col.col-one { margin-left:15%; }
.sub-menu-col.col-three { margin-right:15%; }

/* This selector looks suspicious but kept as-is */
.sub-menu-col.col- .topic-image {
  width:80%;
  margin-left:10%;
  margin-right:10%;
}

.topic-desc {
  width:60%;
  margin-left:10%;
  margin-right:10%;
  color:var(--wdg-color-tonal-black-60);
  font-size:.8em !important;
  text-align:center;
}

.column-list { font-size:1.2em; }
.column-list-item { margin-bottom:.8rem; }

.sub-link-list { border-top:1px solid var(--wdg-color-white-gray); }
.sub-link-list li { border-bottom:1px solid var(--wdg-color-white-gray); }

.sub-link-list a {
  display:block;
  padding:1rem;
  text-decoration:none;
  color:var(--wdg-color-primary, #0032a0);
  font-size:1.1em;
}
.column-list-item > a {
  display:block;
  font-weight:bold;
  padding:1rem;
  font-size:1.2em;
  color: var(--wdg-color-primary, #0032a0);
  text-decoration:none;
}

.column-list-header { color:var(--wdg-color-primary, #335bb3) !important; }

.column-list a:hover,
.sub-link-list a:hover { text-decoration:none; }

.sub-link-list a:hover { background:var(--wdg-color-white-gray); }

/* Mobile stacking for submenu columns */
@media(max-width:768px){
  #mobile-menu .sub-menu-columns{
    flex-direction:column;
    gap:0;
  }

  #mobile-menu .sub-menu-col{
    width:100%;
    min-width:0;
    margin-left:0%;
  }
  #mobile-menu .sub-menu-col + .sub-menu-col{
    border-top:1px solid var(--wdg-color-white-gray);
  }
  .mobile-nav-links{width:100%;}
}

@media(max-width:600px){
  .site-identity {
    max-width: 40%;
  }
  .site-identity a{
    max-width: 100%;
  }

  .site-logo.small,
  .site-logo.large {
    height:auto;
    max-height:85%;
    max-width:100%;
  }
}

/* =========================
   Top nav container tweaks
========================= */
@media(max-width:992px){
  .top-nav-container{padding:0 1rem;}
}
@media(max-width:768px){
  .top-nav-container{
    flex-wrap:wrap;
    justify-content:center;
  }
  .left-section{margin-bottom:.5rem;}
  .mobile-menu-toggle{display:block;}
}

/* =========================
   Bottom navigation (desktop mega menu)
========================= */
.bottom-nav-list {
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.bottom-nav-item {
  position:static;
  padding:10px 15px;
  color:inherit;
}
.bottom-nav-link {
  display:block;
  font-size:1em;
  color:var(--nav-text-color);
  font-weight:500;
  text-decoration:none;
}
.bottom-nav-item:hover .bottom-nav-link { color:var(--wdg-color-teal, #00a9e0); }

.bottom-nav-item:hover{
  background-color:var(--wdg-color-tonal-black-15);
  color:var(--wdg-color-white);
}

.bottom-sub-menu {
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  right:20%;
  width:100vw;
  height:580px;
  max-height:610px;
  transform:translateX(-50%);
  background:var(--wdg-color-white-gray-70);
  padding:.8em 0;
  box-shadow:0 4px 8px var(--wdg-color-tonal-black-15);
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
  z-index:10;
  backdrop-filter:blur(33px);
}
.bottom-nav-item:hover > .bottom-sub-menu,
.bottom-nav-item.menu-open > .bottom-sub-menu {
  display:block;
}

/* Topic styles */
.topic-sub {
  margin-bottom:.2em;
  line-height:.2em;
  font-size:.72em !important;
  margin-left:10px;
}
.topic-header {
  font-size:1em !important;
  font-weight:bold;
}
.topic-header a,
.topic-sub a {
  text-decoration:none;
  color:var(--wdg-color-tonal-black-60);
}
.topic-header a:hover::before {
  content:">";
  font-weight:100;
  color:var(--wdg-color-orange, #ff8200);
  margin-left:-22px;
}
.topic-sub a:hover::before {
  content:">";
  font-weight:100;
  color:var(--wdg-color-orange, #ff8200);
  margin-left:-14px;
}

.topic-image img {
  max-width:60%;
  min-width:200px;
  display:inline-block;
  margin-left:10%;
  height:auto;
  margin-bottom:8px;
}

.sub_hr {
  height:1px;
  background-color:var(--wdg-color-white-gray);
  border:none;
  margin:10px 0;
}
#masthead h2,
.hero-news h2,
[class*="hero-news"] h2 {
			color: var(--wdg-color-white) !important;
		}
/* Scoped to header nav only - does not override chosen button colors elsewhere */
.bottom-navigation .wp-block-button .wp-block-button__link {
			color: var(--wdg-color-white);
			font-size:var(--wdg-font-size-default);
			padding: calc(var(--wdg-gap-xxsmall)*1.15) calc(var(--wdg-gap-xxsmall)*2);
		}
.bottom-navigation .wp-block-button .wp-block-button__link:hover {
  color: var(--wdg-color-orange) !important;
}
.bottom-navigation .wp-block-button.is-style-secondary-fill .wp-block-button__link:hover {
  background-color: var(--wdg-color-orange) !important;
  color: var(--wdg-color-primary) !important;
}



/* =========================
   Responsive font tweaks
========================= */
@media(max-width:1380px){
  .bottom-nav-link{font-size:.8em;}
}
@media(max-width:1260px){
  .bottom-nav-link{font-size:.7em;}
}
@media(max-width:1180px){
  .bottom-nav-link{font-size:.6em;}
}

@media(max-width:1024px){
  .bottom-nav-link{font-size:.6em;}
}
@media(max-width:1024px){
  .topic-sub{font-size:.7em !important;}
  .topic-desc{font-size:.7em !important;}
  .additional-nav-menu{gap:.8em !important;}
  .additional-nav-menu li .nav-link{
    font-size:.8em;
    margin-right:10px !important;
  }
  .nav-search form{
    display:flex;
    align-items:center;
    position:relative;
    width:170px !important;
    margin-right:1.2em;
  }
}


/* =====================================================
   Megamenu redesign (2026-06) — .nam-mm-* components
   Used inside mega_menu CPT panels rendered into
   .masthead__dropdown--mega-content
===================================================== */

/* theme.json blockGap emits :where(.is-layout-flow) > *
   { margin-block-start: var(--wdg-gap-large) } which leaks into
   do_blocks()-rendered panel content. Paragraphs at any depth inside
   masthead dropdowns get a tighter gap instead of that flow margin. */
.masthead__dropdown p {
  margin-block-start: var(--wdg-gap-xsmall);
}

/* Dropdown panels size to their content — up to the full screen height —
   instead of capping at --wdg-masthead-dropdown-height and scrolling
   internally. No inner scrollbar; tall panels just take the whole screen. */
#masthead.site-header.site-header--next .masthead__dropdown {
  max-height: none;
  overflow-y: visible;
}

.masthead__dropdown--mega-content .nam-mm-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wdg-color-secondary, #00A9E0);
  margin: 0 0 .9em;
}

/* 16:9 YouTube embed */
.masthead__dropdown--mega-content .nam-mm-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, .35);
}
.masthead__dropdown--mega-content .nam-mm-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.masthead__dropdown--mega-content .nam-mm-caption {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  margin: .7em 0 0;
}

/* Photo promo cards */
.masthead__dropdown--mega-content a.nam-mm-card {
  display: block;
  text-decoration: none !important;
  color: var(--wdg-color-white, #fff);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.masthead__dropdown--mega-content a.nam-mm-card:hover,
.masthead__dropdown--mega-content a.nam-mm-card:focus {
  transform: translateY(-3px);
  border-color: var(--wdg-color-secondary, #00A9E0);
  background: rgba(255, 255, 255, .12);
  text-decoration: none !important;
}
.masthead__dropdown--mega-content .nam-mm-card__media {
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.masthead__dropdown--mega-content .nam-mm-card--feature .nam-mm-card__media {
  aspect-ratio: 16 / 6;
}
.masthead__dropdown--mega-content .nam-mm-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}
.masthead__dropdown--mega-content .nam-mm-card__body {
  display: block;
  padding: 14px 16px 16px;
}
.masthead__dropdown--mega-content .nam-mm-card__logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
  margin: 0 0 .6em;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
}
.masthead__dropdown--mega-content .nam-mm-card__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wdg-color-white, #fff);
  margin: 0 0 .35em;
}
.masthead__dropdown--mega-content .nam-mm-card--ext .nam-mm-card__title::after {
  content: "\00a0\2197";
  color: var(--wdg-color-secondary, #00A9E0);
  font-size: .9em;
}
.masthead__dropdown--mega-content .nam-mm-card__desc {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}

/* Side-by-side card grid */
.masthead__dropdown--mega-content .nam-mm-cards {
  display: grid;
  gap: 16px;
}
.masthead__dropdown--mega-content .nam-mm-cards--2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1280px) {
  .masthead__dropdown--mega-content .nam-mm-cards--2 {
    grid-template-columns: 1fr;
  }
}

/* Divider between stacked blocks in one column */
.masthead__dropdown--mega-content .nam-mm-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  margin: 1.3em 0;
}

/* Bottom button row (Membership panel) */
.masthead__dropdown--mega-content .nam-mm-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.masthead__dropdown--mega-content a.nam-mm-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  border: 2px solid var(--wdg-color-secondary, #00A9E0);
  color: var(--wdg-color-white, #fff);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease;
}
.masthead__dropdown--mega-content a.nam-mm-btn:hover,
.masthead__dropdown--mega-content a.nam-mm-btn:focus {
  background: var(--wdg-color-secondary, #00A9E0);
  color: var(--wdg-color-primary, #0032A0);
  text-decoration: none !important;
}

/* Mobile drawer: mega items now carry real child links, so suppress the
   duplicated mega panel content that mobile-menu.php also renders */
.mobile-nav-panel .mobile-nav-links--children ~ .mobile-nav-mega-content {
  display: none !important;
}

/* 6+ top-level items (51³Ô¹ÏÍø): tighten the bar before it wraps. Upper bound
   kept in sync with the useLargeAt1600Plus logo-swap threshold in header.php:
   the full wordmark and the default nav font size return together.
   Menus with five or fewer items (IRI) have room to spare, so they keep the
   default fluid --wdg-font-size-medium (16-18px) at every desktop width. */
@media (min-width: 1025px) and (max-width: 1599px) {
  .masthead__items--depth-0:has(> .masthead__item:nth-child(6)) > .masthead__item > .masthead__link--depth-0 {
    font-size: 15px;
    padding-left: calc(var(--wdg-gap-xxsmall) * .7);
    padding-right: calc(var(--wdg-gap-xxsmall) * .7);
  }
}
@media (min-width: 1025px) and (max-width: 1240px) {
  .masthead__items--depth-0:has(> .masthead__item:nth-child(6)) > .masthead__item > .masthead__link--depth-0 {
    font-size: 13px;
    letter-spacing: -0.2px;
  }
}