/* Shared header geometry and navigation for every primary public page. */
:root {
  --nrj-public-header-height: 68px;
  --nrj-public-header-padding: 34px;
  --nrj-public-header-column: 190px;
  --nrj-public-header-logo-height: 44px;
  --nrj-public-header-logo-max-width: 200px;
  --nrj-public-header-gap: 24px;
  --nrj-public-nav-gap: clamp(16px, 2.2vw, 30px);
  --nrj-public-nav-font-size: 13px;
  --nrj-public-nav-min-height: 34px;
  --nrj-public-nav-padding: 7px 10px;
}

:where(.employer-site-header, .trust-header) {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  background: rgba(244, 245, 246, .96);
  backdrop-filter: blur(18px);
}

:where(.employer-header-inner, .trust-header-inner) {
  width: 100%;
  max-width: none;
  min-height: var(--nrj-public-header-height);
  padding-inline: var(--nrj-public-header-padding);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(var(--nrj-public-header-column), 1fr) auto minmax(var(--nrj-public-header-column), 1fr);
  align-items: center;
  gap: var(--nrj-public-header-gap);
}

:where(.employer-brand, .trust-brand) {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  flex: 0 0 auto;
}

:where(.employer-brand, .trust-brand) img {
  display: block;
  width: auto;
  height: var(--nrj-public-header-logo-height);
  max-width: var(--nrj-public-header-logo-max-width);
  object-fit: contain;
}

:where(.employer-desktop-nav, .trust-nav) {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: var(--nrj-public-nav-gap);
  margin: 0;
  text-align: center;
}

:where(.employer-desktop-nav, .trust-nav, .employer-header-actions, .trust-header-actions) {
  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
}

:where(.employer-desktop-nav, .trust-nav) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nrj-public-nav-min-height);
  padding: var(--nrj-public-nav-padding);
  border: 0;
  border-radius: 999px;
  color: #30343a;
  font-size: var(--nrj-public-nav-font-size);
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

