/* =============================================================================
   JOBS.CSS — Job listings & employer directory stylesheet
   Sections:
     1.  Auto-fit container
     2.  Tax / category grid
     3.  Sidebar widgets (category, location, type)
     4.  Job post card
     5.  Single job layout
     6.  Employer section
     7.  Job detail table
     8.  Job meta & type labels
     9.  Apply button
    10.  Featured-job thumbnail
    11.  Advanced search form
    12.  View-more button
    13.  Tab system (general tab-list, auth tabs)
    14.  Dark-mode overrides
============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. AUTO-FIT CONTAINER  (generic auto-responsive grid)
───────────────────────────────────────────────────────────────────────────── */

.auto-container {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
  gap:                   clamp(0.625rem, 2.5vw, 1rem);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. TAX / CATEGORY GRID  (ts-list-grid-* variants)
───────────────────────────────────────────────────────────────────────────── */

.ts-tax-wrapper { margin: clamp(1.875rem, 7vw, 3.125rem) 0; }

/* Base (mobile-first: single column) */
[class*="ts-list-grid-"] {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(0.625rem, 2.5vw, 0.9375rem);
  margin:                clamp(0.75rem, 3vw, 1.25rem) 0;
  border:                1px solid #bbb;
  padding:               clamp(0.75rem, 3vw, 1.25rem);
}

@media (min-width: 37.5em) {
  [class*="ts-list-grid-"] { grid-template-columns: repeat(3, minmax(0, 2fr)); }
}

@media (min-width: 48em) {
  [class*="ts-list-grid-"] { grid-template-columns: repeat(4, minmax(0, 2fr)); }
}

@media (min-width: 64em) {
  .ts-list-grid-4 { grid-template-columns: repeat(4, minmax(0, 2fr)); }
  .ts-list-grid-5 { grid-template-columns: repeat(5, minmax(0, 2fr)); }
  .ts-list-grid-6 { grid-template-columns: repeat(6, minmax(0, 2fr)); }
}

/* Tax list items */
.ts-tax-wrapper li {
  border-bottom: 1px solid;
}

.ts-tax-wrapper li a {
  color:           var(--bansta-secondary-color);
  text-decoration: none;
  font-weight:     600;
  line-height:     1.7;
  font-family:     var(--bansta-primary-font);
}

/* Tax list headings */
.ts-tax-wrapper h2,
.ts-job-list-title {
  margin:      0;
  text-align:  center;
  font-family: var(--bansta-secondary-font);
}

.job-company .metas {
  padding: 0.5rem 0.25rem 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. SIDEBAR WIDGETS  (category / location / type)
───────────────────────────────────────────────────────────────────────────── */

.widget_bansta_job_category,
.widget_bansta_job_location,
.widget_bansta_job_type {
  background-color: lavender !important;
  padding:          clamp(0.75rem, 3vw, 1.25rem);
  margin-bottom:    clamp(0.75rem, 3vw, 1.25rem);
}

/* Count badge */
.widget_bansta_job_category span,
.widget_bansta_job_location span,
.widget_bansta_job_type span {
  color: var(--bansta-link-color);
  float: right;
}

/* Widget links */
.widget_bansta_job_category a,
.widget_bansta_job_location a,
.widget_bansta_job_type a {
  color:       var(--bansta-secondary-color);
  font-weight: var(--bansta-font-weight);
}

/* Sub-category indent */
.sidebar-container .ts-sub-cat,
ul > .ts-sub-cat { margin-left: 1.5em; }

/* Tax content area */
.job-tax-content span      { color: var(--bansta-link-color); }
.job-tax-content li.cat-item {
  list-style:  none;
  margin-left: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. JOB POST CARD
───────────────────────────────────────────────────────────────────────────── */

.job-post-container {
  display: flex;
  border:  1px solid #ccc;
  padding: clamp(0.625rem, 2.5vw, 0.9375rem);
}

.job-post-container h2          { margin: 0 !important; }
.job-post-container a           { text-decoration: none; }

.job-post-container:hover {
  box-shadow:
    0 4px  8px  0 rgba(0, 0, 0, 0.2),
    0 6px 20px  0 rgba(0, 0, 0, 0.19);
}

.job-post-container .metas,
.job-post-container time        { font-family: var(--bansta-secondary-font); }
.job-post-container .metas      { text-wrap: nowrap; }
.job-post-container .ts-meta-info { flex-wrap: wrap; }
.job-post-container .ts-post-header a { text-decoration: none; }

/* Thumbnail within card */
.job-post-container .job-featured-job {
  height: 100%;
  width:  clamp(10%, 18vw, 20%);
}

/* Employer archive: force vertical stacking */
.employer-archive .job-post-container { flex-direction: column; }
.employer-archive .ts-post-header     { padding: clamp(0.5rem, 2vw, 0.625rem) 0; }


/* ─────────────────────────────────────────────────────────────────────────────
   5. SINGLE JOB LAYOUT
───────────────────────────────────────────────────────────────────────────── */

#main-job-employer-content { width: 100%; }

/* Two-column (sidebar + content) on tablet+ */
.inner-container-job-default {
  display:        flex;
  flex-direction: column;
  gap:            clamp(1.25rem, 5vw, 1.875rem);
}

@media (min-width: 48em) {
  .inner-container-job-default { flex-direction: row; }
}

/* Inner content spacing */
.inner-job-content > header   { padding-bottom: clamp(0.75rem, 3vw, 1.25rem); }
.inner-job-content .ts-post-content { padding-top: clamp(0.75rem, 3vw, 1.25rem); }
.ts-post-content h2           { margin: 0; }

/* Force full-width on narrow screens */
@media (max-width: 48em) {
  .inner-job-content,
  .inner-job-detail,
  .single-job-footer { width: 100% !important; }
}

/* Single-job footer: header floated right */
.single-job-footer .ts-post-header {
  float: right;
  width: clamp(70%, 85vw, 85%);
}

/* Related jobs in footer */
.single-job-footer .related-post-container  { flex-direction: column; }
.single-job-footer .related-articles-container { flex-direction: row; }


/* ─────────────────────────────────────────────────────────────────────────────
   6. EMPLOYER SECTION
───────────────────────────────────────────────────────────────────────────── */

.inner-job-employer-default {
  padding: clamp(1.5rem, 6vw, 3.125rem);
  border:  1px solid #ccc;
}

.inner-job-employer-default .featured-image img {
  width: clamp(15%, 25vw, 30%);
  float: left;
}

/* Employer post header */
.ts-employer-post-header {
  padding:     clamp(0.75rem, 3vw, 1.25rem) 0 clamp(0.375rem, 1.5vw, 0.5625rem);
  font-size:   clamp(1.125rem, 1rem + 1vw, 1.5rem);
  font-weight: 600;
}

.ts-employer-details             { padding-top: clamp(0.625rem, 2.5vw, 0.9375rem); }
.ts-employer-details li a        { font-weight: 600; }


/* ─────────────────────────────────────────────────────────────────────────────
   7. JOB DETAIL TABLE
───────────────────────────────────────────────────────────────────────────── */

/* Strip all cell borders — visual separation is handled by the tbody fill */
.inner-job-detail tr:last-child th,
.inner-job-detail tr:last-child td,
.inner-job-detail td:last-child,
.inner-job-detail :last-child,
.inner-job-detail th,
.inner-job-detail td { border: none; }

/* Logo thumbnail */
.inner-job-detail .job-featured-job {
  float: right;
  width: clamp(15%, 20vw, 23%);
}

.inner-job-detail .job-featured-job img { border-radius: 0; }

/* Label column */
.inner-job-detail th {
  float:     left;
  text-wrap: nowrap;
}

/* Shared cell size */
.inner-job-detail th,
.inner-job-detail td {
  font-size:   clamp(0.8125rem, 0.75rem + 0.3vw, 0.94em);
  line-height: 1.3;
}

/* Table body fill */
.inner-job-detail tbody {
  background-color: lavender;
  border:           1px solid #ccc !important;
}

/* Table caption */
.inner-job-detail caption {
  float:         left;
  text-wrap:     nowrap;
  margin-bottom: clamp(0.75rem, 3vw, 1.25rem);
  font-weight:   700;
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. JOB META & TYPE LABELS
───────────────────────────────────────────────────────────────────────────── */

.ts-item-detail,
.ts-job-type a {
  color:       var(--bansta-secondary-color);
  font-weight: 500;
}

.ts-job-meta { flex-wrap: wrap; }
.ts-expired  { color: orangered; }


/* ─────────────────────────────────────────────────────────────────────────────
   9. APPLY BUTTON
───────────────────────────────────────────────────────────────────────────── */

.job-apply-link {
  padding:          clamp(0.3125rem, 1.25vw, 0.3125rem) clamp(2rem, 8vw, 3.75rem);
  background-color: var(--bansta-link-color);
  border-radius:    25px;
  border-color:     var(--bansta-link-hover-color);
  font-weight:      600;
  margin-top:       clamp(0.625rem, 2.5vw, 0.9375rem);
}

.job-apply-link a { color: #fff; }


/* ─────────────────────────────────────────────────────────────────────────────
   10. FEATURED-JOB THUMBNAIL
───────────────────────────────────────────────────────────────────────────── */

.job-featured-job {
  float: left;
  width: clamp(3.75rem, 12vw, 15%);
}

.job-meta-info .job-featured-job { width: clamp(2.5rem, 5vw, 6%); }

@media (max-width: 48em) {
  .job-meta-info .job-featured-job { width: 2.5rem; }
}

.job-featured-job img {
  aspect-ratio:  1 / 1;
  border-radius: 50%;
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. ADVANCED SEARCH FORM
───────────────────────────────────────────────────────────────────────────── */

.advanced-search-container {
  width:     var(--bansta-site-header-size);
  margin:    clamp(1.5rem, 5vw, 2.5rem) auto;
  max-width: 100%;
}

.advanced-search-container ~ .content-wrapper button {
  margin-top: 1.3rem;
}

.advanced-search-container h1 {
  font-family: var(--bansta-secondary-font);
  margin:      0;
  text-align:  center;
  color:       var(--bansta-secondary-color);
  font-size:   clamp(1.375rem, 1rem + 2vw, 2rem);
}

.advanced-search-title { margin-bottom: clamp(1.25rem, 4vw, 1.875rem); }

/* Form controls */
#ts-advanced-form {
  padding:        0 clamp(0.5rem, 2vw, 0.625rem);
  flex-direction: column;
  align-items:    stretch;
}

#ts-advanced-form select { cursor: pointer; }

/* Mobile: stack all inputs */
#ts-advanced-form input[type="text"],
#ts-advanced-form select,
#ts-advanced-form input[type="submit"] {
  font-family:   var(--bansta-secondary-font);
  width:         100%;
  margin-bottom: clamp(0.5rem, 2vw, 0.9375rem);
}

/* Tablet: inline row */
@media (min-width: 37.5em) {
  #ts-advanced-form { flex-direction: row; align-items: center; }

  #ts-advanced-form input[type="text"],
  #ts-advanced-form select            { margin-bottom: 0; margin-right: clamp(0.5rem, 2vw, 0.625rem); }
  #ts-advanced-form input[type="submit"] { margin-bottom: 0; }

  #ts-advanced-form input[type="text"]   { width: 50%; }
  #ts-advanced-form select               { width: 25%; }
  #ts-advanced-form input[type="submit"] { width: 11%; }
}

/* Desktop: widen keyword field */
@media (min-width: 64em) {
  #ts-advanced-form input[type="text"] { width: 30%; }
}

/* Submit button style */
.advanced-search-container input[type="submit"] {
  border-color:     var(--bansta-primary-color);
  background-color: var(--bansta-primary-color);
  cursor:           pointer;
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. VIEW-MORE BUTTON
───────────────────────────────────────────────────────────────────────────── */

.view-more-text {
  text-align:       center;
  margin:           auto;
  width:            clamp(7rem, 15vw, 9.375rem);
  background-color: var(--bansta-primary-color);
  border-radius:    25px;
}

.view-more-text a {
  color:           #fff;
  text-decoration: none !important;
  font-family:     var(--bansta-primary-font);
  padding:         clamp(0.1875rem, 0.75vw, 0.25rem) clamp(0.25rem, 1vw, 0.375rem);
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. TAB SYSTEM
───────────────────────────────────────────────────────────────────────────── */

/* General tab-list (job type filters, etc.) */
.tab-list {
  overflow:         hidden;
  border:           1px solid #ccc;
  background-color: var(--bansta-primary-color);
  width:            min(31.25rem, 100%);
  margin:           auto;
  border-radius:    25px;
}

.tab-list button {
  background-color: inherit;
  color:            #fff;
  float:            left;
  border:           2px solid var(--bansta-primary-color);
  outline:          none;
  width:            25%;
  padding:          clamp(0.25rem, 1vw, 0.3125rem) clamp(0.625rem, 2.5vw, 1rem);
  transition:       background-color 0.3s;
  font-size:        clamp(0.75rem, 0.7rem + 0.3vw, 0.9em);
  font-weight:      600;
  line-height:      1.6;
  font-family:      var(--bansta-secondary-font);
  border-radius:    25px;
}

.tab-list button:hover {
  background-color: #ddd;
  color:            var(--bansta-secondary-color);
}

.tab-list button.active {
  background-color: #fff;
  color:            var(--bansta-primary-color);
}

/* Tab panels */
.tab-panels div {
  padding:   clamp(0.25rem, 1vw, 0.375rem) clamp(0.5rem, 2vw, 0.75rem);
  animation: fadeEffect 1s;
}

.tab-panels li {
  list-style:  none !important;
  margin-left: 0 !important;
}

@keyframes fadeEffect {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Auth tabs (login/register) — progressive width narrowing */
.ts-auth-tabs {
  display: block;
  margin:  auto;
  width:   100%;
}

@media (min-width: 37.5em) { .ts-auth-tabs { width: 80%; } }
@media (min-width: 48em)   { .ts-auth-tabs { width: 50%; } }

.ts-tab-nav {
  display:         flex;
  gap:             clamp(0.375rem, 1.5vw, 0.625rem);
  margin-bottom:   clamp(0.875rem, 3.5vw, 1.25rem);
  justify-content: center;
  flex-wrap:       wrap;
}

.ts-tab-nav [role="tab"] {
  padding:       clamp(0.25rem, 1vw, 0.3125rem) clamp(0.75rem, 3vw, 1.125rem);
  border:        none;
  background:    #eee;
  cursor:        pointer;
  border-radius: clamp(0.3125rem, 1.25vw, 0.375rem);
  font-size:     clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
}

.ts-tab-nav [role="tab"].active {
  background: var(--bansta-primary-color);
  color:      #fff;
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. DARK-MODE OVERRIDES
───────────────────────────────────────────────────────────────────────────── */

.dark-mode .ts-tax-wrapper li a { color: #fff; }

.dark-mode .ts-item-detail,
.dark-mode .ts-job-type a,
.dark-mode .widget_bansta_job_category a,
.dark-mode .widget_bansta_job_location a,
.dark-mode .widget_bansta_job_type a { color: var(--bansta-link-color); }

.dark-mode .widget_bansta_job_category,
.dark-mode .widget_bansta_job_location,
.dark-mode .widget_bansta_job_type {
  border:           1px solid;
  background-color: transparent !important;
}

.dark-mode .inner-job-detail tbody { background-color: transparent; }

.dark-mode .job-apply-link a { color: #fff; }

.dark-mode .tab-list,
.dark-mode .tab-list button {
  background-color: #353535;
  border:           1px solid #353535;
}

.dark-mode .tab-list button.active {
  background-color: var(--bansta-link-color);
  color:            #fff;
}

.dark-mode .advanced-search-container h1 { color: #fff; }