/* ==========================================================================
   ICGC Praise Temple - building project pledges

   Three things live here: the pledge card on the Give page, the pledge form
   and the dialog it opens in, and the Pledges tab on Stewardship.

   Loaded by icgc-pledge-form.php on any page carrying [icgc_pledge_panel],
   [icgc_pledge_form] or [icgc_finance]. It sits on top of adinkra.css and uses
   its tokens throughout - no colour or typeface is invented here.

   The doubled selectors (.pl.pl) are the house pattern for winning against
   Divi, which writes two-class rules with !important on anything set in the
   Builder. Escalating past that is a losing game; matching it once is not.
   ========================================================================== */

/* ==========================================================================
   1. THE CARD ON THE GIVE PAGE
   ========================================================================== */

/* Two cards became three, so the row that was holding 820px has to open up or
   the three sit squeezed against each other. Stated here rather than in the
   row's max_width attribute, which loses to the guard in adinkra.css. */
.ad-give-ways.ad-give-three .et_pb_row { max-width: min(1080px, 100%) !important; }

/* The pledge photograph is a photograph, not a payment mark. It still gets the
   same rounded corner and shadow as the Zelle and PayPal badges so the three
   read as one set, but it is allowed to be wider than 150px - a building
   shrunk to badge size is just a brown rectangle. */
/* A WIDTH, not just a max-width, and an aspect ratio on the image.
 *
 * The wrap is inline-block, so it takes its width from its content - and its
 * content is an img set to width:100% of the wrap. That is circular, and it
 * resolves to zero for as long as the browser has no intrinsic size to fall
 * back on. The Zelle and PayPal marks get away with it because they are the
 * first images on the page and load eagerly; WordPress marks this third one
 * loading="lazy", so it has no intrinsic size at layout time and the card
 * rendered 0x0 - an empty gap where the building should be, on the live page,
 * until something happened to make the browser fetch it.
 *
 * The explicit width breaks the circularity. aspect-ratio then reserves the
 * right height, so the row does not lurch when the photograph finally arrives. */
.ad-give-ways .pl-card .et_pb_image .et_pb_image_wrap {
  width: 210px;
  max-width: 100%;
}
.ad-give-ways .pl-card .et_pb_image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 683;
}

/* All three marks sit on one baseline whatever their aspect ratio. The badges
   are square and the photograph is 3:2, so without a shared height the caption
   under the third card starts 25px above the other two and the row reads as
   three unrelated things rather than one set of choices. */
.ad-give-ways .et_pb_image {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 980px) {
  .ad-give-ways .pl-card .et_pb_image .et_pb_image_wrap { width: 170px; }
}

/* The three buttons line up however long the captions are.
 *
 * Tuning the wording until it happened to fit was the other option and it is
 * not a fix: the caption is editable in the Builder, so the next person to add
 * a word puts one button 35px below the other two and has no idea why. A column
 * that is a flex box with the button pushed to the end cannot come apart that
 * way. Divi wraps every button in .et_pb_button_module_wrapper, which is the
 * thing that has to take the auto margin - the <a> inside it is inline-block
 * and margin-top:auto does nothing there. */
/* The ROW has to be the flex container, not just the columns. Divi lays a row
   out as a block with floated columns, so the three come out 324/324/359 tall -
   and margin-top:auto inside a column only pushes to the bottom of that
   column's own content height, which is exactly where the button already was.
   Stretching them to a common height is what gives the auto margin something to
   push against. */
.ad-give-ways.ad-give-three .et_pb_row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
/* Divi's clearfix becomes a flex item and would sit as a fourth column. */
.ad-give-ways.ad-give-three .et_pb_row::before,
.ad-give-ways.ad-give-three .et_pb_row::after { display: none; }

.ad-give-ways.ad-give-three .et_pb_column {
  display: flex;
  flex-direction: column;
}
.ad-give-ways.ad-give-three .et_pb_column .et_pb_button_module_wrapper { margin-top: auto; }

/* Stacked, each card is on its own and a shared height is just a gap. */
@media (max-width: 767px) {
  .ad-give-ways .et_pb_image { min-height: 0; }
  .ad-give-ways.ad-give-three .et_pb_column .et_pb_button_module_wrapper { margin-top: 0; }
}

/* ==========================================================================
   2. THE DIALOG

   The overlay does not exist in the markup - pledge.js creates it and moves
   the panel inside. So display:none here is safe in a way that hiding the
   panel itself would not be: without JavaScript there is no .pl-ov at all and
   the form renders inline at the foot of the page exactly as PHP sent it. The
   server never renders anything hidden.
   ========================================================================== */

