/* MatchBuilt job posting redesign — preview build Oct 15, 2026.
   Loaded ONLY on single job pages when the redesign is active (preview flag or live).
   Palette: navy #1b2a4a, blue #1B2A4A, orange #F2A900, panels #f4f6fa / #edf1f7. */

/* ---------- Hero ---------- */
body.single-job #main section.page-section.job-hero-redesign {
  background-color: #1b2a4a;
}
body.single-job #main section.page-section.job-hero-redesign .container {
  padding-top: 30px;
  padding-bottom: 34px;
}
body.single-job .job-hero-redesign .entry-job-category {
  margin: 0 0 12px;
}
body.single-job .job-hero-redesign .entry-job-category a {
  color: #F2A900;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  text-decoration: none;
}
body.single-job .job-hero-redesign .entry-job-category a:hover {
  text-decoration: underline;
}
body.single-job .job-hero-redesign h1.entry-title {
  color: #ffffff;
  font-size: 36px;
  line-height: 1.2;
  margin: 0 0 10px;
}
body.single-job .job-hero-redesign p.location {
  color: #ffffff;
  margin: 0;
}
body.single-job .job-hero-redesign p.location a {
  color: #ffffff;
}
body.single-job .job-hero-redesign .job-type-label {
  color: #b9c2d4;
  font-weight: 400;
}
body.single-job .job-hero-redesign .job-available {
  margin-top: 22px;
}
body.single-job .job-hero-redesign .btn-apply {
  display: inline-block;
  background-color: #F2A900;
  color: #1b2a4a;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 4px;
  text-decoration: none;
}
body.single-job .job-hero-redesign .btn-apply:hover {
  background-color: #d99600;
  color: #1b2a4a;
}
body.single-job .job-hero-redesign .inner {
  position: relative;
}
/* Hero eyebrow: category in orange, industry in a lighter eyebrow tone,
   separated by a thin bar. */
body.single-job .job-hero-redesign .job-eyebrow-sep {
  color: #7e8db0;
  font-weight: 400;
  margin: 0 10px;
}
body.single-job .job-hero-redesign .job-eyebrow-type {
  color: #a9b8d0;
}
/* Status segment on the eyebrow line (open jobs only): green dot + label in
   the same muted tone as the job type, kept on one line when the metadata
   wraps on mobile. */
body.single-job .job-hero-redesign .job-eyebrow-status {
  color: #a9b8d0;
  white-space: nowrap;
}
body.single-job .job-hero-redesign .job-eyebrow-status .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2fbf71;
  margin-right: 8px;
}
/* Application success confirmation (Mark's brief, Oct 15). Once Gravity
   Forms swaps the form for the confirmation, the apply header copy
   (eyebrow, heading, support line) is instruction text for a form that no
   longer exists — hide it in both the desktop section and the mobile
   block. Detection keys off the confirmation's own .mb-confirmation class
   (the plugin also adds a body.mb-confirmation-shown class via JS as a
   fallback), because Gravity Forms' AJAX confirmation swap does not
   reliably expose its wrapper class to :has(). The confirmation itself is compact: eyebrow + personalized
   heading beside a pale-green check, one supporting sentence, then a
   hairline divider and two quiet detail rows. Colors sampled from Mark's
   mock (circle #e4eee5, check #50a361, eyebrow gray #5d5d5d). */
body.single-job .job-application .content-section.primary:has(.mb-confirmation) .apply-eyebrow,
body.single-job .job-application .content-section.primary:has(.mb-confirmation) .apply-support,
body.single-job .job-application .content-section.primary:has(.mb-confirmation) > h2,
body.single-job .mobile-quick-apply:has(.mb-confirmation) .apply-eyebrow,
body.single-job .mobile-quick-apply:has(.mb-confirmation) .apply-support,
body.single-job .mobile-quick-apply:has(.mb-confirmation) > h2,
body.mb-confirmation-shown.single-job .job-application .apply-eyebrow,
body.mb-confirmation-shown.single-job .job-application .apply-support,
body.mb-confirmation-shown.single-job .job-application .content-section.primary > h2,
body.mb-confirmation-shown.single-job .mobile-quick-apply .apply-eyebrow,
body.mb-confirmation-shown.single-job .mobile-quick-apply .apply-support,
body.mb-confirmation-shown.single-job .mobile-quick-apply > h2 {
  display: none;
}
/* The confirmation reads as its own completion panel inside the white
   apply container (Mark's refinement, Oct 15): soft blue-gray tint, a thin
   navy top border, site radius. The container's existing 30/32px padding
   is the breathing room around the panel. */
body.single-job .gform_confirmation_wrapper,
body.single-job .gform_confirmation_message {
  margin: 0;
}
body.single-job .mb-confirmation {
  background-color: #F2F5FA;
  border-top: 3px solid #1B2A4A;
  border-radius: 8px;
  padding: 30px 34px 28px;
  /* Landing offset for the post-submission scroll (plugin footer script):
     keeps the panel clear of the sticky header (and the admin bar). */
  scroll-margin-top: 100px;
}
@media (max-width: 640px) {
  body.single-job .mb-confirmation {
    padding: 24px 20px 22px;
  }
  body.single-job .mb-confirmation-heading {
    font-size: 24px;
  }
  body.single-job .mb-confirmation-check {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}
body.single-job .mb-confirmation-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
body.single-job .mb-confirmation-check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #e4eee5;
  color: #50a361;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
}
body.single-job .mb-confirmation-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #5d5d5d;
  margin: 0 0 3px;
}
body.single-job .mb-confirmation-heading {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  color: #1b2a4a;
  margin: 0;
}
body.single-job .mb-confirmation-sub {
  font-size: 16.5px;
  line-height: 1.55;
  color: #383f4a;
  margin: 0 0 18px;
}
body.single-job .mb-confirmation-rows {
  border-top: 1px solid #DCE3EE;
  padding-top: 18px;
  display: grid;
  gap: 14px;
  max-width: 560px;
}
body.single-job .mb-confirmation-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
body.single-job .mb-confirmation-icon {
  color: #66707d;
  font-size: 17px;
  width: 22px;
  text-align: center;
  flex: none;
  margin-top: 2px;
}
body.single-job .mb-confirmation-row-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #1b2a4a;
  margin: 0 0 2px;
}
body.single-job .mb-confirmation-row-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: #66707d;
  margin: 0;
}

/* Filled status (Mark's adjustment, Oct 15): same 8px dot, bright red —
   Active Opening is green, Position Filled is red. Text stays muted. */
body.single-job .job-hero-redesign .job-eyebrow-status .status-dot-filled {
  background-color: #EF4444;
}

/* Filled-position panel (Mark's brief, Oct 15): replaces the old Completed
   Search box; sits in the main content column below the breadcrumb, above
   the job description. Colors from Mark's mock: panel #F2F5FA, eyebrow
   slate #637594, heading navy, muted text, standard orange button. */
body.single-job .job-filled-panel {
  background-color: #F2F5FA;
  border-radius: 12px;
  padding: 28px 30px;
  margin: 2px 0 28px;
}
body.single-job .job-filled-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #60708c;
  margin: 0 0 6px;
}
body.single-job .job-filled-heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: #1b2a4a;
  margin: 0 0 10px;
}
body.single-job .job-filled-text {
  font-size: 16px;
  line-height: 1.65;
  color: #66707d;
  margin: 0 0 20px;
  max-width: 640px;
}
body.single-job .job-filled-button-link {
  display: inline-block;
  background-color: #F2A900;
  color: #1b2a4a;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 6px;
}
body.single-job .job-filled-button-link:hover {
  background-color: #d99500;
  color: #1b2a4a;
  text-decoration: none;
}
/* Filled panel: Talent Network button beside the openings button
   (Mark, Oct 21). Shares the gold button's box via .job-filled-button-link
   (inline-block, 15.5px/700, padding 14px 26px, 6px radius), so the pair
   matches in height and radius; navy treatment as on the sidebar TN card. */
body.single-job .job-filled-button-tn {
  background-color: #1B2A4A;
  color: #ffffff;
  margin-left: 12px;
}
body.single-job .job-filled-button-tn:hover {
  background-color: #2A3D63;
  color: #ffffff;
}
body.single-job .job-filled-button-tn:focus-visible {
  outline: 2px solid #1B2A4A;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  body.single-job .job-filled-panel {
    padding: 22px 20px;
  }
  body.single-job .job-filled-button-tn {
    margin-left: 0;
    margin-top: 12px;
  }
}
/* Apply button row: status indicator sits to the right of the button. */
body.single-job .job-hero-redesign .job-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 22px;
}
body.single-job .job-hero-redesign .job-hero-actions .job-available {
  margin-top: 0;
}


/* ---------- Editorial body ---------- */
body.single-job .job-description .entry-content p {
  font-size: 17px;
  line-height: 1.75;
}
body.single-job .job-description .entry-content h2 {
  font-size: 24px;
  color: #1b2a4a;
  margin: 34px 0 12px;
}

/* Editorial eyebrows above major sections (injected by the MU plugin from
   heading text). Blue-gray, uppercase, letter-spaced; spacing, not divider
   lines, separates the sections. */
body.single-job .job-description .entry-content .job-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #60708c;
  margin: 36px 0 6px;
}
body.single-job .job-description .entry-content .job-eyebrow + h2,
body.single-job .job-description .entry-content .job-eyebrow + h3,
body.single-job .job-description .entry-content .job-eyebrow + h4 {
  margin-top: 0;
}
body.single-job .job-description .entry-content .job-highlights-panel .job-eyebrow {
  margin-top: 0;
}

/* Description top: tighten the stack between the hero, the breadcrumb and
   the first paragraph (the removed intro headings used to fill this space). */
body.single-job #main section.page-section.job-description {
  padding-top: 14px;
}
body.single-job #main section.page-section.job-description .container {
  padding-top: 0;
}
body.single-job #main section.page-section.job-description .entry-content {
  margin-top: 4px;
}
body.single-job .job-description .entry-content .job-eyebrow-intro {
  margin-top: 10px;
}
body.single-job .job-description .container,
body.single-job .job-description .inner,
body.single-job .job-description .content-section.primary,
body.single-job .job-description .entry-content {
  padding-top: 0;
  margin-top: 0;
}
body.single-job .job-description .breadcrumbs {
  margin-top: 0;
  margin-bottom: 14px;
}
body.single-job .job-description .entry-content > p:first-of-type {
  margin-top: 0;
}

body.single-job .job-description .entry-content h3 {
  font-size: 19px;
  color: #1b2a4a;
  margin: 24px 0 8px;
}
body.single-job .job-description .entry-content ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
body.single-job .job-description .entry-content li {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 7px;
}

/* Job Highlights: flat editorial list (Mark, Oct 15) — no panel, no border,
   no bullets. Each highlight is a semibold navy label on its own line with
   the original text beneath, separated by hairline dividers. The transform
   only builds the wrapper when a highlights section exists. */
body.single-job .job-highlights-panel {
  background-color: #F2F5FA;
  border: none;
  border-radius: 6px;
  padding: 22px;
  /* Negative side margins exactly offset the padding, so the eyebrow,
     heading and highlight text stay on the job content's left edge with no
     indent (Mark, Oct 15); the tint extends past the text on both sides.
     Vertical margins are reduced to offset the added padding. */
  margin: 14px -22px 18px;
}
@media (max-width: 768px) {
  body.single-job .job-highlights-panel {
    padding: 18px 14px;
    margin-left: -14px;
    margin-right: -14px;
  }
}
body.single-job .job-highlights-panel h3:first-child {
  margin-top: 0;
}
body.single-job .job-description .entry-content .job-highlights-panel ul {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 0;
}
/* No indent (Mark, Oct 15): list items sit on the same left edge as the
   heading — the general content list padding must not leak into the panel.
   High-specificity selectors on purpose: the editorial list rules for the
   job description outrank the plain panel selectors. */
