/******* Do not edit this file *******
Code Snippets Manager
Saved: Oct 15 2025 | 05:54:48 */
/*
=====================================================
 JobAdder Widget Styles – Modernized & Customizable
=====================================================
*/

/* ========== 1. Easy Customization Variables ========== */
/* Change these values to easily match your website's theme */
#ja-jobs-widget {
  --ja-primary-color: #121822;      /* Dark color for buttons & active elements */
  --ja-primary-text-color: #ffffff; /* Text color for primary buttons */
  --ja-border-color: #e0e0e0;      /* Softer border/divider color */
  --ja-text-color: #121822;        /* Main body text color */
  --ja-link-hover-color: #555555;  /* Color for links on hover */
  --ja-border-radius: 6px;          /* Slightly rounded corners for inputs/buttons */

  /* Ensure the widget inherits your theme's font */
  font-family: inherit;
  color: var(--ja-text-color);
}

/* ========== 2. Search Form Styling (Improved UX) ========== */
.ja-job-search {
  padding-top: 40px;
  margin-bottom: 80px;
}

.ja-job-search .ja-form {
  display: flex;
  gap: 15px; /* Space between form elements */
  align-items: flex-end;
}

.ja-job-search .ja-form label {
  display: none; /* Hide native labels */
}

/* Consistent styling for select dropdowns and text inputs */
.ja-job-search .ja-form .ja-field-container {
  flex-grow: 1;
}
.ja-job-search .ja-form .ja-field-container .ja-field select,
.ja-job-search .ja-form .ja-field-container .ja-field input {
  width: 100%;
  border: 1px solid var(--ja-border-color);
  border-radius: var(--ja-border-radius);
  padding: 12px 12px 8px 12px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-family: "AC Sans", sans-serif !important;
}

/* Focus style for better accessibility */
.ja-job-search .ja-form .ja-field-container .ja-field select:focus,
.ja-job-search .ja-form .ja-field-container .ja-field input:focus {
  outline: none;
  border-color: var(--ja-primary-color);
  box-shadow: 0 0 0 2px rgba(18, 24, 34, 0.2);
}

