/* ==========================================================================
   UX-PUBLIC-a — the public volunteer pages (root: .npe-my.npe-my-pub.npe-pv).
   Every selector starts .npe-pv. Colours, spacing, radii and type sizes are
   tokens from npe-tokens.css (through .npe-my): never a literal.
   ========================================================================== */
.npe-pv{max-width:1120px;margin:0 auto;padding:var(--s6) var(--s4) var(--s7);color:var(--fg1);}
.npe-pv-narrow{max-width:560px;margin:0 auto;}
.npe-pv-head{margin:0 0 var(--s4);}
.npe-pv-head h1{margin:0;font-family:var(--fdisp);font-size:var(--t-h1);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--fg0);}
.npe-pv-head p{margin:var(--s1) 0 0;max-width:72ch;font-size:var(--t-body);color:var(--fg1);}
.npe-pv-back{display:inline-flex;align-items:center;min-height:var(--h-ctl);font-size:var(--t-sm);font-weight:600;text-decoration:none;}
.npe-pv .npe-my-btn{text-decoration:none;}
.npe-pv .npe-my-btn[aria-disabled="true"]{opacity:.5;pointer-events:none;}

/* control skins: the kit scopes these to .npe-console */
.npe-pv .npe-k-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.npe-pv .npe-k-field select,
.npe-pv .npe-k-field textarea,
.npe-pv .npe-k-filter__field select{width:100%;min-height:var(--h-ctl);margin:0;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--rbtn);background:var(--bg0);font:inherit;font-size:var(--t-touch);color:var(--fg0);box-shadow:none;}
.npe-pv .npe-k-filter__field select{width:auto;max-width:100%;}
.npe-pv .npe-k-field input:focus,
.npe-pv .npe-k-field select:focus,
.npe-pv .npe-k-filter__field select:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-glow);}
.npe-pv .npe-k-field.has-error input,
.npe-pv .npe-k-field.has-error select{border-color:var(--crit);}
.npe-pv .npe-k-check input{flex:none;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--sig);}
.npe-pv .npe-k-choice input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.npe-pv .npe-k-choice label{padding:var(--s2) 14px;line-height:1.3;} /* a label that wraps grows the pill; it never touches the border */
.npe-pv .npe-k-search input{flex:1;width:100%;min-width:0;min-height:0;padding:0;border:0;background:none;font:inherit;font-size:var(--t-touch);color:var(--fg0);box-shadow:none;outline:none;}
.npe-pv .npe-k-seg>a{display:inline-flex;align-items:center;min-height:calc(var(--h-ctl) - 6px);padding:0 var(--s3);border-radius:calc(var(--rbtn) - 2px);font-size:var(--t-sm);font-weight:600;color:var(--fg1);text-decoration:none;}
.npe-pv .npe-k-seg>a[aria-current="true"]{background:var(--bg0);color:var(--sig-text);box-shadow:var(--sh-sm);}
.npe-pv .npe-k-form__actions .npe-my-btn{min-width:120px;}
.npe-pv .npe-k-note .npe-my-btn{flex:none;}

@media (max-width:720px){
  .npe-pv{padding:var(--s4) var(--s4) var(--s6);}
  .npe-pv-head h1{font-size:var(--t-rec);}
  .npe-pv .npe-k-seg>a{min-height:var(--h-ctl);}
  .npe-pv .npe-k-choice{flex-direction:column;align-items:stretch;} /* the choices stack at full width, so they are the same size */
  .npe-pv .npe-k-choice.npe-pv-chips{flex-direction:row;align-items:center;} /* one-word chips (days, languages, Yes/No) wrap inline at auto width */
  .npe-pv .npe-k-form__actions .npe-my-btn{flex:1 1 auto;}
  .npe-pv .npe-k-note{flex-direction:column;align-items:stretch;}
}

