/* Theme-authored editorial layer for approved Anders job-search pages. */

.anders-design .filled-job-referral {
  margin-block: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--canvas);
  color: var(--navy);
  font-size: 16px;
  line-height: 1.5;
}

.anders-design .filled-job-referral strong {
  display: block;
  margin-bottom: var(--s-1);
}

.anders-design .results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-2);
}

.anders-design .results-heading {
  flex: 1 1 280px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.25;
}

.anders-design .results-head .results-meta {
  flex: 0 0 auto;
  padding-top: 0;
  text-align: right;
}

/* Therapy's "Not all jobs have a setting listed" note sits between the
   heading and the count, or above the empty state when nothing matched.
   With the boxed note in the row, centre the row rather than aligning text
   baselines, which left the box off-centre. */
.anders-design .results-head--note {
  align-items: center;
}

.anders-design .results-head--note .results-heading {
  flex: 0 1 auto;
}

/* A notice, not a link: navy semi-bold in a light tinted box with an info
   icon, so it stands out without looking clickable (link blue is taken). */
.anders-design .results-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 var(--s-2);
  padding: 7px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.anders-design .results-note-icon {
  flex: none;
  margin-top: 1px;
}

.anders-design .results-head .results-note {
  flex: 0 1 auto;
  margin: 0 auto 0 0;
}

.anders-design .landing-sections--anders {
  padding-bottom: var(--s-section);
}

.anders-design .anders-market-stats .stat-figs {
  column-gap: clamp(48px, 5vw, 72px);
}

.anders-design .stat-fig .lbl {
  max-width: 20ch;
}

.anders-design .section-rich-text a,
.anders-design .anders-faq a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.anders-design .blog-card h3 a {
  color: inherit;
  text-decoration: none;
}

.anders-design .blog-card h3 a:hover,
.anders-design .blog-card h3 a:focus-visible,
.anders-design .blog-more:hover,
.anders-design .blog-more:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.anders-design .blog-more {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.anders-design .linkcol-q {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.anders-design .linkcol-q:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

.anders-design .linkcol-list li {
  margin: 0;
}

@media (min-width: 768px) {
  .anders-design .authority-grid {
    grid-template-columns: minmax(0, 1fr) 400px;
  }
}

@media (max-width: 767px) {
  .anders-design .results-heading {
    font-size: 18px;
  }

  /* Phones read the job count in body ink, tucked closer to the list it counts. */
  .anders-design .results-head .results-meta {
    color: var(--ink);
  }

  .anders-design .results-head .results-note {
    flex-basis: 100%;
  }

  .anders-design .results-head + .results {
    padding-top: var(--s-1);
  }

  .anders-design .anders-market-stats .stat-figs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 9vw, 44px);
    row-gap: var(--s-5);
  }

  .anders-design .stat-fig {
    min-width: 0;
  }

  .anders-design .stat-fig .num {
    font-size: clamp(22px, 7vw, 30px);
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .anders-design .anders-market-stats .stat-figs--long {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(36px, 10vw, 44px);
  }
}