body.single-job .job-description .entry-content .job-highlights-panel li {
  padding-left: 0;
  margin-left: 0;
}
body.single-job .job-highlights-panel li {
  font-size: 16.5px;
  line-height: 1.75;
  color: #3d4756;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #DCE3EE;
}
body.single-job .job-highlights-panel li::before,
body.single-job .job-highlights-panel li::marker {
  content: none;
  display: none;
}
body.single-job .job-highlights-panel li:first-child {
  padding-top: 8px;
}
body.single-job .job-highlights-panel li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
body.single-job .job-highlights-panel li strong,
body.single-job .job-highlights-panel li b {
  display: block;
  font-weight: 600;
  color: #1b2a4a;
  margin-bottom: 3px;
}

/* ---------- LinkedIn follow callout (below the apply trust panels) ---------- */
/* The whole panel is the link (Mark, Oct 15) and it changes color on hover.
   clear: both matters: the theme floats the section's content columns out
   of .inner without clearing them, and a flex/grid box (a BFC) gets
   narrowed and offset by those floats — clearing makes the panel span the
   form container's full width, edge to edge with it. */
body.single-job .job-linkedin-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  clear: both;
  background-color: #F2F5FA;
  border-left: 3px solid #C6D3E7;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 14px 0 0;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
body.single-job .job-linkedin-callout:hover {
  background-color: #e9eff8;
  border-left-color: #1B2A4A;
  text-decoration: none;
}
body.single-job .job-linkedin-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: #e8edf4;
  color: #33415c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
body.single-job .job-linkedin-text {
  flex: 1 1 auto;
}
body.single-job .job-linkedin-heading {
  font-size: 17px;
  font-weight: 700;
  color: #33415c;
  margin: 0 0 2px;
  line-height: 1.35;
}
body.single-job .job-linkedin-sub {
  font-size: 14.5px;
  color: #66707d;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  body.single-job .job-linkedin-callout {
    flex-wrap: wrap;
  }
}

/* ---------- Sidebar (editorial rows, no nested cards) ----------
   Shared by the jobs archive and the blog archive preview via :is()
   selectors (Mark, Oct 16: one sidebar system, no drift). Blog-only
   eyebrow content is defined in the blog section below. */
body.single-job .widget-area {
  background: transparent;
}
body.single-job .widget-area .widget {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 36px;
}
/* All three list sections share the same pale panel treatment and padding,
   so their text edges align and the sidebar reads as one designed unit. */
body.single-job .widget-area .widget_related_jobs,
body.single-job .widget-area .widget_recent_posts,
body.single-job .widget-area .widget_nav_menu {
  background-color: #F8F9FA;
  border-radius: 8px;
  padding: 22px 22px 12px;
}
body.single-job .widget-area .widget-title {
  font-size: 21px;
  color: #1b2a4a;
  background: none;
  padding: 0;
  margin: 0 0 4px;
}
/* Editorial eyebrows above the widget titles (CSS-generated; titles and
   dynamic content untouched). */
body.single-job .widget-area .widget-title::before {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #60708c;
  margin: 0 0 5px;
}
body.single-job .widget-area .widget_related_jobs .widget-title::before {
  content: "Current Openings";
}
body.single-job .widget-area .widget_nav_menu .widget-title::before {
  content: "Explore Jobs";
}
body.single-job .widget-area .widget_recent_posts .widget-title::before {
  content: "More to Explore";
}
body.single-job .widget-area .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
body.single-job .widget-area .widget li {
  background: transparent !important;
  box-shadow: none;
  /* No divider lines (Mark, Oct 16, adopted from the blog sidebar test):
     rows are defined by spacing and the hover fill alone. The li carries
     5px of vertical padding so adjacent hover surfaces keep breathing
     room above and below. */
  padding: 5px 0;
  margin: 0;
  border-bottom: none;
}
body.single-job .widget-area .widget li:last-child {
  border-bottom: none;
}
/* Hover boundaries (Mark, Oct 15): the hover surface needs 12-16px of
   internal padding on both sides — text to its left edge, chevron to its
   right edge — while the text and chevron stay exactly where they were.
   The negative margins widen the link's background box 12px on each side
   and the 14px horizontal padding restores the content positions, so the
   hover surface ends 10px clear of the panel edges, symmetrically, and
   the chevron sits inside the surface instead of on its boundary. Row
   heights and the dividers (on the li, content width) are unchanged. */
body.single-job .widget-area .widget li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  margin: 0 -12px;
  border-radius: 6px;
  background: transparent !important;
  color: #383f4a;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
body.single-job .widget-area .widget li a::after,
body.single-job .widget-area .widget.widget_nav_menu li a::after,
body.single-job .widget-area .widget.widget_related_jobs li a::after,
body.single-job .widget-area .widget.widget_recent_posts li a::after,
body.single-job .widget-area .widget.widget_categories li a::after {
  content: "\203A";
  position: static;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #F2A900;
  flex: 0 0 20px;
  text-align: right;
  transition: transform 0.15s ease;
}
body.single-job .widget-area .widget li a:hover {
  background-color: #F0F3F8 !important;
  color: #1b2a4a;
  text-decoration: none;
}
body.single-job .widget-area .widget li a:focus-visible,
body.single-job .widget-area .widget_next_related_job a:focus-visible {
  background-color: #f4f6fa;
  outline: 2px solid #1B2A4A;
  outline-offset: -2px;
}
body.single-job .widget-area .widget li a:hover::after {
  transform: translateX(3px);
}
/* View All Jobs: the related-jobs list's final row, styled like every
   other row (Mark, Oct 15: not bold, not blue). */
body.single-job .widget-area .widget_related_jobs li:last-child a {
  font-weight: 500;
  color: #383f4a;
}
/* The category menu's trailing "All Jobs" item is removed in the redesign
   (Mark, Oct 15) at the display layer only: the shared menu itself is
   untouched, so the live sidebar keeps it until go-live. The row above it
   becomes the last visible row and loses its divider. */
body.single-job .widget-area .widget_nav_menu li#menu-item-3458 {
  display: none;
}
body.single-job .widget-area .widget_nav_menu li:has(+ li#menu-item-3458) {
  border-bottom: none;
}

body.single-job .widget-area .widget_next_related_job p {
  margin: 0;
}
/* View Next Job (Mark, Oct 15): the one sidebar element the redesign
   missed — it kept the theme's stock button skin (solid orange block,
   black text, square corners), and the redesign's orange chevron was
   invisible on the orange background. Restyled to the site's button
   standard: MatchBuilt orange, navy text, 8px radius matching the
   panels, navy chevron at the right, darker orange on hover. The
   !important colors are needed because the theme paints this link's
   text with !important black in its button states. */
body.single-job .widget-area .widget_next_related_job a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  background-color: #F2A900;
  border: none;
  border-radius: 8px;
  color: #1b2a4a !important;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
body.single-job .widget-area .widget_next_related_job a::after {
  content: "\203A";
  position: static;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: #1b2a4a;
  flex: 0 0 20px;
  text-align: right;
  margin: 0;
}
body.single-job .widget-area .widget_next_related_job a:hover {
  background-color: #d99500;
  color: #1b2a4a !important;
  text-decoration: none;
}
body.single-job .widget-area .widget_next_related_job a:focus-visible {
  outline: 2px solid #1B2A4A;
  outline-offset: 2px;
}
/* Mobile-only sidebar copy (rendered after the apply section); desktop hides it,
   and mobile hides the in-section sidebar so the copy is the one that shows. */
body.single-job .job-sidebar-mobile {
  display: none;
}

/* ---------- Quick Apply ---------- */
/* The whole apply section reads as one contained panel, echoing the sidebar
   panels: a white surface with the same corner radius on the section band. */
body.single-job .job-application .inner {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px 32px;
}
@media (max-width: 767px) {
  /* Mobile: the desktop form's content is display:none at this width (the
     mobile form renders in the description flow instead), so the white
     panel wrapper would show up as an empty box — strip the panel
     treatment entirely. Mark caught this testing on his phone, Oct 15. */
  body.single-job .job-application .inner {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }
}
body.single-job .apply-eyebrow {
  color: #d18d00;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
body.single-job .job-application h2,
body.single-job .mobile-quick-apply h2 {
  font-size: 28px;
  color: #1b2a4a;
  margin: 0 0 6px;
}
body.single-job .apply-support {
  color: #555555;
  font-size: 16px;
  margin: 0 0 6px;
}
body.single-job .gform_wrapper .gfield_label {
  font-weight: 600;
  color: #1b2a4a;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 7px;
}
body.single-job .gform_wrapper .gfield {
  margin-bottom: 16px;
}
body.single-job .gform_wrapper .ginput_container_name label,
body.single-job .gform_wrapper .ginput_container label {
  font-size: 12.5px;
  color: #66707d;
}
body.single-job .gform_wrapper input[type="text"],
body.single-job .gform_wrapper input[type="email"],
body.single-job .gform_wrapper input[type="tel"] {
  height: 48px;
}
body.single-job .gform_wrapper input[type="text"],
body.single-job .gform_wrapper input[type="email"],
body.single-job .gform_wrapper input[type="tel"],
body.single-job .gform_wrapper textarea,
body.single-job .gform_wrapper select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #c9cfda;
  border-radius: 5px;
  font-size: 16px;
  background-color: #ffffff;
  box-sizing: border-box;
}
body.single-job .gform_wrapper input[type="text"]:focus,
body.single-job .gform_wrapper input[type="email"]:focus,
body.single-job .gform_wrapper input[type="tel"]:focus,
body.single-job .gform_wrapper textarea:focus {
  border-color: #1B2A4A;
  outline: 2px solid rgba(27, 42, 74, 0.18);
}
body.single-job .gform_wrapper textarea {
  height: 96px;
  resize: vertical;
}
body.single-job .gform_wrapper .ginput_container_fileupload {
  border: 1.5px dashed #b9c2d4;
  border-radius: 6px;
  padding: 16px 18px;
  background-color: #f7f9fc;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.single-job .gform_wrapper .ginput_container_fileupload input[type="file"] {
  display: block;
  max-width: 100%;
  margin: 0;
  /* Fixed height + clipping: the hidden status-text line is cut away so the
     button alone defines the input's height and centers in the box. */
  height: 46px;
  overflow: hidden;
  /* The native "No file chosen" status text is hidden (transparent color,
     zero font size so its line collapses); the button keeps its own size. */
  font-size: 0;
  color: transparent;
}
body.single-job .gform_wrapper .ginput_container_fileupload input[type="file"]::file-selector-button {
  display: block;
  background-color: #ffffff;
  color: #1B2A4A;
  border: 1.5px solid #1B2A4A;
  padding: 9px 18px;
  border-radius: 5px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.15s ease;
}
body.single-job .gform_wrapper .ginput_container_fileupload input[type="file"]::file-selector-button:hover {
  background-color: #eef2fa;
}
body.single-job .gform_wrapper .gfield_error .ginput_container_fileupload {
  border-color: #c0392b;
  background-color: #fdf3f2;
}
body.single-job .gform_wrapper .gform_fileupload_rules {
  display: none;
}
/* Upload meta under the dashed box (added by the MU plugin): the chosen
   filename, mirrored by script since the native status text stays hidden,
   and a muted supported-formats helper line. */
