/*
 * RigQuip shared utilities.
 *
 * One class per approved design-system value: the container, the spacing
 * scale, the type scale, the brand gradients, chips, the button ladder and the
 * surface washes. Every page uses these — page stylesheets are only allowed to
 * describe layout that is genuinely unique to that page.
 *
 * Breakpoints match the reference build: 640 / 768 / 1024 / 1280.
 */

/* ---------------------------------------------------------------- container */

/* Scoped to `.rq-page` so it outranks Elementor's own container rules. */
.rq-page .rq-container {
  margin-inline: auto;
  width: 100%;
  max-width: var(--rq-container-max);
  padding-inline: var(--rq-container-pad);
}

@media (min-width: 768px) {
  .rq-page .rq-container {
    padding-inline: var(--rq-container-pad-md);
  }
}

@media (min-width: 1024px) {
  .rq-page .rq-container {
    padding-inline: var(--rq-container-pad-lg);
  }
}

/* ------------------------------------------------------------ section rhythm */

/* Sections clip sideways overflow so a wide child can never scroll the page. */
.rq-section {
  overflow-x: clip;
}

.rq-section--tight {
  padding-block: 2.5rem;
}

.rq-section--standard {
  padding-block: 3.5rem;
}

.rq-section--band {
  padding-block: 3.5rem 2.5rem;
}

@media (min-width: 768px) {
  .rq-section--tight {
    padding-block: 3rem;
  }

  .rq-section--standard {
    padding-block: 5rem;
  }

  .rq-section--band {
    padding-block: 5rem 3.5rem;
  }
}

/* ---------------------------------------------------------------- type scale */

.rq-eyebrow {
  width: fit-content;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rq-foreground);
}

.rq-eyebrow--brand {
  font-weight: 700;
}

/* Page heading. 26px phone floor, 72px desktop cap. */
.rq-h1 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.02;
}

@media (min-width: 640px) {
  .rq-h1 {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .rq-h1 {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .rq-h1 {
    font-size: 4.5rem;
  }
}

/*
 * Section headline. Sized against its own container rather than the viewport,
 * so a headline in a half-width panel scales with the panel. `.rq-h2-fit` must
 * wrap the heading or `cqi` has nothing to measure.
 */
.rq-h2-fit {
  --flex-grow: 0;
  container-type: inline-size;
  flex-grow: 0;
  min-width: 0;
  min-height: 0;
  height: auto;
}

.rq-h2 {
  font-size: clamp(1.75rem, 7cqi, 2.875rem);
  font-weight: 600;
  line-height: 1.18;
  color: var(--rq-foreground);
}

/* The settled split-panel exception: slightly tighter so it keeps two lines. */
.rq-h2--narrow {
  font-size: clamp(1.75rem, 6.9cqi, 2.875rem);
}

/* Standard gap between an eyebrow and the headline beneath it. */
.rq-headline {
  margin-block-start: 1.25rem;
}

.rq-headline--tight {
  margin-block-start: 1rem;
}

.rq-h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rq-foreground);
}

@media (min-width: 768px) {
  .rq-h3 {
    font-size: 1.875rem;
  }
}

/* Body copy. */
.rq-body {
  font-size: 1rem;
  line-height: 1.625;
}

@media (min-width: 768px) {
  .rq-body {
    font-size: 1.125rem;
  }
}

.rq-body--soft {
  color: color-mix(in oklab, var(--rq-foreground) 70%, transparent);
}

.rq-body--muted {
  color: var(--rq-muted-foreground);
}

.rq-text-sm {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--rq-muted-foreground);
}

@media (min-width: 768px) {
  .rq-text-sm {
    font-size: 1rem;
  }
}

.rq-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--rq-muted-foreground);
}

/* ------------------------------------------------------------- brand ramps */

.rq-grad-fill {
  background-image: linear-gradient(
    135deg,
    var(--rq-logo-blue-light),
    var(--rq-logo-blue-mid) 52%,
    var(--rq-logo-blue-deep)
  );
}

