/* Touching Hearts careers preview (DIS-325): layout fixes and the job board / slider on top of the client's theme.
 * Colors, fonts and the 100px corner come from touchinghearts.com (theme-custom.css):
 *   purple #6D2077, deep purple #47164D, mid purple #8B4F90, lilac #B68EB8, orange #F87C56, light #F5F7F8,
 *   Como (headings), Barlow (text).
 * Spacing and heading scale follow the Pacific Steel career page (section 56/80px, section head margin 48px,
 * hero title 38-62px, section title 30-42px, filter title 24px, job title 19px).
 */
:root {
  --th-purple: #6D2077;
  --th-deep: #47164D;
  --th-mid: #8B4F90;
  --th-lilac: #B68EB8;
  --th-orange: #F87C56;
  --th-light: #F5F7F8;
  --th-text: #545859;
  --th-muted: #6f7375;
  --th-line: #e3e5e7;
  --th-section-y: 56px;
  --th-gutter: 20px;
  --th-radius: 8px;
  --th-corner: 100px;
  --th-header-h: 108px;
}
@media (min-width: 768px) { :root { --th-section-y: 80px; --th-gutter: 30px; } }

html { scroll-padding-top: calc(var(--th-header-h) + 16px); }
body.th-locked { overflow: hidden; }

.th-container { width: 100%; max-width: calc(1130px + var(--th-gutter) * 2); margin: 0 auto; padding: 0 var(--th-gutter); }
.th-section { padding: var(--th-section-y) 0; }

/* ------------------------------------------------------------------ Hero (client hero-banner)
 * No overrides: exactly the hero of touchinghearts.com/careers/ (Steven, round 7). */

/* ------------------------------------------------------------------ Join our team! (client image-content purple)
 * The client's own composition, untouched (same as "Why Become a Caregiver?" on touchinghearts.com/careers/).
 * Only the media slot changes: a video card (16:9 player + deep purple bar with the video title and slider controls)
 * that keeps their 100px bottom-right corner. */
/* Videos: Pacific Steel video section (centred title, 960px player, controls centred below). */
.th-videos { background: var(--th-light); }
.th-section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.th-section-title { margin: 0 !important; font: 500 clamp(30px, 3vw, 42px)/1.15 Como, Arial, sans-serif !important; color: var(--th-purple) !important; }
.th-videos__player { max-width: 960px; margin: 0 auto; border-radius: var(--th-radius); overflow: hidden; background: #000; }
.th-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.th-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.th-videos__controls { max-width: 960px; margin: 24px auto 0; }

/* ------------------------------------------------------------------ Shared section rhythm (Pacific Steel)
 * Every body section gets the same vertical padding instead of the theme's mixed 90/150/100px. */
.th-benefits-intro .image-content__wrapper, .th-benefits, #locations .franchise-template__results,
.dual-cta .dual-cta__item, .th-closing { padding-top: var(--th-section-y) !important; padding-bottom: var(--th-section-y) !important; }
.th-benefits { padding-top: 0 !important; }
.th-closing .container > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Slider (Spavia template carousel) */
.th-carousel { min-width: 0; }
.th-carousel__track {
  display: flex; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.th-carousel__track::-webkit-scrollbar { display: none; }
.th-carousel__track:focus-visible { outline: 3px solid var(--th-orange); outline-offset: 4px; }
.th-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; margin: 0; padding: 0; }
.th-carousel__slide::before { display: none !important; }
.th-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.th-carousel__progress {
  display: flex; flex: 1; align-items: center; gap: 16px;
  font: 600 13px/1 Barlow, sans-serif; letter-spacing: .2em; font-variant-numeric: tabular-nums; color: var(--th-deep);
}
.th-carousel__total { opacity: .6; }
.th-carousel__bar { position: relative; display: block; width: 100%; max-width: 320px; height: 2px; overflow: hidden; background: rgba(71, 22, 77, .15); }
.th-carousel__fill { position: absolute; inset: 0; background: var(--th-orange); transform-origin: 0 50%; transform: scaleX(1); transition: transform .4s ease; }
.th-carousel__fill.is-timed { animation: th-frame 7s linear both; }
@keyframes th-frame { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.th-carousel__buttons { display: flex; flex-shrink: 0; gap: 8px; }
.th-carousel__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid rgba(71, 22, 77, .3); border-radius: 50%; background: transparent; color: var(--th-deep);
  transition: background-color .2s, border-color .2s, color .2s;
}
.th-carousel__btn:hover { border-color: var(--th-purple); background: var(--th-purple); color: #fff; }
.th-carousel__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .th-carousel__track { scroll-behavior: auto; }
  .th-carousel__fill.is-timed { animation: none; }
}

/* Benefits: the five blockquote + paragraph groups, one per slide; controls above (slides differ in length). */
.th-benefits .th-carousel { max-width: 860px; }
.th-benefits .th-carousel__controls { margin-bottom: 32px; }
.th-benefits .th-carousel__slide blockquote { margin-top: 0; }
.th-benefits .th-carousel__slide > :last-child { margin-bottom: 0; }
.th-benefits__closing { max-width: 860px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--th-line); }
.th-benefits__closing p { margin: 0; }

