/* Crestfield donation page.
   Ported from the prototype's style.css, with every rule confined to .cfd-root.

   The prototype could style body, main, header, footer and bare input/button
   selectors because it owned the whole document. Here it does not: Astra owns
   the page and this stylesheet is a guest in it. So:

     - every class is prefixed cfd-, because Astra and Elementor both define
       .row, .field, .error, .notice, .intro and .block, and their rules would
       otherwise reach straight through a wrapper and match our elements
     - the box-sizing reset and the :focus-visible override are scoped, instead
       of applying to the whole site
     - the custom properties are --cfd-* and live on .cfd-root, not :root
     - there is no body, header, footer or main rule at all
     - the full-bleed breakout is a grid, not a 100vw transform */

.cfd-root {
  --cfd-plum: #63486f;
  --cfd-plum-dark: #4e3857;
  --cfd-plum-tint: #f5f2f6;
  --cfd-green: #549c5d;
  --cfd-navy: #011627;
  --cfd-ink: #3a3a3a;
  --cfd-line: #e3e0e5;
  --cfd-white: #ffffff;
  --cfd-danger: #a3301f;
  --cfd-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* The breakout, done with grid. The prototype used
     margin-left:50%; transform:translateX(-50%); width:min(920px,100vw)
     which only worked because <main> was itself viewport-centred. Inside a
     theme container that mis-centres, 100vw includes the scrollbar and scrolls
     the page sideways, any ancestor overflow-x:hidden clips it, and the
     transform makes a stacking context that fights a sticky header. A grid has
     none of those failure modes and does not care how wide its container is. */
  display: grid;
  /* The content track must leave room for both gutters. `min(700px, 100%)`
     took the full container width on a narrow screen and then the gutters were
     added on top, pushing the grid 40px wider than the phone and scrolling the
     whole page sideways. */
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(700px, 100% - 2rem) [content-end]
    minmax(1rem, 1fr) [full-end];

  color: var(--cfd-ink);
  font-family: var(--cfd-sans);
  font-size: 16.5px;
  line-height: 1.65;
  padding: clamp(2rem, 6vw, 3.5rem) 0;
}

/* The resets come FIRST, because `all: revert` resets everything -- including
   grid-column. Placed after the layout rules below, it would quietly strip the
   grid placement off every direct child that happens to be a p, h1 or ul, and
   they would scatter into whatever columns auto-placement chose. */

/* Roll our own controls back to browser defaults before styling them.
   Astra styles button, input and select at high specificity; :where() gives
   this reset specificity 0-1-0 so every rule below wins without !important. */
/* Zero-specificity on purpose: this must sit UNDER our own .cfd-* rules, or it
   outranks them and strips the layout back out. Beating the theme's
   input[type="email"] rules is handled explicitly further down instead. */
.cfd-root :where(button, input, select, textarea, fieldset, legend, h1, h2, h3, p, label, ul, li, table, thead, tbody, tr, th, td) {
  all: revert;
}

/* After the reset, not before: `all: revert` includes box-sizing, so declaring
   this first meant reverted elements fell back to content-box and their borders
   were added outside the height -- 54px text inputs next to 52px email inputs. */
.cfd-root, .cfd-root *, .cfd-root *::before, .cfd-root *::after { box-sizing: border-box; }

/* Layout, after the resets so it survives them. */
.cfd-root > * { grid-column: content-start / content-end; }
.cfd-full { grid-column: full-start / full-end; }

/* `all: revert` rolls display back to the UA value and browsers resolve that
   inconsistently for [hidden]. Restate it, above the reset's specificity. */
.cfd-root [hidden] { display: none; }

.cfd-root :focus-visible {
  outline: 3px solid var(--cfd-green);
  outline-offset: 2px;
  border-radius: 6px;
}

.cfd-root h1, .cfd-root h2, .cfd-root h3 {
  font-family: var(--cfd-sans);
  font-weight: 700;
  color: var(--cfd-navy);
  text-wrap: balance;
}
.cfd-root h1 { font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.1; margin: 0 0 .5em; }
.cfd-root h2 { font-size: 1.4rem; margin: 0 0 1.1rem; }
.cfd-root a { color: var(--cfd-plum); }

