/* =========================================================================
 * The chain of services / capabilities — a shared component
 * (inc/service-chain.php).
 *
 * The rules were moved one to one from
 * assets/css/mxdr-service/block1-hero.css (the hero of the MXDR service
 * pages): the “02 / 12” counter, .lmx-arrow arrows on a dark background, the
 * line with dots and labels, and horizontal scrolling of the track on narrow
 * screens. The scale is the block's --ms-scale.
 *
 * Button mode (.lmx-mh-nav--buttons, the MDR page): the items are <button>
 * elements, the arrows are <button disabled> at the ends, and the
 * .lmx-mh-nav-glow glow is moved along by the block script through left. These
 * rules match only buttons and the modifier, so the link markup (MXDR) does not
 * get them.
 * ====================================================================== */

.lmx-mh-nav{position:relative;z-index:1;min-width:0;max-width:100%;padding-bottom:max(18px,calc(30px * var(--ms-scale,1)))}
.lmx-mh-nav-index{text-align:right;font-family:var(--lmx-ms-font);font-size:max(12px,calc(15px * var(--ms-scale,1)));letter-spacing:.08em;color:var(--lmx-ms-accent,#52C7C6);margin:0 max(44px,calc(60px * var(--ms-scale,1))) max(8px,calc(14px * var(--ms-scale,1))) 0}
.lmx-mh-nav-index-cur{color:#fff}
.lmx-mh-nav-row{display:flex;align-items:flex-start;gap:max(8px,calc(18px * var(--ms-scale,1)))}

/* The arrows are the shared .lmx-arrow component of the home page, recoloured for a dark background. */
.lmx-mh-nav .lmx-arrow{--lmx-arrow-scale:var(--ms-scale,1);border-color:rgba(255,255,255,.3);color:#fff;margin-top:-10px;text-decoration:none}
.lmx-mh-nav .lmx-arrow:hover{border-color:var(--lmx-ms-accent);background:var(--lmx-ms-accent);color:var(--lmx-ms-on-accent)}
.lmx-mh-nav .lmx-arrow:focus-visible{outline:2px solid #fff}
.lmx-mh-nav .lmx-arrow.is-off{opacity:.3;pointer-events:none}

/* Clipping is needed horizontally only — the track scrolls sideways.
   Vertically the active dot grows (scale 1.45) and glows, and the previous
   overflow:hidden cut off its top. The room was added with padding and taken
   back with negative margins, so the outer size of the track did not change. */
.lmx-mh-nav-track{flex:1 1 auto;min-width:0;overflow-x:hidden;overflow-y:hidden;padding-top:14px;padding-bottom:14px;margin-top:-14px;margin-bottom:-14px;contain:inline-size}
.lmx-mh-nav-list{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;position:relative}
.lmx-mh-nav-list::before{content:'';position:absolute;left:0;right:0;top:5px;height:1px;background:linear-gradient(90deg,rgba(82,199,198,.9),rgba(82,199,198,.45) 60%,rgba(82,199,198,.9))}
.lmx-mh-nav-item{flex:0 1 auto;position:relative;text-align:center;min-width:0}
.lmx-mh-nav-link{display:flex;flex-direction:column;align-items:center;gap:max(10px,calc(18px * var(--ms-scale,1)));text-decoration:none !important;color:rgba(255,255,255,.62) !important;font-family:var(--lmx-ms-font);font-size:max(11px,calc(13px * var(--ms-scale,1)));letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:0 max(4px,calc(8px * var(--ms-scale,1))) 8px;position:relative;transition:color .2s ease}
.lmx-mh-nav-dot{display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:#000;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.lmx-mh-nav-link:hover{color:#fff !important}
.lmx-mh-nav-link:hover .lmx-mh-nav-dot{border-color:var(--lmx-ms-accent)}
.lmx-mh-nav-link:focus-visible{outline:2px solid var(--lmx-ms-accent);outline-offset:2px}
.lmx-mh-nav-item.is-active .lmx-mh-nav-link{color:#fff !important;font-weight:700}
.lmx-mh-nav-item.is-active .lmx-mh-nav-dot{border:2px solid var(--lmx-ms-accent);transform:scale(1.45);box-shadow:0 0 14px rgba(82,199,198,.7)}
.lmx-mh-nav-item.is-active .lmx-mh-nav-link::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:2px;background:var(--lmx-ms-accent)}

/* --- button mode (MDR) ---------------------------------------------------- */
button.lmx-mh-nav-link{background:transparent;border:0;cursor:pointer;font:inherit;font-family:var(--lmx-ms-font);-webkit-appearance:none;appearance:none}
.lmx-mh-nav--buttons .lmx-mh-nav-track{position:relative}
.lmx-mh-nav--buttons .lmx-mh-nav .lmx-arrow:disabled{opacity:.3;cursor:default}
.lmx-mh-nav--buttons .lmx-arrow:disabled:hover{border-color:rgba(255,255,255,.3);background:transparent;color:#fff}
/* The glow under the active dot: the line is brighter around it. The position
   (--glow-x, px from the left edge of the track) is set by the script; the
   movement uses transform rather than left so that it does not count as layout
   shift. */
.lmx-mh-nav-glow{position:absolute;top:5px;left:0;width:max(160px,calc(260px * var(--ms-scale,1)));height:3px;transform:translate(calc(var(--glow-x,0px) - 50%),-50%);border-radius:2px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(150,240,240,.95) 0%,rgba(82,199,198,.55) 40%,rgba(82,199,198,0) 100%);
  box-shadow:0 0 18px 4px rgba(82,199,198,.35);opacity:0;transition:transform .55s cubic-bezier(.3,.09,.18,1),opacity .3s ease}
.lmx-mh-nav-glow.is-on{opacity:1}
.lmx-mh-nav--buttons .lmx-mh-nav-list{z-index:1}
.lmx-mh-nav--buttons .lmx-mh-nav-item.is-active .lmx-mh-nav-dot{background:var(--lmx-ms-accent);box-shadow:0 0 18px rgba(82,199,198,.95)}

/* --- narrow screens -------------------------------------------------------- */
@media (max-width:1024px){
.lmx-mh-nav-index{margin-right:0;text-align:center}
.lmx-mh-nav-row{align-items:center}
/* Twelve labels do not fit on one line: the strip scrolls horizontally and the
   script brings the active service into view. */
.lmx-mh-nav-track{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.lmx-mh-nav-track::-webkit-scrollbar{display:none}
.lmx-mh-nav-list{justify-content:flex-start;gap:6px;width:max-content;min-width:100%;padding:0 6px}
.lmx-mh-nav-item{scroll-snap-align:center}
.lmx-mh-nav-link{padding:0 12px 10px;min-height:44px;font-size:12px}
.lmx-mh-nav .lmx-arrow{margin-top:-14px;width:44px;height:44px}
}

/* --- less motion ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.lmx-mh-nav *{transition:none !important}
}