/* ------------------------------------------------------------------ Job board (Pacific Steel layout, TH tokens) */
.th-jobs { background: #fff; }
.jobs-layout { display: grid; gap: 32px; align-items: start; }
.jobs-layout.is-empty { display: block; }
@media (min-width: 900px) { .jobs-layout { grid-template-columns: 300px 1fr; } }
@media (min-width: 1100px) { .jobs-layout { grid-template-columns: 340px 1fr; gap: 64px; } }

.jobs-filters { background: var(--th-light); border-radius: 0 0 0 40px; }
.jobs-filters__head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0; }
.jobs-filters__title { margin: 0; font: 500 24px/1.2 Como, Arial, sans-serif; color: var(--th-purple); }
.jobs-filters__body { padding: 16px 24px 24px; }
.jobs-filters__foot { display: none; }
.drawer-close { display: none; }
@media (min-width: 900px) {
  .jobs-filters { position: sticky; top: calc(var(--th-header-h) + 16px); max-height: calc(100vh - var(--th-header-h) - 32px); overflow-y: auto; }
}

.filter-group { padding: 16px 0; border-top: 1px solid #dde1e4; }
.filter-group:first-child { border-top: 0; padding-top: 8px; }
.filter-label {
  display: block; margin: 0 0 10px;
  font: 700 13px/1.3 Barlow, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--th-deep);
}

.search-field { position: relative; }
.search-field svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #8d9194; pointer-events: none; }
.job-search, .facet-select {
  width: 100%; height: 48px; margin: 0;
  font: 500 16px Barlow, sans-serif; color: var(--th-deep);
  background: #fff; border: 1px solid #cfd3d6; border-radius: var(--th-radius);
}
.th-jobs .job-search { padding: 0 14px 0 42px !important; }
.job-search:focus, .facet-select:focus { border-color: var(--th-purple); outline: none; box-shadow: 0 0 0 3px rgba(109, 32, 119, .18); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--th-orange); border-bottom: 2px solid var(--th-orange); transform: translateY(-70%) rotate(45deg);
}
.facet-select { padding: 0 40px 0 14px; appearance: none; -webkit-appearance: none; cursor: pointer; }

