/* -- Site-wide font: Open Sans family across every element in the page body.
   Font-size is only enforced on the body-text containers so headings keep
   their own sizes (and so <a> tags inside headings inherit the heading
   size, not the body size). */
body,
body p, body li, body td, body div, body span, body a {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
}
body,
body > *,
.item-page p, .item-page li, .item-page td,
#s5_component_wrap p, #s5_component_wrap li, #s5_component_wrap td {
  font-size: 15px !important;
}

/* -- Headings: use Open Sans Semibold (not condensed) for a rounder, more
   evenly-weighted look. The template originally applied Open Sans Condensed
   (narrow / elongated) to every heading class. These selectors mirror the
   template's heading selector list so no heading gets missed. */
#s5_component_wrap h1,
#s5_component_wrap h2,
#s5_component_wrap h3,
#s5_component_wrap h4,
.contentheading,
.page-header h1,
.page-header h2,
.s5_mod_h3,
.s5_am_toggler,
.s5_am_toggler a,
.highlight_font,
.s5_va_element_inner h1,
.s5_va_accordion_inner h3,
.s5_is_display h3,
.slideInfoZone h2 {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
}

/* -- Top nav labels: Open Sans Regular (400). Standard proportions, same
   weight as the body text for a uniform feel across the site. */
#s5_nav > li > span > span > a,
#s5_nav > li > span > span > a > span,
#s5_nav > li > a {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
}

/* -- Top-row tiles: equal height, consistent sizing ------------------------ */
#s5_top_row1_inner {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px;
}
#s5_top_row1_inner > div[id^="s5_pos_top_row1_"] {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
}
#s5_top_row1_inner .module_round_box_outer,
#s5_top_row1_inner .module_round_box-dark_less_padding,
#s5_top_row1_inner .s5_module_box_1,
#s5_top_row1_inner .s5_module_box_2,
#s5_top_row1_inner .custom-dark_less_padding,
#s5_top_row1_inner .s5_is { height: 100%; }
#s5_top_row1_inner .s5_is {
  display: block;
  height: 240px;
  background: #ffffff;
  overflow: hidden;
}
/* The <a> around the image is inline-level by default; make it fill the tile. */
#s5_top_row1_inner .s5_is a {
  display: block;
  width: 100%;
  height: 100%;
}
#s5_top_row1_inner .s5_is img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}

/* The template's module_round_box-dark_less_padding adds a 2px gray padding
   strip around each tile. Zero it so the tiles sit flush. */
#s5_top_row1_inner .module_round_box-dark_less_padding {
  background: transparent !important;
  padding: 0 !important;
}
#s5_top_row1_inner .yt-embed {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 0;
  background: #000;
  overflow: hidden;
}
#s5_top_row1_inner .yt-embed > iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* -- LinkedIn icon (matches #s5_twitter/#s5_facebook sizing) --------------- */
#s5_linkedin {
  height: 23px;
  width: 22px;
  cursor: pointer;
  margin-left: 8px;
  float: right;
  background: #333 no-repeat center / 15px 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/></svg>");
}

/* Clean dropdown menu for #s5_nav.
   Replaces the stripped Joomla MenuMatic/MooTools behavior with a plain
   CSS-hover menu. Nothing fancy: no transitions, no color/background shifts,
   just bolder text on hover. */

/* Let dropdowns escape clipping containers --------------------------------- */
#s5_nav li,
#s5_menu_wrap,
#s5_menu_wrap_inner,
#s5_top_menu,
#s5_header_right_wrap,
#s5_center_column_wrap,
#s5_center_column_wrap_inner { overflow: visible !important; }

/* Wipe template styling off every submenu element -------------------------- */
#s5_nav ul,
#s5_nav ul li,
#s5_nav ul li span,
#s5_nav ul li a {
  all: unset;
  box-sizing: border-box;
}

/* Structural layout on top-level ------------------------------------------- */
#s5_nav { list-style: none; margin: 0; padding: 0; }
#s5_nav > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* No padding-bottom hover-area extension here; the dropdown's own ::before
     pseudo-element (18px taller than its visual top) handles the hover-gap
     bridge without inflating the active/hover box around top-level items. */
}

/* Template parks submenus with `margin-left: -1000em` and `margin-top: 2.2em`
   and even re-applies the negative margin on `#s5_nav li:hover ul ul` -- we need
   !important on margins and width to beat that. */

