/* ============================================================
   COMPANY DIRECTORY AND PROFILE
   Loaded only on the NRH Companies plugin's two routes.
   Replaces the plugin's inline <style>, which hardcoded 14
   colours already in _tokens.css and used #22c55e as a button
   fill with white text (1.9:1, fails WCAG AA).
   ============================================================ */

/* ---- directory hero ------------------------------------------ */
.nrh-co-hero {
  padding: 8px 0 26px;
  text-align: center;
}
.nrh-co-hero h1 {
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
.nrh-co-hero > p {
  max-width: 56ch;
  margin: 10px auto 0;
  font-size: 16.5px;
  color: var(--nrh-ink-muted);
}

.nrh-co-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 46px;
  justify-content: center;
  margin-top: 22px;
}
.nrh-co-stat { text-align: center; }
.nrh-co-stat-num {
  display: block;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--nrh-primary);
}
.nrh-co-stat-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--nrh-ink-soft);
}

/* A real GET form, so a filtered directory has a URL. */
.nrh-co-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  max-width: 540px;
  margin: 24px auto 0;
}
.nrh-co-search input[type="search"] {
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid var(--nrh-line);
  border-radius: var(--nrh-radius-pill);
  font-family: inherit;
  font-size: 16px;
  color: var(--nrh-ink-body);
  background: var(--nrh-surface);
}
.nrh-co-search input[type="search"]:focus {
  border-color: var(--nrh-primary);
  outline: 2px solid rgba(11, 61, 145, .18);
  outline-offset: 0;
}
.nrh-co-search .nrh-btn { border-radius: var(--nrh-radius-pill); padding: 13px 24px; }

.nrh-co-result {
  margin: 0 0 16px;
  font-size: 15.5px;
  color: var(--nrh-ink-muted);
}
.nrh-co-result a { margin-left: 8px; font-weight: 600; }

/* ---- directory grid ------------------------------------------ */
.nrh-co-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 14px;
  padding-bottom: 44px;
}
.nrh-co-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 18px 20px;
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: var(--nrh-radius-lg);
  text-align: center;
  text-decoration: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.nrh-co-card:hover {
  border-color: #c3d4ee;
  box-shadow: 0 14px 30px -20px rgba(11, 61, 145, .4);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ---- the logo tile -------------------------------------------
   One class for both states. With an uploaded logo it is a light
   contain-fitted box, because a brand mark on navy loses its own
   colours; with initials the theme's navy tile takes over via
   .nrh-job-logo, which the template adds only in that case.
   -------------------------------------------------------------- */
/* The tile itself is defined once in job-single.css. Company pages only
   set its size; everything else is shared, so the two can never drift. */

.nrh-co-card-name {
  margin-top: 10px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--nrh-ink);
}
.nrh-co-card:hover .nrh-co-card-name { color: var(--nrh-secondary); }
.nrh-co-card-tagline {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--nrh-ink-soft);
}
/* a company with no tagline still needs the gap */
.nrh-co-card-name:last-of-type { margin-bottom: 12px; }
/* auto pushes the badge to the card floor so a wrapped two-line employer
   name cannot knock it out of line with its neighbours. The 12px minimum
   gap comes from the name/tagline below, not from here, because auto and a
   length cannot be combined in one margin. */
.nrh-co-card-badge {
  margin-top: auto;
  padding: 5px 13px;
  background: var(--nrh-info-bg);
  border-radius: var(--nrh-radius-pill);
  color: var(--nrh-primary);
  font-size: 13px;
  font-weight: 700;
}

/* ---- profile header ------------------------------------------ */
.nrh-co-profile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--nrh-line);
}
.nrh-co-profile-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.nrh-co-profile-info { min-width: 0; }
.nrh-co-profile h1 {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.25;
}
.nrh-co-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #15803d;
  color: #fff;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 6px;
}
.nrh-co-tagline {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--nrh-ink-muted);
  line-height: 1.4;
}
.nrh-co-profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.nrh-co-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--nrh-ink-soft);
}
.nrh-co-chip a {
  color: var(--nrh-secondary);
  text-decoration: none;
}
.nrh-co-chip a:hover { text-decoration: underline; }

