/* TENSUNG - language switcher inside the off-canvas navigation panel.
 *
 * The header copy is hidden wherever the panel is in use, so the two can no
 * longer overlap. Colours follow the site design: ink #16211D, jade #1D5B4A,
 * amber #B35F1B, 3px radius, no shadows.
 */

.tensung-navlang {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #E2EAE6;
}

.tensung-navlang__title {
  margin: 0 0 10px;
  padding: 0 10px;
  text-align: left;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #56635E;
}

.tensung-navlang__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  text-align: left;
}

.tensung-navlang__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: #16211D;
  transition: background-color .18s ease, color .18s ease;
}

.tensung-navlang__item:hover,
.tensung-navlang__item:focus-visible {
  background: #F1F5F3;
  color: #B35F1B;
}

.tensung-navlang__item:focus-visible {
  outline: 2px solid #B35F1B;
  outline-offset: -2px;
}

.tensung-navlang__item.is-current {
  background: #F1F5F3;
  color: #1D5B4A;
  font-weight: 600;
  cursor: default;
}

.tensung-navlang__flag {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  border-radius: 999px !important;
  object-fit: cover;
  aspect-ratio: 1 !important;
  flex: 0 0 auto;
}

/* The panel only exists below 1025px; above that the header switcher is the one
   people see, so this block would be a duplicate. */
@media (min-width: 1025px) {
  .tensung-navlang {
    display: none;
  }
}

/* Below 1025px the header switcher sits next to the toggle, in the same column.
   hblank01 stays out of the way - one switcher in the header is enough. */
@media (max-width: 1024px) {
  html body .xpro-theme-builder-header .tensung-lang-mobile {
    display: block !important;
  }
  html body .xpro-theme-builder-header .tensung-lang-desktop {
    display: none !important;
  }
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 {
    width: auto !important;
    min-width: 42px !important;
    gap: 10px !important;
    overflow: visible !important;
  }
}

/* Tablet reserves a fixed 42px column for the toggle alone. Now that the column
   also carries the switcher it has to size to its contents, or the block spills
   left out of its cell and lands on the quote button. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 190px, not 122px, since the SHENGDAN mark of 2026-09-17: the brand
     column must be as wide as the logo in it, or the logo spills into the
     spacer and the controls to its right sit unevenly (and overlap it on a
     768px tablet). */
  html body .xpro-theme-builder-header .elementor-element-htoprow1 > .e-con-inner {
    grid-template-columns: 190px minmax(12px, 1fr) auto auto !important;
    column-gap: 14px !important;
  }
  html body .xpro-theme-builder-header .elementor-element-hmenu002 {
    flex: 0 0 42px !important;
    width: 42px !important;
  }

  /* Tablet is the one width where both control groups show: the desktop
     group (search + quote) and the phone group (search + language + menu).
     That printed the search icon twice. Keep the one beside the quote
     button, and give both groups the same 14px spacing as the grid so the
     row reads as one evenly spaced set. */
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 .ts-hs-open {
    display: none !important;
  }
  html body .xpro-theme-builder-header .elementor-element-hquote01,
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 {
    gap: 14px !important;
  }
}

/* The panel is position:fixed but renders inside the header's stacking context,
   so the header switcher paints over it and lands on the close button. While the
   panel is open the switcher steps aside; the panel carries its own copy. */
.tensung-nav-open .xpro-theme-builder-header .tensung-lang-mobile,
.tensung-nav-open .xpro-theme-builder-header .tensung-lang-desktop {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .tensung-navlang__item {
    transition: none;
  }
}

/* Phone header: burger left, mark centred, controls right.
 *
 * It used to be a single left-to-right run - mark hard against the left
 * padding, then search, then the switcher, then the burger hard against the
 * right. Measured at 386px the four of them came to 337px inside a 335px row,
 * so the mark and the search icon overlapped by two pixels and nothing had any
 * air around it.
 *
 * Restructured after the reference catalogue's phone header: one bar, the
 * burger alone at the left edge, the mark in the middle. The mark is taken out
 * of the flow and pinned to the centre of the bar rather than centred by
 * flexbox, because flexbox would centre it in whatever space is left between
 * the burger and the controls - and those two sides are not the same width, so
 * it would sit visibly off-centre. Pinned, it is centred on the bar itself,
 * which is what the eye measures it against.
 *
 * The language switcher is gone from the bar; the drawer already holds one.
 *
 * These rules live here rather than in source-fidelity.css because the block
 * above already owns the phone header's layout: its
 * `html body .xpro-theme-builder-header .elementor-element-hmobtog1` sets
 * width:auto !important at a specificity source-fidelity cannot reach from a
 * `body`-prefixed rule, and this file loads after it. Same file, same
 * prefix, later in the cascade - no arms race.
 */
