/* ==========================================================
   KING OF FREIGHT - CAREERS PAGE
   Uses the website's shared header.php and footer.php

   IMPORTANT:
   Do not override #header, #stuck_container, .sf-menu,
   or #footer here. Those belong to the main website.
========================================================== */

/* ==========================================================
   PAGE LAYOUT
========================================================== */

main.careers {
  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: 80px 0 100px;
  min-height: 550px;

  background: #ffffff;
  color: #292d2a;
}

.careers,
.careers * {
  box-sizing: border-box;
}

/* Keep the content centered and aligned with the website */
.careers > .container {
  position: relative;
}

/* Prevent floated elements from affecting the page height */
.careers > .container::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================
   PAGE HEADING
========================================================== */

.careers .careers-heading {
  margin: 0 0 35px;
  padding: 0;
}

.careers .careers-heading .careers-title {
  display: block;

  margin: 0 0 12px;
  padding: 0;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.25;

  color: #161616;
  text-transform: none;
  letter-spacing: 0;
}

.careers .careers-heading .careers-subtitle {
  display: block;

  margin: 0;
  padding: 0;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.4;

  color: #48985b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ==========================================================
   OFFICE LOCATION FILTER
========================================================== */

.careers .careers-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 15px;
  margin: 0 0 35px;
  padding: 0;
}

.careers .careers-filters label {
  margin: 0;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;

  color: #222222;
}

.careers .careers-filters select {
  display: block;

  width: auto;
  min-width: 230px;
  max-width: 100%;

  margin: 0;
  padding: 10px 35px 10px 14px;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;

  color: #222222;
  background-color: #ffffff;

  border: 1px solid #cccccc;
  border-radius: 4px;

  cursor: pointer;
}

.careers .careers-filters select:hover {
  border-color: #48985b;
}

.careers .careers-filters select:focus {
  outline: 2px solid #48985b;
  outline-offset: 2px;
}

/* ==========================================================
   SALES / SUPPORT TABS
========================================================== */

.careers .job-tabs {
  display: flex;
  align-items: flex-end;

  gap: 12px;

  margin: 0 0 20px;
  padding: 0;

  border-bottom: 1px solid #dfe5df;
}

.careers .job-tabs button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-block;

  margin: 0 0 -1px;
  padding: 12px 18px;

  background: transparent;
  color: #333333;

  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;

  text-align: center;
  text-transform: none;

  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.careers .job-tabs button:hover {
  color: #48985b;
}

.careers .job-tabs button[aria-selected="true"] {
  color: #48985b;
  border-bottom-color: #48985b;
}

/* ==========================================================
   JOB LISTING PANELS
========================================================== */

.careers [role="tabpanel"] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ==========================================================
   JOB TABLE
========================================================== */

.careers table.job-table {
  display: table;

  width: 100%;
  margin: 0;
  padding: 0;

  border: 1px solid #e2e6e2;
  border-collapse: collapse;
  border-spacing: 0;

  background: #ffffff;
  color: #252525;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.careers table.job-table thead {
  display: table-header-group;
}

.careers table.job-table tbody {
  display: table-row-group;
}

.careers table.job-table tr {
  display: table-row;
}

/* ==========================================================
   TABLE HEADER
========================================================== */

.careers table.job-table thead tr {
  background: #303532;
}

.careers table.job-table thead th {
  background: #303532 !important;
  color: #ffffff !important;

  padding: 14px 20px;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;

  text-align: left;
  vertical-align: middle;

  border: 0;
}

.careers table.job-table thead th:last-child {
  text-align: right;
}

/* ==========================================================
   JOB ROWS
========================================================== */

.careers table.job-table tbody tr.job-row {
  background: #ffffff !important;
  border-bottom: 1px solid #e4e9e4;
}

.careers table.job-table tbody tr.job-row:nth-of-type(4n + 3) {
  background: #fafcfb !important;
}

.careers table.job-table tbody tr.job-row:hover {
  background: #f3f8f4 !important;
}

.careers table.job-table tbody tr.job-row > th,
.careers table.job-table tbody tr.job-row > td {
  background: transparent !important;
  color: #292d2a !important;

  padding: 16px 20px;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;

  text-align: left;
  vertical-align: middle;

  border: 0 !important;
}

.careers table.job-table tbody tr.job-row > th {
  font-weight: 600;
}

.careers table.job-table tbody tr.job-row > td:last-child {
  text-align: right;
}

/* ==========================================================
   EXPANDABLE JOB TITLE BUTTON
========================================================== */

