/*
 * Divi 5 compatibility layer.
 *
 * The Divi 4 -> Divi 5 migrator drops or reshuffles a number of settings
 * (Customizer typography, button spacing, Theme Builder custom CSS, ...).
 * The rules below restore the Divi 4 presentation of hydrostor.ca.
 */

/* === TYPOGRAPHY (Divi 4 Customizer) === */
body {
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

.et_pb_button {
  font-weight: 500;
}

.et_pb_text_inner h1 {
  font-size: 3em;
  line-height: 1.8em;
}

@media (max-width: 767px) {
  .et_pb_text_inner h1 {
    font-size: 2.6em;
  }
}

/* H2 line height on phones. */
@media (max-width: 767px) {
  #et-main-area h2,
  #et-main-area h2.et_pb_module_header,
  #et-main-area .et_pb_text_inner h2 {
    line-height: 1.3em !important;
  }
}

/* === CALL-TO-ACTION BUTTONS ===
 * Classes are added by assets/js/divi5-compat.js to buttons that lost the
 * Divi 4 global arrow icon. */
body #page-container #et-main-area .et_pb_button.hs-cta::after {
  position: absolute !important;
  margin-left: 1.8em !important;
}

body #page-container #et-main-area .et_pb_button.hs-cta--padded {
  padding: 1vh 7vh 1vh 3vh !important;
}

/* On phones the arrow sat ~22px from the button's right edge (the vh-based
 * values shrink on browsers with a short viewport), closer than the text is to
 * the left edge. The arrow now sits 36px from the edge, in px so it does not
 * depend on the viewport height. */
@media (max-width: 767px) {
  body #page-container #et-main-area .et_pb_button.hs-cta--padded {
    padding-right: 76px !important;
  }

  body #page-container #et-main-area .et_pb_button.hs-cta--padded::after {
    right: 36px !important;
  }
}

/* === FOOTER ===
 * Scoped to #footer (not a module number) because some pages embed a copy of
 * the footer inside their content. */
#footer .et_pb_image {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 56%;
  text-align: left;
}

#footer .et_pb_signup {
  row-gap: 0 !important;
  --vertical-gap: 0px !important;
}

#footer .et_pb_signup.et_pb_subscribe .et_pb_newsletter_description_content,
#footer .et_pb_signup.et_pb_subscribe .et_pb_newsletter_footer {
  font-size: 16px !important;
}

#footer .et_pb_newsletter .et_pb_newsletter_form {
  padding-top: 25px;
}

#footer .et_pb_newsletter .et_pb_newsletter_fields {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  column-gap: 0 !important;
}

#footer .et_pb_newsletter .et_pb_newsletter_field {
  flex: 1 1 auto;
  width: auto;
}

#footer .et_pb_newsletter_field label {
  display: none;
}

#footer .et_pb_newsletter_button_wrap {
  flex: 0 0 auto;
  max-width: 60px;
}

#footer .et_pb_signup.et_pb_subscribe .et_pb_newsletter_button.et_pb_button {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Footer menus are right aligned on tablet/phone after conversion; Divi 4 kept them left. */
@media (max-width: 980px) {
  #footer .et_pb_menu {
    text-align: left;
  }
}

/* === HEADER ===
 * Divi 4 drew the menu button border on the icon wrapper; Divi 5 draws it on the
 * (much wider) module, which shows up as an extra empty pill. The menu icons are
 * now plain SVGs without borders (see header.css). */
#open-icon,
#close-icon {
  border: 0 !important;
  border-radius: 0 !important;
}

#open-icon .et_pb_icon_wrap,
#close-icon .et_pb_icon_wrap {
  width: 50px;
  height: 50px;
}

/* === SLIDER === */
.hs-slider {
  background-color: #0c284c;
}

/* === BLURBS ===
 * Divi 5 has no equivalent for the Divi 4 blurb "Text" settings (size, colour,
 * weight), so they were dropped during conversion. The body copy kept its own
 * relative sizes; only the headings, which scale from the blurb, need help. */

.et_pb_blurb .hs-empty {
  display: none;
}

/* Team member cards (class set on the modules in the page content). */
.et_pb_blurb.our-team-blurb .et_pb_module_header {
  font-size: 1.44em;
}

