/**
 * Cxs site chrome (custom header + footer).
 * Only the inert design tokens are shipped globally.
 */

/* ===== Design tokens (inert, global) ===== */
:root {
  --cxs-ink: #0f1722;
  --cxs-navy: #16263b;
  --cxs-slate: #475569;
  --cxs-muted: #7a8898;
  --cxs-teal: #0ca2d4;
  --cxs-teal-d: #0879a2;
  --cxs-teal-soft: #e3f6fc;
  --cxs-teal-line: #bde8f4;
  --cxs-line: #e5eaf0;
  --cxs-panel: #f4f7fa;
  --cxs-white: #fff;
  --cxs-cta: linear-gradient(90deg, #39b8eb, #1c8ad2);
  --cxs-shadow: 0 6px 22px rgba(15, 23, 34, 0.1);
  --cxs-radius: 12px;
}

/* ===== iOS Safari text-autosizing guard (site-wide) =====
   Astra's stylesheet normally carries this normalize rule, but inc/debloat.php
   strips Astra from the custom templates (jobs archive/search, single jobs,
   landings, blog), leaving them exposed to Mobile Safari's automatic text
   boost — it inflates small text (e.g. the 10.5px "Sort by radius" label)
   while fixed-px boxes stay put, clipping their contents. Harmless where
   Astra still loads; it sets the same value. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ===== iOS Safari focus-zoom guard (site-wide) =====
   Mobile Safari auto-zooms the page whenever a text-entry field is focused with
   a computed font-size under 16px, and never zooms back out. Our compact search,
   radius, sort, blog-search and Contact Form 7 fields all sit below that floor
   on mobile, so this pins every focusable text field to a 16px minimum below the
   921px breakpoint. Scoped to mobile (desktop styling untouched) and to
   text-entry controls only, so buttons/checkboxes/radios keep their own sizing.
   max(16px, 1rem) keeps the floor even where the root font is shrunk (Astra
   sets html to 91.2% on mobile). !important is required to beat per-component
   rules; the primary search fields are also bumped at their source so this is a
   safety net, not the only line of defence. */
@media (max-width: 921.98px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input:not([type]),
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }
}

/* The pre-Anders chrome (.site-header, .drawer, .scrim, .hamburger, .mega,
   .navlink) used to live here. It styled markup rendered by four functions in
   inc/site-chrome.php that nothing called; both are gone. The live header is
   assets/css/site-header.css. */

