@import url("https://use.typekit.net/gqz1uom.css");

/* ==========================================================================
   OGCS Global — Career Portal theme  (Bullhorn Career Portal / novo-elements)
   Target:   jobs.ogcsglobal.com   →   deploy AS   static/custom.css
   Goal:     align the Bullhorn portal with https://www.ogcsglobal.com/ so it
             reads as the same site, standalone and embedded on /embed-test-page.

   HOW IT LOADS
   The portal already links <link href="./static/custom.css">, so this file
   lives inside the portal and styles both the standalone and iframe views.

   MAINTENANCE NOTES
   • Platform: Bullhorn Career Portal — Angular 10 + "novo-elements".
   • Selectors use the portal's STABLE classes/elements. The
     _ngcontent-serverApp-cNNN / _nghost-… attributes seen in the DOM are
     Angular build markers that change on every build — never target those.
   • novo ships specific styles, so brand overrides use !important where they
     must beat the library. That's expected here.
   • Aktiv Grotesk (the site typeface) is loaded via the Typekit @import above;
     its family name "aktiv-grotesk" is the first entry in --ogcs-font.
   • Do NOT reveal `.d7cn3wyn` — that's the portal's hidden anti-bot honeypot.
   • Related runtime config lives outside this file: the privacy-consent
     checkbox is set in app.json (privacyConsent), its label text in
     i18n/en.json (BY_CHECKING_THIS_BOX / PRIVACY_POLICY).
   ========================================================================== */


/* ==========================================================================
   PART A — DESIGN TOKENS  (exact values from the live OGCS site)
   ========================================================================== */
:root {
  --ogcs-accent:       hsl(194.62, 46.43%, 32.94%); /* petrol blue  ~#2D687B */
  --ogcs-accent-600:   hsl(194.62, 46.43%, 26%);    /* darker (hover)        */
  --ogcs-light-accent: hsl(136.8,  28.74%, 65.88%); /* sage green   ~#8FC19D */
  --ogcs-sky:          hsl(198.15, 84.4%,  72.35%); /* light blue   ~#7DD0F4 */

  --ogcs-ink:      hsl(0, 0%, 0%);   /* body text (site uses black) */
  --ogcs-muted:    hsl(0, 0%, 38%);  /* meta / captions */
  --ogcs-line:     hsl(0, 0%, 88%);  /* borders / dividers */
  --ogcs-surface:  #ffffff;          /* cards / panels */
  --ogcs-bg:       #ffffff;          /* page background */

  --ogcs-font: "aktiv-grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ogcs-radius:      6px;
  --ogcs-radius-sm:   4px;
  --ogcs-radius-pill: 999px;
  --ogcs-shadow:      0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  --ogcs-shadow-lg:   0 4px 12px rgba(0,0,0,.12);
  --ogcs-transition:  150ms ease;
}


/* ==========================================================================
   PART B — TYPOGRAPHY
   Brand font on text surfaces only — never on * or i.bhi-* (those are the
   portal's icon glyphs and would break).
   ========================================================================== */
body, app-root,
.novo-header, .header-titles h1,
novo-list, novo-list-item, item-title, item-content,
novo-search input, novo-control, .filter-header, novo-check-list label,
.open-positions, .category, .description, .chip, .mid-card,
.job-title, .job-description-text,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ogcs-font) !important;
}

