:root {
  --brand-blue: #0aadeb;
  --brand-blue-dark: #0886b8;
  --ink: #1c2b36;
  --ink-soft: #4a5a66;
  --bg-soft: #f4fafd;
  --border-soft: #e1edf3;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
}

h1, h2, h3, h4, .brand-text {
  font-family: "Poppins", "Open Sans", sans-serif;
  font-weight: 600;
  color: var(--ink);
}

a {
  color: var(--brand-blue-dark);
  text-decoration: none;
}
a:hover {
  color: var(--brand-blue);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand-blue);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 2000;
}
.skip-link:focus {
  left: 0;
}

/* Top utility bar */
.top-bar {
  background: var(--ink);
  color: #dbe7ee;
  font-size: 0.85rem;
}
.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.top-bar a {
  color: #dbe7ee;
}
.top-bar a:hover {
  color: var(--brand-blue);
}
.top-bar-sep {
  margin: 0 0.5rem;
  opacity: 0.5;
}
.top-bar-social a {
  margin-left: 1rem;
}

/* Header / nav */
.site-header {
  border-bottom: 1px solid var(--border-soft);
}
.site-navbar {
  padding: 0.85rem 0;
}
.brand-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
}
.brand-accent {
  color: var(--brand-blue);
}
.navbar-nav .nav-link {
  color: var(--ink);
  font-weight: 600;
  padding: 0.65rem 0.9rem;
}
.navbar-nav .nav-link:hover {
  color: var(--brand-blue);
}
/* Current-page indicator: an inset bottom "underline" via box-shadow rather than a
   ::after pseudo-element — the Search Jobs item is a .dropdown-toggle, and Bootstrap's
   dropdown caret arrow already owns that element's ::after for its little triangle.
   Using ::after here too didn't replace the caret rule, it merged with it property by
   property (box-shadow avoids that collision entirely, and doesn't affect layout). */
.navbar-nav .nav-link.active {
  color: var(--brand-blue-dark);
  box-shadow: inset 0 -2px 0 0 var(--brand-blue);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--brand-blue);
  color: #fff;
}
@media (max-width: 991.98px) {
  /* The collapsed menu is a full-width stacked list, so a left accent bar reads better
     than a bottom underline there. */
  .navbar-nav .nav-link.active {
    box-shadow: none;
    border-left: 3px solid var(--brand-blue);
    padding-left: calc(0.5rem - 3px);
    background: var(--bg-soft);
  }
}
/* Roomier tap targets for the collapsed mobile menu (below the lg breakpoint) */
@media (max-width: 991.98px) {
  .navbar-collapse {
    padding: 0.5rem 0 1rem;
  }
  .navbar-nav .nav-link {
    padding: 0.75rem 0.5rem;
  }
  .navbar-nav .dropdown-item {
    padding: 0.6rem 0.5rem;
  }
  .navbar-nav .btn-cta {
    display: inline-block;
    margin-top: 0.5rem;
  }
}

.btn-cta {
  background: var(--brand-blue);
  border: 2px solid var(--brand-blue);
  color: #fff !important;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
}
.btn-cta:hover {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  color: #fff;
}
.btn-outline-cta {
  background: transparent;
  border: 2px solid var(--brand-blue);
  color: var(--brand-blue-dark) !important;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
}
.btn-outline-cta:hover {
  background: var(--brand-blue);
  color: #fff !important;
}
.btn-outline-cta-light {
  background: transparent;
  border: 2px solid #fff;
  color: #fff !important;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
}
.btn-outline-cta-light:hover {
  background: #fff;
  color: var(--brand-blue-dark) !important;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--bg-soft) 0%, #ffffff 60%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.hero-inner {
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}
.hero h1 {
  font-size: 2.6rem;
  /* Per Tom (2026-09-09): the heading was covering the ESP logo baked into the top-center of
     hero_image_male_nurse_05jan2023.jpg - pushed down to clear it. Originally 96px; Tom bumped
     this to 7.5rem (120px) himself on 2026-09-10 after testing on desktop, and added the white
     text color below (the default dark ink color was hard to read over the photo). */
  margin-top: 7.5rem;
  margin-bottom: 1rem;
  color: #fff;
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Sections */
.section {
  padding: 4rem 0;
}
.section-title {
  font-size: 1.9rem;
  margin-bottom: 2.25rem;
}

/* States grid */
.states-section {
  background: var(--bg-soft);
}
.state-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.state-pill {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-weight: 600;
  color: var(--ink);
}
.state-pill:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue-dark);
}
.state-grid-note {
  margin-top: 1.75rem;
}

