/* ============================================================
   OPSIS. Stratos + Helix Ultimate. Minimal, stable overrides
   File: /templates/stratos/css/custom.css
   ============================================================ */

/* 0) Brand tokens */
:root{
  --opsis-turquoise:#01A8A8;
  --opsis-navy:#03223C;
  --opsis-orange:#FF4D00;
  --opsis-yellow:#FEDE00;

  --opsis-header-height:98px;

  /* Stratos presets */
  --preset1: var(--opsis-turquoise);
  --preset2: var(--opsis-navy);
  --preset3: var(--opsis-orange);
  --preset4: var(--opsis-yellow);

  /* Bootstrap-ish */
  --bs-primary: var(--opsis-turquoise);
  --bs-link-color: var(--opsis-turquoise);
  --bs-link-hover-color: var(--opsis-orange);

  /* SP Page Builder */
  --sppb-primary-color: var(--opsis-turquoise);
  --sppb-secondary-color: var(--opsis-navy);
  --sppb-link-color: var(--opsis-turquoise);
  --sppb-link-hover-color: var(--opsis-orange);
}

/* 1) Global typography */
body{
  color: var(--opsis-navy) !important;
  font-size: 20px !important;
  line-height: 1.8 !important;
}

h1,h2,h3,h4,h5,h6{
  color: var(--opsis-turquoise) !important;
}

/* Links */
a, a:visited{ color: var(--opsis-turquoise) !important; }
a:hover, a:focus{ color: var(--opsis-orange) !important; }

/* 2) Buttons */
.btn,
.btn-primary,
.btn-secondary,
.sppb-btn,
.sppb-btn-primary,
.sppb-btn-secondary,
button,
input[type="submit"],
input[type="button"],
button[type="submit"]{
  background-color: var(--opsis-turquoise) !important;
  border-color: var(--opsis-turquoise) !important;
  color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.sppb-btn:hover,
.sppb-btn:focus,
.sppb-btn:active,
input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover{
  background-color: var(--opsis-orange) !important;
  border-color: var(--opsis-orange) !important;
  color: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 3) Header. Single turquoise bar */
#sp-header,
#sp-header #sp-menu,
#sp-header .sp-megamenu-wrapper,
#sp-header .sp-megamenu-parent{
  background: var(--opsis-turquoise) !important;
  background-image: none !important;
}

/* Normalize header height and vertical centering */
#sp-header{
  height: var(--opsis-header-height) !important;
  min-height: var(--opsis-header-height) !important;
  max-height: var(--opsis-header-height) !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Align items in header row */
#sp-header .sp-row{
  height: 100% !important;
  align-items: center !important;
}

/* Menu typography and spacing */
#sp-header .sp-megamenu-parent{
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Kill Stratos gradient text on menu */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span{
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0 10px !important;
  line-height: 1 !important;
}

/* Active and hover in menu */
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.current-item > a,
#sp-header .sp-megamenu-parent > li > a[aria-current="page"]{
  color: var(--opsis-orange) !important;
  text-decoration: none !important;
}

/* Remove any underline pseudo elements */
#sp-header .sp-megamenu-parent > li > a::before,
#sp-header .sp-megamenu-parent > li > a::after{
  content: none !important;
}

/* 4) Dropdowns. Turquoise, auto width, no navy frame, no purple glow */
#sp-header .sp-dropdown,
#sp-header .sp-dropdown-inner,
#sp-header .sp-dropdown-items,
#sp-header .sp-dropdown-items li,
#sp-header .sp-dropdown-items li a{
  background: var(--opsis-turquoise) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Ensure dropdown is not fixed narrow */
#sp-header .sp-dropdown{
  width: auto !important;
  min-width: 320px !important;
  max-width: 520px !important;
  padding: 0 !important;
}

#sp-header .sp-dropdown-inner{
  padding: 10px 0 !important;
}

/* Allow wrapping for long submenu titles */
#sp-header .sp-dropdown-items li a{
  color: #ffffff !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  padding: 10px 16px !important;
}

#sp-header .sp-dropdown-items li a:hover{
  color: var(--opsis-orange) !important;
}

/* 5) Burger. Force orange ring. Remove purple focus ring */
#sp-header a#offcanvas-toggler,
#sp-header a#offcanvas-toggler::before,
#sp-header a#offcanvas-toggler::after,
#sp-header a#offcanvas-toggler .burger-icon,
#sp-header a#offcanvas-toggler .burger-icon::before,
#sp-header a#offcanvas-toggler .burger-icon::after{
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#sp-header a#offcanvas-toggler{
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 2px solid var(--opsis-orange) !important;
  border-radius: 50% !important;
  outline: none !important;
}

#sp-header a#offcanvas-toggler:focus,
#sp-header a#offcanvas-toggler:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

#sp-header a#offcanvas-toggler .burger-icon span{
  background-color: #ffffff !important;
}

