/* ============================================================
   TCGC pages-b.css  —  BuilderB page-specific styles.

   1:1 reproduction of the designer's inline styles from
   TCGC-v2/tcgc/pages/{give,contact,connect,connect-visit,
   connect-volunteer,connect-prayer,connect-testimony}.jsx.

   The designer authored these page bodies with inline React
   style objects (no CSS classes), so none of these rules exist
   in interior.css. Every value here is transcribed value-for-
   value from the mockups; colours use the existing CSS vars
   (tokens.css + interior.css :root) whose hex equals the
   designer's colors.* literals:
     crimson #B8341B  crimson-deep #8A1F0E  gold #D9A441
     gold-light #EDC56A  forest #2D6B4F  sand #F5EDDD
     sand-deep #EBDDC0  cream #FBF6EC  ink #2A1810
     ink-soft #5a4838  muted #7a6353
   sandDeep tone used by the designer as "c.sandDeep" for the
   finance CTA bg / map bg is #EBDDC0 (= --sand-deep).

   Fully .wc-* scoped (safe site-wide alongside interior.css).
   Mobile breakpoints reproduce the designer's exact media
   queries: give/contact 900px, connect 800px, forms 900px,
   plus the layout.jsx global h2->30px at 768px.
   ============================================================ */

/* ====================== GIVE (give.jsx) ===================== */

.wc-give-bank        { padding: 64px 40px; background: var(--cream); }
.wc-give-bank__inner { max-width: 1100px; margin: 0 auto; }

.wc-give-funds        { padding: 64px 40px; background: var(--sand); }
.wc-give-funds__inner { max-width: 1100px; margin: 0 auto; }

.wc-give-eyebrow {
  font-size: 12px; color: var(--crimson); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px;
}
.wc-give-h2 {
  font-family: var(--font-serif); font-size: 38px; font-weight: 600;
  line-height: 1.1; color: var(--ink); margin: 0 0 18px;
  letter-spacing: -0.6px;
}
.wc-give-lede {
  font-size: 16px; line-height: 1.7; color: var(--ink-soft);
  margin: 0 0 32px; max-width: 700px;
}

/* designer: 2-col grid of branch account cards. One real account => the
   single card keeps the exact card styling; grid still defined 1:1 so the
   card renders at the designer's column metrics. */