/* First-level dropdown panel ---------------------------------------------- */
#s5_nav > li > ul,
#s5_nav li:hover > ul {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0 !important;
  width: auto !important;
  min-width: 300px;
  padding: 6px 0;
  z-index: 99999;
  background: #ffffff;
  border: 1px solid #cfcfcf;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  list-style: none;
}
#s5_nav > li > ul { display: none; }

/* Nested panel: appears flush to the RIGHT of its parent row --------------- */
#s5_nav ul ul,
#s5_nav li:hover ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  margin: 0 !important;
  width: auto !important;
  min-width: 240px;
  padding: 6px 0;
  z-index: 100000;
  background: #ffffff;
  border: 1px solid #cfcfcf;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  list-style: none;
}
#s5_nav ul ul { display: none; }

/* Open on hover ----------------------------------------------------------- */
#s5_nav li:hover > ul,
#s5_nav li:focus-within > ul { display: block; }

/* Transparent overshoot bridge above the first-level panel so hover is
   forgiving while the mouse crosses from the tab into the panel. */
/* Transparent "overshoot" zone that extends 18px above the dropdown's visible
   top edge so the mouse can safely cross the gap between the top-level item
   and the dropdown without losing hover. */
#s5_nav > li > ul::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
  background: transparent;
}

/* Submenu rows ------------------------------------------------------------ */
#s5_nav ul li {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

/* Only the inner <a> owns the row's padding. The .S5_submenu_item SPAN
   wrapper and the .s5_sub_a_span inner SPAN are transparent passthroughs so
   stacked padding can't drift on hover. */
#s5_nav ul li a {
  display: block !important;
  padding: 10px 18px !important;
  color: #333 !important;
  font-family: 'Open Sans', 'Open Sans Condensed', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  background: transparent !important;
  cursor: pointer !important;
  border: 0 !important;
  margin: 0 !important;
}
#s5_nav ul li .S5_submenu_item,
#s5_nav ul li .s5_sub_a_span {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font: inherit !important;
  color: inherit !important;
}
#s5_nav ul li a .s5_sub_a_span {
  display: inline !important;
}

/* Hover state: ONLY change text colour to the site accent blue, and ONLY on
   the row the cursor is directly over. Using `li:hover` here would propagate
   up to every ancestor <li> (since :hover bubbles through descendants), so
   SERVICES-hover would turn every dropdown item blue. Keying off `a:hover`
   instead isolates the colour change to the actually-hovered <a>. */
#s5_nav ul li a:hover,
#s5_nav ul li a:hover * {
  color: #2f71b3 !important;
}

/* The template adds `box-shadow: 0 0px 3px #DAD9D9` on `#s5_nav li:hover`.
   On DROPDOWN rows this manifested as the stray gray halo above/below.
   On the TOP-LEVEL nav items the same shadow produces the subtle lifted-card
   effect around HOME/ABOUT US/etc that the original site shows. Keep the
   shadow on top-level items, strip it only from items INSIDE a dropdown
   panel (any <li> nested under a <ul> descendant of #s5_nav). */
#s5_nav ul li:hover,
#s5_nav ul li.mainMenuParentBtnFocused {
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
/* The template adds a padding reduction + 1px border to .S5_submenu_item:hover
   and .S5_grouped_child_item .S5_submenu_item:hover. Lock them to the resting
   state (0 padding, 0 border) so there's zero geometry change on hover. */
#s5_nav .S5_submenu_item,
#s5_nav .S5_submenu_item:hover,
#s5_nav .S5_grouped_child_item .S5_submenu_item,
#s5_nav .S5_grouped_child_item .S5_submenu_item:hover {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: block !important;
}

/* Chevron indicator (absolute so it never wraps). Add generous right padding
   so even the longest labels ("Environmental Regulatory Compliance") don't
   smush into the chevron glyph. */
#s5_nav ul li:has(> ul) > a,
#s5_nav ul li:has(> ul) > .S5_submenu_item {
  padding-right: 44px !important;
}
#s5_nav ul li:has(> ul) > a::after,
#s5_nav ul li:has(> ul) > .S5_submenu_item::after {
  content: "\203A";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 18px;
  line-height: 1;
}