/* Secondary-page titlebar (About Us and future inner pages use the real site's
   "cspt-titlebar" pattern: a short banner with a background image and page title,
   in place of the homepage's larger hero).

   Height/crop model rewritten 2026-09-09 per Tom: "I don't think they should be cropped
   vertically." The previous version used a small fixed height (padding: 3.5rem 0) at full
   page width; with background-size:cover, that made every photo scale up to cover the box's
   width and, since the box was proportioned much shorter/wider than any of the actual photos,
   crop away most of the image's height regardless of background-position (an earlier attempt
   just shifted which slice of the photo got cropped, not whether it did).

   Fixed properly this time using the photos' own real pixel dimensions, pulled from
   local.sql's _wp_attachment_metadata rather than guessed: About Us, Nurses, Search Jobs, and
   Contact Us's photos are all uploaded at exactly 1920x450 - a deliberate, consistent "banner"
   crop the real site's content editors made themselves - so aspect-ratio below matches that
   exactly, and with cover this needs zero crop in either direction for those four pages.
   Careers' photo (esp_staff_full.jpg, 1920x480) is close but not identical, so it sets its own
   aspect-ratio inline to match exactly (see Careers.cshtml's comment) rather than accept the
   ~7% vertical crop the shared 450 ratio would otherwise cost it.

   The theme-fallback image (mobile_homepage2_768x300.jpg, used on Apply Now/Healthcare
   Staffing/Thank You/Thank You For Contacting Us/the 3 legal pages) is a genuinely different
   shape (768x300, much less wide relative to its height) - forcing it into this same
   aspect-ratio would still crop it vertically, and stretching every other page's banner out to
   match its shape instead would make banners wildly inconsistent heights across the site.
   Those 7 pages use .page-titlebar--contain instead (see below), which shows the whole photo
   with no crop in either dimension, letterboxed with the brand color rather than cut. */
.page-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 1920 / 450;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-blue-dark);
  text-align: center;
}
.page-titlebar--contain {
  /* Shows mobile_homepage2_768x300.jpg's full frame with no crop, pillarboxed in the brand
     color rather than stretched or cut - see the class-level comment above. Because this box's
     own shape (1920/450) is proportionally wider than the photo (768/300), "contain" scales the
     photo to the box's full HEIGHT and pillarboxes the sides, not the top/bottom - the photo
     covers the box's entire vertical span, so "top third of the box" and "top third of the
     photo" are the same thing (relevant to .page-titlebar--clear-photo-subject below). */
  background-size: contain;
  background-repeat: no-repeat;
}
.page-titlebar::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Darkening overlay for text legibility over the banner photo. Applies to every
     .page-titlebar, including the pillarboxed bars on .page-titlebar--contain pages - as of
     2026-09-09 that's every inner page. Reduced from 0.55 to 0.35 per Tom (2026-09-09) - the
     original was noticeably darkening lighter photos like the Nurses page's start_here.jpg. */
  background: rgba(28, 43, 54, 0.35);
}
.page-titlebar-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Flex items default to min-width:auto, which refuses to shrink below the h1's unwrapped
     content width - without this, long headings (e.g. Apply Now's) overflow the viewport on
     narrow phones instead of wrapping, now that .page-titlebar is a flex container. */
  min-width: 0;
}
.page-titlebar h1 {
  color: #fff;
  font-size: 2.4rem;
  margin: 0;
}
/* Apply Now and Healthcare Staffing Agency (2026-09-10, per Tom): both use the fallback photo
   set on .page-titlebar--contain above, whose subject (a person) sits centered/lower in frame -
   the site-wide default of centering the heading both ways put these two pages' headings (the
   two longest of any fallback-image page) squarely over their face. Tom's own first attempt
   fixed it on desktop with a manual <br/> plus a fixed `left: -600px`, but a hardcoded pixel
   shift like that doesn't scale down - on a 375px-wide phone it pushed the heading almost
   entirely off-screen to the left, exactly the "halfway off the screen" he reported.

   This does the same job responsively instead: left-align the heading and cap its width so a
   long heading wraps onto several short lines near the left edge of the banner, rather than one
   long centered line that has to be shoved sideways as a block - which is also what Tom
   confirmed the real live site actually does on phones with this same image (wraps into ~4
   lines, left-aligned) rather than shrinking text to fit one line. Works identically at every
   viewport width with no per-page magic-number offset, and no <br/> needed - the max-width does
   the line-breaking for whatever the heading text actually is.

   Placed after the base .page-titlebar h1 rule above (not earlier, next to .page-titlebar--
   contain) deliberately - that base rule's `margin: 0` shorthand has the same specificity as
   this class's margin-top, so it has to come later in the file to win the cascade. */