.wc-give-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.wc-give-card {
  background: var(--sand); border-radius: 18px; padding: 26px;
  border-left: 5px solid var(--crimson);
}
.wc-give-card__branch {
  font-size: 11px; color: var(--crimson); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px;
}
.wc-give-card__rows  { display: grid; gap: 10px; }
.wc-give-card__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wc-give-card__mini  { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.wc-give-card__name {
  font-family: var(--font-serif); font-size: 16px; font-weight: 700;
  color: var(--ink);
}
.wc-give-card__bank { font-size: 14px; font-weight: 600; }
.wc-give-card__num {
  font-size: 16px; font-family: monospace; letter-spacing: 1.2px;
  color: var(--crimson); font-weight: 700;
}
.wc-give-card__copy {
  margin-top: 14px; background: transparent;
  border: 1px solid rgba(42,24,16,0.2); padding: 8px 14px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; color: var(--ink); font-family: inherit;
}

.wc-funds-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.wc-fund-card { background: var(--cream); border-radius: 16px; padding: 22px; }
.wc-fund-card__tag {
  font-size: 10px; color: var(--crimson); font-weight: 700;
  letter-spacing: 2px; margin-bottom: 8px;
}
.wc-fund-card__title {
  font-family: var(--font-serif); font-size: 18px; font-weight: 700;
  color: var(--ink); margin-bottom: 8px;
}
.wc-fund-card__desc { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

.wc-give-why {
  padding: 64px 40px; background: var(--crimson); color: var(--cream);
  position: relative; overflow: hidden;
}
.wc-give-why__inner {
  max-width: 880px; margin: 0 auto; position: relative; text-align: center;
}
.wc-give-why__eyebrow {
  font-size: 12px; color: var(--gold-light); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px;
}
.wc-give-why__title {
  font-family: var(--font-serif); font-size: 44px; font-weight: 600;
  line-height: 1.1; margin: 0 0 26px; letter-spacing: -1px;
}
.wc-give-why__lede {
  font-size: 18px; line-height: 1.8; opacity: 0.92; margin: 0 0 16px;
}
.wc-give-why__verse {
  font-size: 16px; line-height: 1.8; opacity: 0.85; font-style: italic; margin: 0;
}

.wc-give-cta {
  padding: 50px 40px; background: var(--sand-deep); text-align: center;
}
.wc-give-cta__title {
  font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  color: var(--ink); margin-bottom: 8px;
}
.wc-give-cta__sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.wc-give-cta__btn {
  display: inline-block; background: var(--ink); color: var(--cream);
  padding: 12px 22px; border-radius: 999px; font-size: 13px;
  font-weight: 700; text-decoration: none;
}

/* ==================== CONTACT (contact.jsx) ================= */

.wc-contact-branches        { padding: 64px 40px; background: var(--cream); }
.wc-contact-branches__inner { max-width: 1280px; margin: 0 auto; }

.wc-contact-eyebrow {
  font-size: 12px; color: var(--crimson); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px;
}
.wc-contact-h2 {
  font-family: var(--font-serif); font-size: 38px; font-weight: 600;
  line-height: 1.1; color: var(--ink); margin: 0 0 32px;
  letter-spacing: -0.6px;
}

.wc-branch-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.wc-branch-card {
  background: var(--cream); color: var(--ink);
  border: 1.5px solid var(--sand-deep); border-radius: 20px;
  padding: 28px; position: relative;
}
.wc-branch-card--primary {
  background: var(--crimson); color: var(--cream); border: none;
}
.wc-branch-card__hq {
  position: absolute; top: 18px; right: 18px; background: var(--gold);
  color: var(--ink); padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
}
.wc-branch-card__kicker {
  font-size: 11px; color: var(--crimson); font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px;
}
.wc-branch-card--primary .wc-branch-card__kicker { color: var(--gold-light); }
.wc-branch-card__name {
  font-family: var(--font-serif); font-size: 28px; font-weight: 700;
  line-height: 1.1; margin: 0 0 14px;
}
.wc-branch-card__addr { font-size: 14px; line-height: 1.7; margin-bottom: 14px; }
.wc-branch-card--primary .wc-branch-card__addr { opacity: 0.92; }
.wc-branch-card__rows { display: grid; gap: 8px; font-size: 13px; }
.wc-branch-card--primary .wc-branch-card__rows { opacity: 0.92; }
.wc-branch-card__rows a { color: inherit; text-decoration: underline; }
.wc-branch-card__actions {
  margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap;
}
.wc-branch-card__btn {
  padding: 8px 14px; background: var(--ink); color: var(--cream);
  border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none;
}
.wc-branch-card--primary .wc-branch-card__btn {
  background: var(--cream); color: var(--crimson);
}
.wc-branch-card__btn-ghost {
  padding: 8px 14px; background: transparent; color: var(--crimson);
  border: 1px solid var(--crimson); border-radius: 999px;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.wc-branch-card--primary .wc-branch-card__btn-ghost {
  color: var(--cream); border-color: var(--gold-light);
}

.wc-contact-map         { background: var(--sand-deep); padding: 0; }
.wc-contact-map__canvas {
  height: 320px;
  background: linear-gradient(135deg, var(--sand), var(--sand-deep));
  position: relative; display: flex; align-items: center;
  justify-content: center;
  border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand);
}
.wc-contact-map__svg {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4;
}
.wc-contact-map__overlay { position: relative; text-align: center; }
.wc-contact-map__title {
  font-family: var(--font-serif); font-size: 28px; font-weight: 700;
  color: var(--ink); margin-bottom: 8px;
}
.wc-contact-map__sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.wc-contact-map__btn {
  display: inline-block; background: var(--ink); color: var(--cream);
  padding: 10px 20px; border-radius: 999px; font-size: 13px;
  font-weight: 700; text-decoration: none;
}

.wc-contact-form-sec { padding: 64px 40px; background: var(--cream); }
.wc-two-col {
  max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: 40px;
}
.wc-contact-form-lede {
  font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 24px;
}
.wc-contact-other {
  background: var(--sand); border-radius: 16px; padding: 22px; margin-bottom: 16px;
}
.wc-contact-other__label {
  font-size: 11px; color: var(--crimson); font-weight: 700;
  letter-spacing: 2px; margin-bottom: 10px;
}
.wc-contact-other__rows {
  display: grid; gap: 10px; font-size: 14px; color: var(--ink);
}
.wc-contact-other__rows a { color: var(--crimson); font-weight: 600; }
.wc-contact-follow__label {
  font-size: 11px; color: var(--crimson); font-weight: 700;
  letter-spacing: 2px; margin-bottom: 10px;
}
.wc-contact-follow { display: flex; gap: 10px; }
.wc-contact-follow__item {
  width: 42px; height: 42px; border-radius: 50%; background: var(--ink);
  color: var(--cream); display: flex; align-items: center;
  justify-content: center; text-decoration: none; font-size: 16px;
}
.wc-contact-follow__item[aria-disabled="true"] {
  opacity: 0.45; pointer-events: none; cursor: default;
}

.wc-contact-form {
  background: var(--cream); border: 1.5px solid var(--sand-deep);
  border-radius: 18px; padding: 28px;
}
.wc-contact-form__field { margin-bottom: 14px; }
.wc-contact-form__field label {
  display: block; font-size: 13px; color: var(--ink);
  font-weight: 600; margin-bottom: 6px;
}
.wc-contact-form__field input,
.wc-contact-form__field select,
.wc-contact-form__field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--sand-deep); background: var(--cream);
  font-size: 14px; color: var(--ink); font-family: inherit;
}
.wc-contact-form__field textarea { resize: vertical; }
.wc-contact-form__btn {
  width: 100%; background: var(--crimson); color: var(--cream);
  border: none; padding: 16px; border-radius: 999px; font-size: 14px;
  font-weight: 700; cursor: pointer; font-family: inherit;
}
.wc-req { color: var(--crimson); }