/* Submit button container and button */
.ja-job-search .ja-form .ja-submit {
  flex-shrink: 0;
}
.ja-job-search .ja-form .ja-submit input {
  width: 100%;
  border: none;
  border-radius: var(--ja-border-radius);
  padding: 10px 25px;
  font-size: 16px;
  
  /* MODIFIED: This now uses your theme's automatic color variables */
  background-color: var(--wp--preset--color--basecolor) !important;
  color: var(--wp--preset--color--contrastcolor, #ffffff) !important;

  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.ja-job-search .ja-form .ja-submit input:hover {
  opacity: 0.9;
}

/* ========== 3. Job Listings (Original Layout) ========== */
.ja-job-list-container {
  margin-top: 40px;
  border-top: 1px solid var(--ja-border-color);
}

.ja-job-list-container .ja-job-list {
  display: flex;
  flex-direction: column;
}

.ja-job-list-container .ja-job-list .job {
  border-bottom: 1px solid var(--ja-border-color);
  padding: 35px 0; /* Refined padding */
}

/* Job title links */
.ja-job-list-container .ja-job-list .job .title a {
  text-decoration: none;
  transition: color 0.3s;
  font-size: var(--wp--preset--font-size--fluid-h3-huge, clamp(2rem, 0.364vw + 1.918rem, 2.5rem)) !important;
}
.ja-job-list-container .ja-job-list .job .title a:hover {
  color: var(--ja-link-hover-color);
}

/* Job classification container */
.ja-job-list-container .ja-job-list .job .classifications {
  margin: 15px 0 0;
  padding: 0;
}

/* Styling for classification pills in the list view */
.ja-job-list-container .ja-job-list .job .classifications li {
  display: inline-block;
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 8px 14px 4px 14px;
  color: #121822 !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.4 !important;
  margin-right: 10px;
  margin-bottom: 10px;
  font-family: "AC Sans", sans-serif !important;
}

/* Styling for other secondary text (summary, date, etc.) in the list view */
.ja-job-list-container .ja-job-list .job .summary,
.ja-job-list-container .ja-job-list .job .date-posted,
.ja-job-list-container .ja-job-list .job .view-details {
  font-size: var(--wp--preset--font-size--fluid-regular, clamp(1rem, 0.364vw + 0.918rem, 1.5rem)) !important;
  line-height: 160% !important;
  font-weight: 500;
}

/* Link job list text color to theme for dark mode compatibility */
.ja-job-list-container .ja-job-list .job .title a,
.ja-job-list-container .ja-job-list .job .summary,
.ja-job-list-container .ja-job-list .job .date-posted,
.ja-job-list-container .ja-job-list .job .view-details {
  color: var(--wp--preset--color--basecolor) !important;
}

/* ========== 4. Pagination (Minimal Style) ========== */
/* Stacks and centers the pagination items */
.ja-pager-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

/* Base style for the page numbers (1, 2, 3...) */
.ja-pager-container .ja-pager a,
.ja-pager-container .ja-pager span {
  font-family: "AC Sans", sans-serif !important;
  font-size: 1.25rem;
  font-weight: 500;
  display: inline-block;
  margin: 0 8px;
  padding: 4px;
  text-decoration: none;
  border: none;
  background-color: transparent;
  border-radius: 0;
  transition: color 0.3s;
}

/* Style for the summary text (Page 1 of 1) */
.ja-pager-container .ja-pager-summary {
  font-size: 1rem;
  font-family: "AC Sans", sans-serif !important;
}

/* Links pagination text to theme for dark mode */
.ja-pager-container .ja-pager a,
.ja-pager-container .ja-pager span,
.ja-pager-container .ja-pager-summary {
  color: var(--wp--preset--color--basecolor) !important;
}

/* Underline links on hover for a clear clickable indicator */
.ja-pager-container .ja-pager a:hover {
  text-decoration: underline;
}

/* Style for the active/current page number */
.ja-pager-container .ja-pager .current-page {
  color: var(--wp--preset--color--basecolor) !important;
  font-weight: bold;
  text-decoration: underline;
}

/* ========== 5. Job Details View ========== */
.ja-job-details {
  border-top: 1px solid var(--ja-border-color);
  padding-top: 40px;
}

.ja-job-details .title {
  font-size: var(--wp--preset--font-size--fluid-h3-huge, clamp(2rem, 0.364vw + 1.918rem, 2.5rem)) !important;
}

/* Link job details text color to theme for dark mode compatibility */
.ja-job-details .title,
.ja-job-details .date-posted,
.ja-job-details .bullet-points li,
.ja-job-details .description,
.ja-job-details .classifications li {
  color: var(--wp--preset--color--basecolor) !important;
}
.ja-job-details .description a {
    color: var(--wp--preset--color--basecolor) !important;
    text-decoration: underline;
}

/* Set font for classifications in the details view */
.ja-job-details .classifications li {
    font-family: "AC Sans", sans-serif !important;
}


.ja-job-details .apply {
  margin-top: 50px;
  padding: 40px 0;
  text-align: center;
  background-color: transparent;
}
.ja-job-details .apply .ja-button {
  display: inline-block;
  background-color: var(--ja-primary-color);
  color: var(--ja-primary-text-color);
  padding: 12px 30px;
  text-decoration: none;
  border-radius: var(--ja-border-radius);
  border: none;
  font-size: 1.1rem;
  transition: background-color 0.3s;
  cursor: pointer;
}
.ja-job-details .apply .ja-button:hover {
  background-color: var(--ja-link-hover-color);
}
.ja-job-details .apply .back-link {
  display: block;
  margin-bottom: 40px;
}

/* ========== 6. Responsive Adjustments (Simplified Code) ========== */
@media (max-width: 768px) {
  .ja-job-search .ja-form {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ========== 7. Hide "Powered By" Link ========== */
.powered-by-jobadder {
  display: none !important;
}

/* ========== 8. Dark Mode Overrides (Test Version) ========== */
/*
  This code tests for several common dark mode class names.
*/
body.dark-theme .ja-job-search .ja-form .ja-submit input,
body.dark .ja-job-search .ja-form .ja-submit input,
body.is-dark-mode .ja-job-search .ja-form .ja-submit input {
  /* This uses your theme's main color, which becomes white in dark mode */
  background-color: var(--wp--preset--color--basecolor) !important;
  /* This uses the dark color we defined for the text */
  color: var(--ja-primary-color) !important;
}

body.dark-theme .ja-job-search .ja-form .ja-submit input:hover,
body.dark .ja-job-search .ja-form .ja-submit input:hover,
body.is-dark-mode .ja-job-search .ja-form .ja-submit input:hover {
  opacity: 0.9;
}






/*
========================================
 Style the "No Jobs Found" Message
========================================
*/

.ja-job-list-container .no-jobs-content {
  padding-top: 4rem;
  padding-bottom: 2rem; /* Added for balance */
  text-align: center;
  
  /* This links the text color to your theme's dark/light mode switcher */
  color: var(--wp--preset--color--basecolor) !important;
}


/*
========================================
 Set Font for Search Button
========================================
*/

.ja-job-search .ja-form .ja-submit input {
  font-family: "AC Sans", sans-serif !important;
  padding: 12px 30px 8px 30px;
}


/*
========================================
 Style for the 'Apply Now' Button
========================================
*/

.ja-job-details .apply .ja-button {
  /* This overrides the theme's full-width style */
  width: auto !important;

  /* This creates the pill shape */
  border-radius: 50px !important;
  
  /* Optional: ensures the button has a nice minimum size */
  min-width: 180px;
	
  font-family: "AC Sans", sans-serif !important;
}

/*
========================================
 Dark Mode Fix for 'Apply Now' Button
========================================
*/

.ja-job-details .apply .ja-button {
  /* This connects the button's colors to your theme's dark mode switcher */
  background-color: var(--wp--preset--color--basecolor) !important;
  color: var(--wp--preset--color--contrastcolor, #121822) !important; /* Fallback to dark text */
  transition: opacity 0.3s;
}

.ja-job-details .apply .ja-button:hover {
  opacity: 0.9;
}

/*
========================================
 Make the Search Button Pill-Shaped
========================================
*/

.ja-job-search .ja-form .ja-submit input {
  /* This creates the pill shape */
  border-radius: 50px !important;
}