/* Endorsements board, signing form and Contact Us.
   Scoped under .plu-public-endorsement-page so nothing here can reach another
   session's pages. Shared-component fixes belong in plu.css and are the
   coordinating session's to make.

   NOTE: this file used to carry a scoped `.plu-field textarea` width fix. That
   bug is now fixed globally in plu.css (b02af42), so the override is gone.
   Keeping it would have been actively harmful: it hardcoded the pre-03e30a2
   control styling (15px text, 1px #c9c8bf, --plu-radius) and, being more
   specific, would have won - leaving this page's textarea looking unlike every
   other control on the same form. */

/* ---------------------------------------------------------------------------
   Public endorsement page — hero and register section.

   Ported from the WordPress original and then verified by measuring the live
   page, which matters here: plu-core ships TWO stylesheets for this page and
   the second one wins. public-endorsements.css defines a DARK hero;
   public-endorsements-refine.css redefines it as a light one. Everything below
   follows the refine file. Reading only the base file gives the wrong design.

   The reference hero carries a candidate photograph as a second background
   layer (sitting in the right 44% behind a white-to-transparent gradient). The
   asset is vendored at img/public-endorsement-mhzz.jpg - the reference's own
   file - and injected by the template as --endorse-hero-photo, so it is drawn
   here as the reference does: the gradient is the first background layer, the
   photograph the second.
--------------------------------------------------------------------------- */
.plu-public-endorsement-page .plu-public-endorsement-hero,
.plu-public-endorsement-page .plu-public-register {
  width: min(1180px, calc(100% - 40px));
  margin: auto;
}

