/* =====================================================
   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 — FIX LAYERING
   ========================================== */

/* Allow dropdowns to extend outside filters */
[data-theme-jobs-region="filters"] {
  overflow: visible !important;
}

[data-theme-jobs-region="filters"]
[data-controller~="multi-checklist"] {
  position: relative !important;
  z-index: 1;
}

/* Bring the selected filter and its container forward */
[data-theme-jobs-region="filters"]
*:has(> [data-controller~="multi-checklist"]:focus-within) {
  position: relative !important;
  z-index: 100 !important;
}

[data-theme-jobs-region="filters"]
[data-controller~="multi-checklist"]:focus-within {
  z-index: 101 !important;
}

/* Dropdown panels */
[data-theme-jobs-region="filters"]
.filter-popover {
  z-index: 102 !important;
}

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

/* ==========================================
   LINCOLNLAND JOB HUB
   KEEP JOB DROPDOWNS ABOVE NEXT SECTION
   ========================================== */

/* Keep the entire jobs section above sections below */
#section-52781 {
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}

/* Allow filter menus to extend below the section */
#section-52781 .boards-jobs-filters,
#section-52781 [data-theme-jobs-region="filters"],
#section-52781 form[data-controller="job-filters"] {
  overflow: visible !important;
}

/* Keep the open dropdown above other page content */
#section-52781 .filter-popover {
  z-index: 99999 !important;
}

/* Preserve the larger category dropdown */
#section-52781 .filter-popover .max-h-64 {
  max-height: 550px !important;
  overflow-y: auto !important;
}

/* Employer Dashboard - Boost Visibility Button */

#ljh-boost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  margin-right: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #29765e !important;
  border-radius: 999px !important;
  color: #29765e !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

#ljh-boost:hover {
  background: #e3efeb !important;
}

@media (max-width: 767px) {
  #ljh-boost {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ==========================================
   EMPLOYER DASHBOARD
   ALIGN BOOST AND POST A JOB BUTTONS
   ========================================== */

#ljh-boost {
  margin-left: auto !important;
  margin-right: 12px !important;
}

/* Keep buttons aligned vertically */
#ljh-boost {
  align-self: center !important;
}

/* Mobile spacing */
@media screen and (max-width: 767px) {
  #ljh-boost {
    margin-right: 8px !important;
    margin-left: auto !important;
  }
}

/* ==========================================
   EMPLOYER DASHBOARD
   ALIGN BOOST AND POST A JOB BUTTONS
   ========================================== */

#ljh-boost {
  margin-left: auto !important;
  margin-right: 12px !important;
}

/* Keep buttons aligned vertically */
#ljh-boost {
  align-self: center !important;
}

/* Mobile spacing */
@media screen and (max-width: 767px) {
  #ljh-boost {
    margin-right: 8px !important;
    margin-left: auto !important;
  }
}

/* Align Boost button vertically with Post a job */

@media screen and (min-width: 768px) {
  #ljh-boost {
    transform: translateY(-10px) !important;
  }
}