body.single-job .gform_wrapper .mb-upload-meta {
  margin-top: 8px;
}
body.single-job .gform_wrapper .mb-file-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1b2a4a;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
body.single-job .gform_wrapper .mb-file-name::before {
  content: "✓";
  color: #1e9e5a;
  font-weight: 700;
  margin-right: 7px;
}
body.single-job .gform_wrapper .mb-file-name[hidden] {
  display: none;
}
body.single-job .gform_wrapper .mb-file-error {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #b03a2e;
  margin-bottom: 2px;
}
body.single-job .gform_wrapper .mb-file-error[hidden] {
  display: none;
}
/* Selection-time invalid file: same treatment as the form's own error
   state for the upload box. */
body.single-job .gform_wrapper .ginput_container_fileupload.mb-invalid {
  border-color: #c0392b;
  background-color: #fdf3f2;
}
body.single-job .gform_wrapper .mb-upload-help {
  display: block;
  font-size: 12.5px;
  color: #66707d;
}
body.single-job .gform_wrapper .gform_footer {
  margin-top: 6px;
}
body.single-job .gform_wrapper .gform_footer input[type="submit"],
body.single-job .gform_wrapper .gform_footer button[type="submit"] {
  background-color: #F2A900;
  color: #1b2a4a;
  border: none;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 15px 30px;
  border-radius: 4px;
  width: auto;
  min-width: 240px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
body.single-job .gform_wrapper .gform_footer input[type="submit"]:hover,
body.single-job .gform_wrapper .gform_footer button[type="submit"]:hover {
  background-color: #d99600;
}
body.single-job .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
body.single-job .gform_wrapper .gform_footer button[type="submit"]:focus-visible {
  outline: 2px solid #1B2A4A;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  body.single-job .gform_wrapper .gform_footer input[type="submit"],
  body.single-job .gform_wrapper .gform_footer button[type="submit"] {
    width: 100%;
  }
}

/* ---------- Apply section layout: form full width, trust content below ---------- */
@media (min-width: 769px) {
  body.single-job .job-application .content-section.primary,
  body.single-job .job-application .content-section.secondary {
    width: 100% !important;
    float: none !important;
    left: 0 !important;
  }
  body.single-job .job-application .content-section.secondary {
    margin-top: 34px;
  }
}

/* ---------- Trust panels (below the apply panel, on the gray band) ---------- */
/* Two equal columns on desktop (grid stretch equalizes the heights, text
   stays top-aligned); they stack when the column gets too narrow. The row
   spans the same width as the form container above it. */
body.single-job .job-trust-panels {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  /* Clear the theme's floated section columns (see the LinkedIn callout
     note): without this the grid box is narrowed/offset by the floats and
     no longer matches the form container's width. */
  clear: both;
}
@media (max-width: 900px) {
  body.single-job .job-trust-panels {
    grid-template-columns: 1fr;
  }
}
/* Width match with the form container: the theme widens .inner past the
   container's content box with negative margins (-15px from 768px, -20px
   from 1200px). The trust panels and LinkedIn panel are plain container
   children, so they need the same negative margins or they sit inset from
   the form's edges by exactly that amount (Mark caught this twice). */
@media (min-width: 768px) {
  body.single-job .job-trust-panels,
  body.single-job .job-linkedin-callout {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media (min-width: 1200px) {
  body.single-job .job-trust-panels,
  body.single-job .job-linkedin-callout {
    margin-left: -20px;
    margin-right: -20px;
  }
}
body.single-job .job-trust-panels .eo-statement {
  margin-top: 0;
}
body.single-job .confidentiality-panel {
  background-color: #ffffff;
  border-left: 3px solid #C6D3E7;
  border-radius: 8px;
  padding: 16px 20px;
}
body.single-job .confidentiality-panel .confidentiality-heading {
  color: #33415c;
  font-size: 16px;
  margin: 0 0 8px;
}
body.single-job .confidentiality-panel p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #55606e;
  margin: 0 0 10px;
}
body.single-job .confidentiality-panel p:last-child {
  margin-bottom: 0;
}
/* Equal Opportunity: identical panel treatment to Confidentiality — same
   background, border, heading and body typography — stacked beneath it. */
body.single-job .eo-statement {
  background-color: #ffffff;
  border-left: 3px solid #C6D3E7;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 12px 0 0;
}
body.single-job .eo-statement h4 {
  font-size: 16px;
  font-weight: 700;
  color: #33415c;
  margin: 0 0 8px;
}
body.single-job .eo-statement p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #55606e;
  margin: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  body.single-job .job-hero-redesign h1.entry-title {
    font-size: 28px;
  }
  body.single-job #main section.page-section.job-hero-redesign .container {
    padding-top: 24px;
    padding-bottom: 28px;
  }
  body.single-job .job-hero-redesign .btn-apply {
    display: block;
    text-align: center;
  }
  body.single-job .gform_wrapper .gf_left_half,
  body.single-job .gform_wrapper .gf_right_half {
    width: 100%;
    float: none;
  }
  /* On mobile the in-section sidebar hides; the copy after the apply section shows. */
  body.single-job .job-description .widget-area {
    display: none;
  }
  body.single-job .job-sidebar-mobile {
    display: block;
  }
  body.single-job .job-sidebar-mobile .widget-area {
    margin-top: 10px;
  }
}

/* ============================================================
   Jobs archive tile prototype (Mark's tile spec, Oct 15, 2026)
   Preview only: the tile markup renders solely on the main jobs
   archive with ?jobpreview=1, for the first three posts. Eyebrow
   gold #C58A00 and meta slate #64748B sampled from Mark's mock;
   hover values are his spec (#F2F5FA bg, #9AAFD0 border).
   Selectors carry the theme's full archive path plus .hentry:
   the theme styles these anchors itself (gray #f5f5f5 bg, big
   left padding for the thumbnail column, 171px min-height,
   #e8e8e8 hover), and shorter selectors lose to it.
   ============================================================ */
body.mb-archive-preview section.page-section.job-index article.hentry.mb-tile-article {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 18px;
  float: none;
  width: auto;
}
body.mb-archive-preview section.page-section.job-index article.hentry.mb-tile-article a.mb-job-tile {
  display: block;
  background: #ffffff;
  border: 1px solid #E0E4EB;
  border-radius: 8px;
  padding: 22px 24px;
  min-height: 0;
  position: static;
  color: #1b2a4a;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
body.mb-archive-preview section.page-section.job-index article.hentry.mb-tile-article a.mb-job-tile:hover {
  background: #F2F5FA;
  border-color: #9AAFD0;
}
body.mb-archive-preview section.page-section.job-index article.hentry.mb-tile-article a.mb-job-tile:focus-visible {
  outline: 3px solid #1B2A4A;
  outline-offset: 2px;
}
body.mb-archive-preview .mb-tile-eyebrow {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #C58A00;
}
body.mb-archive-preview .mb-tile-title {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 1.3;
  font-weight: 700;
  color: #1b2a4a;
}
/* Meta stacks into two compact rows (Mark, Oct 15): location on the
   first row, status on the second, so the dot no longer shifts with
   location length. Icon and dot share a fixed 16px column and both
   text runs start at the same 24px offset; row gap is a tight 5px. */
body.mb-archive-preview .mb-tile-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: 15px;
  color: #64748B;
}
body.mb-archive-preview .mb-tile-loc {
  display: inline-flex;
  align-items: center;
}
body.mb-archive-preview .mb-tile-loc i {
  width: 16px;
  text-align: center;
  margin-right: 8px;
  font-size: 14px;
  color: #8a97a8;
}
body.mb-archive-preview .mb-tile-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.mb-archive-preview .mb-tile-dot {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  background: #2fbf71;
  flex: none;
}
body.mb-archive-preview .mb-tile-status.filled .mb-tile-dot {
  background: #EF4444;
}
@media (max-width: 640px) {
  body.mb-archive-preview section.page-section.job-index article.hentry.mb-tile-article a.mb-job-tile { padding: 18px 20px; }
  body.mb-archive-preview .mb-tile-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mb-archive-preview section.page-section.job-index article.hentry.mb-tile-article a.mb-job-tile { transition: none; }
}

/* ============================================================
   Jobs archive: Talent Network tile (Mark's spec, Oct 21, 2026).
   The injected card in archive-job.html.twig reuses the job tile
   markup (article.hentry.mb-tile-article > a.mb-job-tile) and so
   inherits the card padding, slots, type and hover transition
   above unchanged. Only the surface differs: pale sidebar gray #F8F9FA
   at rest, one step deeper #E8EDF2 on hover, and the status dot
   in MatchBuilt orange instead of the open/filled state colors.
   The location line carries no pin icon, so its text starts at
   the card's text edge, as in Mark's approved mock.
   ============================================================ */
body.mb-archive-preview section.page-section.job-index article.hentry.mb-tile-article a.mb-job-tile.mb-tn-tile {
  background: #F2F5FA;
}
body.mb-archive-preview section.page-section.job-index article.hentry.mb-tile-article a.mb-job-tile.mb-tn-tile:hover {
  background: #E8EDF2;
}
body.mb-archive-preview .mb-tn-tile .mb-tile-dot {
  background: #F2A900;
}

/* ============================================================
   Jobs archive preview: sidebar port (Oct 15, 2026)
   The single-job sidebar treatment cloned onto the archive
   under the preview body class, so the archive sidebar matches
   the redesigned job-page sidebar rule for rule. Scoped to
   body.mb-archive-preview (flag-gated).
   ============================================================ */