.plu-public-endorsement-page .plu-public-endorsement-hero {
  display: grid;
  min-height: 450px;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 36px;
  padding: 52px 62px;
  color: #111;
  border-top: 7px solid #ffe500;
  border-bottom: 1px solid #1a1a1a;
  background-color: #fff;
  /* The candidate photograph is the second layer. Its URL is injected as
     --endorse-hero-photo by the template (board.html) with {% static %}, so it
     resolves to the hashed asset name under production's manifest storage.
     Not written as a url() here, though it could be: whitenoise's
     CompressedManifestStaticFilesStorage post-processes collected CSS and
     rewrites url() to the hashed name, so the earlier claim that this file
     "cannot rewrite" a path was simply wrong. The real reason is that the
     banner overrides this same variable: template-side, the bundled
     photograph and an editor's banner are one declaration in one style
     attribute, and the focal point travels with it. A url() here would be a
     second source for the same layer. Unset (e.g. on the bare signing form)
     the layer is `none`.

     The photograph is a 554x554 square and is drawn height-bound - `auto 112%`
     - anchored 12px past the right edge with the head a quarter of the way
     down, exactly as the refine file has it. Not `cover`: on a hero wider
     than it is tall, cover scales a square to the *width*, some 40% larger,
     and centring the overflow crops the beret and face out of the frame. */
  background-image:
    linear-gradient(90deg, #fff 0%, #fff 56%, rgba(255,255,255,0) 56%, rgba(255,255,255,0) 100%),
    var(--endorse-hero-photo, none);
  /* The bundled portrait is anchored for its own framing; an editor's banner
     brings its own focal point, which --endorse-hero-focus supplies. Unset,
     the measured position is unchanged. */
  background-position: center, var(--endorse-hero-focus, calc(100% + 12px) 25%);
  background-size: cover, auto 112%;
  background-repeat: no-repeat, no-repeat;
}

.plu-public-endorsement-page .plu-public-endorsement-hero > div {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  max-width: 570px;
  padding-bottom: 108px;
}

.plu-public-endorsement-page .plu-public-endorsement-hero .plu-eyebrow { color: #bd2029; }

.plu-public-endorsement-page .plu-public-endorsement-hero h1 {
  max-width: 560px;
  margin: 8px 0 18px;
  font-size: clamp(2.45rem, 3.85vw, 3.65rem);
  line-height: .98;
}

.plu-public-endorsement-page .plu-public-endorsement-hero p {
  max-width: 500px;
  font-size: 1rem;
  line-height: 1.55;
  color: #111;
}

.plu-public-endorsement-page .plu-public-endorsement-hero a {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 18px;
  background: #111;
  color: #ffe500;
  font-weight: 800;
  text-decoration: none;
}

.plu-public-endorsement-page .plu-public-endorsement-hero aside {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 11px;
  row-gap: 2px;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  width: auto;
  padding: 13px 18px;
  background: #fff;
  border-left: 4px solid #ffe500;
}

.plu-public-endorsement-page .plu-public-endorsement-hero aside strong { grid-row: 1 / 3; font-size: 2.45rem; line-height: 1; color: #111; }
.plu-public-endorsement-page .plu-public-endorsement-hero aside span { margin: 0; align-self: end; color: #111; font-size: .7rem; }
.plu-public-endorsement-page .plu-public-endorsement-hero aside small { margin: 0; align-self: start; color: #555; font-size: .7rem; }

.plu-public-endorsement-page .plu-public-register {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 46px;
  padding: 52px 62px;
  background: #fff;
  border-top: 6px solid #c61c2c;
}

.plu-public-endorsement-page .plu-public-register > header { padding-top: 5px; padding-right: 16px; }

.plu-public-endorsement-page .plu-public-register h2 {
  max-width: 390px;
  margin: 6px 0 0;
  font-size: clamp(2rem, 2.6vw, 2.65rem);
  line-height: 1.03;
}

/* Empty state, shown when no campaign is active. Metrics from the reference. */
.plu-public-endorsement-page .plu-public-empty {
  width: min(1180px, calc(100% - 40px));
  margin: auto;
  padding: 100px 0;
  min-height: 50vh;
}

.plu-public-endorsement-page .plu-public-empty h1 { font-size: 3rem; margin: 8px 0 14px; }

@media (max-width: 650px) {
  .plu-public-endorsement-page .plu-public-empty { width: 100%; padding: 56px 22px; min-height: 0; }
  .plu-public-endorsement-page .plu-public-empty h1 { font-size: 2rem; }
}

/* DO NOT "FIX" THIS BACK TO THE SHARED VALUE.

   The reference does not have one shared form-label style - its two forms are
   authored differently, and this was measured on both before the override was
   allowed:

     WordPress /join-plu/        13px    / 19.5px  / 900 / rgb(13, 13, 13)
     WordPress endorsement form  13.12px / 19.68px / 800 / rgb(23, 23, 23)
     Django .plu-field label     13px    / 19.5px  / 900 / rgb(13, 13, 13)

   So no single value of the shared `.plu-field label` can match both, and the
   current shared value is right for the signup form, which has eleven measured
   controls behind it. The endorsement form is sized in rem where the signup
   form is sized in px - 13.12px is .82rem and 19.68px is 1.5 x that - which is
   a real authorial difference in the reference rather than drift.

   This is therefore NOT a divergence awaiting reconciliation: it reproduces a
   difference that exists in the reference itself. Ruled by the chrome owner,
   who measured the signup form independently before deciding. */
.plu-public-endorsement-page .plu-public-register .plu-field label {
  font-size: .82rem;
  line-height: 1.5;
  font-weight: 800;
  color: rgb(23, 23, 23);
}

/* The reference's submit is dark with yellow text, matching the hero call to
   action - not the shared yellow .plu-btn. Measured against the reference:
   16px/24px (inherited), weight 800, padding 15px 20px, no radius, no letter
   spacing. Scoped here rather than changed in .plu-btn, which is shared. */
.plu-public-endorsement-page .plu-public-submit {
  margin-top: 7px;
  border: 0;
  border-radius: 0;
  padding: 15px 20px;
  background: #111;
  color: #ffe500;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: normal;
  cursor: pointer;
}

.plu-public-endorsement-page .plu-public-submit:disabled { opacity: .6; cursor: wait; }

.plu-public-endorsement-page .plu-public-check { display: flex; gap: 10px; align-items: flex-start; }
.plu-public-endorsement-page .plu-public-check input { width: auto; flex: none; margin-top: 3px; }
.plu-public-endorsement-page .plu-public-check label { font-weight: 400; font-size: 13.5px; }

/* Responsive rules below are the reference's own, read from the refine file's
   media blocks and then checked against the running page at 1024/768/320.
   Measuring mattered: the two grids do NOT collapse together. At 768 the
   register is already a single column while the hero is still two, and the
   mobile hero replaces the clamp on the h1 entirely (26.4px at 320, where the
   desktop clamp would give 39.2px). Collapsing both at one breakpoint, which
   is what a reasonable guess produces, is wrong at 768 and at 320. */

@media (max-width: 860px) {
  /* The reference nudges the photograph 6px further past the edge here. */
  .plu-public-endorsement-page .plu-public-endorsement-hero {
    padding-inline: 38px;
    background-position: center, calc(100% + 18px) 25%;
  }
  .plu-public-endorsement-page .plu-public-register { grid-template-columns: 1fr; padding: 38px; }
  .plu-public-endorsement-page .plu-public-register > header { padding-right: 0; }
}

@media (max-width: 650px) {
  .plu-public-endorsement-page .plu-public-endorsement-hero,
  .plu-public-endorsement-page .plu-public-register { width: 100%; }

  .plu-public-endorsement-page .plu-public-register { padding: 35px 20px; gap: 28px; }

  /* Below 650 the reference reserves a 258px band at the foot of the hero for
     the candidate photograph, drawn by ::after. The asset is vendored now
     (img/public-endorsement-mhzz.jpg), so the reserve is restored exactly as
     the reference has it - padding foot of 286px and the ::after band - the two
     changes the earlier note said to make together once the image existed. */
  .plu-public-endorsement-page .plu-public-endorsement-hero {
    display: block;
    position: relative;
    isolation: isolate;
    min-height: 0;
    padding: 28px 22px 286px;
    border-top-width: 6px;
    background: #fff;
    overflow: hidden;
  }

  .plu-public-endorsement-page .plu-public-endorsement-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 258px;
    background:
      linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,0)),
      var(--endorse-hero-photo, none);
    background-repeat: no-repeat, no-repeat;
    /* Width-bound in the band, anchored near the top so the face stays in
       the 258px, and the same yellow rule the reference draws above it. */
    background-size: cover, 115% auto;
    background-position: center, 100% 8%;
    border-top: 4px solid #ffe500;
  }

  .plu-public-endorsement-page .plu-public-endorsement-hero > div { display: block; max-width: none; padding: 0; }
  .plu-public-endorsement-page .plu-public-endorsement-hero .plu-eyebrow { margin: 0 0 12px; font-size: .72rem; line-height: 1.35; }

  .plu-public-endorsement-page .plu-public-endorsement-hero h1 {
    max-width: 330px;
    margin: 0 0 16px;
    font-size: clamp(1.65rem, 6.6vw, 1.9rem);
    line-height: 1.08;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
  }

  .plu-public-endorsement-page .plu-public-endorsement-hero p { max-width: 320px; margin: 0; font-size: .98rem; line-height: 1.5; }
  .plu-public-endorsement-page .plu-public-endorsement-hero a { margin-top: 18px; padding: 13px 16px; }

  .plu-public-endorsement-page .plu-public-endorsement-hero aside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    width: min(100%, 286px);
    margin: 22px 0 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #deded9;
    border-left: 4px solid #ffe500;
  }

  .plu-public-endorsement-page .plu-public-endorsement-hero aside strong { font-size: 2.15rem; }
  .plu-public-endorsement-page .plu-public-endorsement-hero aside span { font-size: .65rem; line-height: 1.2; }
  .plu-public-endorsement-page .plu-public-endorsement-hero aside small { font-size: .72rem; line-height: 1.25; }
}

/* ---------------------------------------------------------------------------
   The "Already a Patriotic Cadre?" note in the register header.
--------------------------------------------------------------------------- */
.plu-public-endorsement-page .plu-public-cadre {
  margin-top: 22px;
  padding: 15px 18px;
  background: #f7f6f1;
  border-left: 4px solid #ffe500;
}
.plu-public-endorsement-page .plu-public-cadre strong { display: block; font-size: .95rem; }
.plu-public-endorsement-page .plu-public-cadre p { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: #333; }
.plu-public-endorsement-page .plu-public-cadre a { color: #bd2029; font-weight: 700; }

/* ---------------------------------------------------------------------------
   The three-step signing wizard.

   Default (no JavaScript): every fieldset is shown, the step tablist and the
   Continue/Back buttons are hidden, so the form is a single flat page that
   still submits. endorsements-wizard.js adds `.is-enhanced`, hides all but the
   active step (via the `hidden` attribute) and reveals the stepping controls.
--------------------------------------------------------------------------- */
.plu-public-endorsement-page .plu-endorse-form { margin: 0; }
.plu-public-endorsement-page .plu-endorse-steps { display: none; }
.plu-public-endorsement-page .plu-endorse-step { border: 0; margin: 0 0 6px; padding: 0; min-inline-size: 0; }
.plu-public-endorsement-page .plu-endorse-step > legend { padding: 0; margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; color: #111; }
.plu-public-endorsement-page .plu-endorse-step__hint { margin: 0 0 16px; font-size: .85rem; color: #555; }
.plu-public-endorsement-page .plu-endorse-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.plu-public-endorsement-page [data-step-next],
.plu-public-endorsement-page [data-step-prev] { display: none; }

.plu-public-endorsement-page .plu-endorse-form.is-enhanced .plu-endorse-steps {
  display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0 0 26px; padding: 0;
}
.plu-public-endorsement-page .plu-endorse-steps li {
  display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; color: #9a988f;
}
.plu-public-endorsement-page .plu-endorse-steps li span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #e6e5df; color: #111; font-size: .78rem;
}
.plu-public-endorsement-page .plu-endorse-steps li[aria-current="step"] { color: #111; }
.plu-public-endorsement-page .plu-endorse-steps li[aria-current="step"] span { background: #ffe500; }
.plu-public-endorsement-page .plu-endorse-steps li.is-done span { background: #111; color: #ffe500; }
.plu-public-endorsement-page .plu-endorse-form.is-enhanced [data-step-next],
.plu-public-endorsement-page .plu-endorse-form.is-enhanced [data-step-prev] { display: inline-block; }

/* ---------------------------------------------------------------------------
   Combined figures: headline stats then three small tables. The reference
   shows aggregate figures only - no individual endorser is ever listed here.
--------------------------------------------------------------------------- */
.plu-public-endorsement-page .plu-endorse-figures {
  width: min(1180px, calc(100% - 40px));
  margin: 8px auto 0;
  padding: 52px 62px;
  background: #fff;
  border-top: 6px solid #111;
}
.plu-public-endorsement-page .plu-endorse-figures > header { max-width: 720px; }
.plu-public-endorsement-page .plu-endorse-figures h2 { margin: 6px 0 8px; font-size: clamp(1.8rem, 2.4vw, 2.4rem); line-height: 1.05; }
.plu-public-endorsement-page .plu-endorse-figures > header p { color: #333; }

.plu-public-endorsement-page .plu-endorse-headline {
  display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 34px; border: 1px solid #e2e1db;
}
.plu-public-endorsement-page .plu-endorse-headline__stat { padding: 22px 24px; border-left: 1px solid #e2e1db; }
.plu-public-endorsement-page .plu-endorse-headline__stat:first-child { border-left: 0; }
/* Base first, then the dark tile. These were the other way round, and the
   two rules have identical specificity - two classes and a type each - so
   the generic black won and the total rendered black on black. The field
   circled an empty tile where 31,837 should be; the number was there the
   whole time, painted #111 on #111. */
.plu-public-endorsement-page .plu-endorse-headline__stat b { display: block; font-size: 2.4rem; line-height: 1; color: #111; }
.plu-public-endorsement-page .plu-endorse-headline__stat span {
  display: block; margin-top: 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #555;
}
.plu-public-endorsement-page .plu-endorse-headline__stat--total { background: #111; }
.plu-public-endorsement-page .plu-endorse-headline__stat--total b { color: #ffe500; }
.plu-public-endorsement-page .plu-endorse-headline__stat--total span { color: #f2f1ec; }

.plu-public-endorsement-page .plu-endorse-figures__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.plu-public-endorsement-page .plu-endorse-figure h3 { margin: 0 0 10px; font-size: 1rem; padding-bottom: 8px; border-bottom: 2px solid #111; }
.plu-public-endorsement-page .plu-endorse-figure table { width: 100%; border-collapse: collapse; }
.plu-public-endorsement-page .plu-endorse-figure th { text-align: left; font-weight: 600; padding: 9px 0; border-bottom: 1px solid #ecebe5; font-size: .92rem; }
.plu-public-endorsement-page .plu-endorse-figure td { text-align: right; font-weight: 800; padding: 9px 0; border-bottom: 1px solid #ecebe5; color: #bd2029; font-size: .92rem; }
.plu-public-endorsement-page .plu-endorse-figure__empty { color: #777; font-weight: 400; text-align: left; }

@media (max-width: 860px) {
  .plu-public-endorsement-page .plu-endorse-figures { padding: 38px; }
  .plu-public-endorsement-page .plu-endorse-figures__grid { grid-template-columns: 1fr; gap: 26px; }
  .plu-public-endorsement-page .plu-endorse-headline { grid-template-columns: 1fr; }
  .plu-public-endorsement-page .plu-endorse-headline__stat { border-left: 0; border-top: 1px solid #e2e1db; }
  .plu-public-endorsement-page .plu-endorse-headline__stat:first-child { border-top: 0; }
}
@media (max-width: 650px) {
  .plu-public-endorsement-page .plu-endorse-figures { width: 100%; padding: 35px 20px; }
}