/* ---------- list: toolbar, cards, chips ---------- */
.npe-pv-toolbar{margin:0 0 var(--s4);}
/* The toolbar is a bordered card: the form keeps the kit's own inner padding (portal-one.css zeroes it for My KCDC's card-less filter bars), so no field or label sits on the card's border. */
.npe-pv-toolbar .npe-k-filter{padding:var(--s3) var(--s4);border-bottom:0;}
.npe-pv-filters{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);}
.npe-pv-clear{font-size:var(--t-sm);font-weight:600;}
.npe-pv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:stretch;}
.npe-pv-card{height:100%;}
/* The photo is out of flow: in flow, a tall photo's own height became the frame's minimum (the card is a flex column), so cards in one row had different photo heights. */
.npe-pv-card__media{position:relative;display:block;flex:none;aspect-ratio:16/10;overflow:hidden;background:var(--bg2);}
.npe-pv-card__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;}
.npe-pv-card__bd{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--s1);min-width:0;padding:var(--s4);}
.npe-pv-card__title{margin:0;font-family:var(--fsans);font-size:var(--t-title);font-weight:700;line-height:1.3;color:var(--fg0);}
.npe-pv-card__title a{color:inherit;text-decoration:none;}
.npe-pv-card__meta{margin:0;font-size:var(--t-sm);color:var(--fg2);}
.npe-pv-card__text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:var(--s1) 0 0;font-size:var(--t-body);color:var(--fg1);}
.npe-pv-card__pills{min-height:24px;margin:var(--s1) 0 0;}
.npe-pv-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0 var(--s4) var(--s3);list-style:none;}
.npe-pv-chip{display:inline-flex;align-items:center;gap:var(--s1);min-height:32px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--rpill);background:var(--bg0);font-size:var(--t-sm);font-weight:600;color:var(--sig-text);text-decoration:none;white-space:nowrap;}
.npe-pv-chip:hover{background:var(--arc0);border-color:var(--sig);}
.npe-pv-chip.is-full{color:var(--fg2);}
.npe-pv-chip.is-mine{background:var(--ok-bg);border-color:transparent;color:var(--ok);}
.npe-pv-chip.is-more{border-style:dashed;color:var(--fg1);}
.npe-pv-chip__note{font-weight:400;}
.npe-pv-card__ft{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:auto;padding:var(--s3) var(--s4);border-top:1px solid var(--line);}
.npe-pv-several{display:inline-flex;align-items:center;min-height:var(--h-ctl);font-size:var(--t-sm);font-weight:600;}
@media (max-width:1080px){
  .npe-pv-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .npe-pv-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
  .npe-pv-filters .npe-k-filter__field{display:flex;flex-direction:column;align-items:stretch;}
  .npe-pv .npe-pv-filters .npe-k-filter__field select{width:100%;}
  /* "Open spots only" takes its own row; a select left alone on a row (When, with Type and Location above) fills it */
  .npe-pv-filters .npe-k-check{grid-column:1 / -1;}
  .npe-pv-filters .npe-k-filter__field:nth-last-child(2):nth-child(odd){grid-column:1 / -1;}
  .npe-pv-cards{grid-template-columns:minmax(0,1fr);gap:var(--s3);}
  .npe-pv-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 var(--s3);padding:var(--s3);}
  .npe-pv-card__media{width:64px;height:64px;aspect-ratio:auto;border-radius:var(--rbtn);overflow:hidden;}
  .npe-pv-card__bd{padding:0;}
  .npe-pv-card__text,.npe-pv-card__pills:not([data-npe-pv-reqs]){display:none;} /* the rule pills (Ages 16+, Own transportation) stay: a phone visitor sees the limits first */
  .npe-pv-chips{grid-column:1 / -1;flex-wrap:wrap;margin:var(--s2) 0 0;padding:0;} /* the chips wrap inside the card: none is cut at the edge (FF1 #12) */
  .npe-pv-chip{min-height:44px;}
  .npe-pv-card__ft{grid-column:1 / -1;margin-top:var(--s3);padding:0;border-top:0;}
  .npe-pv-card__ft .npe-my-btn{flex:1 1 100%;}
}
.npe-pv .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;}
.npe-pv-clear,.npe-pv .npe-k-empty__actions a{display:inline-flex;align-items:center;min-height:var(--h-ctl);}
@media (max-width:720px){
  .npe-pv-toolbar .npe-k-filter{padding:var(--s3);}
  .npe-pv-toolbar .npe-k-search{flex:1 1 100%;}
}

/* ---------- calendar: the kit's month grid (ConsoleKit::calendar); its buttons are skinned for .npe-console only ---------- */
.npe-pv .npe-k-cal__bar .npe-c-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-ctl);padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--rbtn);background:var(--bg0);font-size:var(--t-sm);font-weight:600;color:var(--fg0);text-decoration:none;}
.npe-pv .npe-k-cal__bar .npe-c-btn:hover{background:var(--bg1);}
.npe-pv .npe-k-cal__chip{text-decoration:none;}
@media (max-width:720px){
  .npe-pv .npe-k-cal__agenda .npe-k-cal__chip{display:flex;flex-direction:column;justify-content:center;min-height:var(--h-ctl);}
  /* portal-one.css keeps My KCDC's month grid (a count per day) on a phone and hides the chips. The public
     calendar has no per-day counts: it stays the kit's agenda there, with its chips shown. */
  .npe-pv.npe-my .npe-k-cal.is-month .npe-k-cal__dow,
  .npe-pv.npe-my .npe-k-cal.is-month .npe-k-cal__grid{display:none;}
  .npe-pv.npe-my .npe-k-cal.is-month .npe-k-cal__agenda .npe-k-cal__chip{display:flex;}
}

