/* ==========================================================
   Aplify – Application Form
   Tokens defined in aplify-tokens.css (scoped to :root)
   ========================================================== */

[x-cloak] { display: none !important; }

.aplify-apply-form {
  font-family: var(--font-family);
  color: var(--fg);
}

.aplify-form-container {
  max-width: 1000px;
  margin: 0 auto;
}

.aplify-form-container h3 {
  margin-bottom: 50px;
  font-size: var(--apply-heading-size, 2rem);
  font-family: var(--font-family);
  color: var(--fg);
}

.aplify-form-container form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--form-gap) * 1.5);
}

/* -----------------------------
   LOADING STATE
--------------------------------*/

.aplify-apply-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  padding: 40px;
  text-align: center;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--fg);
  gap: 16px;
}

.aplify-apply-loading::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid var(--panel-border);
  border-top: 3px solid var(--highlight);
  border-radius: 50%;
  animation: aplify-spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes aplify-spin {
  to { transform: rotate(360deg); }
}

/* -----------------------------
   ERROR STATE
--------------------------------*/

.aplify-apply-error {
  background: color-mix(in srgb, var(--highlight) 10%, white);
  color: var(--highlight);
  padding: 20px;
  border: 1px solid var(--highlight);
  border-radius: var(--radius);
  font-family: var(--font-family);
}

/* -----------------------------
   JOB DETAILS CARD
--------------------------------*/

.aplify-job-details {
  background: var(--input-bg);
  border: var(--panel-border-w) solid var(--panel-border);
  border-radius: 20px;
  box-shadow: var(--panel-shadow);
  padding: 12px 30px 20px 30px;
  margin-bottom: 50px;
  max-width: 600px;
}

.aplify-job-details h3 {
  font-size: var(--apply-heading-size, 1.25rem);
  font-weight: var(--display-weight, 550);
  color: var(--primary);
  font-family: var(--font-family);
}

.aplify-job-details ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    font-size: var(--text-md, 16px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aplify-job-details li {
  list-style: none;
}

.aplify-job-details li strong {
  color: var(--highlight);
  font-weight: var(--weight-strong, 600);
  margin-right: 7px;
}

/* -----------------------------
   FIELD WRAPPER
--------------------------------*/

.aplify-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(var(--form-gap) * 1);
}

.aplify-field-wrapper.is-custom {
  margin-top: 24px;
	margin-bottom: 24px;
}

/* -----------------------------
   LABELS
--------------------------------*/

.aplify-field-wrapper label {
  /* Every label is always shown by default (block). The hide-labels toggle
     below only ever applies to labels carrying .aplify-has-placeholder —
     added in the markup only for field types that have a genuine
     placeholder to fall back on (text, email, tel, date, textarea,
     location). Radio, checkbox, select and file fields have no such
     substitute — hiding "Do you currently work for Priory?" leaves nothing
     but an unlabelled Yes/No, which is the exact problem this fixes. */
  display: block;
  font-weight: var(--label-weight);
    font-size: var(--label-size);
    color: var(--apply-label-color, var(--label-color));
  font-family: var(--font-family);
	line-height: 1.4em;
}

.aplify-field-wrapper label.aplify-has-placeholder {
  display: var(--apply-label-display, block);
}

.aplify-field-wrapper .required {
  color: var(--highlight);
  margin-left: 2px;
}

/* -----------------------------
   INPUTS
--------------------------------*/

.aplify-field-wrapper input[type="text"],
.aplify-field-wrapper input[type="email"],
.aplify-field-wrapper input[type="tel"],
.aplify-field-wrapper textarea,
.aplify-field-wrapper select {
  height: var(--field-h);
  padding: 0 16px;
  border-radius: var(--apply-field-radius, var(--field-radius));
  border: var(--field-border-w, 1px) solid var(--panel-border);
  background: var(--input-bg);
  color: var(--fg);
  font-size: var(--apply-field-size, var(--font-size));
  font-family: var(--font-family);
  box-shadow: var(--control-shadow);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
  width: 100%;
}

/* The select carried the BROWSER's own arrow, which each engine parks at its
   own offset — in Chrome that is hard against the right edge, ignoring the
   16px padding the field asks for. Replaced with a chevron we place ourselves,
   so it sits at the same distance from the edge as the text does from the
   other, and looks identical in every browser.

   --chevron-offset and --chevron-size have existed as settings since before
   this; nothing read them. They are the control for chevron placement across
   the plugin now, here and on the Selectify dropdowns in the search form.

   Padding clears the chevron on both sides of itself, so a long option label
   never runs underneath it. */
.aplify-field-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--chevron-offset, 16px) * 2 + var(--chevron-size, 12px));
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1l4 4 4-4' stroke='%23626875' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--chevron-offset, 16px) center;
  background-size: var(--chevron-size, 12px) auto;
}

.aplify-field-wrapper input::placeholder,
.aplify-field-wrapper textarea::placeholder {
  color: var(--apply-placeholder-color, var(--placeholder-color));
  opacity: var(--apply-placeholder-opacity, var(--placeholder-opacity));
}

