/*
 * Rough theme. System fonts, single column, Wikipedia-blue links.
 * No box-shadows. No border-radius > 3px. No webfonts. No icons.
 */

:root {
  --ink: #222;
  --muted: #666;
  --soft: #888;
  --softer: #999;
  --rule: #ddd;
  --row-rule: #eee;
  --link: #0645ad;
  --accent: #b23a1f;
  --note: #fffbcc;
  --note-border: #d6c44b;
  --note-crumb: #806c1e;
  --tag-bg: #f1f1f1;
}

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
}

body {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

::selection { background: var(--note); color: var(--ink); }
::-moz-selection { background: var(--note); color: var(--ink); }

.page {
  max-width: 760px;
  margin: 20px auto;
  padding: 0 14px;
}

h1.masthead {
  font-size: 20px;
  margin: 0 0 8px;
  font-weight: 700;
  text-transform: lowercase;
  color: var(--ink);
  line-height: 1.2;
}
h1.masthead a { color: inherit; text-decoration: none; }

h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: lowercase;
  margin: 18px 0 8px;
  color: var(--ink);
}

h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: lowercase;
  margin: 0 0 4px;
  color: var(--ink);
}

p { margin: 0 0 10px; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 18px 0;
}

ul, ol { margin: 0 0 10px; padding-left: 22px; }

.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--soft);
  margin: 18px 0 6px;
}

.muted { color: var(--muted); }
.soft  { color: var(--soft); }

.nav-inline {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 18px;
}
.nav-inline a { margin-right: 12px; }

/* Listings — the workhorse. */
ul.jobs {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.jobs li {
  padding: 10px 0;
  border-top: 1px solid var(--row-rule);
}
ul.jobs li:last-child { border-bottom: 1px solid var(--row-rule); }
ul.jobs li a {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}
ul.jobs li a:hover { text-decoration: underline; }

.date {
  display: block;
  color: var(--soft);
  font-size: 12px;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.date:empty { display: none; }

.tag {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  color: #555;
  background: var(--tag-bg);
  padding: 1px 6px;
  border-radius: 2px;
}

/* "load more" — prominent, centered */
.load-more-wrap {
  text-align: center;
  margin: 20px 0 8px;
}
button.load-more {
  display: inline-block;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 9px 22px;
  cursor: pointer;
}
button.load-more:hover { background: var(--note); border-color: var(--note-border); }
button.load-more:disabled { opacity: 0.55; cursor: default; }

/* Filters — mobile-first: each field stacks full-width (label above control),
   reflowing to a row on wider screens. */
.filters {
  font-size: 14px;
  margin: 8px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}
.filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  flex: 1 1 100%;
}
.filters input,
.filters select,
.filters textarea {
  font-size: 15px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.filters button[type=submit] {
  font: inherit;
  font-size: 15px;
  padding: 9px 22px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  flex: 1 1 100%;
}
.filters button[type=submit]:hover {
  background: var(--note);
  border-color: var(--note-border);
}

/* On wider screens, lay the fields out in a row. */
@media (min-width: 600px) {
  .filters label { flex: 1 1 auto; }
  .filters button[type=submit] { flex: 0 0 auto; }
}

.meta {
  font-size: 12px;
  color: var(--soft);
  margin: 6px 0 10px;
}
.meta a, .meta button {
  color: var(--link);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.meta button { text-decoration: underline; }

/* Yellow sticky note (active filters, side-notes). */
.note-panel {
  padding: 12px 14px;
  background: var(--note);
  border: 1px solid var(--note-border);
  margin: 0 0 18px;
}
.note-panel .crumb {
  font-size: 11px;
  color: var(--note-crumb);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}
.note-panel a { color: var(--link); }

/* Definition lists for job/company facts. */
dl.facts {
  margin: 8px 0 14px;
  font-size: 14px;
}
dl.facts dt {
  display: inline;
  color: var(--muted);
  margin-right: 4px;
}
dl.facts dd {
  display: inline;
  margin: 0 14px 0 0;
  color: var(--ink);
}
dl.facts dd::after {
  content: "";
  display: block;
  height: 4px;
}

/* Primary call-to-action — flat solid block, no shadow, no icon. */
a.cta {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-transform: lowercase;
  padding: 8px 18px;
  border: 1px solid var(--ink);
  border-radius: 2px;
}
a.cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* ---- Job detail page ---- */
/* Compact single-line meta (company · location · sector) under the title. */
.job-meta {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 18px;
}
.job-meta > * + *::before {
  content: "·";
  color: var(--soft);
  margin: 0 8px;
}
.job-meta a { color: var(--link); }

/* Prominent apply action, surfaced right under the meta so the next step is obvious. */
.apply-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 22px;
}
.apply-note { font-size: 12px; color: var(--soft); }

.job-body { margin: 0 0 22px; }
.job-body p { white-space: pre-wrap; margin: 0; }

/* Condensed legal note, de-emphasized below the listing. */
.fine-print {
  font-size: 12px;
  color: var(--softer);
  border-top: 1px solid var(--row-rule);
  padding-top: 12px;
  margin: 0;
  max-width: 62ch;
}

/* On phones, make the apply CTA a full-width, easy target. */
@media (max-width: 560px) {
  .apply-bar { gap: 8px; }
  .apply-bar .cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 18px;
  }
  .apply-note { width: 100%; }
}

/* Forms (contact page). Native styling, just a bit of layout glue. */
form.stack { margin: 14px 0; }
form.stack .field { margin-bottom: 12px; }
form.stack label {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--muted);
}
form.stack input[type=text],
form.stack input[type=email],
form.stack input[type=search],
form.stack textarea {
  font-size: 14px;
  padding: 4px 6px;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  font-family: inherit;
}
form.stack textarea { min-height: 120px; resize: vertical; }
form.stack button { font: inherit; padding: 4px 10px; }

