/* ============================================================================
   CarportCentral Design System — Components (v2.3, 2026-07-30)
   ----------------------------------------------------------------------------
   Requires tokens.css. Enqueue after it.

   SCOPING: every rule is scoped under .cpc-scope. Put that class on the page
   template's outermost wrapper. This keeps the global style.css from bleeding
   in AND stops these rules leaking onto legacy pages.

   The !important on headings is deliberate and unavoidable: style.css ships
   sitewide h1–h6 rules that are themselves !important, so anything less loses.
   Same fix ecp-*, .cu2026 and .fin2026 all had to make independently.

   v2.0 — ALL BLUE REMOVED. Dark surfaces are neutral grey (--cpc-dark #383739),
   never navy. Hover FILLS use --cpc-orange-hover; orange TEXT uses
   --cpc-orange-ink. Do not swap those two — the text token is the only one
   that passes AA on white.
   ========================================================================== */

.cpc-scope {
  font-family: var(--cpc-font);
  font-size: var(--cpc-body);
  line-height: var(--cpc-body-lh);
  color: var(--cpc-ink);
  background: var(--cpc-ground);
}
.cpc-scope *{ box-sizing: border-box; }
.cpc-scope img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------------------
   1. LAYOUT
   ------------------------------------------------------------------------ */
.cpc-scope .cpc-wrap {
  max-width: var(--cpc-maxw);
  margin-inline: auto;
  padding-inline: var(--cpc-gutter);
}
.cpc-scope .cpc-section      { padding-block: var(--cpc-section); }
.cpc-scope .cpc-section--sm  { padding-block: var(--cpc-section-sm); }
.cpc-scope .cpc-section--tint{ background: var(--cpc-tint); }
.cpc-scope .cpc-section--dark{ background: var(--cpc-dark-deep); color: var(--cpc-on-dark-body); }

/* Centred section intro */
.cpc-scope .cpc-sechead { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: 2.6rem; }
.cpc-scope .cpc-sechead p { color: var(--cpc-ink-2); margin-top: .9rem; }

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHY — sentence case, Poppins 700, never uppercase
   ------------------------------------------------------------------------ */
.cpc-scope h1, .cpc-scope h2, .cpc-scope h3, .cpc-scope h4 {
  font-family: var(--cpc-font) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--cpc-ink) !important;
  margin: 0 !important;
  text-wrap: balance;
}
.cpc-scope h1 { font-size: var(--cpc-h1) !important; line-height: 1.09 !important; }
.cpc-scope h2 { font-size: var(--cpc-h2) !important; line-height: 1.12 !important; }
.cpc-scope h3 { font-size: var(--cpc-h3) !important; line-height: 1.2  !important; }
.cpc-scope p  { margin: 0 0 1em; }
.cpc-scope p:last-child { margin-bottom: 0; }

.cpc-scope .cpc-lede    { font-size: clamp(1.05rem,1.5vw,1.26rem); color: var(--cpc-ink-2); max-width: 54ch; }
.cpc-scope .cpc-muted   { color: var(--cpc-muted); font-size: .88rem; }
.cpc-scope .cpc-tnum    { font-variant-numeric: tabular-nums; font-family: var(--cpc-font-mono); }

/* Inline links in body copy — orange-ink so it passes AA on white */
.cpc-scope .cpc-prose a {
  color: var(--cpc-orange-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

/* On dark */
.cpc-scope .cpc-section--dark h1,
.cpc-scope .cpc-section--dark h2,
.cpc-scope .cpc-section--dark h3 { color: var(--cpc-on-dark) !important; }
.cpc-scope .cpc-section--dark p  { color: var(--cpc-on-dark-body); }

/* ---------------------------------------------------------------------------
   3. EYEBROW + PILLS
   RULE: hero uses the PILL form; body sections use the PLAIN TEXT form.
   ------------------------------------------------------------------------ */

/* 3a. Body-section eyebrow — plain text, no rule, 12px/800 */
.cpc-scope .cpc-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cpc-orange-ink);
  margin: 0 0 12px;
}
.cpc-scope .cpc-section--dark .cpc-eyebrow,
.cpc-scope .cpc-eyebrow--on-dark { color: var(--cpc-orange-dark); }

