/**
 * tm_awite_v2 - Helix Ultimate / Joomla 4 adjustments
 *
 * Puts the Helix Ultimate and Joomla 4 markup into the shape tm_awite (Helix 2,
 * Bootstrap 2) had, so legacy-template.css and camiq.css render as before.
 * Loaded last of the template styles.
 */

/* ---------------------------------------------------------------------------
 * Page width: Bootstrap 2 / tm_awite 1170px layout
 * (.container had 20px side padding from the preset, content width 1170 / 940 / 724px)
 * ------------------------------------------------------------------------- */
.container {
  max-width: none;
}
@media (min-width: 768px) {
  .container { max-width: 764px; }
}
@media (min-width: 980px) {
  .container { max-width: 980px; }
}
@media (min-width: 1200px) {
  .container { max-width: 1210px; }
}
@media (max-width: 767px) {
  body .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.row {
  --bs-gutter-x: 30px;
}
/* camiq.css sets max-width: calc(100% + 40px) on the banner container; with Bootstrap 2
   the fixed .container width won, in Bootstrap 5 max-width is the width: keep 1170/940/724px */
@media (min-width: 768px) {
  #sp-bottom-top-wrapper div.container { max-width: 724px; }
}
@media (min-width: 980px) {
  #sp-bottom-top-wrapper div.container { max-width: 940px; }
}
@media (min-width: 1200px) {
  #sp-bottom-top-wrapper div.container { max-width: 1170px; }
}
/* Old rules such as "#sp-menu { padding-left: 0 }" or "#sp-component { padding: 0 }" were written
   for Bootstrap 2 columns without padding. In Bootstrap 5 the column padding is the gutter that
   compensates the negative .row margin, so the layout columns keep it. */
#sp-main > section > .container > .container-inner > .row > [class*="col-"],
#sp-main .camiq-breadcrumb-row > [class*="col-"],
#sp-main .camiq-context-row > [class*="col-"] {
  padding-left: calc(var(--bs-gutter-x) * .5) !important;
  padding-right: calc(var(--bs-gutter-x) * .5) !important;
}
.body-innerwrapper {
  overflow-x: visible;
}
/* Top bar as on the Joomla 3 site (measured on www.camiq.net): 34px, search box and login links
   start at 4px (camiq.css), the header starts at 35px */
#sp-top-wrapper #sp-search {
  margin-top: 4px;
}
#sp-header-wrapper {
  margin-top: 35px;
}
/* Account menu (ARI Ext Menu, module class "aritop"): on the Joomla 3 site its top level items ran
   from 4px to 34px, exactly to the bottom of the logged-in bar. Fixed here so the result no longer
   depends on the line-height/box-sizing coming from the ARI stylesheet and Bootstrap 5. */
#sp-top-wrapper #sp-topmenu .ux-menu-container,
#sp-top-wrapper #sp-topmenu ul.ux-menu {
  margin: 0;
  padding: 0;
  line-height: 12px;
}
#sp-top-wrapper #sp-topmenu ul.ux-menu > li.ux-menu-item-level-0 {
  float: left;
  height: 34px;
  line-height: 12px;
}
#sp-top-wrapper #sp-topmenu ul.ux-menu > li.ux-menu-item-level-0 > a {
  display: block;
  box-sizing: border-box;
  height: 30px;
  margin-top: 4px;
  padding: 9px;
  font-size: 13px;
  line-height: 12px;
  white-space: nowrap;
}
#sp-top-wrapper #sp-topmenu ul.ux-menu-sub {
  line-height: normal;
}
#sp-top-wrapper #sp-topmenu ul.ux-menu-sub li a {
  box-sizing: border-box;
  line-height: normal;
}
/* The feature row is pulled 55px up into the slider row. In Bootstrap 2 the feature columns were
   floats and could not start above the floated slider column, which ended 5px lower. */
@media (min-width: 769px) {
  #sp-slideshow-wrapper + #sp-feature-wrapper .container-inner {
    padding-top: 5px;
  }
}
#sp-main {
  display: block;
}
/* Joomla 3 article info (dl.article-info with inline dt/dd); Helix Ultimate makes .article-info a flex box */
div.article-info,
dl.article-info {
  display: block;
}
dl.article-info {
  margin-bottom: 20px;
}
/* Helix 2 had no column wrapper; keep it neutral */
.sp-column {
  height: auto;
}
/* Content column of the old layout was a .span6 inside .row-fluid */
#sp-component {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Icon fonts: camiq.css forces Tahoma on every <span> (!important). Helix Ultimate and
 * Joomla 4 render Font Awesome icons as <span class="fas ...">, so the icon font is set
 * on the glyph itself.
 * ------------------------------------------------------------------------- */