/* ==================== CONNECT (connect.jsx) ================= */

.wc-connect { padding: 64px 40px 80px; background: var(--cream); }
.wc-tracks-grid {
  max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.wc-track-card {
  border-radius: 22px; padding: 36px 32px; text-decoration: none;
  display: flex; flex-direction: column; gap: 16px; min-height: 220px;
}
.wc-track-card--crimson { background: #FDE8E3; }
.wc-track-card--brown   { background: #F3E5D1; }
.wc-track-card--forest  { background: #E3F1E9; }
.wc-track-card--gold    { background: #FBF0D8; }
.wc-track-card__icon  { font-size: 40px; }
.wc-track-card__title {
  font-family: var(--font-serif); font-size: 28px; font-weight: 700;
  color: var(--ink); line-height: 1.15; margin-bottom: 10px;
}
.wc-track-card__desc { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.wc-track-card__cta  { margin-top: auto; font-size: 13px; font-weight: 700; }
.wc-track-card--crimson .wc-track-card__cta { color: var(--crimson); }
.wc-track-card--brown   .wc-track-card__cta { color: #6B4423; }
.wc-track-card--forest  .wc-track-card__cta { color: var(--forest); }
.wc-track-card--gold    .wc-track-card__cta { color: var(--gold); }

.wc-connect-else {
  max-width: 1100px; margin: 48px auto 0; padding: 28px;
  background: var(--sand-deep); border-radius: 18px; display: flex;
  align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.wc-connect-else__title {
  font-family: var(--font-serif); font-size: 22px; font-weight: 700;
  color: var(--ink);
}
.wc-connect-else__sub { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.wc-connect-else__btn {
  background: var(--ink); color: var(--cream); padding: 14px 22px;
  border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
}

/* ============ CONNECT FORM PAGES (connect-*.jsx) ============ */

.wc-form-sec { padding: 60px 40px 80px; background: var(--cream); }
.wc-form-grid {
  max-width: 1100px; margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr; gap: 40px;
}
.wc-cform {
  background: var(--cream); border: 1.5px solid var(--sand-deep);
  border-radius: 18px; padding: 32px;
}
.wc-cform__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 18px;
}
.wc-cform__field { margin-bottom: 14px; }
.wc-cform__field label {
  display: block; font-size: 13px; color: var(--ink);
  font-weight: 600; margin-bottom: 6px;
}
.wc-cform__field input,
.wc-cform__field select,
.wc-cform__field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--sand-deep); background: var(--cream);
  font-size: 14px; color: var(--ink); font-family: inherit;
}
.wc-cform__field textarea { resize: vertical; }
.wc-cform__btn {
  margin-top: 20px; width: 100%; color: var(--cream); border: none;
  padding: 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.5px; font-family: inherit;
}
.wc-cform__note {
  margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center;
}

.wc-form-aside-wrap {}
.wc-form-aside {
  border-radius: 18px; padding: 28px; position: sticky; top: 100px;
}
.wc-form-aside__title {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 12px;
}
.wc-form-aside__list {
  font-size: 14px; line-height: 1.7; color: var(--ink);
  margin: 0; padding-left: 18px;
}
.wc-form-aside__list li { margin-bottom: 8px; }
.wc-form-aside__foot {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(42,24,16,0.08);
  font-size: 13px; color: var(--ink-soft);
}
.wc-form-aside__foot a { font-weight: 600; }

/* Accent variants — per designer p.color / p.accent per form. */
.wc-form-aside--crimson { background: #FDE8E3; }
.wc-form-aside--brown   { background: #F3E5D1; }
.wc-form-aside--forest  { background: #E3F1E9; }
.wc-form-aside--gold    { background: #FBF0D8; }

.wc-form-aside--crimson .wc-form-aside__title,
.wc-form-aside--crimson .wc-form-aside__foot a { color: #B8341B; }
.wc-form-aside--brown   .wc-form-aside__title,
.wc-form-aside--brown   .wc-form-aside__foot a { color: #6B4423; }
.wc-form-aside--forest  .wc-form-aside__title,
.wc-form-aside--forest  .wc-form-aside__foot a { color: #2D6B4F; }
.wc-form-aside--gold    .wc-form-aside__title,
.wc-form-aside--gold    .wc-form-aside__foot a { color: #D9A441; }

/* Form eyebrow + required-mark + submit colour follow the designer's
   per-page p.color, carried by a wrapper tone class on .wc-form-sec
   (set in connect-form-body.php). No body_class dependency. */
.wc-form--crimson .wc-cform__eyebrow,
.wc-form--crimson .wc-req { color: #B8341B; }
.wc-form--crimson .wc-cform__btn { background: #B8341B; }
.wc-form--brown .wc-cform__eyebrow,
.wc-form--brown .wc-req { color: #6B4423; }
.wc-form--brown .wc-cform__btn { background: #6B4423; }
.wc-form--forest .wc-cform__eyebrow,
.wc-form--forest .wc-req { color: #2D6B4F; }
.wc-form--forest .wc-cform__btn { background: #2D6B4F; }
.wc-form--gold .wc-cform__eyebrow,
.wc-form--gold .wc-req { color: #D9A441; }
.wc-form--gold .wc-cform__btn { background: #D9A441; }

/* Reused submission status styles (match the [tcgc_form] shortcode look). */
.wc-cform .tcgc-form-success,
.wc-contact-form .tcgc-form-success {
  background: #E3F1E9; color: #1F4F38; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; font-size: 14px;
}
.wc-cform .tcgc-form-error,
.wc-contact-form .tcgc-form-error {
  background: #FDE8E3; color: #8A1F0E; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; font-size: 14px;
}
.wc-cform .tcgc-form-success a, .wc-cform .tcgc-form-error a,
.wc-contact-form .tcgc-form-success a, .wc-contact-form .tcgc-form-error a {
  color: inherit; font-weight: 700;
}

/* ===================== RESPONSIVE =========================
   Designer's exact per-page media queries:
     give.jsx     @max-width:900  -> give-grid + funds-grid -> 1col
     contact.jsx  @max-width:900  -> branch-grid + two-col   -> 1col
     connect.jsx  @max-width:800  -> tracks-grid             -> 1col
     connect-*.jsx@max-width:900  -> form-grid               -> 1col
   plus layout.jsx global @max-width:768 -> h2 font-size 30px.
   ========================================================= */

@media (max-width: 900px) {
  .wc-give-grid   { grid-template-columns: 1fr; }
  .wc-funds-grid  { grid-template-columns: 1fr; }
  .wc-branch-grid { grid-template-columns: 1fr; }
  .wc-two-col     { grid-template-columns: 1fr; }
  .wc-form-grid   { grid-template-columns: 1fr; }
  .wc-form-aside  { position: static; top: auto; }
}

@media (max-width: 800px) {
  .wc-tracks-grid { grid-template-columns: 1fr; }
}

/* Designer layout.jsx global mobile rule: h2 -> 30px at 768px.
   Reproduced for the equivalent .wc-*-h2 / serif heads used here. */
@media (max-width: 768px) {
  .wc-give-h2,
  .wc-contact-h2,
  .wc-give-why__title { font-size: 30px; }
}

/* Section horizontal padding eases on small screens to match the
   interior.css convention (40px -> 20px), keeping content parity. */
@media (max-width: 600px) {
  .wc-give-bank, .wc-give-funds, .wc-give-why, .wc-give-cta,
  .wc-contact-branches, .wc-contact-form-sec,
  .wc-connect, .wc-form-sec { padding-left: 20px; padding-right: 20px; }
}