/* GetReskilled Jobs Board. Matches the current board's look; colours are variables the theme can override. */
.grjb {
	--grjb-primary: #2e3192;
	--grjb-primary-dark: #22256f;
	--grjb-red: #d9534f;
	--grjb-red-dark: #c1403c;
	--grjb-banner: #dbe7fb;
	--grjb-border: #dfe1e6;
	--grjb-text: #1d1d1f;
	--grjb-muted: #5c6070;
	--grjb-placeholder: #8a8f9c;
	--grjb-radius: 16px;
	--grjb-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M0 0h12L6 7z' fill='%236b7080'/%3E%3C/svg%3E");
	box-sizing: border-box;
	color: var(--grjb-text);
}
.grjb *, .grjb *::before, .grjb *::after { box-sizing: inherit; }
.grjb-wrap { max-width: none; margin: 0 var(--grjb-edge-right, 0px) 0 var(--grjb-edge-left, 0px); padding: 26px 0 48px; }
.grjb-heading { font-size: 24px; font-weight: 600; line-height: 1.3; margin: 0 0 10px; color: var(--grjb-text); }
.grjb-subheading { font-size: 1.35rem; font-weight: 600; margin: 36px 0 14px; }
.grjb-back { color: var(--grjb-muted); margin: 0 0 16px; }
.grjb-back a { color: inherit; }
.grjb .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.grjb-hp { position: absolute !important; left: -9999px !important; }

/* Buttons */
.grjb-btn { display: inline-block; background: var(--grjb-primary); color: #fff !important; border: 0; border-radius: 4px; padding: 8px 18px; font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: none !important; cursor: pointer; text-align: center; }
.grjb-btn:hover, .grjb-btn:focus { background: var(--grjb-primary-dark); }
.grjb-btn-red { background: var(--grjb-red); }
.grjb-btn-red:hover, .grjb-btn-red:focus { background: var(--grjb-red-dark); }
.grjb-btn-block { display: block; width: 100%; }
.grjb-panel { background: #fff; border: 1px solid var(--grjb-border); border-radius: 10px; padding: 20px; }

/*
 * Form controls. Themes often fix the height and line-height of select boxes,
 * which clips the text, so sizing is set firmly here. Sizes match the current board.
 */
.grjb select,
.grjb input[type=text],
.grjb input[type=email],
.grjb input[type=search],
.grjb input[type=number],
.grjb input[type=password] {
	height: 39px !important;
	min-height: 0 !important;
	line-height: 1.3 !important;
	padding: 7px 12px !important;
	font-size: 15px !important;
	font-family: inherit;
	color: var(--grjb-text) !important;
	background-color: #fff !important;
	border: 1px solid var(--grjb-border) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	margin: 0 !important;
	text-indent: 0 !important;
	vertical-align: middle;
	max-width: 100%;
}
.grjb input::placeholder { color: var(--grjb-placeholder); opacity: 1; }
.grjb select {
	padding-right: 30px !important;
	text-overflow: ellipsis;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: var(--grjb-caret) !important;
	background-repeat: no-repeat !important;
	background-position: right 11px center !important;
	background-size: 9px 5px !important;
	cursor: pointer;
}
.grjb select.grjb-default { color: var(--grjb-placeholder) !important; }
.grjb select option { color: var(--grjb-text); }
.grjb select:focus, .grjb input:focus { outline: none !important; border-color: var(--grjb-primary) !important; box-shadow: inset 0 0 0 1px var(--grjb-primary) !important; }

/* Alert banner: full width strip; its content is left-aligned and lined up with the page (the script sets the inner box's padding to match the logo). */
.grjb-banner { position: relative; padding: 36px 0 34px; text-align: left; }
/* The blue strip is painted behind the banner across the whole window, so the content stays in the page's own column. No script needed. */
.grjb-banner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--grjb-banner); border-top: 1px solid #c9d6ee; border-bottom: 1px solid #c9d6ee; z-index: -1; }
.grjb-board-page { position: relative; z-index: 0; }
body:has(.grjb-board-page) { overflow-x: clip; }
.grjb-banner-inner { max-width: none; margin: 0 var(--grjb-edge-right, 0px) 0 var(--grjb-edge-left, 0px); padding: 0; }
.grjb-banner h2 { margin: 0 0 6px; font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--grjb-text); }
.grjb-banner > .grjb-banner-inner > p { margin: 0 0 22px; max-width: 720px; font-size: 15px; line-height: 1.5; color: #3d4252; }
.grjb-banner-form { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: flex-start; align-items: center; }
.grjb-banner-text { font-size: 14px; color: var(--grjb-text); white-space: nowrap; }
.grjb .grjb-banner-form select,
.grjb .grjb-banner-form input[type=email] { border-color: #fff !important; height: 40px !important; }
.grjb .grjb-banner-form select[name=frequency] { width: 108px !important; text-overflow: clip; }
.grjb .grjb-banner-form select[name=category] { width: 166px !important; }
.grjb .grjb-banner-form input[type=email] { width: 199px !important; }
.grjb .grjb-banner-form .grjb-btn { height: 40px; padding: 0 22px; font-size: 15px; line-height: 40px; margin-left: 4px; }
.grjb-banner-msg { margin: 12px 0 0 !important; color: var(--grjb-primary) !important; font-weight: 600; font-size: 14px; }

/* Board layout: cards about three quarters, filters about a quarter */
.grjb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 23%); gap: 24px; align-items: start; }
.grjb-sidebar { position: sticky; top: 24px; }
.grjb-filters { background: #fff; border: 1px solid var(--grjb-border); border-radius: 10px; padding: 19px 19px 18px; display: grid; gap: 18px; }
.grjb-field span { display: block; font-size: 13px; font-weight: 400; color: var(--grjb-muted); line-height: 1.3; margin-bottom: 4px; }
.grjb .grjb-field select, .grjb .grjb-field input { width: 100% !important; height: 39px !important; }
.grjb-check { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--grjb-text); }
.grjb-check input { width: 13px; height: 13px; margin: 0; }
.grjb-filters .grjb-btn { width: 100%; height: 40px; padding: 0; line-height: 40px; font-size: 15px; margin-top: 0; }
.grjb-filters-toggle { display: none; }