.flash {
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 14px;
  border: 1px solid var(--rule);
}
.flash.ok { background: var(--note); border-color: var(--note-border); }
.flash.err { background: #fff1f0; border-color: #e0b4ad; color: #7a2a1d; }

/* Footer. */
footer.page-footer {
  margin: 30px 0 60px;
  font-size: 12px;
  color: var(--softer);
}
footer.page-footer a { color: var(--link); margin-right: 8px; }

/* Breadcrumbs above detail pages. */
.crumbs {
  font-size: 12px;
  color: var(--soft);
  margin: 0 0 10px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.crumbs li::after { content: "·"; color: var(--soft); margin-left: 6px; }
.crumbs li:last-child::after { content: ""; }

/* ============================================================
 * Leaflet map overrides — flat markers, no shadows, system font.
 * Leaflet sets inline styles on its own marker/popup containers,
 * so the !important declarations are required.
 * ============================================================ */

.leaflet-container {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 13px !important;
  background: #fff !important;
}

.custom-city-marker,
.custom-cluster-icon {
  background: transparent !important;
  border: 0 !important;
}

.leaflet-marker-icon .city-marker,
.cluster-marker {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  padding: 2px 5px !important;
  text-align: center !important;
  font-family: -apple-system, system-ui, sans-serif !important;
  transition: none !important;
  cursor: pointer !important;
  min-width: 50px !important;
  max-width: 90px !important;
}

.leaflet-marker-icon .city-marker:hover,
.cluster-marker:hover {
  background: var(--note) !important;
  border-color: var(--note-border) !important;
  transform: none !important;
}

.leaflet-marker-icon .marker-content,
.cluster-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.leaflet-marker-icon .company-count,
.cluster-count {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.leaflet-marker-icon .city-name,
.cluster-label {
  font-weight: 400 !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-transform: lowercase !important;
}

.leaflet-marker-icon .job-count,
.cluster-jobs {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--soft) !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
}

.cluster-small,
.cluster-medium,
.cluster-large {
  border-radius: 2px !important;
  width: auto !important;
  height: auto !important;
  min-width: 50px !important;
}

/* Override default marker-cluster spinner halos. */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large,
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: none !important;
}

/* Popups — flat panel, no shadow, no rounded corners. */
.leaflet-popup-content-wrapper {
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: 1px solid var(--rule) !important;
  padding: 8px 10px !important;
}
.leaflet-popup-content {
  margin: 0 !important;
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.leaflet-popup-tip-container,
.leaflet-popup-tip { display: none !important; }

.view-all-btn {
  background: none !important;
  color: var(--link) !important;
  border: 0 !important;
  padding: 4px 0 0 !important;
  font: inherit !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  text-align: left !important;
  width: auto !important;
}
.view-all-btn:hover { text-decoration: underline; }