.check {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 0;
  padding: 6px 0; background: none; border: 0; text-align: left; cursor: pointer;
  font: 500 16px/1.35 Barlow, sans-serif; color: var(--th-deep); text-transform: none; letter-spacing: 0;
}
.check::before {
  content: ""; flex: 0 0 18px; height: 18px; margin-top: 1px;
  border: 2px solid #9aa0a4; border-radius: 3px; background: #fff; transition: background-color .15s, border-color .15s;
}
.check:hover::before { border-color: var(--th-purple); }
.check[aria-checked="true"]::before {
  border-color: var(--th-purple);
  background: var(--th-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.check__count { color: var(--th-muted); margin-left: 2px; }
.facet-more { margin-top: 6px; }
.facet-empty { font-size: 15px; color: var(--th-muted); margin: 0; }
.loc-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.loc-row .check { font-weight: 700; text-transform: uppercase; letter-spacing: .8px; font-size: 14px; }
.loc-toggle { flex: 0 0 auto; min-width: 36px; padding: 4px 0; background: none; border: 0; cursor: pointer; font: 700 14px Barlow, sans-serif; color: var(--th-purple); letter-spacing: 1px; }
.loc-cities { padding: 0 0 6px 28px; }

.link-btn { padding: 0; background: none; border: 0; cursor: pointer; font: 700 14px Barlow, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--th-purple); text-decoration: underline; text-underline-offset: 3px; }

.jobs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.jobs-count { margin: 0; font: 500 17px/1.4 Barlow, sans-serif; color: var(--th-text); }
.jobs-count strong { color: var(--th-purple); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.chips:empty { display: none; }
.chips li { margin: 0; padding: 0; }
.chips li::before { display: none !important; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; cursor: pointer;
  background: #f3e9f4; color: var(--th-deep); border: 1px solid #dcc4de; font: 600 14px/1.2 Barlow, sans-serif;
}
.chip:hover { border-color: var(--th-purple); }
.chip__x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(109, 32, 119, .12); font-size: 14px; line-height: 1; }

.job-list { border-top: 1px solid var(--th-line); }
.job {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px;
  padding: 22px 8px; border-bottom: 1px solid var(--th-line); text-decoration: none; color: inherit; transition: background-color .15s;
}
.job:hover { background: var(--th-light); }
.job__title { margin: 0 0 6px; font: 700 19px/1.3 Barlow, sans-serif; color: var(--th-deep); text-transform: none; letter-spacing: 0; }
.job:hover .job__title { color: var(--th-purple); }
.job__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font: 500 15px/1.4 Barlow, sans-serif; color: var(--th-muted); }
.job__meta span { display: inline-flex; align-items: center; gap: 6px; }
.job__meta svg { width: 14px; height: 14px; fill: var(--th-orange); flex: 0 0 auto; }
.job__cta { font: 700 14px Barlow, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--th-purple); white-space: nowrap; }
.job__cta span { display: inline-block; transition: transform .15s; }
.job:hover .job__cta span { transform: translateX(4px); }
@media (max-width: 599px) {
  .job { grid-template-columns: 1fr; padding: 18px 0; }
  .job__cta { margin-top: 6px; }
}

.jobs-state { padding: 48px 24px; text-align: center; border-bottom: 1px solid var(--th-line); }
.jobs-state__title { margin: 0 0 8px; font: 500 26px/1.25 Como, Arial, sans-serif; color: var(--th-purple); }
.jobs-state p { color: var(--th-muted); max-width: 440px; margin: 0 auto 24px; }
.jobs-state .btn { display: inline-flex; }

.skeleton { padding: 22px 4px; border-bottom: 1px solid var(--th-line); }
.skeleton i { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #eee 0, #f6f6f6 40%, #eee 80%); background-size: 400px 100%; animation: th-shimmer 1.2s infinite linear; }
.skeleton i:first-child { width: 55%; height: 18px; margin-bottom: 10px; }
.skeleton i:last-child { width: 30%; }
@keyframes th-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }

.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.pager:empty { display: none; }
.pager button { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 50%; border: 1px solid var(--th-line); background: #fff; color: var(--th-deep); font: 700 15px Barlow, sans-serif; cursor: pointer; }
.pager button:hover { border-color: var(--th-purple); color: var(--th-purple); }
.pager button[aria-current="page"] { background: var(--th-purple); border-color: var(--th-purple); color: #fff; }
.pager button:disabled { opacity: .4; cursor: default; }

/* Outline variant of the client's .btn for secondary actions. */
.btn.btn--outline { background: transparent; box-shadow: inset 0 0 0 2px var(--th-purple); color: var(--th-purple); }

/* Mobile: search + "Filter Jobs" button; the panel becomes a bottom drawer. */
.jobs-mobilebar { display: none; }
.filter-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 11px; background: #fff; color: var(--th-deep); font-size: 13px; letter-spacing: 0; }
.drawer-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(40, 10, 44, .55); }
@media (max-width: 899px) {
  .jobs-mobilebar { display: grid; gap: 12px; margin-bottom: 24px; }
  .jobs-mobilebar[hidden] { display: none; }
  .jobs-mobilebar .btn { width: 100%; justify-content: center; }
  .filter-group--search { display: none; }
  .filter-group--search + .filter-group { border-top: 0; }
  .jobs-filters {
    position: fixed; z-index: 9991; left: 0; right: 0; bottom: 0; max-height: 88vh;
    display: flex; flex-direction: column; border-radius: 14px 14px 0 0; background: #fff;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
    transform: translateY(105%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s;
  }
  .jobs-filters.is-open { transform: none; visibility: visible; transition: transform .28s ease; }
  .jobs-filters__head { position: relative; padding: 16px var(--th-gutter); border-bottom: 1px solid var(--th-line); }
  .jobs-filters__head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #d5d8da; }
  .jobs-filters__body { flex: 1; overflow-y: auto; padding: 8px var(--th-gutter) 16px; overscroll-behavior: contain; }
  .jobs-filters__foot {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 12px var(--th-gutter) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--th-line); background: #fff;
  }
  .jobs-filters__foot .btn { width: 100%; justify-content: center; padding-left: 10px; padding-right: 10px; }
  .drawer-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; color: var(--th-deep); cursor: pointer; }
  .drawer-close svg { width: 22px; height: 22px; }
  .check { padding: 9px 0; }
  .loc-toggle { min-width: 44px; padding: 8px 0; }
}

