/* Static HTML5 compatibility adjustments. The page structure/classes mirror the original Drupal/Artisteer markup. */
.mjb-content-layout .mjb-sidebar1 { width:25%; }
.mjb-sidebar1 { vertical-align:top; }
.mjb-sidebar1 > .block { margin:0; }
.mjb-sidebar1 .mjb-block { margin:3px; }
.mjb-sidebar1 .mjb-blockcontent-body { padding:0; }
.mjb-sidebar1 .form-item { margin:0; }
.mjb-sidebar1 input[type=text],
.mjb-sidebar1 input[type=search] { width:165px; height:21px; box-sizing:border-box; border:1px solid #c8c8c8; padding:2px 5px; font:13px Tahoma,Arial,Helvetica,sans-serif; color:#555; }
.mjb-sidebar1 .container-inline { padding:5px; }
.mjb-sidebar1 .mjb-button-wrapper { display:block; width:71px; height:29px; margin-top:2px; position:relative; }
.mjb-sidebar1 .mjb-button { width:71px; height:29px; padding:0; border:0; background:url('images/button.png') no-repeat left top; color:#fff; font:13px Tahoma,Arial,Helvetica,sans-serif; cursor:pointer; }
.mjb-post { margin:0; }
.mjb-post-body { padding:0; }
.mjb-postheader { margin-top:0; }
.mjb-postheader img { vertical-align:middle; border:0; margin-right:4px; }
.mjb-postcontent p { font:13px/1.5 Tahoma,Arial,Helvetica,sans-serif; color:#000; margin:0 0 12px; }
.mjb-postcontent a { color:#004A99; text-decoration:underline; }

/* Remove the decorative arrow/background from individual sidebar menu items. The Main Menu header arrow remains. */
ul.mjb-vmenu a .l, ul.mjb-vmenu a .r { display:none; }
ul.mjb-vmenu a .t { padding-left:11px; }

/* Responsive layout: preserves the approved 1000px desktop appearance and
   reflows the site cleanly on tablets and phones. */
@media (max-width: 999px) {
  body { min-width: 0 !important; }

  html, body {
    min-width: 0 !important;
    width: 100%;
    overflow-x: hidden;
  }

  #mjb-main,
  .mjb-sheet {
    width: 100% !important;
    max-width: 1000px;
    min-width: 0 !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .mjb-sheet-body {
    box-sizing: border-box;
    width: 100%;
  }

  .mjb-header {
    height: 22.55vw;
    max-height: 225px;
    min-height: 120px;
    overflow: hidden;
  }

  .mjb-header-clip {
    height: 100%;
  }

  .mjb-header-center {
    width: 100%;
    left: 0;
    height: 100%;
  }

  .mjb-header-png,
  .mjb-header-jpeg {
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center center;
  }

  .mjb-headerobject {
    left: 1.2%;
    top: 5.5%;
    margin-left: 0;
    width: 22.75%;
    height: 36%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
  }

  .mjb-logo {
    top: 5.5%;
    right: 1.2%;
    width: 70%;
    margin-right: 0;
  }

  h2.mjb-logo-text {
    font-size: clamp(9px, 1.4vw, 14px);
    line-height: 1.2;
    white-space: normal;
  }

  .mjb-nav,
  .mjb-nav-outer {
    width: 100%;
    box-sizing: border-box;
  }

  .mjb-hmenu {
    margin-right: 1%;
  }

  .mjb-content-layout {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 800px) {
  /* At tablet/mobile widths, make the left-hand Main Menu and Search blocks full width. */
  .mjb-content-layout,
  .mjb-content-layout-row {
    display: block !important;
    width: 100%;
  }

  .mjb-content-layout .mjb-sidebar1 {
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 3px;
  }

  .mjb-content-layout .mjb-content {
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 5px;
  }

  .mjb-sidebar1 .mjb-block {
    margin: 3px 0;
  }

  .mjb-sidebar1 input[type=text],
  .mjb-sidebar1 input[type=search] {
    width: min(100%, 300px);
  }
}

@media (max-width: 700px) {
  .mjb-sheet {
    margin-top: 0;
  }

  .mjb-header {
    height: 31vw;
    min-height: 112px;
  }

  .mjb-headerobject {
    top: 7%;
    left: 2%;
    width: 30%;
    height: 38%;
  }

  .mjb-logo {
    top: 7%;
    right: 2%;
    width: 64%;
  }

  h2.mjb-logo-text {
    font-size: clamp(8px, 2.2vw, 12px);
  }

  /* Keep Webmail and Cloud readable and right aligned in the red bar. */
  .mjb-hmenu a .t {
    font-size: 12px;
  }

  .mjb-content-layout,
  .mjb-content-layout-row {
    display: block !important;
    width: 100%;
  }

  .mjb-content-layout .mjb-layout-cell,
  .mjb-content-layout .mjb-layout-cell .mjb-content-layout .mjb-layout-cell {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .mjb-sidebar1 {
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 3px;
  }

  .mjb-sidebar1 .mjb-block {
    margin: 3px 0;
  }

  .mjb-sidebar1 input[type=text],
  .mjb-sidebar1 input[type=search] {
    width: min(100%, 300px);
  }

  .mjb-sidebar1 .container-inline {
    padding: 5px;
  }

  .mjb-content {
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 5px;
  }

  .mjb-postheader {
    font-size: 24px;
    line-height: 30px;
  }

  .mjb-postheader img {
    width: 26px;
    height: 26px;
  }

  .mjb-postcontent {
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  /* The desktop Technical Data table becomes a single readable column. */
  .mjb-postcontent table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .mjb-postcontent table tr,
  .mjb-postcontent table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .mjb-postcontent table td {
    padding: 2px 0;
  }

  .mjb-postcontent table td:empty {
    display: none;
  }

  .mjb-postcontent table br {
    display: none;
  }

  .mjb-postcontent table td a {
    overflow-wrap: anywhere;
  }

  .mjb-footer-text {
    padding: 0 8px;
    box-sizing: border-box;
  }

  .mjb-footer-text p {
    line-height: 1.5;
  }

  .mjb-rss-tag-icon {
    left: 8px;
  }
}

@media (max-width: 420px) {
  .mjb-header {
    height: 34vw;
    min-height: 105px;
  }

  .mjb-headerobject {
    width: 32%;
  }

  .mjb-logo {
    width: 62%;
  }

  h2.mjb-logo-text {
    font-size: 8px;
  }

  .mjb-hmenu a .t {
    font-size: 11px;
  }

  .mjb-postheader {
    font-size: 21px;
  }
}

/* ================================================================
   Final desktop/mobile usability refinements
   These rules are intentionally additive: the approved desktop artwork,
   colours, proportions and 1000px layout remain unchanged.
   ================================================================ */

/* Keep media inside the content column on every device. */
.mjb-postcontent img,
.mjb-blockcontent img,
.mjb-footer img {
  max-width: 100%;
  height: auto;
}

/* Long product/document names must wrap rather than create a horizontal scroll. */
.mjb-postcontent a,
.mjb-footer-text a,
.mjb-hmenu a {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Keyboard accessibility without changing the normal visual appearance. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #004A99;
  outline-offset: 2px;
}

.mjb-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 12px;
  background: #ffffff;
  color: #004A99;
  text-decoration: underline;
}

.mjb-skip-link:focus {
  left: 8px;
  top: 8px;
}

/* At intermediate widths, use the available width while retaining the exact
   original proportions until the existing 800px stacking breakpoint. */
@media (min-width: 801px) and (max-width: 999px) {
  .mjb-sheet {
    width: 100%;
    max-width: 1000px;
  }
}

@media (max-width: 800px) {
  /* Comfortable touch targets, while keeping the original blue menu styling. */
  .mjb-vmenu li a {
    min-height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .mjb-hmenu li a {
    min-height: 30px;
    display: flex;
    align-items: center;
  }

  .mjb-hmenu li a .t {
    line-height: 1.25;
  }

  /* Search controls remain compact but are easier to use on touch screens. */
  .mjb-sidebar1 input[type=text],
  .mjb-sidebar1 input[type=search] {
    min-height: 36px;
    height: 36px;
    width: min(100%, 320px);
    font-size: 16px;
  }

  .mjb-sidebar1 .mjb-button-wrapper,
  .mjb-sidebar1 .mjb-button {
    min-height: 36px;
    height: 36px;
  }

  .mjb-sidebar1 .mjb-button {
    width: 90px;
    background-size: auto 36px;
    font-size: 14px;
  }

  /* Prevent the technical-document table from ever forcing a viewport wider
     than the phone. */
  .mjb-postcontent table {
    max-width: 100%;
  }

  /* Footer links become easy-to-tap units rather than tiny inline targets. */
  .mjb-footer-text a {
    display: inline-block;
    padding: 3px 2px;
  }
}

@media (max-width: 600px) {
  /* Give the header a little more vertical room on small phones so the
     original logo/artwork and slogan remain legible instead of being clipped. */
  .mjb-header {
    height: 35vw;
    min-height: 110px;
    max-height: 225px;
  }

  .mjb-headerobject {
    top: 6%;
    left: 2%;
    width: 31%;
    height: 40%;
  }

  .mjb-logo {
    top: 6%;
    right: 2%;
    width: 63%;
  }

  h2.mjb-logo-text {
    font-size: clamp(8px, 2.15vw, 12px);
    line-height: 1.2;
  }

  .mjb-postcontent p {
    line-height: 1.55;
  }
}

@media (max-width: 420px) {
  /* Keep the two utility links readable on very narrow phones. */
  .mjb-hmenu {
    margin-right: 4px;
  }

  .mjb-hmenu li a {
    padding-left: 5px;
    padding-right: 5px;
  }

  .mjb-postheader {
    font-size: 21px;
    line-height: 28px;
  }

  .mjb-postheader img {
    width: 24px;
    height: 24px;
  }

  .mjb-footer-text p {
    margin-bottom: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}