@media (max-width: 767px) {
  html body .xpro-theme-builder-header .elementor-element-htoprow1 > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    min-height: 58px !important;
    padding: 5px 12px !important;
  }

  /* An explicit width, not auto.

     The artwork is an SVG carrying width="1" height="1" attributes and a
     max-width:100% from the theme. Absolutely positioning its container with
     width:auto makes the container shrink-to-fit its content while the content
     resolves max-width:100% against that same container - the two size off
     each other, settle at zero, and the mark disappears from the header
     entirely. Pinning both to a real number breaks the loop.

     170px since 2026-09-17: the S-tile SHENGDAN mark is a 960x137 PNG, 24px
     tall at this width, with the quality line as live text (htag001) under
     it so it can be translated. */

  html body .xpro-theme-builder-header .elementor-element-hbrand01 {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 170px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
  }

  html body .xpro-theme-builder-header .elementor-element-hbrand01 .xpro-site-logo,
  html body .xpro-theme-builder-header .elementor-element-hbrand01 .xpro-site-logo a {
    display: block !important;
    width: 170px !important;
  }

  html body .xpro-theme-builder-header .elementor-element-hbrand01 img {
    width: 170px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  /* The controls take the whole bar so the burger can hold one end and the
     search the other, with the mark floating between them. */
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 {
    width: 100% !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
    /* Spanning the bar means this box now lies across the mark, and it sits a
       layer above it - so the middle of the header stopped being a link home.
       The box itself takes no clicks; only the controls in it do, and the empty
       run between them passes taps through to the mark underneath. Verified by
       hit-testing the centre of the bar, which is the only way this shows up:
       nothing about it is visible. */
    pointer-events: none !important;
  }
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 > * {
    pointer-events: auto !important;
  }

  /* Burger at the left edge, search at the right, mark between them.
     Only the visual order moves; tab order follows the DOM.

     No language switcher here. The off-canvas drawer already carries one -
     .tensung-navlang, a proper list with flags and full language names, which
     is a better control than a dropdown squeezed into a 42px bar - so the
     header copy was the second of two, and it was the widest thing on the
     right. Removing it is what lets the mark sit at the true centre of the bar
     with forty-odd clear pixels either side instead of five.

     Only below 768px. Between 768 and 1024 the header switcher is the only one
     a visitor sees, because .tensung-navlang belongs to the drawer and the
     drawer is not what a tablet opens first; that range keeps it. */
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 > .elementor-element-hmenu002 {
    order: -1 !important;
    margin-right: auto !important;
  }
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 > .ts-hs-open {
    order: 1 !important;
    margin-right: 0 !important;
  }
  html body .xpro-theme-builder-header .elementor-element-trplngm1.tensung-lang-mobile {
    display: none !important;
  }

  /* Both controls keep a 42px hit area and centre what is inside it.
     min-height alone lined the two boxes up and left their contents to fall
     where they liked. */
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 > .ts-hs-open,
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 > .elementor-element-hmenu002 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* NOTHING on .elementor-element-hmenu002 may create a containing block -
     no transform, no filter, no perspective, no backdrop-filter, no
     will-change, no `contain`.

     That widget holds three things: the burger, and also the off-canvas
     drawer and its scrim, both of which are position:fixed. A fixed element
     positions itself against the viewport - unless an ancestor is
     transformed, at which point that ancestor becomes its containing block
     instead. A three-pixel nudge put here therefore stopped being a nudge:
     the drawer began resolving its width and position against a 42px button,
     and opened as a clipped strip about sixty pixels wide with every menu
     label cut off. position:relative on the bar above is fine and stays -
     relative makes a containing block for absolutely positioned descendants
     only, never for fixed ones, which is why the drawer survived that one.

     So the centring lives on the toggler, which contains nothing fixed, and
     the optical nudge lives on the glyphs themselves - leaves, with no
     descendants at all to break. */
  html body .xpro-theme-builder-header .elementor-element-hmenu002 .xpro-elementor-horizontal-menu-toggler-wrapper,
  html body .xpro-theme-builder-header .elementor-element-hmenu002 .xpro-elementor-horizontal-menu-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* Matched by ink, not by box.

     An earlier pass set both to 24px because the burger's box was 22 and the
     search's 34, and called that a size mismatch. It was the wrong
     measurement: a box is invisible. The search SVG is a 34-unit viewBox
     holding a transparent 34x34 plate and a magnifier whose own bbox is only
     14.6 units - the mark fills under half its box. Squaring the boxes at 24
     therefore left ~21px of burger next to ~11px of magnifier, and the search
     came out looking half the size of the thing beside it.

     Sized by painted extent instead: 17.2px of glyph plus a 2.2px stroke,
     against the burger's roughly 21 x 15 of bars at 24px. The round mark is
     allowed to run a little wider than the flat one - a circle at the same
     measured width always reads smaller than a bar.

     But the glyph is scaled rather than the box, because that transparent
     plate is not decoration: when the search panel opens, `.ts-hs-open.is-open`
     fills it jade and turns the magnifier white, so the box IS the green
     button a visitor sees. Growing the box to 40px to get a bigger magnifier
     also grew that green square by six pixels, and it went from an icon to a
     slab. The box stays at the 34px it was designed at, and the mark inside it
     grows instead: same magnifier as before this rule, green plate back to its
     original size. */
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 > .ts-hs-open > svg {
    width: 34px !important;
    height: 34px !important;
  }
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 > .ts-hs-open > svg > .ts-hs-glyph {
    transform-box: view-box;
    transform-origin: center;
    transform: scale(1.18);
  }
  html body .xpro-theme-builder-header .elementor-element-hmenu002 .xpro-elementor-horizontal-menu-toggler > i {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
  }

  /* display:block, because an inline <svg> sits on the text baseline and a
     baseline reserves room underneath for descenders an icon does not have.
     That dropped the search about a pixel and a half below the burger beside
     it, which is a font glyph centred by its line-height instead. Off the
     baseline, the two agree exactly.

     Then both rise six pixels, to sit level with the wordmark rather than with
     the bar. hbrand01 is not one picture: it is a flex column holding the
     TENSUNG artwork (34px) and, as a separate widget under a 3px gap, the
     "Unique-Professional-Quality" line (9px). The column is 46px and is
     centred on the bar at y=33, which leaves the wordmark itself - the part an
     eye reads as the logo - centred at y=26.8, six pixels higher. Icons
     centred on the bar therefore sagged next to it although nothing was
     misaligned. Measured at 390px: wordmark 26.8, both icons 27.0. */
  html body .xpro-theme-builder-header .elementor-element-hmobtog1 > .ts-hs-open > svg,
  html body .xpro-theme-builder-header .elementor-element-hmenu002 .xpro-elementor-horizontal-menu-toggler > i {
    display: block !important;
    line-height: 1 !important;
    transform: translateY(-6px);
  }
}

