/*
 * CHANGE LOG
 * File: /var/www/html/prohrhq.com/static/css/jobs_board.css
 * Purpose: Page-specific styles for templates/jobs.html's search form and
 *          heading row (WORK-ORDER "simplify ProHRHQ navigation and unify
 *          the jobs board", Step 2). Reuses site typography/color tokens
 *          (var(--font-sans), var(--color-*), var(--radius)) already
 *          defined by prohrhq_public.css -- does not redefine or override
 *          them, and does not touch static/css/carrier_search.css or
 *          static/css/dynamic_search.css (both explicitly protected).
 *          Card grid styling (.ph-job-card, .ph-jobs-cardgrid) already
 *          lives in prohrhq_public.css and is unchanged/reused here.
 * Used by: templates/jobs.html only.
 * Version History:
 *   2026-08-31 v1.0 - Initial.
 */

.ph-jobs-heading-row {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem;
}
.ph-jobs-heading-row h1 { margin: 0; }
.ph-jobs-heading-row .ph-context-links {
  display: inline; padding: 0; border: none; background: none;
  font-size: 0.95rem; color: var(--color-link); text-decoration: underline;
}

.ph-jobs-search-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem;
  margin: 1rem 0 0.3rem;
}
.ph-jobs-search-form label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  color: var(--color-text-mute); flex: 1 1 200px;
}
.ph-jobs-search-form input[type="search"],
.ph-jobs-search-form select {
  font-family: var(--font-sans); font-size: 1.05rem;
  padding: 0.65rem 0.85rem; border: 1px solid var(--color-rule);
  border-radius: var(--radius); background: var(--color-bg); color: var(--color-text);
}
.ph-jobs-search-form button {
  font-family: var(--font-sans); font-weight: 600; font-size: 1rem;
  padding: 0.65rem 1.3rem; border: none; border-radius: var(--radius);
  background: var(--color-accent); color: #fff; cursor: pointer;
}
.ph-jobs-reset {
  font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-link);
  text-decoration: underline; align-self: center;
}

.ph-context-note { font-size: 0.85rem; color: var(--color-text-mute); margin: 0.4rem 0 1rem; }

@media (max-width: 600px) {
  .ph-jobs-search-form { flex-direction: column; align-items: stretch; }
}