/* Theme CSS is enqueued from inc/enqueue.php (no @import chain).
   Load order: Google Fonts → colors → typography → spacing → effects →
   base → common → components → responsive. */

/* Anchor-scroll offset so jump-to-section links (nav, "Explore services",
   "View all" etc.) don't land underneath the sticky header. Height ~145px
   (112px logo + 32px vertical padding + 1px border) plus a little breathing
   room; keep in sync with the header logo height if that ever changes. */
html{ scroll-behavior:smooth; scroll-padding-top:160px; }

/* ============ Icon ============
   Lucide glyph rendered as a currentColor mask — matches the RQSolutions
   design system's Icon component 1:1 (background:currentColor + mask-image). */
.icon{
  display:inline-block;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}

/* ============ Button ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-3);
  font:var(--text-button); letter-spacing:.01em;
  border:1px solid transparent; border-radius:var(--radius-sm);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:var(--transition-control);
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }

.btn--sm{ height:34px; padding:0 var(--space-4); font-size:var(--size-xs); }
.btn--md{ height:var(--control-h); padding:0 var(--space-6); }
.btn--lg{ height:48px; padding:0 var(--space-7); font-size:var(--size-md); }

.btn--primary{ background:var(--surface-accent); color:var(--text-on-accent); }
.btn--primary:hover{ background:var(--rq-red-800); color:var(--text-on-accent); }

.btn--dark{ background:var(--surface-dark); color:var(--text-on-dark); }
.btn--dark:hover{ background:var(--ink-900); color:var(--text-on-dark); }

.btn--secondary{ background:var(--white); color:var(--text-strong); border-color:var(--line-strong); }
.btn--secondary:hover{ background:var(--paper-100); border-color:var(--grey-400); color:var(--text-strong); }

.btn--ghost{ background:transparent; color:var(--text-accent); padding:0; height:auto; }
.btn--ghost:hover{ background:transparent; color:var(--rq-red-900); }

.btn--onDark{ background:var(--white); color:var(--ink-900); }
.btn--onDark:hover{ background:var(--grey-100); color:var(--ink-900); }

.btn--disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn--full{ width:100%; }

.btn__arrow{
  display:inline-flex;
  align-items:center;
  font-size:1.05em;
  line-height:1;
  /* → sits high in its glyph box; nudge so it optically matches the label */
  transform:translateY(.08em);
  transition:transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__arrow{ transform:translate(3px, .08em); }

/* ============ Card ============ */
.card{
  border-radius:var(--radius-md);
  padding:var(--card-pad);
  box-shadow:var(--shadow-xs);
  transition:var(--transition-control);
  background:var(--surface-card);
  border:var(--border-hairline);
  color:var(--text-body);
}
.card--unpadded{ padding:0; }
.card--tint{ background:var(--surface-tint); border:1px solid transparent; }
.card--dark{ background:var(--surface-dark); border:1px solid var(--line-on-dark); color:var(--text-on-dark-muted); }
.card--interactive{ cursor:pointer; }
.card--interactive:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--grey-300); }

/* ============ Eyebrow ============ */
.eyebrow{
  font:var(--text-eyebrow); text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);
  margin-bottom:var(--space-3);
}
.eyebrow--accent{ color:var(--text-accent); }
.eyebrow--muted{ color:var(--text-subtle); }
.eyebrow--onDark{ color:var(--rq-red-500); }

/* ============ Section heading ============ */
.heading{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
  color:var(--text-strong);
  margin:0;
}
.heading--onDark{ color:var(--text-on-dark); }
.heading--sm{ font-size:var(--size-2xl); }
.heading--md{ font-size:var(--size-3xl); }
.heading--lg{ font-size:var(--size-4xl); }
.heading--xl{ font-size:var(--size-5xl); }
.heading__accent{ color:var(--text-accent); }

/* ============ Feature band (dark strip of 4 pillars) ============ */
.feature-band{ background:var(--surface-dark); color:var(--text-on-dark-muted); }
.feature-band__row{
  max-width:var(--container); margin:0 auto; padding:var(--band-y) var(--gutter);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:0;
  row-gap:var(--space-6);
  align-items:stretch;
}
.feature-band__item{ display:flex; gap:var(--space-4); padding:0 var(--space-6); }
.feature-band__item:not(:nth-child(4n+1)){ border-left:1px solid var(--line-on-dark); }
.feature-band__icon{ color:var(--rq-red-500); margin-top:2px; }
.feature-band__title{ font:var(--text-h3); font-size:var(--size-sm); color:var(--text-on-dark); margin-bottom:var(--space-2); }
.feature-band__body{ font:var(--text-small); font-size:var(--size-xs); margin:0; line-height:var(--leading-relaxed); }

/* ============ Service card ============ */
.service-card{ display:flex; flex-direction:column; gap:var(--space-4); }
.service-card__icon-wrap{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-accent-soft); color:var(--text-accent); border-radius:var(--radius-sm);
}
.service-card h3{ font:var(--text-h3); margin-bottom:var(--space-2); }
.service-card p{ font:var(--text-small); color:var(--text-muted); margin:0; }
.service-card__meta{
  margin-top:auto; padding-top:var(--space-4); border-top:var(--border-hairline);
  font:var(--text-eyebrow); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-subtle);
}

/* ============ Stat block ============ */
.stat-block{ display:grid; row-gap:var(--space-4); }
.stat-block__item{ text-align:center; padding:var(--space-6) var(--space-9); border-top:none; }
.stat-block__item:not(:nth-child(4n+1)){ border-left:var(--border-hairline); }
.stat-block__icon{ color:var(--text-muted); margin-bottom:var(--space-3); }
.stat-block__value{ font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--size-3xl); color:var(--text-strong); line-height:1; }
.stat-block__label{ font:var(--text-small); font-size:var(--size-xs); color:var(--text-muted); margin-top:var(--space-2); }