/* ===== Footer ===== */
.footwrap {
  container-type: inline-size;
}
.ftr {
  background: linear-gradient(180deg, #16263b, #0f1d2e);
  color: #fff;
}
.ftr a {
  color: #aebed0;
  text-decoration: none;
  transition: 0.15s;
}
.ftr a:hover {
  color: #fff;
}
.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ftr-main {
  padding: 32px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.ftr-brand {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.ftr-logo {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 11px;
}
.ftr-logo .mk {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #39b8eb, #1c8ad2);
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 800;
  color: #fff;
  font-size: 20px;
}
.ftr-logo .wm {
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ftr-logo .wm b {
  display: block;
  font-size: 16px;
  color: #fff;
}
.ftr-logo .wm span {
  display: block;
  font-size: 11px;
  color: #8fa6bd;
  letter-spacing: 0.18em;
}
.ftr-tag {
  color: #9fb2c6;
  font-size: 13px;
  max-width: 300px;
  line-height: 1.5;
}
/* Footer logo image (replaces the text wordmark). */
.ftr-logo-img {
  height: 38px;
  width: auto;
  max-width: 220px;
  display: block;
}

.ftr-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ftr-contact li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: #aebed0;
}
.ftr-contact svg {
  width: 15px;
  height: 15px;
  color: #39b8eb;
  flex: none;
  margin-top: 2px;
}
.ftr-contact a {
  color: #aebed0;
}
/* Primary phone: stepped up from the 13px contact default so it owns the hierarchy. */
.ftr-contact li.ftr-phone {
  align-items: center;
}
.ftr-contact li.ftr-phone svg {
  width: 18px;
  height: 18px;
  margin-top: 0;
}
.ftr-contact li.ftr-phone a {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.2;
}
.ftr-contact li.ftr-phone a:hover {
  color: #39b8eb;
}
.ftr-social {
  display: flex;
  gap: 8px;
}
.ftr-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  color: #cdd9e6;
}
.ftr-social a:hover {
  background: #39b8eb;
  border-color: #39b8eb;
  color: #fff;
  transform: translateY(-2px);
}
.ftr-social svg {
  width: 15px;
  height: 15px;
}
.ftr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 18px;
}
.ftr-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.ftr-col li {
  margin-bottom: 8px;
}
.ftr-col a {
  font-size: 13px;
}
/* Right rail: Joint Commission seal + app badges (5th grid column at >=700px). */
.ftr-rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.ftr .jc {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.ftr .jc .seal {
  width: 58px;
  height: 58px;
  flex: none;
  display: block;
}
.ftr .jc .jctext {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: #aebed0;
  max-width: 160px;
}
.ftr .appblock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ftr .appblock h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.ftr .apps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.ftr .badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.15s;
}
.ftr .badge img {
  width: 135px;
  height: auto;
  display: block;
}
.ftr .badge:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}
.ftr-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  text-align: center;
}
.ftr-legal .eoe {
  font-size: 12px;
  color: #8fa6bd;
}
.ftr-legal .ll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ftr-legal .ll a {
  font-size: 12px;
}
.ftr-legal .cr {
  font-size: 12px;
  color: #7a8ea3;
}
@container (min-width: 700px) {
  .ftr-main {
    padding: 40px 40px 28px;
    display: grid;
    grid-template-columns: 1.55fr 0.9fr 0.9fr 0.9fr 1.05fr;
    gap: 36px;
  }
  .ftr-brand {
    grid-column: 1;
  }
  .ftr-cols {
    display: contents;
  }
  .ftr-col {
    min-width: 0;
  }
  .ftr-rail {
    grid-column: 5;
  }
  .ftr .jc .jctext {
    max-width: none;
  }
  .ftr-legal {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 16px 40px;
  }
}
/* Rail wraps to a row (seal beside the app badges) under the 700px container breakpoint. */
@container (max-width: 699px) {
  .ftr-rail {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 34px;
    align-items: flex-start;
  }
}

