/* ============================================================
   HOMEPAGE
   Loaded on the front page only.
   ============================================================ */

/* ---- hero ---------------------------------------------------- */
.nrh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(140deg, var(--nrh-primary) 0%, var(--nrh-secondary) 62%, #0a6ec4 100%);
  color: #fff;
  padding: 46px 0 52px;
}

/* ---- optional hero photograph -------------------------------------
   The photo is a decorative layer, never an <img>, so the gradient is
   painted first and the headline is readable before the image lands.
   The layer is display:none below 760px, which means the file is never
   fetched on a phone: the gradient-only hero is what mobile gets.
   ------------------------------------------------------------------- */
.nrh-hero--photo { padding: 60px 0 66px; }

.nrh-hero--photo > .nrh-wrap { position: relative; z-index: 1; }

.nrh-hero--photo::before,
.nrh-hero--photo::after { content: ""; position: absolute; }

/* ---- phone: the photo is a feathered band across the top ----
   A full-bleed background behind the copy would put white text over the
   bright window light. Instead the band occupies space no text uses, and
   its lower edge dissolves into the navy, so the two read as one surface.
   Source is a 12 KB crop, not the wide desktop file. */
.nrh-hero--photo { padding-top: 198px; }
.nrh-hero--photo::before {
  inset: 0 0 auto 0;
  height: 222px;
  background-image: var(--nrh-hero-image-sm, var(--nrh-hero-image));
  background-size: cover;
  background-position: 68% 12%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 92%);
  z-index: -2;
}
/* darken the band just enough that the navbar above it stays legible */
.nrh-hero--photo::after {
  inset: 0 0 auto 0;
  height: 222px;
  background: linear-gradient(to bottom,
    rgba(11, 61, 145, .58) 0%,
    rgba(11, 61, 145, .30) 34%,
    rgba(11, 61, 145, .52) 72%,
    rgba(11, 61, 145, .86) 100%);
  z-index: -1;
}

.nrh-hero-title,
.nrh-hero-sub,
.nrh-hero-search,
.nrh-hero-tags { position: relative; }

@media (min-width: 760px) {
  .nrh-hero--photo { padding-top: 60px; }
  .nrh-hero--photo::before {
    inset: 0 0 0 auto;
    width: 58%;
    height: auto;
    background-image: var(--nrh-hero-image);
    background-size: cover;
    background-position: 58% 22%;
    /* feather the left edge so the photo dissolves into the navy
       instead of stopping at a visible vertical seam */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
    mask-image: linear-gradient(to right, transparent 0%, #000 34%);
    z-index: -2;
  }
  /* left-to-right scrim: solid navy under the copy, clear over her face */
  .nrh-hero--photo::after {
    inset: 0;
    height: auto;
    background:
      linear-gradient(95deg,
        var(--nrh-primary) 0%,
        rgba(11, 61, 145, .985) 32%,
        rgba(11, 61, 145, .88) 44%,
        rgba(11, 61, 145, .45) 58%,
        rgba(11, 61, 145, .18) 72%,
        rgba(11, 61, 145, .38) 100%);
    z-index: -1;
  }
  /* Only the prose is held back from the photo. The search card and the
     filter row run the full column: they are the reason people came, and
     a solid white card over the lower photo reads as deliberate. */
  .nrh-hero--photo .nrh-hero-title,
  .nrh-hero--photo .nrh-hero-sub { max-width: 560px; }
  .nrh-hero--photo .nrh-hero-title { max-width: 17ch; }
}

@media (min-width: 1180px) {
  .nrh-hero--photo { padding: 72px 0 78px; }
  .nrh-hero--photo::before { width: 56%; }
}
.nrh-hero-title {
  color: #fff;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 20ch;
  margin: 0;
}
.nrh-hero-sub {
  font-size: 17.5px;
  color: rgba(255,255,255,.93);
  max-width: 56ch;
  margin: 12px 0 22px;
}
.nrh-hero-sub strong { color: #fff; }

.nrh-hero-form { margin-top: 26px; }

.nrh-hero-search {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 9px;
  padding: 11px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px -20px rgba(3, 20, 51, .55);
}
/* no category taxonomy on the site: fall back to three columns */
.nrh-hero-search--slim { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto; }
.nrh-hero-search input[type="search"],
.nrh-hero-search select {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--nrh-line);
  border-radius: 9px;
  font-family: inherit;
  font-size: 16px;
  color: var(--nrh-ink-body);
  background: #fff;
}
.nrh-hero-search .nrh-btn { padding: 13px 24px; font-size: 16px; }

.nrh-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 15px;
}
.nrh-hero-tags-label {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
}
.nrh-hero-tag {
  padding: 5px 13px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--nrh-radius-pill);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.nrh-hero-tag:hover { background: rgba(255,255,255,.24); color: #fff; text-decoration: none; }

/* ---- job type filter row -------------------------------------
   Same controls as the WPJM filter bar (keywords, region, category,
   type) but wearing the theme instead of the plugin's default blue
   checkboxes. Real checkboxes underneath, so keyboard and screen
   readers get the native behaviour.
   -------------------------------------------------------------- */
.nrh-hero-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 13px 0 0;
  padding: 0;
  border: 0;
}
.nrh-hero-type { display: inline-flex; cursor: pointer; }
.nrh-hero-type input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nrh-hero-type span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--nrh-radius-pill);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: background .14s ease, border-color .14s ease;
}
.nrh-hero-type span::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 4px;
  background: transparent;
}
.nrh-hero-type:hover span { background: rgba(255,255,255,.2); }
.nrh-hero-type input:focus-visible ~ span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.nrh-hero-type input:checked ~ span {
  background: var(--nrh-apply-ink);
  border-color: var(--nrh-apply-on-dark);
}
.nrh-hero-type input:checked ~ span::before {
  border-color: #fff;
  background-color: #fff;
}
/* the tick, drawn with two borders instead of an SVG data-URI: nothing for
   a minifier or a CDN to re-encode, and it inherits the chip colour */