.pl-ov.pl-ov {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;              /* over Divi's fixed header, which sits at 99999 */
  background: rgba(20, 16, 12, 0.62);
  padding: 4vh 16px;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
}

.pl-ov.pl-ov.is-open { display: flex; }

/* Stops the page behind scrolling under the dialog. overflow on <html> rather
   than <body>, because iOS ignores it on body. */
html.pl-noscroll { overflow: hidden; }

.pl-ov.pl-ov .pl-panel {
  position: relative;
  background: var(--ad-surface);
  width: 100%;
  max-width: 620px;
  border-radius: 3px;
  box-shadow: 0 18px 60px rgba(20, 16, 12, 0.34);
  padding: 26px 26px 30px;
  margin: 0;
}

.pl-ov.pl-ov .pl-panel:focus { outline: none; }

.pl-ov.pl-ov .pl-ov-x {
  position: absolute;
  top: 8px;
  right: 8px;
  /* 44px, not the 30px the glyph needs. This is the control somebody reaches
     for one-handed on a phone with the keyboard up. */
  min-width: 44px;
  min-height: 44px;
  font-size: 30px;
  line-height: 1;
  color: var(--ad-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.pl-ov.pl-ov .pl-ov-x:hover { color: var(--ad-ink); }
.pl-ov.pl-ov .pl-ov-x:focus-visible {
  outline: 3px solid var(--ad-gold);
  outline-offset: 2px;
}

/* The panel's own first heading sits under the close button otherwise. */
.pl-ov.pl-ov .pl-panel > .pl > *:first-child { margin-top: 0; }
.pl-ov.pl-ov .pl-panel h2 { padding-right: 44px; }

@media (max-width: 767px) {
  .pl-ov.pl-ov { padding: 0; }
  .pl-ov.pl-ov .pl-panel {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    padding: 22px 18px 30px;
  }
}

/* Inline - no JavaScript, so no overlay was ever created. Give the panel some
   air so it does not run straight on from the cards above it. */
.pl.pl-panel { margin-top: var(--sp-4, 32px); }

/* ==========================================================================
   3. THE FORM
   ========================================================================== */

.pl.pl { text-align: left; }

.pl.pl .pl-eyebrow {
  font-family: var(--ad-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ad-gold);
  margin: 0 0 6px;
}

.pl.pl .pl-title {
  font-family: var(--ad-display);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--ad-text);
  margin: 0 0 10px;
  /* Divi's per-page CSS sets word-wrap:break-word on .et_pb_text, which on a
     narrow phone breaks a heading mid-word one letter at a time. It has bitten
     this site twice. Keep-all costs nothing here - the longest word is
     "Building". */
  overflow-wrap: normal;
  word-break: keep-all;
}

.pl.pl .pl-lede {
  font-family: var(--ad-body);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ad-text2);
  margin: 0 0 22px;
  max-width: 56ch;
}

.pl.pl .pl-errors {
  background: rgba(163, 64, 50, 0.08);
  border-left: 3px solid var(--ad-clay);
  padding: 12px 16px;
  margin: 0 0 20px;
}
.pl.pl .pl-errors p {
  font-family: var(--ad-body);
  font-size: var(--t-small);
  color: var(--ad-clay);
  margin: 0 0 4px;
}
.pl.pl .pl-errors p:last-child { margin-bottom: 0; }

.pl.pl .pl-form { display: flex; flex-direction: column; gap: 16px; }

.pl.pl .pl-row { display: flex; flex-direction: column; gap: 6px; margin: 0; }

.pl.pl .pl-label {
  font-family: var(--ad-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ad-muted);
}

.pl.pl .pl-form input[type="text"],
.pl.pl .pl-form input[type="email"],
.pl.pl .pl-form input[type="tel"] {
  font-family: var(--ad-body);
  /* 16px is the floor, not a preference: iOS zooms the whole page in on focus
     for anything smaller, and the dialog then sits half off-screen. */
  font-size: 17px;
  color: var(--ad-text);
  background: var(--ad-paper);
  border: 1px solid var(--ad-rule);
  border-radius: 0;
  padding: 13px 15px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
}

.pl.pl .pl-form input:focus {
  outline: 2px solid var(--ad-gold);
  outline-offset: 0;
}

.pl.pl .pl-hint {
  font-family: var(--ad-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ad-muted);
}

/* ---- the four ways to redeem ---------------------------------------------
   Radios rather than a dropdown. There are four, they are short, and a
   dropdown hides three of them behind a tap - on a question somebody has to
   answer to finish the form. */

