/**
 * Settlement W-9 — front-end styles.
 *
 * Lifted out of the seiu-updates theme so the feature is self-contained and
 * drops onto its own site without dragging that theme along.
 *
 * Selectors are scoped under .wpforms-container on purpose: WPForms ships
 * `div.wpforms-container-full * { border: 0 }` at specificity (0,1,1), which
 * silently zeroes any bare single-class border rule.
 */

/* ---------------------------------------------------------------------------
   Settlement W-9 form (WPForms)
   --------------------------------------------------------------------------- */

/* Page navigation — WPForms renders Previous/Next as adjacent siblings with no
   gap, which reads as one control on mobile. */
.wpforms-container .wpforms-page-button {
  margin: 0 6px;
  min-width: 132px;
}
.wpforms-container .wpforms-pagebreak-center,
.wpforms-container .wpforms-clear {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}
/* The final page's footer: Previous on the left, the primary action hard right.
   WPForms renders those two buttons in different subtrees, so w9-review.js moves
   Previous into the submit container first — see regroupFinalNav() there for why
   it moves that way round rather than the other. The .w9-submitrow class is added
   by that function, so these rules only apply once the move has happened and the
   layout never half-applies. */
.wpforms-container .wpforms-submit-container.w9-submitrow {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 24px;
}

/* Both orders are stated rather than left to source order. Nothing else sets
   `order` on these buttons today, so this is belt and braces — but `order` is
   the one property that silently decides which end of the row the primary
   action lands on, and it is set just below for the mobile stack, so leaving
   the desktop case implicit would make the two easy to get out of step. */
.wpforms-container .wpforms-submit-container.w9-submitrow .wpforms-page-prev { order: 0; }
.wpforms-container .wpforms-submit-container.w9-submitrow .wpforms-submit { order: 1; }

/* WPForms themes its buttons through custom properties. Setting those is far
   more robust than out-specifying its own selectors, which carry :not() chains. */
.wpforms-container {
  --wpforms-button-background-color: var(--seiu-purple);
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-border-color: var(--seiu-purple);
  --wpforms-button-border-radius: 8px;
}

/* Disclaimers and certification blocks. */
.w9-notice,
.w9-review {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--seiu-purple);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.w9-notice p,
.w9-review p { margin: 0; font-size: 15px; }

/* IRS substitute-form rules require the certification to stand out from the
   surrounding text — do not soften this block. */
.w9-cert {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.5;
}
.w9-cert ol { margin: 8px 0 12px; padding-left: 20px; }
.w9-cert li { margin-bottom: 8px; }
.w9-cert p:last-child {
  background: #fff8dc;
  border: 1px solid var(--amber);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 12px 0 0;
}

/* Taxpayer ID fields read as sensitive — monospace makes digit errors visible. */
.w9-ssn input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1px;
}

/* ---------------------------------------------------------------------------
   Opening notice (page 1)

   The whole of page 1 is this notice: what the settlement is, who it covers and
   what the deadline is, before a single question is asked. It is the one page a
   member reads rather than fills in, so it is set as prose, not as a form aside.
   --------------------------------------------------------------------------- */

.wpforms-container .w9-notice--opening {
  border-left-width: 4px;
  padding: 18px 20px;
}

/* The shared .w9-notice rule zeroes paragraph margins, which is right for a
   one-paragraph aside and wrong for several paragraphs of prose. */
.wpforms-container .w9-notice--opening p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.wpforms-container .w9-notice--opening p:last-child { margin-bottom: 0; }

.wpforms-container .w9-notice__title {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 14px;
}

/* Two columns, filled top-to-bottom, which is the order the facilities were
   given in. Collapses to one column on a phone, where two columns of long
   facility names would wrap into an unreadable mess. */
.wpforms-container .w9-notice__facilities {
  columns: 2;
  column-gap: 24px;
  margin: 0 0 14px;
  padding-left: 20px;
}
.wpforms-container .w9-notice__facilities li {
  break-inside: avoid;
  margin-bottom: 6px;
}

/* Contact details for someone who is stuck — deliberately quieter than the
   notice itself, and separated from it, so it reads as help rather than as
   another thing to take in before continuing. */