/* Office list that sits next to the contact form on several pages. */
.et_pb_section:has(.et_pb_contact_form_container)
  .et_pb_column:not(:has(.et_pb_contact_form_container))
  .et_pb_blurb
  .et_pb_module_header {
  font-size: 1.08em;
}

/* Blurb images: the migrator sets the image width to 100% of the column, so a
 * 60px icon image renders at column width. Divi 4 showed it at its natural
 * size. Applies to every blurb image; add the class "hs-img-fill" to a blurb
 * that really should fill its column. */
.et_pb_blurb:not(.hs-img-fill) .et_pb_main_blurb_image .et_pb_image_wrap img[width] {
  width: auto !important;
  max-width: 100%;
}

/* Modal close buttons: Divi 4 drew the white pill on the icon wrapper, Divi 5
 * draws it on the whole module, which turns it into a full-width bar. */
.close-modal-member,
.close-modal-information {
  background-color: transparent !important;
  border-radius: 0 !important;
}

.close-modal-member .et_pb_icon_wrap,
.close-modal-information .et_pb_icon_wrap {
  background-color: #fff;
  border-radius: 100px;
}

/* Project hero: the logo sits in the same column as the "Discover" button and
 * lines up with it. Divi 5 gives image modules `margin-left: auto`, which pushed
 * the logo ~125px to the right of the button. */
.et_pb_column:has(.et_pb_button_module_wrapper) > .et_pb_image {
  margin-left: 0;
}

/* Key-facts lists (project "Project Highlights"): a blurb with the icon on the
 * left is a label/value row. Divi 4 laid the heading and the description side
 * by side (text aligned left on some projects, right on others); Divi 5 stacks
 * them in a column. Only blurbs whose container is a flex box (the key-facts
 * ones) are affected: `flex-direction` is ignored on any other container. */
.et_pb_blurb.et_pb_blurb_position_left .et_pb_blurb_container {
  flex-direction: row;
}

/* The label never shrinks or breaks ("Econ-omic"); the value takes the rest of
 * the row and wraps there, as in production. */
.et_pb_blurb.et_pb_blurb_position_left .et_pb_blurb_container > .et_pb_module_header {
  flex: 0 0 auto;
}

.et_pb_blurb.et_pb_blurb_position_left .et_pb_blurb_container > .et_pb_blurb_description {
  flex: 0 1 auto;
  min-width: 0;
}

/* Row max-height: Divi 4 applied a row's "max height" on desktop only. Divi 5
 * prints it for every size, so on tablet/phone, where the columns stack, the
 * row is capped and the last column is squashed and clipped (the cavern
 * image on /geology/). Let stacked rows grow with their content. The Technology
 * slider's drawing row (.top-slider-image) keeps its cap: production keeps it on
 * phones too, and the pinned slider's height depends on it. */
@media (max-width: 980px) {
  body #et-main-area .et_pb_section:not(.top-slider-image) .et_pb_row {
    max-height: none;
  }
}

/* === CONTENT WIDTH ===
 * Divi 4 rows were 90% wide on this site (the width was set on each row).
 * The migrator drops that per-row width, so every row falls back to Divi 5's
 * global default of 80% and the whole site looks narrower. Set the global
 * Divi 5 value to 90%. `html:root` outranks the `:root` Divi prints. */
html:root {
  --content-width: 90%;
}

/* Rows of a specialty section (the "Our company" block on the home page and
 * /ees/) kept Divi's default 80% in Divi 4. */
.et_pb_section.et_section_specialty > .et_pb_row {
  width: 80%;
}

/* === SINGLE POST HEADER (Back to News, category, title, date) ===
 * Divi 4 -> 5 dropped the blurb text size (1.2em) and the 30px gap under the
 * category/title blurb, the date block grew 10%, and the circle of the
 * "Back to News" arrow lost its offset. Press releases and insights keep their
 * own look; this only restores spacing and sizes. */
body.single-post #et-main-area .et_pb_blurb:has(.et-pb-icon) {
  font-size: 1.2em;
  margin-bottom: 30px;
}

/* The category dot waits for a scroll animation that never starts: show it. */
.et_pb_blurb .et_pb_main_blurb_image .et-pb-icon.et-waypoint {
  opacity: 1 !important;
}

/* Arrow circle of the Back to News button: sits left of the label. */
/* Tablet and phone: a little more room between "Back to News" and the category
 * below it (the row is moved down by divi5-compat.js, which does not push the
 * next row). */