.page-titlebar--clear-photo-subject {
  align-items: flex-start;
}
.page-titlebar--clear-photo-subject .page-titlebar-inner {
  text-align: left;
}
.page-titlebar--clear-photo-subject h1 {
  max-width: 480px;
  /* Nudges the heading down from the box's top edge into the top third rather than jammed
     against it - see the mobile media query below for the smaller-box equivalent. This is a
     first-pass estimate against a placeholder image in this sandbox (no access to the real
     photo) - let me know how much more/less to shift once you can see it against the real
     photo and I'll adjust, same as the other titlebar tuning above. */
  margin-top: 2rem;
  /* Per Tom (2026-09-10), on the real photo in full-screen view: left-aligning flush against
     the container's own left edge sat about an inch (96px = 6rem) too far left. Nudged right by
     that much; cancelled below for phones, where the heading is shrinking instead (see below) -
     an inch of margin would eat too much of an already-narrow phone screen. */
  margin-left: 6rem;
}

/* About Us intro (two-column: verbatim copy + staff photo, matches the real page's
   vc_row/vc_column layout) */
.about-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.about-intro p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.about-intro img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.about-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 700px;
  margin: 0 auto;
}
.about-contact-box {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
}
.about-contact-box h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.about-contact-box p {
  margin: 0;
  color: var(--ink-soft);
  white-space: pre-line;
}
@media (max-width: 767px) {
  .about-intro, .about-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Contact Us — reuses .about-contact-box for a single centered card rather than the
   2-column .about-contact-grid, since this page only has one thing to show (a phone
   number), and an empty second grid column would look unbalanced. */
.contact-box-single {
  max-width: 320px;
  margin: 0 auto;
}
.contact-box-single .about-contact-box p a {
  color: var(--brand-blue-dark);
  font-size: 1.2rem;
  font-weight: 600;
}

/* Careers */
/* Careers' titlebar photo (esp_staff_full.jpg) is 1920x480, close to but not identical to the
   1920/450 default used by the other titlebar pages - see .page-titlebar's class-level comment.
   This USED to be set inline on the <section> in Careers.cshtml, but an inline style always
   beats a class selector regardless of media query, which quietly broke Careers on phones: the
   mobile media query below resets .page-titlebar's aspect-ratio to auto specifically to avoid
   combining it with that breakpoint's min-height:140px (combining the two makes the browser
   recompute the box's WIDTH from the ratio - 140 * 1920/480 = 560px - instead of just clamping
   height). The inline style couldn't be overridden by that media query, so Careers kept
   aspect-ratio:1920/480 *and* picked up min-height:140px, blowing its banner out to 560px wide
   inside a 375px viewport - confirmed by comparing computed styles against Apply Now (no
   per-page override, unaffected). That's what Tom saw as the heading sitting "off to the right,
   not centered" on phones (2026-09-09). Moving the ratio into this ordinary class fixes it: same
   specificity as .page-titlebar itself, so the later mobile media query rule overrides it via
   normal cascade order same as every other titlebar page. */
.page-titlebar--careers {
  aspect-ratio: 1920 / 480;
}
/* Per Tom (2026-09-09): move the Careers heading down 35px in large/desktop screen views.
   Uses transform rather than margin-top: .page-titlebar centers its content vertically via
   flexbox (align-items:center), so a margin-top on the h1 grows its flex item's box and gets
   split symmetrically by that centering - only about half of it (17.5px) actually showed up as
   visible movement. transform doesn't affect box size/centering, so the full 35px shows.
   Scoped to this page only, and cancelled back to none in the mobile media query below - a 35px
   push isn't needed (and crowds the heading more) inside the compact 140px-tall mobile banner. */
.page-titlebar--careers h1 {
  transform: translateY(35px);
}
.careers-intro {
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}
.careers-logo {
  max-width: 260px;
  height: auto;
  margin: 2rem auto 0;
  display: block;
}
.position-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.position-card-header {
  margin-bottom: 1rem;
}
.position-card-header h3 {
  margin: 0 0 0.35rem;
}
.position-meta {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
}
.position-card h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
}
.position-card p, .position-card li {
  color: var(--ink-soft);
}
.position-card ul {
  padding-left: 1.25rem;
}
.position-card li {
  margin-bottom: 0.35rem;
}
.position-card .btn-cta {
  display: inline-block;
}
/* Apply-by-email contact row (Careers page): the mailto: button plus the address itself as
   plain text with a copy-to-clipboard button, per Tom (2026-09-09) - the mailto: link doesn't
   work for everyone (no default mail client, webmail-only setups, etc.), so the address needs
   to be usable without it. */