.wpforms-container .w9-notice__help {
  border-top: 1px solid var(--line, #d8dce3);
  margin-top: 16px;
  padding-top: 14px;
}
.wpforms-container .w9-notice__help p {
  color: var(--muted, #646970);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* The email and phone are links so a phone dials and a mail client opens.
   Underlined rather than colour-only: this block is already muted, and colour
   alone is not enough to mark a link. */
.wpforms-container .w9-notice__help a {
  text-decoration: underline;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .wpforms-container .wpforms-page-button {
    flex: 1 1 100%;
    margin: 0;
  }
  .wpforms-container .wpforms-pagebreak-center,
  .wpforms-container .wpforms-clear { gap: 10px; }
  /* Next above Previous on mobile — forward action gets the primary position. */
  .wpforms-container .wpforms-page-button.wpforms-page-next { order: -1; }

  /* Same treatment the other pages get: full-width buttons, forward action on
     top. Left/right has no meaning once each button spans the screen. */
  .wpforms-container .wpforms-submit-container.w9-submitrow { flex-wrap: wrap; }
  .wpforms-container .wpforms-submit-container.w9-submitrow .wpforms-submit {
    flex: 1 1 100%;
    order: -1;
  }
  .wpforms-container .wpforms-submit-container.w9-submitrow .wpforms-page-prev {
    flex: 1 1 100%;
    order: 0;
  }

  .wpforms-container .w9-notice--opening { padding: 14px 16px; }
  .wpforms-container .w9-notice__title { font-size: 17px; }
  .wpforms-container .w9-notice__facilities { columns: 1; }
}

/* ---------------------------------------------------------------------------
   Form W-9 facsimile (review step)

   Reproduces the layout of Form W-9 (Rev. March 2024) page 1 in real text, so
   it reflows on a phone and reads correctly in a screen reader.

   Every selector is scoped under .wpforms-container on purpose: WPForms ships
   `div.wpforms-container-full, div.wpforms-container-full * { border: 0 }`
   at specificity (0,1,1), which silently zeroes any bare .w9fx rule.
   --------------------------------------------------------------------------- */

.wpforms-container .w9-facsimile { margin: 4px 0 10px; }
.wpforms-container .w9-facsimile__fallback { color: var(--muted); font-style: italic; margin: 0; }

.wpforms-container .w9fx {
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-size: 12px;
  line-height: 1.35;
}
.wpforms-container .w9fx * { box-sizing: border-box; }

/* --- masthead --- */
.wpforms-container .w9fx__head {
  display: grid;
  grid-template-columns: 150px 1fr 130px;
  border-bottom: 1px solid #000;
}
.wpforms-container .w9fx__head-l { padding: 6px 8px; border-right: 1px solid #000; }
.wpforms-container .w9fx__head-m { padding: 8px 10px; border-right: 1px solid #000; text-align: center; }
.wpforms-container .w9fx__head-r { padding: 8px; font-weight: 700; font-size: 11px; }

.wpforms-container .w9fx__formline { display: flex; align-items: baseline; gap: 6px; }
.wpforms-container .w9fx__formword { font-size: 11px; }
.wpforms-container .w9fx__formno { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.wpforms-container .w9fx__rev { font-size: 10px; margin-top: 2px; }
.wpforms-container .w9fx__dept { font-size: 9px; }
.wpforms-container .w9fx__title { font-size: 16px; font-weight: 700; }
.wpforms-container .w9fx__goto { font-size: 10px; font-style: italic; margin-top: 4px; }

/* --- body with the rotated left rail --- */
.wpforms-container .w9fx__main { display: grid; grid-template-columns: 26px 1fr; }
.wpforms-container .w9fx__side {
  border-right: 1px solid #000;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  padding: 8px 4px;
}
.wpforms-container .w9fx__content { min-width: 0; }

.wpforms-container .w9fx__field { border-bottom: 1px solid #000; padding: 4px 8px 6px; min-width: 0; }
.wpforms-container .w9fx__cap { display: flex; gap: 6px; align-items: baseline; }
.wpforms-container .w9fx__num { font-weight: 700; font-size: 10px; min-width: 14px; }
.wpforms-container .w9fx__captxt { font-size: 10px; }
.wpforms-container .w9fx__subcap { font-size: 10px; margin-top: 6px; }
.wpforms-container .w9fx__val {
  font-size: 15px;
  min-height: 22px;
  padding-top: 2px;
  word-break: break-word;
}
.wpforms-container .w9fx__val--thin { min-height: 16px; border-bottom: 1px solid #999; }

/* two-column rows: 3a|exemptions, and 5-6|requester */
.wpforms-container .w9fx__split { display: grid; grid-template-columns: 1fr 200px; }
.wpforms-container .w9fx__split > * { border-bottom: 1px solid #000; }
.wpforms-container .w9fx__field--exempt,
.wpforms-container .w9fx__field--req { border-left: 1px solid #000; }
.wpforms-container .w9fx__addrcol { min-width: 0; }
.wpforms-container .w9fx__addrcol .w9fx__field:last-child { border-bottom: 0; }
.wpforms-container .w9fx__split--addr > .w9fx__addrcol { border-bottom: 0; }

/* line 3a tick boxes */
.wpforms-container .w9fx__tickrow { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.wpforms-container .w9fx__tickline { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.wpforms-container .w9fx__tick { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11px; }
.wpforms-container .w9fx__tick.is-on { font-weight: 700; }
.wpforms-container .w9fx__tickbox {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
}
.wpforms-container .w9fx__inlinebox {
  min-width: 42px;
  border: 1px solid #000;
  padding: 1px 5px;
  font-weight: 700;
  text-align: center;
}
.wpforms-container .w9fx__inlinerule {
  flex: 1 1 auto;
  border-bottom: 1px solid #000;
  min-height: 15px;
  font-weight: 700;
}

/* Part bars */
.wpforms-container .w9fx__partbar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #000;
  padding: 3px 8px;
}
.wpforms-container .w9fx__partchip {
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
}
.wpforms-container .w9fx__parttitle { font-weight: 700; font-size: 13px; }

/* Part I */
.wpforms-container .w9fx__tin { display: grid; grid-template-columns: 1fr 250px; border-bottom: 1px solid #000; }
.wpforms-container .w9fx__tinnote { padding: 6px 8px; font-size: 10px; }
.wpforms-container .w9fx__tincol { border-left: 1px solid #000; padding: 6px 8px; }
.wpforms-container .w9fx__tinbox { margin-bottom: 2px; }
.wpforms-container .w9fx__tincap { font-size: 10px; border-bottom: 1px solid #000; padding-bottom: 2px; }
.wpforms-container .w9fx__tinrow { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.wpforms-container .w9fx__cells { display: inline-flex; }
.wpforms-container .w9fx__cellbox {
  width: 17px;
  height: 22px;
  border: 1px solid #000;
  margin-right: -1px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}
.wpforms-container .w9fx__dash { font-weight: 700; padding: 0 3px; }
.wpforms-container .w9fx__or { font-size: 11px; font-weight: 700; margin: 4px 0; }

/* Sign Here */
.wpforms-container .w9fx__sign { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.wpforms-container .w9fx__signchip { font-weight: 700; font-size: 12px; border-right: 1px solid #000; padding-right: 10px; }
.wpforms-container .w9fx__signnote { font-size: 11px; }

/* announced, not shown */
.wpforms-container .w9fx__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Below ~780px the two-column rows and the rotated rail stop working; the form
   becomes a single column so it stays readable rather than shrinking. */
@media (max-width: 780px) {
  .wpforms-container .w9fx__head { grid-template-columns: 1fr; }
  .wpforms-container .w9fx__head-l,
  .wpforms-container .w9fx__head-m { border-right: 0; border-bottom: 1px solid #000; }
  .wpforms-container .w9fx__head-m { text-align: left; }
  .wpforms-container .w9fx__main { grid-template-columns: 1fr; }
  .wpforms-container .w9fx__side { display: none; }
  .wpforms-container .w9fx__split,
  .wpforms-container .w9fx__tin { grid-template-columns: 1fr; }
  .wpforms-container .w9fx__field--exempt,
  .wpforms-container .w9fx__field--req,
  .wpforms-container .w9fx__tincol { border-left: 0; border-top: 1px solid #000; }
  .wpforms-container .w9fx__tickrow { flex-direction: column; gap: 5px; }
  .wpforms-container .w9fx__cellbox { width: 15px; height: 20px; font-size: 13px; line-height: 18px; }
}

/* Sign Here strip with the captured signature drawn in. */
.wpforms-container .w9fx__sigcell,
.wpforms-container .w9fx__datecell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-left: 1px solid #000;
  padding: 2px 10px 4px;
  min-height: 46px;
}
.wpforms-container .w9fx__sigcell { flex: 1 1 auto; }
.wpforms-container .w9fx__datecell { flex: 0 0 130px; }
.wpforms-container .w9fx__sigcap { font-size: 10px; }
.wpforms-container .w9fx__sigimg {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  align-self: flex-start;
}
.wpforms-container .w9fx__dateval { font-size: 14px; padding-top: 6px; }

/* Uploaded photo ID, shown with the completed form. */
.wpforms-container .w9fx-id {
  border: 1px solid #000;
  border-top: 0;
  background: #fff;
  padding: 8px 10px 10px;
}
.wpforms-container .w9fx-id__cap { font-size: 10px; font-weight: 700; margin-bottom: 6px; }
.wpforms-container .w9fx-id__img {
  display: block;
  max-width: 260px;
  max-height: 190px;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
}
.wpforms-container .w9fx-id__name { font-size: 11px; color: var(--muted); margin-top: 5px; }
.wpforms-container .w9fx-id__none { font-size: 12px; color: var(--amber); }

@media (max-width: 780px) {
  .wpforms-container .w9fx__sign { flex-wrap: wrap; }
  .wpforms-container .w9fx__sigcell,
  .wpforms-container .w9fx__datecell {
    border-left: 0;
    border-top: 1px solid #000;
    flex: 1 1 100%;
  }
}
