/* Red Line Constituent Hub — Vera Arcana motif CTA geometry (Zach SOP 2026-09-20)
 * Dual-pseudo outline: ::before = stroke (negative inset), ::after = fill.
 * Host has NO clip-path so labels never clip on roof / peak / badge point.
 * Form fields and amount chips stay rectangular (do not add .motif-cta to them).
 */

:root {
  /* Schoolhouse — cupola on pitched roof; roof ~38% so labels sit in the body */
  --motif-courthouse: polygon(
    0% 40%, 44% 12%, 44% 0%, 56% 0%, 56% 12%, 100% 40%, 100% 100%, 0% 100%
  );
  --motif-courthouse-hover: polygon(
    0% 38%, 44% 10%, 44% 0%, 56% 0%, 56% 10%, 100% 38%, 100% 100%, 0% 100%
  );

  /* Schoolhouse variant B — slightly wider cupola (Monica / secondary) */
  --motif-courthouse-b: polygon(
    0% 42%, 40% 14%, 40% 2%, 60% 2%, 60% 14%, 100% 42%, 100% 100%, 0% 100%
  );
  --motif-courthouse-b-hover: polygon(
    0% 40%, 40% 12%, 40% 0%, 60% 0%, 60% 12%, 100% 40%, 100% 100%, 0% 100%
  );

  /* Schoolhouse variant C — steeper peak, no cupola stub (Forge / Fallin punch) */
  --motif-courthouse-c: polygon(
    0% 38%, 50% 0%, 100% 38%, 100% 100%, 0% 100%
  );
  --motif-courthouse-c-hover: polygon(
    0% 36%, 50% 0%, 100% 36%, 100% 100%, 0% 100%
  );

  /* Sheriff badge / shield — point at bottom; pad labels away from tip */
  --motif-badge: polygon(
    50% 0%, 94% 16%, 94% 55%, 50% 100%, 6% 55%, 6% 16%
  );
  --motif-badge-hover: polygon(
    50% 0%, 95% 14%, 95% 54%, 50% 100%, 5% 54%, 5% 14%
  );

  /* Courthouse pediment — triangle pediment on rectangular body */
  --motif-courthouse: polygon(
    0% 32%, 50% 0%, 100% 32%, 100% 100%, 0% 100%
  );
  --motif-courthouse-hover: polygon(
    0% 30%, 50% 0%, 100% 30%, 100% 100%, 0% 100%
  );

  /* City hall / keystone arch — shallow arch crown */
  --motif-cityhall: polygon(
    0% 34%, 12% 34%, 50% 0%, 88% 34%, 100% 34%, 100% 100%, 0% 100%
  );
  --motif-cityhall-hover: polygon(
    0% 32%, 12% 32%, 50% 0%, 88% 32%, 100% 32%, 100% 100%, 0% 100%
  );

  /* State office — clean hard-outlined rect (star/dome skipped for readability) */
  --motif-rect: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  --motif-rect-hover: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

  /* Compact shallow pediment for sticky / donate-bar chips */
  --motif-shallow: polygon(
    0% 18%, 50% 0%, 100% 18%, 100% 100%, 0% 100%
  );
  --motif-shallow-hover: polygon(
    0% 16%, 50% 0%, 100% 16%, 100% 100%, 0% 100%
  );
}

