@charset "UTF-8";
/**
 * Unqork child theme — frontend styles (source).
 *
 * Authored in px; compiled to rem via PostCSS (postcss-pxtorem) on build.
 * Do not edit assets/css/main.css directly — edit this file and run
 * `npm run build`.
 *
 * Design tokens are owned by theme.json and surface here as CSS custom
 * properties: --wp--preset--color--*, --wp--preset--font-size--*,
 * --wp--preset--font-family--*, --wp--preset--spacing--*,
 * --wp--custom--layout--*, --wp--custom--radius--*.
 */
/* Match production's Inter rendering. Our self-hosted Inter is the v4 variable
   font, which carries an optical-size (opsz) axis; with the browser default
   `font-optical-sizing: auto` the letterforms shift with font-size. Production
   serves Google Fonts' static Inter (no opsz axis), so pin optical sizing off
   to render the same text-optimized (default opsz) cut. */
:root {
  font-optical-sizing: none;
}

.unqork-gutenberg-layout :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, pre) {
  margin-inline: 0;
}

/* -------------------------------------------------------------------------
 * Gutenberg layout — main
 * ---------------------------------------------------------------------- */
.unqork-site-main {
  min-height: 50vh;
}

/* -------------------------------------------------------------------------
 * Typography utilities — design tokens that combine size + weight + tracking
 * + transform, so they don't map to a single theme.json font-size preset.
 * Exposed both as block style variations (.is-style-*) and plain helpers.
 * ---------------------------------------------------------------------- */
/* Label / Badge — Inter 14/16, +2.4 tracking, uppercase. */
.is-style-label,
.unqork-label {
  font-family: var(--wp--custom--typography--label--font-family);
  font-weight: var(--wp--custom--typography--label--font-weight);
  font-size: var(--wp--custom--typography--label--font-size);
  line-height: var(--wp--custom--typography--label--line-height);
  letter-spacing: var(--wp--custom--typography--label--letter-spacing);
  text-transform: uppercase;
}

/* Link / Primary — Inter SemiBold 16/24. */
.is-style-link,
.unqork-link {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
}

/* Link / Small — DM Sans Bold 14/20. */
.is-style-link-small,
.unqork-link--small {
  font-family: var(--wp--preset--font-family--dm-sans);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.428;
}

/* -------------------------------------------------------------------------
 * Effects & surfaces — gradients, glass and glow.
 * All values come from theme.json (gradient presets + --wp--custom--*),
 * so these utilities never hard-code a color or blur radius.
 * ---------------------------------------------------------------------- */
/* Brand gradient as a text fill (the hero "gradient text"). */
.unqork-text-gradient {
  background: var(--wp--preset--gradient--brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Glass card — translucent fill, hairline border, soft blur. */
.unqork-glass {
  background: var(--wp--preset--gradient--glass);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--radius--md);
  backdrop-filter: blur(var(--wp--custom--blur--nav));
  -webkit-backdrop-filter: blur(var(--wp--custom--blur--nav));
}

/* Badge / pill — glass fill, full-round, stronger blur, Inter label. */
.unqork-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--12);
  padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--gradient--glass);
  backdrop-filter: blur(var(--wp--custom--blur--badge));
  -webkit-backdrop-filter: blur(var(--wp--custom--blur--badge));
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-primary);
}

/* Glow blob — decorative ambient light. Position and size it per section; */
.unqork-glow {
  position: absolute;
  z-index: 0;
  border-radius: var(--wp--custom--radius--pill);
  filter: blur(3.125rem);
  pointer-events: none;
}

.unqork-glow--cyan {
  background: var(--wp--custom--glow--cyan);
}

.unqork-glow--purple {
  background: var(--wp--custom--glow--purple);
}

.unqork-glow--pink {
  background: var(--wp--custom--glow--pink);
}

.unqork-glow--blue {
  background: var(--wp--custom--glow--blue);
}