.fa:before, .fas:before, .fa-solid:before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 900;
}
.far:before, .fa-regular:before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
  font-weight: 400;
}
.fab:before, .fa-brands:before {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * Header / logo (Helix Ultimate logo feature in position "logo")
 * ------------------------------------------------------------------------- */
#sp-logo .logo {
  display: inline-block;
  margin: 0;
}
#sp-logo .logo a {
  display: inline-block;
  height: auto;
}
#sp-logo .logo img.logo-image {
  display: inline-block;
  height: 62px;
  width: auto;
  max-width: 100%;
}
#sp-logo .logo .logo-image-phone {
  display: none;
}

/* camiq.css positions #sp-phone absolutely (right: 20px); a Bootstrap 2 column had no padding,
   so the phone/e-mail block ends at the right content edge */
@media (min-width: 400px) {
  #sp-main #sp-header-wrapper #sp-phone {
    padding-right: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
 * Main menu: Helix Ultimate mega menu in the look of the Helix 2 menu
 * ------------------------------------------------------------------------- */
#sp-menu .sp-column {
  display: block;
}
#sp-menu .sp-megamenu-wrapper {
  display: block !important;
}
#sp-menu .sp-megamenu-parent {
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 99;
}
#sp-menu .sp-megamenu-parent:after {
  display: table;
  clear: both;
  content: "";
}
#sp-menu .sp-megamenu-parent > li {
  display: block;
  float: left;
  position: relative;
  background-color: transparent;
  transition: all 200ms;
}
#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span,
#sp-menu .sp-megamenu-parent > li:last-child > a {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: #666;
  font-weight: normal;
  text-decoration: none;
}
#sp-menu .sp-megamenu-parent > li:hover {
  background-color: #00539b;
}
#sp-menu .sp-megamenu-parent > li:hover > a,
#sp-menu .sp-megamenu-parent > li:hover > span {
  color: #fff;
}
#sp-menu .sp-megamenu-parent > li.active > a,
#sp-menu .sp-megamenu-parent > li.active > span,
#sp-menu .sp-megamenu-parent > li.active:hover > a {
  color: #fff;
  background-color: #00539b;
  font-weight: normal;
}
/* no dropdown arrows in the old menu */
#sp-menu .sp-megamenu-parent > li.sp-has-child > a:after,
#sp-menu .sp-megamenu-parent > li.sp-has-child > span:after,
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-has-child > a:after,
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-has-child > span:after {
  display: none;
}

/* dropdown */
#sp-menu .sp-megamenu-parent .sp-dropdown {
  margin: 0;
  z-index: 9999;
}
#sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  padding: 0;
  background: #fff;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  box-shadow: 0px 3px 7px #949494;
}
#sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-items {
  margin: 0;
  padding: 5px 0;
  list-style: none;
}
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item {
  display: block;
  position: relative;
  border-top: 1px solid #eee;
  background: #fff;
  transition: all 200ms;
}
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item:first-child {
  border-top: none;
}
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span:not(.sp-menu-badge) {
  display: block;
  padding: 8px 13px;
  font-weight: 400;
  line-height: normal;
  color: #00539b;
  background: none;
  text-decoration: none;
}
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: #fff;
  background: #00539b !important;
}
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a:hover {
  color: #fff;
}

/* ---------------------------------------------------------------------------
 * Mobile: tm_awite toggler (top left in the blue bar) + Helix Ultimate offcanvas
 * ------------------------------------------------------------------------- */
