/* Loaded alongside site.css in index.html. Anything document-level
   (html/body/box-sizing/focus rings) belongs in site.css, not here. */

/* ==========================================================================
   Continuum Travel Therapy — jobs map (embedded in index.html as an iframe)
   Standalone stylesheet: this document renders in its own browsing context,
   so the brand values are inlined rather than pulled from the token files.
   ========================================================================== */

/* The navy behind the map comes from .openings-hero, which also carries the
   headline — see css/site.css. The country reads as a light landmass on it and
   the teal states carry much further than they did on white. */
#wrap { position: relative; width: 100%; }

svg#map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 975 / 610;
}

/* --- States ------------------------------------------------------------ */

.state {
  fill: #e6eaf0;
  stroke: #ffffff;
  stroke-width: 0.75;
  transition: fill 0.14s ease-out;
}
/* States with openings breathe between two teals. js/map.js gives each one an
   animation-delay ordered west to east, so the highlight travels across the
   country rather than every state flashing at once.

   This replaced the bullseye-and-dart markers. They were a second thing to
   read on every state, and on the navy background the map is legible enough
   that the states can carry the signal themselves. */
.state.has-jobs {
  fill: #00a0a1;
  cursor: pointer;
  animation: state-pulse 3.4s ease-in-out infinite;
}
@keyframes state-pulse {
  0%, 100% { fill: #00a0a1; }
  50%      { fill: #3fd8d9; }
}

/* An animation beats a plain declaration, so hover and active have to drop it
   rather than try to out-specify it. */
.state.has-jobs:hover,
.state.active { animation: none; }
.state.has-jobs:hover { fill: #57dadb; }
.state.active { fill: #8ceaea; }

@media (prefers-reduced-motion: reduce) {
  .state.has-jobs { animation: none; fill: #00bbbc; }
}

/* --- Floating state panel ---------------------------------------------- */

#panel {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 5;
  width: 560px;
  max-width: calc(100% - 16px);
  padding: 18px 22px 20px;
  background: #fff;
  border: 1px solid rgba(27, 42, 67, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 42, 67, 0.06), 0 20px 50px rgba(27, 42, 67, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
              transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
  pointer-events: auto;
}
#panel.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

#panel h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1b2a43;
}
#panel-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

#close {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px;
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#close:hover { color: #1b2a43; }

#back {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 0 10px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}
#back:hover { color: #1b2a43; }
#panel.form-mode #back { display: inline-flex; }

#panel-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
#panel.form-mode #panel-body { display: block; }

.job {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #f4f6f9;
  border: 1px solid rgba(27, 42, 67, 0.08);
  border-left: 4px solid #00bbbc;
  border-radius: 10px;
  transition: background 0.14s ease-out, border-color 0.14s ease-out;
}
.job:hover { background: #fff; border-color: rgba(0, 187, 188, 0.4); border-left-color: #008f90; }
/* The title is a button: it opens the same job popup as the listing cards. */
.job-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #1b2a43;
  text-align: left;
  cursor: pointer;
}
.job-title > span:first-child { flex: 1 1 auto; }
.job-title:hover { color: #008f90; }
.job-title:hover .lcard__chev { border-color: #008f90; transform: rotate(45deg) translate(2px, -2px); }
.job-title .lcard__chev { margin-top: 5px; }
.job-title, .job-title:hover { text-decoration: none; }
.job-meta { font-size: 13px; color: #64748b; }
/* auto, not a fixed gap: pushes the links to the bottom of the job box so they
   line up across the row however many lines each title wraps to — same
   treatment as the .acts row on the listing cards. */
.job-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
}
/* Scoped to .job-links: the job title is now an anchor too (it points at the
   role's own page), and it must keep its heading styling. */
.job-links a { font-size: 13.5px; font-weight: 600; color: #008f90; text-decoration: none; }
.job-links a:hover { text-decoration: underline; }

/* --- Quick apply form -------------------------------------------------- */

.qa-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.qa-form textarea,
.qa-form .qa-submit { grid-column: 1 / -1; }
.qa-form input,
.qa-form select,
.qa-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(27, 42, 67, 0.14);
  border-radius: 8px;
  background: #f4f6f9;
  font-family: inherit;
  font-size: 13.5px;
  color: #1b2a43;
}
.qa-form textarea { resize: vertical; line-height: 1.5; }
.qa-form input:focus,
.qa-form select:focus,
.qa-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: #00bbbc;
  box-shadow: 0 0 0 3px rgba(0, 187, 188, 0.18);
}

.qa-submit {
  justify-self: start;
  margin-top: 4px;
  padding: 12px 22px;
  border: none;
  border-radius: 8px;
  background: #e3b23c;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #1b2a43;
  cursor: pointer;
  transition: background 0.14s ease-out;
}
.qa-submit:hover { background: #ce9f2e; }
.qa-submit:disabled { background: #cbd3df; cursor: not-allowed; }

.qa-ref { margin-top: 2px; font-size: 13px; color: #64748b; }
.qa-done { margin-top: 14px; font-size: 14px; line-height: 1.55; color: #334155; }
.qa-err { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: #b91c1c; }
.qa-err a { color: #b91c1c; font-weight: 600; }

/* Honeypot — off-screen rather than display:none, which bots skip. */
.qa-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.qa-form [data-turnstile]:not([hidden]) { grid-column: 1 / -1; }
.empty { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: #64748b; }

/* --- Filters ----------------------------------------------------------- */

#filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin: 40px 0 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(27, 42, 67, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 42, 67, 0.04), 0 2px 8px rgba(27, 42, 67, 0.05);
}
#filters .fgroup { display: flex; flex-direction: column; gap: 8px; }
#filters .fgroup.grow { flex: 1 1 220px; min-width: 180px; }
#filters label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
#filters input,
#filters select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(27, 42, 67, 0.14);
  border-radius: 8px;
  background: #f4f6f9;
  font-family: inherit;
  font-size: 13.5px;
  color: #1b2a43;
}
#filters select { cursor: pointer; }
#filters input:focus,
#filters select:focus {
  outline: none;
  background: #fff;
  border-color: #00bbbc;
  box-shadow: 0 0 0 3px rgba(0, 187, 188, 0.18);
}

#reset {
  padding: 10px 2px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}
#reset:hover { color: #1b2a43; text-decoration: underline; }

#geo-note { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: #94a3b8; }

/* --- Flat listing ------------------------------------------------------ */

#list-head { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 0; }
#list-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1b2a43;
}
#list-head .count { font-size: 13.5px; color: #64748b; }

#list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.lcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(27, 42, 67, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27, 42, 67, 0.04), 0 2px 8px rgba(27, 42, 67, 0.05);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.18s ease-out;
}
.lcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(27, 42, 67, 0.06), 0 10px 24px rgba(27, 42, 67, 0.10);
}
.lcard .top { display: flex; align-items: center; gap: 8px; }
/* The "Contract" pill was removed — every listing here is a contract role, so
   it carried no information. The discipline badge remains, next to the weekly
   rate, which used to be stuck on the end of the job title. */
.lcard .dept {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lcard h4 {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #1b2a43;
}

/* The pay rate, pulled out of the job title by js/jobs-util.js. Google asks
   for a plain role name in the title and the money in baseSalary, so it is a
   separate element here and separate structured data in the markup. */
.pay {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: #94764a;
  white-space: nowrap;
}

/* --- Expandable description -------------------------------------------- */

/* The heading itself is the disclosure control, so clicking the title opens
   the full posting. Styled to look like plain heading text. */
.lcard__toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lcard__titletext { flex: 1 1 auto; }
.lcard__toggle, .lcard__toggle:hover { text-decoration: none; }
.lcard__toggle:hover .lcard__titletext { color: #008f90; }

/* Points right: this opens a dialog, it is not an inline disclosure. */
.lcard__chev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-right: 2px solid #94a3b8;
  border-top: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.18s ease-out, border-color 0.18s ease-out;
}
.lcard__toggle:hover .lcard__chev {
  border-color: #008f90;
  transform: rotate(45deg) translate(2px, -2px);
}

.lcard__descbody { font-size: 14.5px; line-height: 1.65; color: #475569; }
.lcard__descbody p { margin: 0 0 10px; }
.lcard__descbody p:last-child { margin-bottom: 0; }
.lcard__descbody ul,
.lcard__descbody ol { margin: 0 0 10px; padding-left: 20px; }
.lcard__descbody li { margin-bottom: 4px; }
.lcard__descbody strong,
.lcard__descbody b { color: #1b2a43; }

/* The card's own .acts row follows the expanded panel, so it already reads as
   the actions for the description — no second copy inside. */
.lcard .loc { font-size: 13.5px; color: #64748b; }
.lcard .acts {
  display: flex;
  align-items: center;
  gap: 16px;
  /* auto, not a fixed gap: pushes the actions to the bottom of the card so
     they line up across the row however many lines the title wraps to. */
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 42, 67, 0.08);
}
/* Scoped to .acts: the card title is an anchor now (it points at the job's own
   page) and must not pick up link styling. */
.lcard .acts a { font-size: 13.5px; font-weight: 600; color: #008f90; text-decoration: none; }
.lcard .acts a:hover { text-decoration: underline; }

/* Quick Apply opens the in-page form, so it's a button, styled as a link. */
.quick {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #94764a;
  cursor: pointer;
}
.quick:hover { text-decoration: underline; }

@media (max-width: 560px) {
  #panel { padding: 16px 18px 18px; }
  .qa-form { grid-template-columns: minmax(0, 1fr); }
  #list { grid-template-columns: minmax(0, 1fr); }
  #list-head { flex-direction: column; gap: 4px; }
}