/* Two "Services" buttons in the dark dual-cta item (one per location). */
.th-btn-row { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: inherit; }

/* ------------------------------------------------------------------ Heading scale and spacing fixes (Pacific Steel scale) */
.th-benefits-intro .image-content__text--heading h2,
#locations .franchise-template__results h2 {
  font-size: clamp(30px, 3vw, 42px) !important; line-height: 1.15 !important;
}
#locations .franchise-template__results h2 { margin-bottom: 48px !important; }

/* Benefits intro (client image-content shapes): the copy sat at the top of the shape with a large empty block
 * under it; centre it vertically against the photo. */
.th-benefits-intro [data-type="text_section"] .image-content__item__text-wrapper { align-self: center !important; }

/* Benefits slider: heading close to its paragraphs. */
.th-benefits .th-carousel__slide blockquote { margin: 0 0 20px !important; }
.th-benefits .th-carousel__slide p { margin: 0 0 16px; }

/* Closing block: Google review button and the service-area paragraph, no extra top gap. */
.th-closing .container > p:first-child { margin-top: 0; }

/* Store locator list: the plugin gives #wpsl-stores a 350px scroll box (built for its AJAX results); with two
 * static rows it hid Central Kansas' service area, phone and "View Site" inside a scroll on mobile. */
#locations #wpsl-stores { height: auto !important; max-height: none !important; overflow: visible !important; }

.filter-badge[hidden] { display: none !important; }
.jobs-state .btn { display: inline-flex !important; width: auto !important; }
.jobs-layout.is-empty .jobs-toolbar { display: none; }
.jobs-layout.is-empty .job-list { border-top: 0; }
.jobs-layout.is-empty .jobs-state { border-bottom: 0; background: var(--th-light); border-radius: 0 0 0 40px; }
/* The theme strips borders/background from inputs; restore the search and select boxes. */
.th-jobs .job-search, .th-jobs .facet-select { border: 1px solid #cfd3d6 !important; background-color: #fff !important; height: 48px !important; border-radius: var(--th-radius) !important; box-shadow: none; }
.th-jobs .job-search:focus, .th-jobs .facet-select:focus { border-color: var(--th-purple) !important; box-shadow: 0 0 0 3px rgba(109, 32, 119, .18); }

/* Benefits photo (client ART.TH_.4 photo, 2218px): frame both people inside the client's shape crop. */
.th-benefits-intro [data-type="image"] img { object-fit: cover !important; object-position: 70% 30% !important; }

/* Locations table fitted to its content: same width as the other sections (was 1420px), and no 350px
 * minimum box from the plugin (the two rows take ~250px). */
#locations .container { max-width: calc(1130px + var(--th-gutter) * 2) !important; padding-left: var(--th-gutter) !important; padding-right: var(--th-gutter) !important; margin: 0 auto; }
#locations #wpsl-stores { min-height: 0 !important; }
#locations #wpsl-wrap { margin-bottom: 0 !important; }

/* White gaps around the client's hero and purple block use the light grey of the videos section (Steven, round 8). */
.hero-banner.th-hero { background-color: var(--th-light) !important; }
@media (min-width: 940px) { .image-content.th-join { background-color: var(--th-light) !important; } }