.hr-apply-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.hr-apply-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.copy-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 0.35rem;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}
.copy-icon-btn:hover, .copy-icon-btn:focus-visible {
  color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}
.copy-confirm {
  color: var(--brand-blue-dark);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.testimonial-card {
  background: var(--bg-soft);
  border-left: 4px solid var(--brand-blue);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 0;
}
.testimonial-card p {
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}
.testimonial-card footer {
  font-weight: 600;
  color: var(--ink);
}

/* CTA band - color #0f8ab9 matches the real "footer-big-text-area-bgcolor-custom" theme mod */
.cta-band {
  background-color: #0f8ab9;
  color: #fff;
  padding: 3.5rem 0;
  text-align: center;
}
.cta-band h2 {
  color: #fff;
  margin-bottom: 1.5rem;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: #cdd9e1;
  padding-top: 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.footer-follow-heading {
  margin-top: 1.5rem;
}
.joint-commission-seal {
  display: block;
  margin-top: 1rem;
}
.footer-col h5 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 0.55rem;
}
.footer-col a {
  color: #cdd9e1;
}
.footer-col a:hover {
  color: var(--brand-blue);
}
.footer-brand .brand-text {
  color: #fff;
}
.footer-brand p {
  color: #9fb0bb;
  margin-top: 0.75rem;
}
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem 0;
  font-size: 0.85rem;
  color: #9fb0bb;
}
.footer-legal-links a {
  color: #9fb0bb;
  margin-left: 1rem;
}
.footer-legal-links a:first-child {
  margin-left: 0;
}