@media (max-width: 980px) {
  body.single-post #et-main-area .et_pb_row:has(a.et_pb_button[href$='/media/']) {
    margin-bottom: 20px !important;
  }
}

body.single-post #et-main-area a.et_pb_button[href$='/media/']::before {
  margin-left: -2.4em !important;
}

/* On hover only the arrow circle turns light blue (its ::before); Divi 5 also
 * painted the whole button pill. */
body.single-post #et-main-area a.et_pb_button[href$='/media/']:hover {
  background-color: transparent !important;
}

/* Insights posts lost the 1.8em / 1.3 line-height of their title; divi5-compat.js
 * marks those blurbs (press releases kept their own size and are not marked). */
body.single-post #et-main-area .et_pb_blurb.hs-post-title-lg .et_pb_blurb_description {
  font-size: 1.8em;
  line-height: 1.3;
}

/* Date: 12.8px text with a 53.76px day number, 27.2px lines. */
body.single-post #et-main-area .et_pb_text:has(.day) .et_pb_text_inner {
  font-size: 12.8px;
  line-height: 27.2px;
}

/* === SVG IMAGES: NO CROP ON HOVER ===
 * Every image grows 4% on hover (magnetic-hover.css) inside a wrapper that
 * clips (rounded corners, style.css). For raster pictures that is the intended
 * look, but SVG artwork such as the Quinte timeline has content at its very
 * edge (the "2024" label, the arrow) and got cut off. Let SVGs overflow. */
.et_pb_image_wrap:has(> img[src$='.svg']),
.et_pb_image_wrap:has(> img[src*='.svg?']) {
  overflow: visible !important;
}

/* === INVESTOR LOGOS (Our Company, row of six logos) ===
 * Every logo is 80px tall and as wide as its picture allows. Divi 5 gave the
 * Goldman Sachs SVG `height: auto` instead, so on phones it grew to 177x98 and
 * sat lower than its neighbours. */
.et_pb_row_6col .et_pb_blurb .et_pb_main_blurb_image img {
  width: auto !important;
  height: 80px !important;
  max-width: 100%;
  object-fit: contain;
}

/* The Goldman Sachs blurb also lost the 30px gap under its logo, so its name sat
 * 30px higher than the other investors'. */
.et_pb_row_6col .et_pb_blurb .et_pb_main_blurb_image {
  margin-bottom: 30px !important;
}

/* === IMAGE MODULES: NATURAL WIDTH ===
 * Divi 4 showed an image module's picture at its own proportions (the module
 * only set a height, or nothing). The migrator turns that into `width: 100%`,
 * which stretches the featured image of a post (1296x400 instead of 722x400).
 * Other image modules really are full width (hero pictures), so only the post
 * template is restored here. SVG icons are handled in divi5-compat.js: with
 * `width: auto` a bare SVG fills its column, so they need the width attribute. */
body.single-post .et_pb_image .et_pb_image_wrap img[width] {
  width: auto !important;
  max-width: 100%;
}

/* The post's own featured image (title module) went the same way: its wrapper
 * became a flex box and the picture fills the whole row (1296x400 instead of
 * 722x400). It keeps its ratio again, as in Divi 4. */
.et_pb_post_title .et_pb_title_featured_container .et_pb_image_wrap {
  display: inline-block;
  max-width: 100%;
}

.et_pb_post_title .et_pb_title_featured_container .et_pb_image_wrap img {
  width: auto !important;
  max-width: 100%;
}

/* Footer social links (LinkedIn, YouTube): on tablets the narrow third column
 * broke "LinkedIn" and "YouTube" in the middle of the word. */
[class*='_tb_footer'] .et_pb_blurb .et_pb_module_header {
  white-space: nowrap;
}

/* === MOBILE FOOTER: TWO COLUMNS OF LINKS ===
 * The two footer menus (Home..Company and Newsroom..Media Kit) stacked into one
 * long column with ~66px between links. On phones they sit side by side, half
 * the width each, with tight spacing. */
