/*
 * BizTech Fusion — Comeet / Spark Hire Recruit careers styling (HOST PAGE)
 * https://biztechfusion.com/wp-content/uploads/comeet/comeet-custom.css
 *
 * Enqueued on biztechfusion.com careers pages (page 348 + virtual position/
 * location/department pages) by mu-plugin btf-comeet-css.php. Fixes the
 * un-containered position detail pages and improves the openings list.
 *
 * NOTE: the Comeet plugin enqueues its own comeet-cards.css/comeet-reset.css
 * AFTER this file (late, from the shortcode handler), so every override here
 * must WIN ON SPECIFICITY, not load order. Do not "simplify" selectors.
 *
 * The apply-form/social IFRAMES are styled by the separate comeet-iframe.css
 * (referenced as the Custom CSS URL in Spark Hire Recruit settings and the
 * plugin's comeet_css_url option). Comeet fetches that URL through
 * www.comeet.co/css/sanitize, which REJECTS whole files containing banned
 * substrings such as "@import" — keep iframe rules in that file, not here.
 *
 * Brand: red #c0302e (site link color), font "Bai Jamjuree" (loaded by the
 * Kalium theme — no font import needed here).
 */

/* ==========================================================================
   1. Position DETAIL pages (and virtual location/department pages)
   The plugin outputs .all-jobs-link and .comeet-outer-wrapper as DIRECT
   children of .vc-container with no container or padding (the "flush
   against the left edge" problem). On /careers/ the wrapper is nested
   inside the WPBakery .container, so these child selectors do not match.
   Widths mirror the theme's stepped Bootstrap-3 .container exactly
   (fluid < 768px, 750px, 970px, 1170px) so content aligns with the
   header/footer at every viewport width.
   ========================================================================== */

.vc-container > .all-jobs-link,
.vc-container > .comeet-outer-wrapper {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .vc-container > .all-jobs-link,
  .vc-container > .comeet-outer-wrapper {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .vc-container > .all-jobs-link,
  .vc-container > .comeet-outer-wrapper {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .vc-container > .all-jobs-link,
  .vc-container > .comeet-outer-wrapper {
    max-width: 1170px;
  }
}

/* Back link at the top of the detail page: kill the full-width divider the
   plugin styles it with (it is a bottom-of-list separator elsewhere) */
.vc-container > .all-jobs-link {
  border-top: 0;
  margin-top: 0;
  padding-top: 34px;
  padding-bottom: 0;
}

.vc-container > .comeet-outer-wrapper {
  padding-bottom: 70px;
}

.all-jobs-link a {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.15s ease;
}
.all-jobs-link a:hover {
  text-decoration: underline;
}

/* Position title + location */
.vc-container > .comeet-outer-wrapper h2.comeet-position-name {
  margin: 20px 0 6px;
  font-weight: 600;
  line-height: 1.25;
}

/* Step the 30px title down on phones (comeet-reset.css pins 30px) */
@media (max-width: 480px) {
  .vc-container > .comeet-outer-wrapper h2.comeet-position-name {
    font-size: 24px;
  }
}

.vc-container > .comeet-outer-wrapper .comeet-position-meta-single {
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Description: restore paragraph rhythm (the plugin resets all margins via
   `.comeet-position-info *` and `.comeet-outer-wrapper
   .comeet-position-description p`) and cap the measure for readability */
.vc-container > .comeet-outer-wrapper .comeet-position-info,
.vc-container > .comeet-outer-wrapper .comeet-apply {
  max-width: 860px;
}

.vc-container > .comeet-outer-wrapper .comeet-position-info .comeet-user-text p {
  margin: 0 0 12px;
  line-height: 1.7;
}

.vc-container > .comeet-outer-wrapper .comeet-position-info .comeet-user-text > ul,
.vc-container > .comeet-outer-wrapper .comeet-position-info .comeet-user-text > ol {
  margin: 0 0 12px 5px;
  padding: 5px 0 0 20px;
}

.vc-container > .comeet-outer-wrapper .comeet-position-info .comeet-user-text li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Section headings ("About The Position", "Apply for this position") */
.vc-container > .comeet-outer-wrapper .comeet-position-info h4,
.vc-container > .comeet-outer-wrapper .comeet-apply h4 {
  margin: 36px 0 12px;
  font-size: 20px;
  font-weight: 700;
}

/* Apply section: separate it from the description like the social block */
.vc-container > .comeet-outer-wrapper .comeet-apply {
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
}

/* Social block: match the apply section's measure and divider color so the
   two stacked rules don't render at different lengths/greys on desktop */
.vc-container > .comeet-outer-wrapper .comeet-social {
  max-width: 860px;
  margin-top: 30px;
  border-top: 1px solid #e8e8e8;
}

/* ==========================================================================
   2. /careers/ openings list ONLY
   Scoped with .wpb_wrapper: on /careers/ the wrapper is nested inside
   WPBakery (.wpb_wrapper > .comeet-outer-wrapper); on the auto-generated
   location/department pages — which use DIFFERENT list markup
   (li.comeet-position instead of a.comeet-position cards) — the wrapper is
   a direct child of .vc-container, so nothing here leaks onto them.
   The plugin floats cards at 48% width but each sits in its own <li>, so
   they stack one per row on half the width. Lay them out as a proper
   responsive grid instead.
   ========================================================================== */

.wpb_wrapper .comeet-groups-list ul.comeet-positions-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.wpb_wrapper .comeet-groups-list .comeet-positions-list li {
  margin: 0;
}

.wpb_wrapper .comeet-groups-list li a.comeet-position {
  display: block;
  float: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 16px 18px;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Replace the plugin's harsh black hover shadow */
.wpb_wrapper .comeet-groups-list li a.comeet-position:hover {
  border-color: #c0302e;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.wpb_wrapper .comeet-groups-list .comeet-position .comeet-position-name {
  font-weight: 600;
  margin-bottom: 4px;
}

/* comeet-reset.css pins the meta line at 12px with a 6-class selector;
   this mirrors it one level deeper to win */
.wpb_wrapper .comeet-outer-wrapper .comeet-groups-list .comeet-list .comeet-positions-list .comeet-position .comeet-position-meta {
  font-size: 13px;
}

.wpb_wrapper .comeet-groups-list .comeet-group-name {
  margin-top: 36px;
  margin-bottom: 14px;
}