/* Base motif CTA host */
.motif-cta,
a.motif-cta,
button.motif-cta {
  --motif-stroke-w: 2.5px;
  --motif-stroke: var(--ink, var(--rule, #0a0a0a));
  --motif-fill: var(--accent, #8b1e2d);
  --motif-shape: var(--motif-courthouse);
  --motif-shape-hover: var(--motif-courthouse-hover);
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: transparent !important;
  border-color: transparent !important;
  border-style: solid;
  border-width: 2px;
  clip-path: none !important;
  overflow: visible;
  border-radius: 0;
  /* Roof clearance: heavy top padding so label sits in body, not on peak */
  padding: 1.85rem 1.55rem 0.75rem;
  min-height: 4.25rem;
  min-width: 9.5rem;
  margin: 0.35rem;
  transition: color 0.15s ease, transform 0.15s ease;
}

.motif-cta::before,
.motif-cta::after,
a.motif-cta::before,
a.motif-cta::after,
button.motif-cta::before,
button.motif-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: var(--motif-shape);
  transition: clip-path 0.2s ease, background 0.15s ease, inset 0.15s ease;
}

.motif-cta::before,
a.motif-cta::before,
button.motif-cta::before {
  z-index: -2;
  inset: calc(-1 * var(--motif-stroke-w));
  background: var(--motif-stroke);
}

.motif-cta::after,
a.motif-cta::after,
button.motif-cta::after {
  z-index: -1;
  inset: 0;
  background: var(--motif-fill);
}

.motif-cta:hover,
a.motif-cta:hover,
button.motif-cta:hover {
  --motif-shape: var(--motif-shape-hover);
  transform: translateY(-2px);
}

.motif-cta:focus-visible,
a.motif-cta:focus-visible,
button.motif-cta:focus-visible {
  outline: none;
  --motif-stroke-w: 3.5px;
}

.motif-cta:active,
a.motif-cta:active,
button.motif-cta:active {
  transform: translateY(0);
}

/* Shape variants */
.motif-courthouse {
  --motif-shape: var(--motif-courthouse);
  --motif-shape-hover: var(--motif-courthouse-hover);
}
.motif-courthouse-b {
  --motif-shape: var(--motif-courthouse-b);
  --motif-shape-hover: var(--motif-courthouse-b-hover);
  padding: 1.95rem 1.6rem 0.75rem;
}
.motif-courthouse-c {
  --motif-shape: var(--motif-courthouse-c);
  --motif-shape-hover: var(--motif-courthouse-c-hover);
  padding: 1.75rem 1.55rem 0.75rem;
}
.motif-badge {
  --motif-shape: var(--motif-badge);
  --motif-shape-hover: var(--motif-badge-hover);
  /* Extra vertical pad: keep label off bottom point and top crest */
  padding: 1.55rem 1.7rem 1.85rem;
  min-height: 4.75rem;
  min-width: 10rem;
}
.motif-courthouse {
  --motif-shape: var(--motif-courthouse);
  --motif-shape-hover: var(--motif-courthouse-hover);
  padding: 1.85rem 1.55rem 0.75rem;
}
.motif-cityhall {
  --motif-shape: var(--motif-cityhall);
  --motif-shape-hover: var(--motif-cityhall-hover);
  padding: 1.9rem 1.55rem 0.75rem;
}
.motif-rect {
  --motif-shape: var(--motif-rect);
  --motif-shape-hover: var(--motif-rect-hover);
  padding: 0.85rem 1.35rem;
  min-height: 2.75rem;
  min-width: 8rem;
}
.motif-shallow {
  --motif-shape: var(--motif-shallow);
  --motif-shape-hover: var(--motif-shallow-hover);
  padding: 1.05rem 1.1rem 0.55rem;
  min-height: 2.6rem;
  min-width: 7rem;
  margin: 0.2rem;
  font-size: 0.75rem;
}

/* Role helpers — pages override --motif-fill / --motif-stroke as needed */
.motif-cta.motif-fill-accent { --motif-fill: var(--accent, #8b1e2d); }
.motif-cta.motif-fill-navy { --motif-fill: var(--navy, #0b1f3a); }
.motif-cta.motif-fill-ink { --motif-fill: var(--ink, #0a0a0a); }
.motif-cta.motif-fill-red { --motif-fill: var(--red, #e31c25); }
.motif-cta.motif-fill-cream { --motif-fill: var(--cream, #f7f4ec); color: var(--ink, #0a0a0a); }
.motif-cta.motif-fill-white { --motif-fill: #fff; color: var(--ink, #0a0a0a); }
.motif-cta.motif-stroke-ink { --motif-stroke: var(--ink, #0a0a0a); }
.motif-cta.motif-stroke-white { --motif-stroke: #fff; }
.motif-cta.motif-stroke-cream { --motif-stroke: var(--cream, #f7f4ec); }
.motif-cta.motif-stroke-gold { --motif-stroke: var(--gold, var(--accent, #c5a572)); }
.motif-cta.motif-stroke-navy { --motif-stroke: var(--navy, #0b1f3a); }

/* Ghost / outline look: fill matches dark field, stroke is light */
.motif-cta.motif-ghost-dark {
  --motif-fill: #0a0a0a;
  --motif-stroke: #fff;
  color: #fff;
}
.motif-cta.motif-ghost-navy {
  --motif-fill: var(--navy, #0a1628);
  --motif-stroke: var(--cream, #f5f0e6);
  color: var(--cream, #f5f0e6);
}
.motif-cta.motif-ghost-cream {
  --motif-fill: var(--cream, #f7f4ec);
  --motif-stroke: var(--ink, #0b1f3a);
  color: var(--ink, #0b1f3a);
}

/* Template .btn integration: when both classes present, motif wins geometry */
.btn.motif-cta {
  letter-spacing: inherit;
  text-transform: uppercase;
  font-weight: 700;
}
.btn-primary.motif-cta {
  --motif-fill: var(--accent, #722f37);
  --motif-stroke: var(--navy, var(--ink, #1a2744));
  color: #fff;
}
.btn-ghost.motif-cta {
  --motif-fill: var(--bg, #f4efe4);
  --motif-stroke: var(--ink, #1a2744);
  color: var(--ink, #1a2744);
}
.btn-navy.motif-cta {
  --motif-fill: var(--navy, #1a2744);
  --motif-stroke: var(--ink, #0a0a0a);
  color: #fff;
}

/* Compact sticky primaries */
.sticky .motif-cta,
.sticky-loud .motif-cta,
.donate-bar .motif-cta,
.nav .motif-cta {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}