/* Overrides for the static site on top of the WordPress theme's main.css.
   The theme revealed content with JavaScript (body.is-loaded + per-element transitions);
   we set is-loaded on the body at render time, and these rules cover the pieces we rebuilt. */

/* Logo colours (were an inline <style> inside the SVG; moved here so the CSP needs no inline style elements) */
.site-logo-svg .b { fill: #fff; }
.site-logo-svg .c { fill: #5b968c; }

/* Nothing may stay invisible when scripts are blocked or slow */
.hero-text h1, .hero-text p, .hero-bg, .page-intro h1, .page-intro-bg, .launch-item, .member-item {
  opacity: 1 !important;
  transform: none !important;
}
.hero-text h1:after { width: 160px !important; }

html { scroll-behavior: smooth; }

/* Carousels the theme ran with Owl, rendered as plain blocks */
.owl-carousel.logo-carousel, .owl-carousel.testimonial-carousel { display: block; }
.logo-list .logo img { opacity: 1 !important; }
.testimonial { opacity: 1 !important; transform: none !important; }
.stat-item-number { opacity: 1 !important; }
.stat-item-graph canvas { display: none; }

/* Embedded video in customer stories */
.entry-content iframe { max-width: 100%; }

/* Product category pages: the Owl carousel markup rendered as a plain row */
.owl-carousel.product-category-carousel { display: flex; flex-wrap: wrap; }
.owl-carousel.product-category-carousel .product-category-item { flex: 1 1 200px; height: auto; }

/* Home: the four product categories, previously an Owl carousel */
.product-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
.product-category-grid .product-category-item { height: auto; }
.product-category-grid .product-category-item span { display: block; margin-top: 16px; font-size: 0.875rem; line-height: 1.4; }
@media screen and (max-width: 639px) {
  .product-category-grid { grid-template-columns: 1fr; }
}
.news-feed-more { padding: 20px; margin: 0; }

/* News posts and customer stories: the title is the page's h1 but keeps the theme's h2 look */
h1.post-title {
  font-size: 1.5rem; line-height: 1.75rem; font-weight: 600; color: #5b968c;
  padding-bottom: 20px; margin-bottom: 30px; position: relative;
}
h1.post-title:after {
  content: ""; position: absolute; width: 160px; height: 1px; background: #5b968c; bottom: 0; left: 0;
}
@media screen and (min-width: 880px) { h1.post-title { font-size: 1.75rem; line-height: 1.875rem; } }
@media screen and (min-width: 1330px) { h1.post-title { font-size: 2rem; line-height: 2.125rem; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.news-featured { margin: 0 0 30px; }
.news-featured img { max-width: 100%; height: auto; display: block; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 40px 20px 60px; }
.pagination-status { color: #00232c; }

/* Contact */
.page-intro-details { padding: 40px 20px; background: #fff; }
.page-intro-details p, .page-intro-details a { color: #00232c; }
@media screen and (min-width: 640px) { .page-intro-details { padding: 80px 50px; } }
.page-intro-details h3 { margin-top: 30px; }
.page-intro-details h3:first-child { margin-top: 0; }
.page-intro-text-inner .btn + .btn { margin-left: 10px; }

/* Navigation */
.site-nav .menu > li > a { white-space: nowrap; }
.site-nav .menu > li.has-mega > a { padding-right: 18px; }
/* Columns start at the left edge, aligned with the page gutter, instead of floating in the middle */
.mega-menu { display: flex; justify-content: flex-start; padding: 0 20px 0 30px; pointer-events: none; }
.mega-menu .mega-menu-col { flex: 0 1 22%; }
.mega-menu .mega-menu-col h3 { text-align: left; }
/* the heading is a link to the category page; the theme pads links, so undo it here or the heading sits 20px right of its list */
.mega-menu .mega-menu-col h3 a { padding: 0; border-left: 0; color: inherit; }
.mega-menu .mega-menu-col h3 a:hover { color: #00232c; }
@media screen and (min-width: 1330px) { .mega-menu { padding-left: 70px; } }
body.menu-open { overflow: hidden; }

/* Legal pages: long tables and pre-formatted clauses must not overflow on phones */
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.entry-content img { max-width: 100%; height: auto; }