/* ---------- Sidebar (editorial rows, no nested cards) ---------- */
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area {
  background: transparent;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget {
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 36px;
}

/* AI tool pages only (Mark, Oct 17, 2026): the sidebar's first panel sat
   about 28px below the chat box top. Cause: the theme gives the sidebar
   column (.content-section.secondary, which is also the .widget-area) a
   margin-top of 24px at 768px and up, while the chat column has none.
   Zero it at the two-column widths so the tops align. The #main selector
   is required: the theme rule carries four classes and outranked a plain
   body.mb-ai-single .widget-area attempt. Mobile stacking untouched. */
@media (min-width: 768px) {
  body.mb-ai-single #main section.page-section.has-sidebar .content-section.secondary.widget-area { margin-top: 0; }
}

/* All three list sections share the same pale panel treatment and padding,
   so their text edges align and the sidebar reads as one designed unit. */
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_related_jobs,
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_recent_posts,
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_nav_menu,
body.mb-blog-preview .widget-area .widget_categories {
  background-color: #F8F9FA;
  border-radius: 8px;
  padding: 22px 22px 12px;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget-title {
  font-size: 21px;
  color: #1b2a4a;
  background: none;
  padding: 0;
  margin: 0 0 4px;
}

/* Editorial eyebrows above the widget titles (CSS-generated; titles and
   dynamic content untouched). */
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget-title::before {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #60708c;
  margin: 0 0 5px;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_related_jobs .widget-title::before {
  content: "Current Openings";
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_nav_menu .widget-title::before {
  content: "Explore Jobs";
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_recent_posts .widget-title::before {
  content: "More to Explore";
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget li {
  background: transparent !important;
  box-shadow: none;
  /* No divider lines (Mark, Oct 16, adopted from the blog sidebar test):
     rows are defined by spacing and the hover fill alone. The li carries
     5px of vertical padding so adjacent hover surfaces keep breathing
     room above and below. */
  padding: 5px 0;
  margin: 0;
  border-bottom: none;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget li:last-child {
  border-bottom: none;
}

/* Hover boundaries (Mark, Oct 15): the hover surface needs 12-16px of
   internal padding on both sides — text to its left edge, chevron to its
   right edge — while the text and chevron stay exactly where they were.
   The negative margins widen the link's background box 12px on each side
   and the 14px horizontal padding restores the content positions, so the
   hover surface ends 10px clear of the panel edges, symmetrically, and
   the chevron sits inside the surface instead of on its boundary. Row
   heights and the dividers (on the li, content width) are unchanged. */
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  margin: 0 -12px;
  border-radius: 6px;
  background: transparent !important;
  color: #383f4a;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget li a::after,
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget.widget_nav_menu li a::after,
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget.widget_related_jobs li a::after,
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget.widget_recent_posts li a::after,
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget.widget_categories li a::after {
  content: "\203A";
  position: static;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #F2A900;
  flex: 0 0 20px;
  text-align: right;
  transition: transform 0.15s ease;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget li a:hover {
  background-color: #F0F3F8 !important;
  color: #1b2a4a;
  text-decoration: none;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget li a:focus-visible,
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_next_related_job a:focus-visible {
  background-color: #f4f6fa;
  outline: 2px solid #1B2A4A;
  outline-offset: -2px;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget li a:hover::after {
  transform: translateX(3px);
}

/* View All Jobs: the related-jobs list's final row, styled like every
   other row (Mark, Oct 15: not bold, not blue). */
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_related_jobs li:last-child a {
  font-weight: 500;
  color: #383f4a;
}

/* The category menu's trailing "All Jobs" item is removed in the redesign
   (Mark, Oct 15) at the display layer only: the shared menu itself is
   untouched, so the live sidebar keeps it until go-live. The row above it
   becomes the last visible row and loses its divider. */
body.mb-archive-preview .widget-area .widget_nav_menu li#menu-item-3458 {
  display: none;
}

body.mb-archive-preview .widget-area .widget_nav_menu li:has(+ li#menu-item-3458) {
  border-bottom: none;
}


:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_next_related_job p {
  margin: 0;
}

/* View Next Job (Mark, Oct 15): the one sidebar element the redesign
   missed — it kept the theme's stock button skin (solid orange block,
   black text, square corners), and the redesign's orange chevron was
   invisible on the orange background. Restyled to the site's button
   standard: MatchBuilt orange, navy text, 8px radius matching the
   panels, navy chevron at the right, darker orange on hover. The
   !important colors are needed because the theme paints this link's
   text with !important black in its button states. */
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_next_related_job a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  background-color: #F2A900;
  border: none;
  border-radius: 8px;
  color: #1b2a4a !important;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_next_related_job a::after {
  content: "\203A";
  position: static;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: #1b2a4a;
  flex: 0 0 20px;
  text-align: right;
  margin: 0;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_next_related_job a:hover {
  background-color: #d99500;
  color: #1b2a4a !important;
  text-decoration: none;
}

:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_next_related_job a:focus-visible {
  outline: 2px solid #1B2A4A;
  outline-offset: 2px;
}
/* Single blog posts (Mark, Oct 17, 2026): the shared sidebar treatment
   above now includes body.single-post. Its Blog Categories menu takes
   the blog archive's eyebrow; Recent Blog Posts and Recent Job Posts
   keep the shared defaults (More to Explore / Current Openings). */
body.single-post .widget-area .widget_nav_menu .widget-title::before {
  content: "Explore Topics";
}

/* Archive preview: View More Filled Jobs button in the site
   button standard while previewing. */
body.mb-archive-preview section.page-section.job-index .extra-posts-toggle-container a.extra-posts-toggle {
  display: inline-block;
  background: #F2A900;
  color: #1b2a4a !important;
  border: 0;
  border-radius: 8px;
  padding: 14px 28px;
  font-weight: 600;
  text-decoration: none;
}
body.mb-archive-preview section.page-section.job-index .extra-posts-toggle-container a.extra-posts-toggle:hover {
  background: #d99500;
}

/* Archive preview: align the sidebar top with the first tile. The theme
   drops every has-sidebar secondary column by margin-top: 24px (48px at
   small widths) via section.page-section.has-sidebar .content-section.
   secondary; the single-job section overrides that itself, the archive
   section does not, which left the sidebar panel 24px below the first
   tile. Preview scope only. */
body.mb-archive-preview section.page-section.job-index .content-section.secondary {
  margin-top: 0;
}

/* Archive preview sidebar changes (Mark, Oct 15): the Recently Posted
   Jobs panel duplicates this page's tile list, so it is hidden here
   (single-job pages keep it). The AI Tools panel (preview widget,
   appended under Recent Blog Posts) gets the shared panel treatment,
   and its own eyebrow. Content per Mark's reference panel. */
body.mb-archive-preview .widget-area .widget_related_jobs {
  display: none;
}
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_mb_ai_tools {
  background-color: #F8F9FA;
  border-radius: 8px;
  padding: 22px 22px 12px;
}
:is(body.mb-archive-preview, body.mb-blog-preview, body.mb-ai-preview, body.mb-ai-single, body.single-post) .widget-area .widget_mb_ai_tools .widget-title::before {
  content: "Career Resources";
}

/* Archive preview: "Current Job Openings" editorial heading above the
   first active tile (Mark's brief, Oct 15). No panel, divider, or
   border; eyebrow matches the redesign's section eyebrows; ~22px
   between the heading and the first tile. */
body.mb-archive-preview .mb-openings-heading {
  margin: 6px 0 22px;
}
body.mb-archive-preview .mb-openings-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #60708C;
}
body.mb-archive-preview .mb-openings-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  color: #1b2a4a;
}
@media (max-width: 640px) {
  body.mb-archive-preview .mb-openings-heading {
    margin-bottom: 18px;
  }
  body.mb-archive-preview .mb-openings-title {
    font-size: 22px;
  }
}

/* AI Tools panel: View All row uses the standard row styling
   (Mark, Oct 15: do not bold it). */

/* ---------- Mobile single-job refinements (Mark, Oct 15) ---------- */
@media (max-width: 767px) {
  /* More room above the hero eyebrow on phones. */
  body.single-job #main section.page-section.job-hero-redesign .container {
    padding-top: 44px;
  }
  /* Clear separation between the job description and the apply form on
     phones: the mobile Quick Apply block becomes its own pale panel
     (same #F2F5FA as the confirmation panel) instead of flowing
     straight out of the description text. */
  body.single-job .mobile-quick-apply {
    background-color: #F2F5FA;
    border: 1px solid #E0E4EB;
    border-radius: 8px;
    padding: 24px 18px 20px;
    margin-top: 34px;
  }
}

/* ---------- Resume-email callout under the form (Mark, Oct 15) ---------- */
/* The callout moved from the end of the job description into the apply
   section, directly under the form panel: on desktop it follows the form
   a visitor used, and on phones the apply section follows the description
   (with the mobile form), so it lands under the mobile form too. The
   pencil icon and left padding replicate the theme's old in-description
   treatment, which was scoped to that section. */
body.single-job .application-alert {
  position: relative;
  padding-left: 40px;
  min-height: 20px;
  margin-top: 22px;
}
body.single-job .application-alert:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 20px;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f044";
  position: absolute;
  left: 12px;
  top: 14px;
  color: #64a55c;
}

/* ---------- Mobile hero eyebrow: drop the job type (Mark, Oct 15) ---------- */
/* On phones the hero eyebrow keeps category and status only; the job
   type ("Residential Construction") and its separator are hidden so the
   line stays compact. Desktop keeps the full line. */
@media (max-width: 767px) {
  body.single-job .entry-job-category .job-eyebrow-type,
  body.single-job .entry-job-category .job-eyebrow-sep {
    display: none;
  }
  body.single-job .entry-job-category .job-eyebrow-status {
    margin-left: 12px;
  }
}

/* ---------- Mobile hero eyebrow: shorten long category names (Mark, Oct 15) ---------- */
/* On phones, long category names show shortened in the job hero eyebrow:
   Executive Management as "Executive", Land Acquisition and Development
   as "Land". Display-only swaps; the links and their targets are
   unchanged, and desktop keeps the full category names. The hidden text
   gets letter-spacing: 0 so its per-character spacing cannot push the
   swapped word right (Mark caught that indent on the first version). */
@media (max-width: 767px) {
  body.single-job .job-hero-redesign .entry-job-category a[href*="/job-category/executive-management/"],
  body.single-job .job-hero-redesign .entry-job-category a[href*="/job-category/land-acquisition-and-development/"],
  body.single-job .job-hero-redesign .entry-job-category a[href*="/job-category/sales-and-marketing/"] {
    font-size: 0;
    letter-spacing: 0;
  }
  body.single-job .job-hero-redesign .entry-job-category a[href*="/job-category/executive-management/"]:after {
    content: "Executive";
    font-size: 13px;
    letter-spacing: 2.2px;
  }
  body.single-job .job-hero-redesign .entry-job-category a[href*="/job-category/land-acquisition-and-development/"]:after {
    content: "Land";
    font-size: 13px;
    letter-spacing: 2.2px;
  }
  body.single-job .job-hero-redesign .entry-job-category a[href*="/job-category/sales-and-marketing/"]:after {
    content: "Sales & Marketing";
    font-size: 13px;
    letter-spacing: 2.2px;
  }
}

/* The resume-email callout is a mobile-only element (Mark, Oct 15): it
   belongs with the mobile form, so it is hidden wherever the desktop
   form is in use. */
@media (min-width: 768px) {
  body.single-job .application-alert {
    display: none;
  }
}

/* ---------- Discipline archive hero (Mark's brief, Oct 15) ---------- */
/* Category archives trade the photo hero for the single-job hero system:
   the same solid navy (#1b2a4a), the same orange eyebrow type, a white
   title. Shorter than the job hero: eyebrow + title only. */
body.tax-job_category.mb-cat-hero-live #main section.mb-cat-hero {
  background-color: #1b2a4a;
  padding: 0;
}
body.tax-job_category.mb-cat-hero-live .mb-cat-hero .container {
  padding-top: 34px;
  padding-bottom: 38px;
}
body.tax-job_category.mb-cat-hero-live .mb-cat-hero-eyebrow {
  color: #F2A900;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
body.tax-job_category.mb-cat-hero-live .mb-cat-hero h1 {
  color: #ffffff;
  font-size: 38px;
  line-height: 1.2;
  margin: 0;
}
@media (min-width: 768px) {
  body.tax-job_category.mb-cat-hero-live .mb-cat-hero h1 {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  body.tax-job_category.mb-cat-hero-live .mb-cat-hero .container {
    padding-top: 28px;
    padding-bottom: 32px;
  }
}

/* ===== Blog archive redesign (preview: body.mb-blog-preview) =====
   Article tiles reuse the live jobs-archive tile spec rule for rule
   (Mark, Oct 16); the sidebar uses the shared :is() sidebar section
   above with the real widget markup, so the two sidebars cannot drift. */
/* Category hero matches the discipline (job_category) archive hero
   exactly (Mark, Oct 16): same navy, same container padding (34/38,
   28/32 on phones), same eyebrow type and spacing, same title size. */
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-cat-hero { background: #1b2a4a; padding: 0; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-cat-hero .container { padding-top: 34px; padding-bottom: 38px; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-hero-eyebrow { color: #F2A900; font-size: 13px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; margin: 0 0 12px; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-cat-hero h1 { color: #ffffff; font-size: 38px; line-height: 1.2; margin: 0; }
@media (min-width: 768px) { :is(body.mb-blog-preview, body.mb-ai-preview) .mbb-cat-hero h1 { font-size: 48px; } }
@media (max-width: 767px) { :is(body.mb-blog-preview, body.mb-ai-preview) .mbb-cat-hero .container { padding-top: 28px; padding-bottom: 32px; } }
body.mb-blog-preview .widget-area .widget_categories .widget-title::before { content: "Explore Topics"; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-item { display: block; background: #ffffff; border: 1px solid #E0E4EB; border-radius: 8px; padding: 19px 24px; margin: 0 0 17px; color: #1b2a4a; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-item:hover { background: #F2F5FA; border-color: #9AAFD0; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-item:focus-visible { outline: 3px solid #1B2A4A; outline-offset: 2px; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-article { display: flex; gap: 23px; align-items: center; background: transparent; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-thumb { flex: 0 0 35.5%; max-width: 320px; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-thumb img { width: 100%; height: auto; display: block; border-radius: 4px; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-thumb-empty { aspect-ratio: 16 / 9; background: #1b2a4a; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-thumb-empty span { color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 3px; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-body { flex: 1; min-width: 0; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-eyebrow { color: #C58A00; font-size: 12.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin: 0 0 7px; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-title { color: #1b2a4a; font-size: 25px; line-height: 1.3; font-weight: 700; margin: 0 0 11px; }
:is(body.mb-blog-preview, body.mb-ai-preview) .mbb-desc { color: #5B6B82; font-size: 15.5px; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) {
  :is(body.mb-blog-preview, body.mb-ai-preview) .mbb-article { flex-direction: column; gap: 16px; align-items: stretch; }
  :is(body.mb-blog-preview, body.mb-ai-preview) .mbb-thumb { flex: none; width: 100%; max-width: none; }
}
@media (max-width: 640px) {
  :is(body.mb-blog-preview, body.mb-ai-preview) .mbb-item { padding: 18px 20px; }
  :is(body.mb-blog-preview, body.mb-ai-preview) .mbb-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(body.mb-blog-preview, body.mb-ai-preview) .mbb-item { transition: none; }
}

/* ===== AI tools hub refresh (preview: body.mb-ai-preview) =====
   The tool listing renders the blog tile component (archive-ai twig,
   ai_tiles context); the hero adopts the
   navy archive hero; the sidebar reads from the shared sidebar section
   above. The nav menu widget on this page lists recruiting locations
   under an "AI Tools" title, so it gets no eyebrow here. */
body.mb-ai-preview .widget-area .widget_nav_menu .widget-title::before { content: ""; display: none; }
:is(body.mb-ai-preview, body.mb-ai-single) #main section.page-section.bg-color-blue.first { background: #1b2a4a; }
:is(body.mb-ai-preview, body.mb-ai-single) #main section.page-section.bg-color-blue.first .container { padding-top: 34px; padding-bottom: 38px; }
:is(body.mb-ai-preview, body.mb-ai-single) #main section.page-section.bg-color-blue.first h1 { color: #ffffff; font-size: 38px; line-height: 1.2; margin: 0 0 12px; }
@media (min-width: 768px) { :is(body.mb-ai-preview, body.mb-ai-single) #main section.page-section.bg-color-blue.first h1 { font-size: 48px; } }
:is(body.mb-ai-preview, body.mb-ai-single) #main section.page-section.bg-color-blue.first h1::before { content: "Career Resources"; display: block; color: #F2A900; font-size: 13px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; margin: 0 0 12px; }
:is(body.mb-ai-preview, body.mb-ai-single) #main section.page-section.bg-color-blue.first .inner p { color: rgba(255, 255, 255, 0.85); font-size: 17px; line-height: 1.55; max-width: 720px; margin: 0; }

/* Single-tool heroes use the tool's category as the eyebrow (same labels
   as the hub tiles); the hub keeps its Career Resources eyebrow. */
body.mb-ai-single.mb-aicat-resume #main section.page-section.bg-color-blue.first h1::before { content: "Resume"; }
body.mb-ai-single.mb-aicat-career-documents #main section.page-section.bg-color-blue.first h1::before { content: "Career Documents"; }
body.mb-ai-single.mb-aicat-interview-prep #main section.page-section.bg-color-blue.first h1::before { content: "Interview Prep"; }
body.mb-ai-single.mb-aicat-linkedin #main section.page-section.bg-color-blue.first h1::before { content: "LinkedIn"; }

/* ===== AI tool guide sections (body.mb-ai-single) =====
   The "How to Write..." article under each tool, brought into the design
   system: category eyebrow, navy headings, readable measure. */
body.mb-ai-single section.page-section.bg-color-ultra-light-gray { padding-top: 52px; padding-bottom: 56px; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray .inner { max-width: 860px; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray h2 { color: #1b2a4a; font-size: 30px; line-height: 1.25; font-weight: 700; margin: 0 0 16px; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray h2::before { display: block; color: #C58A00; font-size: 12.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin: 0 0 10px; }
body.mb-ai-single.mb-aicat-resume section.page-section.bg-color-ultra-light-gray h2::before { content: "Resume Guide"; }
body.mb-ai-single.mb-aicat-career-documents section.page-section.bg-color-ultra-light-gray h2::before { content: "Career Documents Guide"; }
body.mb-ai-single.mb-aicat-interview-prep section.page-section.bg-color-ultra-light-gray h2::before { content: "Interview Prep Guide"; }
body.mb-ai-single.mb-aicat-linkedin section.page-section.bg-color-ultra-light-gray h2::before { content: "LinkedIn Guide"; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray p { color: #3D4B61; font-size: 16.5px; line-height: 1.65; margin: 0 0 16px; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray h3 { color: #1b2a4a; font-size: 20px; line-height: 1.35; font-weight: 700; margin: 30px 0 10px; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray ul { margin: 0 0 18px; padding-left: 22px; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray li { color: #3D4B61; font-size: 16.5px; line-height: 1.6; margin: 0 0 7px; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray li::marker { color: #C58A00; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray a { color: #1B2A4A; text-decoration: underline; text-underline-offset: 3px; }

/* Guide flow phase 1: numbered section markers (CSS counters, no content
   changes). Numbers sit above each H3 in the eyebrow gold. */
body.mb-ai-single section.page-section.bg-color-ultra-light-gray .inner { counter-reset: mb-guide-step; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray h3 { counter-increment: mb-guide-step; }
body.mb-ai-single section.page-section.bg-color-ultra-light-gray h3::before { content: counter(mb-guide-step, decimal-leading-zero); display: block; color: #C58A00; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; margin: 0 0 5px; }

/* ===== AI reminder callout + generator frame (Mark, Oct 16) =====
   One shared callout injected under the generator iframe on every AI
   tool page (plugin: mb_ai_reminder_callout). Pale blue-gray, muted
   left border, navy title. Plus a subtle card frame around the
   embedded generator so it sits in the design system. */
body.mb-ai-single .mb-ai-reminder { display: flex; gap: 12px; background: #F3F5F9; border-left: 3px solid #93A5BE; border-radius: 8px; padding: 16px 20px; margin-top: 18px; }
body.mb-ai-single .mb-ai-reminder-icon { flex: 0 0 auto; width: 18px; height: 18px; color: #7A8CA8; margin-top: 3px; }
body.mb-ai-single .mb-ai-reminder-main { min-width: 0; }
body.mb-ai-single .mb-ai-reminder-title { color: #1b2a4a; font-weight: 600; font-size: 16px; line-height: 1.35; margin: 0 0 4px; }
body.mb-ai-single .mb-ai-reminder-text { color: #5A6B82; font-size: 15px; line-height: 1.55; margin: 0; }
body.mb-ai-single div:has(> iframe#chat-frame) { border: 1px solid #E0E4EB; border-radius: 10px; background: #ffffff; }

/* ===== Simplified AI tool pages (Mark, Oct 16): LinkedIn Recommendation
   (10420), Bullet Points (9802), Interview Questions (10076). The long
   guides are replaced by a compact white section: eyebrow, tips grid,
   one example. Hero eyebrows per the briefs. ===== */
body.mb-ai-single.mb-aicat-linkedin.page-id-10420 #main section.page-section.bg-color-blue.first h1::before { content: "LinkedIn Tools"; }
body.mb-ai-single.mb-aicat-linkedin.page-id-10221 #main section.page-section.bg-color-blue.first h1::before { content: "LinkedIn Tools"; }
body.mb-ai-single.page-id-9964 #main section.page-section.bg-color-blue.first h1::before { content: "Interview Follow-Up"; }
body.mb-ai-single.page-id-9802 #main section.page-section.bg-color-blue.first h1::before { content: "Résumé Tools"; }
body.mb-ai-single #main section.page-section.bg-color-default.last { padding-top: 26px; padding-bottom: 44px; }
body.mb-ai-single #main section.page-section.bg-color-default.last .inner { max-width: 860px; }
body.mb-ai-single #main section.page-section.bg-color-default.last h2 { color: #1b2a4a; font-size: 30px; line-height: 1.25; font-weight: 700; margin: 36px 0 14px; }
body.mb-ai-single #main section.page-section.bg-color-default.last p { color: #3D4B61; font-size: 16.5px; line-height: 1.65; margin: 0 0 16px; }
body.mb-ai-single #main section.page-section.bg-color-default.last p.mb-section-eyebrow { color: #C58A00; font-size: 12.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin: 0 0 10px; }
body.mb-ai-single #main section.page-section.bg-color-default.last p.mb-section-eyebrow + h2 { margin-top: 0; }
.mb-tips-grid { display: grid; grid-template-columns: 1fr; gap: 20px 40px; margin: 4px 0 8px; }
@media (min-width: 768px) { .mb-tips-grid { grid-template-columns: 1fr 1fr; } }
.mb-tip p { margin: 0 0 16px; }
body.mb-ai-single #main section.page-section.bg-color-default.last .mb-tip p { margin: 0 0 5px; }
body.mb-ai-single #main section.page-section.bg-color-default.last .mb-tip p.mb-tip-title { color: #1b2a4a; font-weight: 700; font-size: 17px; margin: 0 0 5px; }
.mb-example { background: #F3F5F9; border-radius: 8px; padding: 20px 24px; }
body.mb-ai-single #main section.page-section.bg-color-default.last .mb-example p { margin: 0; }
.mb-compare { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 4px 0 6px; }
@media (min-width: 768px) { .mb-compare { grid-template-columns: 1fr 1fr; } }
.mb-compare-box { border-radius: 8px; padding: 18px 20px; }
.mb-compare-basic { background: #F3F5F9; }
.mb-compare-strong { background: #ffffff; border: 1px solid #E0E4EB; }
body.mb-ai-single #main section.page-section.bg-color-default.last .mb-compare-box p { margin: 0 0 8px; }
body.mb-ai-single #main section.page-section.bg-color-default.last .mb-compare-box p:last-child { margin-bottom: 0; }
body.mb-ai-single #main section.page-section.bg-color-default.last p.mb-compare-label { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #68798F; margin: 0 0 8px; }
body.mb-ai-single #main section.page-section.bg-color-default.last .mb-compare-strong p.mb-compare-label { color: #C58A00; }
body.mb-ai-single #main section.page-section.bg-color-default.last p.mb-compare-note { font-size: 13.5px; color: #68798F; margin-top: 12px; }

body.mb-ai-single #main section.page-section.bg-color-default.last .mb-example-email p { margin: 0 0 12px; }
body.mb-ai-single #main section.page-section.bg-color-default.last .mb-example-email p:last-child { margin-bottom: 0; }

/* ===== AI tool pages: tighten in-column section spacing (Mark, Oct 16,
   "too much space on all of them"). The stacked cause: #main .container
   adds 30px top/bottom inside every in-column section, on top of the
   sections' own padding, plus an empty paragraph wpautop leaves after
   the callout. Zero the in-column containers, carry spacing on the
   sections themselves at compact values. ===== */
body.mb-ai-single #main .content-section-ai-template > section.page-section > .container { padding-top: 0; padding-bottom: 0; }
body.mb-ai-single .content-section-ai-template > section.page-section { padding-top: 0; padding-bottom: 0; }
body.mb-ai-single .content-section-ai-template > section.page-section.last { padding-top: 26px; padding-bottom: 44px; }
body.mb-ai-single .mb-ai-reminder + p { display: none; }
body.mb-ai-single #main section.page-section.bg-color-default.last h2 { margin-top: 28px; }

/* AI tool pages, mobile only (Mark, Oct 16): the gap between the last
   content section and the stacked sidebar stacked the section's 44px
   bottom padding on the theme's 48px secondary-column margin-top
   (section.page-section.has-sidebar .content-section.secondary),
   leaving ~92px of white space above the sidebar. Carry the whole
   gap on the section padding at a compact 20px. Desktop keeps the
   theme's 24px sidebar alignment drop. */
@media (max-width: 767px) {
  body.mb-ai-single .content-section-ai-template > section.page-section.last { padding-bottom: 20px; }
  body.mb-ai-single section.page-section.has-sidebar .content-section.secondary { margin-top: 0; }
}
body.mb-ai-single #main section.page-section.bg-color-default.last p.mb-section-eyebrow + h2 { margin-top: 0; }

/* ===== AI hub icon-chip tiles (Option 2 Primary, approved Oct 16, 2026) =====
   The hub tiles swap the Canva image thumb for a navy icon chip with an
   inline SVG (sprite lives in archive-ai.html.twig). Scoped to
   body.mb-ai-preview so the blog tiles that share the .mbb-* component
   keep the image treatment. Icon accent classes (.mbacc / .mbacc-fill /
   .mbfill) style the sprite symbols, whose markup only exists on this
   page. */
body.mb-ai-preview .mbb-item { margin-bottom: 14px; }
body.mb-ai-preview .mbb-article { gap: 20px; }
body.mb-ai-preview .mbb-title { margin: 0 0 8px; }
body.mb-ai-preview .mbb-desc { color: #3D4B61; font-size: 16.5px; display: block; overflow: visible; }
body.mb-ai-preview .mbb-chip { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 14px; background: #1B2A4A; display: flex; align-items: center; justify-content: center; color: #ffffff; }
body.mb-ai-preview .mbb-chip svg { width: 42px; height: 42px; display: block; }
.mbacc { stroke: #F2A900; }
.mbacc-fill { fill: #F2A900; stroke: none; }
.mbfill { fill: #ffffff; stroke: none; }
@media (max-width: 860px) {
  /* Icon aligns with the title, not the whole text block (Mark,
     Oct 16): top-align the row and drop the chip by the eyebrow
     height plus half the title/chip height difference, so the 56px
     chip spans the two-line title. */
  body.mb-ai-preview .mbb-article { flex-direction: row; gap: 14px; align-items: flex-start; }
  body.mb-ai-preview .mbb-chip { width: 56px; height: 56px; margin-top: 30px; }
  body.mb-ai-preview .mbb-chip svg { width: 31px; height: 31px; }
}
@media (max-width: 640px) {
  body.mb-ai-preview .mbb-item { padding: 16px; }
  body.mb-ai-preview .mbb-title { font-size: 21px; }
  body.mb-ai-preview .mbb-chip { margin-top: 25px; }
}

/* ============================================================
   Single blog article design (Mark, Oct 17, 2026)
   The approved article-page refinement, scoped to body.single-post.
   The sidebars are NOT touched here — they keep the shared sidebar
   treatment above, which this section uses as its visual reference
   (panels #F8F9FA, radius 8px, eyebrows 11px / 700 / 2px / #60708c,
   titles 21px navy #1b2a4a). Gated by ARTICLE_REDESIGN_LIVE in the
   MU plugin for the PHP pieces (category body class, takeaways
   transform); the pure-CSS pieces below apply to single posts,
   which is the only surface this stylesheet's single-post rules
   have ever targeted.
   ============================================================ */

/* Category eyebrow above the featured image (CSS-generated from
   the mb-cat-* body class the plugin adds; same technique as the
   sidebar widget-title eyebrows). */
body.single-post[class*="mb-cat-"] .post-main .content-section.primary::before {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #60708c;
  margin: 0 0 12px;
}
body.single-post.mb-cat-hiring-tips .post-main .content-section.primary::before { content: "Hiring Tips"; }
body.single-post.mb-cat-career-development-tips .post-main .content-section.primary::before { content: "Career Development Tips"; }
body.single-post.mb-cat-interview-tips .post-main .content-section.primary::before { content: "Interview Tips"; }
body.single-post.mb-cat-linkedin-tips .post-main .content-section.primary::before { content: "LinkedIn Tips"; }
body.single-post.mb-cat-resume-tips .post-main .content-section.primary::before { content: "Resume Tips"; }

/* Article H1: navy, matching the Key Takeaways and sidebar
   headings (Mark, Oct 17, 2026). Color only — size, weight, and
   spacing stay with the theme. */
body.single-post .entry-header h1.entry-title { color: #1b2a4a; }

/* Featured image: soft rounded corners matching the panels. */
body.single-post .post-main .img-container {
  border-radius: 8px;
  overflow: hidden;
}

/* Breadcrumbs: visual refinement only. The full Yoast markup and
   text stay in the HTML; the " / " text-node separators are
   visually replaced by chevrons, type drops to 12px muted gray,
   and the final item truncates on one line on desktop. */
body.single-post .breadcrumbs {
  font-size: 12px;
  color: #98a1b0;
}
body.single-post .breadcrumbs > span {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 0;
}
body.single-post .breadcrumbs > span > span {
  font-size: 12px;
  white-space: nowrap;
}
body.single-post .breadcrumbs > span > span:not(.breadcrumb_last)::after {
  content: "›";
  margin: 0 5px;
  color: #c3cad4;
  font-size: 11px;
}
body.single-post .breadcrumbs a { color: #98a1b0; }
body.single-post .breadcrumbs a:hover { color: #1b2a4a; }
body.single-post .breadcrumbs .breadcrumb_last {
  display: inline-block;
  max-width: 235px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
body.single-post .breadcrumbs .breadcrumb_last strong {
  font-weight: 600;
  color: #5d6a80;
}
@media (max-width: 860px) {
  body.single-post .breadcrumbs > span { flex-wrap: wrap; row-gap: 2px; }
  body.single-post .breadcrumbs .breadcrumb_last { max-width: none; white-space: normal; }
}

/* Author / date row: muted grays instead of orange, same content
   and layout. The orange ring around the small avatar goes away,
   matching the bio card treatment below. */
body.single-post .entry-header .entry-meta { color: #d4d9e0; }
body.single-post .entry-header .entry-meta .entry-author { color: #8a94a6; }
body.single-post .entry-header .entry-meta .entry-author a {
  color: #383f4a;
  font-weight: 600;
}
body.single-post .entry-header .entry-meta .entry-date { color: #a7b0be; }
body.single-post .entry-header .entry-meta img.avatar { border: none; }

/* Key Takeaways card (markup rebuilt by the plugin transform).
   Same card language as the sidebar panels; numbered items with
   barely-there dividers; no accent bar. */
body.single-post .entry-content .mb-takeaways {
  background-color: #F8F9FA;
  border-radius: 8px;
  padding: 26px 30px 12px;
  margin: 23px 0 34px;
}
body.single-post .entry-content .mb-takeaways .mb-tk-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #60708c;
  margin: 0 0 6px;
}
body.single-post .entry-content .mb-takeaways .mb-tk-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: #1b2a4a;
  margin: 0 0 4px;
}
body.single-post .entry-content .mb-takeaways .mb-tk-list {
  list-style: none;
  counter-reset: mbtk;
  margin: 0;
  padding: 0;
}
body.single-post .entry-content .mb-takeaways .mb-tk-list li {
  counter-increment: mbtk;
  display: flex;
  gap: 16px;
  padding: 15px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #2b3444;
}
body.single-post .entry-content .mb-takeaways .mb-tk-list li + li {
  border-top: 1px solid #f5f5f5;
}
body.single-post .entry-content .mb-takeaways .mb-tk-list li::before {
  content: counter(mbtk);
  flex: 0 0 auto;
  min-width: 14px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.75;
  color: #60708c;
}
@media (max-width: 640px) {
  body.single-post .entry-content .mb-takeaways { padding: 22px 20px 8px; }
}

/* Author bio card: sidebar card language, orange outline removed.
   Bio text sits just under the article body size; the LinkedIn /
   My Posts links drop to 13px gold so they stay quiet. */
body.single-post .entry-author-bio {
  background-color: #F8F9FA;
  border: 1px solid #e9edf2;
  border-radius: 8px;
  padding: 26px 30px;
}
body.single-post .entry-author-bio .avatar { border: none !important; }
body.single-post .entry-author-bio .contents h5 {
  font-size: 19px;
  font-weight: 700;
  color: #1b2a4a;
  margin: 0 0 8px;
}
body.single-post .entry-author-bio .contents .bio p {
  font-size: 15px;
  line-height: 1.65;
  color: #383f4a;
}
body.single-post .entry-author-bio .contents ul.links { font-size: 13px; }
body.single-post .entry-author-bio .contents ul.links a {
  color: #C58A00;
  font-weight: 600;
}
body.single-post .entry-author-bio .contents ul.links li + li {
  border-left: 1px solid #d9dee6;
}
@media (max-width: 640px) {
  body.single-post .entry-author-bio { padding: 22px 20px; }
  /* Mobile layout (Mark, Oct 17, 2026): photo and heading share the top
     row, bio runs full width below. display:contents promotes the
     heading/bio/links to flex items of .inner so they can wrap around
     the avatar; it also stops the theme's 100px flex-basis from flipping
     into a full-width pill when the card stacks. */
  body.single-post .entry-author-bio > .inner { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  body.single-post .entry-author-bio > .inner > .contents { display: contents; }
  body.single-post .entry-author-bio > .inner > .avatar { flex: 0 0 100px; width: 100px; height: 100px; margin: 0 20px 14px 0; }
  body.single-post .entry-author-bio .contents h5 { flex: 1 1 0; align-self: center; margin: 0 0 14px; }
  body.single-post .entry-author-bio .contents .bio { flex: 0 0 100%; }
  body.single-post .entry-author-bio .contents ul.links { flex: 0 0 100%; }
}

/* ============================================================
   Resource card (Mark, Oct 17, 2026): the compensation report
   callout redesigned as one fully clickable card. Live on one
   post for review; sitewide sweep pending Mark's approval.
   Reusable: swap eyebrow, title, description, icon, destination.
   ============================================================ */
.mb-resource-card {
  display: block;
  background-color: #F8F9FA;
  border-radius: 10px;
  padding: 28px 32px;
  margin: 24px 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.mb-resource-card:hover {
  background-color: #F0F3F8;
  transform: translateY(-1px);
  text-decoration: none;
}
.mb-resource-card:focus-visible {
  outline: 2px solid #1B2A4A;
  outline-offset: 2px;
}
.mb-resource-card .mb-rc-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #60708c;
  margin: 0 0 14px;
}
.mb-resource-card .mb-rc-eyebrow svg { width: 19px; height: 19px; flex: 0 0 auto; }
.mb-resource-card .mb-rc-title {
  display: block;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  color: #1b2a4a;
  margin: 0 0 12px;
}
.mb-resource-card .mb-rc-desc {
  display: block;
  font-size: 16.5px;
  line-height: 1.65;
  color: #383f4a;
}
@media (max-width: 640px) {
  .mb-resource-card { padding: 24px 22px; }
  .mb-resource-card .mb-rc-title { font-size: 22px; }
}

/* ============================================================
   Article heading refinement (Mark, Oct 18, 2026): single-post
   article content only. Theme base: h2 32px / h3 24px, both
   margin 24px top / 12px bottom, weight 700, line-height 1.3.
   H2 drops ~6% to 30px with more air above than below; H3 keeps
   its size with tightened, consistent spacing. Headings inside
   components (cards, takeaways, callout boxes, resource card)
   are excluded so their styling is untouched. Nothing else on
   the page or site is affected.
   ============================================================ */
body.single-post .entry-content h2:not(.mb-card h2, .mb-takeaways h2, .cob-inner h2, .mb-resource-card h2) {
  font-size: 30px;
  margin-top: 34px;
  margin-bottom: 12px;
}
body.single-post .entry-content h3:not(.mb-card h3, .mb-takeaways h3, .cob-inner h3, .mb-resource-card h3) {
  margin-top: 26px;
  margin-bottom: 10px;
}

/* ============================================================
   "In This Article" nav inside the Key Takeaways card (Mark,
   Oct 18, 2026; styling refined twice same day). The trigger is a
   plain expandable row, NOT a button: the site Customizer CSS
   paints every bare <button> gold (#F2A900), so the toggle rule
   is deliberately high-specificity with explicit resets.
   Hover geometry mirrors the sidebar list rows exactly: the
   hover wash bleeds 12px into the card padding (margin 0 -12px)
   with the label text inset 14px, border-radius 6px, wash
   #F0F3F8, text to navy #1b2a4a, background-color transition
   0.15s ease. Rows stay fully clickable; only the wash insets.
   ============================================================ */
body.single-post .entry-content h2 { scroll-margin-top: 104px; }
@media (max-width: 640px) {
  body.single-post .entry-content h2 { scroll-margin-top: 84px; }
}
body.single-post .entry-content .mb-takeaways .mb-article-nav {
  border-top: 1px solid #f5f5f5;
  margin-top: 0;
}
body.single-post .entry-content .mb-takeaways button.mb-article-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 11px 14px 8px;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  color: #1b2a4a;
  font-family: inherit;
  white-space: normal;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease;
}
body.single-post .entry-content .mb-takeaways button.mb-article-nav-toggle:hover {
  background-color: #F0F3F8;
}
.mb-article-nav-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #1b2a4a;
}
.mb-article-nav-label svg { flex: 0 0 auto; }
.mb-article-nav-chevron { flex: 0 0 auto; transition: transform .25s ease; }
.mb-nav-open .mb-article-nav-chevron { transform: rotate(180deg); }
.mb-article-nav-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
  background-color: #FFFFFF;
  border-radius: 6px;
  margin: 2px -12px 4px;
}
.mb-nav-open .mb-article-nav-panel { grid-template-rows: 1fr; }
.mb-article-nav-inner { overflow: hidden; min-height: 0; }
/* Rows carry no marker (Mark, Oct 18, 2026): numbers clashed
   with posts whose headings carry their own numbering, and a
   marker-free list tested cleaner. */
.mb-article-nav-list {
  list-style: none;
  margin: 0 0 0 38px;
  padding: 8px 12px 9px 0;
}
@media (max-width: 640px) {
  .mb-article-nav-list { margin-left: 32px; }
}
.mb-article-nav-list a {
  display: flex;
  gap: 11px;
  align-items: baseline;
  margin: 0 -12px;
  padding: 3px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #596579;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
.mb-article-nav-list a:hover { background-color: #F0F3F8; color: #1b2a4a; }
body.single-post .entry-content .mb-takeaways button.mb-article-nav-toggle:focus:not(:focus-visible),
.mb-article-nav-list a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
body.single-post .entry-content .mb-takeaways button.mb-article-nav-toggle:focus-visible,
.mb-article-nav-list a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 42, 74, .45);
}
@media (prefers-reduced-motion: reduce) {
  .mb-article-nav-panel, .mb-article-nav-chevron { transition: none; }
}

/* ============================================================
   Summary callout (Mark, Oct 18, 2026): the blog's standalone
   blue-bar statements restyled as a quiet gray box with the
   H1 navy text at regular weight and a full-height brand-blue
   bar at the left edge. One shared class (.mb-callout) styled
   here so the design updates globally from this file; stored
   posts carry the class, and the plugin transform converts
   any legacy inline-styled callout paragraphs at render.
   Blog posts only (body.single-post scope).
   ============================================================ */
body.single-post .entry-content p.mb-callout {
  position: relative;
  background: #F5F6F8;
  border-radius: 7px;
  margin: 22px 0 26px;
  padding: 16px 20px 16px 24px;
  color: #1b2a4a;
}
body.single-post .entry-content p.mb-callout strong {
  font-weight: 400;
  color: #1b2a4a;
}
body.single-post .entry-content p.mb-callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #1B2A4A;
  border-radius: 7px 0 0 7px;
}
@media (max-width: 640px) {
  body.single-post .entry-content p.mb-callout {
    margin: 20px 0 22px;
    padding: 14px 16px 14px 20px;
  }
}

/* ============================================================
   Blog table design (Mark, Oct 18, 2026; tested on the VP of
   Operations two-column table and the hiring-process four-
   column table, then approved for all blog posts). Tables get
   .mb-table + .mb-cols-N from the plugin transform at render;
   these shared rules are the single place the design lives.
   Header #F2F4F7 with H1 navy text, white body rows, hairline
   dividers, rounded outer corners via the corner cells. The
   theme forces white cell backgrounds and collapsed borders
   with !important, so the header fill and separate-border
   model need !important too. Mobile: two-column tables fit at
   40/60; wider tables scroll horizontally at full type size.
   ============================================================ */
body.single-post .entry-content table.mb-table {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 7px;
}
body.single-post .entry-content table.mb-table > thead > tr > th {
  background-color: #F2F4F7 !important;
  color: #1B2A4A;
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-top: 0;
  border-bottom: 0;
}
body.single-post .entry-content table.mb-table > thead > tr > th:first-child { border-top-left-radius: 7px; }
body.single-post .entry-content table.mb-table > thead > tr > th:last-child { border-top-right-radius: 7px; }
body.single-post .entry-content table.mb-table > tbody > tr > td {
  padding: 10px 16px;
  border-top: 1px solid #EDF0F3;
  text-align: left;
  vertical-align: top;
}
body.single-post .entry-content table.mb-table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 7px; }
body.single-post .entry-content table.mb-table > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 7px; }
@media (max-width: 640px) {
  body.single-post .entry-content table.mb-table > thead > tr > th {
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  body.single-post .entry-content table.mb-table > tbody > tr > td {
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.55;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  body.single-post .entry-content table.mb-table.mb-cols-1,
  body.single-post .entry-content table.mb-table.mb-cols-2 {
    table-layout: fixed;
    width: 100%;
  }
  body.single-post .entry-content table.mb-table.mb-cols-2 > thead > tr > th:first-child,
  body.single-post .entry-content table.mb-table.mb-cols-2 > tbody > tr > td:first-child {
    width: 40%;
  }
  body.single-post .entry-content table.mb-table.mb-cols-3,
  body.single-post .entry-content table.mb-table.mb-cols-4,
  body.single-post .entry-content table.mb-table.mb-cols-5,
  body.single-post .entry-content table.mb-table.mb-cols-6 {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  body.single-post .entry-content table.mb-table.mb-cols-3 > thead > tr > th,
  body.single-post .entry-content table.mb-table.mb-cols-4 > thead > tr > th,
  body.single-post .entry-content table.mb-table.mb-cols-5 > thead > tr > th,
  body.single-post .entry-content table.mb-table.mb-cols-6 > thead > tr > th,
  body.single-post .entry-content table.mb-table.mb-cols-3 > tbody > tr > td,
  body.single-post .entry-content table.mb-table.mb-cols-4 > tbody > tr > td,
  body.single-post .entry-content table.mb-table.mb-cols-5 > tbody > tr > td,
  body.single-post .entry-content table.mb-table.mb-cols-6 > tbody > tr > td {
    min-width: 150px;
  }
  body.single-post .entry-content table.mb-table.mb-cols-3 > thead > tr > th:first-child,
  body.single-post .entry-content table.mb-table.mb-cols-4 > thead > tr > th:first-child,
  body.single-post .entry-content table.mb-table.mb-cols-5 > thead > tr > th:first-child,
  body.single-post .entry-content table.mb-table.mb-cols-6 > thead > tr > th:first-child,
  body.single-post .entry-content table.mb-table.mb-cols-3 > tbody > tr > td:first-child,
  body.single-post .entry-content table.mb-table.mb-cols-4 > tbody > tr > td:first-child,
  body.single-post .entry-content table.mb-table.mb-cols-5 > tbody > tr > td:first-child,
  body.single-post .entry-content table.mb-table.mb-cols-6 > tbody > tr > td:first-child {
    min-width: 108px;
  }
}



/* ============================================================
   Framework cards (Mark, Oct 18, 2026): the blog's informational
   card system, tested per-post and then standardized here so
   every post renders them identically. One card family:
   .mb-fcards wrapper (stack by default; .mb-fcols-2 two-column
   comparison; .mb-fcols-3 only for very short content, stacks
   under 900px), .mb-fcard cards with the blue left bar, refined
   eyebrow, navy title, optional divider + labeled meta rows.
   The eyebrow selector outranks the generic card paragraph
   rule on purpose: in the per-post test blocks that paragraph
   rule silently overrode the eyebrow in one post, which is
   why this system lives in the shared file now.
   ============================================================ */
body.single-post .entry-content .mb-fcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 20px 0 24px;
}
body.single-post .entry-content .mb-fcards.mb-fcols-2 { grid-template-columns: 1fr 1fr; }
body.single-post .entry-content .mb-fcards.mb-fcols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  body.single-post .entry-content .mb-fcards.mb-fcols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.single-post .entry-content .mb-fcards.mb-fcols-2 { grid-template-columns: 1fr; }
}
body.single-post .entry-content .mb-fcard {
  position: relative;
  background-color: #F5F6F8;
  border-radius: 7px;
  padding: 15px 22px 14px 26px;
  overflow: hidden;
}
body.single-post .entry-content .mb-fcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #1B2A4A;
  border-radius: 7px 0 0 7px;
}
body.single-post .entry-content .mb-fcard p {
  font-size: 15.5px;
  line-height: 1.55;
  color: #2B3444;
  margin: 0 0 8px;
}
body.single-post .entry-content .mb-fcard p:last-child { margin-bottom: 0; }
body.single-post .entry-content .mb-fcard p.mb-fcard-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #8494AD;
  margin: 0 0 6px;
}
body.single-post .entry-content .mb-fcard h4 {
  font-size: 19px;
  line-height: 1.3;
  color: #1B2A4A;
  margin: 0 0 8px;
}
body.single-post .entry-content .mb-fcard ul { margin: 4px 0 8px; padding-left: 20px; }
body.single-post .entry-content .mb-fcard li {
  font-size: 15.5px;
  line-height: 1.5;
  color: #2B3444;
}
body.single-post .entry-content .mb-fcard .mb-fcard-q {
  font-size: 15.5px;
  line-height: 1.55;
  color: #2B3444;
  margin: 0;
}
body.single-post .entry-content .mb-fcard .mb-fcard-meta-wrap {
  border-top: 1px solid #E3E7ED;
  margin-top: 12px;
  padding-top: 11px;
}
body.single-post .entry-content .mb-fcard .mb-fcard-meta {
  font-size: 14.5px;
  line-height: 1.5;
  color: #2B3444;
  margin: 0;
}
body.single-post .entry-content .mb-fcard .mb-fcard-meta + .mb-fcard-meta { margin-top: 3px; }
@media (max-width: 640px) {
  body.single-post .entry-content .mb-fcard { padding: 14px 18px 12px 22px; }
}
/* Stacked variant: slightly tighter eyebrow/title/question
   rhythm (Mark, Oct 18, 2026). Column variants keep the
   shared spacing above. */
body.single-post .entry-content .mb-fcards:not(.mb-fcols-2):not(.mb-fcols-3) .mb-fcard p.mb-fcard-eyebrow { margin-bottom: 4px; }
body.single-post .entry-content .mb-fcards:not(.mb-fcols-2):not(.mb-fcols-3) .mb-fcard h4 { margin-bottom: 6px; }

/* Framework-card two-column list (for short one-line items,
   e.g. checklists) */
body.single-post .entry-content .mb-fcard ul.mb-cols-2 {
  columns: 2;
  column-width: 260px;
  column-gap: 44px;
}

/* Article top spacing trim (Mark, Oct 18, 2026): a tad less air
   above the featured image and the sidebar on single posts.
   The theme gives the section container 20px top padding and
   the sidebar column a 48px top margin; both ease back here. */
body.single-post #main section.post-main .container { padding-top: 10px; }
body.single-post section.page-section.has-sidebar .content-section.secondary { margin-top: 28px; }

/* Case study labels (Mark, Oct 18, 2026): on case study cards
   only, the eyebrow takes the article H2 navy instead of the
   standard slate. */
body.single-post .entry-content .mb-fcards.mb-casestudy .mb-fcard p.mb-fcard-eyebrow {
  color: #1B2A4A;
  font-size: 11px;
  font-weight: 700;
}

/* ============================================================
   FAQ items in the card system (Mark, Oct 18, 2026). Every
   blog FAQ is a details/summary accordion whose summary
   carries the blue bar as an inline border, so the bar stops
   at the question when the item opens and the answer sits on
   white. Here the whole item becomes one card like .mb-fcard:
   #F5F6F8 fill, 7px radius, and the 4px #1B2A4A bar running
   the full height, open or closed. The summary's inline
   background and border are neutralized with !important so a
   single bar shows. The flex summary and its + / - toggle
   come from the FAQ snippet and are untouched.
   ============================================================ */
body.single-post .entry-content details {
  position: relative;
  background-color: #F5F6F8;
  border-radius: 7px;
  overflow: hidden;
}
body.single-post .entry-content details::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #1B2A4A;
  border-radius: 7px 0 0 7px;
  z-index: 1;
}
body.single-post .entry-content details > summary {
  background: transparent !important;
  border-left: none !important;
  padding: 14px 18px 14px 24px !important;
}
body.single-post .entry-content details > p {
  padding: 0 18px 15px 24px !important;
  margin: 0 !important;
}
body.single-post .entry-content details > ul,
body.single-post .entry-content details > ol {
  padding: 0 18px 15px 44px;
  margin: 0;
}

/* Steps outline (template draft test, Oct 18): one subtle outline around a steps group, no fill */
.mb-steps-outline { border: 1px solid #E3E7ED; background: #F5F6F8; border-radius: 7px; padding: 22px 26px 8px; margin: 24px 0 28px; }
@media (max-width: 640px) { .mb-steps-outline { padding: 18px 18px 6px; } }

/* Hiring Playbook panel header + step titles (Theme 1, Oct 18) */
body.single-post .entry-content .mb-steps-outline .mb-panel-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #60708c; margin: 0 0 8px; }
.mb-steps-outline p.mb-panel-title { font-size: 25px; font-weight: 700; color: #1B2A4A; line-height: 1.25; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid #E3E7ED; }

/* Step dividers inside the Hiring Playbook panel (Oct 18) */
.mb-steps-outline .mb-step-lead ~ .mb-step-lead { border-top: 1px solid #E3E7ED; margin-top: 22px; padding-top: 20px; }
.mb-steps-outline .mb-step-lead { color: #45526B; font-size: 15.5px; }
.mb-steps-outline .mb-step-lead strong { font-weight: 600; }

/* Prev/next post navigation, matched to the article design system (Oct 18) */
body.single-post .entry-meta .next-prev-posts { display: flex; justify-content: space-between; gap: 14px; margin-top: 28px; }
body.single-post .entry-meta .next-prev-posts a { border: 1px solid #E3E7ED; border-radius: 7px; background: #fff; color: #1B2A4A !important; padding: 10px 18px; font-size: 15px; font-weight: 600; }
body.single-post .entry-meta .next-prev-posts a:hover { background: #F0F3F8; border-color: #D5DBE5; }
body.single-post .entry-meta .next-prev-posts a[rel="next"] { margin-left: auto; }

/* Eyebrow standard (2026-10-18): Article Highlights, Hiring Playbook, and resource card eyebrows share one declared font and spec, pinned by declaration rather than inheritance. */
body.single-post .entry-content .mb-takeaways .mb-tk-eyebrow,
body.single-post .entry-content .mb-steps-outline .mb-panel-eyebrow,
body.single-post .entry-content .mb-resource-card .mb-rc-eyebrow { font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #60708C; }
/* ---------- Apply-button anchor landing (Mark, Oct 21) ---------- */
/* The hero "Apply for This Position" button anchors to the apply section
   (#quick-apply-form) on desktop and, on phones, to the mobile Quick
   Apply block (.mobile-quick-apply), rerouted by the footer script in
   job-redesign-preview.php. Both targets carry the same scroll-margin
   as the confirmation panel above, so the fixed header never covers
   the apply heading on landing. */
body.single-job section#quick-apply-form {
  scroll-margin-top: 100px;
}
body.single-job .mobile-quick-apply {
  scroll-margin-top: 100px;
}

/* ---------- Talent Network sidebar card (Mark, Oct 21, 2026) ----------
   Rendered by MB_TN_Side_Card_Widget (job-redesign-preview.php) into
   the single-job sidebar directly after Recent Job Posts, on singular
   job pages only. Box treatment matches the three sidebar panels rule
   for rule: same #F8F9FA panel fill as the Jobs archive TN tile, 8px
   radius, 22px side/top padding, and the shared .widget margin-bottom
   (36px) keeps the sidebar gap rhythm. Bottom padding is 25px: the
   siblings' bottom inset is 12px panel padding + 5px li padding + 8px
   link padding = 25px from the last row's text to the panel edge, and
   the card's last element is its button, so 25px gives the same visual
   inset. Eyebrow is generated exactly like the siblings': the shared
   .widget-title::before rule supplies the treatment (11px / 700 / 2px
   tracking / uppercase / slate #60708C / 5px gap above the title) and a
   rule below supplies only the "Talent Network" content string.
   Button: navy #1B2A4A, 4px radius (the site button radius, cf.
   .btn-apply), hover one step lighter at #2A3D63, focus ring reuses
   the form submit button's :focus-visible treatment. */
body.single-job .widget-area .widget_mb_tn_side_card {
  background-color: #F8F9FA;
  border-radius: 8px;
  padding: 22px 22px 25px;
}
body.single-job .widget-area .widget_mb_tn_side_card .widget-title::before {
  content: "Talent Network";
}
body.single-job .widget-area .mb-tn-side-copy {
  font-size: 14.5px;
  line-height: 1.55;
  color: #66707d;
  margin: 0 0 16px;
}
body.single-job .widget-area .mb-tn-side-btn {
  display: inline-block;
  background-color: #1B2A4A;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
body.single-job .widget-area .mb-tn-side-btn:hover {
  background-color: #2A3D63;
  color: #ffffff;
}
body.single-job .widget-area .mb-tn-side-btn:focus-visible {
  outline: 2px solid #1B2A4A;
  outline-offset: 2px;
}

/* Filled panel eyebrow/heading cascade fix (Mark, Oct 21): the panel sits
   inside .job-description .entry-content, so the editorial rules there
   (.entry-content p -> font-size 17px; .entry-content h2 -> margin-top 34px)
   outrank the plain panel selectors above (specificity 0,3,2 beats 0,2,1):
   the eyebrow rendered at 17px and the heading kept a 34px top margin.
   These panel-scoped rules (0,5,2) restore the .job-eyebrow standard
   (12px/700/2.2px/#60708C, margin-bottom 6px) and the standard
   eyebrow-to-heading relationship (heading margin-top 0). Heading size,
   panel copy and buttons are untouched. */
body.single-job .job-description .entry-content .job-filled-panel .job-filled-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #60708c;
  margin: 0 0 6px;
}
body.single-job .job-description .entry-content .job-filled-panel .job-filled-heading {
  margin: 0 0 10px;
}

/* ---------- Talent Network sidebar card, AI pages (Mark, Oct 22, 2026) ----------
   Rendered by MB_TN_AI_Side_Widget (job-redesign-preview.php) into the
   ai-sidebar directly after Recent Job Posts, on the eight single tool
   pages and the tools hub only. A rule-for-rule mirror of the single-job
   card above, re-scoped to the AI body classes: same #F8F9FA panel,
   8px radius, 22px side/top padding and 25px bottom inset, the shared
   .widget-title::before treatment with only the "Talent Network"
   content string supplied here, and the same navy button. */
:is(body.mb-ai-preview, body.mb-ai-single) .widget-area .widget_mb_tn_ai_card {
  background-color: #F8F9FA;
  border-radius: 8px;
  padding: 22px 22px 25px;
}
:is(body.mb-ai-preview, body.mb-ai-single) .widget-area .widget_mb_tn_ai_card .widget-title::before {
  content: "Talent Network";
}
:is(body.mb-ai-preview, body.mb-ai-single) .widget-area .mb-tn-side-copy {
  font-size: 14.5px;
  line-height: 1.55;
  color: #66707d;
  margin: 0 0 16px;
}
:is(body.mb-ai-preview, body.mb-ai-single) .widget-area .mb-tn-side-btn {
  display: inline-block;
  background-color: #1B2A4A;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
:is(body.mb-ai-preview, body.mb-ai-single) .widget-area .mb-tn-side-btn:hover {
  background-color: #2A3D63;
  color: #ffffff;
}
:is(body.mb-ai-preview, body.mb-ai-single) .widget-area .mb-tn-side-btn:focus-visible {
  outline: 2px solid #1B2A4A;
  outline-offset: 2px;
}