/* ============================================================
   TEFLHero Job Board — Custom Styles
   /wp-content/themes/hello-theme-child-master/job-board.css
   ============================================================ */

/* -- Shared tokens ------------------------------------------ */
:root {
  --th-navy:       #24315E;
  --th-red:        #F76C6C;
  --th-teal:       #2A9D8F;
  --th-text-2:     #5C6A8A;
  --th-text-3:     #8B96B0;
  --th-border:     #E8E0D4;
  --th-bg:         #F7F8FC;
  --th-white:      #FFFFFF;
  --th-radius:     10px;
  --th-shadow:     0 1px 3px rgba(36,49,94,.06), 0 2px 12px rgba(36,49,94,.05);
  --th-shadow-hover: 0 4px 16px rgba(36,49,94,.1), 0 8px 32px rgba(36,49,94,.08);
}

/* ============================================================
   RESET WPJM DEFAULT STYLES
   ============================================================ */

/* Strip all default WPJM list/card styles */
ul.job_listings li.th-job-card,
.job_listings li.th-job-card {
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

ul.job_listings li.th-job-card a,
.job_listings li.th-job-card a.th-job-card-link {
  padding: 18px 20px !important;
  border: none !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Kill WPJM's .company_logo styles */
.th-job-card .company_logo,
.th-job-card .company_logo img {
  display: none !important;
}

/* Kill anything WPJM injects into <li> after our <a> tag */
li.th-job-card > *:not(a.th-job-card-link) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   JOB LISTING CARDS
   ============================================================ */

.job_listings {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

li.th-job-card {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--th-white) !important;
  border: 1px solid var(--th-border) !important;
  border-left: 3px solid var(--th-teal) !important;
  border-radius: var(--th-radius) !important;
  box-shadow: var(--th-shadow) !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}

li.th-job-card:hover {
  box-shadow: var(--th-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* Force horizontal flex layout */
a.th-job-card-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Company logo / initial badge */
.th-job-card-logo {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--th-bg) !important;
  border: 1px solid var(--th-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

.th-job-card-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.th-job-initial {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--th-navy) !important;
  line-height: 1 !important;
}

/* Card body */
.th-job-card-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.th-job-card-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.th-job-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--th-navy) !important;
  margin: 0 0 2px !important;
  line-height: 1.3 !important;
}

.th-job-company {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  color: var(--th-text-2) !important;
  font-weight: 400 !important;
  display: block !important;
}

.th-job-excerpt {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  color: var(--th-text-2) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Meta row */
.th-job-card-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 4px !important;
}

.th-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px !important;
  color: var(--th-text-3) !important;
  font-weight: 400 !important;
}

.th-meta-item svg {
  flex-shrink: 0 !important;
}

.th-meta-item br {
  display: none !important;
}

.th-meta-date {
  margin-left: auto !important;
}

/* Type badges */
.th-job-card-badges {
  display: flex !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.th-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}

.th-badge--type {
  background: rgba(42, 157, 143, 0.1) !important;
  color: var(--th-teal) !important;
}

/* ============================================================
   SINGLE JOB PAGE
   ============================================================ */

/* Hide theme's page-header — title lives inside our header card */
body.single-job_listing .page-header {
  display: none !important;
}

body.single-job_listing .page-content {
  padding-top: 32px !important;
  padding-bottom: 72px !important;
}

/* Breadcrumb */
.th-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--th-text-2) !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
}

.th-breadcrumb:hover {
  color: var(--th-teal) !important;
}

/* Align single job layout */
.single_job_listing {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.th-single-job {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 24px !important;
  align-items: start !important;
}

.th-single-job-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Header card */
.th-job-header-card {
  background: var(--th-white) !important;
  border: 1px solid var(--th-border) !important;
  border-radius: var(--th-radius) !important;
  padding: 24px 28px !important;
  box-shadow: var(--th-shadow) !important;
}

.th-single-job-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  color: var(--th-navy) !important;
  line-height: 1.15 !important;
  margin: 0 0 12px !important;
}

.th-single-job-header-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  color: var(--th-text-2) !important;
}

.th-header-sep {
  color: var(--th-text-3) !important;
}

/* Content card */
.th-job-content-card {
  background: var(--th-white) !important;
  border: 1px solid var(--th-border) !important;
  border-radius: var(--th-radius) !important;
  padding: 28px !important;
  box-shadow: var(--th-shadow) !important;
}

/* Main content */
.th-single-job-content {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--th-navy);
}

.th-single-job-content p {
  margin: 0 0 1.1em;
  color: var(--th-text-2);
}

/* Normalize scraped content — kill empty paragraphs only */
.th-single-job-content p:empty {
  display: none !important;
}

.th-single-job-content ul,
.th-single-job-content ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
  color: var(--th-text-2);
}

.th-single-job-content li {
  margin-bottom: 0.4em;
}

.th-single-job-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--th-navy);
  margin: 2em 0 0.5em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--th-border);
}

/* Sidebar */
.th-single-job-sidebar {
  position: sticky !important;
  top: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Apply box */
.th-apply-box {
  background: var(--th-white);
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  padding: 18px;
  box-shadow: var(--th-shadow);
}

.th-apply-btn {
  display: block !important;
  width: 100% !important;
  background: var(--th-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 13px 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 2px 8px rgba(247,108,108,.3) !important;
}

.th-apply-btn:hover {
  background: #e85555 !important;
  transform: translateY(-1px) !important;
}

/* Application details link below button */
.th-apply-box .application_details {
  margin-top: 10px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px !important;
  color: var(--th-text-3) !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

.th-apply-box .application_details a {
  color: var(--th-teal) !important;
  text-decoration: none !important;
  word-break: break-all !important;
}

.th-apply-box .application_details a:hover {
  text-decoration: underline !important;
}

/* Meta card */
.th-meta-card {
  background: var(--th-white);
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  padding: 18px;
  box-shadow: var(--th-shadow);
}

.th-meta-card-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--th-text-3);
  margin: 0 0 12px;
}

.th-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--th-border);
}

.th-meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.th-meta-row:first-of-type {
  padding-top: 0;
}

.th-meta-label {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--th-text-3);
}

.th-meta-value {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: var(--th-navy);
  font-weight: 400;
  line-height: 1.4;
}

.th-meta-value a {
  color: var(--th-teal);
  text-decoration: none;
}

.th-meta-value a:hover {
  text-decoration: underline;
}

.th-expired-notice {
  background: #fff8f0;
  border: 1px solid #f0e0c0;
  border-radius: 8px;
  padding: 14px 18px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #a06020;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media ( max-width: 768px ) {
  .th-single-job {
    grid-template-columns: 1fr !important;
  }

  .th-single-job-sidebar {
    position: static !important;
    order: -1 !important;
  }

  a.th-job-card-link {
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .th-job-card-top {
    flex-wrap: wrap !important;
  }

  .th-job-card-badges {
    justify-content: flex-start !important;
  }

  .th-meta-date {
    margin-left: 0 !important;
  }
}