.cfd-intro { text-align: center; margin-bottom: 2.5rem; }
.cfd-intro p { color: var(--cfd-ink); margin: 0 auto; max-width: 56ch; font-size: 1rem; line-height: 1.65; }

.cfd-form, .cfd-thanks {
  background: var(--cfd-white);
  border: 1px solid var(--cfd-line);
  border-radius: 16px;
  padding: clamp(1.25rem, 4vw, 2.1rem);
  box-shadow: 0 1px 2px rgba(1,22,39,.04), 0 14px 40px rgba(99,72,111,.10);
}

/* one-time or monthly */
.cfd-freq {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
  background: var(--cfd-plum-tint); border: 1.5px solid var(--cfd-line);
  border-radius: 999px; padding: .3rem; margin-bottom: 1.5rem;
}
.cfd-root .cfd-freq-btn {
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 700 .82rem/1 var(--cfd-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cfd-plum); padding: .85rem .5rem; transition: background .12s, color .12s;
}
.cfd-root .cfd-freq-btn[aria-pressed="true"] { background: var(--cfd-plum); color: var(--cfd-white); }

/* gift tiles */
.cfd-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-bottom: 1.7rem; }
@media (max-width: 640px) { .cfd-options { grid-template-columns: repeat(2, 1fr); } }

.cfd-option {
  display: flex; flex-direction: column; gap: .35rem; text-align: left;
  border: 1.5px solid var(--cfd-line); border-radius: 12px; background: var(--cfd-plum-tint);
  padding: .9rem .95rem; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .12s, background .12s, transform .08s;
}
.cfd-option:hover { border-color: var(--cfd-plum); }
.cfd-option:active { transform: translateY(1px); }
.cfd-option .cfd-amt { font-size: 1.55rem; font-weight: 700; color: var(--cfd-plum); line-height: 1; }
.cfd-option .cfd-why { font-size: .82rem; color: var(--cfd-ink); line-height: 1.4; }
.cfd-option[aria-pressed="true"] { background: var(--cfd-plum); border-color: var(--cfd-plum); }
.cfd-option[aria-pressed="true"] .cfd-amt { color: var(--cfd-white); }
.cfd-option[aria-pressed="true"] .cfd-why { color: #e7dceb; }

/* amount */
.cfd-amount-block { margin-bottom: 2.75rem; }
.cfd-root label { display: block; font-size: .85rem; font-weight: 600; color: var(--cfd-navy); margin-bottom: .4rem; }
.cfd-amount-input { position: relative; max-width: 260px; }
.cfd-amount-input span {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 600; color: var(--cfd-ink);
}
.cfd-hint { font-size: .83rem; color: var(--cfd-ink); margin: .5rem 0 0; }

.cfd-check {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: .9rem 0 0; font-size: .88rem; line-height: 1.45; cursor: pointer;
}
.cfd-check input {
  width: auto; min-width: 0; flex: none;
  margin: .15rem 0 0; accent-color: var(--cfd-plum);
}
.cfd-root .cfd-check input[type="checkbox"] {
  width: 18px; height: 18px; padding: 0; border-radius: 4px;
}
.cfd-tribute { margin-top: 1rem; padding-top: .3rem; margin-bottom: .5rem; }

/* fields */
.cfd-block { border: 0; border-top: 1px solid var(--cfd-line); margin: 2.25rem 0 .6rem; padding: 1.9rem 0 0; }
.cfd-block legend {
  padding: 0 .6rem 0 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cfd-plum);
}
.cfd-row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.cfd-field { flex: 1 1 220px; min-width: 0; margin: 0 0 1.2rem; }
.cfd-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: #8b8792; }

.cfd-row--city { gap: 0 .8rem; }
.cfd-field--city  { flex: 3 1 180px; }
.cfd-field--state { flex: 1 1 90px; }
.cfd-field--zip   { flex: 1 1 110px; }

@media (max-width: 560px) {
  /* Every field takes the whole column, except State and ZIP which are short
     enough to share a line and look wrong stretched. */
  .cfd-field { flex: 1 1 100%; }
  .cfd-field--city  { flex: 1 1 100%; }
  .cfd-field--state { flex: 1 1 calc(50% - .4rem); }
  .cfd-field--zip   { flex: 1 1 calc(50% - .4rem); }
  .cfd-root .cfd-amount-input { max-width: none; }
  .cfd-form, .cfd-thanks { padding: 1.15rem 1rem; border-radius: 12px; }
}