/* Job cards */
.grjb-cards { display: grid; gap: 12px; }
.grjb-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--grjb-border); border-radius: 10px; padding: 19px 19px 19px 19px; transition: box-shadow .15s, border-color .15s; }
.grjb-card:hover { border-color: #c9ccd6; box-shadow: 0 4px 14px rgba(20, 30, 80, .06); }
.grjb-pinned { border-left: 3px solid var(--grjb-primary); }
.grjb-card > .grjb-logo, .grjb-card > .grjb-logo-placeholder { align-self: start; margin-top: 0; }
.grjb-logo, .grjb-logo-placeholder { width: 44px; height: 44px; object-fit: contain; display: block; }
.grjb-logo-placeholder { background: #f3f4f7; border-radius: 4px; }
.grjb-card-title { font-size: 18px; font-weight: 400; line-height: 1.3; margin: 0 0 4px; }
.grjb-card-title a { color: var(--grjb-text); text-decoration: none; }
.grjb-card-title a:hover { color: var(--grjb-primary); text-decoration: underline; }
.grjb-card-meta { margin: 0 0 9px; color: var(--grjb-muted); font-size: 14px; line-height: 1.4; }
.grjb-card-meta span { margin: 0 3px; }
.grjb-tag { display: inline-block; background: #fff; color: var(--grjb-muted); border: 1px solid #b9bdc8; border-radius: 4px; padding: 1px 8px; font-size: 14px; line-height: 1.4; text-decoration: none; }
.grjb-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.grjb-tag:hover { border-color: var(--grjb-primary); color: var(--grjb-primary); }
.grjb-card-side { text-align: right; min-width: 64px; }
.grjb-age { color: var(--grjb-muted); font-size: 14px; white-space: nowrap; }
.grjb-clock { display: inline-block; width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 50%; margin-right: 3px; vertical-align: -1px; position: relative; }
.grjb-clock::after { content: ""; position: absolute; left: 4px; top: 2px; width: 3px; height: 3px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.grjb-card-apply { display: none; height: 34px; line-height: 34px; padding: 0 28px; min-width: 110px; font-size: 14px; }
@media (hover: hover) {
	.grjb-card:hover .grjb-age, .grjb-card:focus-within .grjb-age { display: none; }
	.grjb-card:hover .grjb-card-apply, .grjb-card:focus-within .grjb-card-apply { display: inline-block; }
}
.grjb-closed .grjb-card { opacity: .65; }
.grjb .grjb-empty { background: #fff; border: 1px dashed var(--grjb-border); border-radius: 10px; padding: 19px; margin: 0; color: var(--grjb-muted); font-size: 14px; line-height: 1.5; }

/* Pagination and footer links */
.grjb-pages { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; align-items: center; }
.grjb-pages a, .grjb-pages span { padding: 9px 14px; border: 1px solid var(--grjb-border); border-radius: 6px; text-decoration: none; background: #fff; color: var(--grjb-text); }
.grjb-pages .grjb-current { background: var(--grjb-primary); color: #fff; border-color: var(--grjb-primary); }
.grjb-pages .grjb-gap { border: 0; background: none; }
.grjb-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; border-top: 1px solid var(--grjb-border); margin-top: 48px; padding-top: 22px; }
.grjb-footer-links a { color: var(--grjb-muted); }
/* Board: Companies, Post a Job and Employer Login in a column under the filters. */
.grjb-side-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 0 20px; }
.grjb-side-links a { color: var(--grjb-muted); font-size: 15px; line-height: 1.4; }
.grjb-side-links a:hover, .grjb-side-links a:focus { color: var(--grjb-primary); }
.grjb-footer-links-phone { display: none; }

/* Job page */
.grjb-job-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 26%); gap: 24px; align-items: start; }
.grjb-job-head h1 { font-size: 26px; font-weight: 500; line-height: 1.3; margin: 0 0 6px; }
.grjb-job-head { border-bottom: 1px solid var(--grjb-border); padding-bottom: 14px; margin-bottom: 18px; }
.grjb-salary { font-weight: 600; margin: 0; }
.grjb-description { line-height: 1.65; font-size: 15px; overflow-wrap: anywhere; }
.grjb-job-side { display: grid; gap: 14px; position: sticky; top: 24px; }
.grjb-apply-box { text-align: center; }
.grjb-logo-large { width: 88px; height: 88px; object-fit: contain; margin: 0 auto 10px; display: block; }
.grjb-company { font-weight: 600; font-size: 15px; margin: 0 0 14px; }
.grjb-apply-box .grjb-btn { height: 38px; line-height: 38px; padding: 0 12px; font-size: 15px; }
.grjb-share { margin-top: 20px; }
.grjb-share p { margin: 0 0 8px; color: var(--grjb-muted); }
.grjb-share a { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--grjb-border); color: var(--grjb-primary); align-items: center; justify-content: center; font-weight: 700; text-decoration: none; margin: 0 3px; }
.grjb-notice { background: #fff6e5; border: 1px solid #f3d38a; border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; }

/* Companies and home */
.grjb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.grjb-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: #fff; border: 1px solid var(--grjb-border); border-radius: var(--grjb-radius); padding: 22px; text-decoration: none; color: inherit; }
.grjb-tile:hover { border-color: var(--grjb-primary); }
.grjb-tile img, .grjb-tile .grjb-logo-placeholder { width: 80px; height: 80px; object-fit: contain; }
.grjb-tile span { color: var(--grjb-muted); }
.grjb-company-head { display: flex; gap: 26px; align-items: flex-start; margin-bottom: 26px; }
.grjb-hero { text-align: center; padding: 44px 16px; }
.grjb-hero-search { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.grjb .grjb-hero-search input, .grjb .grjb-hero-search select { min-width: 220px; }
.grjb-featured { margin: 36px 0; }
.grjb-more { text-align: center; margin-top: 18px; }

/* Employer pages */
.grjb-employer form { display: grid; gap: 16px; max-width: 760px; }
.grjb-employer .grjb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grjb .grjb-employer .grjb-field input, .grjb .grjb-employer .grjb-field select { min-height: 50px !important; }
.grjb-employer table { width: 100%; border-collapse: collapse; background: #fff; }
.grjb-employer th, .grjb-employer td { text-align: left; padding: 12px; border-bottom: 1px solid var(--grjb-border); }
.grjb-msg { background: var(--grjb-banner); border-radius: 8px; padding: 12px 16px; }
.grjb-error { background: #fdecec; border-radius: 8px; padding: 12px 16px; }
.grjb-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* Tablet and phone */
/* Space above the board can be adjusted in Settings (used when the script cannot measure the page). */
.grjb-board-page { margin-top: var(--grjb-top-offset, 0px); }

/* The Apply bar only exists on phones. */
.grjb-apply-bar { display: none; }

@media (max-width: 900px) {
	.grjb-wrap { padding: 20px 0 40px; }
	.grjb select, .grjb input[type=text], .grjb input[type=email], .grjb input[type=search], .grjb input[type=number], .grjb input[type=password] { font-size: 16px !important; height: 40px !important; }
	.grjb .grjb-field select, .grjb .grjb-field input, .grjb .grjb-banner-form select, .grjb .grjb-banner-form input[type=email] { height: 40px !important; }
	.grjb-layout, .grjb-job-layout, .grjb-columns { grid-template-columns: 1fr; }
	.grjb-sidebar { position: static; order: -1; }
	.grjb-results { order: 2; }
	.grjb-filters-toggle { display: block; width: 100%; margin-bottom: 12px; min-height: 44px; background: #fff; color: var(--grjb-primary) !important; border: 1px solid var(--grjb-primary); }
	.grjb-filters-toggle:hover, .grjb-filters-toggle:focus { background: #f3f4fb; }
	.grjb-open .grjb-filters-toggle { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
	.grjb-open .grjb-filters { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; margin-bottom: 16px; }
	.grjb-check input { width: 20px; height: 20px; }
	.grjb-share a { width: 44px; height: 44px; }
	.grjb-job-side { order: -1; }
	.grjb-card-apply, .grjb-pages a, .grjb-pages span { min-height: 40px; line-height: 40px; }
	.grjb-card-apply { min-width: 140px; padding: 0 20px; }
	.grjb-sidebar .grjb-filters { display: none; }
	.grjb-side-links { display: none; }
	.grjb-footer-links-phone { display: flex; }
	.grjb-sidebar.grjb-open .grjb-filters { display: grid; }
	.grjb-job-side { position: static; }
	.grjb-banner { padding: 22px 0 20px; }
	.grjb-banner-inner { margin: 0; }
	.grjb-wrap { margin-left: 0; margin-right: 0; }
	.grjb-banner h2 { font-size: 20px; }
	.grjb-banner > .grjb-banner-inner > p { margin-bottom: 4px; }
	.grjb-banner-text { display: none; }
	.grjb-banner-form { display: block; }
	.grjb .grjb-banner-form select, .grjb .grjb-banner-form input[type=email] { display: block; width: 100% !important; height: 44px !important; margin-top: 10px !important; }
	.grjb .grjb-banner-form .grjb-btn { display: block; width: 100%; height: 48px; line-height: 48px; margin-top: 10px; font-size: 16px; }
}
@media (max-width: 600px) {
	.grjb-heading { font-size: 21px; }
	.grjb-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px; }
	.grjb-card-title { font-size: 17px; }
	.grjb-card-side { grid-column: 2; text-align: left; }
	.grjb-card-apply { display: inline-block; }
	.grjb-card-side { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
	.grjb-age { margin-right: 0; }
	.grjb-filters { padding: 16px; }
	.grjb-employer .grjb-row { grid-template-columns: 1fr; }
	.grjb-company-head { flex-direction: column; }
	.grjb-apply-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--grjb-border); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
	.grjb-apply-bar .grjb-btn { min-height: 48px; line-height: 48px; padding-top: 0; padding-bottom: 0; font-size: 16px; }
	.grjb-job { padding-bottom: 90px; }
	.grjb-apply-box .grjb-btn-block { display: none; }
	.grjb-logo-large { width: 72px; height: 72px; }
	.grjb-apply-box { padding: 16px; }
}

/* Theme paragraphs and headings carry their own margins; inside the board, ours win. */
.grjb .grjb-heading { margin-top: 0; }
.grjb .grjb-results > :first-child, .grjb .grjb-sidebar > :first-child { margin-top: 0; }
.grjb .grjb-card-body > :last-child { margin-bottom: 0; }