/* 6) Kill the navy “title band” and the ocean of space before content */
#sp-title,
.sp-page-title,
.page-header{
  background: transparent !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* If the theme insists on showing a band anyway, crush it */
#sp-title{
  min-height: 0 !important;
}

/* Pull main body up tight under header */
#sp-main-body{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Articles. Remove extra top padding from wrappers */
.article-details-wrap,
.article-header,
.com-content-article{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Optional. If you want to hide the meta line entirely */
dl.article-info,
.article-info,
.entry-meta,
.post-meta{
  display: none !important;
}
/* ===== Reduce the navy band under the header ===== */
#sp-title,
.sp-page-title{
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

/* If Stratos is rendering an inner wrapper with height/padding */
#sp-title .container,
.sp-page-title .container,
.sp-page-title .sp-page-title-wrapper,
.sp-page-title .sp-page-title-wrap{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* If you still see a band, it is likely a pseudo-element overlay */
#sp-title::before,
#sp-title::after,
.sp-page-title::before,
.sp-page-title::after{
  content: none !important;
  display: none !important;
}

/* Safety: remove any gap between header and the next section */
#sp-header + section,
#sp-header + div{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ===== Reduce the navy band under the header ===== */
#sp-title,
.sp-page-title{
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

/* If Stratos is rendering an inner wrapper with height/padding */
#sp-title .container,
.sp-page-title .container,
.sp-page-title .sp-page-title-wrapper,
.sp-page-title .sp-page-title-wrap{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* If you still see a band, it is likely a pseudo-element overlay */
#sp-title::before,
#sp-title::after,
.sp-page-title::before,
.sp-page-title::after{
  content: none !important;
  display: none !important;
}

/* Safety: remove any gap between header and the next section */
#sp-header + section,
#sp-header + div{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ===== Keep LinkedIn only in social share ===== */
.article-social-share a:not([href*="linkedin"]),
.social-share a:not([href*="linkedin"]),
.article-social a:not([href*="linkedin"]),
.post-social a:not([href*="linkedin"]){
  display: none !important;
}
/* ===== Widen content area ===== */
#sp-main-body > .container,
#sp-main-body .container{
  max-width: 1600px !important;   /* try 1400–1600 */
}

/* Optional: slightly reduce side padding on large screens */
@media (min-width: 992px){
  #sp-main-body > .container,
  #sp-main-body .container{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* ===== Kill / shrink Stratos navy band (article-title-wrap) ===== */
.article-title-wrap{
  background: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* If Stratos draws the band with overlays */
.article-title-wrap::before,
.article-title-wrap::after{
  content: none !important;
  display: none !important;
}

/* Remove any extra spacing immediately after the title wrap */
.article-title-wrap + *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ===== Kill / shrink Stratos navy band (article-title-wrap) ===== */
.article-title-wrap{
  background: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* If Stratos draws the band with overlays */
.article-title-wrap::before,
.article-title-wrap::after{
  content: none !important;
  display: none !important;
}

/* Remove any extra spacing immediately after the title wrap */
.article-title-wrap + *{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ===== Widen the content area (Pages and Articles) ===== */

/* 1) Increase the template container width */
#sp-main-body > .container,
#sp-main-body > .container-fluid,
#sp-main-body .container,
#sp-main-body .container-fluid{
  max-width: 1600px !important;
  width: 100% !important;
}

/* 2) If SP Page Builder is wrapping content in its own container, widen that too */
.sppb-row-container,
.sppb-container-inner,
.sppb-section .sppb-container{
  max-width: 1600px !important;
  width: 100% !important;
}

/* 3) If the layout is still forcing a narrower column, force the main component full width */
body.item-page #sp-component,
body.view-article #sp-component{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* =========================================================
   OPSIS. Remove empty left column and let article content go full width
   ========================================================= */

/* Hide the unused left column */
.article-details-wrap > .row > .col-md-4,
.article-details-wrap > .row > .col-lg-4,
.article-details-wrap > .row > .col-xl-4{
  display: none !important;
}

/* Expand the content column to 100% */
.article-details-wrap > .row > .col-md-8,
.article-details-wrap > .row > .col-lg-8,
.article-details-wrap > .row > .col-xl-8{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Optional. Remove any row gutter offset that can still “indent” things */
.article-details-wrap > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* =========================================================
   OPSIS. Remove empty left column and let article content go full width
   ========================================================= */

/* Hide the unused left column */
.article-details-wrap > .row > .col-md-4,
.article-details-wrap > .row > .col-lg-4,
.article-details-wrap > .row > .col-xl-4{
  display: none !important;
}

/* Expand the content column to 100% */
.article-details-wrap > .row > .col-md-8,
.article-details-wrap > .row > .col-lg-8,
.article-details-wrap > .row > .col-xl-8{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Optional. Remove any row gutter offset that can still “indent” things */
.article-details-wrap > .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
   ============================================================ */

/* Bootstrap buttons */
a.btn,
a.btn *,
button.btn,
button.btn *,
input.btn,
input.btn * {
  color: #ffffff !important;
}

/* SVG icons inside buttons */
a.btn svg,
button.btn svg,
a.btn svg *,
button.btn svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* SP Page Builder buttons */
a.sppb-btn,
a.sppb-btn * {
  color: #ffffff !important;
}

a.sppb-btn svg,
a.sppb-btn svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
/* ============================================================
   Pagination Prev/Next buttons. Force label + Font Awesome icon white
   ============================================================ */

nav.pagenavigation a.btn.btn-sm.btn-secondary.next,
nav.pagenavigation a.btn.btn-sm.btn-secondary.previous,
nav.pagenavigation a.btn.btn-sm.btn-secondary.next span[aria-hidden="true"],
nav.pagenavigation a.btn.btn-sm.btn-secondary.previous span[aria-hidden="true"],
nav.pagenavigation a.btn.btn-sm.btn-secondary.next .icon-chevron-right,
nav.pagenavigation a.btn.btn-sm.btn-secondary.previous .icon-chevron-left {
  color: #ffffff !important;
}

/* If the chevron glyph is injected via pseudo-element, force that too */
nav.pagenavigation a.btn.btn-sm.btn-secondary.next .icon-chevron-right::before,
nav.pagenavigation a.btn.btn-sm.btn-secondary.next .icon-chevron-right::after,
nav.pagenavigation a.btn.btn-sm.btn-secondary.previous .icon-chevron-left::before,
nav.pagenavigation a.btn.btn-sm.btn-secondary.previous .icon-chevron-left::after {
  color: #ffffff !important;
}
/* ============================================================
   CTA button link: Book a conversation
   Ensure Bootstrap primary button text is white (incl nested strong)
   ============================================================ */

a.btn.btn-primary,
a.btn.btn-primary:link,
a.btn.btn-primary:visited,
a.btn.btn-primary strong {
  color: #ffffff !important;
}
/* MOBILE. Hide desktop mega menu. Show burger only */
@media (max-width: 991.98px) {
  #sp-header .sp-megamenu-wrapper,
  #sp-header .sp-megamenu-parent,
  #sp-header #sp-menu {
    display: none !important;
  }

  #sp-header #offcanvas-toggler,
  #sp-header .offcanvas-toggler {
    display: flex !important;
    align-items: center;
  }
}

/* DESKTOP. Show mega menu. Hide burger */
@media (min-width: 992px) {
  #sp-header #offcanvas-toggler,
  #sp-header .offcanvas-toggler {
    display: none !important;
  }
}
/* DESKTOP HEADER. Force logo left + menu right on one row */
@media (min-width: 992px) {

  /* Keep Helix header columns on one line */
  #sp-header .row {
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* Logo column should not stretch */
  #sp-header #sp-logo {
    flex: 0 0 auto;
    width: auto;
  }

  /* Menu column takes remaining space and right-aligns */
  #sp-header #sp-menu {
    flex: 1 1 auto;
    width: auto;
    margin-left: auto;
    background: transparent !important;
  }

  /* Ensure the menu items align to the right and stay in a row */
  #sp-header #sp-menu .sp-megamenu-parent {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
  }

  /* Stop individual items wrapping strangely */
  #sp-header #sp-menu .sp-megamenu-parent > li > a {
    white-space: nowrap;
  }
}
/* =========================
   OPSIS SECONDARY CTA button
   ========================= */

.btn-secondary-opsis {
  background-color: transparent;
  color: #01A8A8; /* Opsis turquoise */
  border: 2px solid #01A8A8;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
}

.btn-secondary-opsis:hover,
.btn-secondary-opsis:focus {
  background-color: #01A8A8;
  color: #ffffff;
  border-color: #01A8A8;
}
/* ClickDimensions / ClickForm embed */
#crm-health-check.is-hidden {
  display: none !important;
}

#crm-health-check.clickform-container {
  max-width: 720px;
  margin: 3rem auto;
}

/* Wrapper controls visible height and prevents the "ocean" */
#crm-health-check .clickform-frame {
  position: relative;
  height: 650px;       /* adjust to suit */
  overflow: hidden;
}

/* Scale the iframe without reserving extra layout space */
#crm-health-check .clickform-frame iframe {
  position: absolute;
  top: 0;
  left: 0;

  width: 200%;
  height: 1300px;

  border: 0;
  transform: scale(0.5);
  transform-origin: top left;
}

/* Mobile: no scaling. Keep readable */
@media (max-width: 991.98px) {
  #crm-health-check .clickform-frame {
    height: 1300px;      /* increased so submit + captcha are visible */
    overflow: hidden;    /* keep page tidy */
  }

  #crm-health-check .clickform-frame iframe {
    position: static !important;
    width: 100% !important;
    height: 1300px !important;
    transform: none !important;
  }
}