/*
Theme Name: SacJobs (Astra child)
Template: astra
Version: 2.15.0
Description: SacJobs.com look on top of Astra — brand fonts/colors, the header + hero from the SmartJobBoard site, full-bleed pages for the ported custom sections, and the custom footer. Reused per location; only the logo/copy differ.
*/

/* ---- Brand tokens (from sacjobs.com's custom stylesheet + chat widget) ---- */
:root {
  --sj-blue: #469fef;        /* SJB theme primary */
  --sj-navy: #004aad;        /* brand navy (chat widget / hero overlay) */
  --sj-orange: #ff914d;      /* brand orange */
  --sj-ink: #494b60;
  --sj-muted: #6d6f80;
  --sj-bg: #f8f8f8;
}

body, button, input, select, textarea, .ast-container {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--sj-ink);
}

/* ---- Pages are full-bleed: the ported sections bring their own containers ----
   The WPJM/WooCommerce pages, which have no block of their own, get the
   container back via .sj-plain-page further down. */
body.page .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; }
body.page .site-content .ast-container { display: block; }
body.page .ast-article-single, body.page .entry-content { padding: 0; margin: 0; }
body.page .entry-header, body.page .ast-single-post-featured-image { display: none; }
body.page .site-content > .ast-container { padding-top: 0; }
body.page .entry-content > * { max-width: none; margin-left: 0; margin-right: 0; }
body.page .entry-content > p:empty { display: none; }
body.ast-separate-container.page .ast-article-single { background: transparent; box-shadow: none; }

/* ---- Header: SJB has the nav sitting on the hero photo (home) ---- */
.site-header .ast-primary-header-bar { border-bottom: 0; }
/* The full-bleed rule above targets .ast-container — which also catches the
   HEADER's container, so the logo sat flush against the viewport edge at x=0
   and the nav ran to the far right. That is what "the menu looks off" was.
   Give the header its own centred container back, capped at 1360px so the
   header lines up with the page content instead of spanning the viewport. */
/* !important is load-bearing: `body.page .ast-container` above outscores a bare
   `.site-header .ast-container`, which would leave the header full-bleed. */
