/* Application forms (volunteer, Walkthrough application, evaluations): one look in the site palette.
   Loaded last on those pages; every rule is scoped to body.pu-form so it wins over the older
   volunteering-application.css / apply.css / inline styles without touching other pages.
   The site header/footer are hidden while filling in a form; js/form-shell.js adds a slim bar to bring them back. */

body.pu-form {
    --f-cream: #fffbea;
    --f-butter: #fcf4ad;
    --f-ink: #1f2933;
    --f-soft: #52606d;
    --f-line: #e8e1c8;
    --f-charcoal: #2d3436;
    --f-olive: #6b7a3a;
    --f-olive-dk: #4a6b1d;
    --f-gold: #f4c430;
    --f-red: #b91c1c;
    background: var(--f-cream) !important;
    color: var(--f-ink);
    font-family: var(--pu-font-body, 'Poppins', sans-serif);
    padding-top: 0 !important;
}
body.pu-form::before, body.pu-form::after { display: none !important; }

/* ---------- site chrome: hidden until asked for ---------- */
body.pu-form .pu-banner,
body.pu-form .hedaheader,
body.pu-form .hedaoverlay,
body.pu-form .pu-footer { display: none !important; }
body.pu-form.pu-form--nav .hedaheader { display: block !important; position: fixed !important; top: 60px !important; left: 0; right: 0; z-index: 1001 !important; }
body.pu-form.pu-form--nav .hedaoverlay.hedaactive { display: block !important; }
body.pu-form.pu-form--foot .pu-footer { display: block !important; }