/* ---------- one opportunity ---------- */
.npe-pv-opp{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4);align-items:start;}
.npe-pv-opp__title{margin:0 0 var(--s3);font-family:var(--fdisp);font-size:var(--t-rec);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--fg0);}
.npe-pv-facts{display:grid;gap:var(--s2);margin:0 0 var(--s4);padding:0;list-style:none;font-size:var(--t-body);color:var(--fg1);}
.npe-pv-facts b{display:block;font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);}
.npe-pv-prose{font-size:var(--t-title);line-height:1.6;color:var(--fg1);}
.npe-pv-prose p{margin:0 0 var(--s3);}
.npe-pv-dates{margin:0;padding:0;list-style:none;}
.npe-pv-dates li{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);min-height:48px;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);}
.npe-pv-dates li:last-child{border-bottom:0;}
.npe-pv-dates .npe-my-pill{margin-left:auto;}
.npe-pv-more{border-top:1px solid var(--line);}
.npe-pv-more>summary{display:flex;align-items:center;min-height:44px;padding:0 var(--s4);font-weight:600;color:var(--sig-text);}
.npe-pv-more[open]>summary{display:none;}
@media (max-width:1080px){
  .npe-pv-opp{grid-template-columns:minmax(0,1fr);}
}
.npe-pv-facts__sub{display:block;font-size:var(--t-sm);color:var(--fg2);}
.npe-pv-facts--notes{margin:0;}
.npe-pv-roles{display:grid;gap:var(--s2);margin:var(--s2) 0 0;padding:0;list-style:none;font-size:var(--t-body);color:var(--fg0);}
.npe-pv-roles li{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);}
.npe-pv-opp__ft{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);}
@media (max-width:720px){
  .npe-pv-opp .npe-k-stack>[data-npe-pv-notes]{order:-1;} /* "Good to know" (the rules) before the long date list on a phone */
  .npe-pv-dates .npe-pv-chip{min-height:44px;}
  .npe-pv-opp__ft .npe-my-btn{flex:1 1 100%;}
}
.npe-pv-opp__media{display:block;aspect-ratio:16/9;background:var(--bg2);}
.npe-pv-opp__media img{display:block;width:100%;height:100%;object-fit:cover;}

/* ---------- register wizard ---------- */
.npe-pv [hidden]{display:none;}
.npe-pv-steps{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0 0 var(--s3);padding:0;list-style:none;counter-reset:npe-pv-step;font-size:var(--t-sm);font-weight:600;color:var(--fg2);}
.npe-pv-steps li{display:flex;align-items:center;gap:var(--s2);counter-increment:npe-pv-step;}
.npe-pv-steps li::before{content:counter(npe-pv-step);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--line2);border-radius:var(--rpill);background:var(--bg0);}
.npe-pv-steps li[aria-current="step"]{color:var(--fg0);}
.npe-pv-steps li[aria-current="step"]::before{border-color:var(--sig);background:var(--sig-fill);color:var(--bg0);}
.npe-pv-lead{margin:0 0 var(--s4);font-size:var(--t-body);color:var(--fg1);}
.npe-pv-pass{display:flex;gap:var(--s2);}
.npe-pv-pass input{flex:1;min-width:0;}
.npe-pv-alt{margin:var(--s4) 0 0;font-size:var(--t-body);text-align:center;}
.npe-pv .npe-k-card__ft .npe-k-form__actions{margin:0;padding-top:0;} /* the footer's own padding is the only space: equal above and below (portal-one.css pads form actions for a card body) */
.npe-pv-captcha{padding-top:0;}
@media (max-width:720px){
  .npe-pv .npe-k-fields{grid-template-columns:minmax(0,1fr);}
  .npe-pv .npe-k-fields .npe-k-field{grid-column:1 / -1;}
}