:where(.employer-desktop-nav, .trust-nav) a:hover,
:where(.employer-desktop-nav, .trust-nav) a:focus-visible { color: #0a7f8a; }

:where(.employer-desktop-nav, .trust-nav) a[aria-current="page"] {
  color: #075f68;
  background: #e3f5f6;
}

:where(.employer-header-actions, .trust-header-actions) {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The main app renders the same public header without an inner wrapper. */
.topbar {
  height: var(--nrj-public-header-height) !important;
  min-height: var(--nrj-public-header-height);
  display: grid !important;
  grid-template-columns: minmax(var(--nrj-public-header-column), 1fr) auto minmax(var(--nrj-public-header-column), 1fr) !important;
  align-items: center !important;
  column-gap: var(--nrj-public-header-gap) !important;
  padding: 0 var(--nrj-public-header-padding) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
  background: rgba(244, 245, 246, .96) !important;
  backdrop-filter: blur(18px);
}

.topbar .brand-logo-link {
  grid-column: 1 !important;
  justify-self: start !important;
  min-width: var(--nrj-public-header-column) !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

.topbar .brand-logo-img {
  width: auto !important;
  height: var(--nrj-public-header-logo-height) !important;
  max-width: var(--nrj-public-header-logo-max-width) !important;
  object-fit: contain !important;
}

.topbar .nav-links {
  grid-column: 2 !important;
  justify-self: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  gap: var(--nrj-public-nav-gap) !important;
}

.topbar .nav-link {
  min-height: var(--nrj-public-nav-min-height);
  padding: var(--nrj-public-nav-padding) !important;
  border: 0;
  border-radius: 999px;
  color: #30343a;
  font-size: var(--nrj-public-nav-font-size) !important;
  font-weight: 850;
  line-height: 1;
}

.topbar .nav-link:hover,
.topbar .nav-link:focus-visible { color: #0a7f8a; }

.topbar .nav-link.active {
  color: #075f68;
  background: #e3f5f6;
}

.topbar .top-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  min-width: var(--nrj-public-header-column) !important;
  margin-left: 0 !important;
}

.nrj-settings-header-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px !important;
  height: 42px !important;
  padding: 0;
  border: 1px solid rgba(34, 211, 238, .44) !important;
  border-radius: 12px !important;
  background: rgba(31, 31, 31, .92) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.nrj-mobile-menu-button {
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(7, 95, 104, .34);
  border-radius: 8px;
  background: #fff;
  color: #182126;
  font: 800 22px/1 var(--font-sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  cursor: pointer;
}

.nrj-mobile-menu-button:hover,
.nrj-mobile-menu-button:focus-visible,
.nrj-mobile-menu-button[aria-expanded="true"] {
  border-color: #087d88;
  background: #e3f5f6;
  color: #075f68;
  outline: none;
}

.nrj-settings-header-button svg {
  display: block;
  width: 19px;
  height: 19px;
}

.nrj-settings-header-button:hover,
.nrj-settings-header-button:focus-visible,
body.nrj-settings-open .nrj-settings-header-button {
  border-color: rgba(34, 211, 238, .68) !important;
  background: rgba(35, 35, 35, .98) !important;
  color: #fff !important;
  box-shadow: none !important;
}

@media (min-width: 981px) {
  .topbar { height: calc(var(--nrj-public-header-height) + 1px) !important; }
}

.business-account-menu > summary,
.employer-header-login,
.trust-account-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(35, 41, 45, .42);
  border-radius: 7px;
  color: #23292d;
  background: #fff;
  cursor: pointer;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  list-style: none;
  white-space: nowrap;
}

.business-account-menu > summary::-webkit-details-marker,
.employer-header-login::-webkit-details-marker,
.trust-account-menu > summary::-webkit-details-marker { display: none; }

.business-account-menu > summary:hover,
.business-account-menu > summary:focus-visible,
.business-account-menu[open] > summary,
.employer-header-login:hover,
.employer-header-login:focus-visible,
.employer-account-menu[open] > .employer-header-login,
.trust-account-menu > summary:hover,
.trust-account-menu > summary:focus-visible,
.trust-account-menu[open] > summary {
  color: #087d88;
  border-color: #087d88;
  background: #fff;
}

.public-account-menu {
  position: relative;
}

.public-account-menu > .public-account-menu-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% + 22px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(520px, calc(100vw - 24px));
  min-width: 0;
  padding: 12px;
  color: #f7fbff;
  background: #10191b;
  border: 1px solid rgba(34, 211, 238, .32);
  border-radius: 7px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

.public-account-menu-column {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.public-account-menu-personal {
  padding-left: 12px;
  border-left: 1px solid rgba(34, 211, 238, .24);
}

.public-account-menu > .public-account-menu-panel strong {
  padding: 7px 9px 4px;
  color: #b8c6d1;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.public-account-menu > .public-account-menu-panel :is(button, a) {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px;
  color: #f7fbff;
  background: transparent;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
}

.public-account-menu > .public-account-menu-panel :is(button, a):hover,
.public-account-menu > .public-account-menu-panel :is(button, a):focus-visible {
  color: #22d3ee;
  background: #1b2c2f;
  outline: none;
}

.public-account-menu > .public-account-menu-panel [hidden] {
  display: none;
}

.public-account-menu > .public-account-menu-panel :is(.business-account-signout, .public-account-signout) {
  grid-column: 1 / -1;
  padding-top: 13px;
  margin-top: 5px;
  border-top: 1px solid rgba(34, 211, 238, .24);
  border-radius: 0 0 5px 5px;
}

@media (max-width: 1500px) {
  :where(.employer-header-inner, .trust-header-inner) { padding-inline: 22px; }
  .topbar { padding-inline: 22px !important; }
}

@media (min-width: 981px) and (max-width: 1500px) {
  .topbar {
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "nav nav";
    gap: 4px 18px;
    padding-block: 9px !important;
  }

  .topbar .brand-logo-link { grid-area: brand !important; }
  .topbar .top-actions { grid-area: actions !important; }
  .topbar .nav-links {
    grid-area: nav !important;
    width: 100% !important;
    justify-self: stretch !important;
    flex-wrap: wrap;
    gap: 3px 10px !important;
  }
}

@media (min-width: 981px) and (max-width: 1750px) {
  body[data-user-role="recruiting_organization"] .topbar {
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand actions"
      "nav nav";
    gap: 4px 18px;
    padding-block: 9px !important;
  }

  body[data-user-role="recruiting_organization"] .topbar .brand-logo-link {
    grid-area: brand !important;
  }

  body[data-user-role="recruiting_organization"] .topbar .top-actions {
    grid-area: actions !important;
  }

  body[data-user-role="recruiting_organization"] .topbar .nav-links {
    grid-area: nav !important;
    width: 100% !important;
    justify-self: stretch !important;
    flex-wrap: wrap;
    gap: 3px 10px !important;
  }

  body[data-user-role="recruiting_organization"] .topbar .nav-link {
    padding: 6px 7px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 701px) and (max-width: 1500px) {
  :where(.employer-header-inner, .trust-header-inner) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    gap: 4px 18px;
    padding-block: 10px 12px;
  }

  :where(.employer-brand, .trust-brand) { grid-area: brand; }
  :where(.employer-header-actions, .trust-header-actions) { grid-area: actions; }
  :where(.employer-desktop-nav, .trust-nav) {
    grid-area: nav;
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
}

@media (max-width: 1080px) {
  :where(.employer-desktop-nav, .trust-nav) { gap: 16px; }
  :where(.employer-desktop-nav, .trust-nav) a { font-size: 12px; }
  .topbar .nav-links { gap: 16px !important; }
  .topbar .nav-link { font-size: 12px !important; }
}

@media (max-width: 980px) {
  .topbar {
    display: flex !important;
    padding-inline: 16px !important;
  }
  .topbar .brand-logo-link { min-width: 0 !important; margin-right: auto !important; }
  .topbar .nav-links { display: none !important; }
  .topbar .top-actions { min-width: 0 !important; margin-left: auto !important; }
}

@media (max-width: 700px) {
  .nrj-mobile-nav-ready :where(.employer-header-inner, .trust-header-inner) {
    position: relative;
    grid-template-areas: "brand actions";
  }

  .nrj-mobile-menu-button {
    display: inline-flex;
  }

  :where(.top-actions, .employer-header-actions, .trust-header-actions) {
    gap: 8px !important;
  }

  .topbar.nrj-mobile-nav-ready .nav-links,
  .nrj-mobile-nav-ready :where(.employer-desktop-nav, .trust-nav) {
    position: absolute;
    z-index: 95;
    top: 100%;
    right: auto;
    left: 12px;
    display: none !important;
    width: calc(100% - 24px) !important;
    max-height: calc(100dvh - 80px);
    margin: 0 !important;
    padding: 10px !important;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 4px !important;
    overflow: auto;
    border: 1px solid rgba(7, 95, 104, .28);
    border-radius: 0 0 8px 8px;
    background: #f4f5f6;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .2);
  }

  .nrj-mobile-nav-ready :where(.employer-desktop-nav, .trust-nav) {
    left: 0;
    width: 100% !important;
  }

  .topbar.nrj-mobile-nav-open .nav-links,
  .nrj-mobile-nav-open :where(.employer-desktop-nav, .trust-nav) {
    display: grid !important;
  }

  .topbar.nrj-mobile-nav-ready .nav-link,
  .nrj-mobile-nav-ready :where(.employer-desktop-nav, .trust-nav) a {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    justify-content: flex-start;
    border-radius: 4px;
    font-size: 14px !important;
    line-height: 1.25;
    text-align: left;
  }

  .topbar.nrj-mobile-nav-ready .nav-link.active,
  .nrj-mobile-nav-ready :where(.employer-desktop-nav, .trust-nav) a[aria-current="page"] {
    background: #e3f5f6;
  }

  :where(.employer-header-inner, .trust-header-inner) {
    width: min(100% - 24px, 1280px);
    min-height: 62px;
    padding: 10px 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    gap: 10px 12px;
  }

  :where(.employer-brand, .trust-brand) { grid-area: brand; }
  :where(.employer-desktop-nav, .trust-nav) {
    grid-area: nav;
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    gap: 22px;
    padding: 2px 0 4px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  :where(.employer-header-actions, .trust-header-actions) { grid-area: actions; }
  :where(.employer-brand, .trust-brand) img { height: 38px; max-width: 166px; }
  :where(.business-account-menu > summary, .employer-header-login, .trust-account-menu > summary) { min-height: 36px; padding-inline: 10px; }
  .topbar .brand-logo-img { height: 38px !important; max-width: 166px !important; }

  .public-account-menu > .public-account-menu-panel {
    position: fixed;
    top: 76px;
    right: 12px;
    left: 12px;
    grid-template-columns: 1fr;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 88px);
    overflow: auto;
  }

  .public-account-menu-personal {
    padding-top: 8px;
    padding-left: 0;
    border-top: 1px solid rgba(34, 211, 238, .24);
    border-left: 0;
  }
}

@media (max-width: 420px) {
  :where(.employer-header-inner, .trust-header-inner) { gap: 8px; }
  :where(.employer-brand, .trust-brand) img { width: 112px; height: auto; max-width: 112px; }
  :where(.employer-desktop-nav, .trust-nav) a { font-size: 12px; }
  .topbar .brand-logo-img { width: 112px !important; height: auto !important; max-width: 112px !important; }
  .nrj-mobile-menu-button,
  .nrj-settings-header-button {
    flex-basis: 36px;
    width: 36px !important;
    height: 36px !important;
  }
  :where(.business-account-menu > summary, .employer-header-login, .trust-account-menu > summary) {
    min-height: 36px;
    padding-inline: 8px;
  }
}

@media (max-width: 340px) {
  .topbar {
    padding-inline: 10px !important;
  }

  :where(.employer-header-inner, .trust-header-inner) {
    width: calc(100% - 20px);
  }

  :where(.employer-brand, .trust-brand) img,
  .topbar .brand-logo-img {
    width: 84px !important;
    max-width: 84px !important;
  }

  :where(.top-actions, .employer-header-actions, .trust-header-actions) {
    gap: 6px !important;
  }

  :where(.business-account-menu > summary, .employer-header-login, .trust-account-menu > summary) {
    padding-inline: 6px;
    font-size: 14px !important;
  }
}