/*
 * RH Jobs structural CSS. Layout mechanics only, no colours, no type, no brand.
 * Visual styling belongs in the site's stylesheet against rh-job- classes.
 * Two custom properties are the hooks a site sets: --rh-job-container (content
 * width, default 1200px) and --rh-job-gutter (side padding, default 20px).
 */
/* The plugin templates own these wrappers. Themes that cap .site-main (Hello Elementor: 800px) would otherwise box the full-bleed hero. */
.rh-job-archive.content-area > .site-main, .rh-job-single-page.content-area > .site-main, .rh-job-closed-page.content-area > .site-main { max-width: none; margin-inline: 0; padding-inline: 0; }
.rh-job-inner { width: 100%; max-width: var(--rh-job-container, 1200px); margin-inline: auto; padding-inline: var(--rh-job-gutter, 20px); box-sizing: border-box; }
.rh-job-hero { width: 100%; }
.rh-job-hero__title { margin: 0; }
.rh-job-card[hidden], .rh-job-empty[hidden], .rh-job-filters__clear[hidden] { display: none; }
.rh-job-list { list-style: none; margin: 0; padding: 0; }
.rh-job-regions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.rh-job-card__meta > span + span::before, .rh-job__summary-item + .rh-job__summary-item::before { content: "\00b7"; margin: 0 0.5em; }
/* Accessibility baselines, not design: a link inside running text needs more than colour, a checkbox needs a 24px target. */
.rh-job-card__cta { text-decoration: underline; }
.rh-job-apply__field--consent input[type=checkbox] { min-width: 24px; min-height: 24px; margin: 0; }
.rh-job__side { min-width: 0; }
.rh-job__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0; }
.rh-job__fact dt, .rh-job__fact dd { margin: 0; }
.rh-job-apply__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.rh-job-apply__field label { display: block; }
.rh-job-apply__field--consent label { display: flex; gap: 0.5rem; align-items: flex-start; }
.rh-job-apply__field input:not([type=checkbox]) { width: 100%; max-width: 100%; box-sizing: border-box; }
.rh-job-apply__hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.rh-job-apply__status:empty { display: none; }
.rh-job-apply--sent .rh-job-apply__row,
.rh-job-apply--sent .rh-job-apply__field,
.rh-job-apply--sent .rh-job-apply__actions { display: none; }

/* Filters: a stacked panel behind a toggle on small screens, a sidebar column from 900px. */
.rh-job-filters__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.rh-job-filters__option { display: flex; align-items: center; gap: 0.5rem; }
.rh-job-filters__option input[type=checkbox] { min-width: 20px; min-height: 20px; margin: 0; flex: none; }
.rh-job-filters__text { flex: 1 1 auto; min-width: 0; }
.rh-job-filters__search { width: 100%; max-width: 100%; box-sizing: border-box; }
.rh-job-filters__panel { display: none; }
.rh-job-filters__panel[data-open] { display: block; }
@media (min-width: 900px) {
	/* (0,2,0) so a theme or Elementor kit button rule at (0,1,1) cannot bring the toggle back. */
	.rh-job-filters .rh-job-filters__toggle { display: none; }
	.rh-job-filters .rh-job-filters__panel { display: block; }
	.rh-job-board--with-filters .rh-job-board__inner { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
	.rh-job-board--with-filters .rh-job-regions { grid-column: 1 / -1; }
	.rh-job-board--with-filters .rh-job-filters { position: sticky; top: var(--rh-job-sticky-top, 1rem); }
	/* A sidebar taller than the viewport would otherwise pin its top and hide its tail until the list ends. Cap it and let it scroll on its own. */
	.rh-job-board--with-filters .rh-job-filters__panel { max-height: calc(100vh - var(--rh-job-sticky-top, 1rem) - 1.5rem); overflow-y: auto; box-sizing: border-box; }
}
.rh-job-filters__option[hidden] { display: none; }
.rh-job-more__button[hidden] { display: none; }
.rh-job-more { text-align: center; }
/* The apply section is a jump target. Keep it clear of a fixed header when the page scrolls to it. */
.rh-job__apply, .rh-job__cta { scroll-margin-top: var(--rh-job-sticky-top, 1rem); }

/* Cards layout (1.6.0): region filter row, role cards, cards job page. Mechanics only. */
.rh-job-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rh-job-pill-gap, 8px); }
.rh-job-pill { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
.rh-job-cards__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rh-job-cards__label, .rh-job-cards__count { margin: 0; }
.rh-job-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rh-job-cards-gap, 20px); }
@media (max-width: 1000px) { .rh-job-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rh-job-cards__grid { grid-template-columns: minmax(0, 1fr); } }
.rh-job-tile { display: flex; flex-direction: column; min-width: 0; }
.rh-job-tile[hidden], .rh-job-cards__empty[hidden] { display: none; }
.rh-job-tile__top { display: flex; flex-direction: column; flex: 1 1 auto; }
.rh-job-tile__title, .rh-job-tile__sub, .rh-job-tile__loc, .rh-job-tile__salary { margin: 0; overflow-wrap: anywhere; }
.rh-job-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-job-tile__loc, .rh-job__location { display: flex; align-items: center; gap: 8px; }
.rh-job-tile__pin, .rh-job__pin { width: 14px; height: 18px; flex: none; }
.rh-job-tile__go { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; box-sizing: border-box; }
.rh-job-tile__arrow { width: 18px; height: 11px; flex: none; }
.rh-job__apply-link { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
