@import url('/css/fonts.css');

:root {
  /* Masis Staffing brand palette — from designreference/globals.css */
  --brand-primary: #26527f;
  --brand-primary-dark: #1d3f63;
  --brand-primary-darker: #163049;
  --brand-accent: #0c4da2;
  --brand-accent-hover: #093d80;
  --brand-text: #33373d;
  --brand-text-muted: #69727d;
  --brand-bg: #f1f1f1;
  --brand-surface: #ffffff;
  --brand-success: #2e9935;
  --brand-border: #e2e8f0;

  --danger: #c62828;
  --danger-bg: #fdecea;
  --warn: #c77700;
  --warn-bg: #fff4e5;

  --radius: 8px;
  --shadow: 0 1px 3px rgba(22, 48, 73, .08), 0 8px 24px rgba(22, 48, 73, .06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Fieldsets group the radio questions for screen readers, but the default groove border and
   min-width:min-content are not wanted. */
fieldset { border: 0; min-width: 0; }
img { max-width: 100%; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  background-color: var(--brand-bg);
  color: var(--brand-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

/* ---------- Layout ---------- */
.site-header {
  background: var(--brand-primary);
  color: #fff;
  padding: 1.25rem 0;
  border-bottom: 4px solid var(--brand-accent);
}
.site-header .inner { display: flex; align-items: center; gap: 1rem; }
.site-header img { width: 46px; height: 46px; border-radius: 6px; background: #fff; padding: 3px; }
.site-header .title { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }
.site-header .subtitle { font-size: .85rem; opacity: .85; font-weight: 500; }

.container { width: min(100% - 2rem, 820px); margin-inline: auto; }
main { padding: 2rem 0 4rem; }

.site-footer {
  border-top: 1px solid var(--brand-border);
  padding: 1.5rem 0;
  color: var(--brand-text-muted);
  font-size: .85rem;
}
.site-footer a { color: var(--brand-accent); }

.card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

/* ---------- Typography ---------- */
h1 { font-size: 1.75rem; font-weight: 800; color: var(--brand-primary-darker); margin-bottom: .5rem; }
h2 { font-size: 1.1rem; font-weight: 700; color: var(--brand-primary); }
.lede { color: var(--brand-text-muted); margin-bottom: 1.5rem; }
a { color: var(--brand-accent); }
a:hover { color: var(--brand-accent-hover); }

/* ---------- Notices ---------- */
.notice { border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.5rem; font-size: .92rem; }
.notice-privacy { background: #eef3f9; border-left: 4px solid var(--brand-primary); }
.notice-error { background: var(--danger-bg); border-left: 4px solid var(--danger); color: #7f1d1d; }
.notice-success { background: #eaf7eb; border-left: 4px solid var(--brand-success); }
.notice-warn { background: var(--warn-bg); border-left: 4px solid var(--warn); }

/* ---------- Form ---------- */
.q { padding: 1.4rem 0; border-bottom: 1px solid var(--brand-border); }
.q:first-of-type { padding-top: 0; }
.q:last-of-type { border-bottom: 0; }

.q legend, .q > label.q-label {
  display: block;
  font-weight: 700;
  color: var(--brand-primary-darker);
  margin-bottom: .15rem;
  font-size: 1rem;
}
.q .hint { display: block; color: var(--brand-text-muted); font-size: .85rem; margin-bottom: .6rem; }
.q .hint em { font-style: normal; opacity: .85; }

.req { color: var(--danger); font-weight: 700; }
.opt { color: var(--brand-text-muted); font-weight: 500; font-size: .82rem; }

select.worksite-select,
input[type='text'], input[type='email'], input[type='tel'], textarea, input[type='file'] {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: .6rem .7rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}
textarea { min-height: 7rem; resize: vertical; }
/* Native select arrow is kept — a custom one would need an inline background-image, which the CSP blocks. */
select.worksite-select { appearance: auto; cursor: pointer; }
input:focus-visible, textarea:focus-visible, button:focus-visible, .choice:focus-within {
  outline: 3px solid rgba(12, 77, 162, .35);
  outline-offset: 1px;
  border-color: var(--brand-accent);
}

.choices { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }
.choices.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.choice {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .5rem .7rem;
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
  transition: border-color .12s, background .12s;
}
.choice:hover { border-color: var(--brand-accent); background: #f7fafd; }
.choice input { margin-top: .28rem; accent-color: var(--brand-accent); flex-shrink: 0; }
.choice span { font-size: .95rem; }

.followup { margin-top: .75rem; padding-left: .9rem; border-left: 3px solid var(--brand-border); }
.followup label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }

/* Secondary field inside a numbered question — e.g. the optional branch selector under Q4. */
.subfield { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--brand-border); }
.subfield > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .15rem; }

.field-error { display: block; color: var(--danger); font-size: .85rem; margin-top: .35rem; font-weight: 600; }
.validation-summary ul { list-style: none; margin-top: .4rem; }
.validation-summary li { margin-bottom: .2rem; font-weight: 600; }

/* The honeypot. Kept out of the layout, out of the tab order, and out of the a11y tree, so only a
   bot that fills every input it can parse will ever put a value in it. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.actions { margin-top: 1.75rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
button.submit {
  font: inherit;
  font-weight: 700;
  background: var(--brand-accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: .75rem 1.6rem;
  cursor: pointer;
  transition: background .12s;
}
button.submit:hover { background: var(--brand-accent-hover); }
button.submit[disabled] { opacity: .6; cursor: progress; }

.file-list { margin-top: .5rem; font-size: .88rem; color: var(--brand-text-muted); }
.file-list li { margin-left: 1.1rem; }

.reference {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-primary-darker);
  background: #eef3f9;
  border: 1px dashed var(--brand-primary);
  border-radius: var(--radius);
  padding: .8rem 1.2rem;
  display: inline-block;
  margin: .5rem 0 1rem;
  letter-spacing: .04em;
}

/* Progressive enhancement: conditional sections start visible so the form is fully usable with
   JavaScript disabled, then script.js takes over the hiding. */
.js-enabled [data-conditional] { display: none; }
.js-enabled [data-conditional].is-shown { display: block; }

@media (max-width: 520px) {
  .card { padding: 1.15rem; }
  h1 { font-size: 1.4rem; }
}

/* Spacing utilities. The CSP forbids inline style attributes, so page-level nudges use these. */
.mt-1 { margin-top: .4rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .9rem; }
.mb-3 { margin-bottom: 1.25rem; }