/* 3b. Hero eyebrow — bordered translucent pill */
.cpc-scope .cpc-hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--cpc-r-pill);
  margin-bottom: 16px;
  background: rgba(244,88,11,.18);
  border: 1px solid rgba(244,88,11,.5);
  color: var(--cpc-orange-dark);
}
/* Same badge on a light hero */
.cpc-scope .cpc-hero-badge--light {
  background: var(--cpc-orange-tint);
  border-color: transparent;
  color: var(--cpc-orange-ink);
}

/* 3c. Pill family — promo, emphasis, availability, spec */
.cpc-scope .cpc-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--cpc-r-pill);
  background: var(--cpc-orange-tint);
  color: var(--cpc-orange-ink);
}
.cpc-scope .cpc-pill--solid   { background: var(--cpc-orange); color: #fff; }
.cpc-scope .cpc-pill--go      { background: var(--cpc-go-tint); color: var(--cpc-go); }
.cpc-scope .cpc-pill--neutral { background: var(--cpc-tint-2); color: var(--cpc-ink-2); }

/* ---------------------------------------------------------------------------
   4. BUTTONS — radius 10, 15/26, 16px/600, hover = darken + lift 2px
   ------------------------------------------------------------------------ */
.cpc-scope .cpc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 15px 26px;
  border-radius: var(--cpc-r);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--cpc-t-state), color var(--cpc-t-state),
              border-color var(--cpc-t-state), transform var(--cpc-t-lift),
              box-shadow var(--cpc-t-lift);
}
.cpc-scope .cpc-btn:active { transform: translateY(0); }

.cpc-scope .cpc-btn--primary {
  background: var(--cpc-orange); color: #fff !important;
  box-shadow: var(--cpc-shadow-cta);
}
.cpc-scope .cpc-btn--primary:hover {
  background: var(--cpc-orange-hover); color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(244,88,11,.6);
}

.cpc-scope .cpc-btn--ghost {
  background: var(--cpc-ground); color: var(--cpc-ink) !important;
  border-color: var(--cpc-line);
}
.cpc-scope .cpc-btn--ghost:hover {
  border-color: var(--cpc-ink-2); transform: translateY(-2px);
}

/* On dark */
.cpc-scope .cpc-btn--ondark {
  background: #fff; color: var(--cpc-dark) !important;
}
.cpc-scope .cpc-btn--ondark:hover { background: var(--cpc-tint-2); transform: translateY(-2px); }

.cpc-scope .cpc-btn--ondark-ghost {
  background: transparent; color: #fff !important;
  border-color: rgba(255,255,255,.55);
}
.cpc-scope .cpc-btn--ondark-ghost:hover {
  background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px);
}

.cpc-scope .cpc-btn--sm    { font-size: 13px; padding: 10px 16px; border-radius: var(--cpc-r-sm); }
.cpc-scope .cpc-btn--lg    { font-size: 17px; padding: 17px 30px; }
.cpc-scope .cpc-btn--block { width: 100%; }

/* ---------------------------------------------------------------------------
   5. PRODUCT CARD — radius 12, 1px line, 5:3 media, hover lift 3px
   This is the markup ecp_product_card() should emit.
   ------------------------------------------------------------------------ */
.cpc-scope .cpc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--cpc-gap-card);
}
.cpc-scope .cpc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cpc-scope .cpc-grid--4 { grid-template-columns: repeat(4, 1fr); }

.cpc-scope .cpc-card {
  display: flex;
  flex-direction: column;
  background: var(--cpc-ground);
  border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md);
  overflow: hidden;
  box-shadow: var(--cpc-shadow-sm);
  transition: transform var(--cpc-t-lift), box-shadow var(--cpc-t-lift), border-color var(--cpc-t-lift);
}
.cpc-scope .cpc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cpc-shadow-md);
  border-color: var(--cpc-line-strong);
}
.cpc-scope .cpc-card__media { display: block; overflow: hidden; aspect-ratio: 5/3; background: var(--cpc-tint);
  /* the UA default link color is rgb(0,0,238) — real blue in the cascade even
     though this anchor only wraps an image. v2.0 allows no blue anywhere. */
  color: inherit; }
