/* =====================================================
   LINCOLNLAND JOB HUB — GLOBAL CSS
   ===================================================== */


/* =====================================================
   FEATURED EMPLOYERS SLIDER
   ===================================================== */

#section-54443 .overflow-x-auto {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#section-54443 .overflow-x-auto::-webkit-scrollbar {
  display: none !important;
}

#section-54443 .overflow-x-auto > a {
  flex: 0 0 180px !important;
  width: 180px !important;
  min-width: 180px !important;
}


/* =====================================================
   JOB FILTER LABELS
   ===================================================== */

[data-theme-jobs-region="filters"]
label.filter-card > span:first-child > span:first-child {
  color: #0b2e59 !important;
  font-weight: 700 !important;
}


/* =====================================================
   MOBILE FEATURED EMPLOYERS
   ===================================================== */

@media screen and (max-width: 767px) {
  #section-54443
  .flex.items-center.justify-between.mb-6 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }

  #section-54443
  .flex.items-center.justify-between.mb-6 h2 {
    width: 100% !important;
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  #section-54443
  .flex.items-center.justify-between.mb-6 > a {
    position: static !important;
    align-self: flex-start !important;
  }
}


/* =====================================================
   HEADER NAVIGATION
   ===================================================== */

header nav a[href*="/companies" i] {
  display: none !important;
}


/* =====================================================
   HERO HEADLINE — TWO LINES ON MOBILE
   ===================================================== */

@media screen and (max-width: 1024px) {
  #section-57069 h1,
  #section-52718 h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  #section-57069 h1::before,
  #section-52718 h1::before {
    content: "Find Work";
    display: block !important;
    color: #0a203c !important;
    font-size: clamp(30px, 6vw, 48px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.6px !important;
    white-space: nowrap !important;
  }

  #section-57069 h1::after,
  #section-52718 h1::after {
    content: "Close to Home";
    display: block !important;
    color: #0a203c !important;
    font-size: clamp(30px, 6vw, 48px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.6px !important;
    white-space: nowrap !important;
  }
}


/* =====================================================
   SEARCH JOBS NOW CTA — MOBILE ONLY
   ===================================================== */

@media screen and (min-width: 768px) {
  #section-62648 {
    display: none !important;
  }
}


/* =====================================================
   HIDE DEACONESS BLANK BACKFILLER LOGO
   ===================================================== */

a[href^="/jobs/"]
.flex-shrink-0:has(
  img[src*="GetLargeHeaderLogo" i]
) {
  display: none !important;
}


/* =====================================================
   FEATURED / HIGHLIGHTED JOB CARDS
   ===================================================== */

#section-52781 a[href^="/jobs/"].border-2 {
  background: #E3EFEB !important;
}


/* =====================================================
   EMPLOYER JOB ACTION BUTTONS
   ===================================================== */

/* Allow buttons to wrap when needed */

div.ml-4.flex.items-center.gap-1:
has(> a[aria-label="View"][href^="/jobs/"]) {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

/* Consistent styling for all three buttons */

a[aria-label="View"][href^="/jobs/"],
a[aria-label="Applications"][href^="/employer/jobs/"],
a.ljh-activity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 9px !important;

  background: #edf8f4 !important;
  border: 1px solid #b8d8cc !important;
  border-radius: 6px !important;

  color: #276e58 !important;
  -webkit-text-fill-color: #276e58 !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Display Jobboardly's View and Applications text */

a[aria-label="View"][href^="/jobs/"] .sr-only,
a[aria-label="Applications"][href^="/employer/jobs/"] .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
}

/* View Activity text */

a.ljh-activity {
  font-size: 0 !important;
}

a.ljh-activity::after {
  content: "View Activity" !important;
  display: inline !important;
  color: #276e58 !important;
  -webkit-text-fill-color: #276e58 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* View Activity — lightweight CSS bar chart icon */

a.ljh-activity::before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;

  background:
    linear-gradient(#276e58, #276e58) 2px 9px / 1.5px 6px,
    linear-gradient(#276e58, #276e58) 7px 5px / 1.5px 10px,
    linear-gradient(#276e58, #276e58) 12px 2px / 1.5px 13px !important;

  background-repeat: no-repeat !important;
  background-color: transparent !important;

  -webkit-mask: none !important;
  mask: none !important;
}

/* Existing View and Applications icons */

a[aria-label="View"][href^="/jobs/"] svg,
a[aria-label="Applications"][href^="/employer/jobs/"] svg {
  color: #276e58 !important;
  flex: 0 0 auto !important;
}

/* Preserve the View icon */

a[aria-label="View"][href^="/jobs/"] svg {
  fill: currentColor !important;
}

/* Button hover */

a[aria-label="View"][href^="/jobs/"]:hover,
a[aria-label="Applications"][href^="/employer/jobs/"]:hover,
a.ljh-activity:hover {
  background: #dceee8 !important;
  border-color: #91c3b2 !important;
}

/* Mobile employer action placement */

@media screen and (max-width: 767px) {
  div.flex.items-start.justify-between:
  has(> div.ml-4 a[aria-label="View"][href^="/jobs/"]) {
    flex-direction: column !important;
    gap: 12px !important;
  }

  div.ml-4.flex.items-center.gap-1:
  has(> a[aria-label="View"][href^="/jobs/"]) {
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
}


/* =====================================================
   JOB FILTER DROPDOWNS — HEIGHT & OVERLAP
   ===================================================== */

/* Raise filters above the next section */

[data-theme-jobs-region="filters"],
[data-theme-jobs-region="filters"] *:has(.filter-popover) {
  position: relative;
  z-index: 100 !important;
}

/* Position dropdown under its filter */

[data-theme-jobs-region="filters"] .filter-popover {
  position: absolute !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

/* Allow more categories before scrolling */

[data-theme-jobs-region="filters"] .filter-popover .max-h-64 {
  max-height: 550px !important;
  overflow-y: auto !important;
}