/* Jobs search page */
.jobs-hero {
  background: linear-gradient(135deg, var(--bg-soft) 0%, #ffffff 60%);
  padding: 3rem 0;
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
}
.jobs-hero h1 {
  font-size: 2.1rem;
  margin: 0;
}
.jobs-filter-section {
  padding: 2rem 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-soft);
}
.jobs-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.filter-keywords {
  flex: 1 1 220px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 0.95rem;
}
.filter-select {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 0.95rem;
  background: #fff;
}
.jobs-list-section {
  padding: 2.5rem 0 4rem;
}
.jobs-result-count {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.jobs-none-found {
  text-align: center;
  color: var(--ink-soft);
  padding: 3rem 0;
}
.jobs-error {
  background: #fdecea;
  color: #7a2e27;
  border: 1px solid #f3c8c3;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.job-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.job-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 0.6rem;
  padding: 1.1rem 1.4rem;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.job-card:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 2px 10px rgba(10,173,235,0.12);
  color: var(--ink);
}
.job-title {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
}
.job-shift {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0.6rem 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.job-card-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.job-comp {
  color: var(--brand-blue-dark);
}
.jobs-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 2rem;
}
.jobs-pagination .page-link {
  border: 1px solid var(--border-soft);
  border-radius: 0.4rem;
  padding: 0.4rem 0.75rem;
  color: var(--ink);
}
.jobs-pagination .page-link.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

/* Job detail page */
.job-detail-tagline {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.job-detail-layout {
  max-width: 760px;
}
.job-detail-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 0.6rem;
  padding: 2rem;
}
.job-detail-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin: 0 0 1.75rem;
}
.job-detail-table > div {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 0.6rem;
}
.job-detail-table dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: 0 0 0.2rem;
}
.job-detail-table dd {
  margin: 0;
  font-weight: 600;
}
.job-detail-description {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.job-detail-dates {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 575px) {
  .job-detail-table {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero {
    padding: 3rem 0;
  }
  .hero h1 {
    font-size: 2rem;
    /* Per Tom, iteratively tuned viewing a phone emulator (2026-09-09: 56px -> 128px; 2026-09-10:
       after his desktop-only margin-top edit above to 7.5rem, the heading sat about half an inch
       (48px) too high on phones - this override is independent of the base rule's margin-top
       above (the media query replaces it entirely rather than adding to it), so the desktop
       change alone didn't move mobile at all. 128 + 48 = 176px. If it's still off, let me know
       how much more/less and I'll adjust further; still can't see the real device from here. */
    margin-top: 176px;
  }
  .page-titlebar {
    /* aspect-ratio (set above for zero-crop banners) combined with a min-height taller than
       the ratio would give at phone widths makes browsers recompute WIDTH from that min-height
       instead of clamping height alone - which blew the banner past the viewport. Dropping the
       ratio below this breakpoint and using a plain min-height instead avoids that: a small,
       deliberate exception to "no vertical crop" for narrow phones only, where the exact-ratio
       height would otherwise be too short to hold a heading anyway. */
    aspect-ratio: auto;
    min-height: 140px;
  }
  .page-titlebar h1 {
    font-size: 1.9rem;
  }
  .page-titlebar--careers h1 {
    transform: none;
  }
  .page-titlebar--clear-photo-subject h1 {
    /* Smaller top offset to match the much shorter 140px mobile box - see the base rule above
       for the full explanation. max-width isn't overridden here; the phone-width .container is
       already narrower than 480px, so it has no effect and the heading just wraps to the
       container's own width, same as the real site's phone behavior. */
    margin-top: 0.75rem;
    /* The base rule's inch-of-left-margin (see above) is desktop-only feedback - cancelled here
       so phones keep the full width for text. */
    margin-left: 0;
    /* Per Tom (2026-09-10): even left-aligned and wrapped onto a few lines, the heading was
       still completely covering the photo's subject on a phone - the 140px-tall mobile banner
       just doesn't leave much room next to a heading this size. Shrunk to 60% of the size it
       was rendering at here (1.9rem, from the general .page-titlebar h1 mobile rule above). */
    font-size: calc(1.9rem * 0.6);
  }
  .section-title {
    font-size: 1.55rem;
  }
  .jobs-hero h1 {
    font-size: 1.7rem;
  }
}

/* Phones: the footer's 2-up grid squeezes the brand column (logo + about copy + seal)
   into an unreadably narrow strip, so stack every column full-width below ~576px. */
@media (max-width: 575px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .site-footer {
    padding-top: 2rem;
  }
}

/* Blog listing page */
.blog-card-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 820px;
  margin: 0 auto;
}
.blog-card {
  display: flex;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 0.6rem;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.blog-card:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 2px 10px rgba(10,173,235,0.12);
}
.blog-card-image-link {
  position: relative;
  flex: 0 0 220px;
  display: block;
}
.blog-card-image-link img {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  display: block;
}
.blog-card-date {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  text-align: center;
  line-height: 1.1;
}
.blog-card-date-day {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
}
.blog-card-date-month {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-card-body {
  padding: 1.1rem 1.4rem 1.1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-card-title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.blog-card-title a {
  color: var(--ink);
}
.blog-card-readmore {
  font-weight: 600;
  color: var(--brand-blue-dark);
  font-size: 0.9rem;
}

/* Blog post detail page */
.blog-post-layout {
  max-width: 780px;
}
.blog-post-article h1 {
  margin-bottom: 0.5rem;
}
.blog-post-meta {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}
.blog-post-meta a {
  color: var(--brand-blue-dark);
}
.blog-post-updated {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0.15rem 0 0;
}
.blog-post-featured-image {
  margin: 1.5rem 0;
}
.blog-post-featured-image img {
  width: 100%;
  border-radius: 0.6rem;
}
.blog-post-body {
  line-height: 1.75;
  color: var(--ink);
}
.blog-post-body h2 {
  margin-top: 2rem;
  font-size: 1.4rem;
}
.blog-post-body h3 {
  margin-top: 1.5rem;
  font-size: 1.15rem;
}
.blog-post-body p {
  margin: 0 0 1.1rem;
}
.blog-post-body ul,
.blog-post-body ol {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
}
.blog-post-body a:not(.btn) {
  color: var(--brand-blue-dark);
  text-decoration: underline;
}
.blog-figure {
  margin: 1.5rem 0;
}
.blog-figure img {
  width: 100%;
  border-radius: 0.6rem;
  display: block;
}
.blog-figure figcaption {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  text-align: center;
}
.blog-inline-btn {
  display: inline-block;
  margin: 0.5rem 0 1.25rem;
}
.blog-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}
.blog-tag {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.blog-related {
  margin: 2.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}
.blog-related-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.blog-related-card {
  display: block;
  border: 1px solid var(--border-soft);
  border-radius: 0.6rem;
  overflow: hidden;
  color: var(--ink);
}
.blog-related-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}
.blog-related-card span {
  display: block;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
}

@media (max-width: 575px) {
  .blog-card {
    flex-direction: column;
  }
  .blog-card-image-link {
    flex-basis: auto;
  }
  .blog-card-image-link img {
    min-height: 180px;
  }
  .blog-card-body {
    padding: 1rem 1.25rem 1.25rem;
  }
  .blog-related-list {
    grid-template-columns: 1fr;
  }
}

/* Healthcare Staffing Agency / Request Staff page */
.staff-intro {
  max-width: 780px;
  margin: 0 auto;
}
.staff-intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.staff-form-section {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-soft);
}
.staff-request-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}
.form-field-full {
  grid-column: 1 / -1;
}
.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.required-mark {
  color: #c0392b;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  font-family: inherit;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
}
.form-textarea {
  resize: vertical;
}
.field-error {
  display: block;
  color: #c0392b;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.staff-thankyou {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.staff-thankyou p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Phones: full-bleed buttons read better than a centered pill pair at this width. */
@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
  }
}

