/**
 * CP · CTA Band — self-contained styles (token-driven, brand-agnostic).
 * Scoped under the block root .cp-cta-band so the block is reusable on any
 * page. Ported from the .expect / .btn rules on the approved About page.
 * Support shades the palette doesn't carry (the fuscous-gray band, the geyser
 * on-dark body copy, the primary hover) stay as literals.
 *
 * Accessibility: on the dark band, body copy uses the light geyser tint — never
 * Cardinal red — and red is confined to the eyebrow and the filled button.
 */
.cp-cta-band {
  --cta-white: var(--wp--preset--color--white);
  --cta-primary: var(--wp--preset--color--primary);
  --cta-display: var(--wp--preset--font-family--barlow-condensed);
  --cta-body: var(--wp--preset--font-family--roboto);
  --cta-band-bg: #494947;
  --cta-geyser: #CBD5E1;
  --cta-primary-hover: var(--wp--custom--color--primary-hover);
  --cta-max: 1100px;
  --cta-r-sm: 4px;
  background: var(--cta-band-bg);
  color: var(--cta-white);
  padding: var(--cp-section-py, 80px) clamp(24px, 5vw, 80px);
}
.cp-cta-band .expect__inner { max-width: var(--cta-max); margin: 0 auto; }
.cp-cta-band .eyebrow {
  font-family: var(--cta-body); font-weight: 600; font-size: 11px; line-height: 24px;
  letter-spacing: 2.5px; text-transform: uppercase; margin: 0;
}
/* WCAG AA override: the static playbook renders this eyebrow in Cardinal red,
   which is only 1.6:1 against the dark band — far under the 4.5:1 an 11px label
   needs, and exactly the red-on-dark the theme's accessibility rule forbids.
   White clears it at 9:1. Red stays on the filled button, where it carries the
   brand without being the thing you have to read. */
.cp-cta-band .eyebrow--red { color: var(--cta-white); font-weight: 700; }
/* As the Playbook renders it: there `.expect p` (16px / 27.2px, 16px top
   margin) outranks `.eyebrow`, so the band's eyebrow is set in the paragraph's
   size and sits 16px lower. The design rule says 11px, but the rendered
   Playbook is the approved page; matching it is ~19px of band height on every
   page with this band (client audit 2026-10-06, item 3). The red spoke band
   (is-variant-red) already matched its Playbook band and is left alone. */
.cp-cta-band:not(.is-variant-red) .eyebrow { font-size: 16px; line-height: 27.2px; margin-top: 16px; }
.cp-cta-band h2 {
  font-family: var(--cta-display); font-weight: 700; font-size: var(--cp-h2, clamp(28px, 4vw, 44px));
  line-height: 1.1; letter-spacing: -0.005em; color: var(--cta-white); margin: 11px 0 0;
}
.cp-cta-band p {
  font-family: var(--cta-body); font-size: 16px; line-height: 27.2px;
  color: var(--cta-geyser); margin: 16px 0 0; max-width: 760px;
}
.cp-cta-band .expect__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cp-cta-band .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cta-body); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 22px; border: 0; border-radius: var(--cta-r-sm);
  text-decoration: none; gap: 8px; white-space: nowrap;
}
.cp-cta-band .btn--primary { background: var(--cta-primary); color: var(--wp--custom--color--on-primary); }
.cp-cta-band .btn--primary:hover { background: var(--cta-primary-hover); }
.cp-cta-band .btn--ghost {
  background: transparent; color: var(--cta-white); border: 1px solid rgba(255, 255, 255, 0.3);
}
.cp-cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.6); }

/* City pages close on the Playbook's red band (`is-variant-spoke`): Cardinal with
   a 19% black shade toward the corner, copy left and the buttons right. White on
   Cardinal is 5.9:1, so every line on it is white, the eyebrow included. */
/* The ink on that band is the brand's on-primary: white on GenerX's Cardinal,
   Cod Gray on Grästen's Texas Orange (white there is 2.9:1), so the copy, the
   ghost button and the solid button's label all follow it (re-audit W1). */