/* ============ Article body (long-form insight posts) ============ */
.article-body{ font: var(--text-base); color: var(--text-body); }
.article-body > * + *{ margin-top: var(--space-5); }
.article-body h2{ font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--size-2xl); line-height: var(--leading-snug); color: var(--text-strong); margin-top: var(--space-10) !important; }
.article-body h2:first-child{ margin-top: 0 !important; }
.article-body p{ margin: 0; }
/* Extra breathing room between a heading and the copy right under it —
   more than the default paragraph-to-paragraph rhythm above. */
.article-body h2 + p, .article-body h2 + ul, .article-body h2 + ol,
.article-body h3 + p, .article-body h3 + ul, .article-body h3 + ol{ margin-top: var(--space-6) !important; }
.article-body ul, .article-body ol{ padding-left: var(--space-6); margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.article-body ul{ list-style: disc; }
.article-body ol{ list-style: decimal; }
.article-body li{ padding-left: var(--space-1); }
.article-body li::marker{ color: var(--text-accent); }
.article-body a{ font-weight: var(--weight-semibold); }
.article-body strong{ color: var(--text-strong); font-weight: var(--weight-semibold); }
.article-body img,
.article-body .wp-block-image img{ max-width: 100%; height: auto; display: block; }

.article-resource{
  display: block; font: var(--text-small); font-size: var(--size-xs); color: var(--text-muted);
  background: var(--surface-tint); border-left: 2px solid var(--line-accent);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}
.article-resource strong{ color: var(--text-strong); }
.article-resource a{ color: var(--text-accent); }

/* Washed, editorial treatment for all Insights photography — desaturated and
   lifted so stock/AI-generated images read as muted and professional rather
   than glossy or saturated. Apply to every article hero and thumbnail image. */
.article-photo{ filter: saturate(.45) contrast(.92) brightness(1.08) sepia(.06); }

.article-step{ border-top: 1px solid var(--line-hairline); padding-top: var(--space-5); }
.article-step__num{
  display: block;
  font: var(--text-data);
  color: var(--text-accent);
  margin: 0;
}
.article-step h3,
.article-step .wp-block-heading{ font: var(--text-h3); color: var(--text-strong); margin-top: var(--space-2); }
.article-step p{ margin-top: var(--space-2); }
.article-step > .article-step__num + p,
.article-step > .article-step__num + h3,
.article-step > .article-step__num + .wp-block-heading{ margin-top: var(--space-2); }
.article-step .article-resource{ margin-top: var(--space-3); }
.article-step ul, .article-step ol{ margin-top: var(--space-3); }

/*
 * WordPress block-editor fallbacks: when admins use core Separator + Group +
 * red number paragraphs instead of the Article Step block, restyle them to
 * match the static Insights design (hairline rule + mono step number).
 */
.article-body > .wp-block-group{
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-5);
}
.article-body > .wp-block-group + .wp-block-group,
.article-body > .article-step + .article-step{
  margin-top: var(--space-6) !important;
}
.article-body .wp-block-separator{
  display: none;
}
.article-body > .wp-block-group > p:first-child{
  display: block;
  font: var(--text-data) !important;
  color: var(--text-accent) !important;
  margin: 0 !important;
  background: none !important;
}
.article-body > .wp-block-group > h3,
.article-body > .wp-block-group > .wp-block-heading{
  font: var(--text-h3);
  color: var(--text-strong);
  margin-top: var(--space-2) !important;
}
.article-body > .wp-block-group > p:not(:first-child){
  margin-top: var(--space-2) !important;
}
.article-body > .wp-block-group .article-resource{
  margin-top: var(--space-3);
}

/* ============ Form fields ============ */
.field-label{
  display:block; font:var(--text-eyebrow); text-transform:uppercase;
  letter-spacing:var(--tracking-wide); color:var(--text-muted); margin-bottom:var(--space-2);
}
.field-label sup{ color:var(--text-accent); }
.input, .textarea{
  width:100%; font:var(--text-base); font-size:var(--size-sm); color:var(--text-strong);
  background:var(--white); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:var(--transition-control); outline:none;
}
.input{ height:var(--field-h); padding:0 var(--space-4); }
.textarea{ font-family:var(--font-sans); line-height:var(--leading-relaxed); padding:var(--space-3) var(--space-4); resize:vertical; }
.input:focus, .textarea:focus{ border-color:var(--rq-red-700); box-shadow:var(--shadow-focus); }
.field-hint{ display:block; font:var(--text-small); font-size:var(--size-xs); color:var(--text-subtle); margin-top:var(--space-2); }

/* ============ Testimonial ============ */
.testimonial{ display:flex; align-items:flex-start; gap:var(--space-7); color:var(--text-on-dark-muted); }
.testimonial__avatar{
  width:92px; height:92px; flex:0 0 auto; border-radius:var(--radius-circle); overflow:hidden;
  background:rgba(255,255,255,.08); display:grid; place-items:center; color:rgba(255,255,255,.4);
}
.testimonial__body{ flex:1; }
.testimonial__quote-icon{ color:var(--rq-red-500); margin-bottom:var(--space-3); }
.testimonial p{ font:var(--text-base); color:var(--text-on-dark-muted); max-width:56ch; margin-bottom:var(--space-4); }
.testimonial__byline{ font:var(--text-small); font-size:var(--size-xs); color:var(--text-on-dark); }
.testimonial__byline strong{ font-weight:var(--weight-semibold); }
.testimonial__byline span{ color:var(--text-on-dark-muted); }