a.sp-main-menu-toggler {
  display: block;
  box-sizing: content-box;
  text-align: center;
  line-height: 14px;
  font-size: 14px;
  text-decoration: none;
  border-width: 0; /* measured on www.camiq.net: 34x30, no border */
}
@media (min-width: 992px) {
  a.sp-main-menu-toggler {
    display: none !important;
  }
}
/* the toggler HU renders itself is not used */
#offcanvas-toggler.offcanvas-toggler-custom {
  display: none !important;
}
.offcanvas-menu {
  color: #fff;
}
.offcanvas-menu .close-offcanvas .burger-icon > span {
  background-color: #fff;
}
.offcanvas-menu .offcanvas-inner .nav,
.offcanvas-menu .offcanvas-inner ul.menu {
  display: block;
  margin: 0;
}
.offcanvas-menu .offcanvas-inner .nav > li,
.offcanvas-menu .offcanvas-inner .nav-pills > li {
  float: none;
}
.offcanvas-menu .offcanvas-inner ul.menu li a {
  display: block;
  padding: 10px 0;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  font-size: 13px;
}
.offcanvas-menu .offcanvas-inner ul.menu li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu li a:focus,
.offcanvas-menu .offcanvas-inner ul.menu li.active > a {
  color: #fff;
  background: none;
  opacity: .8;
}
.offcanvas-menu .offcanvas-inner ul.menu .menu-toggler {
  color: #fff;
}

/* ---------------------------------------------------------------------------
 * Language switcher dropdown (Bootstrap 5)
 * ------------------------------------------------------------------------- */
#sp-menumodule .dropdown-toggle:after {
  display: none;
}
#sp-menumodule a.dropdown-toggle {
  padding: 0;
}
#sp-menumodule .dropdown-toggle .caret {
  border-top-color: #00539b;
  margin-top: 8px;
}
#sp-menumodule ul.dropdown-menu {
  min-width: 160px;
  padding: 0;
  margin: 2px 0 0;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
#sp-menumodule ul.dropdown-menu > li > a {
  display: block;
  clear: both;
  white-space: nowrap;
  text-decoration: none;
}
/* As in Bootstrap 2: the dropdown box spans the column, the menu opens right-aligned under the globe
   (positioned by CSS, see data-bs-display="static" in html/mod_languages/default.php) */
#sp-menumodule .mod-languages .dropdown {
  position: relative;
  display: block;
}
#sp-menumodule .mod-languages ul.dropdown-menu {
  position: absolute;
  top: 100%;
  left: auto;
  right: -7px;
  margin-top: 0;
  box-sizing: content-box; /* measured on www.camiq.net: 160px + border, top at 170px */
}

/* ---------------------------------------------------------------------------
 * Search box in the top bar (border-box sizing in Bootstrap 5)
 * ------------------------------------------------------------------------- */
#sp-search div.search form {
  text-align: right;
}
#sp-search .input-append {
  margin-bottom: 0;
}
/* Measured on the Joomla 3 site: field 124px + button 40px, flush with the right content edge.
   camiq.css uses calc(100% - 59px), which no longer resolves to that width here. */
#sp-search div.search {
  width: 100%;
}
#sp-search input#mod-search-searchword {
  display: inline-block;
  width: 124px;
  height: 26px;
  margin: 0;
  padding: 2px 6px !important;
  line-height: 20px;
  color: #555;
}
#sp-search input#mod-search-searchword::placeholder {
  color: #555;
  opacity: 1;
}
#sp-search button.button.btn.btn-primary {
  height: 26px;
  line-height: 20px;
}

/* ---------------------------------------------------------------------------
 * System messages: Joomla 4 renders <joomla-alert>; tm_awite showed them as
 * Bootstrap 2 alerts above the content with an icon on the left.
 * ------------------------------------------------------------------------- */
#system-message-container {
  position: static;
  max-width: none;
  right: auto;
  bottom: auto;
  z-index: auto;
}
#system-message-container joomla-alert {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0 0 20px;
  padding: 8px 35px 8px 44px;
  font-size: 13px;
  line-height: 20px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  border-radius: 0;
  box-shadow: none;
}
#system-message-container joomla-alert[type="info"] {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
#system-message-container joomla-alert[type="success"] {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
#system-message-container joomla-alert[type="danger"],
#system-message-container joomla-alert[type="error"] {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}
#system-message-container joomla-alert:before {
  position: absolute;
  top: 10px;
  left: 20px;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 16px;
  content: "\f071"; /* icon-warning-sign */
}
#system-message-container joomla-alert[type="info"]:before,
#system-message-container joomla-alert[type="success"]:before {
  content: "\f05a"; /* icon-info-sign */
}
#system-message-container joomla-alert .alert-heading {
  display: none;
}
#system-message-container joomla-alert .alert-wrapper,
#system-message-container joomla-alert .alert-message {
  display: block;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: inherit;
  background: none;
}
#system-message-container joomla-alert .alert-message a,
#system-message-container joomla-alert .alert-message a:visited {
  text-decoration: underline;
  color: inherit;
}
#system-message-container joomla-alert .joomla-alert--close,
#system-message-container joomla-alert .joomla-alert-button--close {
  position: absolute;
  top: 6px;
  right: 14px;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  background: transparent;
  border: 0;
}
#system-message-container joomla-alert .joomla-alert--close:hover,
#system-message-container joomla-alert .joomla-alert-button--close:hover {
  opacity: 0.4;
}