/* Stack the two-column staff request form on phones */
@media (max-width: 575px) {
  .staff-request-form {
    grid-template-columns: 1fr;
  }
}

/* Job detail page: per-job "Connect with a Recruiter" CTA, separate from the site-wide band */
.job-detail-apply-cta {
  display: inline-block;
  margin-bottom: 1.5rem;
}

/* Apply Now page */
.apply-now-intro {
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.apply-now-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  max-width: 900px;
}
.apply-now-form .form-field-full {
  grid-column: 1 / -1;
}
.checkbox-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.form-file {
  width: 100%;
  padding: 0.55rem 0;
  font-size: 0.9rem;
}
.apply-now-divider {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 0.5rem 0;
}
.apply-now-sms-notice {
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Thank You page (Apply Now confirmation) */
.thank-you-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 3rem;
}
.thank-you-copy p {
  color: var(--ink-soft);
  line-height: 1.7;
}
.thank-you-copy ul {
  color: var(--ink-soft);
  line-height: 1.9;
}
.thank-you-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--bg-soft);
}
.thank-you-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.thank-you-social {
  text-align: center;
}
.thank-you-social p {
  color: var(--ink-soft);
}
.thank-you-social-icons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  font-weight: 600;
}

@media (max-width: 767px) {
  .thank-you-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575px) {
  .apply-now-form {
    grid-template-columns: 1fr;
  }
}