.cfd-root .cfd-field input,
.cfd-root .cfd-field select,
.cfd-root input[type="text"],
.cfd-root input[type="email"],
.cfd-root input[type="tel"],
.cfd-root input:not([type]),
.cfd-root select {
  display: block;
  width: 100%;
  font: inherit;
  line-height: 1.5;
  color: var(--cfd-navy);
  height: 52px;
  padding: 0 .85rem;
  border: 1.5px solid var(--cfd-line);
  border-radius: 12px;
  background: var(--cfd-white);
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.cfd-root select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%235c5c63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 11px;
  padding-right: 2.1rem;
}
/* The amount box is deliberately bigger than the other fields, and needs the
   extra left padding to clear the dollar sign sitting on top of it. Declared
   after the shared control rule above so it is not flattened back to 52px. */
.cfd-root .cfd-amount-block .cfd-amount-input input {
  width: 100%;
  height: auto;
  font: 700 1.6rem/1 var(--cfd-sans);
  color: var(--cfd-navy);
  font-variant-numeric: tabular-nums;
  padding: .75rem .8rem .75rem 2.2rem;
  border: 1.5px solid var(--cfd-line);
  border-radius: 12px;
  background: var(--cfd-white);
}

.cfd-root input::placeholder { color: #a6a3ab; }
.cfd-root input:focus, .cfd-root select:focus {
  border-color: var(--cfd-plum); outline: none; box-shadow: 0 0 0 3px rgba(99,72,111,.14);
}
.cfd-root input[aria-invalid="true"], .cfd-root select[aria-invalid="true"] { border-color: var(--cfd-danger); }

/* Square's card form mounts here. Nothing inside is ours -- it is a
   cross-origin iframe -- so we only give it room. */
#cfd-card { min-height: 60px; margin-bottom: 1.3rem; }
#cfd-card iframe { width: 100%; }

/* The honeypot. Hidden from people, still filled in by bots. Not display:none,
   which some bots check for. */
.cfd-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.cfd-root button[type="submit"] {
  width: 100%; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cfd-plum); color: var(--cfd-white);
  font: 700 1rem/1 var(--cfd-sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 1.15rem 1.5rem; transition: background .15s;
}
.cfd-root button[type="submit"]:hover { background: var(--cfd-plum-dark); }
.cfd-root button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

.cfd-error {
  background: #fbeceb; border: 1px solid #e7bab3; border-left: 4px solid var(--cfd-danger);
  color: #7c2417; padding: .8rem .95rem; border-radius: 12px; margin: 0 0 1rem; font-size: .93rem;
}
.cfd-notice {
  background: var(--cfd-plum-tint); border: 1px solid #ddd0e0; border-left: 4px solid var(--cfd-plum);
  color: #4d3651; padding: .8rem .95rem; border-radius: 12px; margin: 0 0 1rem; font-size: .9rem;
}
.cfd-secure { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; color: var(--cfd-ink); margin: 1.1rem 0 0; }
.cfd-secure svg { width: 17px; height: 17px; flex: none; color: var(--cfd-green); margin-top: .15rem; }

.cfd-thanks { text-align: center; }
.cfd-thanks .cfd-check { width: 58px; height: 58px; color: var(--cfd-green); }
.cfd-root .cfd-receipt-pdf {
  display: inline-block; margin-top: .4rem; padding: .6rem 1.1rem;
  border: 1.5px solid var(--cfd-plum); border-radius: 999px;
  color: var(--cfd-plum); font-weight: 600; text-decoration: none;
}
.cfd-root .cfd-receipt-pdf:hover, .cfd-root .cfd-receipt-pdf:focus-visible { background: var(--cfd-plum); color: var(--cfd-white); }
.cfd-root .cfd-receipt-pdf[hidden] { display: none; }



/* ===================================================================
   Standalone page chrome.

   These pages carry no site nav on purpose: a donor part-way through
   giving has nowhere to wander off to. That also means the theme's
   stylesheet is dequeued, so the few document-level rules the prototype
   had are wanted again here -- but only under .cfd-page, so nothing
   escapes onto the rest of the site if this ever loads elsewhere.
   =================================================================== */

body.cfd-page {
  margin: 0;
  background: #fff;
  color: #3a3a3a;
  font: 400 16.5px/1.65 "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cfd-header {
  background: #63486f;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}
.cfd-wordmark {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .85rem; color: #fff;
}
.cfd-wordmark img { width: 60px; height: 60px; flex: none; }
.cfd-wordmark span { text-align: left; }
.cfd-wordmark strong {
  display: block; font-size: 1.5rem; font-weight: 700; color: #fff;
  line-height: 1.05; letter-spacing: -.01em;
}
.cfd-wordmark small { font-size: .78rem; color: rgba(255,255,255,.82); letter-spacing: .04em; }
@media (max-width: 420px) {
  .cfd-wordmark { flex-direction: column; gap: .5rem; }
  .cfd-wordmark span { text-align: center; }
}

.cfd-footer {
  text-align: center; padding: 2.5rem 1.5rem 3.5rem;
  color: #3a3a3a; font-size: .9rem;
}
.cfd-footer strong { color: #011627; }
.cfd-footer a { color: #63486f; }
.cfd-footer .cfd-fine { font-size: .8rem; max-width: 54ch; margin: .9rem auto 0; }

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

/* ===================================================================
   Layout two: the asks as photos, the buttons as numbers alone.
   =================================================================== */

.cfd-impact-block { margin-bottom: 2.25rem; width: min(920px, 100%); margin-inline: auto; }
.cfd-full { justify-self: center; max-width: 100%; }
.cfd-impact-block h2 { text-align: center; }
.cfd-impact-block .cfd-hint { text-align: center; margin-top: .7rem; }

.cfd-impact {
  list-style: none; margin: 0 0 .8rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
@media (max-width: 760px) { .cfd-impact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .cfd-impact { grid-template-columns: 1fr; } }

.cfd-ask {
  --cfd-tint: 99,72,111;
  --cfd-tint-deep: 77,56,87;
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%;
  text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  border: 1.5px solid var(--cfd-line); border-radius: 14px; background: #fff;
  font: inherit; color: inherit;
  transition: border-color .12s, box-shadow .15s, transform .08s;
}
.cfd-ask:hover { border-color: rgb(var(--cfd-tint)); box-shadow: 0 8px 24px rgba(var(--cfd-tint), .22); }
.cfd-ask:active { transform: translateY(1px); }

/* Crestfield's own photos, some colour and some black and white. One duotone
   over all of them keeps the grid reading as a single set while still giving
   each gift its own colour. */
.cfd-ask-photo {
  position: relative; display: block; flex: none;
  aspect-ratio: 3 / 2; background: rgba(var(--cfd-tint), .12);
}
.cfd-ask-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
}
.cfd-ask-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--cfd-tint), .26), rgba(var(--cfd-tint), .60));
  transition: opacity .15s;
}
.cfd-ask:hover .cfd-ask-photo::after { opacity: .8; }
/* No photo chosen: the tint fills the space instead of a broken image. */
.cfd-ask-photo--none { background: rgb(var(--cfd-tint)); }
.cfd-ask-photo--none::after { opacity: .35; }