.pf-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1002; height: 60px;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 max(16px, calc((100% - 960px) / 2));
    background: rgba(255, 251, 234, .96); border-bottom: 1px solid var(--f-line);
    backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px);
}
.pf-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1rem; color: var(--f-ink); text-decoration: none; white-space: nowrap; }
.pf-brand img { width: 30px; height: 30px; border-radius: 8px; }
.pf-brand small { font-weight: 500; color: var(--f-soft); font-size: .8rem; }
.pf-actions { display: flex; align-items: center; gap: .5rem; }
.pf-btn {
    display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .95rem;
    border-radius: 999px; border: 1.5px solid var(--f-charcoal); background: transparent; color: var(--f-charcoal);
    font: 600 .85rem var(--pu-font-body, 'Poppins', sans-serif); cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.pf-btn:hover, .pf-btn[aria-expanded="true"] { background: var(--f-charcoal); color: var(--f-butter); }
.pf-btn:focus-visible, .pf-foot-toggle:focus-visible { outline: 3px solid var(--f-gold); outline-offset: 2px; }
@media (max-width: 520px) { .pf-brand small { display: none; } .pf-btn span { display: none; } .pf-btn { width: 38px; padding: 0; justify-content: center; } }

.pf-foot { text-align: center; padding: 1.5rem 16px 2.5rem; }
.pf-foot-toggle { background: none; border: 0; color: var(--f-soft); font: 600 .9rem var(--pu-font-body, 'Poppins', sans-serif); cursor: pointer; padding: .5rem 1rem; border-radius: 999px; }
.pf-foot-toggle:hover { color: var(--f-ink); background: rgba(45, 52, 54, .06); }

/* ---------- page + card ---------- */
body.pu-form .application-container {
    max-width: 880px; margin: 88px auto 0 !important; padding: 0 !important;
    background: #fff; border: 1px solid var(--f-line); border-radius: 24px;
    box-shadow: 0 18px 50px rgba(31, 41, 51, .07); overflow: hidden;
}
body.pu-form .application-container::before, body.pu-form .application-container::after { display: none !important; }
@media (max-width: 640px) { body.pu-form .application-container { margin: 76px 12px 0 !important; border-radius: 18px; } }
body.pu-form form { padding: 1.75rem 2.25rem 2.25rem; }
@media (max-width: 640px) { body.pu-form form { padding: 1.25rem 1.1rem 1.5rem; } }

/* ---------- progress: one row of numbered dots on a line ---------- */
body.pu-form .progress-container {
    position: relative; margin: 0 !important; padding: 1.4rem 2.25rem 1.1rem !important;
    background: var(--f-cream); border-bottom: 1px solid var(--f-line); box-shadow: none !important; border-radius: 0 !important;
}
body.pu-form .progress-bar {
    position: absolute; left: 2.25rem; top: calc(1.4rem + 15px); height: 3px; width: 0; max-width: calc(100% - 4.5rem);
    background: var(--f-olive) !important; border-radius: 3px; z-index: 1; transition: width .35s ease; box-shadow: none !important;
}
body.pu-form .progress-bar::after { display: none !important; }
body.pu-form .progress-steps {
    position: relative; display: flex !important; justify-content: space-between; align-items: flex-start; gap: .25rem; margin: 0 !important;
}
body.pu-form .progress-steps::before {
    content: '' !important; display: block !important; position: absolute; left: 15px; right: 15px; top: 15px; height: 3px;
    background: var(--f-line) !important; border-radius: 3px; z-index: 0; transform: none !important;
}
body.pu-form .progress-step {
    position: relative; z-index: 2; flex: 1 1 0; min-width: 0; display: flex !important; flex-direction: column; align-items: center; gap: .4rem;
    opacity: 1 !important; transform: none !important; background: none !important; box-shadow: none !important;
    width: auto !important; height: auto !important; border: 0 !important; cursor: default; padding: 0 !important;
}
body.pu-form .progress-step:first-child { align-items: flex-start; }
body.pu-form .progress-step:last-child { align-items: flex-end; }
body.pu-form .progress-step > span,
body.pu-form .progress-step .progress-step-icon {
    width: 32px !important; height: 32px !important; margin: 0 !important; border-radius: 50%;
    display: grid !important; place-items: center; flex: none;
    background: #fff !important; border: 2px solid var(--f-line) !important; color: var(--f-soft) !important;
    font: 700 .82rem var(--pu-font-body, 'Poppins', sans-serif); box-shadow: none !important; transform: none !important; transition: background .2s, border-color .2s, color .2s;
}
body.pu-form .progress-step .progress-step-icon i { font-size: .8rem; color: inherit !important; }
body.pu-form .progress-step-label,
body.pu-form .progress-step-text {
    position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
    font: 500 .74rem/1.25 var(--pu-font-body, 'Poppins', sans-serif) !important; color: var(--f-soft) !important;
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    background: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important;
}
body.pu-form .progress-step:first-child .progress-step-label, body.pu-form .progress-step:first-child .progress-step-text { text-align: left; }
body.pu-form .progress-step:last-child .progress-step-label, body.pu-form .progress-step:last-child .progress-step-text { text-align: right; }
body.pu-form .progress-step.completed > span,
body.pu-form .progress-step.completed .progress-step-icon { background: var(--f-olive) !important; border-color: var(--f-olive) !important; color: #fff !important; }
body.pu-form .progress-step.active > span,
body.pu-form .progress-step.active .progress-step-icon { background: var(--f-charcoal) !important; border-color: var(--f-charcoal) !important; color: var(--f-butter) !important; }
body.pu-form .progress-step.active .progress-step-label,
body.pu-form .progress-step.active .progress-step-text { color: var(--f-ink) !important; font-weight: 700 !important; }
/* phones: dots only, the current step keeps its name underneath */
@media (max-width: 640px) {
    body.pu-form .progress-container { padding: 1rem 1.1rem .8rem !important; }
    body.pu-form .progress-bar { left: 1.1rem; top: calc(1rem + 13px); max-width: calc(100% - 2.2rem); }
    body.pu-form .progress-steps::before { top: 13px; left: 13px; right: 13px; }
    body.pu-form .progress-step > span, body.pu-form .progress-step .progress-step-icon { width: 28px !important; height: 28px !important; font-size: .75rem; }
    body.pu-form .progress-step-label, body.pu-form .progress-step-text { display: none !important; }
    body.pu-form .progress-step.active .progress-step-label, body.pu-form .progress-step.active .progress-step-text {
        display: block !important; position: absolute !important; top: 34px; left: 50%; transform: translateX(-50%) !important; overflow: visible; max-width: none;
    }
    body.pu-form .progress-step.active:first-child .progress-step-label, body.pu-form .progress-step.active:first-child .progress-step-text { left: 0; transform: none !important; }
    body.pu-form .progress-step.active:last-child .progress-step-label, body.pu-form .progress-step.active:last-child .progress-step-text { left: auto; right: 0; transform: none !important; }
    body.pu-form .progress-steps { padding-bottom: 1.15rem; }
}

/* draft bar */
body.pu-form .apply-draft, body.pu-form .vol-draft {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    margin: 1.25rem 2.25rem 0 !important; padding: .6rem .6rem .6rem 1rem; background: var(--f-cream); border: 1px solid var(--f-line); border-radius: 14px;
    font-size: .85rem; color: var(--f-soft);
}
@media (max-width: 640px) { body.pu-form .apply-draft, body.pu-form .vol-draft { margin: 1rem 1.1rem 0 !important; } }
body.pu-form .apply-draft .btn, body.pu-form .vol-draft .btn { padding: .4rem .85rem !important; font-size: .82rem !important; min-height: 0; }

/* ---------- steps ---------- */
body.pu-form .step { padding: 0 !important; transform: none !important; opacity: 1 !important; animation: pfIn .25s ease both; }
body.pu-form .step:not(.active) { display: none; }
@keyframes pfIn { from { opacity: 0; } to { opacity: 1; } }
body.pu-form .step-header { text-align: left !important; margin: 0 0 1.5rem !important; padding: 0 !important; }
body.pu-form .step-header::after, body.pu-form .step-header::before { display: none !important; }
body.pu-form .step-header h2 {
    font: 700 clamp(1.4rem, 3.2vw, 1.85rem)/1.2 var(--pu-font-display, 'Poppins', sans-serif) !important;
    color: var(--f-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important;
    margin: 0 0 .35rem !important; border: 0 !important; white-space: normal !important; overflow: visible !important; width: auto !important; animation: none !important;
}
body.pu-form .step-header p { color: var(--f-soft) !important; font-size: .98rem; margin: 0 !important; }

/* no motion on the first page (and no decorative motion anywhere) */
body.pu-form .animate__animated { animation: none !important; opacity: 1 !important; transform: none !important; }
body.pu-form .float-element, body.pu-form .godmode-glow, body.pu-form .typing-animation { animation: none !important; transform: none !important; }
body.pu-form .typing-animation { border-right: 0 !important; width: auto !important; white-space: normal !important; }
body.pu-form .godmode-glow, body.pu-form .gradient-border::before, body.pu-form .gradient-border::after { display: none !important; }
body.pu-form .animate-form-element { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---------- intro (step 0) ---------- */
.pf-intro { display: grid; gap: 1.5rem; }
.pf-intro__lead { font-size: 1.05rem; line-height: 1.7; color: var(--f-ink); margin: 0; }
.pf-intro__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.pf-intro__facts li { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; background: var(--f-cream); border: 1px solid var(--f-line); border-radius: 14px; font-size: .9rem; font-weight: 600; color: var(--f-ink); }
.pf-intro__facts i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--f-butter); color: var(--f-olive-dk); font-size: .95rem; }
@media (max-width: 640px) { .pf-intro__facts { grid-template-columns: 1fr; } }
.pf-intro__go { display: flex; justify-content: flex-start; }
body.pu-form .glass-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; text-align: left; }

/* the old icon trio markup (rendered by scripts): flatten into the palette */
body.pu-form .bg-indigo-100, body.pu-form .bg-green-100, body.pu-form .bg-amber-100 { background: var(--f-butter) !important; }
body.pu-form .text-indigo-600, body.pu-form .text-green-600, body.pu-form .text-amber-600, body.pu-form .text-green-500 { color: var(--f-olive-dk) !important; }
body.pu-form .text-gray-600, body.pu-form .text-gray-500, body.pu-form .text-gray-700 { color: var(--f-soft) !important; }
body.pu-form .text-red-500 { color: var(--f-red) !important; }

/* ---------- fields ---------- */
body.pu-form .input-container { margin-bottom: 1.25rem !important; position: relative; background: none !important; box-shadow: none !important; transform: none !important; }
body.pu-form .input-container:hover { transform: none !important; }
body.pu-form .input-container label, body.pu-form .form-label, body.pu-form .fb-field > label {
    display: block; font: 600 .92rem/1.4 var(--pu-font-body, 'Poppins', sans-serif) !important; color: var(--f-ink) !important; margin: 0 0 .45rem !important;
}
body.pu-form input[type="text"], body.pu-form input[type="email"], body.pu-form input[type="tel"], body.pu-form input[type="url"],
body.pu-form input[type="number"], body.pu-form input[type="date"], body.pu-form input[type="search"], body.pu-form input[type="file"],
body.pu-form select, body.pu-form textarea {
    width: 100%; padding: .8rem 1rem !important; border: 1.5px solid #ddd6bd !important; border-radius: 12px !important;
    background: #fff !important; color: var(--f-ink) !important; font: 400 1rem/1.5 var(--pu-font-body, 'Poppins', sans-serif) !important;
    box-shadow: none !important; transition: border-color .15s, box-shadow .15s; transform: none !important;
}
body.pu-form .input-container .input-icon ~ input, body.pu-form .input-container input:has(+ .input-icon) { padding-right: 2.6rem !important; }
body.pu-form input:hover, body.pu-form select:hover, body.pu-form textarea:hover { border-color: #c9bf98 !important; }
body.pu-form input:focus, body.pu-form select:focus, body.pu-form textarea:focus {
    outline: none !important; border-color: var(--f-olive) !important; box-shadow: 0 0 0 4px rgba(107, 122, 58, .16) !important;
}
body.pu-form input[readonly] { background: #f7f5ec !important; color: var(--f-soft) !important; }
body.pu-form ::placeholder { color: #9aa3ab; }
body.pu-form .input-icon { color: #a39a78 !important; right: 1rem !important; }
body.pu-form .input-container input:focus ~ .input-icon, body.pu-form .input-container textarea:focus + .input-icon { color: var(--f-olive) !important; transform: none !important; }
body.pu-form .hint, body.pu-form .input-container .hint { color: var(--f-soft) !important; font-size: .84rem; }
body.pu-form .validation-error { color: var(--f-red) !important; font-size: .85rem; }
body.pu-form .input-error, body.pu-form input.error, body.pu-form .error input { border-color: var(--f-red) !important; }

/* choice cards (radios / checkboxes) */
body.pu-form .radio-card, body.pu-form .checkbox-card {
    background: #fff !important; border: 1.5px solid #ddd6bd !important; border-radius: 14px !important; box-shadow: none !important; transform: none !important;
    transition: border-color .15s, background .15s;
}
body.pu-form .radio-card::before, body.pu-form .checkbox-card::before, body.pu-form .checkbox-card.selected::after { display: none !important; }
body.pu-form .radio-card:hover, body.pu-form .checkbox-card:hover { border-color: var(--f-olive) !important; transform: none !important; box-shadow: none !important; }
body.pu-form .radio-card.selected, body.pu-form .checkbox-card.selected,
body.pu-form .radio-card:has(input:checked), body.pu-form .checkbox-card:has(input:checked) {
    border-color: var(--f-olive) !important; background: #f6f8ec !important; box-shadow: inset 0 0 0 1px var(--f-olive) !important;
}
body.pu-form .program-icon { background: var(--f-butter) !important; color: var(--f-olive-dk) !important; box-shadow: none !important; transform: none !important; }
body.pu-form .program-title { color: var(--f-ink) !important; }
body.pu-form .program-description { color: var(--f-soft) !important; }
body.pu-form input[type="checkbox"], body.pu-form input[type="radio"] { accent-color: var(--f-olive); }

/* ---------- buttons ---------- */
body.pu-form .btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: .55rem; min-height: 46px;
    padding: .7rem 1.4rem !important; border-radius: 999px !important; border: 1.5px solid var(--f-charcoal) !important;
    font: 600 .95rem var(--pu-font-body, 'Poppins', sans-serif) !important; text-decoration: none; cursor: pointer;
    box-shadow: none !important; transform: none !important; animation: none !important; transition: background .15s, color .15s, opacity .15s;
}
body.pu-form .btn::before, body.pu-form .btn::after { display: none !important; }
body.pu-form .btn-primary, body.pu-form .btn-godmode { background: var(--f-charcoal) !important; color: var(--f-butter) !important; }
body.pu-form .btn-primary:hover, body.pu-form .btn-godmode:hover { background: #1b2022 !important; color: #fff6b8 !important; }
body.pu-form .btn-secondary { background: transparent !important; color: var(--f-charcoal) !important; }
body.pu-form .btn-secondary:hover { background: rgba(45, 52, 54, .07) !important; }
body.pu-form .btn-success { background: #128C7E !important; border-color: #128C7E !important; color: #fff !important; }
body.pu-form .btn-success:hover { background: #0e7368 !important; }
body.pu-form .btn:focus-visible { outline: 3px solid var(--f-gold) !important; outline-offset: 2px; }
body.pu-form .btn:disabled { opacity: .5; cursor: not-allowed; }
body.pu-form .btn-godmode { padding: .85rem 1.8rem !important; font-size: 1rem !important; }
body.pu-form .btn-container {
    display: flex !important; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-top: 2rem !important; padding-top: 1.25rem !important; border-top: 1px solid var(--f-line) !important; background: none !important;
}
body.pu-form .btn-container .btn:only-child { margin-left: auto; }

/* ---------- application extras (apply.css, re-coloured) ---------- */
body.pu-form .apply-gate { border: 1px solid var(--f-line) !important; background: var(--f-cream) !important; margin: 0 !important; max-width: none !important; text-align: left; }
body.pu-form .apply-gate h3 { color: var(--f-ink) !important; }
body.pu-form .apply-gate p { color: var(--f-soft) !important; }
body.pu-form .apply-gsi { justify-content: flex-start !important; }
body.pu-form .apply-who { background: #f6f8ec !important; border: 1.5px solid var(--f-olive) !important; margin: 0 !important; max-width: none !important; justify-content: flex-start !important; }
body.pu-form .apply-who img, body.pu-form .apply-who .apply-av { background: var(--f-olive) !important; }
body.pu-form .apply-prompt { background: var(--f-cream) !important; border-left-color: var(--f-gold) !important; }
body.pu-form .apply-warn { background: #fff7e0 !important; border-color: #e0b54a !important; color: #5c3d00 !important; }
body.pu-form .apply-warn i { color: #b7791f !important; }
body.pu-form .apply-bar i { background: linear-gradient(90deg, var(--f-gold), var(--f-olive)) !important; }
body.pu-form .apply-count .ok { color: var(--f-olive-dk) !important; }
body.pu-form .apply-review { border-color: var(--f-line) !important; }
body.pu-form .apply-review li { border-bottom-color: #f1ecd9 !important; }
body.pu-form .apply-review a { color: var(--f-olive-dk) !important; font-weight: 600; }
body.pu-form .apply-poster { margin: 0 !important; max-width: 300px; box-shadow: 0 12px 30px rgba(31, 41, 51, .14) !important; }
body.pu-form .apply-seats { margin-top: .75rem; }
body.pu-form .eval-stars input:focus-visible + label { outline-color: var(--f-olive) !important; }
.pf-intro__media { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1.5rem; align-items: start; }
@media (max-width: 720px) { .pf-intro__media { grid-template-columns: 1fr; } body.pu-form .pf-intro__media .apply-poster { max-width: 230px; margin: 0 auto !important; } }

/* success screens */
body.pu-form .success-text { color: var(--f-ink) !important; font-weight: 700; }
body.pu-form .success-subtext { color: var(--f-soft) !important; }
body.pu-form .checkmark__circle { stroke: var(--f-olive) !important; }
body.pu-form .checkmark { box-shadow: inset 0 0 0 var(--f-olive) !important; }

@media (prefers-reduced-motion: reduce) { body.pu-form .step { animation: none; } body.pu-form * { transition: none !important; } }

/* selects already show their own arrow: no decorative icon on top of it */
body.pu-form .input-container select ~ .input-icon { display: none !important; }