.pl.pl .pl-fieldset { border: 0; padding: 0; margin: 0; }
.pl.pl .pl-fieldset legend { padding: 0; margin-bottom: 8px; }

.pl.pl .pl-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 44px for the whole row, so the label is the target and not just the
     12px circle beside it. */
  min-height: 44px;
  font-family: var(--ad-body);
  font-size: 17px;
  color: var(--ad-text);
  cursor: pointer;
}

.pl.pl .pl-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--ad-gold); }

.pl.pl .pl-submit {
  font-family: var(--ad-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ad-ink);
  background: var(--ad-gold);
  border: 2px solid var(--ad-gold);
  border-radius: 0;
  padding: 15px 26px;
  min-height: 48px;
  width: 100%;
  cursor: pointer;
}

.pl.pl .pl-submit:hover {
  background: var(--ad-gold-bright);
  border-color: var(--ad-gold-bright);
}
.pl.pl .pl-submit:focus-visible {
  outline: 3px solid var(--ad-ink);
  outline-offset: 2px;
}

.pl.pl .pl-smallprint {
  font-family: var(--ad-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ad-muted);
  margin: 0;
}

/* The honeypot. Off-screen rather than display:none - some bots skip anything
   hidden, and this has to look like a real field to them and be unreachable
   for everybody else. */
.pl.pl .pl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pl.pl-thanks .pl-lede { margin-bottom: 12px; }

/* ==========================================================================
   4. THE PLEDGES TAB ON STEWARDSHIP
   ========================================================================== */

/* ---- the headline figures ------------------------------------------------
   fin-stats supplies the dt/dd pair; the note under each figure is the one
   thing it has no slot for. A dl's child div is not a flex container by
   default, so the span needs display:block or it sits beside the figure. */

.fin .pl-stats { margin-bottom: 18px; }

.fin .pl-stat-note {
  display: block;
  font-family: var(--ad-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ad-muted);
  margin-top: 4px;
  max-width: 22ch;
}

/* ---- the progress meter -------------------------------------------------- */

.fin .pl-meter {
  height: 10px;
  background: var(--ad-rule);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 28px;
}

.fin .pl-meter-fill {
  display: block;
  height: 100%;
  background: var(--ad-gold);
  border-radius: 999px;
}

/* ---- the register -------------------------------------------------------- */

/* The register scrolls sideways below this rather than squeezing. A money
   column that has been crushed until the figures wrap is worse than a scroll
   bar - .fin-scroll is already overflow-x:auto, but a table at width:100% with
   no floor will always try to fit instead of triggering it. */
.fin .pl-table { min-width: 720px; }

/* Seven columns is two more than any other table on this page, and .fin-table's
   16px of padding each side costs 224px of the width before a single figure is
   drawn. At 16px the register could not fit its own container until about a
   1140px viewport, so on an ordinary laptop the Write off and Remove buttons sat
   past the right-hand edge - present, but reachable only by scrolling sideways,
   and macOS hides the scrollbar until you do, so the table simply looked cut off.
   11px keeps the columns clearly apart and gives 70px back. */
.fin .pl-table th,
.fin .pl-table td { padding-left: 11px; padding-right: 11px; }

/* Several columns are set by their HEADING, not their figures: "$0.00" is
   narrow, "OUTSTANDING" in 13px uppercase at 0.12em tracking is not. Easing the
   tracking on this table alone recovers the last of the width, and at this size
   the difference is invisible beside the other finance tables - which the wider
   columns of an overflowing table were not. */
.fin .pl-table th { letter-spacing: 0.06em; }

.fin .pl-name { display: block; font-weight: 700; }

/* The pledge line is left-aligned; .fin-table sets text-align:right on every
   cell for the money columns, which drags the name over with it. */
.fin .pl-table td.fin-txv-desc,
.fin .pl-table th.fin-txv-desc { text-align: left; }

.fin .pl-how { font-style: italic; }

.fin .pl-sub {
  display: block;
  font-size: 14px;
  color: var(--ad-muted);
  line-height: 1.4;
  /* .fin-table sets white-space:nowrap on EVERY cell, for the money columns
     where a wrapped figure would be unreadable. On this table it also applied to
     the contact line, and an address-plus-number of typical length - roughly
     "someone@somewhere.com · 000-000-0000" - is about 280px that cannot shrink.
     So the Who column had a floor of roughly 310px, the table sat wider than its
     container, and the 160px actions column was pushed off the right-hand edge.
     The Write off and Remove buttons were there and unreachable without
     scrolling sideways.

     The measurement was originally taken from a real congregant's line, and
     their number was sitting in this comment. The width is what mattered; the
     number was not.

     Undone here rather than in adinkra.css: the nowrap is right for a table of
     figures, and this is the one column that is prose. */
  white-space: normal;
  overflow-wrap: break-word;   /* break only when a word genuinely will not fit */
}