/* ---------- sign-up, several dates, confirmation ---------- */
.npe-pv-legacy{margin:0;}
/* "Before you sign up": name and requirement left, status right, what to do under them. */
.npe-pv-reqs{display:flex;flex-direction:column;margin:0;}
.npe-pv-reqs li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s1) var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:var(--t-body);color:var(--fg0);}
.npe-pv-reqs li:first-child{padding-top:0;}
.npe-pv-reqs li:last-child{padding-bottom:0;border-bottom:0;}
.npe-pv-reqs__who{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);min-width:0;overflow-wrap:anywhere;}
.npe-pv-reqs__note,.npe-pv-reqs a{grid-column:1 / -1;}
.npe-pv-reqs a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--sig-text);}
.npe-pv .npe-volunteer-calendar{max-width:100%;overflow-x:auto;}
.npe-pv .npe-volunteer-calendar:empty{display:none;}
/* a read-only value under its label (the sign-up's Date) */
.npe-pv-static{margin:0 0 var(--s4);}
.npe-pv.npe-my .npe-pv-static p{margin:0;font-size:var(--t-body);color:var(--fg0);}
.npe-pv .npe-accordion-item{border-bottom:1px solid var(--line);}
.npe-pv .npe-accordion-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;padding:var(--s2) var(--s4);font-size:var(--t-title);font-weight:700;color:var(--fg0);cursor:pointer;}
.npe-pv .npe-accordion-content{padding:0 var(--s4) var(--s3);}
.npe-pv-acc__day{flex:1 1 auto;min-width:0;}
.npe-pv .npe-accordion-header .npe-my-pill{font-weight:600;}
.npe-pv-acc__chev{flex:none;width:20px;height:20px;color:var(--fg2);transition:transform .15s;}
.npe-pv .npe-accordion-header.open .npe-pv-acc__chev{transform:rotate(180deg);}
.npe-pv-confirm{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);}
.npe-pv-confirm h1{margin:0;font-family:var(--fdisp);font-size:var(--t-rec);font-weight:800;letter-spacing:-.02em;color:var(--fg0);}
.npe-pv-confirm .npe-k-form__actions{align-self:stretch;justify-content:flex-start;}
.npe-pv-facts__line{display:block;}
.npe-pv .npe-accordion-item:last-child{border-bottom:0;}
.npe-pv .npe-k-card__ft .npe-k-form__actions .npe-cancel-registration{margin-right:auto;}
.npe-pv-link{display:inline-flex;align-items:center;min-height:var(--h-ctl);font-weight:600;}

/* ---------- theme guard ----------
   The site theme (Divi) pads every heading and paragraph and gives `.entry-content` lists
   bullets, a 1em indent and 26px lines. The lists here are layout, not prose. The reused
   sign-up partials (.npe-pv-legacy) and an opportunity's own description (.npe-pv-prose)
   keep the theme's rules. */
.npe-pv.npe-my h1:not(.npe-pv-legacy *):not(.npe-pv-prose *),
.npe-pv.npe-my h2:not(.npe-pv-legacy *):not(.npe-pv-prose *),
.npe-pv.npe-my h3:not(.npe-pv-legacy *):not(.npe-pv-prose *),
.npe-pv.npe-my p:not(.npe-pv-legacy *):not(.npe-pv-prose *){padding:0;}
.npe-pv.npe-my ul:not(.npe-pv-legacy *):not(.npe-pv-prose *),
.npe-pv.npe-my ol:not(.npe-pv-legacy *):not(.npe-pv-prose *){padding:0;list-style:none;line-height:inherit;}
.npe-pv.npe-my ul.npe-pv-chips:not(.npe-pv-legacy *):not(.npe-pv-prose *){padding:0 var(--s4) var(--s3);}
.npe-pv.npe-my ul.npe-k-cal__events:not(.npe-pv-legacy *):not(.npe-pv-prose *){padding:var(--s3) var(--s4);}
.npe-pv.npe-my h3.npe-k-cal__day:not(.npe-pv-legacy *):not(.npe-pv-prose *){padding:var(--s2) var(--s4);}
@media (max-width:720px){
  .npe-pv.npe-my ul.npe-pv-chips:not(.npe-pv-legacy *):not(.npe-pv-prose *){padding:0;}
}

/* Every card footer is one row, button then "Sign up for several dates" (Final acceptance #13): the link's
   words wrap inside it rather than the link dropping to its own line, so the footers in a row of cards line up. */
@media (min-width:721px){
  .npe-pv-card__ft{flex-wrap:nowrap;}
  .npe-pv-card__ft .npe-my-btn{flex:none;white-space:nowrap;}
  .npe-pv-card__ft .npe-pv-several{flex:0 1 auto;min-width:0;line-height:1.3;}
}