.rq-grad-text {
  background-image: linear-gradient(
    100deg,
    var(--rq-logo-blue-light),
    var(--rq-logo-blue-mid) 55%,
    var(--rq-logo-blue-deep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/*
 * Gradient icon strokes point at the shared <linearGradient> printed once per
 * page by inc/rq-brand-gradient-defs.php. Without that element in the DOM the
 * straight segments of an icon vanish.
 */
.rq-grad-stroke,
.rq-grad-stroke svg {
  stroke: url(#rq-brand-gradient-stroke);
}

/* --------------------------------------------------------------------- chips */

.rq-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid var(--rq-border);
  background-color: var(--rq-card);
  padding: 0.5rem 1rem;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rq-foreground);
}

/* Service chips sit on white cards, so they take the page tint instead. */
.rq-chip--tinted {
  background-color: var(--rq-background);
  padding: 0.375rem 0.75rem;
}

.rq-chip-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------- image fill */

/* An image that should cover its slot rather than size to its own dimensions. */
.rq-page .rq-img-fill,
.rq-page .rq-img-fill > .elementor-widget-container,
.rq-page .rq-img-fill img {
  width: 100%;
  height: 100%;
}

.rq-page .rq-img-fill img {
  object-fit: cover;
}

/* ----------------------------------------------------------- icon chip frame */

/*
 * White tile ringed in the brand gradient with a gradient-drawn glyph. The ring
 * is a 1.5px gradient pad, so the inner radius has to be reduced to match.
 */
.rq-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 1.5px;
  border-radius: var(--rq-radius-brand);
  /*
   * The chip paints both the gradient ring and the tile it surrounds, so it
   * does not depend on Elementor wrapping the icon in an extra element. The
   * card layer is clipped to the content box, leaving the padding as the ring.
   * Browsers shrink the radius for the inner clip, so it stays concentric.
   */
  background-image:
    linear-gradient(var(--rq-card), var(--rq-card)),
    linear-gradient(
      135deg,
      var(--rq-logo-blue-light),
      var(--rq-logo-blue-mid) 52%,
      var(--rq-logo-blue-deep)
    );
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
}

.rq-icon-chip--md {
  width: 2.5rem;
  height: 2.5rem;
}

.rq-icon-chip--lg {
  width: 2.75rem;
  height: 2.75rem;
}

/*
 * Centre the icon through however many wrappers Elementor emits. The widget
 * container is not always present, so this must not be the element carrying
 * the tile background.
 */
.rq-icon-chip > .elementor-widget-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.rq-icon-chip .elementor-icon-wrapper,
.rq-icon-chip .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.rq-icon-chip svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke-width: 2;
  stroke: url(#rq-brand-gradient-stroke);
}

.rq-icon-chip--md svg,
.rq-icon-chip--lg svg {
  width: 1.25rem;
  height: 1.25rem;
}

/*
 * Fallback for sites where SVG uploads are disabled and the icon widget falls
 * back to a Font Awesome glyph. A gradient stroke is impossible on a font
 * glyph, so the ramp is clipped to the glyph fill instead.
 */
.rq-icon-chip i {
  font-size: 1rem;
  background-image: linear-gradient(
    135deg,
    var(--rq-brand-stroke-light),
    var(--rq-brand-stroke-mid) 52%,
    var(--rq-brand-stroke-deep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rq-icon-chip--md i,
.rq-icon-chip--lg i {
  font-size: 1.25rem;
}

/* ----------------------------------------------------------------- stat band */

/*
 * Shared minimum height for the statistics row and the accreditation row so the
 * two panels read as one band: 36px figure + 8px gap + two 16px label lines.
 */
.rq-stat-band {
  min-height: 4.75rem;
}

.rq-stat-value {
  width: fit-content;
  font-family: var(--rq-font-heading);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 768px) {
  .rq-stat-value {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .rq-stat-value {
    font-size: 1.875rem;
  }
}

/* ------------------------------------------------------------------- washes */

/*
 * Soft blue wash: strongest at the bottom, easing into the page tint at the top
 * so the seam with a flat panel below reads clearly.
 */
.rq-wash-capabilities {
  background-image: linear-gradient(
    180deg,
    var(--rq-background),
    color-mix(in oklab, var(--rq-surface-blue) 24%, var(--rq-background)) 45%,
    color-mix(in oklab, var(--rq-surface-blue) 60%, white)
  );
}

/* Neutral twin of the blue wash, for bands that carry white cards. */
.rq-wash-muted {
  background-image: linear-gradient(
    180deg,
    var(--rq-background),
    color-mix(in oklab, var(--rq-muted) 35%, var(--rq-background)) 45%,
    color-mix(in oklab, var(--rq-muted) 75%, white)
  );
}

/* Diagonal wash: deepest bottom-left, running up to the page tint top-right. */
.rq-wash-contact {
  background-image: linear-gradient(
    45deg,
    color-mix(in oklab, var(--rq-surface-blue) 80%, white),
    color-mix(in oklab, var(--rq-surface-blue) 35%, var(--rq-background)) 55%,
    var(--rq-background)
  );
}

.rq-wash-announcement {
  background-image: linear-gradient(
    100deg,
    color-mix(in oklab, var(--rq-surface-blue) 45%, white),
    var(--rq-surface-blue) 42%,
    color-mix(in oklab, var(--rq-surface-blue) 10%, white)
  );
}

.rq-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Flat surfaces. */
.rq-surface-card {
  background-color: var(--rq-card);
}

.rq-surface-page {
  background-color: var(--rq-background);
}

/* ------------------------------------------------------------ button ladder */

/*
 * Loud to quiet: industrial, dark, muted. No shadows anywhere on the ladder.
 *
 * `.rq-btn` goes on the Elementor widget wrapper, but all button metrics are
 * set on the inner `.elementor-button` anchor. Styling both would draw the
 * button twice and stretch the wrapper past its column.
 */
.rq-btn {
  display: flex;
}

.rq-btn .elementor-button-wrapper {
  display: flex;
  width: 100%;
}

.rq-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  height: 3.5rem;
  padding-inline: 1.5rem;
  border-radius: var(--rq-radius-brand);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color 150ms ease,
    filter 150ms ease;
}

/* The compact variant used inside cards. */
.rq-btn--compact .elementor-button {
  height: 2.75rem;
  padding-inline: 1.25rem;
}

/*
 * Beat Elementor kit / post CSS that often sets `background: #000` shorthand
 * (which clears background-image). Keep industrial = brand gradient.
 */
.rq-page .rq-btn--industrial .elementor-button,
.rq-page .rq-btn--industrial .elementor-button:hover,
.rq-page .rq-btn--industrial .elementor-button:focus {
  background-color: transparent !important;
  background-image: linear-gradient(
    135deg,
    var(--rq-logo-blue-light),
    var(--rq-logo-blue-mid) 52%,
    var(--rq-logo-blue-deep)
  ) !important;
  color: var(--rq-primary-foreground) !important;
}

.rq-page .rq-btn--industrial .elementor-button:hover {
  filter: brightness(0.95);
}

.rq-page .rq-btn--dark .elementor-button,
.rq-page .rq-btn--dark .elementor-button:hover,
.rq-page .rq-btn--dark .elementor-button:focus {
  background-image: none !important;
  background-color: var(--rq-foreground) !important;
  color: var(--rq-background) !important;
}

.rq-page .rq-btn--dark .elementor-button:hover {
  background-color: color-mix(in oklab, var(--rq-foreground) 85%, transparent) !important;
}

.rq-btn--industrial .elementor-button {
  background-image: linear-gradient(
    135deg,
    var(--rq-logo-blue-light),
    var(--rq-logo-blue-mid) 52%,
    var(--rq-logo-blue-deep)
  );
  color: var(--rq-primary-foreground);
}

.rq-btn--industrial .elementor-button:hover {
  filter: brightness(0.95);
}

.rq-btn--dark .elementor-button {
  background-color: var(--rq-foreground);
  color: var(--rq-background);
}

.rq-btn--dark .elementor-button:hover {
  background-color: color-mix(in oklab, var(--rq-foreground) 85%, transparent);
}

.rq-btn--muted .elementor-button {
  border: 1px solid var(--rq-border);
  background-color: var(--rq-background);
  color: var(--rq-foreground);
}

.rq-btn--muted .elementor-button:hover {
  background-color: var(--rq-muted);
}

.rq-btn .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rq-btn .elementor-button-icon {
  display: inline-flex;
  align-items: center;
}

.rq-btn .elementor-button-icon svg,
.rq-btn .elementor-button-icon i {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}

/* Buttons stretch on phones, sit to their content from 640 up. */
.rq-btn--block .elementor-button {
  flex: 1 1 auto;
}

@media (min-width: 640px) {
  .rq-btn--block .elementor-button {
    flex: 0 0 auto;
  }
}

/* -------------------------------------------------------------- arrow links */

/* The quiet text link that closes most panels: underline and nudge on hover. */
.rq-link,
.rq-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  font-size: 15px;
  font-weight: 500;
  color: var(--rq-foreground);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.rq-link a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left calc(100% - 3px);
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition:
    color 150ms ease,
    background-size 0s;
}

.rq-link a:hover {
  text-decoration: none;
  background-size: calc(100% - 1.5rem) 1px;
}

.rq-link svg,
.rq-link i {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  transition: transform 150ms ease;
}

.rq-link a:hover svg,
.rq-link a:hover i {
  transform: translateX(0.25rem);
}

/* ----------------------------------------------------------------- hairlines */

.rq-hairline {
  border-top: 1px solid var(--rq-border);
}

.rq-hairline--strong {
  border-top-color: color-mix(in oklab, var(--rq-foreground) 25%, transparent);
}