/* ------------------------------------------------------------------
   /apply/ — styled to match the main site.

   index.html carries ~50 KB of generated builder classes whose names
   are an artefact of the builder that produced them. Rather than couple
   this page to those, the handful of values that actually define the
   look were measured off the live design and written out here as tokens.
   Same fonts, same palette, same input and button geometry.
   ------------------------------------------------------------------ */

:root {
  --navy:        #0c1342;   /* the site's theme-color */
  --navy-soft:   #131c56;
  --ink:         #ffffff;
  --muted:       #c1c1ce;   /* input text + resting label */
  --line:        #ffffff;
  --btn-bg:      #ffffff;
  --btn-ink:     #303030;
  --good-bg:     #12351c;
  --good-ink:    #c9f5d5;
  --good-line:   #2f7d4a;
  --bad-bg:      #3a1420;
  --bad-ink:     #ffd2d2;
  --bad-line:    #a13a4a;
  --radius:      4px;
  --head:        'Fjalla One', Impact, sans-serif;
  --body:        Roboto, arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }

.apply-header {
  /* White, matching the main site's header. The logo is a JPEG with a baked-in
     white background, so on navy it would read as a white box. */
  background: #fff;
  padding: 16px 24px;
  text-align: center;
}
.apply-header img { height: 72px; width: auto; display: block; margin: 0 auto; }

.apply-wrap { max-width: 620px; margin: 0 auto; padding: 40px 24px 64px; }

.apply-title {
  font: 400 40px/1.1 var(--head);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 8px;
}
.apply-sub { color: var(--muted); margin: 0 0 32px; }

/* ---- fields -----------------------------------------------------
   The label sits after the input so a sibling selector can float it,
   which is how the main site's contact form behaves. :placeholder-shown
   is used here rather than the value attribute the builder relied on,
   so it needs no JavaScript to stay in sync.                        */
.field { position: relative; margin-bottom: 16px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 16px 8px;
  font: 400 16px/1.4 var(--body);
  outline: none;
}
.field textarea { padding-top: 16px; min-height: 120px; resize: vertical; }
.field select { padding: 22px 16px 6px; appearance: none; }
.field select option { background: var(--navy-soft); color: var(--ink); }

.field input:focus,
.field select:focus,
.field textarea:focus { box-shadow: 0 0 0 1px var(--line) inset; }

.field label {
  position: absolute;
  left: 16px;
  top: 18px;
  color: var(--muted);
  font: 400 16px/1 var(--body);
  transition: .15s;
  pointer-events: none;
}
/* floated: focused, or holding a value */
.field input:focus + label,
.field select:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label { font-size: 12px; top: 8px; color: var(--ink); }

/* Neither a select nor a date input can ever match :placeholder-shown, and
   both always display something, so their labels stay floated. */
.field select + label,
.field input[type="date"] + label { font-size: 12px; top: 8px; color: var(--ink); }
.field input[type="date"] { color-scheme: dark; }

.field .hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.field [aria-invalid="true"] { border-color: #ff8f8f; }

.btn {
  width: 100%;
  min-height: 56px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 0;
  border-radius: var(--radius);
  font: 700 14px/1 var(--body);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 32px;
}
.btn:hover { opacity: .92; }
.btn[disabled] { opacity: .6; cursor: progress; }

.notice {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin: 0 0 24px;
  font-size: 14px;
}
.notice.bad  { background: var(--bad-bg);  color: var(--bad-ink);  border: 1px solid var(--bad-line); }
.notice.good { background: var(--good-bg); color: var(--good-ink); border: 1px solid var(--good-line); }

.apply-ref {
  display: inline-block;
  font: 400 28px/1 var(--head);
  letter-spacing: 2px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius);
  padding: 10px 18px;
  margin: 8px 0 24px;
}
.apply-steps { color: var(--muted); padding-left: 20px; }
.apply-steps li { margin-bottom: 6px; }

.apply-footer {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 520px) {
  .apply-title { font-size: 30px; }
  .apply-wrap  { padding: 28px 18px 48px; }
}