.cfd-ask-body { display: flex; flex-direction: column; gap: .2rem; padding: .85rem .95rem 1rem; flex: 1; }
.cfd-ask-amt { font-size: 1.45rem; font-weight: 700; color: rgb(var(--cfd-tint-deep)); line-height: 1.1; }
.cfd-ask-why { font-size: .84rem; color: #3a3a3a; line-height: 1.4; }

.cfd-ask-check {
  position: absolute; top: .6rem; right: .6rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: rgb(var(--cfd-tint-deep));
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7); transition: opacity .15s, transform .15s;
}
.cfd-ask-check svg { width: 16px; height: 16px; }

.cfd-ask[aria-pressed="true"] { border-color: rgb(var(--cfd-tint)); box-shadow: 0 0 0 3px rgba(var(--cfd-tint), .28); }
.cfd-ask[aria-pressed="true"] .cfd-ask-photo::after { background: linear-gradient(180deg, rgba(var(--cfd-tint), .58), rgba(var(--cfd-tint), .84)); }
.cfd-ask[aria-pressed="true"] .cfd-ask-body { background: rgb(var(--cfd-tint-deep)); }
.cfd-ask[aria-pressed="true"] .cfd-ask-amt { color: #fff; }
.cfd-ask[aria-pressed="true"] .cfd-ask-why { color: rgba(255,255,255,.88); }
.cfd-ask[aria-pressed="true"] .cfd-ask-check { opacity: 1; transform: scale(1); }

/* The number buttons below the photos. */
.cfd-amount-btn {
  border: 1.5px solid var(--cfd-line); border-radius: 12px; background: var(--cfd-plum-tint);
  padding: .85rem .6rem; cursor: pointer; font: 700 1.25rem/1 var(--cfd-sans);
  color: var(--cfd-plum); transition: border-color .12s, background .12s, color .12s, transform .08s;
}
.cfd-amount-btn:hover { border-color: var(--cfd-plum); }
.cfd-amount-btn:active { transform: translateY(1px); }
.cfd-amount-btn[aria-pressed="true"] { background: var(--cfd-plum); border-color: var(--cfd-plum); color: #fff; }


/* ===================================================================
   The donor's own screen for a monthly gift.
   =================================================================== */

.cfd-root .cfd-summary {
  width: 100%;
  border-collapse: separate;   /* collapse makes adjacent borders share a line */
  border-spacing: 0;
  margin: 0 0 2rem;
  background: var(--cfd-plum-tint);
  border: 1px solid var(--cfd-line);
  border-radius: 12px;
  overflow: hidden;            /* so the rounded corners actually clip the rows */
}
.cfd-root .cfd-summary th,
.cfd-root .cfd-summary td {
  /* Generous horizontal padding: text sat flush against the cell edge before. */
  padding: .95rem 1.15rem;
  text-align: left;
  font-size: .95rem;
  line-height: 1.5;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--cfd-line);
}
/* One rule between rows, none under the last, and nothing vertical at all. */
.cfd-root .cfd-summary tr:last-child th,
.cfd-root .cfd-summary tr:last-child td { border-bottom: 0; }
.cfd-root .cfd-summary th { font-weight: 600; color: var(--cfd-ink); width: 42%; }
.cfd-root .cfd-summary td { color: var(--cfd-navy); text-align: right; }

@media (max-width: 480px) {
  .cfd-root .cfd-summary th, .cfd-root .cfd-summary td { padding: .8rem .9rem; font-size: .9rem; }
}

/* The amount field and its button, sitting on the same line properly. */
.cfd-manage-amount { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.cfd-manage-amount .cfd-field { flex: 1 1 160px; margin-bottom: 0; }
.cfd-manage-amount button { flex: 0 0 auto; }
@media (max-width: 480px) {
  .cfd-manage-amount { flex-direction: column; align-items: stretch; }
  .cfd-manage-amount button { width: 100%; }
}

.cfd-manage-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.cfd-root button.cfd-secondary,
.cfd-root button.cfd-danger {
  border: 1.5px solid var(--cfd-plum); border-radius: 999px; cursor: pointer;
  background: var(--cfd-white); color: var(--cfd-plum);
  font: 700 .82rem/1 var(--cfd-sans); letter-spacing: .05em; text-transform: uppercase;
  padding: .95rem 1.4rem; transition: background .15s, color .15s, border-color .15s;
}
.cfd-root button.cfd-secondary:hover { background: var(--cfd-plum); color: var(--cfd-white); }
.cfd-root button.cfd-danger { border-color: #d9c4c1; color: var(--cfd-danger); }
.cfd-root button.cfd-danger:hover { background: var(--cfd-danger); border-color: var(--cfd-danger); color: var(--cfd-white); }

@media (max-width: 560px) {
  .cfd-manage-actions { flex-direction: column; }
  .cfd-root button.cfd-secondary, .cfd-root button.cfd-danger { width: 100%; }
}

/* The page's featured image, if staff set one. Full width of the content
   column, sitting under the heading and opening paragraph. */
.cfd-hero { margin: 0 0 2.5rem; }
.cfd-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.cfd-hero figcaption {
  margin-top: .6rem;
  font-size: .82rem;
  color: var(--cfd-ink);
  text-align: center;
}