/*
 * site-wide section bands. Home-page sections that follow the approved board one-to-one live in 66-home.css.
 *
 * Row backgrounds from Ultimate Addons are painted by JS on a full-bleed .upb_row_bg child (inline style).
 * Legacy colours (blue bands, pale cyans) are mapped onto the palette by wavetec-site/palette.php.
 */

/* Legacy band colours are remapped centrally by wavetec-site/palette.php (see wavetec-site.php section 5). */

/* No drop shadows anywhere in page content: legacy rows, cards, info boxes, post tiles all carried their own.
   Zero specificity + !important beats every non-important legacy shadow, while the deliberate ones in this layer
   (hero glow, .wt-band bleed, active-tab hairlines, focus rings) are declared !important with real specificity. */
:where(body.wt-site #Content) :where(div, article, section, figure, li, a, img, span, p, header, aside) {
  box-shadow: none !important;
}

/* Ultimate gradient bands (purple->magenta etc.) become solid brand blue; dark neutral gradients (video bands)
   are kept */
body.wt-site .upb_row_bg[style*="gradient"]:not([style*="rgb(33, 33, 33)"]):not([style*="rgb(0, 0, 0)"]):not([style*="#000"]) {
  background: var(--wt-blue) !important;
}

/* Legacy banners coloured by a class in theme/page CSS (not by inline style or builder CSS, so palette.php can't
   reach them) */
body.wt-site .cta_banner_one {
  background-color: var(--wt-blue) !important;
}

/* "What we do" sliders place their arrows under the intro text at a fixed offset; the new type is slightly taller */
body.wt-site .what_we_do_slider :is(.slick-prev, .slick-next) {
  top: 380px !important;
}

/* Badges / promo images (legacy draws a 1px black frame on .img--badge) */
body.wt-site .img--badge :is(.vc_single_image-wrapper, img) {
  border-color: var(--wt-line) !important;
  border-radius: var(--wt-r-md) !important;
}

/* Dark curved "Highlights of Brand Stories" band (a background image, Rectangle-111.png): solid brand blue like
   every other coloured band; its heading is authored white */
body.wt-site .upb_row_bg[style*="Rectangle-111"] {
  background: var(--wt-blue) !important;
}

/* Careers "Check out our Glassdoor profile": legacy drew a 100px coloured frame around a white box; it is a tinted
   panel (05-patterns.css) instead */
body.wt-site .vc_row.border__glass {
  border: 0 !important;
  padding: 56px 24px !important;
  /* authored as a stretched (full-width) row: a rounded panel sits inside the content width instead */
  left: auto !important;
  width: auto !important;
  max-width: 1176px;
  margin: 48px auto !important;
}
body.wt-site .vc_row.border__glass :is(.vc_column-inner, .wpb_column) {
  background: transparent !important;
}

/* ---- Mobile spacing, site-wide (<=767px) ---------------------------------------------------------------------
 * The theme keeps desktop gutters (33px section_wrapper + 15px column padding) and WPBakery's per-row
 * vc_custom_* margins/paddings (often 50-120px) on phones. Cap them here once, from the mobile tokens. */
@media (max-width: 767px) {
  /* 1. gutters: 16px total from screen edge; rows lose their -15px pull and columns their side padding */
  body.wt-site :is(.section_wrapper, .container) {
    padding-left: var(--wt-gutter-mobile) !important;
    padding-right: var(--wt-gutter-mobile) !important;
    box-sizing: border-box;
  }
  body.wt-site #Content .vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.wt-site #Content .vc_column-inner {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.wt-site .the_content_wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* 2. empty columns: WPBakery leaves 35px of padding on columns with nothing in them */
  body.wt-site .wpb_column:has(> .vc_column-inner > .wpb_wrapper:empty) {
    display: none !important;
  }
  body.wt-site .vc_column-inner {
    padding-top: 0 !important;
  }
  /* 3. per-row vertical spacing: WPBakery's inline vc_custom_* values are dropped and one rhythm applied */
  body.wt-site #Content :is(.vc_row[class*="vc_custom_"], .vc_section, .vc_row.vc_inner, .vc_row.mt_minus) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body.wt-site #Content :is(.vc_row[class*="vc_custom_"], .vc_section, .vc_row.mt_minus):not(.vc_row-has-fill, [class*="wt-"]) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.wt-site #Content :is(.vc_row[class*="vc_custom_"], .vc_section).vc_row-has-fill {
    padding-top: min(var(--wt-section-gap-mobile), 32px) !important;
    padding-bottom: 0 !important;
  }
  body.wt-site #Content .wpb_wrapper > .vc_row.vc_inner + .vc_row.vc_inner,
  body.wt-site #Content .vc_row[class*="vc_custom_"] + .vc_row[class*="vc_custom_"]:not(.vc_row-has-fill) {
    margin-top: var(--wt-section-gap-mobile) !important;
  }
  body.wt-site #Content .wpb_column[class*="vc_custom_"] > .vc_column-inner,
  body.wt-site #Content .vc_column-inner[class*="vc_custom_"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.wt-site .vc_empty_space {
    max-height: 24px;
  }
  /* WPBakery content elements' 35px bottom margin */
  body.wt-site :is(.wpb_content_element, .wpb_single_image, .ult-video, .ubtn-ctn-left, .ubtn-ctn-center) {
    margin-bottom: 20px !important;
  }
  body.wt-site :is(.wpb_content_element, .ult-video):last-child {
    margin-bottom: 0 !important;
  }
}