/* ===== Accessibility polish: keyboard focus + reduced motion ===== */
.site-header a:focus-visible,
.site-header button:focus-visible,
.drawer a:focus-visible,
.drawer button:focus-visible,
.footwrap a:focus-visible,
.footwrap button:focus-visible {
  outline: 3px solid var(--cxs-teal);
  outline-offset: 2px;
  border-radius: 6px;
}
/* The search field shows its focus on the container (.drawer-search). */
.drawer-search input:focus-visible {
  outline: none;
  border: none;
}
.footwrap a:focus-visible,
.footwrap button:focus-visible,
.ftr-social a:focus-visible {
  outline-color: #39b8eb;
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header *,
  .drawer,
  .drawer *,
  .scrim,
  .footwrap *,
  .seg-ind {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .site-header .cta:hover,
  .site-header .mega .feature .go:hover,
  .site-header .mega .feature .go:hover svg,
  .ftr-social a:hover,
  .ftr .badge:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Sitewide Anders Group compact chrome

   The current header/footer template parts use the same compact Anders Group
   chrome introduced with the blog redesign. These rules are deliberately
   scoped to their new roots so existing page, job, landing, and Elementor
   component styles keep their own tokens and layout systems.
   ========================================================================== */
body.cxs-site-theme {
  /* Usable content width. Shells add their responsive side gutters outside
     this value so the header/footer align with the wider blog content rather
     than making 1240px include (and lose) up to 64px of padding. */
  --ag-shell-content-max: 1240px;
  --ag-ink: #011624;
  --ag-navy: #033d63;
  --ag-slate: #33475b;
  --ag-muted: #526374;
  --ag-accent: #044f81;
  --ag-accent-soft: #f0f4f7;
  --ag-accent-line: #cddce6;
  --ag-action: #7fff00;
  --ag-action-line: #cfe6d2;
  --ag-canvas: #f7fdf3;
  --ag-card: #ffffff;
  --ag-panel: #f4f7f9;
  --ag-line: #e7eef3;
  --ag-line-2: #f1f5f8;
  --ag-on-dark: #ffffff;
  --ag-on-dark-2: #d6e4ee;
  --ag-on-dark-3: #8fb0c6;
  --ag-line-on-dark: rgba(255, 255, 255, 0.16);
  --ag-scrim: rgba(3, 29, 47, 0.55);

  /* The header's utility strip. A gradient rather than flat --ag-navy: the
     strip is the one place the brand's two blues appear together, and the
     white bar below it needs the top edge to read as a distinct band. */
  --ag-cta: linear-gradient(110deg, #033d63, #044f81);
  --ag-on-navy: #e6eaec;
  --ag-on-navy-hi: #f7f9f9;
  --ag-on-navy-dim: #95a5af;

  --ag-radius-sm: 9px;
  --ag-radius-btn: 11px;
  --ag-radius: 14px;
  --ag-radius-lg: 18px;
  --ag-shadow-md: 0 6px 22px rgba(1, 22, 36, 0.1);
  --ag-shadow-lg: 0 18px 48px rgba(1, 22, 36, 0.16);

  /* Tabular figures, so the phone number does not shift width between the
     strip and the bar as the two copies of it swap at 768px. */
  --ag-tnum: "tnum" 1, "lnum" 1;

  /* Sticky chrome. The bar is one height at every width -- a single number is
     what makes the offset knowable for anything that sticks beneath it. At
     rest on desktop the utility strip adds 40px on top; it rolls away on
     scroll, so --ag-header-h is what a sticky element should actually clear. */
  --ag-header-h: 64px;
  --ag-header-h-rest: 104px;

  /* Semantic layers. Anchored at the values the chrome already used (1100 for
     the bar, 1200 for the skip link) so Elementor widgets, cxs-select at 1320
     and the jobs filter sheet at 1500 all keep their existing relationship to
     the header. Named, so the next layer is not another guessed number. */
  --ag-z-header: 1100;
  --ag-z-panel: 1105;
  --ag-z-scrim: 1190;
  --ag-z-drawer: 1200;
  --ag-z-skip: 1210;
}

body.cxs-site-theme .cxs-site-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

body.cxs-site-theme .cxs-siteheader,
body.cxs-site-theme .cxs-siteheader *,
body.cxs-site-theme .site-footer,
body.cxs-site-theme .site-footer * {
  box-sizing: border-box;
  font-family: var(--cxs-font-family);
}

body.cxs-site-theme .cxs-siteheader ul,
body.cxs-site-theme .site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.cxs-site-theme .cxs-siteheader .shell,
body.cxs-site-theme .site-footer .shell {
  width: 100%;
  max-width: calc(var(--ag-shell-content-max) + 32px);
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
}

body.cxs-site-theme .skip-link {
  position: absolute;
  top: -56px;
  left: 12px;
  z-index: var(--ag-z-skip);
  padding: 10px 16px;
  border-radius: var(--ag-radius-sm);
  background: var(--ag-accent);
  color: var(--ag-on-dark);
  font-family: var(--cxs-font-family);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
}

body.cxs-site-theme .skip-link:focus {
  top: 12px;
}

/* The header's own surface, bar, nav, actions and drawer live in
   assets/css/site-header.css -- see that file's banner. What stays here is
   only what the header shares with the footer: the box-sizing and font
   inheritance above, the shell width, the .logo lockup below, the focus ring
   and the reduced-motion block. */

body.cxs-site-theme .cxs-siteheader .logo,
body.cxs-site-theme .hdr-drawer .logo,
body.cxs-site-theme .site-footer .logo {
  min-height: 44px;
  width: auto;
  display: inline-flex;
  flex: none;
  align-items: center;
  background-image: none;
  color: var(--ag-ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

body.cxs-site-theme .site-footer {
  width: 100%;
  max-width: none;
  margin-top: auto;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  background: #194a7a;
  border-top: 3px solid #7fff00;
  color: #bfd3e4;
  font-size: 14.5px;
  line-height: 1.6;
}

/* The footer follows the supplied Anders reference: one centered 1260px
   content measure, with the main grid and legal row sharing its edges. */
body.cxs-site-theme .site-footer .shell {
  width: 100%;
  max-width: 1260px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

body.cxs-site-theme .site-footer .footer-main {
  padding-top: 52px;
  padding-bottom: 40px;
}

body.cxs-site-theme .site-footer .footer-main > .footer-grid {
  width: 100%;
  max-width: 1260px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

body.cxs-site-theme .site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 0.95fr;
  gap: 38px;
  align-items: start;
}

body.cxs-site-theme .site-footer .footer-brand {
  min-width: 0;
}

body.cxs-site-theme .site-footer .footer-logo {
  width: fit-content;
  display: block;
  margin-bottom: 16px;
  color: #fff;
}

body.cxs-site-theme .site-footer .footer-logo img {
  width: auto;
  max-width: 100%;
  height: 34px;
  display: block;
  filter: brightness(0) invert(1);
}

body.cxs-site-theme .site-footer .footer-pitch {
  max-width: 300px;
  margin: 0 0 18px;
  color: #b4d2ea;
  font-size: 14px;
  line-height: 1.6;
}

body.cxs-site-theme .site-footer .footer-contact {
  margin-bottom: 18px;
}

body.cxs-site-theme .site-footer .footer-contact a {
  display: block;
  padding: 3px 0;
  color: #bfd3e4;
  font-size: 14.5px;
  text-decoration: none;
}

body.cxs-site-theme .site-footer .footer-contact a strong,
body.cxs-site-theme .site-footer .footer-contact a b {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

body.cxs-site-theme .site-footer .footer-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #bfd3e4;
  font-size: 15px;
  line-height: 1.5;
}

body.cxs-site-theme .site-footer .footer-address svg {
  flex: none;
  margin-top: 3px;
  color: #7fff00;
}

body.cxs-site-theme .site-footer .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

body.cxs-site-theme .site-footer .footer-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  color: #bfd3e4;
  text-decoration: none;
}

body.cxs-site-theme .site-footer .footer-social a:hover {
  background: #7fff00;
  color: #011624;
}

body.cxs-site-theme .site-footer .footer-social svg {
  width: 17px;
  height: 17px;
}

body.cxs-site-theme .site-footer .footer-group {
  min-width: 0;
}

body.cxs-site-theme .site-footer .footer-group > :is(h2, h3, h4, h5) {
  margin: 0 0 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  margin-bottom: 13px;
  text-transform: uppercase;
}

body.cxs-site-theme .site-footer .footer-nav-column .footer-group + .footer-group {
  margin-top: 26px;
}

body.cxs-site-theme .site-footer .footer-group a {
  display: block;
  padding: 5px 0;
  color: #bfd3e4;
  text-decoration: none;
}

body.cxs-site-theme .site-footer .footer-group a:hover {
  color: #7fff00;
}

body.cxs-site-theme .site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 1px solid #2c5a87;
  color: #a9bfd2;
  font-size: 13px;
}

body.cxs-site-theme .site-footer > .footer-bottom {
  width: 100%;
  max-width: 1260px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 24px;
  padding-left: 24px;
}

body.cxs-site-theme .site-footer .footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

body.cxs-site-theme .site-footer .footer-bottom a {
  color: inherit;
  text-decoration: none;
}

body.cxs-site-theme .site-footer .footer-bottom a:hover {
  color: #fff;
}

body.cxs-site-theme .cxs-siteheader a:focus-visible,
body.cxs-site-theme .site-footer a:focus-visible {
  outline: 3px solid var(--ag-action);
  outline-offset: 2px;
  border-radius: 5px;
}

@media (min-width: 768px) {
  body.cxs-site-theme .cxs-siteheader .shell {
    max-width: calc(var(--ag-shell-content-max) + 48px);
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (min-width: 1024px) {
  body.cxs-site-theme .cxs-siteheader .shell {
    max-width: calc(var(--ag-shell-content-max) + 64px);
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media (max-width: 1140px) {
  body.cxs-site-theme .site-footer .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }

  body.cxs-site-theme .site-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.cxs-site-theme .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.cxs-site-theme .site-footer .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cxs-site-theme .site-footer .footer-main > .footer-grid,
  body.cxs-site-theme .site-footer > .footer-bottom {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cxs-site-theme .skip-link,
  body.cxs-site-theme .cxs-siteheader *,
  body.cxs-site-theme .site-footer * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