.careers table.job-table button.job-toggle {
  appearance: none;
  -webkit-appearance: none;

  display: inline-block;

  margin: 0;
  padding: 0;

  background: transparent !important;
  color: #202b23 !important;

  border: 0 !important;
  border-radius: 0;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;

  text-align: left;
  text-transform: none;

  cursor: pointer;
}

.careers table.job-table button.job-toggle:hover {
  color: #367d49 !important;
}

.careers table.job-table button.job-toggle span {
  display: inline-block;

  margin-left: 9px;

  color: #48985b;

  font-size: 20px;
  font-weight: 600;
  line-height: 1;

  vertical-align: middle;
}

/* ==========================================================
   EXPANDED JOB DESCRIPTION
========================================================== */

.careers table.job-table tr.job-description {
  background: #f1f7f2 !important;
}

.careers table.job-table tr.job-description > td {
  background: #f1f7f2 !important;
  color: #333333 !important;

  padding: 18px 20px 22px;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;

  text-align: left !important;
  vertical-align: top;

  border-bottom: 1px solid #dce8de;
}

/* ==========================================================
   APPLY BUTTONS
========================================================== */

.careers table.job-table a.apply {
  display: inline-block;

  margin: 0;
  padding: 10px 20px;

  background: #48985b;
  color: #ffffff !important;

  border: 1px solid #48985b;
  border-radius: 4px;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  text-decoration: none;
  text-align: center;

  cursor: pointer;
  transition: background-color 0.2s;
}

.careers table.job-table a.apply:hover {
  background: #367847;
  border-color: #367847;
  color: #ffffff !important;
  text-decoration: none;
}

/* ==========================================================
   EMPTY RESULTS MESSAGES
========================================================== */

.careers table.job-table tr.job-empty-message > td,
.careers table.job-table tr.office-empty-message > td {
  padding: 20px;

  background: #ffffff;
  color: #555555;

  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;

  text-align: left;
  border: 0;
}

/* ==========================================================
   HIDDEN ELEMENTS
========================================================== */

.careers [hidden],
.careers [role="tabpanel"][hidden],
.careers table.job-table tr[hidden] {
  display: none !important;
}

/* ==========================================================
   KEYBOARD ACCESSIBILITY
========================================================== */

.careers :focus-visible {
  outline: 2px solid #48985b;
  outline-offset: 3px;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 979px) {
  main.careers {
    padding-top: 65px;
    padding-bottom: 80px;
    min-height: 450px;
  }

  .careers .careers-heading .careers-title {
    font-size: 38px;
  }

  .careers .careers-heading .careers-subtitle {
    font-size: 23px;
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {
  main.careers {
    padding-top: 45px;
    padding-bottom: 65px;
    min-height: 400px;
  }

  .careers .careers-heading {
    margin-bottom: 28px;
  }

  .careers .careers-heading .careers-title {
    font-size: 32px;
    line-height: 1.3;
  }

  .careers .careers-heading .careers-subtitle {
    font-size: 21px;
  }

  .careers .careers-filters {
    margin-bottom: 28px;
    gap: 10px;
  }

  .careers .job-tabs {
    gap: 8px;
  }

  .careers .job-tabs button {
    padding: 10px 14px;
    font-size: 15px;
  }

  .careers table.job-table {
    font-size: 13px;
  }

  .careers table.job-table thead th {
    padding: 12px 8px;
    font-size: 13px;
  }

  .careers table.job-table tbody tr.job-row > th,
  .careers table.job-table tbody tr.job-row > td {
    padding: 12px 8px;
    font-size: 13px;
  }

  .careers table.job-table button.job-toggle {
    font-size: 13px;
  }

  .careers table.job-table button.job-toggle span {
    font-size: 17px;
    margin-left: 5px;
  }

  .careers table.job-table a.apply {
    padding: 8px 10px;
    font-size: 12px;
  }

  .careers table.job-table tr.job-description > td {
    padding: 14px 12px;
    font-size: 13px;
  }
}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 479px) {
  main.careers {
    padding-top: 35px;
    padding-bottom: 50px;
  }

  .careers .careers-heading .careers-title {
    font-size: 28px;
  }

  .careers .careers-heading .careers-subtitle {
    font-size: 19px;
  }

  .careers .careers-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .careers .careers-filters select {
    width: 100%;
    min-width: 0;
  }

  .careers table.job-table thead th,
  .careers table.job-table tbody tr.job-row > th,
  .careers table.job-table tbody tr.job-row > td {
    padding: 10px 6px;
    font-size: 12px;
  }

  .careers table.job-table button.job-toggle {
    font-size: 12px;
  }

  .careers table.job-table a.apply {
    padding: 7px 8px;
    font-size: 11px;
  }
}