/* Clip orb blobs to their container without creating a scroll context. */
.unqork-orb-clip {
  position: relative;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Spacing utilities — drop into a block's Advanced → Additional CSS class(es).
 * ---------------------------------------------------------------------- */
/* Push a block to the end of its flex/grid track (e.g. pin a card's CTA to the
   bottom). Only takes effect when the block is a flex column or grid child; in
   normal flow `margin-block-start: auto` computes to 0. */
.unqork-mt-auto {
  margin-block-start: auto;
}

/* -------------------------------------------------------------------------
 * Pattern section rhythm — consistent vertical spacing between migrated
 * patterns. Fluid 60→80px; the value is owned by theme.json
 * (--wp--custom--spacing--pattern-gap). Add every new pattern's unique
 * wrapper class to this grouped selector.
 *
 * Scoped under `.unqork-gutenberg-layout` (the Gutenberg-page body class) on
 * purpose: WordPress' block-gap rule `:root :where(.is-layout-constrained) > *`
 * carries specificity (0,1,0) and is printed after this stylesheet, so a bare
 * single-class selector ties it and loses on source order. The body-class
 * prefix lifts us to (0,2,0) so the section margin wins — including over the
 * layout's first/last-child margin resets.
 * ---------------------------------------------------------------------- */
.unqork-gutenberg-layout .unqork-hero-image-orbs,
.unqork-gutenberg-layout .unqork-hero-video-orbs,
.unqork-gutenberg-layout .unqork-hero-no-orbs,
.unqork-gutenberg-layout .unqork-hero-trusted-by-orbs,
.unqork-gutenberg-layout .unqork-logo-carousel,
.unqork-gutenberg-layout .unqork-benefits-vertical-accordion,
.unqork-gutenberg-layout .unqork-use-cases-government,
.unqork-gutenberg-layout .unqork-use-cases-financial-services,
.unqork-gutenberg-layout .unqork-segments-powered,
.unqork-gutenberg-layout .unqork-use-cases-healthcare,
.unqork-gutenberg-layout .unqork-additional-resources,
.unqork-gutenberg-layout .unqork-button-marketing-banner,
.unqork-gutenberg-layout .unqork-button-marketing-banner-plain,
.unqork-gutenberg-layout .unqork-button-marketing-banner-no-description,
.unqork-gutenberg-layout .unqork-create-announcement,
.unqork-gutenberg-layout .unqork-customers-testimonials,
.unqork-gutenberg-layout .unqork-recognition-card,
.unqork-gutenberg-layout .unqork-featured-card-capabilities-section {
  margin-block: var(--wp--custom--spacing--pattern-gap);
}
.unqork-gutenberg-layout {
  /* Open every Gutenberg page with the same rhythm gap above its first
   * section (hero or not), so the top section is not glued to the header.
   * WordPress zeroes the first child's top margin via
   * `:root :where(.is-layout-constrained) > :first-child` (specificity 0,2,0,
   * printed inline after this stylesheet); scoping through `.unqork-site-content`
   * lifts us to 0,3,0 so the gap wins deterministically. Only the top edge is
   * touched — the last child stays flush so the footer owns the bottom gap. */
}
.unqork-gutenberg-layout .unqork-site-content > :first-child {
  margin-block-start: var(--wp--custom--spacing--pattern-gap);
}

/* -------------------------------------------------------------------------
 * JetEngine slider (Swiper) pagination dots.
 * Swiper's defaults paint inactive bullets black at 0.2 opacity, which is
 * ---------------------------------------------------------------------- */
.jet-engine-swiper-pagination-wrapper {
  --swiper-pagination-bullet-inactive-color: var(--wp--preset--color--white);
  --swiper-pagination-bullet-inactive-opacity: 0.4;
  --swiper-pagination-color: var(--wp--preset--color--cyan);
  --swiper-pagination-bullet-opacity: 1;
}

.unqork-usecase-card-outer {
  display: flex;
  align-self: stretch;
}
.unqork-usecase-card-outer > .unqork-usecase-card-pink {
  height: 100% !important;
  width: 100%;
}

/* Responsive horizontal padding — full on desktop, zero on mobile. */
.unqork-pad-x {
  padding-inline: var(--wp--preset--spacing--80);
}
@media (max-width: 768px) {
  .unqork-pad-x {
    padding-inline: var(--wp--preset--spacing--40);
  }
}

/* Hairline card outline for the plain CTA variant. */
.unqork-cta-bordered {
  border: 1px solid var(--wp--preset--color--border-subtle);
}

/* JetEngine Dynamic Image — cover-crop, rounded top, grayscale on hover. */
.unqork-ar-image .jet-listing-dynamic-image__img {
  -o-object-fit: cover;
     object-fit: cover;
  border-start-start-radius: 1rem;
  border-start-end-radius: 1rem;
  filter: grayscale(0);
  transition: filter 0.3s;
}

.unqork-ar-image:hover .jet-listing-dynamic-image__img {
  filter: grayscale(1);
}

/* Pin the arrow figure to the flex column's bottom-right corner. */
.is-layout-flex > .unqork-ar-self-right {
  align-self: flex-end;
  margin-block-start: auto;
}

/* Make a listing-grid card fill its grid item so a row's cards are equal height. */
.unqork-card-fill {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Drop core's constrained-layout auto margins on the flex card's children. */
.unqork-card-fill.is-layout-constrained > * {
  max-width: none;
  margin-inline: 0 !important;
}

/* Let the inner stack grow into the card's leftover height. */
.unqork-stack-fill {
  flex: 1 1 auto;
}

/* Fluid min-height for the testimonials card — ~390px desktop down to ~320px mobile. */
.wp-block-group.unqork-testimonial-card {
  min-height: clamp(20rem, 6.5vw + 18.4375rem, 24.375rem);
}

/* -------------------------------------------------------------------------
 * Hero block decorations — theme owns brand icon assets so the plugin's
 * block SCSS (webpack-built) never has to inline SVGs as data: URIs, which
 * strict CSPs block on the front end. This file is compiled by plain `sass`
 * (no bundler), so url() below is passed straight through as a real file path.
 * ---------------------------------------------------------------------- */
.wp-block-unqork-blocks-hero.is-label-pill-with-star-icon .hero__label::before {
  background-image: url("../images/icons/star.svg");
}