/* ═══════════════════════════════════════
   ROOFING-AND-CONSTRUCTION-CAREERS.CSS - careers page
   Sections: intro, then job openings (job posting beside the application form)
═══════════════════════════════════════ */

/* ── INTRO ── */
/* Navy band with white text, the same as the services overview page. */
.careers-intro {
  background: var(--navy);
  color: var(--white);
  padding: 3.5rem 0;
  text-align: center;
}
.careers-intro .container { max-width: 900px; }
.careers-intro .eyebrow { color: var(--white); }
/* Heading styled after the logo, the same as the other page heroes: big
   block capitals, with "and Construction" in red between two red rules.
   "Come Work With Us At" sits above it. */
.hero-title {
  font-family: var(--font-logo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
.hero-title span { display: block; }
.hero-title-pre {
  color: var(--white);
  font-size: clamp(1.6rem, 3.4vw, 3.1rem);
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 0.5rem;
}
/* White lettering on the navy background with a red drop shadow set just
   off the letters, the same as the light gray heroes. */
.hero-title-main {
  color: var(--white);
  font-size: clamp(2.6rem, 5.6vw, 5.25rem);
  white-space: nowrap;
  text-shadow:
    0 0 1px var(--navy),
    0 0 2px var(--navy),
    2px 2px 0 var(--navy),
    3px 3px 0 var(--navy),
    5px 5px 0 var(--red),
    6px 6px 0 var(--red);
}
.hero-title-sub {
  display: flex !important;
  align-items: center;
  gap: 0.9rem;
  color: var(--red);
  font-size: clamp(1.4rem, 2.7vw, 2.5rem);
  letter-spacing: 0.04em;
  margin-top: 0.75rem;
  white-space: nowrap;
}
.hero-title-sub::before,
.hero-title-sub::after {
  content: "";
  flex: 1;
  height: 5px;
  background: var(--red);
}
.careers-intro .lead { font-size: 1.2rem; }

/* ── JOB OPENINGS ── */
.careers-openings { background: var(--light-gray); }
/* The job posting on the left, the application form on the right. */
.careers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
.job-card,
.apply-card {
  background: var(--white);
  border: var(--border);
  border-radius: 6px;
  padding: 2rem;
}
.job-card { border-left: 6px solid var(--red); }
.job-title,
.apply-title {
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 1rem;
}
.job-title-role { color: var(--red); }
.job-card p,
.apply-card > p { font-size: 1.1rem; line-height: 1.7; }
.job-card h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--red);
  margin: 1.75rem 0 0.75rem;
}
/* Red square bullets, the same as the lists on the service pages. */
.job-list {
  list-style: none;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.job-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
}
.job-list li:last-child { margin-bottom: 0; }
.job-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  background: var(--red);
}

/* ── APPLICATION FORM ── */
.apply-form { margin-top: 1.5rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
.form-field {
  margin: 0 0 1.1rem;
  min-width: 0;
}
.form-field > label,
.form-choice legend {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.form-req { color: var(--red); }
.form-optional { font-weight: 600; color: var(--warm-dark-gray); }
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form select,
.apply-form textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: var(--white);
  border: var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text);
}
.apply-form textarea { resize: vertical; min-height: 7rem; }
.apply-form input[type="file"] {
  width: 100%;
  padding: 0.6rem;
  background: var(--white);
  border: 2px dashed var(--navy);
  border-radius: 4px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.apply-form input[type="file"]::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.55rem 1rem;
  background: var(--navy);
  border: 0;
  border-radius: 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
}
.apply-form input[type="file"]:hover::file-selector-button { background: var(--red); }
.form-hint {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  color: var(--warm-dark-gray);
}
.apply-form .form-hint.is-error { color: var(--red); font-weight: 700; }
.apply-form input:focus-visible,
.apply-form select:focus-visible,
.apply-form textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 1px;
}
/* Fields the visitor tried to send without filling in correctly. */
.apply-form .is-invalid { border-color: var(--red); border-style: solid; }
.form-choice {
  border: 0;
  padding: 0;
}
.form-choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.form-choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--red); }
/* Hidden from people; only bots fill it in. */
/* Turnstile spam check; keeps its space so the button does not jump. */
.form-turnstile { min-height: 65px; }
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.apply-submit { width: 100%; margin-top: 0.4rem; }
.apply-submit:disabled { cursor: wait; }
.form-status {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 4px;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.4;
}
.form-status.is-success { background: var(--navy); color: var(--white); }
.form-status.is-error { background: var(--white); border: 2px solid var(--red); color: var(--red); }

/* ══════════════════════
   TABLET (≤ 1100px)
══════════════════════ */
@media (max-width: 1100px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ══════════════════════
   MOBILE (≤ 860px)
══════════════════════ */
@media (max-width: 860px) {
  .careers-intro { padding: 2.5rem 0; }
  .careers-grid { grid-template-columns: 1fr; }
  .job-card,
  .apply-card { padding: 1.5rem; }
}

/* ══════════════════════
   PHONES (≤ 768px): bigger hero title, matching the home page
══════════════════════ */
@media (max-width: 768px) {
  /* The title scales with the screen so it fills the width. */
  .hero-title-pre { font-size: clamp(1.7rem, 9.4vw, 3.1rem); }
  /* Larger hero text on phones so it reads easily. */
  .careers-intro .eyebrow { font-size: 1.3rem; }
  .careers-intro .lead { font-size: 1.35rem; line-height: 1.6; }
  /* The main title line is allowed to break onto two lines on phones so it
     can be set much larger. The size is chosen so the longest single word in
     any page title ("Installation") still fits the width. */
  .hero-title-main {
    font-size: clamp(2.6rem, 16.5vw, 5.25rem);
    line-height: 0.95;
    white-space: normal;
    text-align: center;
  }
  .hero-title-sub { font-size: clamp(1.7rem, 8.6vw, 2.9rem); }
  .job-card p,
  .apply-card > p { font-size: 1.15rem; }
  .form-field > label,
  .form-choice legend { font-size: 1.05rem; }
}