/* Contact forms, rendered by [milpark_contact_form], [milpark_contact_forms]
   and by the contact router where no Dynamics embed is pasted yet.
   These are the REFERENCE EC rebuilds in Dynamics, so every value here is
   also a row in milpark_contact_form_tokens(), and the render harness checks
   the two agree. Change a value here and the notes panel must change with it.
   Tokens are the kit's brand set, the same ones contact.css and faqs.css use.
   Field text is 16px on purpose: below that, iOS zooms the page on focus. */

.mk-form,.mk-forms{--mk-f-ink:#1C3687;--mk-f-navy:#1A134A;--mk-f-rule:#C7CFE4;--mk-f-soft:#E0E3F4;
  --mk-f-tint:#F4F6FC;--mk-f-body:#394154;--mk-f-muted:#5A6B85;--mk-f-yellow:#F9F106;--mk-f-yellow-hover:#E8E005;
  --mk-f-error:#B3261E;--mk-f-ok:#07B3A3;
  --mk-f-heading-font:var(--e-global-typography-primary-font-family,Inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--mk-f-body)}
.mk-form *,.mk-forms *{box-sizing:border-box}

/* The panel. The listing card's white and radius, on the 1px rule the intro
   panels use rather than the card's 2px brand border, because a form is a
   surface to work in rather than a thing to pick. */