.cp-cta-band.is-variant-spoke {
  --cta-on: var(--wp--custom--color--on-primary, var(--cta-white));
  background: linear-gradient(135deg, transparent, rgba(0, 0, 0, 0.19)), var(--cta-primary);
  color: var(--cta-on);
  padding: 64px 72px;
}
.cp-cta-band.is-variant-spoke .eyebrow,
.cp-cta-band.is-variant-spoke h2 { color: var(--cta-on); }
.cp-cta-band.is-variant-spoke .expect__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.cp-cta-band.is-variant-spoke .expect__copy { display: flex; flex-direction: column; gap: 8px; }
.cp-cta-band.is-variant-spoke h2 { font-size: 48px; line-height: 1.05; margin: 0; }
.cp-cta-band.is-variant-spoke p { font-size: 17px; color: var(--cta-on); margin: 0; }
.cp-cta-band.is-variant-spoke .expect__ctas { margin-top: 0; gap: 14px; }
.cp-cta-band.is-variant-spoke .btn { font-size: 16px; font-weight: 700; }
.cp-cta-band.is-variant-spoke .btn--primary { background: var(--cta-white); color: var(--wp--custom--color--secondary-fg, var(--cta-primary)); padding: 16px 26px; }
.cp-cta-band.is-variant-spoke .btn--primary:hover { background: #FFF9F0; }
.cp-cta-band.is-variant-spoke .btn--ghost { border: 2px solid var(--cta-on); color: var(--cta-on); padding: 14px 24px; }
.cp-cta-band.is-variant-spoke .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 980px) {
  .cp-cta-band.is-variant-spoke { padding: 48px 24px; }
  .cp-cta-band.is-variant-spoke .expect__inner { flex-direction: column; align-items: flex-start; }
  .cp-cta-band.is-variant-spoke h2 { font-size: 34px; }
}

/* Fine print under the buttons (is-note-after). */
.cp-cta-band .expect__disclaimer { font-family: var(--wp--preset--font-family--roboto); font-size: 12px; line-height: 1.5; color: var(--wp--preset--color--contrast-3); margin: 16px 0 0; }


/* A lead link (the Service number on Generator One's band; staging audit W2)
   takes the lead's own colour. The global link colour is a dark text tone, which
   on this band was 1.6:1. */
.cp-cta-band p a,
.cp-cta-band p a.cps-phone-number { color: inherit; }

/* The brand's own band (brand.php `cta_band` => 'primary', body.cp-cta-band-primary;
   `is-expect` keeps the charcoal band where the Playbook draws `.expect`, W5):
   Generator One's Playbook closes every page on its navy, with an 11px geyser
   eyebrow, an 18px lead, a plain lead link and a white button with navy ink
   (staging audit W3, SV4). The city-page variants keep their own rules. */
.cp-cta-band-primary .cp-cta-band:not(.is-variant-spoke):not(.is-variant-red):not(.is-expect) { --cta-band-bg: var(--wp--preset--color--primary); }
.cp-cta-band-primary .cp-cta-band:not(.is-variant-spoke):not(.is-variant-red):not(.is-expect) .eyebrow { font-size: 11px; line-height: 24px; margin-top: 0; color: var(--cta-geyser); }
.cp-cta-band-primary .cp-cta-band:not(.is-variant-spoke):not(.is-variant-red):not(.is-expect) h2 { margin-top: 8px; }
.cp-cta-band-primary .cp-cta-band:not(.is-variant-spoke):not(.is-variant-red):not(.is-expect) p { font-size: 18px; line-height: 29px; margin-top: 12px; max-width: 620px; }
.cp-cta-band-primary .cp-cta-band p a { text-decoration: none; }
.cp-cta-band-primary .cp-cta-band:not(.is-variant-spoke):not(.is-variant-red):not(.is-expect) .expect__ctas { margin-top: 24px; }
.cp-cta-band-primary .cp-cta-band:not(.is-variant-spoke):not(.is-variant-red):not(.is-expect) .btn--primary { background: var(--cta-white); color: var(--cta-primary); }
.cp-cta-band-primary .cp-cta-band:not(.is-variant-spoke):not(.is-variant-red):not(.is-expect) .btn--primary:hover { background: var(--wp--preset--color--on-surface); }

/* is-call (Generator One's Towable band, full-site audit SV7): the copy and its
   button on the left, a "Call Now" label over a large phone number on the right;
   stacked and left-aligned below 980px. */
.cp-cta-band.is-call .expect__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
.cp-cta-band.is-call .expect__inner > :not(.cta-band__call) { grid-column: 1; }
.cp-cta-band.is-call .cta-band__call { grid-column: 2; grid-row: 1 / span 5; justify-self: end; text-align: right; }
.cp-cta-band .cta-band__call-label { margin: 0; font-family: var(--cta-body); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--cta-geyser); }
.cp-cta-band .cta-band__phone { display: inline-block; margin-top: 8px; font-family: var(--cta-display); font-weight: 700; font-size: 48px; line-height: 1; color: var(--cta-white); white-space: nowrap; text-decoration: none; }
.cp-cta-band .cta-band__phone:hover { color: var(--cta-geyser); }
/* Stacked, the copy keeps its own spacing and only the call block sits 24px under
   it, as the Playbook's two-row .cta-band__inner; the number stays 48px down to
   640px, then 36px (re-audit: FAQs and Towable bands on tablet and phone). */
@media (max-width: 980px) {
  .cp-cta-band.is-call .expect__inner { grid-template-columns: 1fr; row-gap: 0; }
  .cp-cta-band.is-call .cta-band__call { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; margin-top: 24px; }
}
@media (max-width: 640px) {
  .cp-cta-band .cta-band__phone { font-size: 36px; }
}