/* The name itself still holds one line where it can - it is the thing the eye
   scans down - but it may break rather than widen the column past everything
   else. */
.fin .pl-onfile { font-style: italic; }

.fin .pl-nomatch { color: var(--ad-clay); }

.fin .pl-state {
  font-family: var(--ad-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 2px;
}

.fin .pl-state-open     { background: rgba(108, 114, 105, 0.14); color: var(--ad-text2); }
.fin .pl-state-part     { background: rgba(168, 117, 36, 0.14);  color: var(--ad-gold); }
.fin .pl-state-complete { background: rgba(15, 93, 78, 0.12);    color: var(--ad-green); }
.fin .pl-state-writeoff { background: rgba(163, 64, 50, 0.10);   color: var(--ad-clay); }

/* A written-off pledge stays legible. Struck through would say "deleted", and
   it is not - it is a promise the church has decided to stop counting. */
.fin .pl-row.is-writeoff .pl-name,
.fin .pl-row.is-writeoff .fin-gl-num { opacity: 0.55; }

/* The actions column wraps rather than demanding a line of its own.
   white-space:nowrap here was pushing the table 116px past its container and
   putting the whole register behind a horizontal scroll on a 1280px laptop -
   for two buttons that are perfectly happy stacked. */
.fin .pl-table td.pl-actions {
  white-space: normal;
  width: 160px;
  text-align: left;
}

.fin .pl-rowform {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.fin .pl-remove { color: var(--ad-clay); }

/* ---- the unmatched pledges, above the register ---------------------------
   Its own block rather than a control inside every row. See the note on
   icgc_pledge_render_unmatched() for why. */

.fin .pl-unmatched {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 30px;
}

.fin .pl-unmatched-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  background: var(--ad-surface);
  border-left: 3px solid var(--ad-clay);
  padding: 16px 18px;
}

.fin .pl-unmatched-who { flex: 1 1 200px; min-width: 0; }

.fin .pl-unmatched-row .pl-bind {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* min-width:0 or the select refuses to shrink below its longest option and
     drags the row wider than its container. */
  flex: 2 1 240px;
  min-width: 0;
}

.fin .pl-unmatched-row select { max-width: 100%; }
.fin .pl-unmatched-row .pl-match { flex: 0 0 auto; margin: 0; }

/* The candidates sentence is a footnote to the row, so it takes a line of its
   own under the controls rather than squeezing between them. */
.fin .pl-candidates { flex: 1 1 100%; margin: 0; color: var(--ad-clay); }

/* ---- the importer -------------------------------------------------------- */

.fin .pl-paste {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
  min-height: 160px;
  padding: 12px 14px;
  background: var(--ad-paper);
  border: 1px solid var(--ad-rule);
  border-radius: 0;
  box-sizing: border-box;
  /* A pasted spreadsheet row is long. Let it scroll sideways rather than
     wrapping every row into four lines of unreadable soup. */
  white-space: pre;
  overflow-x: auto;
}

.fin .pl-preview { font-size: 15px; }
.fin .pl-preview .pl-nomatch { font-style: italic; }

/* The "(needed)" marker on the two columns an import cannot do without. */
.fin .fin-label em { font-style: normal; color: var(--ad-clay); text-transform: none; }

/* ---- filtering the register ---------------------------------------------- */

/* Sits directly on the table rather than floating in the page, so it reads as
   a control belonging to the list below it and not to the figures above it -
   which it deliberately does not touch. */
.fin .pl-filters { margin-bottom: 0; }

/* The line that stops the filter looking broken.
 *
 * The four headline figures never move when the register is narrowed, because
 * they describe the whole drive rather than the current view. Without this
 * sentence that reads as a control that did nothing. Set quietly - it is an
 * explanation, not a warning, and a clay notice box here would suggest
 * something had gone wrong. */
.fin .pl-showing {
  font-family: var(--ad-body);
  font-size: 15px;
  color: var(--ad-text2);
  background: rgba(108, 114, 105, 0.08);
  border-left: 3px solid var(--ad-rule);
  padding: 10px 14px;
  margin: 0 0 14px;
}
.fin .pl-showing strong { color: var(--ad-text); }

/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 700px) {
  .fin .pl-actions { white-space: normal; }
  .fin .pl-rowform { flex-direction: column; align-items: stretch; }
  .fin .pl-rowform .pl-bind { flex: 1 1 auto; }
}