/* Right side: job count + CTA */
.nrh-co-profile-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nrh-co-job-count {
  text-align: center;
  padding: 12px 22px;
  background: var(--nrh-info-bg);
  border-radius: var(--nrh-radius-lg);
  min-width: 100px;
}
.nrh-co-job-count-num {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--nrh-primary);
}
.nrh-co-job-count-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nrh-ink-soft);
  margin-top: 2px;
}
.nrh-btn--sm {
  padding: 9px 18px;
  font-size: 13.5px;
}

/* ---- about + jobs -------------------------------------------- */
.nrh-co-about {
  margin-top: 0;
  margin-bottom: 8px;
  padding: 14px;
}
.nrh-co-about h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}
.nrh-co-about p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nrh-ink-body);
  margin: 0 0 6px;
}
.nrh-co-about p:last-child { margin-bottom: 0; }
.nrh-co-jobs { margin-top: 12px; }
.nrh-co-jobs .nrh-more-head h2 { font-size: 18px; font-weight: 800; }

/* ---- sidebar cards ------------------------------------------- */
.nrh-co-details-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nrh-ink-soft);
  margin: 0 0 10px;
}
.nrh-co-details-card { padding: 14px; }
.nrh-co-follow-text {
  font-size: 13px;
  color: var(--nrh-ink-muted);
  margin: 0 0 10px;
  line-height: 1.45;
}

/* ---- detail list --------------------------------------------- */
.nrh-co-dl { margin: 0; }
.nrh-co-dl dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nrh-ink-faint);
  margin-top: 10px;
}
.nrh-co-dl dt:first-child { margin-top: 0; }
.nrh-co-dl dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--nrh-ink-body);
  word-break: break-word;
  line-height: 1.4;
}
.nrh-co-share { width: 100%; justify-content: center; margin-top: 12px; }

.nrh-co-dl dd a {
  color: var(--nrh-secondary);
  text-decoration: none;
  font-size: 13.5px;
}
.nrh-co-dl dd a:hover { text-decoration: underline; }

/* The notice is a one-line flex row on a job page. At 290px in a sidebar
   that row collapses to a 4-line heading beside a sliver of text, so here
   it stacks. */
.nrh-sidebar .nrh-safety {
  flex-direction: column;
  gap: 5px;
  margin-bottom: 0;
  font-size: 12.5px;
}
.nrh-sidebar .nrh-safety > span:first-child { display: none; }

/* On a company profile every card belongs to the same employer, so the
   repeated company line is noise. */
.nrh-co-jobs .nrh-listing-company { display: none; }

/* Facet list in sidebar */
.nrh-facet { padding: 14px; }
.nrh-facet-list { margin: 0; padding: 0; list-style: none; }
.nrh-facet-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--nrh-line);
  transition: color .12s;
}
.nrh-facet-link:last-child { border-bottom: 0; }
.nrh-facet-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nrh-ink);
}
.nrh-facet-link:hover .nrh-facet-name { color: var(--nrh-secondary); }
.nrh-facet-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--nrh-primary);
  background: var(--nrh-info-bg);
  padding: 2px 8px;
  border-radius: 99px;
}

.nrh-co-all {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--nrh-secondary);
}

/* ---- narrow --------------------------------------------------- */
@media (max-width: 760px) {
  .nrh-co-hero { padding-bottom: 20px; }
  .nrh-co-stats { gap: 12px 30px; }
  .nrh-co-stat-num { font-size: 23px; }
  .nrh-co-search { grid-template-columns: minmax(0, 1fr); }
  .nrh-co-search .nrh-btn { justify-content: center; }
  .nrh-co-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .nrh-co-card { padding: 20px 13px 16px; }

  /* Stack profile header on mobile: logo + info, then count + CTA */
  .nrh-co-profile {
    flex-direction: column;
    gap: 16px;
  }
  .nrh-co-profile-left { gap: 12px; }
  .nrh-co-profile-left .nrh-job-logo { --nrh-logo-size: 56px; }
  .nrh-co-profile-right {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .nrh-co-job-count {
    padding: 8px 16px;
    min-width: auto;
  }
  .nrh-co-job-count-num { font-size: 24px; }
}

/* Verified tick beside the employer name in the directory. Inline with
   the name rather than a separate row, so a two-line name and a verified
   one keep the same card height. */
.nrh-co-card-tick {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--nrh-apply-ink);
}