@media (max-width: 767px) {
  [class*='_tb_footer'] .et_pb_row:has(> .et_pb_column .et_pb_menu) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  [class*='_tb_footer'] .et_pb_row > .et_pb_column:has(.et_pb_menu) {
    flex: 0 0 50%;
    width: 50% !important;
    max-width: 50%;
    box-sizing: border-box;
    margin-right: 0 !important;
    margin-bottom: 0;
  }

  /* Logo/newsletter and the social links keep a full row of their own. */
  [class*='_tb_footer'] .et_pb_row:has(> .et_pb_column .et_pb_menu) > .et_pb_column:not(:has(.et_pb_menu)) {
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 100%;
  }

  /* The links carry a fixed ~300px width from the template; inside a half-width
   * column that pushed the page wider than the screen. */
  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et_pb_menu__wrap,
  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et_pb_menu__menu,
  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et-menu-nav,
  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et-menu,
  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et-menu > li,
  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et-menu > li > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et-menu {
    gap: 0;
  }

  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et-menu > li {
    margin-top: 0;
  }

  [class*='_tb_footer'] .et_pb_column .et_pb_menu .et-menu > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* === TECHNOLOGY: HORIZONTAL SCROLL SLIDES ON PHONES ===
 * The page's scroll-driven slider (custom code, ScrollTrigger) fixes every slide
 * at 800px with a 450px text block, so on a ~390px screen the text was cut off at
 * the edge. Only the text block is narrowed here (90% of the screen, at most
 * 393px). The 800px slide cell stays: the slider derives everything from the
 * track width (scroll distance = track - screen, and the process drawing is
 * stretched to the track), so narrower cells made the scroll about 3x shorter
 * ("sensitive") and shrank the drawing that slides behind the text. The selectors
 * need the #hydrostor-horizontal wrapper that the same script creates, because
 * its own rules use it with !important. */
@media (max-width: 767px) {
  #hydrostor-horizontal .hs-horizontal-container .horizontal-section .et_pb_row {
    width: min(90vw, 393px) !important;
    max-width: min(90vw, 393px) !important;
    padding-left: 5vw !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  #hydrostor-horizontal .hs-horizontal-container .horizontal-section .et_pb_column {
    width: 100% !important;
    margin: 0 !important;
  }

  #hydrostor-horizontal .hs-horizontal-container .horizontal-section .et_pb_blurb {
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  /* Bring the slide text up under the drawing: it started ~480px down, so on a
   * phone with browser bars the lower lines were below the visible area. */
  #hydrostor-horizontal .hs-horizontal-container {
    top: -100px;
  }

  /* The slider stops with the last cell 800px - screen width short of centred, so
   * its text slid out to the left at the very end (production does the same).
   * Pushing the last text block right by that amount leaves it in view when the
   * scroll ends. */
  #hydrostor-horizontal .hs-horizontal-container .horizontal-section:last-child .et_pb_row {
    margin-left: calc(800px - 100vw) !important;
    margin-top: 30px !important;
  }

  /* "Scroll to Explore" does not advance the slider on touch screens, so it only
   * looks broken there. The last slide keeps its "Watch Video" button. */
  #hydrostor-horizontal .hs-horizontal-container .horizontal-section:not(:last-child) .et_pb_button_module_wrapper {
    display: none !important;
  }

  /* The drawing's top (tank roofs) was cut off by the fixed header; move it down
   * a little. Its row keeps production's height cap, so nothing below moves. */
  html body #hydrostor-horizontal .hs-horizontal-slider-wrapper .hs-top-image {
    margin-top: -130px !important;
  }
}

/* === PROJECT HIGHLIGHTS ON PHONES: STACKED, LEFT ALIGNED ===
 * Label and value side by side (value right aligned, wrapping in a narrow
 * column) looked cramped on phones. Each row becomes: dot + label, then the value
 * underneath, all left aligned. divi5-compat.js adds hs-keyfact to these rows. */