.site-header .ast-container {
  max-width: 1360px !important; margin-left: auto !important; margin-right: auto !important;
  padding-left: 24px !important; padding-right: 24px !important;
}
.site-logo-img img, .site-logo-img .custom-logo-link img { max-width: 62px !important; width: 62px !important; height: auto; }
body.home .site-header,
body.home .site-header .ast-primary-header-bar,
body.home .site-header .main-header-bar,
body.home .site-header .ast-above-header-bar {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.home .site-header {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20;
}
body.admin-bar.home .site-header { top: 32px; }
/* Astra puts margin-top:60px on .content-area. On the home page that pushed the
   hero down 60px while the header stayed at top:0 — so the top 60px of a 94px
   header sat over the WHITE page background, and the nav (which is white text
   for the photo) became white-on-white and vanished. Only showed above ~1200px,
   where the margin isn't collapsed, which is why it looked fine in a narrow
   window and broken in a wide one. */
body.home .site-content .content-area,
body.home .site-content .content-area.primary { margin-top: 0 !important; }
body.home .site-header .main-header-menu > .menu-item > .menu-link,
body.home .site-header .site-title a,
body.home .site-header .ast-header-account-wrap a { color: #fff; }
body.home .site-header .main-header-menu > .menu-item > .menu-link:hover { color: #ffd6b8; }
body.home .site-header .site-branding img { filter: none; }

/* ---- Every non-home page: SJB's blue gradient header ----
   Sampled off live sacjobs.com/online-job-resources/ — the nav there is
   linear-gradient(90deg,#469fef,#0b3ff3) and runs straight into the blue hero
   with no seam. The new site had a WHITE header bar, and below it Astra's
   60px .content-area margin showed the white page background above the hero.
   Those two white bands are the "header has white lines" report (Career Road
   Map, Online Job Resources, Workshops — all body.page without .home, so both
   home-only fixes above skipped them). */
body:not(.home) .site-header,
body:not(.home) .site-header .ast-primary-header-bar,
body:not(.home) .site-header .main-header-bar,
body:not(.home) .site-header .ast-above-header-bar {
  background: linear-gradient(90deg, #469fef 0%, #0b3ff3 100%) !important;
  border: 0 !important; box-shadow: none !important;
}
/* !important: Astra's own `.main-header-menu .menu-link` colour rule outranks
   this one, so without it the nav rendered dark-on-blue. Verified live. The
   child combinator keeps it to the TOP level — dropdown panels stay white with
   dark text. */
body:not(.home) .site-header .main-header-menu > .menu-item > .menu-link,
body:not(.home) .site-header .main-header-menu > .menu-item > .menu-link .ast-icon,
body:not(.home) .site-header .site-title a,
body:not(.home) .site-header .ast-header-account-wrap a { color: #fff !important; }
body:not(.home) .site-header .main-header-menu > .menu-item > .menu-link:hover { color: #ffd6b8 !important; }
/* Close the 60px gap on ported pages only. The functional pages keep it —
   Max reported Post a Job as "squashed and too close to header and side". */
body.page .site-content .content-area,
body.page .site-content .content-area.primary,
body.page #primary { margin-top: 0 !important; margin-bottom: 0 !important; }
/* ...and the matching band at the BOTTOM. Measured on /online-job-resources/:
   100px of white sat between the last CTA card and the footer — 40px from the
   SJB export's `.page-row` padding-bottom plus Astra's 60px .content-area
   margin-bottom. That is the "card before the footer has white lines" report.
   Only the LAST page-row loses its padding; inner ones still space sections. */
body.page .sj-page > .page-row:last-child { padding-bottom: 0 !important; }
/* Nav sizing is a genuine trade-off, so the numbers are written down.
   Nine items have to fit on ONE row between Astra's mobile breakpoint (921px)
   and the desktop container; at the original 17px/500 they needed 1049px and
   wrapped into the logo on every 921–1250px window.
   Max asked for bolder + bigger (2026-08-26), which costs width back: 15px/700
   plus the two button-styled items needs ~1050px. Below that the two buttons
   drop to a second row — tidy, not broken — until 921px hands over to the
   hamburger. Shrinking type to hold one row everywhere was the alternative and
   was rejected: he wants the emphasis. The "Candidates"/"Employers" labels are
   shortened in the WP menu (database, revertible in Appearance > Menus) and
   buy roughly 120px of that budget. */
.main-header-menu .menu-item > .menu-link { font-weight: 700; font-size: 15px; padding-left: 9px; padding-right: 9px; }

/* The account link as an orange button, targeted by DESTINATION.
   This used to be `:nth-last-child(-n+2)` — "the last two items", on the
   assumption they would always be Sign in and Sign up. They stopped being:
   measured 2026-08-31, the menu ended with **Events** and **My Account**, so a
   content page was rendering as a call to action purely because of where it
   sat. A positional selector silently restyles whatever the menu happens to end
   with, and nobody notices, because two orange buttons look intentional.
   Matching on the href cannot drift: the button follows the account link
   wherever it moves in the menu, and no other item can accidentally inherit it.

   `*=` rather than `=` on purpose — it matches the absolute URL the menu stores
   on either domain (staging and sacjobs.com), and picks up account variants like
   /signup/?type=employer if a separate Sign in ever joins Sign up. */
/* align-self/height are load-bearing, not cosmetic: Astra's menu items are
   flex children that STRETCH to the full header height, so a padded link
   rendered as an 80px-tall slab regardless of its 7px padding. Centring it and
   releasing the stretched height gives a 31px button. */
.main-header-menu > .menu-item:has(> .menu-link[href*="/signup/"]) { align-items: center; }
.main-header-menu > .menu-item > .menu-link[href*="/signup/"] {
  background: var(--sj-orange) !important; color: #fff !important;
  align-self: center !important; height: auto !important; min-height: 0 !important;
  border-radius: 5px; padding: 8px 16px !important; margin-left: 5px;
  line-height: 1.15 !important; font-size: 14px !important;
}
.main-header-menu > .menu-item > .menu-link[href*="/signup/"]:hover {
  background: #ff7a2b !important; color: #fff !important;
}

/* ---- Mobile (off-canvas) menu: the nav was invisible ----
   Astra's off-canvas panel sits INSIDE .site-header and reuses the
   .main-header-menu class, so the white nav colour set above — correct on the
   blue desktop bar and on the home hero photo — also landed on the mobile
   panel, which has a WHITE background. Measured at a 390px viewport:
   rgb(255,255,255) text on rgb(255,255,255). Contrast 1:1. Every item was in
   the DOM, correctly sized, and unreadable to a human.

   This is the same white-on-white failure already described further up this
   file for the desktop header, reappearing in the one place nobody looked. It
   predates the menu being assigned to that location — the old 43-item page-list
   fallback was equally invisible — so assigning the menu revealed it rather
   than caused it.

   The account link is deliberately NOT included: it carries its own orange
   background, and white text on orange is correct there and already renders.
   The exclusion matches it by href, exactly as the button above does — the two
   MUST use the same test, or the account button gets dark ink on orange. */
/* Scope by the NAV container, not #ast-hf-mobile-menu. That id is on the <ul>
   ITSELF, not a wrapper around it, so `#ast-hf-mobile-menu .main-header-menu`
   asks for a descendant that is the same element and matches nothing. The first
   version of this fix shipped and did nothing for exactly that reason; caught by
   re-measuring the contrast rather than trusting the upload. */
#ast-mobile-site-navigation .main-header-menu > .menu-item > .menu-link:not([href*="/signup/"]),
#ast-mobile-site-navigation .main-header-menu > .menu-item > .menu-link:not([href*="/signup/"]) .ast-icon,
#ast-mobile-site-navigation .main-header-menu .sub-menu .menu-link {
  color: var(--sj-ink, #494b60) !important;
}
#ast-mobile-site-navigation .main-header-menu > .menu-item > .menu-link:not([href*="/signup/"]):hover,
#ast-mobile-site-navigation .main-header-menu .sub-menu .menu-link:hover {
  color: var(--sj-orange, #ff914d) !important;
}
/* The submenu chevron is a <button>, not a link, so the rules above miss it. */
#ast-mobile-site-navigation .ast-menu-toggle { color: var(--sj-ink, #494b60) !important; }

/* ---- Workshop picker: make it look like a dropdown ----
   The field carries `appearance: none` (inherited from the theme's form
   styling), which strips the native arrow — and nothing replaced it, so a
   control asking "Which workshop?" looked exactly like a text input. Max: "it
   says pick which one but no indication of a drop down to click."

   The chevron is an inline SVG data URI so it needs no asset and no request,
   and it is percent-encoded so it survives being a CSS string.

   !important on all three: the field's inline style uses the `background`
   SHORTHAND, which sets background-image to none at inline specificity, and
   sets its own padding. Without !important the chevron simply would not
   appear — the same silent no-op that has bitten this codebase repeatedly. */
#sjw-pick {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231b3a6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  padding-right: 44px !important;
  cursor: pointer;
}
#sjw-pick:hover { border-color: var(--sj-orange, #ff914d); }
#sjw-pick:focus { border-color: var(--sj-orange, #ff914d); outline: 2px solid rgba(255,145,77,.35); outline-offset: 1px; }

/* ---- Hero (home): the SJB search banner ---- */
.sj-hero {
  position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: 50% 50%; color: #fff; text-align: center;
  padding: 150px 20px 70px;
}
.sj-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,74,173,.72), rgba(0,74,173,.6));
}
.sj-hero > * { position: relative; }
.sj-hero h1 { color: #fff; font-family: 'Rubik', 'Work Sans', sans-serif; font-weight: 700; font-size: 20px; margin: 0 0 90px; letter-spacing: .2px; }
.sj-hero form { display: flex; gap: 28px; max-width: 1010px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.sj-hero .sj-hero-input { flex: 1 1 520px; height: 60px; border: 0; border-radius: 3px; padding: 0 20px 0 48px; font-size: 17px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236d6f80' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px 50% no-repeat; }
.sj-hero .sj-hero-btn { flex: 0 0 270px; height: 60px; border: 0; border-radius: 3px; background: rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; }
.sj-hero .sj-hero-btn:hover { background: var(--sj-blue); }

/* ---- Latest jobs (WP Job Manager list styled like the SJB cards) ---- */
.sj-latest-jobs { padding: 60px 20px 40px; }
.sj-latest-jobs .sj-latest-jobs-inner { max-width: 1160px; margin: 0 auto; }
.sj-latest-jobs h2 { font-family: 'Rubik','Work Sans',sans-serif; font-weight: 500; font-size: 32px; color: var(--sj-ink); margin: 0 0 30px; }
.sj-latest-jobs ul.job_listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sj-latest-jobs ul.job_listings li.job_listing { background: #fff; border: 1px solid #ececf0; border-radius: 3px; padding: 22px 18px; }
.sj-latest-jobs ul.job_listings li.job_listing a { display: block; padding: 0; }
.sj-latest-jobs ul.job_listings li.job_listing .position h3 { font-family: 'Rubik','Work Sans',sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; margin: 10px 0 8px; color: var(--sj-ink); }
.sj-latest-jobs ul.job_listings li.job_listing .company, .sj-latest-jobs ul.job_listings li.job_listing .location { color: var(--sj-muted); font-size: 15px; }
.sj-latest-jobs ul.job_listings li.job_listing .job-type { display: inline-block; background: #666; color: #fff; border-radius: 3px; padding: 4px 12px; font-size: 14px; }
.sj-latest-jobs .sj-view-all { text-align: center; margin-top: 30px; }
.sj-latest-jobs .sj-view-all a { display: inline-block; background: var(--sj-blue); color: #fff; font-weight: 700; padding: 18px 60px; border-radius: 3px; text-decoration: none; }
.sj-latest-jobs .sj-view-all a:hover { background: #2f8de6; color: #fff; }

/* Astra's default footer is replaced by the SacJobs footer (functions.php) */

/* WPJM card internals: stack instead of the default float layout */
.sj-latest-jobs ul.job_listings li.job_listing a > * { float: none !important; width: auto !important; display: block; text-align: left !important; padding: 0 !important; }
.sj-latest-jobs ul.job_listings li.job_listing a .meta { margin-top: 14px; color: var(--sj-ink); font-weight: 600; font-size: 15px; }
.sj-latest-jobs ul.job_listings li.job_listing a .meta .job-type { float: right; font-weight: 700; }
.sj-latest-jobs ul.job_listings li.job_listing a .meta .date { display: inline-block; }
.sj-latest-jobs ul.job_listings li.job_listing a img.company_logo { width: 48px; height: 48px; float: none; margin: 0 0 6px; }

/* Astra's builder footer (copyright bar) is replaced by the SacJobs footer */
footer.site-footer#colophon { display: none; }
/* Logo only in the header, like the live site */
.site-header .site-title, .site-header .site-description { display: none; }
/* Centered strips must beat the full-bleed rule above */


.sj-latest-jobs ul.job_listings li.job_listing a img.company_logo { position: static !important; }

/* ---- Ported SmartJobBoard static pages (pages/*.html) ---- */
.sj-page .container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.sj-page .title__primary { font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 32px; color: var(--sj-ink); text-align: center; margin: 40px 0 10px; }
.sj-page .static-pages { padding: 0; }
.sj-page .static-pages > .title__primary { max-width: 1170px; margin-left: auto; margin-right: auto; }
.sj-page .page-row-expanded { padding-bottom: 40px; }

/* ---- [sacjobs_fair_roster] (employers attending, from the CRM) ---- */
.sj-roster { max-width: 1100px; margin: 30px auto; padding: 0 20px; }
.sj-roster-title { font-family: 'Rubik','Work Sans',sans-serif; font-weight: 700; font-size: 30px; text-align: center; margin: 0 0 18px; }
.sj-roster-group { font-size: 18px; margin: 22px 0 10px; color: var(--sj-navy); }
.sj-roster-count { color: var(--sj-muted); font-weight: 400; }
.sj-roster-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.sj-roster-list li { background: #fff; border: 1px solid #ececf0; border-radius: 8px; padding: 10px 14px; }
.sj-roster-company { font-weight: 600; }
.sj-roster-industry { color: var(--sj-muted); font-size: 13px; margin-left: 6px; }
.sj-roster-updated { color: var(--sj-muted); font-size: 13px; text-align: center; margin-top: 16px; }

/* ---- [sacjobs_company] (My Company page) ---- */
.sj-company { max-width: 760px; margin: 30px auto; padding: 24px; background: #fff; border: 1px solid #ececf0; border-radius: 8px; }
.sj-company h3 { font-family: 'Rubik','Work Sans',sans-serif; margin-top: 0; }
.sj-company-notice { background: #eaf6ee; border: 1px solid #bfe3c8; padding: 10px 14px; border-radius: 6px; }
.sj-company-members { list-style: none; margin: 0 0 14px; padding: 0; }
.sj-company-members li { padding: 10px 0; border-bottom: 1px solid #f0f0f4; }
.sj-company-members li span { color: var(--sj-muted); margin: 0 8px; }
.sj-company-members li em { color: var(--sj-navy); font-style: normal; font-size: 13px; }
.sj-company-btn { background: var(--sj-blue); color: #fff; border: 0; border-radius: 4px; padding: 10px 22px; font-weight: 600; cursor: pointer; }
.sj-company-btn:hover { background: #2f8de6; }
.sj-company-x { background: none; border: 0; color: #c0392b; cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0 4px; }
.sj-company-pending { color: var(--sj-muted); font-size: 14px; }

/* ---- Matched candidates panel (.sj-match) ---- */
.sj-match { max-width: 860px; margin: 40px auto; padding: 24px; background: #fff; border: 2px solid var(--sj-navy); border-radius: 10px; }
.sj-match h3 { font-family: 'Rubik','Work Sans',sans-serif; margin-top: 0; }
.sj-match-badge { font-size: 12px; background: #eef4ff; color: var(--sj-navy); border-radius: 999px; padding: 4px 10px; vertical-align: middle; margin-left: 8px; font-weight: 600; }
.sj-match-criteria { width: 100%; }
.sj-match-card { border: 1px solid #ececf0; border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
.sj-match-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sj-match-head span { color: var(--sj-muted); font-size: 14px; }
.sj-match-pct { margin-left: auto; font-weight: 700; color: var(--sj-navy); }
.sj-match-checks { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; font-size: 14px; }
.sj-match-checks .sj-yes { color: #1e7e34; }
.sj-match-checks .sj-no { color: #b3b3bf; }
.sj-match-why { color: var(--sj-ink); font-size: 14px; background: var(--sj-bg); border-radius: 6px; padding: 8px 12px; }
.sj-match-note { color: var(--sj-muted); font-size: 13px; }
#sj-ai-draft { margin-bottom: 8px; }
#sj-ai-draft .sj-ai-btn, #sj-ai-draft .sj-ai-go { background: var(--sj-navy); color: #fff; border: 0; border-radius: 4px; padding: 8px 16px; cursor: pointer; }
#sj-ai-draft .sj-ai-panel { border: 1px solid #ececf0; border-radius: 6px; padding: 12px; margin-top: 8px; }
#sj-ai-draft .sj-ai-facts { width: 100%; }

/* ---- Fair attendees (.sj-fa) ---- */
.sj-fa { max-width: 860px; margin: 30px auto; padding: 24px; background: #fff; border: 2px solid var(--sj-navy); border-radius: 10px; }
.sj-fa h3 { font-family: 'Rubik','Work Sans',sans-serif; margin-top: 0; }
.sj-fa-fairs { margin: 12px 0 18px; }
.sj-fa-closed { opacity: .5; cursor: not-allowed; }
.sj-fa-card { border: 1px solid #ececf0; border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.sj-fa-tags { margin-left: auto; }
.sj-fa-in { color: #1e7e34; font-style: normal; font-weight: 600; }
.sj-fa-res { color: var(--sj-navy); font-style: normal; }
.sj-fa-meta { display: block; color: var(--sj-muted); font-size: 14px; margin: 2px 0; }
.sj-fa .sj-reveal { margin-top: 8px; }

/* ---- Event data report ---- */
.sj-fa-tools { margin: 10px 0 20px; }
.sj-rep-cards { display: flex; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.sj-rep-card { background: var(--sj-navy); color: #fff; border-radius: 10px; padding: 14px 22px; text-align: center; }
.sj-rep-card b { display: block; font-size: 28px; font-family: 'Rubik','Work Sans',sans-serif; }
.sj-rep-card span { font-size: 13px; opacity: .85; }
.sj-rep-block { margin: 14px 0; }
.sj-rep-block h5 { margin: 0 0 6px; font-size: 14px; color: var(--sj-navy); text-transform: uppercase; letter-spacing: .4px; }
.sj-rep-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; font-size: 14px; }
.sj-rep-label { flex: 0 0 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-rep-bar { flex: 1; background: #eef2f8; border-radius: 4px; height: 14px; }
.sj-rep-bar i { display: block; height: 100%; background: var(--sj-blue); border-radius: 4px; }
.sj-rep-n { flex: 0 0 34px; text-align: right; color: var(--sj-muted); }
.sj-fa-topmatch { border-top: 1px solid #ececf0; margin-top: 18px; padding-top: 12px; }
.sj-fa-criteria, .sj-fa-job { width: 100%; }

/* ---- Legal pages (.sj-legal) — privacy.html / terms.html ---------------------
   Long-form text: readable measure, left aligned, clear heading rhythm. Scoped so
   it cannot touch the ported SmartJobBoard sections, which bring their own CSS. */
.sj-page.sj-legal .container { max-width: 820px; }
.sj-page.sj-legal .title__primary { text-align: left; margin-bottom: 24px; }
.sj-page.sj-legal h3 {
  font-family: 'Rubik','Work Sans',sans-serif; font-weight: 700; font-size: 18px;
  color: var(--sj-ink); margin: 32px 0 10px;
}
.sj-page.sj-legal p,
.sj-page.sj-legal li { font-size: 15px; line-height: 1.7; color: var(--sj-muted); }
.sj-page.sj-legal p { margin: 0 0 12px; }
.sj-page.sj-legal ul { margin: 0 0 16px; padding-left: 22px; }
.sj-page.sj-legal li { margin-bottom: 6px; }
.sj-page.sj-legal strong { color: var(--sj-ink); }
.sj-page.sj-legal a { color: var(--sj-blue); font-weight: 600; }
.sj-page.sj-legal em { color: var(--sj-muted); font-size: 14px; }


/* ---- WPJM / WooCommerce pages get their container back ----------------------
   Ported from the ContraCostaJobs child theme (d45cc18), which hit this first —
   the two themes are clones and must not diverge. The full-bleed `body.page`
   rules above are right for the ported pages/*.html blocks (each brings its own
   centred container) and wrong for [submit_job_form] / [jobs] / [job_dashboard]
   / WooCommerce output, which has no container at all: /post-a-job/ ran flush
   into the header with no gutters. That is Max's "squashed and too close to
   header and side". functions.php tags those pages .sj-plain-page by looking for
   the [sj_*] shortcodes, NOT by slug — the WPJM slugs are settings under
   Job Manager > Settings > Pages and can be renamed out from under a slug list. */
body.sj-plain-page .site-content .content-area,
body.sj-plain-page #primary { margin-top: 0 !important; margin-bottom: 0 !important; }
/* The container goes on .ast-article-single, NOT .entry-content: Astra renders
   .entry-header (the page title) as a SIBLING of .entry-content, so padding the
   content alone leaves the H1 hanging off the left edge while the form insets. */
body.sj-plain-page .ast-article-single {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
@media (max-width: 782px) {
  body.sj-plain-page .ast-article-single { padding: 32px 18px 56px; }
}
/* The page title is hidden site-wide by the full-bleed rules (the ported blocks
   carry their own H1). These pages have no H1 at all without it — both a
   heading-order problem and why /post-a-job/ read as an unlabelled form. */
body.sj-plain-page .entry-header { display: block; margin: 0 0 8px; }
body.sj-plain-page .entry-title {
  font-family: Rubik, 'Work Sans', sans-serif; font-weight: 800;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.15; color: var(--sj-navy); margin: 0 0 24px;
}

/* ============================================================================
   SIGN UP — account type chooser (/signup/)
   ========================================================================== */
.sj-signup { background: #f5f8fd; padding: 54px 24px 60px; }
.sj-signup-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.sj-signup-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--sj-orange); margin-bottom: 8px;
}
.sj-signup-title {
  font-family: Rubik, 'Work Sans', sans-serif; font-weight: 900; letter-spacing: -0.5px;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; color: var(--sj-navy); margin: 0 0 10px;
}
.sj-signup-lead { font-size: 15.5px; line-height: 1.6; color: #4a5568; margin: 0 auto 30px; max-width: 520px; }
.sj-signup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.sj-signup-card {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 8px;
  background: #fff; border: 1.5px solid #e4ebf5; border-radius: 15px; padding: 26px 24px 24px;
  text-decoration: none; transition: border-color .13s, box-shadow .13s, transform .13s;
}
.sj-signup-card:hover {
  border-color: var(--sj-orange); box-shadow: 0 10px 26px rgba(16,42,80,0.10); transform: translateY(-2px);
}
/* !important: Astra underlines every `.entry-content a`, and because the whole
   card IS the link the underline propagates to the title and body text — the
   card rendered as three underlined paragraphs. The job cards escape this only
   because WPJM's own CSS already clears it there. */
.sj-signup-card, .sj-signup-card:hover, .sj-signup-card:focus { text-decoration: none !important; }
.sj-signup-icon { font-size: 30px; line-height: 1; }
.sj-signup-card-title {
  font-family: Rubik, 'Work Sans', sans-serif; font-size: 19px; font-weight: 800; color: var(--sj-navy);
}
.sj-signup-card-body { font-size: 14px; line-height: 1.6; color: #4a5568; flex: 1 1 auto; }
.sj-signup-cta { font-size: 14px; font-weight: 800; color: var(--sj-orange); margin-top: 4px; }
.sj-signup-foot { font-size: 14px; color: #6b7280; margin: 26px 0 0; }
.sj-signup-foot a { color: var(--sj-orange); font-weight: 700; }

/* SEARCH JOBS, CONTACT FORM and ACCOUNT BENEFITS styles moved to the
   sacjobs-crm-bridge plugin (v1.1.0) so both locations get them. They use the
   --sj-* custom properties defined at the top of this file, so rebranding still
   happens here. See the SHARED SITE BEHAVIOUR block in the plugin. */

/* ---- "What's on this page" jump strip (Candidates + Employer Services) ----
 * Max, 2026-08-29: the header should carry more detail and buttons for what is
 * on the page, and each one should explain itself. So these are cards, not a
 * row of links: a name tells you where you land, a sentence tells you what is
 * there, and the whole strip sits directly under the hero where the question
 * "what IS this page?" is actually being asked. */
.sj-jump { background: #f6f8fc; border-bottom: 1px solid #e7ecf5; padding: 26px 20px 30px; }
.sj-jump-inner { max-width: 1120px; margin: 0 auto; }
.sj-jump-eyebrow {
  font-family: Rubik, 'Work Sans', sans-serif; font-size: 11.5px; font-weight: 800;
  letter-spacing: 2px; color: #7c8798; text-align: center; margin-bottom: 16px;
}
.sj-jump-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sj-jump-card {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none !important;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 17px 18px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sj-jump-card:hover, .sj-jump-card:focus-visible {
  border-color: var(--sj-orange, #ff914d);
  box-shadow: 0 8px 20px rgba(16, 24, 40, .09); transform: translateY(-2px);
}
.sj-jump-ico { font-size: 22px; line-height: 1; }
.sj-jump-name {
  font-family: Rubik, 'Work Sans', sans-serif; font-weight: 800; font-size: 15.5px;
  color: var(--sj-navy, #004aad);
}
.sj-jump-card:hover .sj-jump-name { color: var(--sj-orange, #ff914d); }
.sj-jump-desc { font-size: 13px; line-height: 1.55; color: #5b6675; }
/* Anchors land under the sticky header without the heading hiding behind it. */
#sj-accounts, #sj-assistant, #sj-services, #sj-roadmap, #sj-testimonials, #sj-faq,
#sj-emp-packages, #sj-emp-career-fairs, #sj-emp-recruiting { scroll-margin-top: 90px; }

/* ---- Latest Jobs grid cards: the meta row ----
 * Max, 2026-08-29: "The Job Posts on the home page still dont look right with
 * the hourly and what kind of position." In the GRID layout (not the /jobs/
 * list) an earlier rule forces every child of the card link to display:block,
 * so the three meta items stacked into a ragged column — the job type floated
 * right on its own line, the pay stretched the full card width, and neither
 * looked like it belonged to the other.
 *
 * The two chips now sit together on one row, in reading order (what the job is,
 * then what it pays), with the posted date on its own quiet line underneath. */
.sj-latest-jobs ul.job_listings li.job_listing ul.meta {
  display: flex !important; flex-wrap: wrap; align-items: center;
  gap: 8px 10px; margin: 14px 0 0; padding: 0; list-style: none;
}
.sj-latest-jobs ul.job_listings li.job_listing ul.meta li {
  float: none !important; width: auto !important; margin: 0 !important;
  display: inline-flex !important; align-items: center;
}
.sj-latest-jobs ul.job_listings li.job_listing ul.meta li.job-type { order: 1; }
.sj-latest-jobs ul.job_listings li.job_listing ul.meta li.sj-job-salary { order: 2; }
.sj-latest-jobs ul.job_listings li.job_listing ul.meta li.date {
  order: 3; flex-basis: 100%; color: #8a93a3; font-size: 13px; font-weight: 500;
}

/* ---- Home: Facebook group community card (Max, 2026-08-29) ---------------- */
.sj-h-fb { padding: 8px 20px 44px; }
.sj-h-fb-card {
  max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 22px;
  align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1b3a6b 0%, #2553a0 100%);
  color: #fff; border-radius: 16px; padding: 30px 34px;
  box-shadow: 0 18px 44px rgba(27, 58, 107, 0.28);
}
.sj-h-fb-content { flex: 1 1 420px; min-width: 0; }
.sj-h-fb-eyebrow {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: #fcbf49; margin-bottom: 8px;
}
.sj-h-fb-title { color: #fff; font-size: 27px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.6px; }
.sj-h-fb-text { color: rgba(255,255,255,0.9); font-size: 15.5px; line-height: 1.55; margin: 0; }
.sj-h-fb-aside { flex: 0 0 auto; }
/* Named for every state: Astra styles bare links and buttons inside sections,
   and an unnamed hover here came back as dark text on the blue card. */
.sj-h-fb-cta,
.sj-h-fb-cta:link,
.sj-h-fb-cta:visited {
  display: inline-block; background: #f26522; color: #fff !important;
  text-decoration: none; padding: 14px 30px; border-radius: 10px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.4px;
  box-shadow: 0 6px 18px rgba(242,101,34,0.38);
}
.sj-h-fb-cta:hover,
.sj-h-fb-cta:focus { background: #e0561a; color: #fff !important; }
@media (max-width: 640px) {
  .sj-h-fb-card { padding: 24px 22px; }
  .sj-h-fb-aside { width: 100%; }
  .sj-h-fb-cta { display: block; text-align: center; }
}

/* ---- Matched candidates: generate + minimum-fit controls (2026-08-29) ------ */
.sj-match-gen-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
/* Astra styles every bare <button>, and an unnamed one here came back solid
   blue with unreadable text — the same trap the tool cards hit. Name each
   state. */
.sj-match-gen,
.sj-match-gen:link,
.sj-match-gen:visited {
  background: rgba(0,74,173,0.08); color: #004aad; border: 1.5px solid rgba(0,74,173,0.25);
  border-radius: 8px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.sj-match-gen:hover,
.sj-match-gen:focus { background: rgba(0,74,173,0.16); color: #004aad; border-color: rgba(0,74,173,0.4); }
.sj-match-gen-note { font-size: 12.5px; color: #6b7280; }
.sj-match-floor-row { margin: 6px 0 10px; font-size: 13.5px; color: #374151; }
.sj-match-floor-row label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sj-match-floor {
  padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 13.5px; font-weight: 700; color: #1b3a6b; background: #fff;
}