.cpc-scope .cpc-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--cpc-t-media);
}
.cpc-scope .cpc-card:hover .cpc-card__img { transform: scale(1.04); }
.cpc-scope .cpc-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.cpc-scope .cpc-card__title {
  font-size: 15px !important; font-weight: 700 !important;
  line-height: 1.3 !important; margin: 0 0 6px !important;
}
.cpc-scope .cpc-card__title a { color: var(--cpc-ink); text-decoration: none; }
.cpc-scope .cpc-card__title a:hover { color: var(--cpc-orange-ink); }
.cpc-scope .cpc-card__desc {
  font-size: 12.5px; color: var(--cpc-muted); line-height: 1.5;
  margin: 0 0 12px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cpc-scope .cpc-card__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 8px; }

/* ---------------------------------------------------------------------------
   6. FORMS — 48px min-height, radius 8, visible orange focus ring
   Applies to Gravity Forms inside .cpc-scope. !important is required to beat
   gravity-form-style.php, which pins height:34px sitewide.
   ------------------------------------------------------------------------ */
.cpc-scope .cpc-formbox {
  border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md);
  overflow: hidden;
  background: var(--cpc-ground);
  box-shadow: var(--cpc-shadow-lg);
}
.cpc-scope .cpc-formbox__head { background: var(--cpc-dark); color: #fff; padding: 16px 20px; }
.cpc-scope .cpc-formbox__head h2 { color: #fff !important; font-size: 1.25rem !important; }
.cpc-scope .cpc-formbox__head p  { margin: .3rem 0 0; font-size: .86rem; color: var(--cpc-on-dark-muted); }
.cpc-scope .cpc-formbox__body { padding: 18px 20px 22px; }
.cpc-scope .cpc-formbox__body .gform_wrapper { margin: 0; }
.cpc-scope .cpc-formbox__body .gform_wrapper .gform_title { display: none; }

.cpc-scope input[type="text"],
.cpc-scope input[type="email"],
.cpc-scope input[type="tel"],
.cpc-scope input[type="number"],
.cpc-scope input[type="url"],
.cpc-scope input[type="password"],
.cpc-scope select,
.cpc-scope textarea {
  font-family: var(--cpc-font) !important;
  font-size: .97rem !important;
  width: 100% !important;
  border: 1px solid var(--cpc-line) !important;
  border-radius: var(--cpc-r-sm) !important;
  padding: .75rem .9rem !important;
  background: var(--cpc-ground) !important;
  color: var(--cpc-ink) !important;
  box-shadow: none !important;
  /* release the theme's 34px pin, then set the touch-target floor */
  height: auto !important;
  min-height: 48px !important;
  line-height: 1.3 !important;
}
/* Textareas resolve to 96px, not to whatever `rows` says.
   The base rule above releases the theme's `height:34px` pin with
   `height:auto`, which hands control back to the `rows` attribute — and
   Gravity Forms ships rows="10" on message fields, rendering ~204px of empty
   box that swallows the fold in any hero form. Pin the height instead.
   The selector is element-qualified and Gravity-Forms-deep on purpose:
   `gravity-form-style.php` carries `.gform_wrapper .gform_fields .gfield
   textarea.large { height:80px !important }` at (0,4,1), so a bare
   `.cpc-scope textarea` at (0,1,1) loses to it even with !important. */
.cpc-scope textarea { min-height: 96px !important; height: 96px !important; }
.cpc-scope .gform_wrapper .gform_fields .gfield textarea {
  height: 96px !important; min-height: 96px !important;
}

.cpc-scope select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.2rem !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%233C4E60' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .95rem center !important;
  background-size: 12px 8px !important;
}

/* THE FOCUS RING — required, never remove */
.cpc-scope input:focus,
.cpc-scope select:focus,
.cpc-scope textarea:focus {
  border-color: var(--cpc-orange) !important;
  outline: 2px solid var(--cpc-orange-tint) !important;
  outline-offset: 1px;
}

/* Validation
   NOTE: the base field rule above is `.cpc-scope input[type="text"]` — specificity
   (0,2,1). A bare `.cpc-scope .cpc-input--error` is only (0,2,0) and therefore
   LOSES to it on `border`, even with !important. Element-qualifying the error
   selectors lifts them to (0,2,1) so they win on source order. Do not simplify
   these selectors back to the bare class. */
.cpc-scope .gfield_error input,
.cpc-scope .gfield_error select,
.cpc-scope .gfield_error textarea,
.cpc-scope input.cpc-input--error,
.cpc-scope select.cpc-input--error,
.cpc-scope textarea.cpc-input--error {
  border-color: var(--cpc-error) !important;
  outline: 2px solid var(--cpc-error-tint) !important;
  outline-offset: 1px;
}
.cpc-scope .gfield_validation_message,
.cpc-scope .cpc-error-msg {
  font-size: .8rem; color: var(--cpc-error); font-weight: 600; margin: 4px 0 0;
}

/* Third-party orange normalization.
   Gravity Forms paints its required-asterisk #C02B0A, and the RTO calculator
   plugin paints .rto-pre-cta #C04500. Neither is a design-system orange, and
   both render INSIDE .cpc-scope, so the system normalizes them here rather than
   leaving two more oranges on the page. Found by a computed-style sweep 2026-07-31. */
.cpc-scope .gfield_required,
.cpc-scope .gfield_required_asterisk { color: var(--cpc-error) !important; }
.cpc-scope .rto-pre-cta { color: var(--cpc-orange-ink) !important; }
/* [rto_calculator] plugin UI paints its labels #F4580D (its own squatted
   --cpc-orange). Normalize the orange text it renders inside our scope. */
.cpc-scope .rto-input-label,
.cpc-scope .rto-term-display,
.cpc-scope .rto-amount-display,
.cpc-scope .rto-amount,
.cpc-scope .rto-payment-symbol,
.cpc-scope .rto-fin-term-badge__label,
.cpc-scope .open-finance-cta { color: var(--cpc-orange-ink) !important; }
/* its CTA is a FILL, so it takes the fill token, not the text token */
.cpc-scope a.rto-cta-btn { background: var(--cpc-orange) !important; color: #fff !important; }

/* Labels */
.cpc-scope .gfield_label,
.cpc-scope .cpc-label {
  font-size: .8rem !important; font-weight: 600 !important;
  color: var(--cpc-ink-2) !important; margin-bottom: 5px !important;
}

/* Submit — inherits the primary button exactly */
/* Specificity note: the wp-cta-modal-engine plugin ships
   `.gform_wrapper .gform_footer input[type="submit"]` (0,2,1) with !important,
   which outranks a plain `.cpc-scope input[type="submit"]` (0,1,1) — that is why
   the submit button was rendering at radius 5px in the plugin's squatted
   #f4580d instead of our radius 10 / #F4580B. The footer-qualified selector
   below is (0,3,1) so it wins. Do not simplify it back. */
.cpc-scope .gform_button,
.cpc-scope input[type="submit"],
.cpc-scope .gform_wrapper .gform_footer input[type="submit"],
.cpc-scope .gform_wrapper .gform_page_footer input[type="submit"] {
  font-family: var(--cpc-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  background: var(--cpc-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--cpc-r) !important;
  padding: 15px 26px !important;
  width: 100%;
  height: auto !important;
  cursor: pointer;
  box-shadow: var(--cpc-shadow-cta);
  transition: background var(--cpc-t-state), transform var(--cpc-t-lift);
}
.cpc-scope .gform_button:hover,
.cpc-scope input[type="submit"]:hover,
.cpc-scope .gform_wrapper .gform_footer input[type="submit"]:hover,
.cpc-scope .gform_wrapper .gform_page_footer input[type="submit"]:hover {
  background: var(--cpc-orange-hover) !important;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   7. FAQ — native <details>, first item open, h3 inside summary
   ------------------------------------------------------------------------ */
.cpc-scope .cpc-faq { display: flex; flex-direction: column; gap: var(--cpc-gap-tight); }
.cpc-scope .cpc-faq__item {
  border: 1px solid var(--cpc-line);
  border-radius: var(--cpc-r-md);
  background: var(--cpc-ground);
  overflow: hidden;
}
.cpc-scope .cpc-faq__item[open] { border-color: var(--cpc-line-strong); }
.cpc-scope .cpc-faq__item summary {
  cursor: pointer; list-style: none;
  padding: 17px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.cpc-scope .cpc-faq__item summary::-webkit-details-marker { display: none; }
.cpc-scope .cpc-faq__item summary h3 {
  font-size: 1rem !important; font-weight: 600 !important; margin: 0 !important;
}
.cpc-scope .cpc-faq__item summary::after {
  content: "+"; font-size: 24px; font-weight: 400; line-height: 1;
  color: var(--cpc-orange); flex: none;
}
.cpc-scope .cpc-faq__item[open] summary::after { content: "\2212"; }
.cpc-scope .cpc-faq__answer {
  padding: 0 20px 18px; color: var(--cpc-ink-2);
  font-size: .95rem; line-height: 1.62;
}

/* ---------------------------------------------------------------------------
   8. ICONS — inline SVG only, currentColor, explicit color always set
   ------------------------------------------------------------------------ */
.cpc-scope .cpc-icon {
  width: 24px; height: 24px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  flex: none; display: block;
  color: var(--cpc-orange);   /* explicit — never rely on inheritance */
}
.cpc-scope .cpc-icon--sm { width: 19px; height: 19px; }
.cpc-scope .cpc-icon--ink      { color: var(--cpc-ink-2); }
.cpc-scope .cpc-icon--on-dark  { color: var(--cpc-orange-dark); }

/* Tinted icon container used in cards and channel rows */
.cpc-scope .cpc-iconbox {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--cpc-r-sm);
  background: var(--cpc-orange-tint);
  color: var(--cpc-orange);
  display: grid; place-items: center;
}
.cpc-scope .cpc-iconbox .cpc-icon { width: 21px; height: 21px; color: inherit; }

/* ---------------------------------------------------------------------------
   9. HERO
   ------------------------------------------------------------------------ */
.cpc-scope .cpc-hero {
  position: relative;
  background: var(--cpc-dark-deep);
  color: var(--cpc-on-dark-body);
  padding-block: var(--cpc-hero-top) clamp(44px, 7vw, 80px);
  overflow: hidden;
}
.cpc-scope .cpc-hero--gradient {
  background: linear-gradient(180deg, var(--cpc-dark-deep), var(--cpc-dark));
}
.cpc-scope .cpc-hero--photo { background-size: cover; background-position: center; }
.cpc-scope .cpc-hero__overlay {
  position: absolute; inset: 0; z-index: 0;
  background: var(--cpc-dark-scrim);
}
.cpc-scope .cpc-hero .cpc-wrap { position: relative; z-index: var(--cpc-z-content); }
.cpc-scope .cpc-hero h1 { color: #fff !important; max-width: 18ch; }
.cpc-scope .cpc-hero__lede { color: var(--cpc-on-dark-body); max-width: 54ch; margin-top: 1.1rem; font-size: clamp(1rem,1.5vw,1.18rem); }
.cpc-scope .cpc-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }
.cpc-scope .cpc-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--cpc-gap-col); align-items: center; }
.cpc-scope .cpc-hero__grid > * { min-width: 0; }  /* kills mobile overflow-x */

/* ---------------------------------------------------------------------------
   10. ACCESSIBILITY — global focus-visible. Never `outline:none` alone.
   ------------------------------------------------------------------------ */
.cpc-scope :focus-visible {
  outline: 2px solid var(--cpc-orange);
  outline-offset: 2px;
}
.cpc-scope .cpc-section--dark :focus-visible { outline-color: var(--cpc-orange-dark); }

/* ---------------------------------------------------------------------------
   11. BREAKPOINTS — 1200 / 991 / 767 / 560, max-width queries
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  .cpc-scope .cpc-hero__grid { grid-template-columns: 1fr; }
  .cpc-scope .cpc-grid--3,
  .cpc-scope .cpc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cpc-scope .cpc-grid--3,
  .cpc-scope .cpc-grid--4 { grid-template-columns: 1fr; }
  .cpc-scope .cpc-hero h1 { max-width: none; }
}
@media (max-width: 560px) {
  .cpc-scope .cpc-btn { width: 100%; }
  .cpc-scope .cpc-hero__ctas { flex-direction: column; }
}