@media (max-width: 767px) {
  .et_pb_blurb.hs-keyfact .et_pb_blurb_content {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    text-align: left !important;
  }

  .et_pb_blurb.hs-keyfact .et_pb_main_blurb_image {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 8px 0 0 !important;
  }

  .et_pb_blurb.hs-keyfact .et_pb_blurb_container {
    display: contents !important;
  }

  .et_pb_blurb.hs-keyfact .et_pb_blurb_container > .et_pb_module_header {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .et_pb_blurb.hs-keyfact .et_pb_blurb_container > .et_pb_blurb_description {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    text-align: left !important;
  }

  .et_pb_blurb.hs-keyfact .et_pb_blurb_description p {
    text-align: left !important;
  }
}

/* === TECHNOLOGY: SLIDE COUNTER ("1/4" next to its dot) ===
 * The dot is an icon-font glyph in a table layout; its vertical position inside
 * the line box differs between browsers, and in Safari the number rode well above
 * it. The glyph is hidden and the dot is drawn as a background circle in a flex row,
 * centred on the same 19px line box as the number, so they line up everywhere.
 * divi5-compat.js adds hs-counter to blurbs that have a title and no text. */
.horizontal-section .et_pb_blurb.hs-counter .et_pb_blurb_content {
  display: flex !important;
  align-items: flex-start !important;
  padding-bottom: 15px;
}

.horizontal-section .et_pb_blurb.hs-counter .et_pb_main_blurb_image {
  display: flex !important;
  align-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 19px;
  margin: 3px 0 0 !important;
  background: radial-gradient(circle at 8px 50%, #0c284c 0 7.5px, transparent 8.5px) no-repeat !important;
}

.horizontal-section .et_pb_blurb.hs-counter .et_pb_main_blurb_image {
  /* No entrance animation: the waypoint never fires for steps that are off to the
   * side, which left their dots invisible until the page was scrolled. */
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  visibility: visible !important;
}

.horizontal-section .et_pb_blurb.hs-counter .et_pb_main_blurb_image > * {
  display: none !important;
}

.horizontal-section .et_pb_blurb.hs-counter .et_pb_module_header {
  height: 19px;
  padding: 0 !important;
  line-height: 19px !important;
}

/* === TECHNOLOGY: SIDE-SCROLL VARIANT ON PHONES ===
 * The 2025 theme did not pin the process slider on phones: the steps sat in a
 * row that you swipe sideways, with the drawing moving along. The scroll-driven
 * pin is fragile on touch screens (Safari address bar, momentum), so
 * divi5-compat.js switches it off on phones (class hs-side on <html>) and the
 * wrapper becomes a native, snapping side scroller. The drawing moves with a
 * small parallax computed in the script. */
@media (max-width: 767px) {
  html.hs-side body #hydrostor-horizontal .hs-horizontal-slider-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  html.hs-side .hs-horizontal-slider-wrapper::-webkit-scrollbar {
    display: none;
  }

  html.hs-side body #hydrostor-horizontal .hs-horizontal-slider-wrapper > .top-slider-image {
    overflow: hidden !important;
  }

  html.hs-side body #hydrostor-horizontal .hs-horizontal-slider-wrapper .hs-top-image {
    width: auto !important;
    max-width: none !important;
    height: 300px !important;
    margin-top: -100px !important;
    will-change: transform;
  }

  html.hs-side body #hydrostor-horizontal .hs-horizontal-container {
    top: 0;
    margin-top: -15px !important;
    width: max-content;
    box-sizing: border-box;
    padding: 0 5vw;
  }

  html.hs-side body #hydrostor-horizontal .hs-horizontal-container .horizontal-section {
    flex: 0 0 min(calc(100vw - 96px), 420px) !important;
    width: min(calc(100vw - 96px), 420px) !important;
    margin-right: 40px !important;
    opacity: 1 !important;
    scroll-snap-align: start;
    scroll-margin-left: 5vw;
  }

  html.hs-side body #hydrostor-horizontal .hs-horizontal-container .horizontal-section:last-child {
    margin-right: 0 !important;
  }

  html.hs-side body #hydrostor-horizontal .hs-horizontal-container .horizontal-section .et_pb_row,
  html.hs-side body #hydrostor-horizontal .hs-horizontal-container .horizontal-section:last-child .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  /* The side-scroll buttons work again: they bring the next step into view. */
  html.hs-side body #hydrostor-horizontal .hs-horizontal-container .horizontal-section:not(:last-child) .et_pb_button_module_wrapper {
    display: block !important;
  }
}

/* === TEAM / INFO MODALS: FULL WIDTH ON PHONES ===
 * The side panel is 80% of the screen wide, which on a phone leaves a 78px
 * strip of page beside a 232px column of text. On phones it covers the screen
 * (ids come from team-modal.js, which opens them by id). */
@media (max-width: 767px) {
  #team-member-modal,
  #more-info-modal {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  #team-member-modal .et_pb_row,
  #more-info-modal .et_pb_row {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}