body, app-root {
  color: var(--ogcs-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ==========================================================================
   PART C — SHELL & SURFACES
   Convert the portal's grey (#f4f4f4) surfaces to white and brand the header.
   (Note: the header bar is currently hidden by PART I for the embed; these
   rules keep it on-brand if PART I is ever removed.)
   ========================================================================== */

/* Top header bar → OGCS accent with white text. */
header.novo-header {
  background: var(--ogcs-accent) !important;
}
header.novo-header .header-titles h1,
header.novo-header .header-icon {
  color: #fff !important;
}

/* App background + sidebar + detail background → white. */
app-sidebar,
.frame .list,
app-job-details .background {
  background: var(--ogcs-bg) !important;
}

/* Job-detail white panel. */
app-job-details .job-container {
  border-radius: var(--ogcs-radius);
}


/* ==========================================================================
   PART D — JOB LIST + CARDS
   ========================================================================== */
.open-positions,
.open-positions .open-positions-text {
  color: var(--ogcs-ink);
  font-weight: 500;
}

/* Cards: keep the portal's shadow, add a brand border + radius + hover.
   container-type makes each card measurable for the PART K container query. */
.job-card {
  container-type: inline-size;
  border: 1px solid var(--ogcs-line);
  border-radius: var(--ogcs-radius);
  background: var(--ogcs-surface);
  transition: box-shadow var(--ogcs-transition), border-color var(--ogcs-transition);
}
.job-card:hover {
  box-shadow: var(--ogcs-shadow-lg) !important;
  border-color: var(--ogcs-accent);
}

/* Job-title link + category (were #4a89dc) → OGCS accent. */
.job-card item-title h6 a,
.job-card item-title a,
.category {
  color: var(--ogcs-accent) !important;
}

/* The little ">" next-icon (was #39d). */
.job-card .bhi-next { color: var(--ogcs-accent) !important; }

/* Info chips (Direct Hire / date / mid-card): soft sage tint + brand text. */
.chip, .mid-card {
  background: color-mix(in srgb, var(--ogcs-light-accent) 30%, #fff) !important;
  color: var(--ogcs-accent) !important;
  border-radius: var(--ogcs-radius-sm) !important;
}

/* "Load more" bar (was slate #4f5361). */
.load-more-button { background: var(--ogcs-accent) !important; }

/* Empty state. */
.empty-list { color: var(--ogcs-muted); }


/* ==========================================================================
   PART E — JOB DETAIL
   ========================================================================== */
app-job-details .job-header .job-title { color: var(--ogcs-accent); }
app-job-details .job-header .category  { color: var(--ogcs-accent) !important; }
app-job-details .job-description-text  { color: var(--ogcs-ink); line-height: 1.7; }


/* ==========================================================================
   PART F — BUTTONS  (novo theme attributes)
   ========================================================================== */

/* Primary (e.g. "Apply Now") → solid petrol blue, white text. */
button[theme="primary"] {
  background: var(--ogcs-accent) !important;
  border-color: var(--ogcs-accent) !important;
  color: #fff !important;
}
button[theme="primary"]:hover { background: var(--ogcs-accent-600) !important; }

/* Secondary (e.g. mobile "Filter") → outline pill in the accent. */
button[theme="secondary"] {
  background: transparent !important;
  border: 1px solid var(--ogcs-accent) !important;
  color: var(--ogcs-accent) !important;
  border-radius: var(--ogcs-radius-pill) !important;
}
button[theme="secondary"]:hover {
  background: var(--ogcs-accent) !important;
  color: #fff !important;
}

/* Dialogue text buttons (Back / Share This Post) → accent text. */
button[theme="dialogue"] { color: var(--ogcs-accent) !important; }

/* Search FAB + its icon → accent. */
button[theme="fab"] {
  background: var(--ogcs-accent) !important;
  color: #fff !important;
}
button[theme="fab"] .bhi-search { color: #fff !important; }


/* ==========================================================================
   PART G — SEARCH & FILTERS (sidebar)
   ========================================================================== */
.filter-header,
.filter-header span { color: var(--ogcs-accent) !important; }

/* Keyword search input → rounded field, sky-blue focus ring. */
novo-search input[type="text"] {
  border-radius: var(--ogcs-radius) !important;
}
novo-search input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--ogcs-sky) !important;
}

/* Checked filter checkbox glyph → accent. */
novo-check-list .bhi-checkbox-filled,
novo-check-list input:checked + label .bhi-checkbox-empty { color: var(--ogcs-accent) !important; }


/* ==========================================================================
   PART H — QUALITY FLOOR (accessibility)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--ogcs-accent);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  button, [role="button"] { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   PART I — Hide the portal header + Bullhorn credits (for the embed)
   ========================================================================== */
header.novo-header { display: none; }
.credits { display: none; }


/* ==========================================================================
   PART J — HIDE THE "COUNTY" SIDEBAR FILTER
   The Category / County / City filters are hardcoded in sidebar.component.html
   (not config-driven). The "County" label maps to the address(state) filter
   (UK i18n of "State"), targeted here via its stable data-automation-id.
   ========================================================================== */
app-sidebar-filter[data-automation-id="state"] { display: none !important; }


/* ==========================================================================
   PART K — Job-card header: chips beside the title on wide cards, stacked
   below it on narrow cards. Uses a CONTAINER query (card width, not screen
   width), so it's correct in the 1- and 2-column desktop layouts alike.
   ========================================================================== */
@container (max-width: 560px) {
  .job-card novo-list-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .job-card novo-list-item .list-item {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .job-card novo-list-item item-header-end {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 14px 0 0 -6px !important;  /* below title, chips' left edge aligned */
  }
}


/* ==========================================================================
   PART L — Apply modal: scroll the WHOLE modal as one unit (footer not
   pinned), so the consent checkbox always sits directly above Apply.
   novo makes novo-modal a flex column whose <section> scrolls while the
   <footer> stays pinned; these rules dismantle that. !important beats
   novo's core styles.css.
   ========================================================================== */
app-apply-modal novo-modal {
  display: block !important;      /* kill novo's flex column */
  max-height: 92vh !important;
  overflow-y: auto !important;    /* the whole modal scrolls */
}
app-apply-modal novo-modal > section {
  overflow: visible !important;   /* stop the body scrolling on its own */
  flex: none !important;
  max-height: none !important;
  height: auto !important;
}
app-apply-modal novo-modal > footer {
  position: static !important;    /* un-pin the footer */
}


/* ==========================================================================
   PART M — Apply modal consent row: keep it on its own line at natural height
   so it can't be clipped/collapsed on narrow widths.
   ========================================================================== */
app-apply-modal .consent-form.novo-form-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  padding: 8px 0 !important;
  overflow: visible !important;
}
app-apply-modal .consent-checkbox-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}