/* INGENAX own components — replaces vendor CSS for nav dropdown, lang switch, side-share */
@media(min-width:1200px){
.navbar-nav .dropdown:hover>.dropdown-menu{display:block}
.navbar-nav .dropdown-menu{left:50%;right:auto;transform:translateX(-50%);margin-top:0}
.navbar-nav .lang .dropdown-menu{left:auto;right:0;transform:none;min-width:160px}
}
.navbar-nav .dropdown-toggle::after{display:none!important}
/* mobile: dropdowns render inline, full width, centered text */
@media(max-width:1199.98px){
.navbar-nav .dropdown-menu{position:static!important;width:100%;border:0;background:transparent;box-shadow:none;text-align:center;padding:0;left:auto!important;right:auto!important;transform:none!important;inset:auto!important}
/* Bootstrap sets nowrap, which clips longer product/category names in the
   collapsed menu — and translations run longer than the English. Let them wrap. */
.navbar-nav .dropdown-item{padding:8px 15px;white-space:normal}
.navbar-nav .lang .dropdown-menu{text-align:center}
.navbar-collapse{max-height:80vh;overflow-y:auto}
}
.side-share{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1030;display:flex;flex-direction:column}
.side-share .share-item{position:relative}
.side-share .share-link{display:flex;flex-direction:column;align-items:center;justify-content:center;width:66px;height:66px;background:#777;color:#fff;font-size:12px;cursor:pointer;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.15);transition:background .2s}
.side-share .share-link:hover{background:var(--main-color);color:#fff}
.side-share .share-ico{font-size:20px;line-height:1;margin-bottom:3px}
.side-share .share-pop{position:absolute;right:100%;top:0;margin-right:8px;background:#fff;color:#333;box-shadow:0 2px 14px rgba(0,0,0,.15);border-radius:6px;padding:12px 14px;white-space:nowrap;display:none;font-size:13px}
.side-share .share-item:hover .share-pop{display:block}
.side-share .share-pop .share-img{max-width:150px;display:block}
[dir="rtl"] .side-share{right:auto;left:0}
[dir="rtl"] .side-share .share-pop{right:auto;left:100%;margin-right:0;margin-left:8px}
@media(max-width:768px){.side-share{display:none}}
.bi{vertical-align:-.125em}
body{font-family:var(--body-font-family,Rubik),system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--body-font-size,15px);color:var(--body-color,#555);line-height:var(--body-line-height,1.7)}
h1,h2,h3,h4,h5{font-family:var(--title-font-family,Rubik),sans-serif}
a{text-decoration:none}
img{max-width:100%;height:auto}
.title-desc{text-transform:uppercase;font-size:13px;color:#05a500;font-weight:500;margin-bottom:6px}
/* mobile bottom quick-contact bar */
.mobile-bar{display:none}
@media(max-width:768px){
.mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:1035;background:var(--main-color);box-shadow:0 -2px 10px rgba(0,0,0,.18)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;padding:13px 2px;color:#fff;font-size:22px;border-right:1px solid rgba(255,255,255,.18)}
.mobile-bar a:last-child{border-right:0}
.mobile-bar a:active{background:rgba(0,0,0,.12)}
body{padding-bottom:52px}
}
/* Applications page industry tiles */
.app-tile{background:#fff;height:100%;box-shadow:0 1px 5px rgba(0,0,0,.07);transition:box-shadow .25s,transform .25s}
.app-tile:hover{box-shadow:0 8px 24px rgba(0,0,0,.13);transform:translateY(-3px)}
.app-tile-img .img-ph{border-radius:0;border-left:0;border-right:0;border-top:0}
.app-tile-title{font-size:17px;font-weight:600;margin:15px 16px 6px;color:#333}
.app-tile-desc{font-size:13px;color:#777;margin:0 16px 18px;line-height:1.65}

/* Page banner (title bar) with background image */
.banner-nav-module.has-bg{position:relative;background-image:var(--inner-banner,url('/banner.webp'));background-size:cover;background-position:center;background-repeat:no-repeat}
.banner-nav-module.has-bg::before{content:"";position:absolute;inset:0;background:rgba(20,30,45,.5)}
.banner-nav-module.has-bg .container-xl{position:relative;z-index:1}
.banner-nav-module.has-bg .banner-nav .title{color:#fff}
.banner-nav-module.has-bg .breadcrumb,.banner-nav-module.has-bg .breadcrumb a,.banner-nav-module.has-bg .breadcrumb .active{color:rgba(255,255,255,.9)}
.banner-nav-module.has-bg .breadcrumb a:hover{color:#fff}
/* Taller page banners, so the photo has room to read as a header image.
   The theme gave the module a fixed 150px while the inner block was 180px on
   desktop, i.e. the title hung below its own background — drive the height from
   the inner block alone and let the module wrap it. min-height, not height, so
   a long translated title wraps instead of spilling out. */
.banner-nav-module.has-bg{height:auto}
.banner-nav-module.has-bg .banner-nav{height:auto;min-height:320px;padding:30px 0}
@media(max-width:991.98px){.banner-nav-module.has-bg .banner-nav{min-height:250px}}
@media(max-width:576px){.banner-nav-module.has-bg .banner-nav{min-height:190px;padding:24px 0}}
/* Breathing room between the banner and the first block under it, matching the
   60/40 that .main-container already gives every other page. .contact-wrapper
   had no rules at all, so the contact boxes sat flush against the banner. */
.contact-wrapper,.after-banner{padding-top:60px}
.contact-wrapper{padding-bottom:60px}
@media(max-width:768px){
.contact-wrapper,.after-banner{padding-top:40px}
.contact-wrapper{padding-bottom:40px}
}

/* Back-to-top control (behaviour is delegated in app.js) */
[data-provider="totop"] { cursor: pointer; }

/* Contrast fixes (WCAG AA).
   The green CTA carried white text at 2.43:1 — roughly half the required 4.5,
   on the conversion button that appears on every page. Keeping the brand green
   exactly and darkening the label instead gets 7.16:1 without touching the
   palette. Hover flips to the blue, which is dark enough for white. */
.form-feedback .btn,
.btn-inquiry { color: #1a1a1a; }
.form-feedback .btn:hover { color: #fff; }

/* Small grey text sat at 3.5–4.5:1; #666 is already used elsewhere on the site
   and clears AA at these sizes. */
.product-col .no,
.app-tile-desc,
.home-summary { color: #666; }
.title-desc { color: #046b00; }

/* The banner overlay was tuned against a darker photo; breadcrumbs dropped to
   ~3:1 over the bright areas of the current one. Slightly stronger scrim, and
   solid white rather than 90% — the transparency bought nothing. */
.banner-nav-module.has-bg::before { background: rgba(20, 30, 45, .62); }
.banner-nav-module.has-bg .breadcrumb,
.banner-nav-module.has-bg .breadcrumb a,
.banner-nav-module.has-bg .breadcrumb .active { color: #fff; }

/* Hover-only popovers were unreachable by keyboard. */
.side-share .share-item:focus-within .share-pop { display: block; }

/* The FAQ toggle moved from the <h2> onto a real <button> so it can be focused
   and activated by keyboard. Carry the heading's styling across, and hang the
   +/- indicator off the button — Bootstrap puts .collapsed on the trigger, so
   it now lands there rather than on the heading. */
.faq-row .entry-title { display: block; margin: 0; padding: 0; background: none; }
.faq-row .entry-title > button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 10px;
  background: #f6f6f6;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--main-color);
  text-align: inherit;
  cursor: pointer;
}
.faq-row .entry-title > button::after {
  content: "−";
  margin-inline-start: 8px;
  font-size: 20px;
  font-weight: normal;
  color: #666;
  transition: all ease .2s;
}
.faq-row .entry-title > button.collapsed::after { content: "+"; }

/* Two side-bar controls became <button>s (they were divs with click handlers,
   so keyboard users could reach neither). Reset the button chrome so they still
   match the anchors beside them. */
.side-share button.share-link { border: 0; font: inherit; font-size: 12px; }

/* The theme drew the +/- indicator on the <h2>; it now lives on the button
   inside, so suppress the original or both render. */
.faq-row .entry-title::after { content: none; }
/* The QR popup now carries a caption, so it needs to wrap. */
.side-share .share-pop { white-space: normal; }

/* Custom rich-text spec table (client-built via the editor's table feature).
   The converter wraps it in .lexical-table-container > table.lexical-table.
   Give it the same look as the auto spec table, and let a wide table scroll
   sideways on small screens instead of overflowing the page. */
.spec-richtext .lexical-table-container { overflow-x: auto; margin: 0 0 1rem; }
.spec-richtext table { width: 100%; border-collapse: collapse; }
.spec-richtext th,
.spec-richtext td { border: 1px solid #e2e6ea; padding: 10px 14px; text-align: left; vertical-align: top; }
.spec-richtext th { background: #f6f6f6; font-weight: 600; }
.spec-richtext p { margin: 0.4rem 0; }

/* Datasheet download button — same shape as the inquiry button beside it, in a
   neutral outline so the green inquiry CTA stays the primary action. */
.btn-datasheet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 200px;
  padding: .5rem .75rem;
  border-radius: 16px;
  font-weight: 500;
  color: var(--main-color);
  background: #fff;
  border: 1px solid var(--main-color);
}
.btn-datasheet:hover { background: var(--main-color); color: #fff; transition: all ease .2s; }