/* ---------------------------------------------------------------------------
 * Bootstrap 5 / Joomla 4 elements in Bootstrap 2 / CamIQ look
 * ------------------------------------------------------------------------- */
/* Joomla 4 core forms use .form-control / .form-select */
.form-control,
.form-select {
  height: 26px;
  min-height: 26px;
  padding: 2px 6px;
  font-size: 13px;
  line-height: 20px;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: none;
}
textarea.form-control {
  height: auto;
}
.form-select {
  padding-right: 24px;
  background-position: right 6px center;
}
.form-control:focus,
.form-select:focus {
  border-color: #1973c1;
  box-shadow: none;
}
.input-group > .form-control,
.input-group > .btn {
  border-radius: 0;
}
.btn-close {
  opacity: .2;
}
.badge {
  border-radius: 9px;
}
.dropdown-menu {
  border-radius: 0;
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: #fff;
  background-color: #00539b;
}
.modal-content {
  border-radius: 0;
}
.modal-header .modal-title {
  color: #00539b;
  font-size: 16px;
  font-weight: normal;
}
.card {
  border-radius: 0;
}
.page-link {
  border-radius: 0 !important;
}
.pagination .page-item .page-link {
  color: #333;
  background-color: #ccc;
  border-color: #ccc;
  margin-right: 1px;
}
.pagination .page-item .page-link:hover {
  background-color: #ddd;
  border-color: #ddd;
}
.pagination .page-item.active .page-link {
  color: #fff;
  background-color: #00539b;
  border-color: #00539b;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
/* Helix Ultimate pads #sp-footer; on the Joomla 3 site only the container had padding (5px 20px 20px) */
#sp-footer-wrapper {
  padding: 0;
}
/* tm_awite showed the copyright of the template settings as span.copyright (#222, see preset) */
#sp-footer-wrapper .sp-copyright,
#sp-footer-wrapper .copyright {
  display: block;
  padding-top: 25px;
  color: #222;
}
#sp-footer-wrapper ul.nav {
  display: inline-block;
}
#sp-footer-wrapper ul.nav > li {
  float: none;
  display: inline-block;
}
#sp-footer-wrapper ul.nav li a {
  padding: 0;
  background: none;
}

/* ---------------------------------------------------------------------------
 * News list: html/mod_articles_news/ns2.php (Articles - Newsflash, layout "ns2") replaces
 * News Show SP2. The rules of its module stylesheet that the Joomla 3 site used.
 * ------------------------------------------------------------------------- */
h4.ns2-title {
  font-size: 100%;
  font-weight: bold;
}
div.ns2-tools {
  color: #999;
  font-size: 0.9em;
}
div.ns2-author, div.ns2-created, div.ns2-category {
  display: inline;
}
div.nssp2 .flt-left {
  float: left;
}
div.nssp2 .col-1 {
  width: 100%;
}
div.ns2-page {
  overflow: hidden;
}
a.ns2-readmore span {
  margin: 0 5px 0 0;
  padding-left: 0;
  font-size: 0.9em;
}

/* camiq.css: fields in horizontal forms (contact form) are 26px high and fill the controls column.
   The select needs the :not() selectors of legacy-bs2.css to win. */
form.form-horizontal select:not(.form-select):not(.form-control) {
  box-sizing: border-box;
  width: 100%;
  height: 26px;
}

/* Bootstrap 5 tables set their own text colour (#212529); in Bootstrap 2 they inherited #666 */
.table {
  --bs-table-color: inherit;
  --bs-table-striped-color: inherit;
  --bs-table-active-color: inherit;
  --bs-table-hover-color: inherit;
  color: inherit;
}
/* Bootstrap 5 sizes everything border-box; in Bootstrap 2 widths of table cells (DataTables, editor
   tables with width attributes) excluded the padding */
td, th {
  box-sizing: content-box;
}