.aplify-field-wrapper textarea {
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
  height: auto;
}

.aplify-field-wrapper input:focus,
.aplify-field-wrapper textarea:focus,
.aplify-field-wrapper select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--ring), var(--control-shadow);
}

/* -----------------------------
   FILE UPLOAD
--------------------------------*/

.aplify-file-upload {
  display: block;
}

.aplify-file-upload input[type="file"] {
  display: none;
}

.aplify-file-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100%;
  min-height: 90px;
  background: var(--input-bg);
  color: var(--muted);
  border: var(--field-border-w, 1.5px) dashed var(--panel-border);
  border-radius: var(--apply-field-radius, var(--field-radius));
  padding: 16px 20px;
  font-weight: var(--weight-strong, 600);
  font-family: var(--font-family);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.aplify-file-label:hover {
  border-color: var(--primary);
}

.aplify-file-label .upload-icon {
  font-size: 1.15em;
  line-height: 1;
}

.aplify-file-name {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--apply-help-size, 14px);
  font-family: var(--font-family);
  text-align: center;
}

/* Help text must never be larger than its own label. It was 1rem against a
   0.9rem label, both greyish — the subordinate line bigger than its heading,
   which is what makes a form read as one undifferentiated block rather than a
   stack of groups. (Documented in Helion's README; the same bug was fixed on
   the plugin's own settings page.)
   0.8rem sits it clearly below the label, and weight goes 200 -> 400: at 16px
   in a muted grey, 200 was thin rather than quiet, and thin costs legibility
   from the text least able to afford it. The three levels now differ on size,
   weight AND colour rather than sharing two of three. */
.aplify-help-text {
    display: block;
    color: var(--muted);
    font-size: var(--apply-help-size, 0.8rem);
    margin-bottom: 10px;
    font-family: var(--font-family);
    font-weight: var(--weight-body, 400);
    line-height: 1.4em;
    max-width: 700px;
}

/* -----------------------------
   SUBMIT BUTTON
--------------------------------*/

.aplify-submit-wrapper {
  width: 100%;
  margin-top: 30px;
}

.aplify-submit-btn,
button.aplify-submit-btn,
button[type="submit"].aplify-submit-btn  {
  width: 100%;
  display: block;
  background: var(--highlight);
  color: var(--apply-button-text-color, var(--button-text-color));
  padding: 18px 32px;
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--font-size);
  font-weight: var(--button-weight);
  font-family: var(--font-family);
  box-shadow: var(--button-shadow);
  transition: background .2s, box-shadow .2s, transform .05s;
  cursor: pointer;
}

.aplify-submit-btn,
button.aplify-submit-btn,
button[type="submit"].aplify-submit-btn:hover {
  background: var(--primary-hover);
  box-shadow: var(--button-shadow-hover);
}

.aplify-submit-btn:active {
  transform: translateY(1px);
}

.aplify-submit-btn:disabled {
  background: var(--muted);
  cursor: not-allowed;
  opacity: .7;
  box-shadow: none;
}

/* -----------------------------
   RADIO GROUPS
--------------------------------*/

.aplify-radio-group,
.aplify-checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.aplify-radio-group label,
.aplify-checkbox-group label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-family);
  font-size: var(--apply-choice-size, 0.95rem);
  font-weight: var(--weight-strong, 600);
  color: var(--fg);
  cursor: pointer;
  /* Left padding reserves room for the indicator, which is positioned
     absolutely so it never affects where the text centres — the label
     text is centred across the whole box, independent of the circle,
     rather than sitting immediately next to it as a left-aligned pair. */
  padding: 16px 18px 16px 44px;
  border: var(--field-border-w, 1.5px) solid var(--panel-border);
  border-radius: var(--apply-field-radius, var(--field-radius));
  background: var(--input-bg);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.aplify-radio-group label:hover,
.aplify-checkbox-group label:hover {
  border-color: var(--field-border-hover, var(--primary));
}

/* The checked state styles the whole box, not just the small indicator
   inside it — matching a "selectable card" rather than a classic radio row.
   :has() is well supported everywhere this plugin needs to run (Safari 15.4+,
   all current Chrome/Firefox/Edge); if that ever changes, the indicator's own
   :checked style below still communicates the selection on its own. */
.aplify-radio-group label:has(input:checked),
.aplify-checkbox-group label:has(input:checked) {
  border-color: var(--primary);
  background: #f2f6fb; /* fallback for browsers without color-mix() support */
  background: color-mix(in srgb, var(--primary) 8%, var(--input-bg));
}

.aplify-radio-group input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--panel-border);
  border-radius: 50%;
  background: var(--bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
	margin-top: 0px!important;
}

.aplify-radio-group input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .2s ease;
  background: var(--primary);
}

.aplify-radio-group input[type="radio"]:checked {
  border-color: var(--primary);
  background: var(--bg);
}