.nrh-hero-type span::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid var(--nrh-apply-ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-62%) rotate(45deg);
  opacity: 0;
}
.nrh-hero-type input:checked ~ span::after { opacity: 1; }

/* ---- blocks --------------------------------------------------- */
.nrh-home-block { margin-top: 40px; }
.nrh-home-block:first-child { margin-top: 36px; }
.nrh-home-block .nrh-more-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }

/* ---- categories ----------------------------------------------- */
.nrh-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--nrh-gap);
}
.nrh-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nrh-gap-sm);
  padding: 15px 17px;
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: 11px;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.nrh-cat:hover { border-color: #c3d4ee; transform: translateY(-2px); text-decoration: none; }
.nrh-cat-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--nrh-ink);
}
.nrh-cat-count {
  flex-shrink: 0;
  padding: 3px 10px;
  background: var(--nrh-info-bg);
  border-radius: var(--nrh-radius-pill);
  color: var(--nrh-primary);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- companies ------------------------------------------------- */
.nrh-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.nrh-company {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 10px;
  background: var(--nrh-surface);
  border: 1px solid var(--nrh-line);
  border-radius: 13px;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.nrh-company:hover { border-color: #c3d4ee; transform: translateY(-2px); text-decoration: none; }
.nrh-company-logo { --nrh-logo-size: 56px; }
.nrh-company-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--nrh-ink);
  text-align: center;
  line-height: 1.3;
}
.nrh-company-count { font-size: 13.5px; font-weight: 700; color: var(--nrh-secondary); }

/* ---- whatsapp band --------------------------------------------- */
.nrh-wa {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 28px 30px;
  background: linear-gradient(135deg, var(--nrh-apply-ink) 0%, var(--nrh-apply) 100%);
  border-radius: var(--nrh-radius-lg);
  color: #fff;
}
.nrh-wa-body { min-width: 0; }
.nrh-wa h2 { color: #fff; font-size: 23px; font-weight: 800; margin: 0; }
.nrh-wa p {
  margin: 7px 0 0;
  font-size: 16.5px;
  color: rgba(255,255,255,.93);
  max-width: 48ch;
}
.nrh-wa .nrh-btn { font-size: 16px; padding: 13px 22px; color: var(--nrh-apply-ink); }

@media (max-width: 1080px) {
  .nrh-hero-search,
  .nrh-hero-search--slim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nrh-hero-search input[type="search"] { grid-column: 1 / -1; }
  .nrh-hero-search .nrh-btn { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 760px) {
  .nrh-hero { padding: 34px 0 40px; }
  .nrh-hero-search,
  .nrh-hero-search--slim { grid-template-columns: minmax(0, 1fr); }
  .nrh-hero-search input[type="search"],
  .nrh-hero-search .nrh-btn { grid-column: auto; }
  /* The job-type chips already do this job, and two stacked rows of pills
     push the first listing below a second scroll. */
  .nrh-hero-tags { display: none; }
  .nrh-hero-types { gap: 7px; }
  .nrh-hero-type span { font-size: 13px; padding: 6px 12px 6px 10px; }
  .nrh-hero-search .nrh-btn { justify-content: center; }
  .nrh-home-block { margin-top: 32px; }
  .nrh-home-block .nrh-more-head h2 { font-size: 21px; }
  .nrh-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}