/* ============================================================================
   PayrAdvisors — Component Library
   Reusable, mobile-first building blocks reused across every page.
   Paired with PHP partials in template-parts/components/.
   ============================================================================ */

/* ---------- Layout: container + section ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: 760px;
}

.section {
  padding-block: var(--section-y);
}

.section--alt   { background: var(--surface); }
.section--navy  { background: var(--navy);      color: var(--on-dark); }
.section--deep  { background: var(--deep-navy);  color: var(--on-dark); }

/* On dark sections, headings invert to white */
.section--navy :is(h1, h2, h3, h4, h5, h6),
.section--deep :is(h1, h2, h3, h4, h5, h6) {
  color: var(--on-dark);
}

/* ---------- Section head ---------- */
.section__head {
  max-width: 680px;
  margin-bottom: var(--space-7);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__title {
  font-size: var(--fs-h2);
}

/* ---------- Eyebrow (tracked uppercase label, Inter 600, magenta) ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-emphasis);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: var(--space-3);
}

.eyebrow--on-dark {
  /* still magenta per brand (single accent); kept as a hook if a softer
     tint is ever needed on very dark grounds */
  color: var(--magenta);
}

/* ---------- Lead paragraph ---------- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--muted);
  max-width: 65ch;
}

.section--navy .lead,
.section--deep .lead {
  color: var(--on-dark-soft);
}

/* ---------- Hero subtext (matches the client-preferred Insights hero) ----------
   An italic serif tagline over a smaller supporting line, on dark hero grounds.
   Used explicitly on the homepage (.hero-tagline/.hero-supp) and applied to the
   existing single-line hero leads on every image-band hero so all pages match. */
.hero-tagline,
.image-band--hero .lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--on-dark-soft);
  max-width: 40ch;
}
.hero-supp {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--on-dark-faint);
  max-width: 54ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-emphasis);
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
}

/* Primary — magenta fill, white text (the CTA) */
.btn--primary {
  background: var(--magenta);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--white);
}

/* Outline on dark — white border + text, for navy/photo grounds */
.btn--outline-dark {
  background: transparent;
  color: var(--white);
  border-color: var(--on-dark-faint);
}
.btn--outline-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--white);
  color: var(--white);
}

/* Light — white fill, navy text */
.btn--light {
  background: var(--white);
  color: var(--navy);
}
.btn--light:hover {
  background: var(--surface);
  color: var(--navy);
}

/* Outline on light — navy border + text */
.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--line);
}
.btn--outline:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.btn__icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
}

/* ---------- Card ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slow), transform var(--transition-slow),
              border-color var(--transition);
}

.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.card__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--navy);
  margin-bottom: var(--space-3);
}

.card__eyebrow {
  margin-bottom: var(--space-2);
}

.card__title {
  font-size: var(--fs-h5);
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.card__text {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.6;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--weight-emphasis);
  color: var(--magenta);
}

/* ---------- Grid helper (cards, features) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .card-grid--2,
  .card-grid--3,
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Stat grid (“by the numbers”) ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-5);
}

@media (min-width: 720px) {
  .stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.stat__value {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1;
  color: var(--navy);
}

.stat__label {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* On-dark stat treatment (hero/stat bands) */
.stat-grid--on-dark .stat__value { color: var(--white); }
.stat-grid--on-dark .stat__label { color: var(--on-dark-faint); }

/* ---------- Image band w/ scrim (hero, stat band, CTA band) ---------- */
.image-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.image-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.image-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder when no real photo is supplied yet — clearly marked */
.image-band__placeholder {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--navy), var(--deep-navy));
}

.image-band__placeholder-tag {
  /* Dev-only affordance — hidden for launch so no "Photo zone" text shows on the
     live site. Remove this line to re-expose the label while wiring in real art. */
  display: none;
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  border: 1px solid var(--on-dark-line);
  padding: 3px 7px;
  border-radius: 4px;
}

.image-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}

.image-band__scrim--flat { background: var(--scrim-flat); }
.image-band__scrim--center { background: linear-gradient(rgba(0,20,38,0.86), rgba(0,37,69,0.9)); }

/* Hero variant: tall band; top padding clears the fixed overlay header. */
.image-band--hero {
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 70vh, 46rem);
  padding-block: calc(var(--space-8) + 68px) var(--space-8);
}

.image-band__inner--narrow { max-width: 640px; }

.image-band .hero-display {
  font-size: var(--fs-display);
  line-height: 1.02;
}

.image-band__inner {
  position: relative;
  color: var(--on-dark);
}

.image-band :is(h1, h2, h3, h4, h5, h6) {
  color: var(--on-dark);
}

/* ---------- Small utilities ---------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.py-section { padding-block: var(--section-y); }
.flow > * + * { margin-top: var(--space-4); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.btn-row--center { justify-content: center; }

/* ---------- Testimonials (reusable across pages) ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 600px) { .testimonial-grid--3, .testimonial-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .testimonial-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.testimonial__quote {
  position: relative;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  padding-top: var(--space-5);
}
/* magenta opening quote mark */
.testimonial__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 0;
  font-family: var(--font-serif);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--magenta);
}
.testimonial__cite { margin-top: auto; font-style: normal; }
.testimonial__name { display: block; font-weight: var(--weight-emphasis); color: var(--navy); font-size: var(--fs-small); }
.testimonial__org { display: block; font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }

/* On dark grounds */
.section--navy .testimonial,
.section--deep .testimonial { background: rgba(255, 255, 255, 0.04); border-color: var(--on-dark-line); }
.section--navy .testimonial__quote,
.section--deep .testimonial__quote { color: var(--on-dark); }
.section--navy .testimonial__name,
.section--deep .testimonial__name { color: var(--white); }
.section--navy .testimonial__org,
.section--deep .testimonial__org { color: var(--on-dark-faint); }

