/* Defensive overrides for the main article/content area.
   Loaded last so it wins the cascade regardless of what legacy CSS does. */
#contentarea-main {
    width: 100% !important;
    display: block !important;
    float: none !important;
}
#contentarea-main .container {
    width: 100% !important;
}
#contentarea-main .col-md-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

/* Left/right sidebar columns (inner pages only) — flexbox instead of the
   original float+percentage layout, which depended on JS we don't have. */
#contentarea-main .left1 {
    float: none !important;
    flex: 0 0 21% !important;
    max-width: 21% !important;
    box-sizing: border-box !important;
}
#contentarea-main #right {
    float: none !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
    box-sizing: border-box !important;
}

/* Center column: full width when alone (homepage), flexible remainder when
   sidebars are present (inner pages). */
#wrapper1.shownocolumns {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}
#wrapper1:not(.shownocolumns) {
    float: none !important;
            flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}
#main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}
#main .item-page,
#main .com-content-article,
#main .item-page * ,
#main .com-content-article * {
    opacity: 1 !important;
    visibility: visible !important;
    color: #091655 !important;
    float: none !important;
}
#main .item-page,
#main .com-content-article {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    clear: both;
}
#main .item-page h1,
#main .com-content-article h1,
#main .item-page h2,
#main .com-content-article h2,
#main .item-page h2 *,
#main .com-content-article h2 * {
    color: #F4EA2B !important;
}
#main h3 {
    color: #091655 !important;
}
#main h3.hl a.feature,
#main h3 a.feature,
#main .item-page a {
    color: #091655 !important;
    text-decoration: underline;
}

/* Sidebar modules (Latest Feature Offerings / info box) — Joomla's default
   module chrome wraps content in a generic ".custom" class that collides
   with an unrelated dark-background rule, making text render white-on-white. */
.left1,
.left1 *,
#right,
#right * {
    color: #091655 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.left1 h3.hl a.feature,
.left1 h3 a.feature,
#right a {
    color: #091655 !important;
    text-decoration: underline;
}
.left1 .moduletable > h3 {
    background: #F4EA2B !important;
    color: #091655 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 4% 3.75% !important;
    margin: 0 0 10px 0 !important;
}
/* "Latest Feature Offerings" content (._s8) is meant to sit in a navy panel
   below its yellow title bar, matching .latestnews_s8's intended look — but
   this module's actual markup is a plain Custom module (.mod-custom.custom),
   not .latestnews_s8, so that existing rule never matched it. */
.left1 .moduletable._s8 .mod-custom {
    background: #091655;
    padding: 5% 5%;
}
.left1 .moduletable._s8 .mod-custom h3.hl a.feature {
    color: #fff !important;
    font-size: 14px !important;
}
/* Scoped to ._s6 (the "Industrial Asset Management..." module's class
   suffix) specifically, not .moduletable generally, so this doesn't also
   apply to Join Us or other right-column modules that share the same
   .moduletable wrapper. */
#right .moduletable._s6 {
    border-left: 1px solid #ddd;
    padding-left: 15px;
}
#right .moduletable > h3 {
    background: none;
    color: #333 !important;
    font-size: 19.6px;
    font-weight: bold;
    padding: 0 0 15px 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #ddd;
}

/* The broad "#right *{color:#091655 !important}" rule above (needed for other
   right-column content) also flattens this search button's icon to navy on
   navy, making it disappear. Restore its intended white icon. */
#right .btn-primary,
#right .btn-primary * {
    color: #fff !important;
}
/* Let the input fill the row and stretch to the same right edge as the
   content below it, instead of a fixed width that leaves it short and
   misaligned with the button pinned at a fixed size. */
#right .mod-finder__search {
    width: 100%;
}
#right .mod-finder__search .awesomplete {
    flex: 1 1 auto;
}
#right .js-finder-search-query {
    width: 100%;
}

/* JT Search — force it permanently open (site design wants an always-visible
   inline search box, not JT's default click-to-reveal overlay/drawer). */
.jt-search-wrap .search-btn {
    display: none !important;
}
.jt-search-wrap .close-btn {
    display: none !important;
}
.jt-search-wrap nav {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}
.jt-search.container {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    opacity: 1 !important;
    background-color: transparent !important;
    transition: none !important;
    z-index: auto !important;
    /* Bootstrap's generic .container class (which this element also carries)
       adds 15px left/right gutters, insetting the search box from the edges
       that every other sidebar element (heading, list) is flush against. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.jt-search-wrap .mod-jtsearch {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
    width: 100% !important;
}
.jt-search-wrap .awesomplete {
    height: auto !important;
}
.jt-search-wrap input[type="text"] {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 38px !important;
    font-size: 14px !important;
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 3px 0 0 3px !important;
    padding: 0 10px !important;
}
.jt-search-wrap input[type="text"]::placeholder {
    color: #888 !important;
}
.jt-search-wrap .btn.btn-primary {
    position: static !important;
    transform: none !important;
    width: auto !important;
    min-width: 50px !important;
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 0 3px 3px 0 !important;
    background-color: #091655 !important;
    color: #F4EA2B !important;
    font-size: 14px !important;
    font-weight: bold !important;
    display: grid !important;
    place-items: center !important;
    white-space: nowrap !important;
}
.jt-search-wrap .btn.btn-primary:hover {
    background-color: #F4EA2B !important;
    color: #091655 !important;
}
.jt-search-wrap .btn.btn-primary .icon-search {
    font-size: 0 !important;
}
.jt-search-wrap .btn.btn-primary .icon-search::before {
    content: "GO";
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
}
.jt-search-wrap .mod-finder__search {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}
.jt-search-wrap .awesomplete {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Standard "visually-hidden" utility (screen-reader-only text) — our legacy
   CSS doesn't define this Bootstrap 5 class, so labels using it were
   rendering as plain visible text. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Responsive: stack the 3-column inner-page layout vertically on narrow
   screens instead of squeezing left1/wrapper1/right side-by-side. */
@media (max-width: 768px) {
    #contentarea-main .left1,
    #wrapper1:not(.shownocolumns),
    #contentarea-main #right {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #header .logoheader {
        height: auto !important;
        min-height: 0 !important;
        padding: 10px 0 !important;
    }
    #logo img {
        max-width: 90% !important;
        height: auto !important;
    }
    .lang-selector {
        position: static !important;
        text-align: center !important;
        padding: 5px 0 !important;
    }

    #topmenu ul {
        display: none;
    }
    #topmenu ul.force-show {
        display: block !important;
    }
    #topmenu li {
        float: none !important;
        display: block !important;
        width: 100% !important;
    }

    .jt-search.container {
        max-width: 100% !important;
    }
}