/* Job detail page: embedded quick-apply form (2026-09-08, per Tom — replaces the earlier
   redirect to /apply-now). Reuses the same .form-field/.form-input/.form-select/.form-file/
   .field-error/.required-mark rules already shared by the other form pages. */
.quick-apply-section {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-soft);
}
.quick-apply-intro {
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.quick-apply-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  max-width: 900px;
}
.quick-apply-form .form-field-full {
  grid-column: 1 / -1;
}
/* The "New to ESP..." toggle reveals this wrapper's fields. display:contents (only while
   visible) lets those fields become direct grid items of .quick-apply-form, so they line up
   in the same 2-column layout as everything above instead of being boxed into one grid cell. */
.quick-apply-extra:not([hidden]) {
  display: contents;
}

/* Toggle-switch styling, shared by the "New to ESP..." switch and the two optional opt-in
   switches below it — a slider control reads more clearly as "optional, flip if you want" than
   a plain checkbox does, which matches Tom's request that none of these three be required. */
.toggle-switch-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 400;
  cursor: pointer;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch-slider {
  position: absolute;
  inset: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: background-color 0.15s ease;
}
.toggle-switch-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.toggle-switch input:checked + .toggle-switch-slider {
  background-color: var(--brand-blue);
}
.toggle-switch input:checked + .toggle-switch-slider::before {
  transform: translateX(18px);
}
.toggle-switch input:focus-visible + .toggle-switch-slider {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .quick-apply-form {
    grid-template-columns: 1fr;
  }
}

/* Nurses page (/nurses, real post ID 707) — alternating section background, matching the
   .states-section convention used elsewhere for visual rhythm between full-width sections. */
.nurses-section-alt {
  background: var(--bg-soft);
}
/* Two-column rows pairing a video with a benefits list; reverses column order for the
   Per Diem section to match the real page's own left/right arrangement there. */
.nurses-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}
.nurses-row-reverse .video-embed {
  order: 2;
}
/* Real page uses Font Awesome check icons (not loaded in this project) in brand blue; a
   CSS-only checkmark bullet achieves the same visual intent without the extra dependency. */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.check-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--brand-blue);
  font-weight: 700;
}
/* Responsive YouTube embed, generalized from the Thank You page's video wrapper so any page
   can use it. Default is a standard 16:9 box; --vertical is for the two embedded YouTube
   Shorts (el_aspect="916" in the real page's shortcode), which are actually 9:16. */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--bg-soft);
}
.video-embed--vertical {
  max-width: 320px;
  padding-top: 177.78%;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.nurses-apply-video {
  max-width: 640px;
  margin: 2rem auto 0;
}

@media (max-width: 767px) {
  .nurses-row {
    grid-template-columns: 1fr;
  }
  .nurses-row-reverse .video-embed {
    order: 0;
  }
  .video-embed--vertical {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* Legal pages (Privacy Notice, Do Not Sell My Information, Terms of Use) - long verbatim
   legal text pulled straight from the WordPress content, so this is plain typographic styling
   only (readable line length, spacing for headings/lists/the CCPA rights table), not a design
   meant to editorialize the content itself. */
.legal-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
}
.legal-content h2 {
  margin-top: 0;
}
.legal-content p {
  margin: 0 0 1.1rem;
}
.legal-content ul {
  margin: 0 0 1.1rem;
  padding-left: 1.5rem;
}
.legal-content ul ul {
  margin: 0.5rem 0 0;
}
.legal-content li {
  margin-bottom: 0.5rem;
}
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
}
.legal-content table th,
.legal-content table td {
  border: 1px solid #d8dde2;
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.legal-content table thead td {
  background: var(--bg-soft);
  font-weight: 600;
}