/* ---------- Client logo wall (reusable) ---------- */
.clients__label {
  max-width: none; /* override the global p max-width so centered text spans the container */
  text-align: center;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-emphasis);
  color: var(--muted);
  margin-bottom: var(--space-6);
}
.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 600px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }

.logo-wall__item {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 92px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
  font-weight: var(--weight-emphasis);
  font-size: var(--fs-small);
  line-height: 1.3;
}
.logo-wall__item small { display: block; font-weight: 400; color: var(--faint); margin-top: 4px; }

/* "and many more" tile — an intentional label, not a missing logo. */
.logo-wall__item--more {
  font-style: italic;
  font-weight: var(--weight-body);
  color: var(--muted);
  background: transparent;
  border-style: dashed;
}

/* Real client logo image (rendered by template-parts/components/client-logo.php
   inside a .logo-wall__item or .client-logo tile). Contained, height-capped so
   wide wordmarks and square marks both sit nicely on the white tile. */
.client-logo__img {
  display: block;
  width: 100%;
  max-width: 190px;
  max-height: 52px;
  height: auto;
  object-fit: contain;
}

/* ---------- Contact (grid + on-dark form, reusable) ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 880px) { .contact__grid { grid-template-columns: 1fr 1.05fr; } }

.contact__trust { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.contact__trust li { display: flex; gap: var(--space-3); align-items: center; color: var(--on-dark-soft); }
.contact__trust .icon { width: 22px; height: 22px; color: var(--magenta); flex: none; }
.contact__trust a { color: var(--white); font-weight: var(--weight-emphasis); }
.contact__trust a:hover { color: var(--magenta); }

/* Form on dark */
.contact-form__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.contact-form .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form .field { margin: 0; }
.contact-form label {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--weight-emphasis);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: var(--space-2);
}
.contact-form .req { color: var(--magenta); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  color: var(--white);
  font-size: 0.9375rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--on-dark-faint); }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--magenta); outline-offset: 1px; border-color: transparent; }
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form .btn { margin-top: var(--space-5); width: 100%; }

/* Honeypot — hide from humans */
.contact-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Notices */
.form-notice {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-left: 3px solid var(--blue);
}
.form-notice--err { border-left-color: var(--magenta); }

@media (max-width: 520px) {
  .contact-form .field-grid { grid-template-columns: 1fr; }
}

/* ---------- Page hero (dark gradient, reusable) ----------
   Shared dark hero shell for interior pages (Our Services, About, …). Own
   navy→deep-navy gradient with brand glows — no image-band / photo placeholder.
   Two-column at ≥900px: copy + a visual/panel. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--section-y) + 4rem) var(--section-y);
  color: var(--on-dark);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 120% at 82% 0%, rgba(28, 127, 214, 0.22), transparent 55%),
    radial-gradient(100% 100% at 0% 100%, rgba(230, 0, 126, 0.14), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--deep-navy) 100%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero :is(h1, h2) { color: var(--on-dark); }
.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.page-hero__content { max-width: 42rem; }

/* ---------- Animated SVG data-viz motif (reusable, decorative) ----------
   Sits absolutely inside a relatively-positioned, clipped host (e.g. a lead
   tile or highlight card). Animations fire when any ancestor gains `.is-in`
   (added by an IntersectionObserver) and the motif itself has `.svc-motif--anim`
   (added only when motion is allowed). Markup: template-parts/components/svc-motif.php. */
.svc-motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  /* fade the motif out toward the top-left, where the title sits */
  -webkit-mask-image: linear-gradient(305deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 82%);
  mask-image: linear-gradient(305deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 82%);
}
.svc-motif svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.svc-motif__bar { transform-box: fill-box; transform-origin: bottom; }
/* JS-active (motion allowed): bars start collapsed, then grow when scrolled into view */
.svc-motif--anim .svc-motif__bar { transform: scaleY(0); }
.is-in .svc-motif--anim .svc-motif__bar {
  animation: svcBarGrow 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes svcBarGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
/* line / area motifs: the stroke draws itself in, the fill + nodes fade in */
.svc-motif__line { stroke-dasharray: 1; }
.svc-motif--anim .svc-motif__line { stroke-dashoffset: 1; }
.svc-motif--anim .svc-motif__fill { opacity: 0; }
.is-in .svc-motif--anim .svc-motif__line {
  animation: svcLineDraw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.is-in .svc-motif--anim .svc-motif__fill {
  animation: svcFadeIn 1.2s ease forwards;
  animation-delay: 0.15s;
}
@keyframes svcLineDraw { to { stroke-dashoffset: 0; } }
@keyframes svcFadeIn { to { opacity: 1; } }

/* contract motif: the pencil slides in and "writes" as the signature draws */
.svc-motif--anim .svc-motif__pencil { opacity: 0; transform: translateX(-30px); }
.is-in .svc-motif--anim .svc-motif__pencil {
  animation: svcPencilWrite 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes svcPencilWrite {
  0%   { opacity: 0; transform: translateX(-30px); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  /* safety: never leave any motif hidden for reduced-motion users */
  .svc-motif--anim .svc-motif__bar { transform: scaleY(1); }
  .svc-motif--anim .svc-motif__line { stroke-dashoffset: 0; }
  .svc-motif--anim .svc-motif__fill { opacity: 1; }
  .svc-motif--anim .svc-motif__pencil { opacity: 1; transform: none; }
}