/* Barracuda Staffing & Consulting: forms, search, job board and Insights list.
   Colours follow the site: navy #08344a, blue #43b4cb, mint #99d5ca. */
:root {
  --sh-navy: var(--primary-color, #08344a);
  --sh-blue: var(--secondary-color, #43b4cb);
  --sh-ink: #1b2b34;
  --sh-muted: #4a5a63;
  --sh-line: #9fb3bf;
  --sh-soft: #f3f8fa;
  --sh-bad: #b42318;
  --sh-radius: 8px;
}

.sh-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sh-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sh-form[hidden], .sh-form [hidden], .sh-search-wrap [hidden], .sh-more-wrap[hidden], .jobs-empty[hidden], .jobs-clear[hidden] { display: none !important; }

/* ---------------------------------------------------------------- forms */
.sh-form { width: 100%; max-width: 760px; margin: 0 auto; text-align: left; color: var(--sh-ink); font-size: 17px; line-height: 1.5; }
.sh-form *, .sh-form *::before, .sh-form *::after { box-sizing: border-box; }
.sh-form p, .sh-form label, .sh-form legend { margin: 0; text-align: left; }
.sh-note { margin: 0 0 20px !important; color: var(--sh-muted); font-size: 16px; }
.sh-section { margin: 0 0 36px; padding: 0; border: 0; }
.sh-section-title { margin: 0 0 6px; color: var(--sh-navy); font-size: 26px; line-height: 1.25; font-weight: 600; text-align: left; }
.sh-intro { margin: 0 0 18px !important; color: var(--sh-muted); max-width: 60ch; }
.sh-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 20px; }
.sh-grid > * { grid-column: span 6; }
.sh-grid > .sh-half { grid-column: span 3; }
.sh-grid > .sh-third { grid-column: span 2; }
.sh-extra { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 20px; }
.sh-extra > * { grid-column: span 6; }
.sh-extra > .sh-half { grid-column: span 3; }
.sh-sub { margin: 10px 0 0; padding-top: 18px; border-top: 1px solid #dfe8ec; color: var(--sh-navy); font-size: 19px; line-height: 1.3; font-weight: 600; text-align: left; }
.sh-section-title + .sh-grid > .sh-sub:first-child, .sh-intro + .sh-grid > .sh-sub:first-child { border-top: 0; padding-top: 0; }

.sh-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sh-field > label, .sh-legend { display: block; width: auto; padding: 0; margin: 0; color: var(--sh-navy); font-size: 16px; font-weight: 600; text-align: left; float: none; }
.sh-req { color: var(--sh-bad); margin-left: 3px; font-weight: 700; }
.sh-opt { color: var(--sh-muted); font-weight: 400; }
.sh-help { color: var(--sh-muted); font-size: 15px; line-height: 1.4; }
.sh-form input[type=text], .sh-form input[type=email], .sh-form input[type=tel], .sh-form input[type=date],
.sh-form input[type=search], .sh-form select, .sh-form textarea {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: #fff; color: var(--sh-ink);
  font: inherit; font-size: 16px; line-height: 1.4; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.sh-form select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--sh-navy) 50%), linear-gradient(135deg, var(--sh-navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.sh-form textarea { min-height: 110px; resize: vertical; }
.sh-form input:focus, .sh-form select:focus, .sh-form textarea:focus { outline: 3px solid rgba(67, 180, 203, .45); outline-offset: 1px; border-color: var(--sh-blue); }
.sh-choices { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.sh-choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; font-weight: 400; color: var(--sh-ink); cursor: pointer; width: auto; }
.sh-choice input, .sh-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--sh-navy); flex: none; }
.sh-check { display: flex; align-items: flex-start; gap: 12px; }
.sh-check input { margin-top: 3px; }
.sh-check label { font-weight: 400; color: var(--sh-ink); font-size: 16px; width: auto; text-align: left; }
.sh-cert { max-height: 240px; overflow: auto; padding: 14px 16px; border: 1px solid #d5e0e5; border-radius: var(--sh-radius); background: var(--sh-soft); font-size: 15px; line-height: 1.55; color: var(--sh-ink); }
.sh-cert:focus { outline: 3px solid rgba(67, 180, 203, .45); }

.sh-form input[type=file] { display: block; width: 100%; padding: 12px; border: 1px dashed var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-soft); font: inherit; font-size: 16px; color: var(--sh-ink); cursor: pointer; }
.sh-form input[type=file]::file-selector-button { margin-right: 14px; padding: 9px 16px; border: 0; border-radius: 6px; background: var(--sh-navy); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sh-upload-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; color: var(--sh-muted); }
.sh-upload-status:empty { display: none; }
.sh-upload-status.is-done { color: var(--sh-navy); font-weight: 600; }
.sh-link-btn { padding: 4px 0; border: 0; background: none; color: var(--sh-navy); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

.sh-invalid input:not([type=hidden]):not([type=radio]):not([type=checkbox]), .sh-invalid select, .sh-invalid textarea { border-color: var(--sh-bad); border-width: 2px; }
.sh-err { color: var(--sh-bad); font-size: 15px; font-weight: 600; line-height: 1.4; }
.sh-err::before { content: "Error: "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.sh-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 8px; }
.sh-submit, .sh-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px; margin: 0;
  border: 2px solid var(--sh-navy); border-radius: var(--sh-radius); background: var(--sh-navy); color: #fff;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s;
}
.sh-submit:hover, .sh-submit:focus-visible { background: var(--sh-blue); border-color: var(--sh-blue); color: var(--sh-navy); }
.sh-submit:disabled { opacity: .7; cursor: progress; }
.sh-btn-secondary { background: #fff; color: var(--sh-navy); }
.sh-btn-secondary:hover, .sh-btn-secondary:focus-visible { background: var(--sh-navy); color: #fff; }
.sh-addmore { grid-column: span 6; }
.sh-status { min-height: 1.5em; font-size: 16px; color: var(--sh-muted); }
.sh-status.is-err { color: var(--sh-bad); font-weight: 600; }
.sh-status:empty { min-height: 0; }

.sh-thanks { max-width: 760px; margin: 0 auto; padding: 28px 24px; border: 2px solid var(--sh-blue); border-radius: 12px; background: var(--sh-soft); text-align: center; color: var(--sh-ink); font-size: 17px; }
.sh-thanks:focus { outline: 3px solid rgba(67, 180, 203, .45); outline-offset: 2px; }
.sh-thanks p { margin: 0; line-height: 1.5; }
.sh-thanks .sh-thanks-title { margin-bottom: 6px; color: var(--sh-navy); font-size: 26px; font-weight: 700; }

/* the form pages (job application, service writer) */
.sh-form-page .sh-form-wrap { max-width: 800px; margin: 0 auto; padding: 32px 20px 80px; }
.sh-form-page .sh-form, .sh-form-page .sh-thanks { max-width: none; }
.sh-lede { max-width: 60ch; margin: 0 0 28px; font-size: 18px; line-height: 1.5; color: var(--sh-ink); }
.sh-lede a { color: var(--sh-navy); font-weight: 600; }

/* embedded forms inside the old two-column panels */
.contactPanel .sh-form, .home9 .sh-form, .col-2 .sh-form { max-width: none; }
/* the message box grows to fit its form (the old page fixed every box at 480px, which hid the Send
   button), and the LinkedIn and map boxes beside it grow to the same height */
html .home9 > div.message { height: auto; padding: 24px; }
html .home9 > div:not(.message) { height: auto; min-height: 480px; position: relative; }
html .home9 > div:not(.message) iframe { position: absolute; inset: 0; height: 100%; }
.home9 .sh-section-title, .contactPanel .sh-section-title { text-align: center; }

@media (max-width: 640px) {
  .sh-grid > .sh-half, .sh-grid > .sh-third, .sh-extra > .sh-half { grid-column: span 6; }
  .sh-section-title { font-size: 23px; }
  .sh-submit { width: 100%; }
  .sh-form-page .sh-form-wrap { padding: 24px 16px 56px; }
}

/* ---------------------------------------------------------------- job board */
/* before the script runs (and without it): strong enough to beat a restyle of the cards */
:root body .job-listings .job-card[hidden], :root body #post-summaries .blog-post-card[hidden], .job-card[hidden], .blog-post-card[hidden] { display: none !important; }
.jobs-results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.jobs-clear { color: var(--sh-navy); font-weight: 600; text-decoration: underline; }
.jobs-empty { margin: 0 0 20px; padding: 24px; border: 1px dashed var(--sh-line); border-radius: 12px; background: var(--sh-soft); text-align: center; font-size: 17px; line-height: 1.5; color: var(--sh-ink); }
.jobs-empty p { margin: 0 0 6px; }
.jobs-empty a { color: var(--sh-navy); font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------------- Insights list */
.sh-more-wrap { flex-basis: 100%; width: 100%; margin: 8px 0 32px; text-align: center; }

/* ---------------------------------------------------------------- search page */
.sh-search-wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 80px; color: var(--sh-ink); font-size: 17px; line-height: 1.5; }
.sh-search-form { margin: 0 0 18px; }
.sh-search-label { display: block; margin: 0 0 8px; color: var(--sh-navy); font-size: 20px; font-weight: 600; }
.sh-search-row { display: flex; gap: 10px; }
.sh-search-row input { flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; border: 1px solid var(--sh-line); border-radius: var(--sh-radius); font: inherit; font-size: 17px; color: var(--sh-ink); background: #fff; }
.sh-search-row input:focus { outline: 3px solid rgba(67, 180, 203, .45); outline-offset: 1px; border-color: var(--sh-blue); }
.sh-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; }
.sh-kinds label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--sh-line); border-radius: 999px; background: #fff; color: var(--sh-navy); font-size: 16px; font-weight: 600; cursor: pointer; }
.sh-kinds input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sh-kinds label:has(input:checked) { background: var(--sh-navy); border-color: var(--sh-navy); color: #fff; }
.sh-kinds label:has(input:focus-visible) { outline: 3px solid rgba(67, 180, 203, .45); outline-offset: 2px; }
.sh-count { margin: 0 0 12px; font-weight: 600; color: var(--sh-navy); }
.sh-results { list-style: none; margin: 0; padding: 0; }
.sh-result { padding: 16px 0; border-top: 1px solid #dfe8ec; }
.sh-result-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--sh-navy); text-decoration: none; }
.sh-result-link:hover .sh-result-title, .sh-result-link:focus-visible .sh-result-title { text-decoration: underline; }
.sh-result-title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.sh-kind { display: inline-block; padding: 1px 10px; border: 1px solid var(--sh-line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--sh-muted); white-space: nowrap; }
.sh-result-meta { margin: 4px 0 0; font-size: 15px; color: var(--sh-muted); }
.sh-result-text { margin: 4px 0 0; max-width: 70ch; }
.sh-result mark { background: rgba(153, 213, 202, .55); color: inherit; padding: 0 1px; }
.sh-result-more { padding: 18px 0; border-top: 1px solid #dfe8ec; }
.sh-search-help { margin-top: 18px; padding: 18px 20px; border-radius: 12px; background: var(--sh-soft); }
.sh-search-help p { margin: 0 0 6px; }
.sh-search-help a, .sh-search-wrap noscript a { color: var(--sh-navy); font-weight: 600; text-decoration: underline; }
@media (max-width: 640px) {
  .sh-search-row { flex-direction: column; }
  .sh-search-row .sh-submit { width: 100%; }
  .sh-search-wrap { padding: 24px 16px 56px; }
}
/* job board pages (Oct 28 2026): Previous, page numbers, Next; 44px targets */
.sh-pager { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 8px 0 32px; }
.sh-pager[hidden] { display: none !important; }
.sh-pager a, .sh-pager-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--sh-line); border-radius: 10px; background: #fff; color: var(--sh-navy); font-weight: 600; text-decoration: none; font-size: 17px; }
.sh-pager a:hover, .sh-pager a:focus-visible { background: var(--sh-soft); }
.sh-pager a[aria-current="page"] { background: var(--sh-navy); border-color: var(--sh-navy); color: #fff; }
.sh-pager-gap { border-color: transparent; background: none; min-width: 20px; padding: 0; }
.sh-pager-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
/* on a phone, just Previous and Next (Brian, Oct 28 2026) */
@media (max-width: 600px) {
  .sh-pager { grid-template-columns: 1fr 1fr; }
  .sh-pager-nums { display: none; }
  .sh-pager > :last-child { justify-self: end; }
  .sh-pager > :first-child { justify-self: start; }
}

/* Cloudflare Turnstile above each form's button (Oct 30 2026) */
.sh-turnstile { margin: 14px 0 10px; min-height: 65px; }