.mk-form{max-width:760px;margin:0;padding:clamp(24px,3vw,40px);border:1px solid var(--mk-f-soft);
  border-radius:20px;background:#fff}

.mk-form-head{margin:0 0 clamp(20px,2.4vw,28px)}
.mk-form-title{margin:0 0 8px;font-family:var(--mk-f-heading-font);font-size:clamp(22px,2.1vw,28px);font-weight:700;
  line-height:1.2;letter-spacing:-.01em;color:var(--mk-f-navy)}
.mk-form-intro{margin:0;font-size:16px;line-height:1.6;color:var(--mk-f-body)}

/* Fields. One column, with name and email sharing a row once there is room. */
.mk-form-fields{display:grid;gap:18px 20px;grid-template-columns:minmax(0,1fr)}
.mk-form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
@media (min-width:600px){
  .mk-form-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-form-field{grid-column:1/-1}
  .mk-form-field--half{grid-column:auto}
}

.mk-form-label{font-size:14px;font-weight:600;line-height:1.4;color:var(--mk-f-navy)}
.mk-form-optional{font-weight:400;color:var(--mk-f-muted)}

/* Scoped under .mk-form so Hello Elementor's reset.css, which styles input,
   select and textarea by element, loses on specificity rather than on order. */
.mk-form .mk-form-control{display:block;width:100%;margin:0;min-height:48px;padding:12px 14px;border:1px solid var(--mk-f-rule);border-radius:8px;
  background:#fff;font-family:inherit;font-size:16px;line-height:1.4;color:var(--mk-f-ink);
  box-shadow:none;appearance:none;-webkit-appearance:none;transition:border-color .12s ease}
.mk-form .mk-form-control::placeholder{color:#8D99B5;opacity:1}
.mk-form .mk-form-control:hover{border-color:#9FAACB}
.mk-form .mk-form-control:focus,
.mk-form .mk-form-control:focus-visible{outline:2px solid var(--mk-f-ink);outline-offset:2px;border-color:var(--mk-f-ink);box-shadow:none}
.mk-form textarea.mk-form-control{min-height:120px;resize:vertical}
.mk-form select.mk-form-control{padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3687' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px}
.mk-form select.mk-form-control:invalid{color:var(--mk-f-muted)}
.mk-form select.mk-form-control option{color:var(--mk-f-ink)}

/* Errors. Border, message and aria-invalid all arrive together from forms.js. */
.mk-form .mk-form-control[aria-invalid="true"]{border-color:var(--mk-f-error)}
.mk-form-error{margin:0;font-size:13px;line-height:1.4;color:var(--mk-f-error)}
.mk-form-error[hidden]{display:none}

/* Actions. The header's yellow pill, sized for a form rather than a nav bar.
   Both buttons are scoped under .mk-form for the same reason the controls are:
   reset.css paints every button pink on hover at two of specificity. */
.mk-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:clamp(22px,2.6vw,30px)}
.mk-form .mk-form-submit,
.mk-form .mk-form-secondary{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 26px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:.01em;
  text-decoration:none;white-space:normal;text-align:center;cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.mk-form .mk-form-submit{background:var(--mk-f-yellow);color:var(--mk-f-navy)}
.mk-form .mk-form-submit:hover,
.mk-form .mk-form-submit:focus{background:var(--mk-f-yellow-hover);color:var(--mk-f-navy)}
.mk-form .mk-form-secondary{background:#fff;border:1px solid var(--mk-f-ink);color:var(--mk-f-ink)}
.mk-form .mk-form-secondary:hover,
.mk-form .mk-form-secondary:focus{background:var(--mk-f-tint);border-color:var(--mk-f-ink);color:var(--mk-f-ink)}
.mk-form .mk-form-submit:focus-visible,
.mk-form .mk-form-secondary:focus-visible{outline:2px solid var(--mk-f-ink);outline-offset:3px;box-shadow:none}

/* The panel a completed submit reveals in place of the fields. */
.mk-form-done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:clamp(20px,2.4vw,28px);border:1px solid var(--mk-f-soft);border-radius:14px;background:var(--mk-f-tint)}
.mk-form-done[hidden]{display:none}
.mk-form-done:focus{outline:none}
.mk-form-done-icon{color:var(--mk-f-ok)}
.mk-form-done-title{margin:0;font-family:var(--mk-f-heading-font);font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.25;color:var(--mk-f-navy)}
.mk-form-done-text{margin:0 0 6px;max-width:56ch;font-size:15px;line-height:1.6;color:var(--mk-f-body)}
.mk-form.is-done .mk-form-body{display:none}

/* The page that shows every form in sequence, for EC and for testing. */
.mk-forms{display:flex;flex-direction:column;gap:clamp(32px,4vw,52px);max-width:760px;margin:0 auto}
.mk-forms-nav ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.mk-forms-nav a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;
  border:1px solid var(--mk-f-soft);border-radius:999px;background:var(--mk-f-tint);
  color:var(--mk-f-ink);font-size:14px;font-weight:700;line-height:1.3;text-decoration:none;
  transition:border-color .12s ease,background-color .12s ease}
.mk-forms-nav a:hover{border-color:var(--mk-f-ink);background:#fff}
.mk-forms-nav a:focus-visible{outline:2px solid var(--mk-f-ink);outline-offset:2px}
.mk-forms-item{scroll-margin-top:96px}
.mk-forms-kicker{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-f-muted)}

.mk-forms-notes{padding:clamp(22px,2.6vw,32px);border:1px dashed var(--mk-f-rule);border-radius:16px;background:var(--mk-f-tint)}
.mk-forms-notes-title{margin:0 0 6px;font-family:var(--mk-f-heading-font);font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.25;color:var(--mk-f-navy)}
.mk-forms-notes-intro{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--mk-f-body)}
.mk-forms-notes-list{display:grid;gap:0;margin:0}
.mk-forms-note{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 20px;padding:12px 0;border-top:1px solid var(--mk-f-soft)}
.mk-forms-note dt{margin:0;font-size:14px;font-weight:700;color:var(--mk-f-navy)}
.mk-forms-note dd{margin:0;font-size:14px;line-height:1.55;color:var(--mk-f-body)}
@media (min-width:600px){
  .mk-forms-note{grid-template-columns:180px minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .mk-form .mk-form-control,.mk-form .mk-form-submit,.mk-form .mk-form-secondary,.mk-forms-nav a{transition:none}
}


/* THE DYNAMICS COURSE LOOKUP'S SUGGESTION LIST (moved here from site-fixes.css
   on 8 Oct 2026; every Dynamics embed goes through
   milpark_contact_form_embed_html(), which loads this file). Microsoft's form draws it
   with jQuery UI's bare theme: a thin grey border, no shadow, the page's own
   background showing through its edges, so over the next field it read as
   part of that field (reviewer, 29 Sept 2026). A floating menu instead:
   white, lifted, above the fields that follow, scrolling past eight rows.
   Scoped to the lookup block so no other jQuery UI widget is touched. */
.lookupFormFieldBlock{position:relative}
.lookupFormFieldBlock .ui-selectmenu-menu,
.lookupFormFieldBlock .ui-front{z-index:60}
.lookupFormFieldBlock .ui-menu{
	box-sizing:border-box;
	min-width:100%;
	max-height:336px;
	overflow-y:auto;
	margin:6px 0 0;
	padding:6px;
	list-style:none;
	background:#fff;
	border:1px solid #C9D0E6;
	border-radius:12px;
	box-shadow:0 18px 40px -16px rgba(26,19,74,.35)
}
.lookupFormFieldBlock .ui-menu .ui-menu-item{margin:0;list-style:none}
.lookupFormFieldBlock .ui-menu .ui-menu-item-wrapper{
	padding:10px 12px;
	border:0;
	border-radius:8px;
	font-size:15px;
	line-height:1.35;
	color:#1A134A;
	background:transparent;
	cursor:pointer
}
.lookupFormFieldBlock .ui-menu .ui-menu-item-wrapper.ui-state-active,
.lookupFormFieldBlock .ui-menu .ui-menu-item-wrapper:hover{
	margin:0;
	border:0;
	background:#EEF1F8;
	color:#1C3687
}