/* ==========================================================================
   RPS — "Assembly Drawing" design system
   Shared by: ThermaSheet, Roofing Visualizer, Sol-R-Skin SA, Contractor Program
   Source of truth: Figma jnxoKG6mt8UbTpHUAIwq7U

   Everything is namespaced under .rps-ad so it cannot leak into, or be
   clobbered by, the renowise parent theme or the three page builders that
   are installed on this site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — pulled directly from the Figma variable set
   -------------------------------------------------------------------------- */
.rps-ad {
  --ink-primary:   #232323;
  --ink-secondary: #455560;
  --ink-inverse:   #ffffff;
  --blue-primary:  #00a7d7;
  --blue-deep:     #0077a3;
  --gold-credit:   #ffab00;
  --bg-white:      #ffffff;
  --bg-paper:      #fafbfc;
  --bg-paper-dim:  #f1f4f6;
  --bg-charcoal:   #232323;
  --line-hairline: #d8dee3;

  /* Layout: 1440 frame with 100px gutters => 1240 content */
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 100px);

  /* Type ramp. Figma desktop values are the ceiling; these scale down
     cleanly because only two mobile frames were ever designed. */
  --fs-h1:      clamp(34px, 4.4vw, 56px);
  --fs-h2:      clamp(28px, 3.2vw, 40px);
  --fs-h3:      clamp(19px, 1.7vw, 22px);
  --fs-body:    clamp(17px, 1.35vw, 19px);
  --fs-body-sm: clamp(15px, 1.15vw, 16px);
  --fs-mono:    14px;
  --fs-mono-sm: 12px;
  --fs-stat:    clamp(40px, 4.6vw, 64px);

  --ff-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-body:    "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono:    "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sect-y: clamp(56px, 6.5vw, 96px);

  font-family: var(--ff-body);
  color: var(--ink-primary);
  background: var(--bg-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kill parent-theme margins on the elements we own. */
.rps-ad h1, .rps-ad h2, .rps-ad h3, .rps-ad h4,
.rps-ad p, .rps-ad ul, .rps-ad ol, .rps-ad figure, .rps-ad dl, .rps-ad dd {
  margin: 0;
  padding: 0;
}
.rps-ad ul, .rps-ad ol { list-style: none; }
.rps-ad img { max-width: 100%; height: auto; display: block; }
.rps-ad *, .rps-ad *::before, .rps-ad *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.rps-ad__section { padding: var(--sect-y) 0; }
.rps-ad__wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.rps-ad__section--paper    { background: var(--bg-paper); }
.rps-ad__section--white    { background: var(--bg-white); }
.rps-ad__section--dim      { background: var(--bg-paper-dim); }
.rps-ad__section--charcoal { background: var(--bg-charcoal); color: var(--ink-inverse); }
.rps-ad__section--charcoal .rps-ad__h2,
.rps-ad__section--charcoal .rps-ad__lede { color: var(--ink-inverse); }
.rps-ad__section--charcoal .rps-ad__eyebrow { color: var(--blue-primary); }

/* Hairline rules between stacked sections. */
.rps-ad__section--ruled { border-top: 1px solid var(--line-hairline); }

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */

/* The mono "drawing voice" — sheet numbers, part labels, dimensions. */
.rps-ad__eyebrow {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: 0.28px;
  color: var(--blue-deep);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.rps-ad__h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
}
.rps-ad__h1 em { font-style: normal; color: var(--blue-primary); }

.rps-ad__h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
}

.rps-ad__h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--ink-primary);
}

.rps-ad__lede {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 62ch;
}
.rps-ad__lede strong { color: var(--ink-primary); font-weight: 700; }

.rps-ad__body {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink-secondary);
}

/* Mono meta strip — the "· separated" credential line under the hero. */
.rps-ad__metastrip {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-secondary);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.rps-ad__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.rps-ad__btn--primary {
  background: var(--blue-primary);
  color: var(--ink-inverse);
}
.rps-ad__btn--primary:hover,
.rps-ad__btn--primary:focus-visible { background: var(--blue-deep); color: var(--ink-inverse); }

.rps-ad__btn--ghost {
  background: transparent;
  color: var(--ink-primary);
  border-color: var(--ink-primary);
}
.rps-ad__btn--ghost:hover,
.rps-ad__btn--ghost:focus-visible { background: var(--ink-primary); color: var(--ink-inverse); }

.rps-ad__btn--gold {
  background: var(--gold-credit);
  color: var(--ink-primary);
}
.rps-ad__btn--gold:hover,
.rps-ad__btn--gold:focus-visible { filter: brightness(.94); }

.rps-ad__btnrow { display: flex; flex-wrap: wrap; gap: 16px; }

/* Visible focus everywhere — the parent theme does not provide one. */
.rps-ad a:focus-visible,
.rps-ad button:focus-visible,
.rps-ad input:focus-visible,
.rps-ad textarea:focus-visible,
.rps-ad select:focus-visible,
.rps-ad [tabindex]:focus-visible {
  outline: 3px solid var(--blue-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Signature elements — the pieces that make this "the assembly drawing"
   -------------------------------------------------------------------------- */

/* 5a. Photo frame + caption chip */
.rps-ad__figure { position: relative; margin: 0; }
.rps-ad__figure img {
  width: 100%;
  border: 1px solid var(--line-hairline);
  object-fit: cover;
}
.rps-ad__caption {
  display: inline-block;
  background: var(--ink-primary);
  color: var(--ink-inverse);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-mono-sm);
  line-height: 1.35;
  padding: 7px 12px;
  margin-top: -1px;
  max-width: 100%;
}
/* Caption overlaid on the photo (hero treatment). */
.rps-ad__figure--overlay .rps-ad__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-top: 0;
}

