/* ==========================================================================
   Bright Professionals Vacatures
   Builds on main.css of the static site (bright-professionals.nl), which
   provides the design tokens, .container, .button, header and footer.
   Only styles specific to the jobs site live here. Every token has a
   fallback so this file also works on its own.
   ========================================================================== */
:root {
  --vac-primary: var(--color-primary, #00b0ff);
  --vac-primary-dark: var(--color-primary-dark, #008ccc);
  --vac-text: var(--color-text, #4f5052);
  --vac-muted: var(--color-muted, #6b7280);
  --vac-bg: var(--color-bg, #ffffff);
  --vac-bg-alt: var(--color-bg-alt, #f3f4f6);
  --vac-border: var(--color-border, #e5e7eb);
  --vac-radius: var(--radius, 0.5rem);
  --vac-gap: var(--space-m, 2rem);
  --vac-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  --vac-whatsapp: #25d366;
}

.vacatures-main { background: var(--vac-bg-alt); padding-bottom: var(--space-xl, 6rem); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.icon { flex-shrink: 0; vertical-align: middle; }

/* Buttons (variants on top of .button from main.css) ----------------------- */
.button { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Borders instead of inset shadows, so these also match main.css versions that give .button a border. */
.button--outline { background: transparent; color: var(--vac-primary); border: 2px solid currentColor; box-shadow: none; }
.button--outline:hover { background: var(--vac-primary); border-color: var(--vac-primary); color: #fff; }
.button--light { background: #fff; color: var(--vac-primary); border: 2px solid #fff; }
.button--light:hover { background: var(--vac-bg-alt); border-color: var(--vac-bg-alt); color: var(--vac-primary-dark); }

/* Page hero ------------------------------------------------------------------ */
.page-hero {
  background: var(--vac-primary);
  color: #fff;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.page-hero--image {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.05)),
    var(--hero-image) center / cover no-repeat,
    var(--vac-primary);
}
.page-hero__title { color: inherit; margin: 0; }
.page-hero__intro { margin: var(--space-xs, 0.5rem) 0 0; font-size: 1.125rem; opacity: 0.9; }

/* Breadcrumbs ---------------------------------------------------------------- */
.breadcrumbs { padding-block: var(--space-s, 1rem); font-size: 0.875rem; color: var(--vac-muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--vac-border); }
.breadcrumbs a { color: var(--vac-primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Card base ------------------------------------------------------------------ */
.jobs-filters__panel,
.jobs-description,
.no-results,
.job-section,
.job-widget,
.page-content {
  background: var(--vac-bg);
  border-radius: var(--vac-radius);
  box-shadow: var(--vac-shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* Jobs listing ----------------------------------------------------------------- */
.jobs-layout { display: grid; gap: var(--vac-gap); padding-top: var(--space-s, 1rem); }

@media (min-width: 64rem) {
  .jobs-layout { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; }
  .jobs-filters { position: sticky; top: var(--space-s, 1rem); }
}

.jobs-filters__toggle {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--vac-radius);
  background: var(--vac-bg);
  box-shadow: var(--vac-shadow);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.jobs-filters__toggle::after { content: "+"; float: right; }
.jobs-filters__toggle[aria-expanded="true"]::after { content: "–"; }
.jobs-filters__panel { margin-top: var(--space-xs, 0.5rem); }
.js .jobs-filters__panel { display: none; }
.js .jobs-filters__panel.is-open { display: block; }

@media (min-width: 64rem) {
  .jobs-filters__toggle { display: none; }
  .js .jobs-filters__panel { display: block; margin-top: 0; }
}

.jobs-results { display: grid; gap: var(--vac-gap); min-width: 0; }
.jobs-list { display: grid; gap: var(--space-s, 1rem); }
.jobs-description > :last-child { margin-bottom: 0; }

/* Job card */
.job-card {
  position: relative;
  display: grid;
  background: var(--vac-bg);
  border-radius: var(--vac-radius);
  box-shadow: var(--vac-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.job-card:hover { box-shadow: 0 6px 20px rgb(0 0 0 / 0.1); transform: translateY(-1px); }
.job-card:focus-within { outline: 3px solid var(--color-accent, var(--vac-primary)); outline-offset: 2px; }

@media (min-width: 40rem) {
  .job-card { grid-template-columns: minmax(0, 1fr) 14rem; }
}

.job-card__body { padding: 1.5rem; }
.job-card__title { font-size: 1.25rem; margin: 0 0 0.5rem; }
.job-card__title a { color: var(--vac-text); text-decoration: none; }
.job-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
.job-card__excerpt { color: var(--vac-muted); margin: 0 0 0.75rem; }
.job-card__more { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--vac-primary); font-weight: 600; }

.job-card__meta {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.5rem;
  display: grid;
  gap: 0.5rem;
  align-content: center;
  background: var(--vac-primary);
  color: #fff;
  font-size: 0.9375rem;
}
.job-card__meta li { display: flex; gap: 0.5rem; align-items: center; }

/* Load more */
.jobs-load-more { display: flex; justify-content: center; }
.jobs-load-more .facetwp-load-more {
  appearance: none;
  border: 0;
  border-radius: var(--vac-radius);
  background: var(--vac-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
}
.jobs-load-more .facetwp-load-more:hover { background: var(--vac-primary-dark); }
.jobs-load-more .is-loading .facetwp-load-more { opacity: 0.6; cursor: progress; }

.no-results h2 { font-size: 1.375rem; }
.no-results__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* FacetWP --------------------------------------------------------------------- */
.facet-wrap + .facet-wrap { margin-top: 1.5rem; }
.facet-label { font-size: 1rem; margin: 0 0 0.5rem; }
.jobs-filters .facetwp-facet { margin-bottom: 0; }

.facetwp-type-search .facetwp-input-wrap,
.facetwp-type-proximity .facetwp-input-wrap { display: block; width: 100%; }

.jobs-filters input[type="text"],
.jobs-filters input[type="search"],
.jobs-filters select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--vac-border);
  border-radius: var(--vac-radius);
  background: var(--vac-bg);
  font: inherit;
  color: inherit;
}
.jobs-filters select { margin-top: 0.5rem; }
.jobs-filters input:focus,
.jobs-filters select:focus { border-color: var(--vac-primary); outline: none; box-shadow: 0 0 0 3px rgb(0 176 255 / 0.2); }

.facetwp-checkbox { margin-bottom: 0.375rem; font-size: 0.9375rem; }
.facetwp-counter { color: var(--vac-muted); }
.facetwp-toggle { color: var(--vac-primary); cursor: pointer; font-size: 0.875rem; }

.facetwp-type-slider .noUi-connect { background: var(--vac-primary); }
.facetwp-type-slider .noUi-handle { border-color: var(--vac-primary); box-shadow: none; }
.facetwp-slider-label { display: block; margin-top: 0.75rem; font-size: 0.875rem; color: var(--vac-muted); }
.facetwp-slider-reset { display: none; }

/* Single job ------------------------------------------------------------------ */
.job-layout { display: grid; gap: var(--vac-gap); padding-top: var(--space-s, 1rem); }

@media (min-width: 64rem) {
  .job-layout { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .job-aside__inner { position: sticky; top: var(--space-s, 1rem); }
}

.job-main { display: grid; gap: 1.5rem; min-width: 0; }
.job-section h2 { font-size: 1.375rem; }
.job-section > :last-child { margin-bottom: 0; }
.job-section ul { padding-left: 1.25rem; }
.job-section ul ul li { list-style: circle; }

.job-details { margin: 0; display: grid; gap: 0.5rem; }
.job-details div { display: grid; gap: 0.125rem 1rem; }
.job-details dt { font-weight: 700; }
.job-details dd { margin: 0; }
@media (min-width: 40rem) {
  .job-details div { grid-template-columns: 12rem 1fr; }
}

.job-aside__inner { display: grid; gap: 1.5rem; }
.job-widget__title { font-size: 1.125rem; margin-bottom: 0.75rem; }
.job-facts { list-style: none; margin: 0; padding: 0; }
.job-facts li { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--vac-border); }
.job-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.job-facts .icon { color: var(--vac-primary); }

.job-widget--apply { background: var(--vac-primary); color: #fff; }
.job-widget--apply .job-widget__title { color: inherit; }

.job-share {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--vac-whatsapp);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
}
.job-share:hover { color: #fff; filter: brightness(0.95); }
@media (min-width: 64rem) { .job-share { display: none; } }

/* Pages ----------------------------------------------------------------------- */
.page-layout { padding-top: var(--space-s, 1rem); }
.page-content { max-width: 52rem; }
.entry-content > :last-child { margin-bottom: 0; }

/* Gravity Forms (on top of the Gravity Forms base styles) ---------------------- */
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label { font-weight: 600; font-size: 0.9375rem; }
.gform_wrapper.gravity-theme .gfield_required { color: var(--vac-primary); }

.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--vac-border);
  border-radius: var(--vac-radius);
  font: inherit;
}
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus { border-color: var(--vac-primary); outline: none; box-shadow: 0 0 0 3px rgb(0 176 255 / 0.2); }

.gform_wrapper.gravity-theme .gform_drop_area {
  border: 2px dashed var(--vac-border);
  border-radius: var(--vac-radius);
  background: var(--vac-bg-alt);
  padding: 1.5rem;
}
.gform_wrapper.gravity-theme .gform_button_select_files {
  border: 0;
  border-radius: var(--vac-radius);
  background: var(--vac-text);
  color: #fff;
  padding: 0.5rem 1rem;
  font: inherit;
  cursor: pointer;
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button {
  border: 0;
  border-radius: var(--vac-radius);
  background: var(--vac-primary);
  color: #fff;
  padding: 0.75rem 1.75rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_footer button:hover { background: var(--vac-primary-dark); }

.gform_confirmation_message { font-size: 1.125rem; }