/*
 * Reusable patterns: each visual treatment is defined ONCE here.
 *
 * Every pattern has:
 *   - a utility class (.wt-card, .wt-panel, ...) that editors can add in WPBakery ("Extra class name") to any
 *     row/column/element to get the look with no new CSS, and
 *   - a list of existing page elements that already use it (legacy markup we can't rename).
 * To give another existing element a pattern, add its selector to that pattern's list; don't copy declarations
 * into a page file. Page files (66-home.css etc.) only handle layout (columns, order, spacing).
 *
 * Patterns:
 *   .wt-card          white surface, hairline border, large radius (flat: no shadow)
 *   .wt-card--hover   card whose border turns blue on hover (clickable tiles)
 *   .wt-panel         tinted blue surface, no border, large radius
 *   .wt-panel--warm   tinted orange variant (reports / downloads)
 *   .wt-band          full-bleed grey section band without extra markup
 *   .wt-tag           small pill label
 *   .wt-link-row      bordered row link (lists of articles/resources)
 */

/* Rows painted as a surface: Ultimate's band layer (.upb_row_bg) would cover the row's own background */
body.wt-site :is(.wt-card, .wt-panel, .wt-panel--warm) > .upb_row_bg,
body.wt-site .vc_row:has(> .ncr--section) > .upb_row_bg,
body.wt-site.home :is(
  .vc_row:has(> .upb_row_bg[style*="rgb(0, 107, 232)"]):has(.ubtn[data-bg="#ff8630" i]),
  .vc_row:has(> .upb_row_bg[style*="rgb(242, 252, 254)"]):has(.img--badge):not(:has(.ncr--section))
) > .upb_row_bg {
  display: none !important;
}

/* ---- card ------------------------------------------------------------------------------------------------- */
body.wt-site :is(
  .wt-card,
  .wt-card--hover,
  .industries--row--width .aio-icon-component,
  .vc_row:has(> .ncr--section),
  .center__align__stats,
  .vc_row:has(img[src*="client-logos"]) .wpb_single_image .vc_single_image-wrapper,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p,
  .Footer-Form,
  .contactbox,
  .wpb_text_column.shadow_box
) {
  background: #fff !important;
  border: 1px solid var(--wt-line) !important;
  border-radius: var(--wt-r-xl);
  box-shadow: none !important;
}
/* smaller radius for small/repeated cards */
body.wt-site :is(
  .industries--row--width .aio-icon-component,
  .wt-cases__card,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
) {
  border-radius: var(--wt-r-md);
}
body.wt-site :is(.center__align__stats, .wpb_text_column.shadow_box) {
  border-radius: 20px;
}
body.wt-site :is(.Footer-Form, .contactbox) {
  border-radius: var(--wt-r-lg) !important;
}
body.wt-site :is(
  .wt-card--hover,
  .industries--row--width .aio-icon-component,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
) {
  transition: border-color var(--wt-fast) var(--wt-ease);
}
body.wt-site :is(
  .wt-card--hover,
  .industries--row--width .aio-icon-component,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
):hover {
  border-color: var(--wt-blue) !important;
}

/* ---- panel (tinted) --------------------------------------------------------------------------------------- */
body.wt-site :is(
  .wt-panel,
  .vc_row.border__glass,
  .home .vc_row:has(> .upb_row_bg[style*="rgb(242, 252, 254)"]):has(.img--badge):not(:has(.ncr--section)),
  .templatera_shortcode > .vc_row:has(.ult-video) > .wpb_column:not(:has(.ult-video)) > .vc_column-inner
) {
  background: var(--wt-tint-blue) !important;
  border-radius: var(--wt-r-xl);
}
body.wt-site :is(
  .wt-panel--warm,
  .home .vc_row:has(> .upb_row_bg[style*="rgb(0, 107, 232)"]):has(.ubtn[data-bg="#ff8630" i])
) {
  background: var(--wt-tint-orange) !important;
  border-radius: var(--wt-r-xl);
}

/* ---- band (full-bleed grey) ------------------------------------------------------------------------------- */
body.wt-site :is(
  .wt-band,
  .home .vc_row.vc_inner:has(> .wpb_column .vc_tta-accordion)
) {
  background: var(--wt-tint-grey);
  box-shadow: 0 0 0 100vmax var(--wt-tint-grey) !important; /* bleeds to the viewport edges */
  clip-path: inset(0 -100vmax);
}

/* ---- tag (small pill label) ------------------------------------------------------------------------------- */
body.wt-site :is(
  .wt-tag,
  .templatera_shortcode > .vc_row:has(.ult-video) > .wpb_column:not(:has(.ult-video)) .ubtn
) {
  display: inline-flex;
  align-items: center;
  background: #fff !important;
  border: 1px solid #d6e4fb !important;
  border-radius: var(--wt-r-pill) !important;
  color: var(--wt-blue) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
}

/* ---- link row --------------------------------------------------------------------------------------------- */
body.wt-site :is(
  .wt-link-row,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
body.wt-site :is(
  .wt-link-row,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
) a {
  color: var(--wt-ink) !important;
  text-decoration: none;
  transition: color var(--wt-fast) var(--wt-ease);
}
/* The legacy content puts a 👉 emoji in front of (and once inside) each link; hide them all (text or wp-emoji
   <img>) and draw one consistent arrow at the end of every row instead. */
body.wt-site .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p :is(span[style*="font-weight: 500"], img.emoji) {
  display: none !important;
}
body.wt-site :is(
  .wt-link-row,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
) {
  position: relative;
  justify-content: space-between;
  cursor: pointer;
}
body.wt-site :is(
  .wt-link-row,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
)::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--wt-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--wt-fast) var(--wt-ease);
}
/* the whole row is the link: stretch the <a>'s hit area over the card so the pointer shows everywhere on it */
body.wt-site :is(
  .wt-link-row,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
) a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
body.wt-site :is(
  .wt-link-row,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
):hover a {
  color: var(--wt-blue) !important;
}
body.wt-site :is(
  .wt-link-row,
  .blog-sect > .wpb_column:nth-last-child(1 of .wpb_column) .wpb_text_column p
):hover::after {
  transform: translateX(3px);
}