/* AMCC form system (October 2026). One shared look for every public application and registration form: vendor
   application, account registration/profile, sponsorship, Get Involved (providers, performers, volunteers, event
   assistants) and the contact form. Add class "amcc-form" to a <form>; sections, questions, fields, choices, uploads
   and errors are styled here. Page stylesheets keep only page-specific layout. Restrained AMCC colours, accessible
   contrast, visible keyboard focus, comfortable touch targets. */
:root{--f-ink:#262336;--f-label:#392252;--f-muted:#585466;--f-line:#ddd6e8;--f-input:#aaa0bd;--f-field:#fdfcff;--f-sec-a:#f6f2fb;--f-sec-b:#eef6f5;--f-accent:#5d348b;--f-accent-soft:#f3eefa;--f-focus:#e8b13a;--f-err:#b42318;--f-err-bg:#fff6f5}

/* ---- Section cards: a tinted heading strip, alternating subtly between AMCC purple and teal ---- */
.amcc-form .apply-panel,.amcc-form .pf-step,.amcc-form .form-section,.amcc-form .form-block{background:#fff;border:1px solid var(--f-line);border-radius:16px;padding:0 24px 10px;margin:0 0 24px;box-shadow:0 4px 18px #35234e0a;min-width:0}
.amcc-form .apply-panel>h2:first-child,.amcc-form .pf-step>h2:first-child,.amcc-form .form-block>h2:first-child{margin:0 -24px 20px;padding:16px 24px;background:var(--f-sec-a);border-bottom:1px solid var(--f-line);border-radius:16px 16px 0 0;font-size:1.2rem;line-height:1.3;color:var(--f-label)}
.amcc-form .apply-panel:nth-of-type(even)>h2:first-child,.amcc-form .pf-step:nth-of-type(even)>h2:first-child{background:var(--f-sec-b)}
form.amcc-form .contact-section{background:#fff;border:1px solid var(--f-line);border-radius:16px;padding:0 24px 8px;margin:0 0 24px;box-shadow:0 4px 18px #35234e0a}
form.amcc-form .contact-section>h2:first-child{margin:0 -24px 20px;padding:16px 24px;background:var(--f-sec-a);border-bottom:1px solid var(--f-line);border-radius:16px 16px 0 0;font-size:1.2rem}
form.amcc-form .contact-section:nth-of-type(even)>h2:first-child{background:var(--f-sec-b)}
.amcc-form .form-section>legend{float:left;width:calc(100% + 48px);margin:0 -24px 20px;padding:16px 24px;background:var(--f-sec-a);border-bottom:1px solid var(--f-line);border-radius:16px 16px 0 0;font-size:1.15rem;font-weight:700;color:var(--f-label)}
.amcc-form .form-section>legend+*{clear:both}
.amcc-form h2 .step{display:block;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--f-muted);margin-bottom:3px}
.amcc-form .section-intro{margin-top:-6px}

/* ---- Question boxes: the question (label) is separated from the answer area by a fine rule ---- */
/* Plain "label wrapping a field" questions (account, sponsorship, contact forms) get the same box. :where() keeps the
   specificity low so .choice rows, labels nested inside a .q box and page rules can override it. */
.amcc-form .q,
.amcc-form label:where(:has(>input:not([type=checkbox],[type=radio],[type=hidden],[type=file])),:has(>select),:has(>textarea)){display:block;position:relative;min-width:0;margin:0 0 16px;padding:16px 18px;border:1px solid var(--f-line);border-radius:12px;background:#fff;font-weight:650;color:var(--f-label);line-height:1.4}
.amcc-form .q label:not(.choice):not(.tick-line):not(.tick):not(.q-label),.amcc-form .pf-field label:not(.choice):not(.tick-line):not(.tick):not(.q-label),.amcc-form .pf-hp label{margin:12px 0 0;padding:0;border:0;border-radius:0;background:none}
.amcc-form .q fieldset{border:0;padding:0;margin:0;min-width:0}
.amcc-form .q .q-label,.amcc-form .q legend.q-label,.amcc-form fieldset.q>legend{display:block;float:left;width:100%;margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid #ece7f3;font-weight:700;font-size:1.02rem;color:var(--f-label);line-height:1.4}
.amcc-form .q .q-label+*,.amcc-form fieldset.q>legend+*{clear:both}
.amcc-form .pf-field>.q-label,.amcc-form .pf-field legend.q-label{float:none;margin:0 0 4px;padding:0;border:0;font-size:.95rem}
.amcc-form .q-num{display:inline-block;min-width:1.6em;margin-right:4px;color:var(--f-accent);font-variant-numeric:tabular-nums}
.amcc-form .q-sub{margin-left:26px;border-left:4px solid #d6c8ea;background:#fdfcff}
.amcc-form .q-optional,.amcc-form .label-note{font-weight:400;font-size:.88rem;color:var(--f-muted)}
.amcc-form .req,.amcc-form .required-mark{color:var(--f-err);font-weight:800;margin-left:2px}
.amcc-form .help,.amcc-form .field-hint,.amcc-form .hint,.amcc-form label small,.amcc-form .upload-rules{font-size:.9rem;font-weight:400;color:var(--f-muted);line-height:1.45}
.amcc-form .q .help{margin:2px 0 10px}

/* ---- Answer fields: wide, comfortable, consistent ---- */
.amcc-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
.amcc-form select,.amcc-form textarea{display:block;width:100%;max-width:100%;min-height:50px;margin-top:8px;padding:11px 14px;box-sizing:border-box;font:inherit;font-size:1rem;font-weight:400;line-height:1.4;color:var(--f-ink);background:var(--f-field);border:1.5px solid var(--f-input);border-radius:10px;box-shadow:none;transition:border-color .12s,background .12s}
.amcc-form textarea{min-height:140px;resize:vertical;line-height:1.55}
.amcc-form input:hover:not([type=checkbox]):not([type=radio]),.amcc-form select:hover,.amcc-form textarea:hover{border-color:#7f749a}
.amcc-form input:focus-visible,.amcc-form select:focus-visible,.amcc-form textarea:focus-visible{outline:3px solid var(--f-focus);outline-offset:1px;border-color:var(--f-accent);background:#fff}
.amcc-form select{appearance:none;-webkit-appearance:none;padding-right:44px;background:var(--f-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235d348b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center}
.amcc-form .input-short{max-width:220px!important}
.amcc-form input[readonly],.amcc-form input[data-address-locked]{background:#f4f2f7}

/* ---- Choices: each option is its own bordered row; the chosen one is highlighted (not by colour alone: a tick shows) ---- */
.amcc-form .choice-list{display:grid;gap:8px;margin:4px 0 0}
.amcc-form .choice-list.choice-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.amcc-form .choice,.amcc-form .tick-line,.amcc-form label.tick{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 14px;border:1.5px solid var(--f-line);border-radius:10px;background:var(--f-field);font-weight:450;color:var(--f-ink);cursor:pointer;line-height:1.45}
.amcc-form .choice:hover{border-color:#b9acd0}
.amcc-form .choice:has(input:checked),.amcc-form .tick-line:has(input:checked){border-color:var(--f-accent);background:var(--f-accent-soft)}
.amcc-form .choice input,.amcc-form .tick-line input,.amcc-form label.tick input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--f-accent)}
.amcc-form .choice input:focus-visible{outline:3px solid var(--f-focus);outline-offset:2px}

/* ---- Uploads ---- */
.amcc-form .upload-box{margin-top:6px;padding:14px 16px;border:2px dashed #b9b0cc;border-radius:12px;background:#fdfcff}
.amcc-form .upload-rules{list-style:none;margin:0 0 10px;padding:0}
.amcc-form .upload-rules li{margin:2px 0}
.amcc-form input[type=file]{display:block;width:100%;max-width:100%;margin-top:6px;padding:10px;border:1.5px solid var(--f-input);border-radius:10px;background:#fff;font:inherit;font-size:.95rem}
.amcc-form input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:8px;background:var(--f-accent);color:#fff;font:inherit;font-weight:650;cursor:pointer}
.amcc-form .inline-label{display:block;margin:10px 0 0;font-weight:600;font-size:.95rem;color:var(--f-ink)}

/* ---- Validation: colour, a bar, an icon and the word "Error" — never colour alone ---- */
.amcc-form .q.has-error,.amcc-form label:where(:has(>[aria-invalid=true])){border-color:var(--f-err);border-left:6px solid var(--f-err);background:var(--f-err-bg)}
.amcc-form [aria-invalid=true]:not(fieldset),.amcc-form .q.has-error input:not([type=checkbox]):not([type=radio]),.amcc-form .q.has-error select,.amcc-form .q.has-error textarea,.amcc-form .q.has-error .choice,.amcc-form .q.has-error .upload-box{border-color:var(--f-err)!important}
.amcc-form .q-error,.amcc-form .field-error{display:block;margin:0 0 10px;color:#9b1c1c;font-weight:650;font-size:.95rem}
.amcc-form .q-error::before{content:"\26A0\FE0E  "}
.error-summary{border:4px solid var(--f-err);border-radius:12px;background:#fff;padding:16px 20px;margin:12px 0 20px}
.error-summary:focus{outline:3px solid var(--f-focus);outline-offset:2px}
.error-summary h2{color:#9b1c1c;font-size:1.15rem;margin:0 0 8px}
.error-summary h2::before{content:"\26A0\FE0E  "}
.error-summary ol,.error-summary ul{margin:0;padding-left:22px}
.error-summary li{margin:4px 0}
.error-summary a{color:#9b1c1c;font-weight:650}

/* ---- Layout helpers ---- */
.amcc-form .apply-grid,.amcc-form .form-grid,.amcc-form .contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:start}
/* Rows of short labelled fields (e.g. document number / issued by / expiry): inputs line up even if one label wraps. */
.amcc-form .apply-grid:has(>.inline-label){grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));align-items:end}
.amcc-form .apply-grid>.inline-label input{margin-top:6px}
.amcc-form .form-grid .wide,.amcc-form .contact-fields .wide{grid-column:1/-1}
.amcc-form .apply-actions,.amcc-form .form-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 8px}
.amcc-form button,.amcc-form .button{min-height:48px}

@media(max-width:700px){
 .amcc-form .apply-panel,.amcc-form .pf-step,.amcc-form .form-section,.amcc-form .form-block{padding:0 16px 6px;border-radius:14px}
 .amcc-form .apply-panel>h2:first-child,.amcc-form .pf-step>h2:first-child,.amcc-form .form-block>h2:first-child{margin:0 -16px 16px;padding:14px 16px;border-radius:14px 14px 0 0}
 form.amcc-form .contact-section{padding:0 16px 6px}
 form.amcc-form .contact-section>h2:first-child{margin:0 -16px 16px;padding:14px 16px}
 .amcc-form .form-section>legend{width:calc(100% + 32px);margin:0 -16px 16px;padding:14px 16px}
 .amcc-form .q,.amcc-form label:where(:has(>input:not([type=checkbox],[type=radio],[type=hidden],[type=file])),:has(>select),:has(>textarea)){padding:14px}
 .amcc-form .q label:not(.choice):not(.tick-line):not(.tick):not(.q-label){padding:0}
 .amcc-form .q-sub{margin-left:8px}
 .amcc-form .apply-grid,.amcc-form .form-grid,.amcc-form .contact-fields{grid-template-columns:1fr}
 .amcc-form .apply-actions>*,.amcc-form .form-actions>*{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.amcc-form *{transition:none!important}}