.aplify-radio-group input[type="radio"]:checked::before {
  transform: scale(1);
}

.aplify-radio-group input[type="radio"]:hover {
  border-color: var(--primary);
}

@media (max-width: 768px) {
  .aplify-radio-group,
  .aplify-checkbox-group {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------
   CHECKBOX GROUPS
--------------------------------*/

.aplify-checkbox-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--panel-border);
  border-radius: 6px;
  background: var(--bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
	margin-top: 0px!important;
}

.aplify-checkbox-group input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .2s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  background: #fff;
}

.aplify-checkbox-group input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.aplify-checkbox-group input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* -----------------------------
   CONSENT CHECKBOXES
--------------------------------*/

.aplify-consent-checkboxes {
  margin-top: 24px;
  margin-bottom: 8px;
}

.aplify-consent-label {
  display: flex;
  /* flex-start, not center: this text wraps to two lines often enough that
     centring would float the box into the middle of the paragraph. The box is
     aligned to the FIRST LINE instead — see the margin-top calc below. */
  align-items: flex-start;
  gap: 8px;
  /* Both declared rather than inherited because the calc below depends on
     them: the nudge is only correct if we know the line height and the box
     size, and inheriting either makes it drift. */
  line-height: 1.4;
  --consent-box: 18px;
  font-weight: var(--weight-body, 400);
  cursor: pointer;
  padding: 5px 0;
  font-size: var(--apply-choice-size, 18px);
  color: var(--fg);
  font-family: var(--font-family);
}

.aplify-consent-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--consent-box);
  height: var(--consent-box);
  /* Was a flat margin-top:3px, tuned by eye against the original 18px text: at
     that size the line box is ~25px, so 3px happened to centre an 18px square
     on the first line. Shrink the text and the line box shrinks under it, so
     the same 3px pushes the box below text that no longer reaches it — which
     is exactly what happens at 0.8rem.

     Derived instead: half the difference between the first line's height and
     the box. Self-correcting at any text size, and max() stops it going
     negative once the text is smaller than the box itself.

     The box stays 18px deliberately — it is a tap target, and shrinking it
     with the label would put it below a comfortable touch size. */
  margin-top: max(0px, calc((1.4 * var(--apply-choice-size, 18px) - var(--consent-box)) / 2));
  border: 2px solid var(--panel-border);
  border-radius: 6px;
  background: var(--bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
}

.aplify-consent-label input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .2s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  background: #fff;
}

.aplify-consent-label input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.aplify-consent-label input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.aplify-consent-label a {
  color: var(--primary);
  text-decoration: underline;
}

.aplify-consent-label a:hover {
  color: var(--primary-hover);
}

/* -----------------------------
   MESSAGE BOX
--------------------------------*/

.aplify-message {
  padding: 12px 16px;
  border-radius: calc(var(--radius) / 2);
  margin-bottom: 20px;
  font-size: var(--apply-help-size, 15px);
  font-family: var(--font-family);
}

.aplify-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.aplify-message.error {
  background: color-mix(in srgb, var(--highlight) 10%, white);
  color: var(--highlight);
  border: 1px solid var(--highlight);
}

.aplify-apply-limit-reached {
	font-size: var(--text-lg, 18px);
  font-family: var(--font-family);
	color: #FFF;
}

/* -----------------------------
   RESPONSIVE
--------------------------------*/

@media (max-width: 768px) {
  .aplify-apply-form {
    padding: 0px;
  }

  .aplify-form-container {
    padding: 0;
  }

      .aplify-job-details {
        padding: 20px;
        margin-bottom: 30px;
        border-radius: 10px;
    }

  .aplify-field-wrapper input[type="text"],
  .aplify-field-wrapper input[type="email"],
  .aplify-field-wrapper input[type="tel"],
  .aplify-field-wrapper textarea {
    font-size: var(--text-md, 16px); /* Prevent iOS zoom */
  }
	
	.aplify-field-wrapper {
    gap: 10px;
}
	/* These two were hardcoded, overriding the --label-size and --label-weight
	   the base rule reads. A client set the label size, watched it work, and
	   watched it silently revert below 768px with nothing to explain why. Only
	   line-height differs on small screens, which is the one thing that was
	   ever meant to. */
	.aplify-field-wrapper label {
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    color: var(--apply-label-color, var(--label-color));
    font-family: var(--font-family);
    line-height: 1.5em;
}
	.aplify-radio-group label, .aplify-checkbox-group label {
    padding: 10px;
}
	
	.aplify-form-container h3 {
    margin-bottom: 30px;
    font-size: var(--apply-heading-size, 1.5rem);
}
	
	.aplify-job-details h3 {
    margin-top: 0;
}

	.aplify-consent-label {
    font-size: var(--apply-choice-size, 13px);
}

.aplify-submit-wrapper {
    margin-top: 20px;
}
}

/* Follow-up question indentation */
.aplify-follow-up {
  margin-left: 1.5em;
  border-left: 2px solid var(--border, #e0e0e0);
  padding-left: 1em;
}