/* 5b. Title block — the drawing sheet stamp */
.rps-ad__titleblock {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: var(--bg-white);
  border: 1.5px solid var(--ink-primary);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.25;
}
.rps-ad__titleblock strong {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: 0.39px;
  color: var(--ink-primary);
}
.rps-ad__titleblock span {
  font-family: var(--ff-mono);
  font-weight: 500;
  color: var(--blue-deep);
}

/* 5c. Gold stamp — rotates in on scroll */
.rps-ad__stamp {
  display: inline-block;
  background: var(--gold-credit);
  color: var(--ink-primary);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 12px 18px;
  border-radius: 8px;
  transform: rotate(4deg);
}

/* 5d. Ruled list — hairline + mono index + label. Replaces cards. */
.rps-ad__ruled { border-top: 1px solid var(--line-hairline); }
.rps-ad__ruled li {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  gap: 0 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-hairline);
}
.rps-ad__idx {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  color: var(--blue-deep);
}
.rps-ad__ruled li > span:last-child {
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--ink-primary);
}

/* 5e. Spec grid — numbered columns with a heavier top rule */
.rps-ad__specgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 3.5vw, 50px);
}
.rps-ad__spec { border-top: 1.5px solid var(--ink-primary); padding-top: 18px; }
.rps-ad__spec .rps-ad__idx { display: block; margin-bottom: 12px; }
.rps-ad__spec h3 { margin-bottom: 12px; }

/* 5f. Stat — oversized numeral with a gold tick above it */
.rps-ad__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 3vw, 40px);
}
.rps-ad__stat { position: relative; padding-top: 22px; }
.rps-ad__stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 5px;
  background: var(--gold-credit);
}
.rps-ad__stat dd {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-stat);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
}
.rps-ad__stat dd .rps-ad__unit { font-size: .45em; }
.rps-ad__stat dt {
  margin-top: 12px;
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--ink-secondary);
  max-width: 26ch;
}

/* --------------------------------------------------------------------------
   6. Forms — markup is rendered by Contact Form 7, so style by element
   -------------------------------------------------------------------------- */
.rps-ad__formcard {
  background: var(--bg-white);
  border: 1.5px solid var(--ink-primary);
  padding: clamp(24px, 3vw, 36px);
}
.rps-ad__formcard .rps-ad__eyebrow { margin-bottom: 12px; }

.rps-ad__form label,
.rps-ad__formcard label {
  display: block;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: var(--fs-mono-sm);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 7px;
}
.rps-ad__form input[type="text"],
.rps-ad__form input[type="email"],
.rps-ad__form input[type="tel"],
.rps-ad__form textarea,
.rps-ad__formcard input[type="text"],
.rps-ad__formcard input[type="email"],
.rps-ad__formcard input[type="tel"],
.rps-ad__formcard textarea {
  width: 100%;
  font-family: var(--ff-body);
  font-size: 16px; /* 16px minimum stops iOS zoom-on-focus */
  color: var(--ink-primary);
  background: var(--bg-white);
  border: 1px solid var(--line-hairline);
  border-radius: 4px;
  padding: 13px 14px;
  transition: border-color .15s ease;
}
.rps-ad__form :is(input, textarea):focus,
.rps-ad__formcard :is(input, textarea):focus { border-color: var(--blue-primary); }
.rps-ad__form textarea, .rps-ad__formcard textarea { min-height: 110px; resize: vertical; }

.rps-ad__fieldrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.rps-ad__field { margin-bottom: 18px; }

/* CF7 submit + its status messages */
.rps-ad .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: var(--blue-primary);
  color: var(--ink-inverse);
  border: 0;
  border-radius: 4px;
  padding: 16px 28px;
  cursor: pointer;
  transition: background-color .18s ease;
}
.rps-ad .wpcf7-submit:hover { background: var(--blue-deep); }
.rps-ad .wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; margin-top: 6px; }
.rps-ad .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-width: 1px;
  font-size: var(--fs-body-sm);
}

/* --------------------------------------------------------------------------
   7. Motion — every effect is opt-in via .is-in, set by the IntersectionObserver
   -------------------------------------------------------------------------- */
/* The hidden start state is gated on .rps-js, which an inline script in
   wp_head sets as soon as the document starts parsing. If that script never
   runs -- JS disabled, blocked, or the bundle 404s -- these rules never apply
   and the page renders fully visible instead of as a blank shell. */
.rps-js .rps-ad [data-anim] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}
.rps-ad [data-anim].is-in { opacity: 1; transform: none; }

.rps-js .rps-ad [data-anim="stamp"] { transform: rotate(0deg) scale(.9); }
.rps-ad [data-anim="stamp"].is-in { transform: rotate(4deg) scale(1); }

/* Staggering is applied inline via --d on the element. */
.rps-ad [data-anim][style*="--d"] { transition-delay: var(--d); }

@media (prefers-reduced-motion: reduce) {
  .rps-ad *,
  .rps-ad *::before,
  .rps-ad *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rps-js .rps-ad [data-anim] { opacity: 1; transform: none; }
  .rps-js .rps-ad [data-anim="stamp"] { transform: rotate(4deg); }
}

/* --------------------------------------------------------------------------
   8. Utilities
   -------------------------------------------------------------------------- */
.rps-ad__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
}
.rps-ad__split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.rps-ad__split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

.rps-ad__stack > * + * { margin-top: var(--stack, 20px); }

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

@media (max-width: 900px) {
  .rps-ad__split,
  .rps-ad__split--wide-left,
  .rps-ad__split--wide-right { grid-template-columns: minmax(0, 1fr); }
}