/* The drawer's close button, put where the header icons are.
 *
 * Tapping the burger used to move everything: the X arrived 23px lower than
 * the icon row it replaced, 17px to the left of the search, and 20px square
 * against their 24. Three misalignments at once, on the one control a visitor
 * is looking for the moment the drawer covers the page.
 *
 * It is now pinned to the drawer - which is position:fixed and therefore a
 * containing block for it - at the coordinates the header icons already use:
 * top 6px puts a 42px button's centre on y=27, and right 12px puts its centre
 * on x=337.7, which is the search icon's own centre. Measured at 390px, both
 * deltas are 0.
 *
 * Taking the button out of the flow pulled the menu up 40px behind it, leaving
 * two pixels between the X and "Home", so the list gets that 40px back as a
 * margin. First link returns to y=90 and the language block to y=352, both
 * exactly where they were before any of this.
 */
@media (max-width: 767px) {
  html body .xpro-elementor-horizontal-navbar-wrapper > .xpro-elementor-horizontal-menu-close {
    position: absolute !important;
    top: 6px !important;
    right: 12px !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .xpro-elementor-horizontal-navbar-wrapper > .xpro-elementor-horizontal-menu-close > i {
    display: block !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }
  html body .xpro-elementor-horizontal-navbar-wrapper > .xpro-elementor-horizontal-navbar {
    margin-top: 40px !important;
  }
}

@media (max-width: 767px) {
  html body .xpro-theme-builder-header .ts-brand-tagline {
    font-size: 6.5px !important;
    margin-top: 3px !important;
  }

  /* The logo widget itself is still pinned at 122px by an older
     source-fidelity rule; a 170px image overflowed it to the right and sat
     24px off the centre of the tagline under it. */
  html body .xpro-theme-builder-header .elementor-element-hlogo001 {
    width: 170px !important;
    margin: 0 !important;
  }
}