/* ------------------------------------------------------------------
   HireGate HR Forms — layout only.
   Inputs, labels, buttons, focus rings and error colours come from the
   child theme (theme.css). This file arranges them: a two-column grid
   that collapses at 768px, full-width rows for long fields, a checkbox
   grid for skills, and the honeypot. Every token is a --hg-* variable.
   ------------------------------------------------------------------ */

.hg-form{max-inline-size:var(--hg-content-width);margin-inline:auto}

.hg-form__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--hg-space-6) var(--hg-space-6);
}
.hg-form__field--full{grid-column:1 / -1}
@media (max-width:768px){
  .hg-form__grid{grid-template-columns:minmax(0,1fr);gap:var(--hg-space-4)}
}

.hg-form__field label,
.hg-form__fieldset legend{
  display:block;
  font-family:var(--hg-font-body);
  font-size:var(--hg-small);
  font-weight:600;
  color:var(--hg-head);
  margin-block-end:6px;
}
.hg-form__req{color:var(--hg-error);font-weight:700;margin-inline-start:2px}
.hg-form__opt{color:var(--hg-muted);font-weight:400;margin-inline-start:6px}

.hg-form__hint{font-size:var(--hg-small);line-height:var(--hg-small-lh);margin:6px 0 0}

/* Errors: text plus colour, never colour alone (theme adds the "!"). */
.hg-form__field.has-error input,
.hg-form__field.has-error select,
.hg-form__field.has-error textarea{border-color:var(--hg-error)}
.hg-form__field .hg-field-error{margin:6px 0 0}

.hg-form__banner{
  margin-block-end:var(--hg-space-6);
  padding:var(--hg-space-3) var(--hg-space-4);
  border:1px solid var(--hg-error);
  border-radius:var(--hg-radius-input);
  background:#FBEDEB;
  font-size:var(--hg-body);
}

/* Select: the theme styles it, this just gives it a caret. */
.hg-form select{
  appearance:none;-webkit-appearance:none;
  padding-inline-end:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231F2630' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

/* Skills — a checkbox grid, each row a 44px touch target. */
.hg-form__fieldset{border:0;padding:0;margin:0;min-inline-size:0}
.hg-form__checks{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--hg-space-1) var(--hg-space-4);
}
.hg-form__field .hg-form__check{
  display:flex;align-items:center;gap:10px;
  min-block-size:var(--hg-touch-min);
  margin:0;
  font-size:var(--hg-small);font-weight:500;color:var(--hg-ink);
  line-height:1.3;
  cursor:pointer;
}
.hg-form__check input[type=checkbox]{
  inline-size:20px;block-size:20px;min-block-size:0;padding:0;margin:0;flex:0 0 auto;
  accent-color:var(--hg-blue-600);
  border-radius:var(--hg-radius-chip);
}

/* Textareas keep the reading rhythm. */
.hg-form textarea{resize:vertical;min-block-size:140px}

.hg-form__consent{margin-block:var(--hg-space-6) var(--hg-space-4);font-size:var(--hg-small);line-height:var(--hg-small-lh)}
.hg-form__consent a{color:var(--hg-blue-600);font-weight:600}
.hg-form .hg-cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--hg-space-4)}
.hg-form__reply{font-size:var(--hg-small)}

/* Honeypot: off-screen, not display:none, so it is still "there" for bots. */
.hg-form__hp{
  position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

/* Apply form: file input and the role it is tied to. Layout only —
   colour, radius and type come from the child theme's tokens. */
.hg-form__for{margin:0 0 var(--hg-space-6,24px);padding:var(--hg-space-4,16px);
  background:var(--hg-blue-50,#E7ECFB);border-radius:var(--hg-radius-card,8px)}
.hg-form--apply input[type="file"]{display:block;width:100%;min-height:48px;padding:11px 12px;
  border:1px solid var(--hg-border,#E5E2DC);border-radius:var(--hg-radius-input,6px);
  background:#fff;font:inherit;color:inherit}
.hg-form--apply input[type="file"]::file-selector-button{margin-inline-end:12px;padding:8px 14px;
  border:1px solid var(--hg-border,#E5E2DC);border-radius:var(--hg-radius-btn,6px);
  background:var(--hg-surface,#F5F4F1);font:inherit;cursor:pointer}
.hg-form--apply input[type="file"]:focus-visible{outline:2px solid var(--hg-blue-600,#1C4EEB);outline-offset:2px}
.hg-form__field.has-error input[type="file"]{border-color:var(--hg-error,#B42318)}
.hg-form--booking input[type="date"],.hg-form--booking input[type="time"]{min-height:48px}

/* Partner form: the checkbox grid is long, so it gets columns on wide
   screens. Colour, radius and type still come from the child theme. */
.hg-form--partner .hg-form__checks{display:grid;grid-template-columns:1fr;gap:var(--hg-space-3,12px)}
@media (min-width:640px){.hg-form--partner .hg-form__checks{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.hg-form--partner .hg-form__checks{grid-template-columns:1fr 1fr 1fr}}